查看报告时添加状态判断

backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.java

@@ -1,5 +1,6 @@
 package io.metersphere.base.mapper.ext;
 
+import io.metersphere.base.domain.LoadTestReport;
 import io.metersphere.controller.request.ReportRequest;
 import io.metersphere.dto.ReportDTO;
 import org.apache.ibatis.annotations.Param;
@@ -13,4 +14,6 @@ public interface ExtLoadTestReportMapper {
     ReportDTO getReportTestAndProInfo(@Param("id") String id);
 
     int appendLine(@Param("testId") String id, @Param("line") String line);
+
+    LoadTestReport selectByPrimaryKey(String id);
 }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.xml

@@ -2,6 +2,19 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
 <mapper namespace="io.metersphere.base.mapper.ext.ExtLoadTestReportMapper">
 
+    <resultMap id="BaseResultMap" type="io.metersphere.base.domain.LoadTestReport">
+        <id column="id" jdbcType="VARCHAR" property="id" />
+        <result column="test_id" jdbcType="VARCHAR" property="testId" />
+        <result column="name" jdbcType="VARCHAR" property="name" />
+        <result column="create_time" jdbcType="BIGINT" property="createTime" />
+        <result column="update_time" jdbcType="BIGINT" property="updateTime" />
+        <result column="status" jdbcType="VARCHAR" property="status" />
+    </resultMap>
+
+    <sql id="Base_Column_List">
+    id, test_id, name, create_time, update_time, status
+    </sql>
+
     <select id="getReportList" resultType="io.metersphere.dto.ReportDTO">
         select ltr.id, ltr.name, ltr.test_id as testId, ltr.description,
                ltr.create_time as createTime, ltr.update_time as updateTime, ltr.status as status, lt.name as testName
@@ -28,4 +41,11 @@
         WHERE id = #{testId}
     </update>
 
+    <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
+        select
+        <include refid="Base_Column_List" />
+        from load_test_report
+        where id = #{id,jdbcType=VARCHAR}
+    </select>
+
 </mapper>

backend/src/main/java/io/metersphere/controller/ReportController.java

@@ -82,4 +82,9 @@ public class ReportController {
         return reportService.getLoadChartData(reportId);
     }
 
+    @GetMapping("/{reportId}")
+    public LoadTestReport getLoadTestReport(@PathVariable String reportId) {
+        return reportService.getLoadTestReport(reportId);
+    }
+
 }

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

@@ -5,6 +5,7 @@ import io.metersphere.base.domain.LoadTestReportExample;
 import io.metersphere.base.domain.LoadTestReportWithBLOBs;
 import io.metersphere.base.mapper.LoadTestReportMapper;
 import io.metersphere.base.mapper.ext.ExtLoadTestReportMapper;
+import io.metersphere.commons.exception.MSException;
 import io.metersphere.controller.request.ReportRequest;
 import io.metersphere.dto.ReportDTO;
 import io.metersphere.report.JtlResolver;
@@ -13,6 +14,7 @@ import io.metersphere.report.base.Errors;
 import io.metersphere.report.base.TestOverview;
 import io.metersphere.report.dto.ErrorsTop5DTO;
 import io.metersphere.report.dto.RequestStatisticsDTO;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
@@ -83,4 +85,16 @@ public class ReportService {
         ChartsData chartsData = JtlResolver.getLoadChartData(content);
         return chartsData;
     }
+
+//    public void checkReportStatus(String id) {
+//        LoadTestReportWithBLOBs loadTestReport = loadTestReportMapper.selectByPrimaryKey(id);
+//        String status=loadTestReport.getStatus();
+//        if (StringUtils.equals("Error",status)) {
+//            MSException.throwException("test run error!");
+//        }
+//    }
+
+    public LoadTestReport getLoadTestReport(String id) {
+        return extLoadTestReportMapper.selectByPrimaryKey(id);
+    }
 }

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

@@ -35,16 +35,16 @@
 
         <el-tabs v-model="active" type="border-card" :stretch="true">
           <el-tab-pane :label="$t('report.test_overview')">
-            <ms-report-test-overview :id="reportId"/>
+            <ms-report-test-overview :id="reportId" :status="status"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('report.test_request_statistics')">
-            <ms-report-request-statistics :id="reportId"/>
+            <ms-report-request-statistics :id="reportId" :status="status"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('report.test_error_log')">
-            <ms-report-error-log :id="reportId"/>
+            <ms-report-error-log :id="reportId" :status="status"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('report.test_log_details')">
-            <ms-report-log-details :id="reportId"/>
+            <ms-report-log-details :id="reportId" :status="status"/>
           </el-tab-pane>
         </el-tabs>
 
@@ -72,6 +72,7 @@
         result: {},
         active: '0',
         reportId: '',
+        status: '',
         reportName: '',
         testName: '',
         projectName: ''
@@ -91,8 +92,23 @@
         }
       }
     },
-    created() {
+    mounted() {
       this.reportId = this.$route.path.split('/')[4];
+      this.$get("report/" + this.reportId, res => {
+        let data = res.data;
+        this.status = data.status;
+        if (data.status === "Error") {
+          this.$message({
+            type: 'warning',
+            message: "报告生成错误,无法查看！"
+          });
+        } else if (data.status === "Starting") {
+          this.$message({
+            type: 'info',
+            message: "报告生成中...."
+          });
+        }
+      })
       this.initBreadcrumb();
     },
     watch: {
@@ -107,6 +123,7 @@
               this.projectName = data.projectName;
             }
           });
+          window.location.reload();
         }
       }
     }

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

@@ -161,27 +161,15 @@
         return sums;
       }
     },
