[manager,webapp]feature 监控列表支持过滤搜索 (#29)

manager/src/main/java/com/usthe/manager/controller/MonitorsController.java

@@ -38,6 +38,8 @@ import static org.springframework.http.MediaType.APPLICATION_JSON_VALUE;
 @RequestMapping(path = "/monitors", produces = {APPLICATION_JSON_VALUE})
 public class MonitorsController {
 
+    private static final byte ALL_MONITOR_STATUS = 9;
+
     @Autowired
     private MonitorService monitorService;
 
@@ -48,6 +50,7 @@ public class MonitorsController {
             @ApiParam(value = "监控类型", example = "linux") @RequestParam(required = false) final String app,
             @ApiParam(value = "监控名称，模糊查询", example = "linux-127.0.0.1") @RequestParam(required = false) final String name,
             @ApiParam(value = "监控Host，模糊查询", example = "127.0.0.1") @RequestParam(required = false) final String host,
+            @ApiParam(value = "监控状态 0:未监控,1:可用,2:不可用,3:不可达,4:挂起,9:全部状态", example = "1") @RequestParam(required = false) final Byte status,
             @ApiParam(value = "排序字段，默认id", example = "name") @RequestParam(defaultValue = "id") final String sort,
             @ApiParam(value = "排序方式，asc:升序，desc:降序", example = "desc") @RequestParam(defaultValue = "desc") final String order,
             @ApiParam(value = "列表当前分页", example = "0") @RequestParam(defaultValue = "0") int pageIndex,
@@ -66,6 +69,10 @@ public class MonitorsController {
                 Predicate predicateApp = criteriaBuilder.equal(root.get("app"), app);
                 andList.add(predicateApp);
             }
+            if (status != null && status >= 0 && status < ALL_MONITOR_STATUS) {
+                Predicate predicateStatus = criteriaBuilder.equal(root.get("status"), status);
+                andList.add(predicateStatus);
+            }
             Predicate[] andPredicates = new Predicate[andList.size()];
             Predicate andPredicate = criteriaBuilder.and(andList.toArray(andPredicates));
 

web-app/src/app/layout/basic/widgets/search.component.ts

@@ -90,7 +90,7 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy {
       )
       .subscribe(value => {
         // 远程加载搜索数据
-        let searchMonitors$ = this.monitorSvc.searchMonitors(value, value, 0, 10).subscribe(
+        let searchMonitors$ = this.monitorSvc.searchMonitors(null, value, 9, 0, 10).subscribe(
           message => {
             this.loading = false;
             searchMonitors$.unsubscribe();

web-app/src/app/routes/alert/alert-center/alert-center.component.html

@@ -37,6 +37,7 @@
     type="text"
     placeholder="搜索告警内容"
     nzSize="default"
+    (keyup.enter)="onFilterSearchAlerts()"
     [(ngModel)]="filterContent"
   />
   <nz-select

web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html

@@ -12,31 +12,57 @@
   </nz-breadcrumb-item>
 </nz-breadcrumb>
 <nz-divider></nz-divider>
-<button nz-button nzType="primary">
+
-  <a routerLink="/monitors/new" [queryParams]="{ app: app }">
+<div>
-    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+  <button nz-button nzType="primary">
-    新增 {{ 'monitor.app.' + app | i18n }}
+    <a routerLink="/monitors/new" [queryParams]="{ app: app }">
-  </a>
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-</button>
+      新增 {{ 'monitor.app.' + app | i18n }}
-<button nz-button nzType="primary" (click)="onEditMonitor()">
+    </a>
-  <i nz-icon nzType="edit" nzTheme="outline"></i>
+  </button>
-  编辑
+  <button nz-button nzType="primary" (click)="onEditMonitor()">
-</button>
+    <i nz-icon nzType="edit" nzTheme="outline"></i>
-<button nz-button nzType="primary" (click)="onDeleteMonitors()">
+    编辑
-  <i nz-icon nzType="delete" nzTheme="outline"></i>
+  </button>
-  删除
+  <button nz-button nzType="primary" (click)="onDeleteMonitors()">
-</button>
+    <i nz-icon nzType="delete" nzTheme="outline"></i>
-<button nz-button nzType="primary" (click)="onEnableManageMonitors()">
+    删除
-  <i nz-icon nzType="up-circle" nzTheme="outline"></i>
+  </button>
-  启用监控
+  <button nz-button nzType="primary" (click)="onEnableManageMonitors()">
-</button>
+    <i nz-icon nzType="up-circle" nzTheme="outline"></i>
-<button nz-button nzType="primary" (click)="onCancelManageMonitors()">
+    启用监控
-  <i nz-icon nzType="down-circle" nzTheme="outline"></i>
+  </button>
-  取消监控
+  <button nz-button nzType="primary" (click)="onCancelManageMonitors()">
-</button>
+    <i nz-icon nzType="down-circle" nzTheme="outline"></i>
-<button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
+    取消监控
-  <i nz-icon nzType="sync" nzTheme="outline"></i>
+  </button>
-</button>
+  <button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
+    <i nz-icon nzType="sync" nzTheme="outline"></i>
+  </button>
+
+  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchMonitors()"> 搜索 </button>
+  <input
+    style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
+    nz-input
+    type="text"
+    placeholder="搜索监控"
+    nzSize="default"
+    (keyup.enter)="onFilterSearchMonitors()"
+    [(ngModel)]="filterContent"
+  />
+  <nz-select
+    style="margin-right: 10px; float: right; width: 120px"
+    nzAllowClear
+    [nzPlaceHolder]="'监控状态过滤'"
+    [(ngModel)]="filterStatus"
+  >
+    <nz-option nzLabel="全部状态" nzValue="9"></nz-option>
+    <nz-option nzLabel="监控正常" nzValue="1"></nz-option>
+    <nz-option nzLabel="不可用" nzValue="2"></nz-option>
+    <nz-option nzLabel="不可达" nzValue="3"></nz-option>
+    <nz-option nzLabel="未监控" nzValue="0"></nz-option>
+  </nz-select>
+</div>
 
 <nz-table
   #fixedTable

web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts

@@ -30,6 +30,9 @@ export class MonitorListComponent implements OnInit {
   monitors!: Monitor[];
   tableLoading: boolean = true;
   checkedMonitorIds = new Set<number>();
+  // 过滤搜索
+  filterContent!: string;
+  filterStatus: number = 9;
 
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(paramMap => {
@@ -42,6 +45,33 @@ export class MonitorListComponent implements OnInit {
     });
   }
 
+  onFilterSearchMonitors() {
+    this.tableLoading = true;
+    let filter$ = this.monitorSvc
+      .searchMonitors(this.app, this.filterContent, this.filterStatus, this.pageIndex - 1, this.pageSize)
+      .subscribe(
+        message => {
+          filter$.unsubscribe();
+          this.tableLoading = false;
+          this.checkedAll = false;
+          this.checkedMonitorIds.clear();
+          if (message.code === 0) {
+            let page = message.data;
+            this.monitors = page.content;
+            this.pageIndex = page.number + 1;
+            this.total = page.totalElements;
+          } else {
+            console.warn(message.msg);
+          }
+        },
+        error => {
+          this.tableLoading = false;
+          filter$.unsubscribe();
+          console.error(error.msg);
+        }
+      );
+  }
+
   sync() {
     this.loadMonitorTable();
   }

web-app/src/app/service/monitor.service.ts

@@ -88,17 +88,28 @@ export class MonitorService {
     return this.http.get<Message<Page<Monitor>>>(monitors_uri, options);
   }
 
-  public searchMonitors(monitorName: string, monitorHost: string, pageIndex: number, pageSize: number): Observable<Message<Page<Monitor>>> {
+  public searchMonitors(
+    app: string | null,
+    searchValue: string,
+    status: number,
+    pageIndex: number,
+    pageSize: number
+  ): Observable<Message<Page<Monitor>>> {
     pageIndex = pageIndex ? pageIndex : 0;
     pageSize = pageSize ? pageSize : 8;
+    status = status ? status : 9;
     // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象
     let httpParams = new HttpParams();
     httpParams = httpParams.appendAll({
-      name: monitorName,
+      name: searchValue,
-      host: monitorHost,
+      host: searchValue,
+      status: status,
       pageIndex: pageIndex,
       pageSize: pageSize
     });
+    if (app != undefined) {
+      httpParams = httpParams.append('app', app);
+    }
     const options = { params: httpParams };
     return this.http.get<Message<Page<Monitor>>>(monitors_uri, options);
   }