This is an automated email from the ASF dual-hosted git repository.
gongchao 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 a8b0c1024d [Improve] Optimise and use the label-selector component for
label selection within pages (#3762)
a8b0c1024d is described below
commit a8b0c1024d617ec38518912f033b53ddd4bca19e
Author: DeleiGuo <[email protected]>
AuthorDate: Sat Sep 20 19:16:32 2025 +0800
[Improve] Optimise and use the label-selector component for label selection
within pages (#3762)
Co-authored-by: Calvin <[email protected]>
Co-authored-by: Tom <[email protected]>
---
.../alert-inhibit/alert-inhibit.component.html | 4 +-
.../alert-notice-rule.component.html | 2 +-
.../alert-setting/alert-setting.component.html | 2 +-
.../alert-silence/alert-silence.component.html | 2 +-
.../app/routes/bulletin/bulletin.component.html | 2 +-
.../monitor-edit/monitor-edit.component.html | 1 +
.../monitor/monitor-edit/monitor-edit.component.ts | 1 +
.../monitor-form/monitor-form.component.html | 3 +-
.../monitor/monitor-form/monitor-form.component.ts | 1 +
.../monitor/monitor-new/monitor-new.component.html | 1 +
.../monitor/monitor-new/monitor-new.component.ts | 36 +----------------
.../routes/setting/status/status.component.html | 2 +-
.../form-field/form-field.component.html | 1 +
.../label-selector/label-selector.component.html | 4 +-
.../label-selector/label-selector.component.ts | 47 +++++++++++++++++++++-
15 files changed, 63 insertions(+), 46 deletions(-)
diff --git
a/web-app/src/app/routes/alert/alert-inhibit/alert-inhibit.component.html
b/web-app/src/app/routes/alert/alert-inhibit/alert-inhibit.component.html
index 18158ca200..3076eb1979 100644
--- a/web-app/src/app/routes/alert/alert-inhibit/alert-inhibit.component.html
+++ b/web-app/src/app/routes/alert/alert-inhibit/alert-inhibit.component.html
@@ -166,7 +166,7 @@
<app-form-field
[item]="{
field: 'labels',
- type: 'labels',
+ type: 'label-selector',
required: true
}"
[name]="'sourceLabels'"
@@ -182,7 +182,7 @@
<app-form-field
[item]="{
field: 'labels',
- type: 'labels',
+ type: 'label-selector',
required: true
}"
[name]="'targetLabels'"
diff --git
a/web-app/src/app/routes/alert/alert-notice/alert-notice-rule/alert-notice-rule.component.html
b/web-app/src/app/routes/alert/alert-notice/alert-notice-rule/alert-notice-rule.component.html
index 0f4bc5faa5..bf53bb5747 100644
---
a/web-app/src/app/routes/alert/alert-notice/alert-notice-rule/alert-notice-rule.component.html
+++
b/web-app/src/app/routes/alert/alert-notice/alert-notice-rule/alert-notice-rule.component.html
@@ -189,7 +189,7 @@
<app-form-field
[item]="{
field: 'labels',
- type: 'labels',
+ type: 'label-selector',
required: true
}"
[name]="'labels'"
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
index 13bd055b58..aff46ec48c 100644
--- 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
@@ -570,7 +570,7 @@
<app-form-field
[item]="{
field: 'labels',
- type: 'labels'
+ type: 'label-selector'
}"
[name]="'labels'"
[(ngModel)]="define.labels"
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
index a1776a4789..19faec25d2 100755
--- 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
@@ -182,7 +182,7 @@
<app-form-field
[item]="{
field: 'labels',
- type: 'labels',
+ type: 'label-selector',
required: true
}"
[name]="'labels'"
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index d98bcef2aa..cb7479f64f 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -187,7 +187,7 @@
<app-form-field
[item]="{
field: 'labels',
- type: 'labels'
+ type: 'label-selector',
}"
[name]="'labels'"
[(ngModel)]="filterLabels"
diff --git
a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
index 90d9fc6d20..3b1fd65653 100644
--- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
+++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
@@ -41,6 +41,7 @@
[collectors]="collectors"
[labelKeys]="labelKeys"
[labelMap]="labelMap"
+ [labelIsCustom]="labelIsCustom"
[sdParams]="sdParams"
[sdDefines]="sdDefines"
(scrapeChange)="onScrapeChange($event)"
diff --git
a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
index 2d511930ee..25f6317374 100644
--- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
@@ -72,6 +72,7 @@ export class MonitorEditComponent implements OnInit {
spinningTip: string = 'Loading...';
labelKeys: string[] = [];
labelMap: { [key: string]: string[] } = {};
+ labelIsCustom: boolean = true;
ngOnInit(): void {
this.route.paramMap
diff --git
a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
index 9a90897738..341a8cb6df 100644
--- a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
+++ b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html
@@ -184,7 +184,8 @@
}"
[extra]="{
labelKeys: labelKeys,
- labelMap: labelMap
+ labelMap: labelMap,
+ labelIsCustom: labelIsCustom
}"
[name]="'labels'"
[(ngModel)]="monitor.labels"
diff --git
a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts
b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts
index 8914a63fa0..3de0ea45ef 100644
--- a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts
@@ -50,6 +50,7 @@ export class MonitorFormComponent implements OnChanges {
@Input() sdParams!: Param[];
@Input() labelKeys!: string[];
@Input() labelMap!: { [key: string]: string[] };
+ @Input() labelIsCustom!: boolean;
@Output() readonly formSubmit = new EventEmitter<any>();
@Output() readonly formCancel = new EventEmitter<any>();
diff --git
a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
index b209c27a4c..dce6d0e5c8 100644
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
@@ -40,6 +40,7 @@
[collectors]="collectors"
[labelKeys]="labelKeys"
[labelMap]="labelMap"
+ [labelIsCustom]="labelIsCustom"
[sdParams]="sdParams"
[sdDefines]="sdDefines"
(scrapeChange)="onScrapeChange($event)"
diff --git
a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
index a0efb1eb70..f3cac9734a 100644
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
@@ -33,7 +33,6 @@ import { Param } from '../../../pojo/Param';
import { ParamDefine } from '../../../pojo/ParamDefine';
import { AppDefineService } from '../../../service/app-define.service';
import { CollectorService } from '../../../service/collector.service';
-import { LabelService } from '../../../service/label.service';
import { MonitorService } from '../../../service/monitor.service';
import { generateReadableRandomString } from
'../../../shared/utils/common-util';
@@ -59,6 +58,7 @@ export class MonitorNewComponent implements OnInit {
spinningTip: string = 'Loading...';
labelKeys: string[] = [];
labelMap: { [key: string]: string[] } = {};
+ labelIsCustom: boolean = true;
constructor(
private appDefineSvc: AppDefineService,
private monitorSvc: MonitorService,
@@ -67,8 +67,7 @@ export class MonitorNewComponent implements OnInit {
private notifySvc: NzNotificationService,
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
private titleSvc: TitleService,
- private collectorSvc: CollectorService,
- private labelSvc: LabelService
+ private collectorSvc: CollectorService
) {
this.monitor = new Monitor();
this.grafanaDashboard = new GrafanaDashboard();
@@ -214,7 +213,6 @@ export class MonitorNewComponent implements OnInit {
this.isSpinning = false;
}
);
- this.loadLabels();
}
onScrapeChange(scrapeValue: string) {
@@ -333,34 +331,4 @@ export class MonitorNewComponent implements OnInit {
onCancel() {
this.router.navigateByUrl(`/monitors`);
}
-
- loadLabels() {
- let labelsInit$ = this.labelSvc.loadLabels(undefined, undefined, 0,
9999).subscribe(
- message => {
- if (message.code === 0) {
- let page = message.data;
- this.labelKeys = [...new Set(page.content.map(label => label.name))];
-
- this.labelMap = {};
-
- page.content.forEach(label => {
- if (!this.labelMap[label.name]) {
- this.labelMap[label.name] = [];
- }
-
- if (label.tagValue &&
!this.labelMap[label.name].includes(label.tagValue)) {
- this.labelMap[label.name].push(label.tagValue);
- }
- });
- } else {
- console.warn(message.msg);
- }
- labelsInit$.unsubscribe();
- },
- error => {
- labelsInit$.unsubscribe();
- console.error(error.msg);
- }
- );
- }
}
diff --git a/web-app/src/app/routes/setting/status/status.component.html
b/web-app/src/app/routes/setting/status/status.component.html
index 133f50b9ad..edbd709228 100644
--- a/web-app/src/app/routes/setting/status/status.component.html
+++ b/web-app/src/app/routes/setting/status/status.component.html
@@ -417,7 +417,7 @@
<app-form-field
[item]="{
field: 'labels',
- type: 'labels',
+ type: 'label-selector',
required: true
}"
[name]="'sourceLabels'"
diff --git
a/web-app/src/app/shared/components/form-field/form-field.component.html
b/web-app/src/app/shared/components/form-field/form-field.component.html
index 078d8fadd5..148b5e78ef 100644
--- a/web-app/src/app/shared/components/form-field/form-field.component.html
+++ b/web-app/src/app/shared/components/form-field/form-field.component.html
@@ -224,5 +224,6 @@
[id]="item.field"
[labelKeys]="extra.labelKeys"
[labelMap]="extra.labelMap"
+ [labelIsCustom]="extra.labelIsCustom"
/>
</ng-container>
diff --git
a/web-app/src/app/shared/components/label-selector/label-selector.component.html
b/web-app/src/app/shared/components/label-selector/label-selector.component.html
index e17fb6407f..0e34b7161b 100644
---
a/web-app/src/app/shared/components/label-selector/label-selector.component.html
+++
b/web-app/src/app/shared/components/label-selector/label-selector.component.html
@@ -32,7 +32,7 @@
>
<nz-option *ngFor="let keyOption of labelKeys" [nzLabel]="keyOption"
[nzValue]="keyOption"></nz-option>
<nz-option
- *ngIf="customInputKey && !hasMatchingOption(customInputKey, labelKeys)"
+ *ngIf="labelIsCustom && customInputKey &&
!hasMatchingOption(customInputKey, labelKeys)"
[nzLabel]="customInputKey"
[nzValue]="customInputKey"
></nz-option>
@@ -53,7 +53,7 @@
>
<nz-option *ngFor="let valueOption of getLabelValues(value[i].key)"
[nzLabel]="valueOption" [nzValue]="valueOption"></nz-option>
<nz-option
- *ngIf="customInputValue && !hasMatchingOption(customInputValue,
getLabelValues(value[i].key))"
+ *ngIf="labelIsCustom && customInputValue &&
!hasMatchingOption(customInputValue, getLabelValues(value[i].key))"
[nzLabel]="customInputValue"
[nzValue]="customInputValue"
></nz-option>
diff --git
a/web-app/src/app/shared/components/label-selector/label-selector.component.ts
b/web-app/src/app/shared/components/label-selector/label-selector.component.ts
index 4c9708ac9b..031be73dfd 100644
---
a/web-app/src/app/shared/components/label-selector/label-selector.component.ts
+++
b/web-app/src/app/shared/components/label-selector/label-selector.component.ts
@@ -17,9 +17,11 @@
* under the License.
*/
-import { Component, Input, forwardRef, Output, EventEmitter } from
'@angular/core';
+import { Component, Input, forwardRef, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { LabelService } from '../../../service/label.service';
+
@Component({
selector: 'app-label-selector',
templateUrl: './label-selector.component.html',
@@ -32,11 +34,14 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from
'@angular/forms';
}
]
})
-export class LabelSelectorComponent implements ControlValueAccessor {
+export class LabelSelectorComponent implements ControlValueAccessor, OnInit {
@Input() name!: string;
@Input() id!: string;
@Input() labelKeys: string[] = [];
@Input() labelMap: { [key: string]: string[] } = {};
+ @Input() labelIsCustom: boolean = false;
+
+ constructor(private labelSvc: LabelService) {}
value: Array<{ key: string; value: string }> = [];
customInputKey: string = '';
@@ -99,4 +104,42 @@ export class LabelSelectorComponent implements
ControlValueAccessor {
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
+
+ ngOnInit(): void {
+ if (!this.labelKeys || this.labelKeys.length == 0) {
+ this.labelMap = {};
+ this.labelKeys = [];
+ this.loadLabels();
+ }
+ }
+
+ loadLabels() {
+ let labelsInit$ = this.labelSvc.loadLabels(undefined, undefined, 0,
9999).subscribe(
+ message => {
+ if (message.code === 0) {
+ let page = message.data;
+ this.labelKeys = [...new Set(page.content.map(label => label.name))];
+
+ this.labelMap = {};
+
+ page.content.forEach(label => {
+ if (!this.labelMap[label.name]) {
+ this.labelMap[label.name] = [];
+ }
+
+ if (label.tagValue &&
!this.labelMap[label.name].includes(label.tagValue)) {
+ this.labelMap[label.name].push(label.tagValue);
+ }
+ });
+ } else {
+ console.warn(message.msg);
+ }
+ labelsInit$.unsubscribe();
+ },
+ error => {
+ labelsInit$.unsubscribe();
+ console.error(error.msg);
+ }
+ );
+ }
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
