This is an automated email from the ASF dual-hosted git repository.
gongchao 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 6cdffbefa Optimize the visual experience of the monitoring details
page. (#2189)
6cdffbefa is described below
commit 6cdffbefacea10364a48220f36876789c6d4e461
Author: Kerwin Bryant <[email protected]>
AuthorDate: Thu Jul 4 10:49:31 2024 +0800
Optimize the visual experience of the monitoring details page. (#2189)
Co-authored-by: tomsun28 <[email protected]>
---
.../monitor-data-table.component.html | 7 ++-
.../monitor-data-table.component.less | 3 ++
.../monitor-data-table.component.ts | 55 +++++++++++++---------
.../monitor-detail/monitor-detail.component.html | 2 +
4 files changed, 44 insertions(+), 23 deletions(-)
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 d27e5f8d3..b1228176c 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
@@ -19,10 +19,11 @@
<nz-card
nzHoverable
- style="height: 100%; display: flex; flex-direction: column"
+ [style]="{ height: height || '100%', display: 'flex', flexDirection:
'column' }"
[nzBordered]="true"
- [nzBodyStyle]="{ overflow: 'auto' }"
+ [nzBodyStyle]="{ overflow: !monitor ? 'hidden' : 'auto' }"
[nzTitle]="card_title"
+ [nzLoading]="loading"
[nzExtra]="!monitor ? metrics_card_extra : monitor_card_extra"
>
<div *ngIf="!!monitor">
@@ -113,6 +114,7 @@
[nzFrontPagination]="false"
[nzShowPagination]="false"
[nzData]="valueRows"
+ [nzScroll]="{ y: scrollY }"
#smallTable
>
<thead>
@@ -139,6 +141,7 @@
[nzFrontPagination]="false"
[nzShowPagination]="false"
[nzData]="valueRows"
+ [nzScroll]="{ y: scrollY }"
>
<thead>
<tr>
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 715990e1a..7cc3fe6fa 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
@@ -11,4 +11,7 @@ p {
.ant-card-head-title {
padding: 16px 0 4px 0;
}
+ .ant-table-body {
+ overflow-y: auto!important;
+ }
}
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 e53a6b111..d416c5c3d 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
@@ -17,8 +17,9 @@
* under the License.
*/
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { finalize } from 'rxjs/operators';
import { MonitorService } from '../../../service/monitor.service';
@@ -27,7 +28,7 @@ import { MonitorService } from
'../../../service/monitor.service';
templateUrl: './monitor-data-table.component.html',
styleUrls: ['./monitor-data-table.component.less']
})
-export class MonitorDataTableComponent {
+export class MonitorDataTableComponent implements OnInit {
@Input()
get monitorId(): number {
return this._monitorId;
@@ -48,37 +49,49 @@ export class MonitorDataTableComponent {
monitor!: any;
@Input()
metrics!: string;
+ @Input()
+ height: string = '100%';
time!: any;
fields!: any[];
valueRows!: any[];
rowValues!: any[];
isTable: boolean = true;
+ scrollY: string = '100%';
+ loading: boolean = false;
constructor(private monitorSvc: MonitorService, private notifySvc:
NzNotificationService) {}
+ ngOnInit(): void {
+ this.scrollY = `calc(${this.height} - 130px)`;
+ }
+
loadData() {
+ this.loading = true;
// 读取实时指标数据
- let metricData$ = this.monitorSvc.getMonitorMetricsData(this.monitorId,
this.metrics).subscribe(
- message => {
- metricData$.unsubscribe();
- if (message.code === 0 && message.data) {
- this.time = message.data.time;
- this.fields = message.data.fields;
- this.valueRows = message.data.valueRows;
- if (this.valueRows.length == 1) {
- this.isTable = false;
- this.rowValues = this.valueRows[0].values;
+ let metricData$ = this.monitorSvc
+ .getMonitorMetricsData(this.monitorId, this.metrics)
+ .pipe(finalize(() => (this.loading = false)))
+ .subscribe(
+ message => {
+ metricData$.unsubscribe();
+ if (message.code === 0 && message.data) {
+ this.time = message.data.time;
+ this.fields = message.data.fields;
+ this.valueRows = message.data.valueRows;
+ if (this.valueRows.length == 1) {
+ this.isTable = false;
+ this.rowValues = this.valueRows[0].values;
+ }
+ } else if (message.code !== 0) {
+ this.notifySvc.warning(`${this.metrics}:${message.msg}`, '');
+ console.info(`${this.metrics}:${message.msg}`);
}
- } else if (message.code !== 0) {
- this.notifySvc.warning(`${this.metrics}:${message.msg}`, '');
- console.info(`${this.metrics}:${message.msg}`);
+ },
+ error => {
+ console.error(error.msg);
+ metricData$.unsubscribe();
}
- },
- error => {
- console.error(error.msg);
- metricData$.unsubscribe();
- }
- );
+ );
}
}
diff --git
a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
index 812ddfda9..1509f88c7 100755
---
a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
+++
b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
@@ -57,6 +57,7 @@
<div class="cards">
<app-monitor-data-table
class="card"
+ [height]="'400px'"
[monitor]="monitor"
[port]="port"
[monitorId]="monitorId"
@@ -64,6 +65,7 @@
></app-monitor-data-table>
<app-monitor-data-table
class="card"
+ [height]="'400px'"
*ngFor="let metric of metrics; let i = index"
[metrics]="metric"
[monitorId]="monitorId"
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
