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

2020-05-28 23:51:46 +08:00 · 2020-05-28 23:51:46 +08:00 · 093ac790f0
parent 1293137541 dd9b03c206
commit 093ac790f0
6 changed files with 171 additions and 72 deletions
--- a/frontend/src/business/components/api/test/model/ScenarioModel.js
+++ b/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;");
  }

--- a/frontend/src/business/components/performance/report/PerformanceReportView.vue
+++ b/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 => {
-            let data = res.data;
+          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;
@ -117,55 +120,90 @@
              this.minutes = Math.floor(duration / 60);
              this.seconds = duration % 60;
            }
+          }).catch(() => {
+            this.clearData();
          })
        }
      },
-    },
-    mounted() {
-      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) {
+      checkReportStatus(status) {
+        switch (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) {
-        let reportId = to.path.split('/')[4];
-        if (reportId) {
-          this.$get("/performance/report/test/pro/info/" + reportId, response => {
-            let data = response.data;
-            if (data) {
-              this.reportName = data.name;
-              this.testName = data.testName;
-              this.projectName = data.projectName;
-            }
-          });
-          this.result = this.$get("/performance/report/content/report_time/" + this.reportId, res => {
-            let data = res.data;
-            if (data) {
-              this.startTime = data.startTime;
-              this.endTime = data.endTime;
-              let duration = data.duration;
-              this.minutes = Math.floor(duration / 60);
-              this.seconds = duration % 60;
-            }
-          })
-          window.location.reload();
+        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.$set(this.report, "status", data.status);
+
+                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;
+                      let duration = data.duration;
+                      this.minutes = Math.floor(duration / 60);
+                      this.seconds = duration % 60;
+                    }
+                  }).catch(() => {
+                    this.clearData();
+                  })
+                } else {
+                  this.clearData();
+                }
+              }
+            });
+
+          }
        }
      }
    }
--- a/frontend/src/business/components/performance/report/components/ErrorLog.vue
+++ b/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.tableData = res.data;
+        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, res => {
-          this.errorTop5 = res.data;
+        this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
+          this.errorTop5 = res.data.data;
+        }).catch(() => {
+          this.errorTop5 = [];
        })
      }
    },
    watch: {
-      status() {
-        if ("Completed" === this.status) {
-          this.initTableData()
-        }
+      report: {
+        handler(val){
+          let status = val.status;
+          this.id = val.id;
+          if (status === "Completed") {
+            this.initTableData();
+          } else {
+            this.tableData = [];
+            this.errorTop5 = [];
+          }
+        },
+        deep:true
      }
    },
-    props: ['id','status']
+    props: ['report']
  }
 </script>

--- a/frontend/src/business/components/performance/report/components/LogDetails.vue
+++ b/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.logContent = res.data;
+        this.result = this.$get("/performance/report/log/" + this.id).then(res => {
+          this.logContent = res.data.data;
+        }).catch(() => {
+          this.logContent = null;
        })
      },
      downloadLogFile(item) {
@ -50,12 +52,20 @@
      }
    },
    watch: {
-      status() {
-        if ("Completed" === this.status) {
-          this.initTableData()
-        }
+      report: {
+        handler(val){
+          let status = val.status;
+          this.id = val.id;
+          if (status === "Completed") {
+            this.initTableData();
+          } else {
+            this.logContent = null;
+          }
+        },
+        deep:true
      }
    },
+    props: ['report']
  }
 </script>

--- a/frontend/src/business/components/performance/report/components/RequestStatistics.vue
+++ b/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.tableData = res.data;
+        this.$get("/performance/report/content/" + this.id).then(res => {
+          this.tableData = res.data.data;
+        }).catch(() => {
+          this.tableData = [];
        })
      },
      getSummaries(param) {
@ -154,13 +157,20 @@
      }
    },
    watch: {
-      status() {
-        if ("Completed" === this.status) {
-          this.initTableData()
-        }
+      report: {
+        handler(val){
+          let status = val.status;
+          this.id = val.id;
+          if (status === "Completed") {
+            this.initTableData();
+          } else {
+            this.tableData = [];
+          }
+        },
+        deep:true
      }
    },
-    props: ['id', 'status']
+    props: ['report']
  }
 </script>

--- a/frontend/src/business/components/performance/report/components/TestOverview.vue
+++ b/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 => {
-          let data = res.data;
+        this.$get("/performance/report/content/testoverview/" + this.id).then(res => {
+          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 => {
-          let data = res.data;
+        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);
          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 => {
-          let data = res.data;
+        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);
          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() {
-        if ("Completed" === this.status) {
-          this.initTableData()
-        }
+      report: {
+        handler(val){
+          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 = {};
+          }
+        },
+        deep:true
      }
    },
-    props: ['id', 'status']
+    props: ['report']
  }
 </script>