This is an automated email from the ASF dual-hosted git repository.
Duansg 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 f07215639d [feat] paginate the monitoring metrics data table (#4309)
f07215639d is described below
commit f07215639dec96015537f81f39b48414dbf15540
Author: NekoPunch <[email protected]>
AuthorDate: Wed Aug 12 07:41:23 2026 -0700
[feat] paginate the monitoring metrics data table (#4309)
---
.../monitor-data-table/monitor-data-table.component.html | 12 +++++++++---
.../monitor-data-table/monitor-data-table.component.ts | 7 ++++++-
2 files changed, 15 insertions(+), 4 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 ee25a56259..1dfc67af21 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
@@ -92,10 +92,16 @@
*ngIf="!monitor && isTable"
nzSize="small"
[nzNoResult]="'monitor.detail.chart.no-data' | i18n"
- [nzFrontPagination]="false"
- [nzShowPagination]="false"
+ [nzFrontPagination]="true"
+ [nzShowPagination]="valueRows.length > 10"
+ [nzPageSize]="pageSize"
+ [nzShowSizeChanger]="true"
+ [nzPageSizeOptions]="[10, 20, 50, 100]"
+ [nzPageIndex]="pageIndex"
+ (nzPageIndexChange)="pageIndex = $event"
+ (nzPageSizeChange)="pageSize = $event; pageIndex = 1"
[nzData]="valueRows"
- [nzScroll]="height ? { y: scrollY } : { x: '100%' }"
+ [nzScroll]="height ? { y: valueRows.length > 10 ? pagedScrollY : scrollY
} : { x: '100%' }"
#smallTable
>
<thead>
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 cfb4885bb4..8cc6931814 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
@@ -60,16 +60,20 @@ export class MonitorDataTableComponent implements OnInit {
showModal!: boolean;
time!: any;
fields!: any[];
- valueRows!: any[];
+ valueRows: any[] = [];
rowValues!: any[];
isTable: boolean = true;
scrollY: string = '100%';
+ pagedScrollY: string = '100%';
loading: boolean = false;
+ pageSize: number = 10;
+ pageIndex: number = 1;
constructor(private monitorSvc: MonitorService, private notifySvc:
NzNotificationService) {}
ngOnInit(): void {
this.scrollY = `calc(${this.height} - 130px)`;
+ this.pagedScrollY = `calc(${this.height} - 170px)`;
}
loadData() {
@@ -85,6 +89,7 @@ export class MonitorDataTableComponent implements OnInit {
this.time = message.data.time;
this.fields = message.data.fields;
this.valueRows = message.data.valueRows;
+ this.pageIndex = 1;
if (this.valueRows.length == 1) {
this.isTable = false;
this.rowValues = this.valueRows[0].values;
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
