From fbd0f5da3b2486e3923ff75c66a4ed3d64ace8b0 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Sun, 19 Dec 2021 16:08:18 +0800
Subject: [PATCH] =?UTF-8?q?[manager,webapp]=20=E5=85=A8=E5=B1=80=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E6=90=9C=E7=B4=A2=E6=A1=86=E5=8A=9F=E8=83=BD=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/MonitorsController.java        | 16 +++++---
 .../layout/basic/widgets/search.component.ts  | 38 +++++++++++++++----
 web-app/src/app/service/monitor.service.ts    | 16 ++++++++
 3 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/manager/src/main/java/com/usthe/manager/controller/MonitorsController.java b/manager/src/main/java/com/usthe/manager/controller/MonitorsController.java
index fa6d442..2df5281 100644
--- a/manager/src/main/java/com/usthe/manager/controller/MonitorsController.java
+++ b/manager/src/main/java/com/usthe/manager/controller/MonitorsController.java
@@ -65,13 +65,19 @@ public class MonitorsController {
                 Predicate predicateApp = criteriaBuilder.equal(root.get("app"), app);
                 predicate = criteriaBuilder.and(predicateApp);
             }
-            if (name != null && !"".equals(name)) {
+            if (name != null && !"".equals(name) && host != null && !"".equals(host)) {
                 Predicate predicateName = criteriaBuilder.like(root.get("name"), "%" + name + "%");
-                predicate = criteriaBuilder.and(predicateName);
-            }
-            if (host != null && !"".equals(host)) {
                 Predicate predicateHost = criteriaBuilder.like(root.get("host"), "%" + host + "%");
-                predicate = criteriaBuilder.and(predicateHost);
+                predicate = criteriaBuilder.or(predicateName, predicateHost);
+            } else {
+                if (host != null && !"".equals(host)) {
+                    Predicate predicateHost = criteriaBuilder.like(root.get("host"), "%" + host + "%");
+                    predicate = criteriaBuilder.and(predicateHost);
+                }
+                if (name != null && !"".equals(name)) {
+                    Predicate predicateName = criteriaBuilder.like(root.get("name"), "%" + name + "%");
+                    predicate = criteriaBuilder.and(predicateName);
+                }
             }
             return predicate;
         };
diff --git a/web-app/src/app/layout/basic/widgets/search.component.ts b/web-app/src/app/layout/basic/widgets/search.component.ts
index cd3be88..dc2a43c 100644
--- a/web-app/src/app/layout/basic/widgets/search.component.ts
+++ b/web-app/src/app/layout/basic/widgets/search.component.ts
@@ -12,6 +12,8 @@ import {
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import {MonitorService} from "../../../service/monitor.service";
+import {Monitor} from "../../../pojo/Monitor";
 
 @Component({
   selector: 'header-search',
@@ -34,8 +36,14 @@ import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
         [attr.placeholder]="'menu.search.placeholder' | i18n"
       />
     </nz-input-group>
-    <nz-autocomplete nzBackfill #auto>
-      <nz-auto-option *ngFor="let i of options" [nzValue]="i">{{ i }}</nz-auto-option>
+    <nz-autocomplete nzBackfill="false" nzDefaultActiveFirstOption #auto>
+      <nz-auto-option *ngFor="let option of options" [nzValue]="option.id" [nzLabel]="option.name">
+        <a [routerLink]="['/monitors/' + option.id]">
+          监控名称: {{ option.name }}
+          <span style="left:50% ; position: absolute;">监控Host: {{option.host}}</span>
+          <span style="right: 10px; position: absolute;"><i nz-icon nzType="arrow-right" nzTheme="outline"></i></span>
+        </a>
+      </nz-auto-option>
     </nz-autocomplete>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -43,7 +51,7 @@ import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 export class HeaderSearchComponent implements AfterViewInit, OnDestroy {
   q = '';
   qIpt: HTMLInputElement | null = null;
-  options: string[] = [];
+  options: Monitor[] = [];
   search$ = new BehaviorSubject('');
   loading = false;
 
@@ -65,7 +73,9 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy {
   }
   @Output() readonly toggleChangeChange = new EventEmitter<boolean>();
 
-  constructor(private el: ElementRef<HTMLElement>, private cdr: ChangeDetectorRef) {}
+  constructor(private el: ElementRef<HTMLElement>,
+              private cdr: ChangeDetectorRef,
+              private monitorSvc : MonitorService) {}
 
   ngAfterViewInit(): void {
     this.qIpt = this.el.nativeElement.querySelector('.ant-input') as HTMLInputElement;
@@ -80,9 +90,23 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy {
         })
       )
       .subscribe(value => {
-        this.options = value ? [value, value + value, value + value + value] : [];
-        this.loading = false;
-        this.cdr.detectChanges();
+        // 远程加载搜索数据
+        let searchMonitors$ = this.monitorSvc.searchMonitors(value, value, 0, 10)
+          .subscribe(message => {
+            this.loading = false;
+            searchMonitors$.unsubscribe();
+            if (message.code === 0) {
+              let page = message.data;
+              this.options = page.content;
+              this.cdr.detectChanges();
+            } else {
+              console.warn(message.msg);
+            }
+          }, error => {
+            this.loading = false;
+            searchMonitors$.unsubscribe();
+            console.error(error.msg);
+          })
       });
   }
 
diff --git a/web-app/src/app/service/monitor.service.ts b/web-app/src/app/service/monitor.service.ts
index a8b2336..5b5f422 100644
--- a/web-app/src/app/service/monitor.service.ts
+++ b/web-app/src/app/service/monitor.service.ts
@@ -88,6 +88,22 @@ 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>>> {
+    pageIndex = pageIndex ? pageIndex : 0;
+    pageSize = pageSize ? pageSize : 8;
+    // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象
+    let httpParams = new HttpParams();
+    httpParams = httpParams.appendAll({
+      'name': monitorName,
+      'host': monitorHost,
+      'pageIndex': pageIndex,
+      'pageSize': pageSize
+    });
+    const options = { params: httpParams };
+    return this.http.get<Message<Page<Monitor>>>(monitors_uri, options);
+  }
+
   public getMonitorMetricData(monitorId: number, metric: string) : Observable<Message<any>> {
     return this.http.get<Message<any>>(`/monitors/${monitorId}/metrics/${metric}`);
   }