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 c692eec73 refactor(bulletin): optimize table layout and metric fields
processing
c692eec73 is described below
commit c692eec735e62639f2a7afe08d74f84eb85293f2
Author: zqr10159 <[email protected]>
AuthorDate: Thu Jul 18 00:42:35 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 | 62 ++++++++++++++--------
.../src/app/routes/bulletin/bulletin.component.ts | 38 +++++++++----
2 files changed, 68 insertions(+), 32 deletions(-)
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index cd696b093..7f8f3dc57 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -62,38 +62,43 @@
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>
- </ng-container>
+ <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>
</ng-container>
- <th nzAlign="center" nzWidth="15%" rowspan="2">{{ 'common.edit' |
i18n }}</th>
- </tr>
+ </ng-container>
+ </tr>
</thead>
<tbody>
- <tr *ngFor="let data of fixedTable.data">
- <td nzAlign="center" nzLeft>
+ <ng-container *ngFor="let data of fixedTable.data">
+ <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">{{ data.app }}</td>
- <td nzAlign="center">{{ data.host }}</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">{{ field }}</td>
+ <td nzAlign="center">
+ <ng-container *ngIf="data[field] && data[field].length">
+ <div *ngFor="let value of data[field]">{{ value }}</div>
+ </ng-container>
+ </td>
</ng-container>
</ng-container>
- <td nzAlign="center">
+ <td nzAlign="center" [attr.rowspan]="getRowSpan(data, bulletinTab)">
<div style="display: flex; justify-content: center; gap: 8px">
<button
nz-button
@@ -117,6 +122,14 @@
</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>
+ </ng-container>
+ </ng-container>
+ </ng-container>
</tbody>
</nz-table>
@@ -124,6 +137,9 @@
</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 9ab278ab6..15d69c784 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -668,27 +668,33 @@ export class BulletinComponent implements OnInit {
};
}
- const transformedItem: any = {
+ let transformedItem: any = {
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 }) => {
if (!groupedData[name].bulletinColumn[metric.name]) {
groupedData[name].bulletinColumn[metric.name] = new
Set<string>();
}
- metric.fields.forEach((item: any[]) => {
- item.forEach((field: any) => {
- transformedItem[field.key] = field.value;
-
groupedData[name].bulletinColumn[metric.name].add(field.key);
+ metric.fields.forEach((field: any[]) => {
+ field.forEach((fieldItem: any) => {
+ const key = fieldItem.key;
+ const value = fieldItem.value;
+
+ // Ensure the transformedItem has an array for each key
+ if (!transformedItem[key]) {
+ transformedItem[key] = [];
+ }
+ transformedItem[key].push(value);
+
+ groupedData[name].bulletinColumn[metric.name].add(key);
});
- groupedData[name].data.push(transformedItem);
- console.log(transformedItem);
});
});
-
+ groupedData[name].data.push(transformedItem);
});
this.tabDefines = Object.keys(groupedData).map(name => ({
@@ -710,7 +716,21 @@ export class BulletinComponent implements OnInit {
}
);
}
+
getMetricNames(bulletinTab: any): string[] {
return Object.keys(bulletinTab.bulletinColumn);
}
+
+ getRowSpan(data: any, bulletinTab: any): number {
+ let rowSpan = 1;
+ 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);
+ }
+ });
+ });
+ return rowSpan;
+ }
+
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
