apache · zqr10159 · Jul 5, 2024 · Jul 5, 2024 · Jul 5, 2024
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
@@ -38,17 +38,16 @@
     <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
+    <button *ngIf="isDefaultListMenu || app == undefined" nz-button nzType="primary" (click)="onAppSwitchModalOpen()">
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+      {{ 'monitors.new-monitor' | i18n }}
+    </button>
     <button *ngIf="app != undefined" nz-button nzType="primary">
       <a routerLink="/monitors/new" [queryParams]="{ app: app }">
         <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
         {{ 'monitors.new' | i18n }} {{ 'monitor.app.' + app | i18n }}
       </a>
     </button>
-
-    <button *ngIf="app == undefined" nz-button nzType="primary" (click)="onAppSwitchModalOpen()">
-      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
-      {{ 'monitors.new-monitor' | i18n }}
-    </button>
     <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
       <span nz-icon nzType="ellipsis"></span>
     </button>
@@ -102,6 +101,16 @@
       <nz-option [nzLabel]="'monitor.status.down' | i18n" [nzValue]="2"></nz-option>
       <nz-option [nzLabel]="'monitor.status.paused' | i18n" [nzValue]="0"></nz-option>
     </nz-select>
+    <app-multi-func-input
+      *ngIf="isDefaultListMenu"
+      groupStyle="width: 120px;"
+      class="mobile-hide"
+      [readonly]="true"
+      [placeholder]="'monitors.search.app' | i18n"
+      [(value)]="app"
+      (click)="onSearchAppClicked()"
+      (valueChange)="onAppChanged()"
+    />
     <app-multi-func-input
       groupStyle="width: 120px;"
       class="mobile-hide"
@@ -309,15 +318,15 @@
   <div *nzModalContent class="-inner-content">
     <app-monitor-select-menu
       listStyle="border-right: 0px"
-      [searchPlaceholder]="'monitors.center.search.placeholder' | i18n"
+      [searchPlaceholder]="(appSwitchModalVisibleType === 1 ? 'monitors.search.app' : 'monitors.center.search.placeholder') | i18n"
       [loading]="appSearchLoading"
       [data]="appSearchOrigin"
       (selectedChanged)="gotoMonitorAddDetail($event)"
     >
       <ng-template let-app="item" #prefix>
         <i nz-icon [nzType]="getAppIconName(app.value)" nzTheme="outline"></i>
       </ng-template>
-      <ng-template #suffix><i nz-icon nzType="right"></i></ng-template>
+      <ng-template #suffix>@if (appSwitchModalVisibleType !== 1) {<i nz-icon nzType="right"></i>}</ng-template>
     </app-monitor-select-menu>
   </div>
 </nz-modal>
diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
@@ -20,7 +20,7 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { I18NService } from '@core';
-import { ALAIN_I18N_TOKEN } from '@delon/theme';
+import { ALAIN_I18N_TOKEN, MenuService } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ModalButtonOptions } from 'ng-zorro-antd/modal/modal-types';
@@ -33,7 +33,7 @@ import { Monitor } from '../../../pojo/Monitor';
 import { AppDefineService } from '../../../service/app-define.service';
 import { MemoryStorageService } from '../../../service/memory-storage.service';
 import { MonitorService } from '../../../service/monitor.service';
