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 old mode 100755 new mode 100644 index 449a059d37c..b7d142bf88b --- 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 @@ + - - @@ -102,6 +101,16 @@ + - + @if (appSwitchModalVisibleType !== 1) {} 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 index 266d498aa37..31c56e566ce 100644 --- 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 index 0f9c763949b..a3af687b570 100755 --- 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" > } @if (allowClear && value) { - + } 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 index 8806e08a859..e4294642745 100755 --- 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 index 7077896fe0a..ebba047a5f6 100644 --- 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 index 4978b7ca888..b3a57b3c428 100644 --- 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 index 50a391457df..eaf8875dc5a 100644 --- 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 index b4e63982727..1f66725129f 100644 --- 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": "設置高級可選參數",