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 ab91fde93 refactor(bulletin): optimize table layout and metric fields
processing
ab91fde93 is described below
commit ab91fde939cc90f19dde2e05d5cd4bfa6deb49d7
Author: zqr10159 <[email protected]>
AuthorDate: Fri Jul 19 11:50:53 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.
---
.../manager/controller/BulletinController.java | 6 +--
.../app/routes/bulletin/bulletin.component.html | 60 ++++++++++++----------
.../app/routes/bulletin/bulletin.component.less | 14 ++---
.../src/app/routes/bulletin/bulletin.component.ts | 7 +--
web-app/src/assets/i18n/zh-CN.json | 4 +-
5 files changed, 49 insertions(+), 42 deletions(-)
diff --git
a/manager/src/main/java/org/apache/hertzbeat/manager/controller/BulletinController.java
b/manager/src/main/java/org/apache/hertzbeat/manager/controller/BulletinController.java
index 076867e5a..0e6043a9f 100644
---
a/manager/src/main/java/org/apache/hertzbeat/manager/controller/BulletinController.java
+++
b/manager/src/main/java/org/apache/hertzbeat/manager/controller/BulletinController.java
@@ -207,9 +207,9 @@ public class BulletinController {
BulletinMetricsData.Metric.MetricBuilder metricBuilder =
BulletinMetricsData.Metric.builder();
List<BulletinMetricsData.Metric> metrics = new ArrayList<>();
- for (String metric : bulletin.getMetrics()) {
- metricBuilder.name(metric.split("-")[0]);
- CollectRep.MetricsData currentMetricsData =
realTimeDataReader.getCurrentMetricsData(bulletin.getMonitorId(),
metric.split("-")[0]);
+ for (String metric : bulletin.getMetrics().stream().map(metric ->
metric.split("-")[0]).distinct().toList()){
+ metricBuilder.name(metric);
+ CollectRep.MetricsData currentMetricsData =
realTimeDataReader.getCurrentMetricsData(bulletin.getMonitorId(), metric);
List<List<BulletinMetricsData.Field>> fieldsList = new
ArrayList<>();
List<CollectRep.ValueRow> valuesList =
currentMetricsData.getValuesList();
for (CollectRep.ValueRow valueRow : valuesList) {
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.html
b/web-app/src/app/routes/bulletin/bulletin.component.html
index 7889693c0..c9131d5ea 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.html
+++ b/web-app/src/app/routes/bulletin/bulletin.component.html
@@ -19,7 +19,7 @@
<app-help-message-show
[help_message_content]="'自定义监控看板'"
- [guild_link]="'alert.help.center.setting' | i18n"
+ [guild_link]="'bulletin.help.link' | i18n"
[module_name]="'menu.alert.setting'"
[icon_name]="'calculator'"
></app-help-message-show>
@@ -63,38 +63,42 @@
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.split("$$$")[1] }}</th>
+ <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>
- </ng-container>
- </tr>
+ </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>
+ </ng-container>
+ </tr>
</thead>
<tbody>
- <ng-container *ngFor="let data of fixedTable.data">
- <ng-container *ngFor="let rowIndex of getRowIndexes(data,
bulletinTab)">
- <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 *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 *ngFor="let data of fixedTable.data">
+ <ng-container *ngFor="let rowIndex of getRowIndexes(data,
bulletinTab)">
+ <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>
- </tr>
+ <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].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>
+ </td>
+ <td *ngIf="data[field].length <= rowIndex"></td>
+ </ng-container>
+ </ng-container>
+ </tr>
+ </ng-container>
</ng-container>
- </ng-container>
</tbody>
</nz-table>
diff --git a/web-app/src/app/routes/bulletin/bulletin.component.less
b/web-app/src/app/routes/bulletin/bulletin.component.less
index 3f4bc8cd4..0b13dcbfc 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.less
+++ b/web-app/src/app/routes/bulletin/bulletin.component.less
@@ -1,17 +1,17 @@
@table-padding: 8px;
-
.table {
width: 100%;
- table-layout: auto; // 自动调整列宽
+ table-layout: auto;
th {
- white-space: nowrap; // 防止文本换行
- padding: @table-padding; // 添加一些内边距，使内容不贴边
- text-align: center; // 居中对齐
+ white-space: nowrap;
+ padding: @table-padding;
+ text-align: center;
}
td {
- padding: @table-padding; // 添加一些内边距，使内容不贴边
- text-align: center; // 居中对齐
+ white-space: nowrap;
+ 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 366a502a7..b4635a05b 100644
--- a/web-app/src/app/routes/bulletin/bulletin.component.ts
+++ b/web-app/src/app/routes/bulletin/bulletin.component.ts
@@ -682,13 +682,14 @@ export class BulletinComponent implements OnInit {
metric.fields.forEach((field: any[]) => {
field.forEach((fieldItem: any) => {
const key = `${metric.name}$$$${fieldItem.key}`;
- console.log(key)
+ console.log(key);
const value = fieldItem.value;
+ const unit = fieldItem.unit;
if (!transformedItem[key]) {
transformedItem[key] = [];
}
- transformedItem[key].push(value);
+ transformedItem[key].push(`${value}$$$${unit}`);
groupedData[name].bulletinColumn[metric.name].add(key);
});
@@ -722,7 +723,7 @@ export class BulletinComponent implements OnInit {
return Object.keys(bulletinTab.bulletinColumn);
}
- getMaxRowSpan(data: { [x: string]: string | any[]; }, bulletinTab: {
bulletinColumn: { [x: string]: any; }; }) {
+ 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]) {
diff --git a/web-app/src/assets/i18n/zh-CN.json
b/web-app/src/assets/i18n/zh-CN.json
index 3bec1bb01..74984a2d1 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -140,7 +140,9 @@
"time": "发布时间",
"status": "状态",
"status.online": "已发布",
- "status.offline": "未发布"
+ "status.offline": "未发布",
+ "help.content": "自定义监控看板,可以展示某种监控的duo'tai服务器的，磁盘、内存、一个总的概览，像是一个表格",
+ "help.link": ""
},
"question.link": "https://hertzbeat.apache.org/zh-cn/docs/help/issue";,
"alert.setting.new": "新增阈值规则",
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
