Merge branch 'v1.4' of https://github.com/metersphere/metersphere into v1.4

backend/src/main/java/io/metersphere/commons/constants/ReportKeys.java

@@ -1,6 +1,6 @@
 package io.metersphere.commons.constants;
 
 public enum ReportKeys {
-    LoadChart, ResponseTimeChart, Errors, ErrorsTop5, RequestStatistics, Overview, TimeInfo, ResultStatus
+    LoadChart, ResponseTimeChart, ResponseCodeChart, Errors, ErrorsTop5, RequestStatistics, Overview, TimeInfo, ResultStatus, ErrorsChart
 
 }

backend/src/main/java/io/metersphere/performance/controller/PerformanceReportController.java

@@ -95,6 +95,16 @@ public class PerformanceReportController {
         return reportService.getResponseTimeChartData(reportId);
     }
 
+    @GetMapping("/content/error_chart/{reportId}")
+    public List<ChartsData> getErrorChartData(@PathVariable String reportId) {
+        return reportService.getErrorChartData(reportId);
+    }
+
+    @GetMapping("/content/response_code_chart/{reportId}")
+    public List<ChartsData> getResponseCodeChartData(@PathVariable String reportId) {
+        return reportService.getResponseCodeChartData(reportId);
+    }
+
     @GetMapping("/{reportId}")
     public LoadTestReportWithBLOBs getLoadTestReport(@PathVariable String reportId) {
         return reportService.getLoadTestReport(reportId);

backend/src/main/java/io/metersphere/performance/service/ReportService.java

@@ -256,4 +256,16 @@ public class ReportService {
         List<String> ids = reportRequest.getIds();
         ids.forEach(this::deleteReport);
     }
+
+    public List<ChartsData> getErrorChartData(String id) {
+        checkReportStatus(id);
+        String content = getContent(id, ReportKeys.ErrorsChart);
+        return JSON.parseArray(content, ChartsData.class);
+    }
+
+    public List<ChartsData> getResponseCodeChartData(String id) {
+        checkReportStatus(id);
+        String content = getContent(id, ReportKeys.ResponseCodeChart);
+        return JSON.parseArray(content, ChartsData.class);
+    }
 }

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

@@ -65,6 +65,14 @@
         <ms-chart ref="chart2" :options="resOption" class="chart-config" :autoresize="true"></ms-chart>
       </el-col>
     </el-row>
+    <el-row>
+      <el-col :span="12">
+        <ms-chart ref="chart3" :options="errorOption" class="chart-config" :autoresize="true"></ms-chart>
+      </el-col>
+      <el-col :span="12">
+        <ms-chart ref="chart3" :options="resCodeOption" class="chart-config" :autoresize="true"></ms-chart>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -84,6 +92,8 @@ export default {
       avgBandwidth: "0",
       loadOption: {},
       resOption: {},
+      errorOption: {},
+      resCodeOption: {},
       id: ''
     }
   },
@@ -106,6 +116,12 @@ export default {
         this.avgBandwidth = '0';
         this.$warning(this.$t('report.generation_error'));
       })
+      this.getLoadChart();
+      this.getResChart();
+      this.getErrorChart();
+      this.getResponseCodeChart();
+    },
+    getLoadChart() {
       this.$get("/performance/report/content/load_chart/" + this.id).then(res => {
         let data = res.data.data;
         let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
@@ -181,6 +197,8 @@ export default {
       }).catch(() => {
         this.loadOption = {};
       })
+    },
+    getResChart() {
       this.$get("/performance/report/content/res_chart/" + this.id).then(res => {
         let data = res.data.data;
         let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
@@ -264,6 +282,146 @@ export default {
         this.resOption = {};
       })
     },
+    getErrorChart() {
+      this.$get("/performance/report/content/error_chart/" + this.id).then(res => {
+        let data = res.data.data;
+        let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
+        let yAxisListMax = this._getChartMax(yAxisList);
+
+        let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
+        yAxisIndex0List = this._unique(yAxisIndex0List);
+
+        let errorOption = {
+          title: {
+            text: 'Errors',
+            left: 'center',
+            top: 20,
+            textStyle: {
+              color: '#99743C'
+            },
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis',
+            extraCssText: 'z-index: 999;',
+            formatter: function (params, ticket, callback) {
+              let result = "";
+              let name = params[0].name;
+              result += name + "<br/>";
+              for (let i = 0; i < params.length; i++) {
+                let seriesName = params[i].seriesName;
+                if (seriesName.length > 100) {
+                  seriesName = seriesName.substring(0, 100);
+                }
+                let value = params[i].value;
+                let marker = params[i].marker;
+                result += marker + seriesName + ": " + value[1] + "<br/>";
+              }
+
+              return result;
+            }
+          },
+          legend: {},
+          xAxis: {},
+          yAxis: [
+            {
+              name: 'No',
+              type: 'value',
+              min: 0,
+              max: yAxisListMax,
+              interval: yAxisListMax / 5
+            }
+          ],
+          series: []
+        }
+        let setting = {
+          series: [
+            {
+              name: 'users',
+              color: '#0CA74A',
+            }
+          ]
+        }
+
+        yAxisIndex0List.forEach(item => {
+          setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
+        })
+
+        this.errorOption = this.generateOption(errorOption, data, setting);
+      }).catch(() => {
+        this.errorOption = {};
+      })
+    },
+    getResponseCodeChart() {
+      this.$get("/performance/report/content/response_code_chart/" + this.id).then(res => {
+        let data = res.data.data;
+        let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
+        let yAxisListMax = this._getChartMax(yAxisList);
+
+        let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
+        yAxisIndex0List = this._unique(yAxisIndex0List);
+
+        let resCodeOption = {
+          title: {
+            text: 'Response code',
+            left: 'center',
+            top: 20,
+            textStyle: {
+              color: '#99743C'
+            },
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis',
+            extraCssText: 'z-index: 999;',
+            formatter: function (params, ticket, callback) {
+              let result = "";
+              let name = params[0].name;
+              result += name + "<br/>";
+              for (let i = 0; i < params.length; i++) {
+                let seriesName = params[i].seriesName;
+                if (seriesName.length > 100) {
+                  seriesName = seriesName.substring(0, 100);
+                }
+                let value = params[i].value;
+                let marker = params[i].marker;
+                result += marker + seriesName + ": " + value[1] + "<br/>";
+              }
+
+              return result;
+            }
+          },
+          legend: {},
+          xAxis: {},
+          yAxis: [
+            {
+              name: 'No',
+              type: 'value',
+              min: 0,
+              max: yAxisListMax,
+              interval: yAxisListMax / 5
+            }
+          ],
+          series: []
+        }
+        let setting = {
+          series: [
+            {
+              name: 'users',
+              color: '#0CA74A',
+            }
+          ]
+        }
+
+        yAxisIndex0List.forEach(item => {
+          setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
+        })
+
+        this.resCodeOption = this.generateOption(resCodeOption, data, setting);
+      }).catch(() => {
+        this.resCodeOption = {};
+      })
+    },
     generateOption(option, data, setting) {
       let chartData = data;
       let seriesArray = [];