refactor(性能测试): 报告统计table的宽度修改

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

@@ -30,11 +30,9 @@
       </el-table-column>
     </el-table>
 
-    <div style="margin-top: 40px;"></div>
-
     <span class="table-title">Top 5 Errors</span>
     <el-table
-      :data="errorTop5"
+      :data="errorSummary"
       border
       stripe
       style="width: 100%"
@@ -43,83 +41,111 @@
       <el-table-column
         prop="sample"
         label="Sample"
-        width="200"
       >
       </el-table-column>
       <el-table-column
         prop="samples"
         label="#Samples"
-        width="120"
       >
       </el-table-column>
       <el-table-column
         prop="errorsAllSize"
         label="All Errors"
-        width="100"
       >
       </el-table-column>
+    </el-table>
 
+    <span class="table-title">#1 Error</span>
+    <el-table
+      :data="errorTop1"
+      border
+      stripe
+      style="width: 100%"
+    >
       <el-table-column
         prop="error1"
         label="#1 Error"
-        width="400"
       >
       </el-table-column>
       <el-table-column
         prop="error1Size"
         label="#1 Errors Count"
-        width="150"
       >
       </el-table-column>
+    </el-table>
+
+    <span class="table-title">#2 Error</span>
+    <el-table
+      :data="errorTop2"
+      border
+      stripe
+      style="width: 100%"
+    >
       <el-table-column
         prop="error2"
         label="#2 Error"
-        width="400"
       >
       </el-table-column>
       <el-table-column
         prop="error2Size"
         label="#2 Errors Count"
-        width="150"
       >
       </el-table-column>
+    </el-table>
 
+    <span class="table-title">#3 Error</span>
+    <el-table
+      :data="errorTop3"
+      border
+      stripe
+      style="width: 100%"
+    >
       <el-table-column
         prop="error3"
         label="#3 Error"
-        width="400"
       >
       </el-table-column>
       <el-table-column
         prop="error3Size"
         label="#3 Errors Count"
-        width="150"
       >
       </el-table-column>
+    </el-table>
 
+    <span class="table-title">#4 Error</span>
+    <el-table
+      :data="errorTop4"
+      border
+      stripe
+      style="width: 100%"
+    >
       <el-table-column
         prop="error4"
         label="#4 Error"
-        width="400"
       >
       </el-table-column>
       <el-table-column
         prop="error4Size"
         label="#4 Errors Count"
-        width="150"
       >
       </el-table-column>
+    </el-table>
 
+    <span class="table-title">#5 Error</span>
+    <el-table
+      :data="errorTop5"
+      border
+      stripe
+      style="width: 100%"
+    >
       <el-table-column
         prop="error5"
         label="#5 Error"
-        width="400"
       >
       </el-table-column>
       <el-table-column
         prop="error5Size"
         label="#5 Errors Count"
-        width="150"
       >
       </el-table-column>
     </el-table>
@@ -132,9 +158,14 @@
   data() {
     return {
       tableData: [],
+      errorSummary: [],
+      errorTop1: [],
+      errorTop2: [],
+      errorTop3: [],
+      errorTop4: [],
       errorTop5: [],
       id: ''
-      }
+    };
   },
   methods: {
     initTableData() {
@@ -142,12 +173,34 @@
         this.tableData = res.data.data;
       }).catch(() => {
         this.tableData = [];
-        })
+      });
       this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
-          this.errorTop5 = res.data.data;
+        this.errorTop1 = res.data.data.map(e => {
+          return {error1: e.error1, error1Size: e.error1Size};
+        });
+        this.errorTop2 = res.data.data.map(e => {
+          return {error2: e.error2, error2Size: e.error2Size};
+        });
+        this.errorTop3 = res.data.data.map(e => {
+          return {error3: e.error3, error3Size: e.error3Size};
+        });
+        this.errorTop4 = res.data.data.map(e => {
+          return {error4: e.error4, error4Size: e.error4Size};
+        });
+        this.errorTop5 = res.data.data.map(e => {
+          return {error5: e.error5, error5Size: e.error5Size};
+        });
+        this.errorSummary = res.data.data.map(e => {
+          return {sample: e.sample, samples: e.samples, errorsAllSize: e.errorsAllSize};
+        });
       }).catch(() => {
+        this.errorTop1 = [];
+        this.errorTop2 = [];
+        this.errorTop3 = [];
+        this.errorTop4 = [];
         this.errorTop5 = [];
-        })
+        this.errorSummary = [];
+      });
     }
   },
   watch: {
@@ -162,14 +215,19 @@
           this.initTableData();
         } else {
           this.tableData = [];
+          this.errorTop1 = [];
+          this.errorTop2 = [];
+          this.errorTop3 = [];
+          this.errorTop4 = [];
           this.errorTop5 = [];
+          this.errorSummary = [];
         }
       },
       deep: true
     }
   },
   props: ['report']
-  }
+};
 </script>
 
 <style scoped>
@@ -179,5 +237,6 @@
   display: block;
   text-align: center;
   margin-bottom: 8px;
+  margin-top: 40px;
 }
 </style>

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

@@ -6,14 +6,15 @@
       border
       style="width: 100%"
     >
-      <el-table-column label="Requests" fixed width="450" align="center">
+      <el-table-column label="Requests" fixed min-width="150" align="center">
         <el-table-column
           prop="label"
           label="Label"
-          width="450">
+          min-width="150">
           <template v-slot:header="{column}">
             <span>Label</span>
-            <i class="el-icon-search" style="margin-left: 8px;cursor: pointer;font-weight: bold;" @click="click(column)"></i>
+            <i class="el-icon-search" style="margin-left: 8px;cursor: pointer;font-weight: bold;"
+               @click="click(column)"></i>
             <el-input v-model="searchLabel"
                       placeholder="请输入 Label 搜索"
                       size="mini"
@@ -39,6 +40,7 @@
           prop="fail"
           label="FAIL"
           align="center"
+          min-width="60"
         />
 
         <el-table-column
@@ -51,39 +53,46 @@
       <el-table-column label="Response Times(ms)" align="center">
         <el-table-column
           prop="average"
-          label="Average"
+          label="Avg"
+          min-width="60"
         />
         <el-table-column
           prop="min"
           label="Min"
+          min-width="60"
         />
         <el-table-column
           prop="max"
           label="Max"
+          min-width="60"
         />
         <el-table-column
           prop="median"
-          label="Median"
+          label="Med"
+          min-width="60"
         />
         <el-table-column
           prop="tp90"
-          label="90% line"
+          label="90%"
+          min-width="60"
         />
         <el-table-column
           prop="tp95"
-          label="95% line"
+          label="95%"
+          min-width="60"
         />
         <el-table-column
           prop="tp99"
-          label="99% line"
+          label="99%"
+          min-width="60"
         />
       </el-table-column>
 
       <el-table-column label="Throughput">
         <el-table-column
           prop="transactions"
-          label="Transactions/s"
+          label="Trans/s"
-          width="150"
+          width="100"
         />
       </el-table-column>
 
@@ -92,13 +101,13 @@
           prop="received"
           label="Received"
           align="center"
-          width="150"
+          width="100"
         />
         <el-table-column
           prop="sent"
           label="Sent"
           align="center"
-          width="150"
+          width="100"
         />
       </el-table-column>