fix(性能测试): 修复错误日志中的 top5 errors 显示问题

--bug=1008531 --user=刘瑞斌
【github#6914】导出的性能测试报告pdf文档中没有CPU、内存、磁盘空间等数据显示，只有错误日志，功能实现不完整，请修改
https://www.tapd.cn/55049933/s/1079336

Closes #6914

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

@@ -24,6 +24,12 @@
       </template>
       <ms-report-error-log :report="report" ref="errorLog"/>
     </el-card>
+    <el-card id="monitorCard" title="'monitorCard'">
+      <template v-slot:header>
+        <span class="title">{{ $t('report.test_monitor_details') }}</span>
+      </template>
+      <monitor-card :report="report"/>
+    </el-card>
   </ms-report-export-template>
 </template>
 
@@ -36,11 +42,13 @@ import MsReportTestOverview from './components/TestOverview';
 import MsReportTitle from "../../common/components/report/MsReportTitle";
 import MsReportExportTemplate from "../../common/components/report/MsReportExportTemplate";
 import MsReportTestDetails from "@/business/components/performance/report/components/TestDetails";
+import MonitorCard from "@/business/components/performance/report/components/MonitorCard";
 
 
 export default {
   name: "MsPerformanceReportExport",
   components: {
+    MonitorCard,
     MsReportExportTemplate,
     MsReportTitle,
     MsReportErrorLog,

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

@@ -333,7 +333,7 @@ export default {
 
       this.$nextTick(function () {
         setTimeout(() => {
-          let ids = ['testOverview', 'testDetails', 'requestStatistics', 'errorLog'];
+          let ids = ['testOverview', 'testDetails', 'requestStatistics', 'errorLog', 'monitorCard'];
           let promises = [];
           ids.forEach(id => {
             let promise = html2canvas(document.getElementById(id), {scale: 2});

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

@@ -14,16 +14,19 @@
         sortable>
       </el-table-column>
       <el-table-column
+        width="200"
         prop="errorNumber"
         label="Number of errors"
         sortable>
       </el-table-column>
       <el-table-column
+        width="200"
         prop="percentOfErrors"
         label="% in errors"
         sortable>
       </el-table-column>
       <el-table-column
+        width="200"
         prop="percentOfAllSamples"
         label="% in all samples"
         sortable>
@@ -38,21 +41,9 @@
       style="width: 100%"
       show-summary
     >
-      <el-table-column
-        prop="sample"
-        label="Sample"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="samples"
-        label="#Samples"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="errorsAllSize"
-        label="All Errors"
-      >
-      </el-table-column>
+      <el-table-column prop="sample" label="Sample"/>
+      <el-table-column prop="samples" label="#Samples"/>
+      <el-table-column prop="errorsAllSize" label="All Errors"/>
     </el-table>
 
     <span class="table-title">#1 Error</span>
@@ -62,16 +53,9 @@
       stripe
       style="width: 100%"
     >
-      <el-table-column
-        prop="error1"
-        label="#1 Error"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="error1Size"
-        label="#1 Errors Count"
-      >
-      </el-table-column>
+      <el-table-column prop="sample" label="Sample"/>
+      <el-table-column prop="error1" label="#1 Error"/>
+      <el-table-column prop="error1Size" label="#1 Errors Count" width="200"/>
     </el-table>
 
     <span class="table-title">#2 Error</span>
@@ -81,16 +65,9 @@
       stripe
       style="width: 100%"
     >
-      <el-table-column
-        prop="error2"
-        label="#2 Error"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="error2Size"
-        label="#2 Errors Count"
-      >
-      </el-table-column>
+      <el-table-column prop="sample" label="Sample"/>
+      <el-table-column prop="error2" label="#2 Error"/>
+      <el-table-column prop="error2Size" label="#2 Errors Count" width="200"/>
     </el-table>
 
     <span class="table-title">#3 Error</span>
@@ -100,16 +77,9 @@
       stripe
       style="width: 100%"
     >
-      <el-table-column
-        prop="error3"
-        label="#3 Error"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="error3Size"
-        label="#3 Errors Count"
-      >
-      </el-table-column>
+      <el-table-column prop="sample" label="Sample"/>
+      <el-table-column prop="error3" label="#3 Error"/>
+      <el-table-column prop="error3Size" label="#3 Errors Count" width="200"/>
     </el-table>
 
     <span class="table-title">#4 Error</span>
@@ -119,16 +89,9 @@
       stripe
       style="width: 100%"
     >
-      <el-table-column
-        prop="error4"
-        label="#4 Error"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="error4Size"
-        label="#4 Errors Count"
-      >
-      </el-table-column>
+      <el-table-column prop="sample" label="Sample"/>
+      <el-table-column prop="error4" label="#4 Error"/>
+      <el-table-column prop="error4Size" label="#4 Errors Count" width="200"/>
     </el-table>
 
     <span class="table-title">#5 Error</span>
@@ -138,24 +101,19 @@
       stripe
       style="width: 100%"
     >
-      <el-table-column
-        prop="error5"
-        label="#5 Error"
-      >
-      </el-table-column>
-      <el-table-column
-        prop="error5Size"
-        label="#5 Errors Count"
-      >
-      </el-table-column>
+      <el-table-column prop="sample" label="Sample"/>
+      <el-table-column prop="error5" label="#5 Error"/>
+      <el-table-column prop="error5Size" label="#5 Errors Count" width="200"/>
     </el-table>
   </div>
 </template>
 
 <script>
 import {
-  getPerformanceReportErrorsContent, getPerformanceReportErrorsTop5,
-  getSharePerformanceReportErrorsContent, getSharePerformanceReportErrorsTop5
+  getPerformanceReportErrorsContent,
+  getPerformanceReportErrorsTop5,
+  getSharePerformanceReportErrorsContent,
+  getSharePerformanceReportErrorsTop5
 } from "@/network/load-test";
 
 export default {
@@ -178,7 +136,7 @@ export default {
       if (this.planReportTemplate) {
         this.tableData = this.planReportTemplate.reportErrors;
         this.handleGetTop5(this.planReportTemplate.reportErrorsTop5);
-      } else if (this.isShare){
+      } else if (this.isShare) {
         getSharePerformanceReportErrorsContent(this.shareId, this.id).then(res => {
           this.tableData = res.data.data;
         });
@@ -200,21 +158,36 @@ export default {
       if (!data) {
         return;
       }
-      this.errorTop1 = data.map(e => {
-        return {error1: e.error1, error1Size: e.error1Size};
-      });
-      this.errorTop2 = data.map(e => {
-        return {error2: e.error2, error2Size: e.error2Size};
-      });
-      this.errorTop3 = data.map(e => {
-        return {error3: e.error3, error3Size: e.error3Size};
-      });
-      this.errorTop4 = data.map(e => {
-        return {error4: e.error4, error4Size: e.error4Size};
-      });
-      this.errorTop5 = data.map(e => {
-        return {error5: e.error5, error5Size: e.error5Size};
-      });
+      this.errorTop1 = data
+        .map(e => {
+          return {sample: e.sample, error1: e.error1, error1Size: e.error1Size};
+        })
+        .filter(e => e.error1Size > 0);
+
+      this.errorTop2 = data
+        .map(e => {
+          return {sample: e.sample, error2: e.error2, error2Size: e.error2Size};
+        })
+        .filter(e => e.error2Size > 0);
+
+      this.errorTop3 = data
+        .map(e => {
+          return {sample: e.sample, error3: e.error3, error3Size: e.error3Size};
+        })
+        .filter(e => e.error3Size > 0);
+
+      this.errorTop4 = data
+        .map(e => {
+          return {sample: e.sample, error4: e.error4, error4Size: e.error4Size};
+        })
+        .filter(e => e.error4Size > 0);
+
+      this.errorTop5 = data
+        .map(e => {
+          return {sample: e.sample, error5: e.error5, error5Size: e.error5Size};
+        })
+        .filter(e => e.error5Size > 0);
+
       this.errorSummary = data.map(e => {
         return {sample: e.sample, samples: e.samples, errorsAllSize: e.errorsAllSize};
       });