From 16e21e3851278cb2480aae66d884c067068e1e2f Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Thu, 23 Nov 2023 18:57:52 +0800
Subject: [PATCH] update monitor detail table ui layout (#1352)

---
 .../monitor-data-chart.component.html         |  20 +-
 .../monitor-data-table.component.html         |  18 +-
 .../monitor-detail.component.html             | 259 +++++++++---------
 web-app/src/assets/i18n/en-US.json            |   2 +-
 web-app/src/assets/i18n/zh-CN.json            |   2 +-
 web-app/src/assets/i18n/zh-TW.json            |   2 +-
 6 files changed, 154 insertions(+), 149 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 ffefdb04a96..bacaf2cef14 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
@@ -1,9 +1,11 @@
-<div
-  echarts
-  [options]="eChartOption"
-  theme="default"
-  [autoResize]="true"
-  [loading]="loading"
-  (chartInit)="onChartInit($event)"
-  style="width: 510px; height: 400px; margin-left: 20px"
-></div>
+<nz-card style="height: 100%; margin-left: 10px" nzHoverable [nzBordered]="true">
+  <div
+    echarts
+    [options]="eChartOption"
+    theme="default"
+    [autoResize]="true"
+    [loading]="loading"
+    (chartInit)="onChartInit($event)"
+    style="width: 100%; height: 500px"
+  ></div>
+</nz-card>
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 85411011350..1924ab34fec 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
@@ -1,4 +1,10 @@
-<nz-card *ngIf="isTable" nzHoverable style="height: auto; margin-left: 14px" [nzBordered]="true" [nzTitle]="monitor_metrics_card_title">
+<nz-card
+  *ngIf="isTable"
+  nzHoverable
+  style="height: 100%; margin-left: 10px; overflow: scroll"
+  [nzBordered]="true"
+  [nzTitle]="monitor_metrics_card_title"
+>
   <nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
     <thead>
       <tr>
@@ -19,7 +25,13 @@
   </nz-table>
 </nz-card>
 
-<nz-card *ngIf="!isTable" nzHoverable style="height: auto; margin-left: 14px" [nzBordered]="true" [nzTitle]="monitor_metrics_card_title">
+<nz-card
+  *ngIf="!isTable"
+  nzHoverable
+  style="height: 100%; margin-left: 10px; overflow: scroll"
+  [nzBordered]="true"
+  [nzTitle]="monitor_metrics_card_title"
+>
   <nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
     <thead>
       <tr>
@@ -50,7 +62,7 @@
     <a nz-popover [nzPopoverContent]="('monitors.collect.time.tip' | i18n) + ' ' + (time | _date : 'yyyy-MM-dd HH:mm:ss')">
       <i nz-icon nzType="field-time" nzTheme="outline"></i
     ></a>
-    <i style="font-size: 0.3px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
+    <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>
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 3e86c03ea90..3f62e19f004 100644
--- 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
@@ -31,130 +31,132 @@
 <nz-divider></nz-divider>
 
 <nz-layout>
-  <nz-sider *ngIf="showBasic" class="mobile-hide" nzWidth="19%" nzTheme="light">
-    <nz-card
-      style="width: 100%; height: 100%"
-      [nzBordered]="true"
-      [nzTitle]="monitor_basic_card_title"
-      [nzExtra]="monitor_basic_card_extra"
-    >
-      <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.un-manage' | i18n }}</span>
-          </nz-tag>
-          <nz-tag *ngIf="monitor.status == 1" nzColor="success">
-            <i nz-icon nzType="smile" nzTheme="outline"></i>
-            <span>{{ 'monitor.status.available' | i18n }}</span>
-          </nz-tag>
-          <nz-tag *ngIf="monitor.status == 2" nzColor="error">
-            <i nz-icon nzType="frown" nzTheme="outline"></i>
-            <span>{{ 'monitor.status.unavailable' | 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>
-    </nz-card>
-  </nz-sider>
-  <nz-layout>
-    <nz-content>
-      <nz-spin [nzSpinning]="isSpinning" nzTip="Loading..." nzSize="large">
-        <nz-tabset nzType="card" [nzTabBarExtraContent]="tab_extra_template">
-          <nz-tab [nzTitle]="titleTemplate" (nzClick)="loadRealTimeMetric()">
-            <ng-template #titleTemplate>
-              <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
-              {{ 'monitors.detail.realtime' | i18n }}
-            </ng-template>
-            <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
-              <div *ngFor="let metric of metrics; let i = index">
-                <app-monitor-data-table [metrics]="metric" [monitorId]="monitorId" [app]="app"></app-monitor-data-table>
-              </div>
-            </div>
-          </nz-tab>
-          <nz-tab [nzTitle]="title2Template" (nzClick)="loadMetricChart()">
-            <ng-template #title2Template>
-              <i nz-icon nzType="line-chart" style="margin-left: 10px"></i>
-              {{ 'monitors.detail.history' | i18n }}
-            </ng-template>
-            <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; overflow-x: scroll">
-              <div *ngFor="let item of chartMetrics; let i = index">
-                <app-monitor-data-chart
-                  [app]="app"
-                  [metrics]="item.metrics"
-                  [metric]="item.metric"
-                  [unit]="item.unit"
-                  [monitorId]="monitorId"
-                ></app-monitor-data-chart>
-              </div>
+  <nz-content>
+    <nz-spin [nzSpinning]="isSpinning" nzTip="Loading..." nzSize="large">
+      <nz-tabset nzType="card" [nzTabBarExtraContent]="tab_extra_template">
+        <nz-tab [nzTitle]="titleTemplate" (nzClick)="loadRealTimeMetric()">
+          <ng-template #titleTemplate>
+            <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
+            {{ 'monitors.detail.realtime' | i18n }}
+          </ng-template>
+          <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
+            <div style="width: 50%; height: 400px; margin-bottom: 6px">
+              <nz-card
+                style="height: 100%; margin-left: 10px; overflow: scroll"
+                [nzBordered]="true"
+                [nzTitle]="monitor_basic_card_title"
+                [nzExtra]="monitor_basic_card_extra"
+              >
+                <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.un-manage' | i18n }}</span>
+                    </nz-tag>
+                    <nz-tag *ngIf="monitor.status == 1" nzColor="success">
+                      <i nz-icon nzType="smile" nzTheme="outline"></i>
+                      <span>{{ 'monitor.status.available' | i18n }}</span>
+                    </nz-tag>
+                    <nz-tag *ngIf="monitor.status == 2" nzColor="error">
+                      <i nz-icon nzType="frown" nzTheme="outline"></i>
+                      <span>{{ 'monitor.status.unavailable' | 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>
+              </nz-card>
             </div>
-          </nz-tab>
-        </nz-tabset>
-      </nz-spin>
-    </nz-content>
-  </nz-layout>
+            <app-monitor-data-table
+              style="width: 50%; height: 400px; margin-bottom: 6px"
+              *ngFor="let metric of metrics; let i = index"
+              [metrics]="metric"
+              [monitorId]="monitorId"
+              [app]="app"
+            ></app-monitor-data-table>
+          </div>
+        </nz-tab>
+        <nz-tab [nzTitle]="title2Template" (nzClick)="loadMetricChart()">
+          <ng-template #title2Template>
+            <i nz-icon nzType="line-chart" style="margin-left: 10px"></i>
+            {{ 'monitors.detail.history' | i18n }}
+          </ng-template>
+          <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
+            <app-monitor-data-chart
+              style="width: 50%; height: 500px; margin-bottom: 6px"
+              *ngFor="let item of chartMetrics; let i = index"
+              [app]="app"
+              [metrics]="item.metrics"
+              [metric]="item.metric"
+              [unit]="item.unit"
+              [monitorId]="monitorId"
+            ></app-monitor-data-chart>
+          </div>
+        </nz-tab>
+      </nz-tabset>
+    </nz-spin>
+  </nz-content>
 </nz-layout>
 
 <ng-template #monitor_basic_card_title>
@@ -167,17 +169,6 @@
 
 <ng-template #tab_extra_template>
   <nz-button-group class="mobile-hide">
-    <button
-      *ngIf="!showBasic"
-      style="margin-right: 20px"
-      nz-button
-      nzType="default"
-      (click)="showBasicStatus(true)"
-      nz-tooltip
-      [nzTooltipTitle]="'monitors.detail.show-basic' | i18n"
-    >
-      <i nz-icon nzType="right-circle" nzTheme="outline"></i>
-    </button>
     <button nz-button nz-dropdown [nzDropdownMenu]="time_menu" nzPlacement="bottomLeft">
       <span *ngIf="deadline > 0"> {{ 'monitors.detail.auto-refresh' | i18n : { time: countDownTime } }} </span>
       <span *ngIf="deadline <= 0"> {{ 'monitors.detail.close-refresh' | i18n }} </span>
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index 81beaafc864..fdfebc48015 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -381,7 +381,7 @@
   "monitors.detail.port": "Port",
   "monitors.detail.description": "Desc",
   "monitors.detail.status": "Status",
-  "monitors.detail.basic": "Monitor Basic",
+  "monitors.detail.basic": "Monitoring Basic",
   "monitors.detail.realtime": "Monitor Real-Time Detail",
   "monitors.detail.history": "Monitor Historical Chart Detail",
   "monitors.collect.time": "Collect Time",
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 265bdb5feb0..bfd0db66d80 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -381,7 +381,7 @@
   "monitors.detail.port": "端口",
   "monitors.detail.description": "描述",
   "monitors.detail.status": "状态",
-  "monitors.detail.basic": "监控基本属性",
+  "monitors.detail.basic": "监控任务信息",
   "monitors.detail.realtime": "监控实时数据详情",
   "monitors.detail.history": "监控历史图表详情",
   "monitors.collect.time": "采集时间",
diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
index 2d613f72ccb..c04756c942e 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -380,7 +380,7 @@
   "monitors.detail.port": "端口",
   "monitors.detail.description": "描述",
   "monitors.detail.status": "狀態",
-  "monitors.detail.basic": "監控基本屬性",
+  "monitors.detail.basic": "監控任務信息",
   "monitors.detail.realtime": "監控實時數據詳情",
   "monitors.detail.history": "監控曆史圖表詳情",
   "monitors.collect.time": "采集時間",