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 f6fcd52a5 Optimize the tags-selection. (#2198)
f6fcd52a5 is described below
commit f6fcd52a50c0914c4c71beafecb35f1da87a4f8f
Author: Kerwin Bryant <[email protected]>
AuthorDate: Fri Jul 5 09:35:41 2024 +0800
Optimize the tags-selection. (#2198)
Co-authored-by: Logic <[email protected]>
---
.../alert-setting/alert-setting.component.html | 77 +++-------------------
.../alert/alert-setting/alert-setting.component.ts | 76 ---------------------
.../components/form-item/form-item.component.html | 26 ++++----
.../components/toolbar/toolbar.component.less | 5 ++
4 files changed, 27 insertions(+), 157 deletions(-)
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 4bd07dd0d..e0beb9eba 100755
--- 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
@@ -501,27 +501,16 @@
</nz-collapse>
</nz-form-control>
</nz-form-item>
- <nz-form-item>
- <nz-form-label nzSpan="7" nzFor="tags"
[nzTooltipTitle]="'tag.bind.tip' | i18n">
- {{ 'tag.bind' | i18n }}
- </nz-form-label>
- <nz-form-control nzSpan="8">
- <nz-tag
- *ngFor="let tag of define.tags; let i = index"
- [nzMode]="'closeable'"
- (nzOnClose)="onRemoveTag(tag)"
- style="margin-top: 4px"
- >
- {{ sliceTagName(tag) }}
- </nz-tag>
- <a (click)="onShowTagsModal()">
- <nz-tag style="margin-top: 4px">
- <i nz-icon nzType="plus"></i>
- {{ 'tag.new' | i18n }}
- </nz-tag>
- </a>
- </nz-form-control>
- </nz-form-item>
+ <app-form-item
+ [item]="{
+ field: 'tags',
+ type: 'tags-selection',
+ name: 'tag.bind' | i18n,
+ tooltip: 'tag.bind.tip' | i18n
+ }"
+ [extra]="{ tag_mode: 'closeable' }"
+ [(value)]="define.tags"
+ />
<nz-form-item>
<nz-form-label nzSpan="7" nzFor="preset"
[nzTooltipTitle]="'alert.setting.default.tip' | i18n">
{{ 'alert.setting.default' | i18n }}
@@ -555,52 +544,6 @@
</div>
</nz-modal>
-<!-- 选择TAG弹出框 -->
-<nz-modal
- [(nzVisible)]="isTagManageModalVisible"
- [nzTitle]="'tag.bind' | i18n"
- (nzOnCancel)="onTagManageModalCancel()"
- (nzOnOk)="onTagManageModalOk()"
- nzMaskClosable="false"
- nzWidth="30%"
- [nzOkLoading]="isTagManageModalOkLoading"
->
- <div *nzModalContent class="-inner-content">
- <input
- style="margin-left: 5px; width: 50%; text-align: center"
- nz-input
- type="text"
- [placeholder]="'tag.search' | i18n"
- nzSize="default"
- (keyup.enter)="loadTagsTable()"
- [(ngModel)]="tagSearch"
- />
- <button nz-button nzType="primary" routerLink="/setting/tags"
style="margin-left: 5px">
- <i nz-icon nzType="setting" nzTheme="outline"></i>
- {{ 'tag.setting' | i18n }}
- </button>
- <nz-table #smallTable nzSize="small" [nzData]="tags" [nzPageSize]="8"
[nzLoading]="tagTableLoading">
- <thead>
- <tr>
- <th nzAlign="center" nzLeft nzWidth="4%"
[(nzChecked)]="tagCheckedAll" (nzCheckedChange)="onTagAllChecked($event)"></th>
- <th nzAlign="left">{{ 'tag' | i18n }}</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let data of smallTable.data">
- <td nzAlign="center" nzLeft [nzChecked]="checkedTags.has(data)"
(nzCheckedChange)="onTagItemChecked(data, $event)"></td>
- <td nzAlign="left">
- <nz-tag *ngIf="data.tagValue == undefined || data.tagValue.trim()
== ''" [nzColor]="data.color">{{ data.name }}</nz-tag>
- <nz-tag *ngIf="data.tagValue != undefined && data.tagValue.trim()
!= ''" [nzColor]="data.color">
- {{ data.name + ':' + data.tagValue }}
- </nz-tag>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </div>
-</nz-modal>
-
<!-- 关联告警定义与监控关系弹出框 -->
<nz-modal
diff --git
a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
index c1f41de80..84303f31d 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
@@ -608,84 +608,8 @@ export class AlertSettingComponent implements OnInit {
}
}
- onRemoveTag(tag: TagItem) {
- if (this.define != undefined && this.define.tags != undefined) {
- this.define.tags = this.define.tags.filter(item => item !== tag);
- }
- }
-
- sliceTagName(tag: TagItem): string {
- if (tag.value != undefined && tag.value.trim() != '') {
- return `${tag.name}:${tag.value}`;
- } else {
- return tag.name;
- }
- }
-
// end 新增修改告警定义model
- // start Tag model
- isTagManageModalVisible = false;
- isTagManageModalOkLoading = false;
- tagCheckedAll: boolean = false;
- tagTableLoading = false;
- tagSearch!: string;
- tags!: Tag[];
- checkedTags = new Set<Tag>();
- loadTagsTable() {
- this.tagTableLoading = true;
- let tagsReq$ = this.tagSvc.loadTags(this.tagSearch, 1, 0, 1000).subscribe(
- message => {
- this.tagTableLoading = false;
- this.tagCheckedAll = false;
- this.checkedTags.clear();
- if (message.code === 0) {
- let page = message.data;
- this.tags = page.content;
- } else {
- console.warn(message.msg);
- }
- tagsReq$.unsubscribe();
- },
- error => {
- this.tagTableLoading = false;
- tagsReq$.unsubscribe();
- }
- );
- }
- onShowTagsModal() {
- this.isTagManageModalVisible = true;
- this.loadTagsTable();
- }
- onTagManageModalCancel() {
- this.isTagManageModalVisible = false;
- }
- onTagManageModalOk() {
- this.isTagManageModalOkLoading = true;
- this.checkedTags.forEach(item => {
- if (this.define.tags.find(tag => tag.name == item.name && tag.value ==
item.tagValue) == undefined) {
- this.define.tags.push({ name: item.name, value: item.tagValue });
- }
- });
- this.isTagManageModalOkLoading = false;
- this.isTagManageModalVisible = false;
- }
- onTagAllChecked(checked: boolean) {
- if (checked) {
- this.tags.forEach(tag => this.checkedTags.add(tag));
- } else {
- this.checkedTags.clear();
- }
- }
- onTagItemChecked(tag: Tag, checked: boolean) {
- if (checked) {
- this.checkedTags.add(tag);
- } else {
- this.checkedTags.delete(tag);
- }
- }
- // end tag model
-
// start 告警定义与监控关联model
isConnectModalVisible = false;
isConnectModalOkLoading = false;
diff --git
a/web-app/src/app/shared/components/form-item/form-item.component.html
b/web-app/src/app/shared/components/form-item/form-item.component.html
index 3865f54a4..934d6286d 100644
--- a/web-app/src/app/shared/components/form-item/form-item.component.html
+++ b/web-app/src/app/shared/components/form-item/form-item.component.html
@@ -205,7 +205,7 @@
<nz-form-control nzSpan="8">
<nz-tag
*ngFor="let tag of value; let i = index"
- [nzMode]="tag.type === 1 ? 'closeable' : 'default'"
+ [nzMode]="extra.tag_mode || (tag.type === 1 ? 'closeable' : 'default')"
(nzOnClose)="onRemoveTag(tag)"
[nzColor]="tag.color"
style="margin-top: 4px"
@@ -252,19 +252,17 @@
[nzOkLoading]="isManageModalOkLoading"
>
<div *nzModalContent class="-inner-content">
- <input
- style="margin-left: 5px; width: 50%; text-align: center"
- nz-input
- type="text"
- [placeholder]="'tag.search' | i18n"
- nzSize="default"
- (keyup.enter)="loadTagsTable()"
- [(ngModel)]="tagSearch"
- />
- <button nz-button nzType="primary" routerLink="/setting/tags"
style="margin-left: 5px">
- <i nz-icon nzType="setting" nzTheme="outline"></i>
- {{ 'tag.setting' | i18n }}
- </button>
+ <app-toolbar>
+ <ng-template #left>
+ <app-multi-func-input type="search" [placeholder]="'tag.search' |
i18n" [(value)]="tagSearch" (valueChange)="loadTagsTable()" />
+ </ng-template>
+ <ng-template #right>
+ <button nz-button nzType="primary" routerLink="/setting/tags"
style="margin-left: 5px">
+ <i nz-icon nzType="setting" nzTheme="outline"></i>
+ {{ 'tag.setting' | i18n }}
+ </button>
+ </ng-template>
+ </app-toolbar>
<nz-table #smallTable nzSize="small" [nzData]="tags" [nzPageSize]="8"
[nzLoading]="tagTableLoading">
<thead>
<tr>
diff --git a/web-app/src/app/shared/components/toolbar/toolbar.component.less
b/web-app/src/app/shared/components/toolbar/toolbar.component.less
index a347662c5..f8b2c082b 100755
--- a/web-app/src/app/shared/components/toolbar/toolbar.component.less
+++ b/web-app/src/app/shared/components/toolbar/toolbar.component.less
@@ -11,5 +11,10 @@
.container:first-child {
gap: 0px;
+ justify-content: flex-start;
+ }
+
+ .container:last-child {
+ justify-content: flex-end;
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
