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 3295a2255 refactor(bulletin): optimize table layout and metric fields
processing
3295a2255 is described below
commit 3295a2255d3be18a5788667d1ede7ea8d472f590
Author: zqr10159 <[email protected]>
AuthorDate: Thu Jul 18 17:20:24 2024 +0800
refactor(bulletin): optimize table layout and metric fields processing
Improve the bulletin table layout by adjusting the header structure for
better clarity and fixing the row span calculation logic. Simplify the metric
fields processing to directly bind data without additional transformation,
which enhances performance and maintainability.
BREAKING CHANGE: The modification in the table layout and metric fields
handling might affect consumers of the bulletin component who rely on the
previous structure.
---
.../app/routes/bulletin/bulletin.component.html | 85 ++++++----------------
.../src/app/routes/bulletin/bulletin.component.ts | 9 +--
2 files changed, 26 insertions(+), 68 deletions(-)
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index 7f8f3dc57..1021805b6 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -62,84 +62,43 @@
nzBordered
>
<thead>
- <tr>
- <th nzAlign="center" nzLeft nzWidth="3%">
- <label nz-checkbox [(ngModel)]="checkedAll"
(ngModelChange)="onAllChecked($event)"></label>
- </th>
- <th nzAlign="center" nzWidth="7%">App</th>
- <th nzAlign="center" nzWidth="7%">Host</th>
- <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
- <th nzAlign="center"
[colSpan]="bulletinTab.bulletinColumn[metricName].length">{{ metricName }}</th>
- </ng-container>
- <th nzAlign="center" nzWidth="15%">{{ 'common.edit' | i18n }}</th>
- </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" 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>
- </tr>
- </thead>
- <tbody>
- <ng-container *ngFor="let data of fixedTable.data">
+ </tr>
<tr>
- <td nzAlign="center" nzLeft [attr.rowspan]="getRowSpan(data,
bulletinTab)">
- <label nz-checkbox [ngModel]="checkedDefineIds.has(data.id)"
(ngModelChange)="onItemChecked(data.id, $event)"></label>
- </td>
- <td nzAlign="center" [attr.rowspan]="getRowSpan(data,
bulletinTab)">{{ data.app }}</td>
- <td nzAlign="center" [attr.rowspan]="getRowSpan(data,
bulletinTab)">{{ data.host }}</td>
<ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
<ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
- <td nzAlign="center">
- <ng-container *ngIf="data[field] && data[field].length">
- <div *ngFor="let value of data[field]">{{ value }}</div>
- </ng-container>
- </td>
+ <th nzAlign="center">{{ field }}</th>
</ng-container>
</ng-container>
- <td nzAlign="center" [attr.rowspan]="getRowSpan(data, bulletinTab)">
- <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>
- <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
- <ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
- <tr *ngFor="let value of data[field]">
- <td nzAlign="center">{{ value }}</td>
- </tr>
+ </thead>
+ <tbody>
+ <ng-container *ngFor="let data of fixedTable.data">
+ <tr>
+ <td nzAlign="center" [rowSpan]="2">{{ data.app }}</td>
+ <td nzAlign="center" [rowSpan]="2">{{ data.host }}</td>
+ </tr>
+ <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
+ <ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
+ <tr>
+ <ng-container *ngIf="data[field]">
+ <td *ngFor="let value of data[field]">{{ value }}</td>
+ </ng-container>
+ </tr>
+ </ng-container>
</ng-container>
</ng-container>
- </ng-container>
</tbody>
</nz-table>
-
<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{
bulletinTab.total }} </ng-template>
</nz-tab>
</nz-tabset>
-
-
-
<!-- new bulletin modal -->
<nz-modal
[(nzVisible)]="isManageModalVisible"
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.ts
b/web-app/src/app/routes/bulletin/bulletin.component.ts
index 15d69c784..29717ba84 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -672,7 +672,7 @@ export class BulletinComponent implements OnInit {
id: item.id,
app: item.app,
monitorId: item.content.monitorId,
- host: item.content.host,
+ host: item.content.host
};
item.content.metrics.forEach((metric: { name: string | number;
fields: any }) => {
@@ -681,10 +681,9 @@ export class BulletinComponent implements OnInit {
}
metric.fields.forEach((field: any[]) => {
field.forEach((fieldItem: any) => {
- const key = fieldItem.key;
+ const key = `${metric.name}_${fieldItem.key}`;
const value = fieldItem.value;
- // Ensure the transformedItem has an array for each key
if (!transformedItem[key]) {
transformedItem[key] = [];
}
@@ -718,12 +717,13 @@ export class BulletinComponent implements OnInit {
}
getMetricNames(bulletinTab: any): string[] {
+ console.log(bulletinTab.bulletinColumn)
return Object.keys(bulletinTab.bulletinColumn);
}
getRowSpan(data: any, bulletinTab: any): number {
let rowSpan = 1;
- Object.keys(bulletinTab.bulletinColumn).forEach((metricName) => {
+ Object.keys(bulletinTab.bulletinColumn).forEach(metricName => {
bulletinTab.bulletinColumn[metricName].forEach((field: string) => {
if (data[field] && data[field].length) {
rowSpan = Math.max(rowSpan, data[field].length);
@@ -732,5 +732,4 @@ export class BulletinComponent implements OnInit {
});
return rowSpan;
}
-
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
