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 03a0f5b06 refactor(bulletin): optimize table layout and metric fields
processing
03a0f5b06 is described below
commit 03a0f5b069d8d7acb86a753435fc48128cbc4961
Author: zqr10159 <[email protected]>
AuthorDate: Thu Jul 18 22:15:36 2024 +0800
refactor(bulletin): optimize table layout and metric fields processing
Restructure the bulletin table headers for improved clarity and correct the
logic for calculating row spans. Streamline the processing of metric fields to
eliminate unnecessary data transformations, resulting in better performance and
ease of maintenance.
BREAKING CHANGE: The changes to the table layout and metric field handling
may affect consumers of the bulletin component who rely on the previous
structure.
---
.../app/routes/bulletin/bulletin.component.html | 56 ++++++++++++----------
.../src/app/routes/bulletin/bulletin.component.ts | 25 +++++-----
2 files changed, 45 insertions(+), 36 deletions(-)
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index 1021805b6..baeb809fb 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -62,43 +62,49 @@
nzBordered
>
<thead>
- <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>
- </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" 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].size">{{ metricName }}</th>
+ </ng-container>
+ </tr>
+ <tr>
+ <ng-container *ngFor="let metricName of getMetricNames(bulletinTab)">
+ <th nzAlign="center">{{ metricName }}</th>
+ </ng-container>
+ <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>
+ </ng-container>
+ </tr>
</thead>
<tbody>
- <ng-container *ngFor="let data of fixedTable.data">
+ <ng-container *ngFor="let data of fixedTable.data">
+ <ng-container *ngFor="let rowIndex of getRowIndexes(data,
bulletinTab)">
<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 *ngIf="rowIndex === 0">
+ <td nzAlign="center" [rowSpan]="getMaxRowSpan(data,
bulletinTab)">{{ data.app }}</td>
+ <td nzAlign="center" [rowSpan]="getMaxRowSpan(data,
bulletinTab)">{{ data.host }}</td>
</ng-container>
- </ng-container>
+ <ng-container *ngFor="let metricName of
getMetricNames(bulletinTab)">
+ <ng-container *ngFor="let field of
bulletinTab.bulletinColumn[metricName]">
+ <td *ngIf="data[field].length > rowIndex">{{
data[field][rowIndex] }}</td>
+ <td *ngIf="data[field].length <= rowIndex"></td>
+ </ng-container>
+ </ng-container>
+ </tr>
</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 29717ba84..7509d1464 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -704,6 +704,7 @@ 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}`);
@@ -717,19 +718,21 @@ 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 => {
- bulletinTab.bulletinColumn[metricName].forEach((field: string) => {
- if (data[field] && data[field].length) {
- rowSpan = Math.max(rowSpan, data[field].length);
- }
- });
- });
- return rowSpan;
+ getMaxRowSpan(data: { [x: string]: string | any[]; }, bulletinTab: {
bulletinColumn: { [x: string]: any; }; }) {
+ let maxRowSpan = 1;
+ for (let metricName of this.getMetricNames(bulletinTab)) {
+ for (let field of bulletinTab.bulletinColumn[metricName]) {
+ maxRowSpan = Math.max(maxRowSpan, data[field].length);
+ }
+ }
+ return maxRowSpan;
+ }
+
+ getRowIndexes(data: { [x: string]: string | any[] }, bulletinTab: {
bulletinColumn: { [x: string]: any } }) {
+ const maxRowSpan = this.getMaxRowSpan(data, bulletinTab);
+ return Array.from({ length: maxRowSpan }, (_, index) => index);
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
