This is an automated email from the ASF dual-hosted git repository.
zhaoqingran pushed a commit to branch bulletin
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/bulletin by this push:
new 7ff2e2dc6 refactor(bulletin): improve table scroll configuration and
metric fields handling
7ff2e2dc6 is described below
commit 7ff2e2dc66dff990870200b16bf6c4a359a2414c
Author: zqr10159 <[email protected]>
AuthorDate: Wed Jul 17 17:30:21 2024 +0800
refactor(bulletin): improve table scroll configuration and metric fields
handling
Improve the nz-table scroll property configuration to use 'auto' instead of
a calculated width, which simplifies the layout setup. Additionally, refactor
the metric fields processing within the bulletin component to enhance
flexibility and prepare for future enhancements.
BREAKING CHANGE
---
.../app/routes/bulletin/bulletin.component.html | 131 ++++++++++-----------
.../src/app/routes/bulletin/bulletin.component.ts | 19 ++-
2 files changed, 68 insertions(+), 82 deletions(-)
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index aadc78301..cd696b093 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -58,66 +58,65 @@
[nzPageSizeOptions]="[10, 20, 50, 100]"
(nzQueryParams)="onTablePageChange($event)"
nzShowPagination="true"
- [nzScroll]="{ x: '+' +
- 'auto' }"
+ [nzScroll]="{ x: 'auto' }"
nzBordered
>
<thead>
- <tr>
- <th nzAlign="center" nzLeft nzWidth="3%" rowspan="2">
- <label nz-checkbox [(ngModel)]="checkedAll"
(ngModelChange)="onAllChecked($event)"></label>
- </th>
- <th nzAlign="center" nzWidth="7%" rowspan="2">App</th>
- <th nzAlign="center" nzWidth="7%" rowspan="2">Host</th>
- <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
- <th nzAlign="center"
[colSpan]="bulletinTab.bulletinColumn[metricName].size">{{ metricName }}</th>
- </ng-container>
- </tr>
- <tr>
- <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
- <ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
- <th nzAlign="center">{{ field }}</th>
+ <tr>
+ <th nzAlign="center" nzLeft nzWidth="3%" rowspan="2">
+ <label nz-checkbox [(ngModel)]="checkedAll"
(ngModelChange)="onAllChecked($event)"></label>
+ </th>
+ <th nzAlign="center" nzWidth="7%" rowspan="2">App</th>
+ <th nzAlign="center" nzWidth="7%" rowspan="2">Host</th>
+ <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
+ <th nzAlign="center"
[colSpan]="bulletinTab.bulletinColumn[metricName].size">{{ metricName }}</th>
</ng-container>
- </ng-container>
- <th nzAlign="center" nzWidth="15%" rowspan="2">{{ 'common.edit' | i18n
}}</th>
- </tr>
+ </tr>
+ <tr>
+ <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
+ <ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
+ <th nzAlign="center">{{ field }}</th>
+ </ng-container>
+ </ng-container>
+ <th nzAlign="center" nzWidth="15%" rowspan="2">{{ 'common.edit' |
i18n }}</th>
+ </tr>
</thead>
<tbody>
- <tr *ngFor="let data of fixedTable.data">
- <td nzAlign="center" nzLeft>
- <label nz-checkbox [ngModel]="checkedDefineIds.has(data.id)"
(ngModelChange)="onItemChecked(data.id, $event)"></label>
- </td>
- <td nzAlign="center">{{ data.app }}</td>
- <td nzAlign="center">{{ data.host }}</td>
- <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
- <ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
- <td nzAlign="center">{{ data[metricName + '_' + field] }}</td>
+ <tr *ngFor="let data of fixedTable.data">
+ <td nzAlign="center" nzLeft>
+ <label nz-checkbox [ngModel]="checkedDefineIds.has(data.id)"
(ngModelChange)="onItemChecked(data.id, $event)"></label>
+ </td>
+ <td nzAlign="center">{{ data.app }}</td>
+ <td nzAlign="center">{{ data.host }}</td>
+ <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
+ <ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
+ <td nzAlign="center">{{ field }}</td>
+ </ng-container>
</ng-container>
- </ng-container>
- <td nzAlign="center">
- <div style="display: flex; justify-content: center; gap: 8px;">
- <button
- nz-button
- nzType="primary"
- (click)="onEditOneBulletinDefine(data.id)"
- nz-tooltip
- [nzTooltipTitle]="'alert.setting.edit' | i18n"
- >
- <i nz-icon nzType="edit" nzTheme="outline"></i>
- </button>
- <button
- nz-button
- nzDanger
- nzType="primary"
- (click)="onDeleteOneBulletinDefine(data.id)"
- nz-tooltip
- [nzTooltipTitle]="'alert.setting.delete' | i18n"
- >
- <i nz-icon nzType="delete" nzTheme="outline"></i>
- </button>
- </div>
- </td>
- </tr>
+ <td nzAlign="center">
+ <div style="display: flex; justify-content: center; gap: 8px">
+ <button
+ nz-button
+ nzType="primary"
+ (click)="onEditOneBulletinDefine(data.id)"
+ nz-tooltip
+ [nzTooltipTitle]="'alert.setting.edit' | i18n"
+ >
+ <i nz-icon nzType="edit" nzTheme="outline"></i>
+ </button>
+ <button
+ nz-button
+ nzDanger
+ nzType="primary"
+ (click)="onDeleteOneBulletinDefine(data.id)"
+ nz-tooltip
+ [nzTooltipTitle]="'alert.setting.delete' | i18n"
+ >
+ <i nz-icon nzType="delete" nzTheme="outline"></i>
+ </button>
+ </div>
+ </td>
+ </tr>
</tbody>
</nz-table>
@@ -125,19 +124,6 @@
</nz-tab>
</nz-tabset>
-
-
-
-
-
-
-
-
-
-
-
-
-
<!-- new bulletin modal -->
<nz-modal
[(nzVisible)]="isManageModalVisible"
@@ -214,12 +200,12 @@
(nzCheckBoxChange)="treeCheckBoxChange($event, onItemSelect)"
>
<ng-template let-node>
- <span
- (click)="checkBoxChange(node, onItemSelect)"
- class="ant-tree-node-content-wrapper
ant-tree-node-content-wrapper-open"
- >
- {{ node.title }}
- </span>
+ <span
+ (click)="checkBoxChange(node, onItemSelect)"
+ class="ant-tree-node-content-wrapper
ant-tree-node-content-wrapper-open"
+ >
+ {{ node.title }}
+ </span>
</ng-template>
</nz-tree>
</ng-template>
@@ -228,3 +214,4 @@
</nz-form-item>
</form>
</div>
+</nz-modal>
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.ts
b/web-app/src/app/routes/bulletin/bulletin.component.ts
index a8ddf032e..9ab278ab6 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -25,6 +25,7 @@ import { NzNotificationService } from
'ng-zorro-antd/notification';
import { NzTableQueryParams } from 'ng-zorro-antd/table';
import { TransferChange, TransferItem } from 'ng-zorro-antd/transfer';
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from
'ng-zorro-antd/tree';
+import { $ } from 'protractor';
import { zip } from 'rxjs';
import { finalize, map } from 'rxjs/operators';
@@ -38,7 +39,6 @@ import { AppDefineService } from
'../../service/app-define.service';
import { BulletinDefineService } from '../../service/bulletin-define.service';
import { MonitorService } from '../../service/monitor.service';
import { TagService } from '../../service/tag.service';
-import {$} from "protractor";
@Component({
selector: 'app-bulletin',
@@ -675,20 +675,21 @@ export class BulletinComponent implements OnInit {
host: item.content.host
};
- item.content.metrics.forEach((metric: { name: string | number;
fields: { key: any; value: any; }[]; }) => {
+ item.content.metrics.forEach((metric: { name: string | number;
fields: any }) => {
if (!groupedData[name].bulletinColumn[metric.name]) {
groupedData[name].bulletinColumn[metric.name] = new
Set<string>();
}
- metric.fields.forEach((field: { key: any; value: any; }) => {
- const key = `${metric.name}_${field.key}`;
- transformedItem[key] = field.value;
- groupedData[name].bulletinColumn[metric.name].add(field.key);
+ metric.fields.forEach((item: any[]) => {
+ item.forEach((field: any) => {
+ transformedItem[field.key] = field.value;
+
groupedData[name].bulletinColumn[metric.name].add(field.key);
+ });
+ groupedData[name].data.push(transformedItem);
+ console.log(transformedItem);
});
});
- groupedData[name].data.push(transformedItem);
});
- console.log(groupedData);
this.tabDefines = Object.keys(groupedData).map(name => ({
name,
@@ -698,8 +699,6 @@ export class BulletinComponent implements OnInit {
pageSize: 10,
total: groupedData[name].data.length
}));
- console.log(this.tabDefines);
-
} else if (message.code !== 0) {
this.notifySvc.warning(`${message.msg}`, '');
console.info(`${message.msg}`);
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
