Optimize the visual experience of the monitoring details page. (#2189)

Co-authored-by: tomsun28 <[email protected]>
apache · Jul 4, 2024 · 6cdffbe · 6cdffbe
1 parent 0699e89
commit 6cdffbe
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 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
@@ -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
@@ -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
@@ -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
@@ -57,13 +57,15 @@
           <div class="cards">
             <app-monitor-data-table
               class="card"
+              [height]="'400px'"
               [monitor]="monitor"
               [port]="port"
               [monitorId]="monitorId"
               [app]="app"
             ></app-monitor-data-table>
             <app-monitor-data-table
               class="card"
+              [height]="'400px'"
               *ngFor="let metric of metrics; let i = index"
               [metrics]="metric"
               [monitorId]="monitorId"