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>
@@ -127,57 +153,90 @@
 </template>
 
 <script>
-  export default {
-    name: "ErrorLog",
-    data() {
-      return {
-        tableData: [],
-        errorTop5: [],
-        id: ''
-      }
-    },
-    methods: {
-      initTableData() {
-        this.$get("/performance/report/content/errors/" + this.id).then(res => {
-          this.tableData = res.data.data;
-        }).catch(() => {
+export default {
+  name: "ErrorLog",
+  data() {
+    return {
+      tableData: [],
+      errorSummary: [],
+      errorTop1: [],
+      errorTop2: [],
+      errorTop3: [],
+      errorTop4: [],
+      errorTop5: [],
+      id: ''
+    };
+  },
+  methods: {
+    initTableData() {
+      this.$get("/performance/report/content/errors/" + this.id).then(res => {
+        this.tableData = res.data.data;
+      }).catch(() => {
+        this.tableData = [];
+      });
+      this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
+        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: {
+    report: {
+      handler(val) {
+        if (!val.status || !val.id) {
+          return;
+        }
+        let status = val.status;
+        this.id = val.id;
+        if (status === "Completed" || status === "Running") {
+          this.initTableData();
+        } else {
           this.tableData = [];
-        })
-        this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
-          this.errorTop5 = res.data.data;
-        }).catch(() => {
+          this.errorTop1 = [];
+          this.errorTop2 = [];
+          this.errorTop3 = [];
+          this.errorTop4 = [];
           this.errorTop5 = [];
-        })
-      }
-    },
-    watch: {
-      report: {
-        handler(val) {
-          if (!val.status || !val.id) {
-            return;
-          }
-          let status = val.status;
-          this.id = val.id;
-          if (status === "Completed" || status === "Running") {
-            this.initTableData();
-          } else {
-            this.tableData = [];
-            this.errorTop5 = [];
-          }
-        },
-        deep: true
-      }
-    },
-    props: ['report']
-  }
+          this.errorSummary = [];
+        }
+      },
+      deep: true
+    }
+  },
+  props: ['report']
+};
 </script>
 
 <style scoped>
-  .table-title {
-    font-size: 20px;
-    color: #8492a6;
-    display: block;
-    text-align: center;
-    margin-bottom: 8px;
-  }
+.table-title {
+  font-size: 20px;
+  color: #8492a6;
+  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"
-          width="150"
+          label="Trans/s"
+          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>