Repository: apache/hertzbeat (language: java)

Issue:
[BUG] The chart is not displayed correctly
### Is there an existing issue for this?

- [X] I have searched the existing issues

### Current Behavior

<img width="607" alt="image" src="https://github.com/apache/hertzbeat/assets/29418975/824ab364-5506-4bc1-bc5d-026212b3726c">

When there are many fields, the chart cannot be displayed. In previous versions, there was a scroll bar.

### Expected Behavior

_No response_

### Steps To Reproduce

_No response_

### Environment

```markdown
HertzBeat version(s): master
```


### Debug logs

_No response_

### Anything else?

_No response_
[BUG] The chart is not displayed correctly
### Is there an existing issue for this?

- [X] I have searched the existing issues

### Current Behavior

<img width="607" alt="image" src="https://github.com/apache/hertzbeat/assets/29418975/824ab364-5506-4bc1-bc5d-026212b3726c">

When there are many fields, the chart cannot be displayed. In previous versions, there was a scroll bar.

### Expected Behavior

_No response_

### Steps To Reproduce

_No response_

### Environment

```markdown
HertzBeat version(s): master
```


### Debug logs

_No response_

### Anything else?

_No response_


Discussion / hints:
The same problem frequently occurs in other surveillance systems as well

<img width="695" alt="image" src="https://github.com/apache/hertzbeat/assets/29418975/8eb45273-76a0-4689-b4d1-46521934c6d3">

The same problem frequently occurs in other surveillance systems as well

<img width="695" alt="image" src="https://github.com/apache/hertzbeat/assets/29418975/8eb45273-76a0-4689-b4d1-46521934c6d3">


