Unified the search interaction of the list page. (#2207)

Co-authored-by: Logic <[email protected]>
apache · Jul 5, 2024 · b9f8b7d · b9f8b7d
1 parent 5b44a95
commit b9f8b7d
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 61 deletions.
diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
@@ -75,16 +75,12 @@
       <nz-option [nzLabel]="'alert.status.3' | i18n" [nzValue]="3"></nz-option>
     </nz-select>
     <app-multi-func-input
-      groupStyle="width: 200px;"
-      inputStyle="text-align: center"
+      groupStyle="width: 250px;"
       class="mobile-hide"
       [placeholder]="'alert.center.search' | i18n"
       [(value)]="filterContent"
       (valueChange)="loadAlertsTable()"
     />
-    <button nz-button nzType="primary" (click)="loadAlertsTable()" class="mobile-hide">
-      {{ 'common.search' | i18n }}
-    </button>
   </ng-template>
 </app-toolbar>
 

diff --git a/web-app/src/app/routes/alert/alert-converge/alert-converge.component.html b/web-app/src/app/routes/alert/alert-converge/alert-converge.component.html
@@ -41,18 +41,12 @@
     </button>
   </ng-template>
   <ng-template #right>
-    <input
-      style="width: 200px; text-align: center"
-      nz-input
-      type="text"
+    <app-multi-func-input
+      groupStyle="width: 250px;"
       [placeholder]="'alert.converge.name' | i18n"
-      nzSize="default"
-      (keyup.enter)="loadAlertConvergeTable()"
-      [(ngModel)]="search"
+      [(value)]="search"
+      (valueChange)="loadAlertConvergeTable()"
     />
-    <button nz-button nzType="primary" (click)="loadAlertConvergeTable()">
-      {{ 'common.search' | i18n }}
-    </button>
   </ng-template>
 </app-toolbar>
 

diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -63,18 +63,12 @@
     </nz-dropdown-menu>
   </ng-template>
   <ng-template #right>
-    <input
-      style="width: 200px; text-align: center"
-      nz-input
-      type="text"
+    <app-multi-func-input
+      groupStyle="width: 250px;"
       [placeholder]="'alert.setting.search' | i18n"
-      nzSize="default"
-      (keyup.enter)="loadAlertDefineTable()"
-      [(ngModel)]="search"
+      [(value)]="search"
+      (valueChange)="loadAlertDefineTable()"
     />
-    <button nz-button nzType="primary" (click)="loadAlertDefineTable()">
-      {{ 'common.search' | i18n }}
-    </button>
   </ng-template>
 </app-toolbar>
 

diff --git a/web-app/src/app/routes/alert/alert-silence/alert-silence.component.html b/web-app/src/app/routes/alert/alert-silence/alert-silence.component.html
@@ -41,18 +41,12 @@
     </button>
   </ng-template>
   <ng-template #right>
-    <input
-      style="width: 200px; text-align: center"
-      nz-input
-      type="text"
+    <app-multi-func-input
+      groupStyle="width: 250px;"
       [placeholder]="'alert.silence.name' | i18n"
-      nzSize="default"
-      (keyup.enter)="loadAlertSilenceTable()"
-      [(ngModel)]="search"
+      [(value)]="search"
+      (valueChange)="loadAlertSilenceTable()"
     />
-    <button nz-button nzType="primary" (click)="loadAlertSilenceTable()">
-      {{ 'common.search' | i18n }}
-    </button>
   </ng-template>
 </app-toolbar>
 

diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
@@ -30,6 +30,7 @@
   [module_name]="'menu.monitor.center'"
   [icon_name]="'laptop'"
 ></app-help-message-show>
+
 <nz-divider></nz-divider>
 
 <app-toolbar>
@@ -102,24 +103,19 @@
       <nz-option [nzLabel]="'monitor.status.paused' | i18n" [nzValue]="0"></nz-option>
     </nz-select>
     <app-multi-func-input
-      groupStyle="width: 90px;"
-      inputStyle="text-align: center"
+      groupStyle="width: 120px;"
       class="mobile-hide"
       [placeholder]="'monitors.search.tag' | i18n"
       [(value)]="tag"
       (valueChange)="onFilterSearchMonitors()"
     />
     <app-multi-func-input
       groupStyle="width: 180px;"
-      inputStyle="text-align: center"
       class="mobile-hide"
       [placeholder]="'monitors.search.placeholder' | i18n"
       [(value)]="filterContent"
       (valueChange)="onFilterSearchMonitors()"
     />
-    <button class="mobile-hide" nz-button nzType="primary" (click)="onFilterSearchMonitors()">
-      {{ 'common.search' | i18n }}
-    </button>
   </ng-template>
 </app-toolbar>
 

diff --git a/web-app/src/app/routes/setting/collector/collector.component.html b/web-app/src/app/routes/setting/collector/collector.component.html
@@ -53,19 +53,13 @@
     </button>
   </ng-template>
   <ng-template #right>
-    <input
+    <app-multi-func-input
       class="mobile-hide"
-      style="width: 300px; text-align: center"
-      nz-input
-      type="text"
+      groupStyle="width: 250px;"
       [placeholder]="'collector.name' | i18n"
-      nzSize="default"
-      (keyup.enter)="loadCollectorsTable()"
-      [(ngModel)]="search"
+      [(value)]="search"
+      (valueChange)="loadCollectorsTable()"
     />
-    <button nz-button nzType="primary" (click)="loadCollectorsTable()" class="mobile-hide">
-      {{ 'common.search' | i18n }}
-    </button>
   </ng-template>
 </app-toolbar>
 

diff --git a/web-app/src/app/routes/setting/tags/tags.component.html b/web-app/src/app/routes/setting/tags/tags.component.html
@@ -42,19 +42,13 @@
     </button>
   </ng-template>
   <ng-template #right>
-    <input
+    <app-multi-func-input
       class="mobile-hide"
-      style="width: 300px; text-align: center"
-      nz-input
-      type="text"
+      groupStyle="width: 250px;"
       [placeholder]="'tag.search' | i18n"
-      nzSize="default"
-      (keyup.enter)="loadTagsTable()"
-      [(ngModel)]="search"
+      [(value)]="search"
+      (valueChange)="loadTagsTable()"
     />
-    <button nz-button nzType="primary" (click)="loadTagsTable()" class="mobile-hide">
-      {{ 'common.search' | i18n }}
-    </button>
   </ng-template>
 </app-toolbar>