-    created() {
-      this.initTableData();
-      this.getSummaries()
-    },
-    props: ['id'],
     watch: {
-      '$route'(to) {
+      status() {
-        if (to.name === "perReportView") {
+        if ("Completed" === this.status) {
-          let reportId = to.path.split('/')[4];
+          this.initTableData()
-          if(reportId){
+          this.getSummaries()
-            this.$get("/report/content/errors/" + reportId, res => {
-              this.tableData = res.data;
-            })
-            this.$get("/report/content/errors_top5/" + reportId, res => {
-              this.errorTop5 = res.data.errorsTop5List;
-              this.errorTotal = res.data
-            })
-          }
-        }
         }
       }
+    },
+    props: ['id','status']
   }
 </script>
 

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

@@ -106,24 +106,15 @@
         return sums;
       }
     },
-    created() {
+    watch: {
+      status() {
+        if ("Completed" === this.status) {
           this.initTableData()
           this.getSummaries()
+        }
+      }
     },
-    props: ['id'],
+    props: ['id','status']
-    watch: {
-      '$route'(to) {
-        if (to.name === "perReportView") {
-          let reportId = to.path.split('/')[4];
-          if(reportId){
-            this.$get("/report/content/" + reportId, res => {
-              this.tableData = res.data.requestStatisticsList;
-              this.totalInfo = res.data;
-            })
-          }
-        }
-      }
-    }
   }
 </script>
 

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

@@ -79,7 +79,51 @@
         avgResponseTime: "0",
         responseTime90: "0",
         avgBandwidth: "0",
-        option: {},
+        option: {
+          legend: {
+            top: 20,
+            data: ['Users', 'Hits/s', 'Error(s)']
+          },
+          xAxis: {
+            type: 'category',
+          },
+          yAxis: [{
+            name: 'User',
+            type: 'value',
+            min: 0,
+            splitNumber: 5,
+            // interval: 10 / 5
+          },
+            {
+              name: 'Hits/s',
+              type: 'value',
+              splitNumber: 5,
+              min: 0,
+              // max: 5,
+              // interval: 5 / 5
+            }
+          ],
+          series: [
+            {
+              name: 'Users',
+              color: '#0CA74A',
+              type: 'line',
+              yAxisIndex: 0
+            },
+            {
+              name: 'Hits/s',
+              color: '#65A2FF',
+              type: 'line',
+              yAxisIndex: 1
+            },
+            {
+              name: 'Error(s)',
+              color: '#E6113C',
+              type: 'line',
+              yAxisIndex: 1
+            }
+          ]
+        },
         option2: {
           legend: {
             top: 20,
@@ -87,8 +131,7 @@
           },
           xAxis: {
             type: 'category',
-            data: ["2020-03-25 10:22:01", "2020-03-25 10:22:02", "2020-03-25 10:22:04", "2020-03-25 10:22:06",
+            data: []
-              "2020-03-25 10:22:07", "2020-03-25 10:22:08", "2020-03-25 10:22:09", "2020-03-25 10:22:10", "2020-03-25 10:22:11", "2020-03-25 10:22:12"]
           },
           yAxis: [{
             name: 'User',
@@ -103,13 +146,13 @@
             {
               name: 'Users',
               color: '#0CA74A',
-              data: [20, 40, 40, 40, 40, 40, 40],
+              data: [],
               type: 'line',
             },
             {
               name: 'Response Time',
               color: '#99743C',
-              data: [15, 38, 35, 39, 36, 37, 5],
+              data: [],
               type: 'line',
             }
           ]
@@ -156,11 +199,15 @@
             type: 'value',
             min: 0,
             splitNumber: 5,
-            interval: 10 / 5
+            // interval: 10 / 5
             },
             {
               name: 'Hits/s',
-              type: 'value'
+              type: 'value',
+              splitNumber: 5,
+              min: 0,
+              // max: 5,
+              // interval: 5 / 5
             }
           ],
           series: [
@@ -187,38 +234,33 @@
         let map = this._jsonToMap(data.serices);
         let xAxis = data.xAxis;
         this.$set(option.xAxis, "data", xAxis.split(','));
+        let user = map.get("users").slice(0);
+        let hit = map.get("hits").slice(0);
+        user.sort(function (a,b) {
+          return parseInt(a) - parseInt(b);
+        })
+        hit.sort(function (a,b) {
+          return parseFloat(a) - parseFloat(b);
+        })
+        this.$set(option.yAxis[0], "max",user[user.length-1]);
+        this.$set(option.yAxis[0], "interval", user[user.length-1]/5);
+        this.$set(option.yAxis[1], "max", hit[hit.length-1]);
+        this.$set(option.yAxis[1], "interval", hit[hit.length-1]/5);
+
         this.$set(option.series[0], "data", map.get("users"));
         this.$set(option.series[1], "data", map.get("hits"));
         this.$set(option.series[2], "data", map.get("errors"));
         return option;
       }
     },
-    created() {
-      this.initTableData()
-    },
-    props: ['id'],
     watch: {
-      '$route'(to) {
+      status() {
-        if (to.name === "perReportView") {
+        if ("Completed" === this.status) {
-          let reportId = to.path.split('/')[4];
+          this.initTableData()
-          if(reportId){
-            this.$get("/report/content/testoverview/" + reportId, res => {
-              let data = res.data;
-              this.maxUsers = data.maxUsers;
-              this.avgThroughput = data.avgThroughput;
-              this.errors = data.errors;
-              this.avgResponseTime = data.avgResponseTime;
-              this.responseTime90 = data.responseTime90;
-              this.avgBandwidth = data.avgBandwidth;
-            })
-            this.$get("/report/content/load_chart/" + reportId, res => {
-              let data = res.data;
-              this.option1 = this.generateOption(data);
-            })
-          }
-        }
         }
       }
+    },
+    props: ['id', 'status']
   }
 </script>