Fix patch:
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 8680dce5cee..2c8fd5ee2b0 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,8 @@ 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 = Math.floor(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 +260,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..b8973666912 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,153 +16,160 @@
   ~ 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' }"
-  [nzBordered]="true"
-  [nzBodyStyle]="{ overflow: !monitor ? 'hidden' : 'auto' }"
-  [nzTitle]="card_title"
-  [nzLoading]="!app || loading"
-  [nzExtra]="!monitor ? metrics_card_extra : monitor_card_extra"
->
-  <div *ngIf="!!monitor">
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"><p style="text-align: right">ID</p></div>
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ monitorId }}</p></div
-      >
-    </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"
-        ><p style="text-align: right">{{ 'monitors.detail.name' | i18n }}</p></div
-      >
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ monitor.name }}</p></div
-      >
-    </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"><p style="text-align: right">HOST</p></div>
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ monitor.host }}</p></div
-      >
-    </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"
-        ><p style="text-align: right">{{ 'monitors.detail.port' | i18n }}</p></div
-      >
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ port }}</p></div
-      >
-    </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"
-        ><p style="text-align: right">{{ 'monitors.detail.description' | i18n }}</p></div
-      >
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ monitor.description }}</p></div
-      >
-    </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"
-        ><p style="text-align: right">{{ 'monitors.detail.status' | i18n }}</p></div
-      >
-      <div nz-col nzSpan="16">
-        <nz-tag *ngIf="monitor.status == 0" nzColor="default">
-          <i nz-icon nzType="meh" nzTheme="outline"></i>
-          <span>{{ 'monitor.status.paused' | i18n }}</span>
-        </nz-tag>
-        <nz-tag *ngIf="monitor.status == 1" nzColor="success">
-          <i nz-icon nzType="smile" nzTheme="outline"></i>
-          <span>{{ 'monitor.status.up' | i18n }}</span>
-        </nz-tag>
-        <nz-tag *ngIf="monitor.status == 2" nzColor="error">
-          <i nz-icon nzType="frown" nzTheme="outline"></i>
-          <span>{{ 'monitor.status.down' | i18n }}</span>
-        </nz-tag>
+
+<ng-container *ngTemplateOutlet="main; context: { hoverable: true, height: height, card: true }"></ng-container>
+
+<ng-template #main let-card="card" let-hoverable="hoverable" let-height="height">
+  <nz-card
+    [nzHoverable]="hoverable"
+    [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column' }"
+    [nzBordered]="true"
+    [nzBodyStyle]="{ overflow: !monitor ? 'hidden' : 'auto' }"
+    [nzTitle]="card ? card_title : ''"
+    [nzLoading]="!app || loading"
+    [nzExtra]="card ? (!monitor ? metrics_card_extra : monitor_card_extra) : ''"
+  >
+    <div *ngIf="!!monitor">
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">ID</p></div>
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ monitorId }}</p></div
+        >
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.name' | i18n }}</p></div
+        >
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ monitor.name }}</p></div
+        >
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">HOST</p></div>
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ monitor.host }}</p></div
+        >
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.port' | i18n }}</p></div
+        >
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ port }}</p></div
+        >
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.description' | i18n }}</p></div
+        >
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ monitor.description }}</p></div
+        >
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.status' | i18n }}</p></div
+        >
+        <div nz-col nzSpan="16">
+          <nz-tag *ngIf="monitor.status == 0" nzColor="default">
+            <i nz-icon nzType="meh" nzTheme="outline"></i>
+            <span>{{ 'monitor.status.paused' | i18n }}</span>
+          </nz-tag>
+          <nz-tag *ngIf="monitor.status == 1" nzColor="success">
+            <i nz-icon nzType="smile" nzTheme="outline"></i>
+            <span>{{ 'monitor.status.up' | i18n }}</span>
+          </nz-tag>
+          <nz-tag *ngIf="monitor.status == 2" nzColor="error">
+            <i nz-icon nzType="frown" nzTheme="outline"></i>
+            <span>{{ 'monitor.status.down' | i18n }}</span>
+          </nz-tag>
+        </div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</p></div
+        >
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ monitor.intervals }}s</p></div
+        >
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'common.new-time' | i18n }}</p></div
+        >
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
+        >
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
+        >
+        <div nz-col nzSpan="16"
+          ><p style="text-align: left">{{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
+        >
       </div>
     </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"
-        ><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</p></div
-      >
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ monitor.intervals }}s</p></div
-      >
-    </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"
-        ><p style="text-align: right">{{ 'common.new-time' | i18n }}</p></div
-      >
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
-      >
-    </div>
-    <div nz-row nzGutter="16">
-      <div nz-col nzSpan="8"
-        ><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
-      >
-      <div nz-col nzSpan="16"
-        ><p style="text-align: left">{{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
-      >
-    </div>
-  </div>
-  <nz-table
-    *ngIf="!monitor && isTable"
-    nzSize="small"
-    nzNoResult="No Metrics Data"
-    [nzFrontPagination]="false"
-    [nzShowPagination]="false"
-    [nzData]="valueRows"
-    [nzScroll]="{ y: scrollY }"
-    #smallTable
-  >
-    <thead>
-      <tr>
-        <th style="text-align: center" *ngFor="let field of fields">
-          {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let valueRow of smallTable.data">
-        <td *ngFor="let value of valueRow.values; let i = index">
-          {{ value.origin }}
-          <nz-tag *ngIf="value.origin == null" nzColor="warning">{{ 'monitors.detail.value.null' | i18n }}</nz-tag>
-          <nz-tag *ngIf="fields[i].unit" nzColor="success">{{ fields[i].unit }}</nz-tag>
-        </td>
-      </tr>
-    </tbody>
-  </nz-table>
-  <nz-table
-    *ngIf="!monitor && !isTable"
-    nzSize="small"
-    nzNoResult="No Metrics Data"
-    [nzFrontPagination]="false"
-    [nzShowPagination]="false"
-    [nzData]="valueRows"
-    [nzScroll]="{ y: scrollY }"
-  >
-    <thead>
-      <tr>
-        <th style="text-align: center">{{ 'common.name' | i18n }}</th>
-        <th style="text-align: center">{{ 'common.value' | i18n }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let field of fields; let i = index">
-        <td>
-          {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
-        </td>
-        <td
-          >{{ rowValues[i].origin }}
-          <nz-tag *ngIf="rowValues[i].origin == null" nzColor="warning">{{ 'monitors.detail.value.null' | i18n }}</nz-tag>
-          <nz-tag *ngIf="field.unit" nzColor="success">{{ field.unit }}</nz-tag>
-        </td>
-      </tr>
-    </tbody>
-  </nz-table>
-</nz-card>
+    <nz-table
+      *ngIf="!monitor && isTable"
+      nzSize="small"
+      nzNoResult="No Metrics Data"
+      [nzFrontPagination]="false"
+      [nzShowPagination]="false"
+      [nzData]="valueRows"
+      [nzScroll]="height ? { y: scrollY } : {}"
+      #smallTable
+    >
+      <thead>
+        <tr>
+          <th style="text-align: center" *ngFor="let field of fields" nzWidth="100px">
+            {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let valueRow of smallTable.data">
+          <td *ngFor="let value of valueRow.values; let i = index" nzEllipsis nz-tooltip [nzTooltipTitle]="contentTemplate">
+            <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+            <ng-template #contentTemplate>
+              {{ value.origin }}
+              <nz-tag *ngIf="value.origin == null" nzColor="warning">{{ 'monitors.detail.value.null' | i18n }}</nz-tag>
+              <nz-tag *ngIf="fields[i].unit" nzColor="success">{{ fields[i].unit }}</nz-tag>
+            </ng-template>
+          </td>
+        </tr>
+      </tbody>
+    </nz-table>
+    <nz-table
+      *ngIf="!monitor && !isTable"
+      nzSize="small"
+      nzNoResult="No Metrics Data"
+      [nzFrontPagination]="false"
+      [nzShowPagination]="false"
+      [nzData]="valueRows"
+      [nzScroll]="height ? { y: scrollY } : {}"
+    >
+      <thead>
+        <tr>
+          <th style="text-align: center">{{ 'common.name' | i18n }}</th>
+          <th style="text-align: center">{{ 'common.value' | i18n }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let field of fields; let i = index">
+          <td>
+            {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
+          </td>
+          <td
+            >{{ rowValues[i].origin }}
+            <nz-tag *ngIf="rowValues[i].origin == null" nzColor="warning">{{ 'monitors.detail.value.null' | i18n }}</nz-tag>
+            <nz-tag *ngIf="field.unit" nzColor="success">{{ field.unit }}</nz-tag>
+          </td>
+        </tr>
+      </tbody>
+    </nz-table>
+  </nz-card>
+</ng-template>
 
 <ng-template #card_title>
   <p style="font-size: small; text-align: left">
@@ -175,10 +182,41 @@
 </ng-template>
 
 <ng-template #metrics_card_extra>
-  <div nz-popover [nzPopoverContent]="('monitors.collect.time.tip' | i18n) + ': ' + (time | _date : 'yyyy-MM-dd HH:mm:ss')">
-    <a><i nz-icon nzType="field-time" nzTheme="outline"></i></a>
-    <i style="font-size: 13px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
-      {{ 'monitors.collect.time' | i18n }}: {{ time | _date : 'HH:mm:ss' }}
-    </i>
+  <div style="display: flex; gap: 10px">
+    <div nz-popover [nzPopoverContent]="('monitors.collect.time.tip' | i18n) + ': ' + (time | _date : 'yyyy-MM-dd HH:mm:ss')">
+      <a><i nz-icon nzType="field-time" nzTheme="outline"></i></a>
+      <i style="font-size: 13px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
+        {{ 'monitors.collect.time' | i18n }}: {{ time | _date : 'HH:mm:ss' }}
+      </i>
+    </div>
+    <div>
+      <a (click)="showModal = true"><i nz-icon nzType="fullscreen" nzTheme="outline"></i></a>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #modal_title>
+  <div style="display: flex; justify-content: space-between">
+    <ng-container *ngTemplateOutlet="card_title"></ng-container>
+    <div style="display: flex; justify-content: space-between; gap: 10px">
+      <div>
+        <i nz-icon nzType="field-time" nzTheme="outline"></i>
+        <i style="font-size: 13px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
+          {{ ('monitors.collect.time.tip' | i18n) + ': ' + (time | _date : 'yyyy-MM-dd HH:mm:ss') }}
+        </i>
+      </div>
+      <div style="cursor: pointer" (click)="showModal = false"><i nz-icon nzType="close"></i></div>
+    </div>
   </div>
 </ng-template>
+
+<nz-modal
+  [nzTitle]="modal_title"
+  [nzClosable]="false"
+  [nzStyle]="{ width: '90%', height: '90%' }"
+  [nzFooter]="null"
+  [nzContent]="main"
+  [(nzVisible)]="showModal"
+  (nzOnCancel)="showModal = false"
+>
+</nz-modal>
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 0d1e3e9325d..a2a66783670 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,7 @@ export class MonitorDataTableComponent implements OnInit, AfterViewInit {
   @Input()
   height: string = '100%';
 
-  @ViewChild('targetElement', { static: false }) cardElement!: ElementRef;
-
+  showModal!: boolean;
   time!: any;
   fields!: any[];
   valueRows!: any[];
@@ -62,18 +61,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 = Math.floor(grandparentWidth / 2) - 4;
-      this.cdr.detectChanges();
-    }
-  }
+  constructor(private monitorSvc: MonitorService, private notifySvc: NzNotificationService) {}
 
   ngOnInit(): void {
     this.scrollY = `calc(${this.height} - 130px)`;
@@ -92,25 +81,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"


Test patch: