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 79cb06c33 refactor(bulletin): optimize table layout and metric fields
processing
79cb06c33 is described below
commit 79cb06c336895181ebebbe6971f957bb22c92a60
Author: zqr10159 <[email protected]>
AuthorDate: Sat Jul 20 15:05: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 | 4 +-
.../src/app/routes/bulletin/bulletin.component.ts | 162 +++++++++------------
2 files changed, 69 insertions(+), 97 deletions(-)
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index c9131d5ea..225641893 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -91,7 +91,9 @@
<td *ngIf="data[field].length > rowIndex"
>{{ data[field][rowIndex].split('$$$')[0] }}
<nz-tag *ngIf="data[field][rowIndex] == null"
nzColor="warning">{{ 'monitors.detail.value.null' | i18n }}</nz-tag>
- <nz-tag *ngIf="data[field][rowIndex].split('$$$')[1]"
nzColor="success">{{ data[field][rowIndex].split('$$$')[1] }}</nz-tag>
+ <nz-tag *ngIf="data[field][rowIndex].split('$$$')[1]"
nzColor="success">{{
+ data[field][rowIndex].split('$$$')[1]
+ }}</nz-tag>
</td>
<td *ngIf="data[field].length <= rowIndex"></td>
</ng-container>
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.ts
b/web-app/src/app/routes/bulletin/bulletin.component.ts
index b4635a05b..5b5c69809 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -73,40 +73,14 @@ export class BulletinComponent implements OnInit {
appEntries: Array<{ value: any; key: string }> = [];
checkedNodeList: NzTreeNode[] = [];
monitors: Monitor[] = [];
- loading: boolean = false;
rawData: any[] = [];
ngOnInit(): void {
- this.loadBulletinDefineTable();
this.loadData();
}
sync() {
- this.loadBulletinDefineTable();
- }
-
- loadBulletinDefineTable() {
- this.tableLoading = true;
- let bulletinDefineInit$ =
this.bulletinDefineSvc.getBulletinDefines(this.search, this.pageIndex - 1,
this.pageSize).subscribe(
- message => {
- this.tableLoading = false;
- this.checkedAll = false;
- this.checkedDefineIds.clear();
- if (message.code === 0) {
- let page = message.data;
- this.defines = page.content;
- this.pageIndex = page.number + 1;
- this.total = page.totalElements;
- } else {
- console.warn(message.msg);
- }
- bulletinDefineInit$.unsubscribe();
- },
- error => {
- this.tableLoading = false;
- bulletinDefineInit$.unsubscribe();
- }
- );
+ this.loadData();
}
onNewBulletinDefine() {
@@ -158,7 +132,7 @@ export class BulletinComponent implements OnInit {
} else {
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'),
message.msg);
}
- this.loadBulletinDefineTable();
+ this.loadData();
this.tableLoading = false;
},
error => {
@@ -239,7 +213,7 @@ export class BulletinComponent implements OnInit {
if (message.code === 0) {
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.delete-success'), '');
this.updatePageIndex(defineIds.size);
- this.loadBulletinDefineTable();
+ this.loadData();
} else {
this.tableLoading = false;
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'),
message.msg);
@@ -283,7 +257,6 @@ export class BulletinComponent implements OnInit {
const { pageSize, pageIndex, sort, filter } = params;
this.pageIndex = pageIndex;
this.pageSize = pageSize;
- this.loadBulletinDefineTable();
}
// end: 列表多选逻辑
@@ -317,7 +290,7 @@ export class BulletinComponent implements OnInit {
if (message.code === 0) {
this.isManageModalVisible = false;
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.new-success'), '');
- this.loadBulletinDefineTable();
+ this.loadData();
this.resetManageModalData();
} else {
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.new-fail'), message.msg);
@@ -341,7 +314,7 @@ export class BulletinComponent implements OnInit {
if (message.code === 0) {
this.isManageModalVisible = false;
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.edit-success'), '');
- this.loadBulletinDefineTable();
+ this.loadData();
} else {
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'),
message.msg);
}
@@ -477,7 +450,7 @@ export class BulletinComponent implements OnInit {
if (message.code === 0) {
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.apply-success'), '');
this.isConnectModalVisible = false;
- this.loadBulletinDefineTable();
+ this.loadData();
} else {
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'),
message.msg);
}
@@ -648,75 +621,72 @@ export class BulletinComponent implements OnInit {
}
loadData() {
- this.loading = true;
- const metricData$ = this.bulletinDefineSvc
- .getAllMonitorMetricsData()
- .pipe(finalize(() => (this.loading = false)))
- .subscribe(
- message => {
- metricData$.unsubscribe();
- if (message.code === 0 && message.data) {
- this.rawData = message.data;
- const groupedData: any = {};
-
- this.rawData.forEach(item => {
- const name = item.name;
- if (!groupedData[name]) {
- groupedData[name] = {
- bulletinColumn: {},
- data: []
- };
- }
-
- let transformedItem: any = {
- id: item.id,
- app: item.app,
- monitorId: item.content.monitorId,
- host: item.content.host
+ const metricData$ =
this.bulletinDefineSvc.getAllMonitorMetricsData().subscribe(
+ message => {
+ metricData$.unsubscribe();
+ if (message.code === 0 && message.data) {
+ this.tableLoading = false;
+ this.rawData = message.data;
+ const groupedData: any = {};
+
+ this.rawData.forEach(item => {
+ const name = item.name;
+ if (!groupedData[name]) {
+ groupedData[name] = {
+ bulletinColumn: {},
+ data: []
};
+ }
+
+ let transformedItem: any = {
+ id: item.id,
+ app: item.app,
+ monitorId: item.content.monitorId,
+ 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((field: any[]) => {
- field.forEach((fieldItem: any) => {
- const key = `${metric.name}$$$${fieldItem.key}`;
- console.log(key);
- const value = fieldItem.value;
- const unit = fieldItem.unit;
-
- if (!transformedItem[key]) {
- transformedItem[key] = [];
- }
- transformedItem[key].push(`${value}$$$${unit}`);
-
- groupedData[name].bulletinColumn[metric.name].add(key);
- });
+ 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((field: any[]) => {
+ field.forEach((fieldItem: any) => {
+ const key = `${metric.name}$$$${fieldItem.key}`;
+ console.log(key);
+ const value = fieldItem.value;
+ const unit = fieldItem.unit;
+
+ if (!transformedItem[key]) {
+ transformedItem[key] = [];
+ }
+ transformedItem[key].push(`${value}$$$${unit}`);
+
+ groupedData[name].bulletinColumn[metric.name].add(key);
});
});
- groupedData[name].data.push(transformedItem);
});
-
- this.tabDefines = Object.keys(groupedData).map(name => ({
- name,
- bulletinColumn: groupedData[name].bulletinColumn,
- data: groupedData[name].data,
- pageIndex: 1,
- 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}`);
- }
- },
- error => {
- console.error(error.msg);
- metricData$.unsubscribe();
+ groupedData[name].data.push(transformedItem);
+ });
+
+ this.tabDefines = Object.keys(groupedData).map(name => ({
+ name,
+ bulletinColumn: groupedData[name].bulletinColumn,
+ data: groupedData[name].data,
+ pageIndex: 1,
+ 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}`);
}
- );
+ },
+ error => {
+ console.error(error.msg);
+ metricData$.unsubscribe();
+ }
+ );
}
getMetricNames(bulletinTab: any): string[] {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
