[webapp] auto resize the monitor detail ui width (apache#2577)

Signed-off-by: tomsun28 <[email protected]> Co-authored-by: YuLuo <[email protected]>
kerwin612 · Aug 21, 2024 · a1d73a2 · a1d73a2
1 parent bdfffee
commit a1d73a2
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 11 deletions.
diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html
@@ -17,7 +17,8 @@
   ~ under the License.
 -->
 
-<nz-card style="height: 100%" nzHoverable [nzBordered]="true">
+<div #targetElement></div>
+<nz-card style="height: 100%" [style.width]="cardWidth + 'px'" nzHoverable [nzBordered]="true">
   <div
     echarts
     [options]="eChartOption"

diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core';
 import { I18NService } from '@core';
 import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { EChartsOption } from 'echarts';
@@ -30,7 +30,7 @@ import { MonitorService } from '../../../service/monitor.service';
   templateUrl: './monitor-data-chart.component.html',
   styles: []
 })
-export class MonitorDataChartComponent implements OnInit {
+export class MonitorDataChartComponent implements OnInit, AfterViewInit {
   @Input()
   get monitorId(): number {
     return this._monitorId;
@@ -53,7 +53,19 @@ export class MonitorDataChartComponent implements OnInit {
   echartsInstance!: any;
   // Default historical data period is last 6 hours
   timePeriod: string = '6h';
-  constructor(private monitorSvc: MonitorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService) {}
+  cardWidth: number = 600;
+  @ViewChild('targetElement', { static: false }) cardElement!: ElementRef;
+
+  constructor(private monitorSvc: MonitorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService, private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    if (this.cardElement.nativeElement) {
+      const grandparentElement = this.cardElement.nativeElement.parentElement.parentElement;
+      const grandparentWidth = grandparentElement.clientWidth;
+      this.cardWidth = grandparentWidth / 2 - 4;
+      this.cdr.detectChanges();
+    }
+  }
 
   ngOnInit(): void {
     let metricsI18n = this.i18nSvc.fanyi(`monitor.app.${this.app}.metrics.${this.metrics}`);
@@ -259,6 +271,9 @@ export class MonitorDataChartComponent implements OnInit {
                   data: legend
                 };
               }
+              if (legend.length >= 5) {
+                this.cardWidth = this.cardWidth + this.cardWidth;
+              }
               this.lineHistoryTheme.series = [];
               let valueKeyArr = Object.keys(values);
               for (let index = 0; index < valueKeyArr.length; index++) {

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
@@ -16,10 +16,10 @@
   ~ specific language governing permissions and limitations
   ~ under the License.
 -->
-
+<div #targetElement></div>
 <nz-card
   nzHoverable
-  [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column' }"
+  [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column', width: cardWidth + 'px' }"
   [nzBordered]="true"
   [nzBodyStyle]="{ overflow: !monitor ? 'hidden' : 'auto' }"
   [nzTitle]="card_title"

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,7 +17,7 @@
  * under the License.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { finalize } from 'rxjs/operators';
 
@@ -28,7 +28,7 @@ import { MonitorService } from '../../../service/monitor.service';
   templateUrl: './monitor-data-table.component.html',
   styleUrls: ['./monitor-data-table.component.less']
 })
-export class MonitorDataTableComponent implements OnInit {
+export class MonitorDataTableComponent implements OnInit, AfterViewInit {
   @Input()
   get monitorId(): number {
     return this._monitorId;
@@ -53,15 +53,27 @@ export class MonitorDataTableComponent implements OnInit {
   @Input()
   height: string = '100%';
 
+  @ViewChild('targetElement', { static: false }) cardElement!: ElementRef;
+
   time!: any;
   fields!: any[];
   valueRows!: any[];
   rowValues!: any[];
   isTable: boolean = true;
   scrollY: string = '100%';
   loading: boolean = false;
+  cardWidth: number = 300;
 
-  constructor(private monitorSvc: MonitorService, private notifySvc: NzNotificationService) {}
+  constructor(private monitorSvc: MonitorService, private notifySvc: NzNotificationService, private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    if (this.cardElement.nativeElement) {
+      const grandparentElement = this.cardElement.nativeElement.parentElement.parentElement;
+      const grandparentWidth = grandparentElement.clientWidth;
+      this.cardWidth = grandparentWidth / 2 - 4;
+      this.cdr.detectChanges();
+    }
+  }
 
   ngOnInit(): void {
     this.scrollY = `calc(${this.height} - 130px)`;
@@ -80,9 +92,25 @@ export class MonitorDataTableComponent implements OnInit {
             this.time = message.data.time;
             this.fields = message.data.fields;
             this.valueRows = message.data.valueRows;
+            let updateWidth = false;
             if (this.valueRows.length == 1) {
               this.isTable = false;
               this.rowValues = this.valueRows[0].values;
+            } else {
+              if (this.fields?.length >= 5) {
+                updateWidth = true;
+              }
+            }
+            this.valueRows.forEach(row => {
+              row.values.forEach((value: any) => {
+                if (value.origin?.length > 60) {
+                  updateWidth = true;
+                }
+              });
+            });
+            if (updateWidth) {
+              this.cardWidth = this.cardWidth + this.cardWidth;
+              this.cdr.detectChanges();
             }
           } else if (message.code !== 0) {
             this.notifySvc.warning(`${this.metrics}:${message.msg}`, '');

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
@@ -65,7 +65,6 @@
               [app]="app"
             ></app-monitor-data-table>
             <app-monitor-data-table
-              class="card"
               [height]="'400px'"
               *ngFor="let metric of metrics; let i = index"
               [metrics]="metric"
@@ -81,7 +80,6 @@
           </ng-template>
           <div class="cards">
             <app-monitor-data-chart
-              class="card"
               *ngFor="let item of chartMetrics; let i = index"
               [app]="app"
               [metrics]="item.metrics"