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 3c73afb9a refactor(bulletin): optimize table layout and metric fields
processing
new 2bc74b481 Merge branch 'bulletin' of github.com:apache/hertzbeat into
bulletin
3c73afb9a is described below
commit 3c73afb9ad0fb92c693c530c46fbd913c41beaa1
Author: zqr10159 <[email protected]>
AuthorDate: Thu Jul 18 22:15:36 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 | 53 ++++++++++++----------
.../app/routes/bulletin/bulletin.component.less | 17 +++++++
.../src/app/routes/bulletin/bulletin.component.ts | 28 +++++++-----
3 files changed, 61 insertions(+), 37 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..7889693c0 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -60,41 +60,44 @@
nzShowPagination="true"
[nzScroll]="{ x: 'auto' }"
nzBordered
+ class="table"
>
<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%" [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.split("$$$")[1] }}</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>
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.less
b/web-app/src/app/routes/bulletin/bulletin.component.less
index e69de29bb..3f4bc8cd4 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.less
+++ b/web-app/src/app/routes/bulletin/bulletin.component.less
@@ -0,0 +1,17 @@
+@table-padding: 8px;
+
+.table {
+ width: 100%;
+ table-layout: auto; // 自动调整列宽
+
+ th {
+ white-space: nowrap; // 防止文本换行
+ padding: @table-padding; // 添加一些内边距，使内容不贴边
+ text-align: center; // 居中对齐
+ }
+
+ td {
+ padding: @table-padding; // 添加一些内边距，使内容不贴边
+ text-align: center; // 居中对齐
+ }
+}
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.ts
b/web-app/src/app/routes/bulletin/bulletin.component.ts
index 29717ba84..366a502a7 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -681,7 +681,8 @@ export class BulletinComponent implements OnInit {
}
metric.fields.forEach((field: any[]) => {
field.forEach((fieldItem: any) => {
- const key = `${metric.name}_${fieldItem.key}`;
+ const key = `${metric.name}$$$${fieldItem.key}`;
+ console.log(key)
const value = fieldItem.value;
if (!transformedItem[key]) {
@@ -704,6 +705,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 +719,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]
