Merge branch 'dev' of https://github.com/metersphere/server into dev

frontend/src/business/components/api/test/model/ScenarioModel.js

@@ -543,6 +543,7 @@ class JMXGenerator {
   }
 
   replace(str) {
+    if (!str) return str;
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;").replace(/"/g, "&quot;");
   }
 

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

@@ -37,16 +37,17 @@
 
         <el-tabs v-model="active" type="border-card" :stretch="true">
           <el-tab-pane :label="$t('report.test_overview')">
-            <ms-report-test-overview :id="reportId" :status="status"/>
+<!--            <ms-report-test-overview :id="reportId" :status="status"/>-->
+            <ms-report-test-overview :report="report"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('report.test_request_statistics')">
-            <ms-report-request-statistics :id="reportId" :status="status"/>
+            <ms-report-request-statistics :report="report"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('report.test_error_log')">
-            <ms-report-error-log :id="reportId" :status="status"/>
+            <ms-report-error-log :report="report"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('report.test_log_details')">
-            <ms-report-log-details :id="reportId" :status="status"/>
+            <ms-report-log-details :report="report"/>
           </el-tab-pane>
         </el-tabs>
 
@@ -89,6 +90,7 @@
         minutes: '0',
         seconds: '0',
         title: 'Logging',
+        report: {}
       }
     },
     methods: {
@@ -108,8 +110,9 @@
       },
       initReportTimeInfo() {
         if (this.reportId) {
-          this.result = this.$get("/performance/report/content/report_time/" + this.reportId, res => {
+          this.result = this.$get("/performance/report/content/report_time/" + this.reportId)
-            let data = res.data;
+            .then(res => {
+            let data = res.data.data;
             if (data) {
               this.startTime = data.startTime;
               this.endTime = data.endTime;
@@ -117,46 +120,73 @@
               this.minutes = Math.floor(duration / 60);
               this.seconds = duration % 60;
             }
+          }).catch(() => {
+            this.clearData();
           })
         }
       },
-    },
+      checkReportStatus(status) {
-    mounted() {
+        switch (status) {
-      this.reportId = this.$route.path.split('/')[4];
-      this.result = this.$get("/performance/report/" + this.reportId, res => {
-        let data = res.data;
-        this.status = data.status;
-        switch (data.status) {
           case 'Error':
             this.$warning(this.$t('report.generation_error'));
             break;
           case 'Starting':
+            this.$warning("测试处于开始状态,请稍后查看报告！");
+            break;
           case 'Reporting':
             this.$info(this.$t('report.being_generated'));
             break;
           case 'Running':
+            this.$warning("测试处于运行状态,请稍后查看报告！");
             break;
+          case 'Completed':
           default:
             break;
         }
+      },
+      clearData() {
+        this.startTime = '0';
+        this.endTime = '0';
+        this.minutes = '0';
+        this.seconds = '0';
+      }
+    },
+    created() {
+      this.reportId = this.$route.path.split('/')[4];
+      this.result = this.$get("/performance/report/" + this.reportId, res => {
+        let data = res.data;
+        this.status = data.status;
+        this.$set(this.report, "id", this.reportId);
+        this.$set(this.report, "status", data.status);
+        this.checkReportStatus(data.status);
+        if (this.status === "Completed") {
+          this.initReportTimeInfo();
+        }
       })
       this.initBreadcrumb();
-      this.initReportTimeInfo();
+
     },
     watch: {
       '$route'(to) {
+        if (to.name === "perReportView") {
           let reportId = to.path.split('/')[4];
+          this.reportId = reportId;
           if (reportId) {
             this.$get("/performance/report/test/pro/info/" + reportId, response => {
               let data = response.data;
               if (data) {
+                this.status = data.status;
                 this.reportName = data.name;
                 this.testName = data.testName;
                 this.projectName = data.projectName;
-            }
+
-          });
+                this.$set(this.report, "id", reportId);
-          this.result = this.$get("/performance/report/content/report_time/" + this.reportId, res => {
+                this.$set(this.report, "status", data.status);
-            let data = res.data;
+
+                this.checkReportStatus(data.status);
+                if (this.status === "Completed") {
+                  this.result = this.$get("/performance/report/content/report_time/" + this.reportId).then(res => {
+                    let data = res.data.data;
                     if (data) {
                       this.startTime = data.startTime;
                       this.endTime = data.endTime;
@@ -164,8 +194,16 @@
                       this.minutes = Math.floor(duration / 60);
                       this.seconds = duration % 60;
                     }
+                  }).catch(() => {
+                    this.clearData();
                   })
-          window.location.reload();
+                } else {
+                  this.clearData();
+                }
+              }
+            });
+
+          }
         }
       }
     }

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

@@ -131,27 +131,40 @@
     data() {
       return {
         tableData: [],
-        errorTop5: []
+        errorTop5: [],
+        id: ''
       }
     },
     methods: {
       initTableData() {
-        this.$get("/performance/report/content/errors/" + this.id, res => {
+        this.$get("/performance/report/content/errors/" + this.id).then(res => {
-          this.tableData = res.data;
+          this.tableData = res.data.data;
+        }).catch(() => {
+          this.tableData = [];
         })
-        this.$get("/performance/report/content/errors_top5/" + this.id, res => {
+        this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
-          this.errorTop5 = res.data;
+          this.errorTop5 = res.data.data;
+        }).catch(() => {
+          this.errorTop5 = [];
         })
       }
     },
     watch: {
-      status() {
+      report: {
-        if ("Completed" === this.status) {
+        handler(val){
-          this.initTableData()
+          let status = val.status;
-        }
+          this.id = val.id;
+          if (status === "Completed") {
+            this.initTableData();
+          } else {
+            this.tableData = [];
+            this.errorTop5 = [];
           }
         },
-    props: ['id','status']
+        deep:true
+      }
+    },
+    props: ['report']
   }
 </script>
 

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

@@ -12,17 +12,19 @@
 <script>
   export default {
     name: "LogDetails",
-    props: ['id', 'status'],
     data() {
       return {
         logContent: null,
         result: {},
+        id: ''
       }
     },
     methods: {
       initTableData() {
-        this.result = this.$get("/performance/report/log/" + this.id, res => {
+        this.result = this.$get("/performance/report/log/" + this.id).then(res => {
-          this.logContent = res.data;
+          this.logContent = res.data.data;
+        }).catch(() => {
+          this.logContent = null;
         })
       },
       downloadLogFile(item) {
@@ -50,12 +52,20 @@
       }
     },
     watch: {
-      status() {
+      report: {
-        if ("Completed" === this.status) {
+        handler(val){
-          this.initTableData()
+          let status = val.status;
-        }
+          this.id = val.id;
+          if (status === "Completed") {
+            this.initTableData();
+          } else {
+            this.logContent = null;
           }
         },
+        deep:true
+      }
+    },
+    props: ['report']
   }
 </script>
 

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

@@ -95,13 +95,16 @@
     name: "RequestStatistics",
     data() {
       return {
-        tableData: []
+        tableData: [],
+        id: ''
       }
     },
     methods: {
       initTableData() {
-        this.$get("/performance/report/content/" + this.id, res => {
+        this.$get("/performance/report/content/" + this.id).then(res => {
-          this.tableData = res.data;
+          this.tableData = res.data.data;
+        }).catch(() => {
+          this.tableData = [];
         })
       },
       getSummaries(param) {
@@ -154,13 +157,20 @@
       }
     },
     watch: {
-      status() {
+      report: {
-        if ("Completed" === this.status) {
+        handler(val){
-          this.initTableData()
+          let status = val.status;
-        }
+          this.id = val.id;
+          if (status === "Completed") {
+            this.initTableData();
+          } else {
+            this.tableData = [];
           }
         },
-    props: ['id', 'status']
+        deep:true
+      }
+    },
+    props: ['report']
   }
 </script>
 

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

@@ -80,22 +80,31 @@
         responseTime90: "0",
         avgBandwidth: "0",
         loadOption: {},
-        resOption: {}
+        resOption: {},
+        id: ''
       }
     },
     methods: {
       initTableData() {
-        this.$get("/performance/report/content/testoverview/" + this.id, res => {
+        this.$get("/performance/report/content/testoverview/" + this.id).then(res => {
-          let data = res.data;
+          let data = res.data.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;
+        }).catch(() => {
+          this.maxUsers = '0';
+          this.avgThroughput = '0';
+          this.errors = '0';
+          this.avgResponseTime = '0';
+          this.responseTime90 = '0';
+          this.avgBandwidth = '0';
+          this.$warning("报告生成错误！")
         })
-        this.$get("/performance/report/content/load_chart/" + this.id, res => {
+        this.$get("/performance/report/content/load_chart/" + this.id).then(res => {
-          let data = res.data;
+          let data = res.data.data;
           let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
           let yAxis2List = data.filter(m => m.yAxis === -1).map(m => m.yAxis2);
           let yAxisListMax = this._getChartMax(yAxisList);
@@ -166,9 +175,11 @@
             setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
           })
           this.loadOption = this.generateOption(loadOption, data, setting);
+        }).catch(() => {
+          this.loadOption = {};
         })
-        this.$get("/performance/report/content/res_chart/" + this.id, res => {
+        this.$get("/performance/report/content/res_chart/" + this.id).then(res => {
-          let data = res.data;
+          let data = res.data.data;
           let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
           let yAxis2List = data.filter(m => m.yAxis === -1).map(m => m.yAxis2);
           let yAxisListMax = this._getChartMax(yAxisList);
@@ -246,6 +257,8 @@
           })
 
           this.resOption = this.generateOption(resOption, data, setting);
+        }).catch(() => {
+          this.resOption = {};
         })
       },
       generateOption(option, data, setting) {
@@ -310,13 +323,27 @@
       }
     },
     watch: {
-      status() {
+      report: {
-        if ("Completed" === this.status) {
+        handler(val){
-          this.initTableData()
+          let status = val.status;
-        }
+          this.id = val.id;
+          if (status === "Completed") {
+            this.initTableData();
+          } else {
+            this.maxUsers = '0';
+            this.avgThroughput = '0';
+            this.errors = '0';
+            this.avgResponseTime = '0';
+            this.responseTime90 = '0';
+            this.avgBandwidth = '0';
+            this.loadOption = {};
+            this.resOption = {};
           }
         },
-    props: ['id', 'status']
+        deep:true
+      }
+    },
+    props: ['report']
   }
 </script>