refactor(性能测试): 监控显示优化 (#6152)

* refactor(性能测试): 监控显示优化


Co-authored-by: Captain.B <bin@fit2cloud.com>

frontend/src/business/components/performance/report/components/MonitorCard.vue

@@ -1,28 +1,88 @@
 <template>
   <div v-loading="result.loading">
-    <el-tabs @tab-click="clickTabs">
+    <el-row>
-      <el-tab-pane v-for="(item, index) in instances" :key="item + index" :label="item" class="logging-content">
+      <el-col :span="4">
+        <div>
+          <el-select v-model="currentInstance" placeholder="" size="small" style="width: 100%"
+                     @change="handleChecked(currentInstance)">
+            <el-option
+                v-for="item in instances"
+                :key="item"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </div>
+
+        <div style="padding-top: 10px">
+          <el-checkbox-group v-model="checkList"
+                             @change="handleChecked(currentInstance)">
+            <div v-for="op in checkOptions"
+                 :key="op.key"
+                 :content="op.label">
+              <el-checkbox :label="op.label"/>
+            </div>
+          </el-checkbox-group>
+        </div>
+      </el-col>
+      <el-col :span="20">
         <el-row>
-          <el-col :span="6">
+          <el-col :span="24">
-            <el-collapse v-model="activeNames" class="monitor-detail">
+            <ms-chart ref="chart2" class="chart-config" @datazoom="changeDataZoom" :options="totalOption"
-              <el-collapse-item :title="$t('Monitor')" name="0">
+                      :autoresize="true"></ms-chart>
-                <el-checkbox-group v-model="checkList"
-                                   @change="handleChecked(item)">
-                  <div v-for="op in checkOptions"
-                       :key="op.key"
-                       :content="op.label">
-                    <el-checkbox :label="op.label"/>
-                  </div>
-                </el-checkbox-group>
-              </el-collapse-item>
-            </el-collapse>
-          </el-col>
-          <el-col :span="18">
-            <ms-chart ref="chart2" class="chart-config" :options="totalOption" :autoresize="true"></ms-chart>
           </el-col>
         </el-row>
-      </el-tab-pane>
+        <el-row>
-    </el-tabs>
+          <el-col :offset="2" :span="20">
+            <el-table
+                :data="tableData"
+                stripe
+                border
+                style="width: 100%">
+              <el-table-column label="Label" align="center">
+                <el-table-column
+                    prop="label"
+                    label="Label"
+                    sortable>
+                </el-table-column>
+              </el-table-column>
+              <el-table-column label="Aggregate" align="center">
+                <el-table-column
+                    prop="avg"
+                    label="Avg."
+                    width="100"
+                    sortable
+                />
+                <el-table-column
+                    prop="min"
+                    label="Min."
+                    width="100"
+                    sortable
+                />
+                <el-table-column
+                    prop="max"
+                    label="Max."
+                    width="100"
+                    sortable
+                />
+              </el-table-column>
+              <el-table-column label="Range" align="center">
+                <el-table-column
+                    prop="startTime"
+                    label="Start"
+                    width="160"
+                />
+                <el-table-column
+                    prop="endTime"
+                    label="End"
+                    width="160"
+                />
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -30,8 +90,10 @@
 
 import MsChart from "@/business/components/common/chart/MsChart";
 import {
-  getPerformanceMetricQuery, getPerformanceMetricQueryResource,
+  getPerformanceMetricQuery,
-  getSharePerformanceMetricQuery, getSharePerformanceMetricQueryResource,
+  getPerformanceMetricQueryResource,
+  getSharePerformanceMetricQuery,
+  getSharePerformanceMetricQueryResource,
 } from "@/network/load-test";
 
 const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
@@ -47,8 +109,10 @@ export default {
       id: '',
       init: false,
       loading: false,
+      currentInstance: '',
       instances: [],
       data: [],
+      tableData: [],
       checkList: ['CPU', 'Memory', 'Disk', 'Network In', 'Network Out'],
       checkOptions: [
         {key: 'cpu', label: 'CPU'},
@@ -96,7 +160,8 @@ export default {
         ],
         series: []
       },
-      totalOption: {}
+      totalOption: {},
+      seriesData: [],
     };
   },
   created() {
@@ -110,25 +175,36 @@ export default {
       // this.init = true;
       if (this.planReportTemplate) {
         this.instances = this.planReportTemplate.reportResource;
+        this.currentInstance = this.instances[0];
         this.data = this.planReportTemplate.metricData;
-        this.totalOption = this.getOption(this.instances[0]);
+        this.totalOption = this.getOption(this.currentInstance);
-      } else if (this.isShare){
+      } else if (this.isShare) {
         getSharePerformanceMetricQueryResource(this.shareId, this.id).then(response => {
           this.instances = response.data.data;
+          if (!this.currentInstance) {
+            this.currentInstance = this.instances[0];
+          }
           getSharePerformanceMetricQuery(this.shareId, this.id).then(result => {
             if (result) {
               this.data = result.data.data;
-              this.totalOption = this.getOption(this.instances[0]);
+              this.totalOption = this.getOption(this.currentInstance);
+              this.changeDataZoom({start: 0, end: 100});
             }
           });
         });
       } else {
         getPerformanceMetricQueryResource(this.id).then(response => {
           this.instances = response.data.data;
+          if (!this.currentInstance) {
+            this.currentInstance = this.instances[0];
+          }
           getPerformanceMetricQuery(this.id).then(result => {
             if (result) {
               this.data = result.data.data;
-              this.totalOption = this.getOption(this.instances[0]);
+              this.$nextTick(() => {
+                this.totalOption = this.getOption(this.currentInstance);
+                this.changeDataZoom({start: 0, end: 100});
+              });
             }
           });
         });
@@ -138,12 +214,7 @@ export default {
       this.totalOption = {};
       this.$nextTick(() => {
         this.totalOption = this.getOption(id);
-      });
+        this.changeDataZoom({start: 0, end: 100});
-    },
-    clickTabs(tab) {
-      this.totalOption = {};
-      this.$nextTick(() => {
-        this.totalOption = this.getOption(tab.label);
       });
     },
     getOption(id) {
@@ -165,15 +236,22 @@ export default {
             this.baseOption.xAxis.data = d.timestamps;
 
             let yAxis = d.values.map(v => v.toFixed(2));
+            let data = [];
+            for (let i = 0; i < d.timestamps.length; i++) {
+              data.push([d.timestamps[i], yAxis[i]]);
+            }
+
             legend.push(name);
             series.push({
               name: name,
-              data: yAxis,
+              data: data,
               type: 'line',
               yAxisIndex: yAxisIndex,
               smooth: true,
               sampling: 'lttb',
             });
+
+            this.seriesData = series;
           }
         });
       }
@@ -181,6 +259,55 @@ export default {
       this.baseOption.series = series;
       return this.baseOption;
     },
+    changeDataZoom(params) {
+      let start = params.start / 100;
+      let end = params.end / 100;
+      if (params.batch) {
+        start = params.batch[0].start / 100;
+        end = params.batch[0].end / 100;
+      }
+
+      let tableData = [];
+      for (let i = 0; i < this.seriesData.length; i++) {
+        let sub = this.seriesData[i].data, label = this.seriesData[i].name;
+        let len = 0;
+        let min, avg, max, sum = 0, startTime, endTime;
+        for (let j = 0; j < sub.length; j++) {
+          let time = sub[j][0];
+          let value = Number.parseFloat(sub[j][1]);
+          let index = (j / (sub.length - 1)).toFixed(2);
+          if (index < start) {
+            continue;
+          }
+          if (index >= end) {
+            endTime = time;
+            break;
+          }
+
+          if (!startTime) {
+            startTime = time;
+          }
+
+          if (!min && !max) {
+            min = max = value;
+          }
+
+          if (min > value) {
+            min = value;
+          }
+          if (max < value) {
+            max = value;
+          }
+          sum += value;
+
+          len++; // 实际 len
+        }
+
+        avg = (sum / len).toFixed(2);
+        tableData.push({label, min, max, avg, startTime, endTime});
+      }
+      this.tableData = tableData;
+    },
   },
   watch: {
     '$route'(to) {