This is an automated email from the ASF dual-hosted git repository.
liuhongyu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new b4151a4e73 [improve] update monitor detail ui (#3199)
b4151a4e73 is described below
commit b4151a4e730e9ae67e78629c85d4133ff872e5ba
Author: tomsun28 <[email protected]>
AuthorDate: Mon Mar 31 14:33:29 2025 +0800
[improve] update monitor detail ui (#3199)
Signed-off-by: tomsun28 <[email protected]>
---
.../common/entity/message/CollectRep.java | 10 +-
.../monitor-data-table.component.html | 118 ++++++++-------------
.../monitor-data-table.component.less | 47 ++++++++
.../monitor-data-table.component.ts | 10 ++
web-app/src/app/routes/monitor/monitor.module.ts | 4 +-
5 files changed, 107 insertions(+), 82 deletions(-)
diff --git
a/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/message/CollectRep.java
b/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/message/CollectRep.java
index 4d49f513b8..573200875f 100644
---
a/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/message/CollectRep.java
+++
b/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/message/CollectRep.java
@@ -445,15 +445,7 @@ public final class CollectRep {
if (value != null) {
// Check byte array size, Arrow buffer
size is 32768 bytes
byte[] bytes =
value.getBytes(StandardCharsets.UTF_8);
- if (bytes.length > 32700) {
- log.warn("Value too large for
Arrow buffer ({}), truncating to 32700 bytes. Meta: {}",
- bytes.length,
JsonUtil.toJson(metadata));
- byte[] truncatedBytes = new
byte[32700];
- System.arraycopy(bytes, 0,
truncatedBytes, 0, 32700);
- vector.set(rowIndex,
truncatedBytes);
- } else {
- vector.set(rowIndex, bytes);
- }
+ vector.setSafe(rowIndex, bytes);
}
}
}
diff --git
a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html
b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html
index b79ace77bb..10e7430b34 100644
---
a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html
+++
b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html
@@ -29,85 +29,59 @@
[nzLoading]="!app || loading"
[nzExtra]="card ? (!monitor ? metrics_card_extra : monitor_card_extra) :
''"
>
- <div *ngIf="!!monitor">
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"><p style="text-align: right">ID</p></div>
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ monitorId }}</p></div
- >
- </div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"
- ><p style="text-align: right">{{ 'monitor.detail.name' | i18n
}}</p></div
- >
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ monitor.name }}</p></div
- >
- </div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"><p style="text-align: right">HOST</p></div>
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ monitor.host }}</p></div
- >
- </div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"
- ><p style="text-align: right">{{ 'monitor.detail.port' | i18n
}}</p></div
- >
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ port }}</p></div
- >
- </div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"
- ><p style="text-align: right">{{ 'monitor.detail.description' | i18n
}}</p></div
- >
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ monitor.description }}</p></div
- >
- </div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"
- ><p style="text-align: right">{{ 'monitor.detail.status' | i18n
}}</p></div
- >
- <div nz-col nzSpan="16">
- <nz-tag *ngIf="monitor.status == 0" nzColor="default">
+ <div *ngIf="!!monitor" class="monitor-detail-container">
+ <div class="monitor-basic-info">
+ <div class="monitor-info-header">
+ <div class="monitor-name">{{ monitor.name }}</div>
+ <nz-tag *ngIf="monitor.status == 0" [nzColor]="'#b2b2b2'"
class="status-tag">
<i nz-icon nzType="meh" nzTheme="outline"></i>
<span>{{ 'monitor.status.paused' | i18n }}</span>
</nz-tag>
- <nz-tag *ngIf="monitor.status == 1" nzColor="success">
+ <nz-tag *ngIf="monitor.status == 1" [nzColor]="'#498765'"
class="status-tag">
<i nz-icon nzType="smile" nzTheme="outline"></i>
<span>{{ 'monitor.status.up' | i18n }}</span>
</nz-tag>
- <nz-tag *ngIf="monitor.status == 2" nzColor="error">
+ <nz-tag *ngIf="monitor.status == 2" [nzColor]="'#fd4357'"
class="status-tag">
<i nz-icon nzType="frown" nzTheme="outline"></i>
<span>{{ 'monitor.status.down' | i18n }}</span>
</nz-tag>
</div>
+
+ <div nz-row [nzGutter]="16">
+ <div nz-col [nzSpan]="24">
+ <nz-descriptions nzBordered [nzColumn]="{ xxl: 2, xl: 2, lg: 2,
md: 1, sm: 1, xs: 1 }">
+ <nz-descriptions-item [nzTitle]="'ID'">{{ monitorId
}}</nz-descriptions-item>
+ <nz-descriptions-item [nzTitle]="'HOST'">{{ monitor.host
}}</nz-descriptions-item>
+ <nz-descriptions-item [nzTitle]="'monitor.detail.port' |
i18n">{{ port }}</nz-descriptions-item>
+ <nz-descriptions-item [nzTitle]="'monitor.intervals' | i18n">{{
monitor.intervals }}s</nz-descriptions-item>
+ <nz-descriptions-item [nzTitle]="'label' | i18n" [nzSpan]="2">
+ <div class="tags-container">
+ <ng-container *ngFor="let label of
getObjectEntries(monitor.labels)">
+ <nz-tag>{{ label[0] }}: {{ label[1] }}</nz-tag>
+ </ng-container>
+ </div>
+ </nz-descriptions-item>
+ <nz-descriptions-item [nzTitle]="'monitor.detail.description' |
i18n" [nzSpan]="2">
+ {{ monitor.description }}
+ </nz-descriptions-item>
+ <nz-descriptions-item [nzTitle]="'common.new-time' | i18n">
+ {{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}
+ </nz-descriptions-item>
+ <nz-descriptions-item [nzTitle]="'common.edit-time' | i18n">
+ {{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}
+ </nz-descriptions-item>
+ </nz-descriptions>
+ </div>
+ </div>
</div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"
- ><p style="text-align: right">{{ 'monitor.intervals' | i18n
}}</p></div
- >
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ monitor.intervals }}s</p></div
- >
- </div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"
- ><p style="text-align: right">{{ 'common.new-time' | i18n }}</p></div
- >
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ monitor.gmtCreate | date :
'YYYY-MM-dd HH:mm:ss' }}</p></div
- >
- </div>
- <div nz-row nzGutter="16">
- <div nz-col nzSpan="8"
- ><p style="text-align: right">{{ 'common.edit-time' | i18n
}}</p></div
- >
- <div nz-col nzSpan="16"
- ><p style="text-align: left">{{ monitor.gmtUpdate | date :
'YYYY-MM-dd HH:mm:ss' }}</p></div
- >
+
+ <div class="monitor-annotations" *ngIf="monitor.annotations &&
getObjectLength(monitor.annotations) > 0">
+ <h3 class="section-title">{{ 'annotation' | i18n }}</h3>
+ <nz-descriptions nzBordered [nzColumn]="1" [nzSize]="'small'">
+ <nz-descriptions-item *ngFor="let annotation of
getObjectEntries(monitor.annotations)" [nzTitle]="annotation[0]">
+ {{ annotation[1] }}
+ </nz-descriptions-item>
+ </nz-descriptions>
</div>
</div>
<nz-table
@@ -124,6 +98,7 @@
<tr>
<th style="text-align: center" *ngFor="let field of fields"
nzWidth="100px">
{{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' +
field.name | i18nElse : field.name }}
+ <nz-tag *ngIf="field.unit" [nzBordered]="false">{{ field.unit
}}</nz-tag>
</th>
</tr>
</thead>
@@ -133,8 +108,7 @@
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
<ng-template #contentTemplate>
{{ value.origin }}
- <nz-tag *ngIf="value.origin == null" nzColor="warning">{{
'monitor.detail.value.null' | i18n }}</nz-tag>
- <nz-tag *ngIf="fields[i].unit" nzColor="success">{{
fields[i].unit }}</nz-tag>
+ <nz-tag *ngIf="value.origin == null">{{
'monitor.detail.value.null' | i18n }}</nz-tag>
</ng-template>
</td>
</tr>
@@ -159,11 +133,11 @@
<tr *ngFor="let field of fields; let i = index">
<td>
{{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' +
field.name | i18nElse : field.name }}
+ <nz-tag *ngIf="field.unit" [nzBordered]="false">{{ field.unit
}}</nz-tag>
</td>
<td
>{{ rowValues[i].origin }}
- <nz-tag *ngIf="rowValues[i].origin == null" nzColor="warning">{{
'monitor.detail.value.null' | i18n }}</nz-tag>
- <nz-tag *ngIf="field.unit" nzColor="success">{{ field.unit
}}</nz-tag>
+ <nz-tag *ngIf="rowValues[i].origin == null">{{
'monitor.detail.value.null' | i18n }}</nz-tag>
</td>
</tr>
</tbody>
diff --git
a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.less
b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.less
index 5f1d96d10e..1f27a5380d 100644
---
a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.less
+++
b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.less
@@ -1,3 +1,5 @@
+@import "~src/styles/theme";
+
p {
font-size: xx-small;
word-wrap: break-word;
@@ -18,3 +20,48 @@ p {
margin-bottom: inherit;
}
}
+
+.monitor-detail-container {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.monitor-basic-info {
+ width: 100%;
+}
+
+.monitor-info-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.monitor-name {
+ font-size: 18px;
+ font-weight: 500;
+}
+
+.status-tag {
+ margin-left: auto;
+}
+
+.section-title {
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 12px;
+ border-left: 4px solid @primary-color;
+ padding-left: 10px;
+}
+
+.tags-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.monitor-annotations {
+ width: 100%;
+}
diff --git
a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts
b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts
index a2a6678367..2ead3f9e03 100644
---
a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts
+++
b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts
@@ -96,4 +96,14 @@ export class MonitorDataTableComponent implements OnInit {
}
);
}
+
+ getObjectLength(obj: Record<string, string> | undefined): number {
+ if (!obj) return 0;
+ return Object.keys(obj).length;
+ }
+
+ getObjectEntries(obj: Record<string, string> | undefined): Array<[string,
string]> {
+ if (!obj) return [];
+ return Object.entries(obj);
+ }
}
diff --git a/web-app/src/app/routes/monitor/monitor.module.ts
b/web-app/src/app/routes/monitor/monitor.module.ts
index 10e6f5bd24..8f0c67e32e 100644
--- a/web-app/src/app/routes/monitor/monitor.module.ts
+++ b/web-app/src/app/routes/monitor/monitor.module.ts
@@ -22,6 +22,7 @@ import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzListModule } from 'ng-zorro-antd/list';
@@ -68,7 +69,8 @@ const COMPONENTS: Array<Type<void>> = [
ClipboardModule,
NzUploadModule,
SafePipe,
- NzListModule
+ NzListModule,
+ NzDescriptionsModule
],
declarations: COMPONENTS
})
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