-import { formatTagName } from '../../../shared/utils/common-util';
+import { formatTagName, findDeepestSelected } from '../../../shared/utils/common-util';
 
 @Component({
   selector: 'app-monitor-list',
@@ -50,9 +50,11 @@ export class MonitorListComponent implements OnInit, OnDestroy {
     private messageSvc: NzMessageService,
     private storageSvc: MemoryStorageService,
     private appDefineSvc: AppDefineService,
+    private menuService: MenuService,
     @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
+  isDefaultListMenu!: boolean;
   app!: string | undefined;
   tag!: string | undefined;
   pageIndex: number = 1;
@@ -70,6 +72,7 @@ export class MonitorListComponent implements OnInit, OnDestroy {
   filterStatus: number = 9;
   // app type search filter
   appSwitchModalVisible = false;
+  appSwitchModalVisibleType = 0;
   appSearchOrigin: any[] = [];
   appSearchLoading = false;
   intervalId: any;
@@ -79,6 +82,9 @@ export class MonitorListComponent implements OnInit, OnDestroy {
   ];
 
   ngOnInit(): void {
+    this.menuService.change.subscribe(menus => {
+      this.isDefaultListMenu = findDeepestSelected(menus).link === '/monitors';
+    });
     this.route.queryParamMap.subscribe(paramMap => {
       let appStr = paramMap.get('app');
       let tagStr = paramMap.get('tag');
@@ -110,6 +116,14 @@ export class MonitorListComponent implements OnInit, OnDestroy {
     }
   }
 
+  onAppChanged(): void {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { ...this.route.snapshot.queryParams, app: this.app },
+      queryParamsHandling: 'merge'
+    });
+  }
+
   onTagChanged(): void {
     this.router.navigate([], {
       relativeTo: this.route,
@@ -498,6 +512,11 @@ export class MonitorListComponent implements OnInit, OnDestroy {
 
   // begin: app type search filter
 
+  onSearchAppClicked() {
+    this.appSwitchModalVisibleType = 1;
+    this.onAppSwitchModalOpen();
+  }
+
   onAppSwitchModalOpen() {
     this.appSwitchModalVisible = true;
     this.appSearchLoading = true;
@@ -542,10 +561,17 @@ export class MonitorListComponent implements OnInit, OnDestroy {
 
   onAppSwitchModalCancel() {
     this.appSwitchModalVisible = false;
+    this.appSwitchModalVisibleType = 0;
   }
 
   gotoMonitorAddDetail(app: string) {
-    this.router.navigateByUrl(`/monitors/new?app=${app}`);
+    if (this.appSwitchModalVisibleType === 1) {
+      this.app = app;
+      this.onAppChanged();
+      this.onAppSwitchModalCancel();
+    } else {
+      this.router.navigateByUrl(`/monitors/new?app=${app}`);
+    }
   }
 
   // end: app type search filter

diff --git a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html
@@ -33,6 +33,7 @@
     [name]="name || ''"
     [style]="inputStyle || ''"
     [required]="required || false"
+    [readonly]="readonly || false"
     [disabled]="disabled || false"
     [placeholder]="placeholder || ''"
     [(ngModel)]="value"
@@ -58,7 +59,7 @@
       (click)="passwordVisible = !passwordVisible"
     ></i>
     } @if (allowClear && value) {
-    <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="value = null; onChange(null)"></i>
+    <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="onClear($event)"></i>
     }
   </ng-template>
 </ng-template>
diff --git a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts
@@ -44,6 +44,7 @@ export class MultiFuncInputComponent implements ControlValueAccessor {
   @Input() value!: any;
   @Input() name!: string;
   @Input() required!: boolean;
+  @Input() readonly!: boolean;
   @Input() groupStyle!: string;
   @Input() inputStyle!: string;
   @Input() placeholder!: string;
@@ -63,6 +64,11 @@ export class MultiFuncInputComponent implements ControlValueAccessor {
     this._onChange(inputValue);
   }
 
+  onClear(event: any) {
+    event.stopPropagation();
+    this.onChange((this.value = null));
+  }
+
   writeValue(value: any): void {
     this.value = value;
   }

diff --git a/web-app/src/app/shared/utils/common-util.ts b/web-app/src/app/shared/utils/common-util.ts
@@ -26,3 +26,20 @@ export function formatTagName(tag: Tag): string {
     return tag.name;
   }
 }
+
+export function findDeepestSelected(nodes: any): any {
+  let deepestSelectedNode = null;
+  for (let node of nodes) {
+    if (node._selected && (!node.children || node.children.length === 0)) {
+      return node;
+    }
+
+    if (node.children) {
+      const selectedChild = findDeepestSelected(node.children);
+      if (selectedChild) {
+        deepestSelectedNode = selectedChild;
+      }
+    }
+  }
+  return deepestSelectedNode;
+}
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
@@ -384,6 +384,7 @@
   "monitors.import": "Import Monitor",
   "monitors.search.placeholder": "Search Monitor",
   "monitors.search.tag": "Tag Filter",
+  "monitors.search.app": "Type Filter",
   "monitors.total": "Total",
   "monitors.advanced": "Advanced",
   "monitors.advanced.tip": "Advanced Setting Params",

diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
@@ -385,6 +385,7 @@
   "monitors.import": "导入监控",
   "monitors.search.placeholder": "搜索监控",
   "monitors.search.tag": "标签筛选",
+  "monitors.search.app": "类型筛选",
   "monitors.total": "总量",
   "monitors.advanced": "高级设置",
   "monitors.advanced.tip": "设置高级可选参数",

diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
@@ -384,6 +384,7 @@
   "monitors.import": "導入監控",
   "monitors.search.placeholder": "搜索監控",
   "monitors.search.tag": "標籤篩選",
+  "monitors.search.app": "類型篩選",
   "monitors.total": "總量",
   "monitors.advanced": "高級設置",
   "monitors.advanced.tip": "設置高級可選參數",