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 0bf4be72b improve
0bf4be72b is described below
commit 0bf4be72bfdfbc59123283be9909eccf286cc8ae
Author: zqr10159 <[email protected]>
AuthorDate: Wed Aug 21 17:27:42 2024 +0800
improve
---
.../app/routes/bulletin/bulletin.component.html | 87 ++++++++++------------
.../src/app/routes/bulletin/bulletin.component.ts | 43 ++---------
2 files changed, 49 insertions(+), 81 deletions(-)
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index 25be827d2..67b106a07 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -47,14 +47,13 @@
<ng-container *ngIf="tabDefines">
<nz-table
#fixedTable
- [nzData]="tabDefines"
+ [nzData]="tabDefines.data"
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzTotal]="total"
nzFrontPagination="false"
[nzLoading]="tableLoading"
nzShowSizeChanger
- [nzShowTotal]="rangeTemplate"
[nzPageSizeOptions]="[10, 20, 50]"
(nzQueryParams)="onTablePageChange($event)"
nzShowPagination="true"
@@ -63,56 +62,52 @@
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 metric of tabDefines.column">
- <th nzAlign="center" [colSpan]="getKeys(metric).length">
- {{ metric }}
- </th>
- </ng-container>
- </tr>
- <tr>
- <ng-container *ngFor="let metric of tabDefines.column">
- <ng-container *ngFor="let field of getKeys(metric)">
- <th nzAlign="center" [colSpan]="1">
- {{ field }}
- </th>
- </ng-container>
- </ng-container>
- </tr>
+<!-- <tr>-->
+<!-- <th nzAlign="center" nzWidth="7%" [rowSpan]="2">App</th>-->
+<!-- <th nzAlign="center" nzWidth="7%" [rowSpan]="2">Host</th>-->
+<!-- <ng-container *ngFor="let metric of tabDefines.data.column">-->
+<!-- <th nzAlign="center" [colSpan]="getKeys(metric).length">-->
+<!-- {{ metric }}-->
+<!-- </th>-->
+<!-- </ng-container>-->
+<!-- </tr>-->
+<!-- <tr>-->
+<!-- <ng-container *ngFor="let metric of tabDefines.data.column">-->
+<!-- <ng-container *ngFor="let field of getKeys(metric)">-->
+<!-- <th nzAlign="center" [colSpan]="1">-->
+<!-- {{ field }}-->
+<!-- </th>-->
+<!-- </ng-container>-->
+<!-- </ng-container>-->
+<!-- </tr>-->
</thead>
<tbody>
- <ng-container *ngFor="let data of tabDefines.content">
- <ng-container *ngFor="let rowIndex of getRowIndexes(data)">
- <tr>
- <ng-container *ngIf="rowIndex === 0">
- <td nzAlign="center" [rowSpan]="getMaxRowSpan(data)">{{
data.app }}</td>
- <td nzAlign="center" [rowSpan]="getMaxRowSpan(data)">{{
data.host }}</td>
- </ng-container>
- <ng-container *ngFor="let metric of data.metrics">
- <td>
- <div *ngFor="let field of metric.fields">
- <div *ngFor="let item of field">
- <span>{{ item.key }}: </span>
- <nz-tag *ngIf="item.value === 'No Data'"
nzColor="warning">
- {{ 'monitors.detail.value.null' | i18n }}
- </nz-tag>
- <nz-tag *ngIf="item.value !== 'No Data'"
nzColor="success">
- {{ item.value }} {{ item.unit }}
- </nz-tag>
+ <ng-container *ngFor="let content of fixedTable.data">
+ <ng-container *ngFor="let rowIndex of getRowIndexes()">
+ <tr>
+ <ng-container *ngIf="rowIndex === 0">
+ <td nzAlign="center"
[rowSpan]="tabDefines.data.content.length">{{ content.monitorName }}</td>
+ <td nzAlign="center"
[rowSpan]="tabDefines.data.content.length">{{ content.host }}</td>
+ </ng-container>
+ <ng-container *ngFor="let metric of content.metrics">
+ <td>
+ <div *ngFor="let field of metric.fields">
+ <div *ngFor="let item of field">
+ <span>{{ item.key }}: </span>
+ <nz-tag *ngIf="item.value === 'No Data'"
nzColor="warning">
+ {{ 'monitors.detail.value.null' | i18n }}
+ </nz-tag>
+ <nz-tag *ngIf="item.value !== 'No Data'"
nzColor="success"> {{ item.value }} {{ item.unit }} </nz-tag>
+ </div>
</div>
- </div>
- </td>
- </ng-container>
- </tr>
+ </td>
+ </ng-container>
+ </tr>
+ </ng-container>
</ng-container>
- </ng-container>
</tbody>
-
</nz-table>
- <ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{
tabDefines.total }} </ng-template>
</ng-container>
</nz-tab>
</nz-tabset>
@@ -233,7 +228,7 @@
[nzShowSearch]="true"
name="delete"
>
- <nz-option *ngFor="let bulletinTab of tabDefines"
[nzLabel]="bulletinTab.name" [nzValue]="bulletinTab.name"></nz-option>
+ <nz-option *ngFor="let tab of tabs" [nzLabel]="tab"
[nzValue]="tab"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.ts
b/web-app/src/app/routes/bulletin/bulletin.component.ts
index b39f3de67..58b4508a5 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -376,9 +376,7 @@ export class BulletinComponent implements OnInit {
message => {
metricData$.unsubscribe();
if (message.code === 0 && message.data) {
- // this.total = message.data.totalElements;
- this.tabDefines = message.data;
- this.printDataStructure(this.tabDefines.content);
+ this.tabDefines = message;
} else if (message.code !== 0) {
this.notifySvc.warning(`${message.msg}`, '');
console.info(`${message.msg}`);
@@ -394,24 +392,11 @@ export class BulletinComponent implements OnInit {
}
this.tableLoading = false;
}
- printDataStructure(data: any) {
- data.forEach((entry: any) => {
- console.log(`App: ${entry.app}`);
- console.log(`Host: ${entry.host}`);
- entry.metrics.forEach((metric: any) => {
- console.log(`Metric: ${metric.name}`);
- metric.fields.forEach((fieldGroup: any) => {
- fieldGroup.forEach((field: any) => {
- console.log(` Key: ${field.key}, Value: ${field.value}, Unit:
${field.unit}`);
- });
- });
- });
- });
- }
+
getKeys(metricName: string): string[] {
const result = new Set<string>();
- this.tabDefines.content.forEach((item: any) => {
+ this.tabDefines.data.content.forEach((item: any) => {
item.metrics.forEach((metric: any) => {
if (metric.name === metricName) {
metric.fields.forEach((fieldGroup: any) => {
@@ -425,19 +410,6 @@ export class BulletinComponent implements OnInit {
return Array.from(result);
}
- getMaxRowSpan(data: { [x: string]: string | any[] }) {
- let maxRowSpan = 1;
- for (let metricName of this.tabDefines.column) {
- console.info('field', this.tabDefines.content.metrics[metricName]);
- for (let field of this.tabDefines.content.metrics[metricName]) {
- if (Array.isArray(data[field])) {
- maxRowSpan = Math.max(maxRowSpan, data[field].length);
- }
- }
- }
- return maxRowSpan;
- }
-
onTablePageChange(params: NzTableQueryParams): void {
const { pageSize, pageIndex } = params;
@@ -449,9 +421,11 @@ export class BulletinComponent implements OnInit {
}
}
- getRowIndexes(data: { [x: string]: string | any[] }) {
- const maxRowSpan = this.getMaxRowSpan(data);
- return Array.from({ length: maxRowSpan }, (_, index) => index);
+ getRowIndexes() {
+ const maxRowSpan = this.tabDefines.data.content.length;
+ var numbers = Array.from({ length: maxRowSpan }, (_, index) => index);
+ console.log(numbers);
+ return numbers;
}
isDeleteModalVisible: boolean = false;
@@ -477,7 +451,6 @@ export class BulletinComponent implements OnInit {
allNames$.unsubscribe();
if (message.code === 0) {
this.tabs = message.data;
- console.info('tabs:', this.tabs);
resolve();
} else {
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.get-fail'),
message.msg);
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
