This is an automated email from the ASF dual-hosted git repository.
zhaoqingran pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new 336eaffd2 Optimize the user experience of monitoring list pages.
(#2209)
336eaffd2 is described below
commit 336eaffd270bd9061e24272336a5cacdfdb554ff
Author: Kerwin Bryant <[email protected]>
AuthorDate: Fri Jul 5 10:04:58 2024 +0800
Optimize the user experience of monitoring list pages. (#2209)
---
.../monitor-list/monitor-list.component.html | 2 +-
.../monitor/monitor-list/monitor-list.component.ts | 8 ++++++++
.../multi-func-input.component.html | 8 ++++----
.../multi-func-input/multi-func-input.component.ts | 23 +++++++---------------
4 files changed, 20 insertions(+), 21 deletions(-)
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
index 172ead214..449a059d3 100755
--- 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
@@ -107,7 +107,7 @@
class="mobile-hide"
[placeholder]="'monitors.search.tag' | i18n"
[(value)]="tag"
- (valueChange)="onFilterSearchMonitors()"
+ (valueChange)="onTagChanged()"
/>
<app-multi-func-input
groupStyle="width: 180px;"
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 2b1ec35f7..266d498aa 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
@@ -110,6 +110,14 @@ export class MonitorListComponent implements OnInit,
OnDestroy {
}
}
+ onTagChanged(): void {
+ this.router.navigate([], {
+ relativeTo: this.route,
+ queryParams: { ...this.route.snapshot.queryParams, tag: this.tag },
+ queryParamsHandling: 'merge'
+ });
+ }
+
onFilterSearchMonitors() {
this.tableLoading = true;
let filter$ = this.monitorSvc
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 193dc7959..0f9c76394 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
@@ -35,8 +35,8 @@
[required]="required || false"
[disabled]="disabled || false"
[placeholder]="placeholder || ''"
- [(ngModel)]="inputValue"
- (ngModelChange)="onChange()"
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
/>
</nz-input-group>
@@ -57,8 +57,8 @@
[nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
(click)="passwordVisible = !passwordVisible"
></i>
- } @if (allowClear && inputValue) {
- <i nz-icon class="ant-input-clear-icon" nzTheme="fill"
nzType="close-circle" (click)="inputValue = null; onChange()"></i>
+ } @if (allowClear && value) {
+ <i nz-icon class="ant-input-clear-icon" nzTheme="fill"
nzType="close-circle" (click)="value = null; onChange(null)"></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
index b987b0c97..8806e08a8 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
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Component, OnInit, EventEmitter, Input, Output, ContentChild,
TemplateRef, forwardRef } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ContentChild, TemplateRef,
forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
@@ -33,7 +33,7 @@ import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
}
]
})
-export class MultiFuncInputComponent implements OnInit, ControlValueAccessor {
+export class MultiFuncInputComponent implements ControlValueAccessor {
constructor() {}
@ContentChild('prefix', { static: true }) prefix: TemplateRef<any> |
undefined;
@@ -53,27 +53,18 @@ export class MultiFuncInputComponent implements OnInit,
ControlValueAccessor {
@Output() readonly valueChange = new EventEmitter<string>();
disabled: boolean = false;
- inputValue: any | undefined;
passwordVisible: boolean = false;
_onChange = (_: any) => {};
_onTouched = () => {};
- ngOnInit(): void {
- this.inputValue = this.value;
+ onChange(inputValue: any) {
+ this.valueChange.emit(inputValue);
+ this._onChange(inputValue);
}
- onChange() {
- if (this.inputValue !== this.value) {
- this.valueChange.emit(this.inputValue);
- this._onChange(this.inputValue);
- }
- }
-
- writeValue(obj: any): void {
- if (obj !== this.inputValue) {
- this.inputValue = obj;
- }
+ writeValue(value: any): void {
+ this.value = value;
}
registerOnChange(fn: any): void {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
