From ba85b94cafa0862a04d5d4ba1b7ce2024618c1d2 Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Fri, 23 Aug 2024 08:36:04 +0800
Subject: [PATCH] Revert "[webapp] auto resize the monitor detail ui width
 (#2577)"

This reverts commit a1d73a292ca4a36a8ce532ee42e20cd5274e955b.
---
 .../monitor-data-chart.component.html         |  3 +-
 .../monitor-data-chart.component.ts           | 21 ++----------
 .../monitor-data-table.component.html         |  4 +--
 .../monitor-data-table.component.ts           | 34 ++-----------------
 .../monitor-detail.component.html             |  2 ++
 5 files changed, 11 insertions(+), 53 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
index e744e7afaa9..8f1c4cb7fa6 100644
--- 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,8 +17,7 @@
   ~ under the License.
 -->
 
-<div #targetElement></div>
-<nz-card style="height: 100%" [style.width]="cardWidth + 'px'" nzHoverable [nzBordered]="true">
+<nz-card style="height: 100%" 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
index 1a6e98c5c76..646e6fea783 100644
--- 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 { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Inject, Input, OnInit } 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, AfterViewInit {
+export class MonitorDataChartComponent implements OnInit {
   @Input()
   get monitorId(): number {
     return this._monitorId;
@@ -53,19 +53,7 @@ export class MonitorDataChartComponent implements OnInit, AfterViewInit {
   echartsInstance!: any;
   // Default historical data period is last 6 hours
   timePeriod: string = '6h';
-  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();
-    }
-  }
+  constructor(private monitorSvc: MonitorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService) {}
 
   ngOnInit(): void {
     let metricsI18n = this.i18nSvc.fanyi(`monitor.app.${this.app}.metrics.${this.metrics}`);
@@ -271,9 +259,6 @@ export class MonitorDataChartComponent implements OnInit, AfterViewInit {
                   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
index 05f4348eb1f..019ef5535a2 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
@@ -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', width: cardWidth + 'px' }"
+  [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column' }"
   [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
index 11582d1d87d..a268d5bfeda 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,7 +17,7 @@
  * under the License.
  */
 
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit } 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, AfterViewInit {
+export class MonitorDataTableComponent implements OnInit {
   @Input()
   get monitorId(): number {
     return this._monitorId;
@@ -53,8 +53,6 @@ export class MonitorDataTableComponent implements OnInit, AfterViewInit {
   @Input()
   height: string = '100%';
 
-  @ViewChild('targetElement', { static: false }) cardElement!: ElementRef;
-
   time!: any;
   fields!: any[];
   valueRows!: any[];
@@ -62,18 +60,8 @@ export class MonitorDataTableComponent implements OnInit, AfterViewInit {
   isTable: boolean = true;
   scrollY: string = '100%';
   loading: boolean = false;
-  cardWidth: number = 300;
 
-  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();
-    }
-  }
+  constructor(private monitorSvc: MonitorService, private notifySvc: NzNotificationService) {}
 
   ngOnInit(): void {
     this.scrollY = `calc(${this.height} - 130px)`;
@@ -92,25 +80,9 @@ export class MonitorDataTableComponent implements OnInit, AfterViewInit {
             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
index 2dcdaa66ee0..7cf402565f0 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
@@ -65,6 +65,7 @@
               [app]="app"
             ></app-monitor-data-table>
             <app-monitor-data-table
+              class="card"
               [height]="'400px'"
               *ngFor="let metric of metrics; let i = index"
               [metrics]="metric"
@@ -80,6 +81,7 @@
           </ng-template>
           <div class="cards">
             <app-monitor-data-chart
+              class="card"
               *ngFor="let item of chartMetrics; let i = index"
               [app]="app"
               [metrics]="item.metrics"