feat(性能测试): 测试报告支持对比

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

@@ -1,9 +1,21 @@
 <template>
   <ms-container>
     <ms-main-container>
-      <el-card>
+      <el-row :gutter="20">
-
+        <el-col :span="24">
-      </el-card>
+          <overview-compare-card ref="overviewCard"/>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <load-compare-card ref="loadCard"/>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <response-time-compare-card ref="responseTimeCard"/>
+        </el-col>
+      </el-row>
     </ms-main-container>
   </ms-container>
 </template>
@@ -12,15 +24,16 @@
 import MsContainer from "@/business/components/common/components/MsContainer";
 import MsMainContainer from "@/business/components/common/components/MsMainContainer";
 import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
+import OverviewCompareCard from "@/business/components/performance/report/components/OverviewCompareCard";
+import MsChart from "@/business/components/common/chart/MsChart";
+import LoadCompareCard from "@/business/components/performance/report/components/LoadCompareCard";
+import ResponseTimeCompareCard from "@/business/components/performance/report/components/ResponseTimeCompareCard";
 
 export default {
   name: "PerformanceReportCompare",
-  components: {MsMainContainer, MsContainer},
+  components: {ResponseTimeCompareCard, LoadCompareCard, MsChart, OverviewCompareCard, MsMainContainer, MsContainer},
   mounted() {
-    let reportId = this.$route.path.split('/')[4];
+    this.init();
-    console.log(reportId);
-    let items = localStorage.getItem("compareReportIds");
-    console.log(JSON.parse(items));
   },
   computed: {
     isReadOnly() {
@@ -30,11 +43,28 @@ export default {
   data() {
     return {}
   },
-  methods: {}
+  methods: {
+    init() {
+      this.$refs.overviewCard.initTable();
+      this.$refs.loadCard.initCard();
+      this.$refs.responseTimeCard.initCard();
+    }
+  },
+  watch: {
+    '$route'(to) {
+      if (to.name !== "ReportCompare") {
+        return;
+      }
 
+      this.init();
+    }
+  }
 }
 </script>
 
 <style scoped>
+.el-row {
+  padding-bottom: 20px;
+}
 
 </style>

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

@@ -332,6 +332,8 @@ export default {
         this.$set(this.report, "id", this.reportId);
         this.$set(this.report, "status", data.status);
         this.$set(this.report, "testId", data.testId);
+        this.$set(this.report, "name", data.name);
+        this.$set(this.report, "createTime", data.createTime);
         this.$set(this.report, "loadConfiguration", data.loadConfiguration);
         this.checkReportStatus(data.status);
         if (this.status === "Completed" || this.status === "Running") {

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

@@ -0,0 +1,182 @@
+<template>
+  <el-card>
+    <template v-slot:header>
+      <span class="title">Load</span>
+    </template>
+    <div v-for="(option, index) in loadList" :key="index">
+      <ms-chart ref="chart1" :options="option" :autoresize="true"></ms-chart>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import MsChart from "@/business/components/common/chart/MsChart";
+
+export default {
+  name: "LoadCompareCard",
+  components: {MsChart},
+  data() {
+    return {
+      loadList: []
+    }
+  },
+  methods: {
+    initCard() {
+      this.loadList = [];
+      this.reportId = this.$route.path.split('/')[4];
+      this.compareReports = JSON.parse(localStorage.getItem("compareReports"));
+
+      this.compareReports.forEach(report => {
+        this.initOverview(report);
+      })
+    },
+    initOverview(report) {
+      this.$get("/performance/report/content/load_chart/" + report.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);
+        let yAxis2ListMax = this._getChartMax(yAxis2List);
+
+        let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
+        yAxisIndex0List = this._unique(yAxisIndex0List);
+        let yAxisIndex1List = data.filter(m => m.yAxis === -1).map(m => m.groupName);
+        yAxisIndex1List = this._unique(yAxisIndex1List);
+
+        let loadOption = {
+          title: {
+            text: report.name + " " + this.$options.filters['timestampFormatDate'](report.createTime),
+            left: 'center',
+            top: 20,
+            textStyle: {
+              color: '#65A2FF'
+            },
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis',
+            // extraCssText: 'z-index: 999;',
+            confine: true,
+          },
+          legend: {},
+          xAxis: {},
+          yAxis: [{
+            name: 'User',
+            type: 'value',
+            min: 0,
+            max: yAxisListMax,
+            splitNumber: 5,
+            interval: yAxisListMax / 5
+          },
+            {
+              name: 'Transactions/s',
+              type: 'value',
+              splitNumber: 5,
+              min: 0,
+              max: yAxis2ListMax,
+              interval: yAxis2ListMax / 5
+            }
+          ],
+          series: []
+        };
+        let setting = {
+          series: [
+            {
+              name: 'users',
+              color: '#0CA74A',
+            },
+            {
+              name: 'hits',
+              yAxisIndex: '1',
+              color: '#65A2FF',
+            },
+            {
+              name: 'errors',
+              yAxisIndex: '1',
+              color: '#E6113C',
+            }
+          ]
+        }
+        yAxisIndex0List.forEach(item => {
+          setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
+        })
+
+        yAxisIndex1List.forEach(item => {
+          setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
+        })
+        this.loadList.push(this.generateOption(loadOption, data, setting));
+      }).catch(() => {
+        this.loadList = [];
+      })
+    },
+    generateOption(option, data, setting) {
+      let chartData = data;
+      let seriesArray = [];
+      for (let set in setting) {
+        if (set === "series") {
+          seriesArray = setting[set];
+          continue;
+        }
+        this.$set(option, set, setting[set]);
+      }
+      let legend = [], series = {}, xAxis = [], seriesData = [];
+      chartData.forEach(item => {
+        if (!xAxis.includes(item.xAxis)) {
+          xAxis.push(item.xAxis);
+        }
+        xAxis.sort()
+        let name = item.groupName
+        if (!legend.includes(name)) {
+          legend.push(name)
+          series[name] = []
+        }
+        if (item.yAxis === -1) {
+          series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis2.toFixed(2)]);
+        } else {
+          series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis.toFixed(2)]);
+        }
+      })
+      this.$set(option.legend, "data", legend);
+      this.$set(option.legend, "type", "scroll");
+      this.$set(option.legend, "bottom", "10px");
+      this.$set(option.xAxis, "data", xAxis);
+      for (let name in series) {
+        let d = series[name];
+        d.sort((a, b) => a[0].localeCompare(b[0]));
+        let items = {
+          name: name,
+          type: 'line',
+          data: d,
+          smooth: true
+        };
+        let seriesArrayNames = seriesArray.map(m => m.name);
+        if (seriesArrayNames.includes(name)) {
+          for (let j = 0; j < seriesArray.length; j++) {
+            let seriesObj = seriesArray[j];
+            if (seriesObj['name'] === name) {
+              Object.assign(items, seriesObj);
+            }
+          }
+        }
+        seriesData.push(items);
+      }
+      this.$set(option, "series", seriesData);
+      return option;
+    },
+    _getChartMax(arr) {
+      const max = Math.max(...arr);
+      return Math.ceil(max / 4.5) * 5;
+    },
+    _unique(arr) {
+      return Array.from(new Set(arr));
+    }
+  }
+}
+</script>
+
+<style scoped>
+.echarts {
+  width: 100%;
+  height: 300px;
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <el-card class="table-card">
+    <template v-slot:header>
+      <span class="title">Overview</span>
+    </template>
+    <el-table border :data="overviewList" class="adjust-table test-content">
+      <el-table-column prop="name" :label="$t('commons.name')"/>
+      <el-table-column prop="createTime" :label="$t('commons.create_time')">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="maxUsers" label="Max Users"/>
+      <el-table-column prop="avgTransactions" label="Avg.Transactions"/>
+      <el-table-column prop="errors" label="Errors"/>
+      <el-table-column prop="avgResponseTime" label="Avg.Response Time"/>
+      <el-table-column prop="responseTime90" label="90% Response Time"/>
+      <el-table-column prop="avgBandwidth" label="Avg.Bandwidth"/>
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "OverviewCompareCard",
+  data() {
+    return {
+      reportId: null,
+      compareReports: [],
+      overviewList: [],
+    };
+  },
+  methods: {
+    initTable() {
+      this.overviewList = [];
+
+      this.reportId = this.$route.path.split('/')[4];
+      this.compareReports = JSON.parse(localStorage.getItem("compareReports"));
+
+      this.compareReports.forEach(report => {
+        this.initOverview(report);
+      })
+    },
+    initOverview(report) {
+      this.$get("/performance/report/content/testoverview/" + report.id).then(res => {
+        let data = res.data.data;
+        this.overviewList.push({
+          name: report.name,
+          createTime: report.createTime,
+          maxUsers: data.maxUsers,
+          avgThroughput: data.avgThroughput,
+          avgTransactions: data.avgTransactions,
+          errors: data.errors,
+          avgResponseTime: data.avgResponseTime,
+          responseTime90: data.responseTime90,
+          avgBandwidth: data.avgBandwidth,
+        })
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,188 @@
+<template>
+  <el-card>
+    <template v-slot:header>
+      <span class="title">Response Time</span>
+    </template>
+    <div v-for="(option, index) in responseTimeList" :key="index">
+      <ms-chart ref="chart1" :options="option" :autoresize="true"></ms-chart>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import MsChart from "@/business/components/common/chart/MsChart";
+
+export default {
+  name: "ResponseTimeCompareCard",
+  components: {MsChart},
+  data() {
+    return {
+      responseTimeList: []
+    }
+  },
+  methods: {
+    initCard() {
+      this.responseTimeList = [];
+      this.reportId = this.$route.path.split('/')[4];
+      this.compareReports = JSON.parse(localStorage.getItem("compareReports"));
+
+      this.compareReports.forEach(report => {
+        this.initOverview(report);
+      })
+    },
+    initOverview(report) {
+      this.$get("/performance/report/content/res_chart/" + report.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);
+        let yAxis2ListMax = this._getChartMax(yAxis2List);
+
+        let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
+        yAxisIndex0List = this._unique(yAxisIndex0List);
+        let yAxisIndex1List = data.filter(m => m.yAxis === -1).map(m => m.groupName);
+        yAxisIndex1List = this._unique(yAxisIndex1List);
+
+        let resOption = {
+          title: {
+            text: report.name + " " + this.$options.filters['timestampFormatDate'](report.createTime),
+            left: 'center',
+            top: 20,
+            textStyle: {
+              color: '#99743C'
+            },
+          },
+          tooltip: {
+            show: true,
+            trigger: 'axis',
+            // extraCssText: 'z-index: 999;',
+            confine: true,
+            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: 'User',
+            type: 'value',
+            min: 0,
+            max: yAxisListMax,
+            interval: yAxisListMax / 5
+          },
+            {
+              name: 'Response Time',
+              type: 'value',
+              min: 0,
+              max: yAxis2ListMax,
+              interval: yAxis2ListMax / 5
+            }
+          ],
+          series: []
+        }
+        let setting = {
+          series: [
+            {
+              name: 'users',
+              color: '#0CA74A',
+            }
+          ]
+        }
+
+        yAxisIndex0List.forEach(item => {
+          setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
+        })
+
+        yAxisIndex1List.forEach(item => {
+          setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
+        })
+
+        this.responseTimeList.push(this.generateOption(resOption, data, setting));
+      }).catch(() => {
+        this.responseTimeList = [];
+      })
+    },
+    generateOption(option, data, setting) {
+      let chartData = data;
+      let seriesArray = [];
+      for (let set in setting) {
+        if (set === "series") {
+          seriesArray = setting[set];
+          continue;
+        }
+        this.$set(option, set, setting[set]);
+      }
+      let legend = [], series = {}, xAxis = [], seriesData = [];
+      chartData.forEach(item => {
+        if (!xAxis.includes(item.xAxis)) {
+          xAxis.push(item.xAxis);
+        }
+        xAxis.sort()
+        let name = item.groupName
+        if (!legend.includes(name)) {
+          legend.push(name)
+          series[name] = []
+        }
+        if (item.yAxis === -1) {
+          series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis2.toFixed(2)]);
+        } else {
+          series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis.toFixed(2)]);
+        }
+      })
+      this.$set(option.legend, "data", legend);
+      this.$set(option.legend, "type", "scroll");
+      this.$set(option.legend, "bottom", "10px");
+      this.$set(option.xAxis, "data", xAxis);
+      for (let name in series) {
+        let d = series[name];
+        d.sort((a, b) => a[0].localeCompare(b[0]));
+        let items = {
+          name: name,
+          type: 'line',
+          data: d,
+          smooth: true
+        };
+        let seriesArrayNames = seriesArray.map(m => m.name);
+        if (seriesArrayNames.includes(name)) {
+          for (let j = 0; j < seriesArray.length; j++) {
+            let seriesObj = seriesArray[j];
+            if (seriesObj['name'] === name) {
+              Object.assign(items, seriesObj);
+            }
+          }
+        }
+        seriesData.push(items);
+      }
+      this.$set(option, "series", seriesData);
+      return option;
+    },
+    _getChartMax(arr) {
+      const max = Math.max(...arr);
+      return Math.ceil(max / 4.5) * 5;
+    },
+    _unique(arr) {
+      return Array.from(new Set(arr));
+    }
+  }
+}
+</script>
+
+<style scoped>
+.echarts {
+  width: 100%;
+  height: 300px;
+}
+</style>

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

@@ -5,7 +5,7 @@
              :visible.sync="loadReportVisible">
     <el-table v-loading="reportLoadingResult.loading"
               class="basic-config"
-              :data="compareReports"
+              :data="tableData"
               @select-all="handleSelectAll"
               @select="handleSelectionChange">
 
@@ -14,6 +14,9 @@
           prop="name"
           :label="$t('commons.name')"
           show-overflow-tooltip>
+        <template v-slot:default="scope">
+          {{ scope.row.name }} <i v-if="scope.row.id === report.id" class="el-icon-star-on"></i>
+        </template>
       </el-table-column>
       <el-table-column
           prop="userName"
@@ -55,46 +58,56 @@ export default {
     return {
       loadReportVisible: false,
       reportLoadingResult: {},
-      compareReports: [],
+      tableData: [],
       currentPage: 1,
       pageSize: 10,
       total: 0,
       selectIds: new Set,
+      report: {},
+      compareReports: [],
     }
   },
   methods: {
     open(report) {
-      this.getCompareReports(report.testId);
+      this.report = report;
+      this.getCompareReports(report);
+
+      this.compareReports.push(report);
+
       this.loadReportVisible = true;
     },
     close() {
       this.loadReportVisible = false;
     },
-    getCompareReports(testId) {
+    getCompareReports(report) {
 
       let condition = {
-        testId: testId,
+        testId: report.testId,
         filters: {status: ["Completed"]}
       };
       this.reportLoadingResult = this.$post('/performance/report/list/all/' + this.currentPage + "/" + this.pageSize, condition, res => {
         let data = res.data;
         this.total = data.itemCount;
-        this.compareReports = data.listObject;
+        this.tableData = data.listObject;
       })
     },
     handleCompare() {
       let reportIds = [...this.selectIds];
-      localStorage.setItem("compareReportIds", JSON.stringify(reportIds));
+      this.tableData
+          .filter(r => reportIds.indexOf(r.id) > -1 && this.report.id !== r.id)
+          .forEach(r => this.compareReports.push(r));
+
+      localStorage.setItem("compareReports", JSON.stringify(this.compareReports));
       this.close();
       this.$router.push({path: '/performance/report/compare/' + reportIds[0]});
     },
     handleSelectAll(selection) {
       if (selection.length > 0) {
-        this.compareReports.forEach(item => {
+        this.tableData.forEach(item => {
           this.selectIds.add(item.id);
         });
       } else {
-        this.compareReports.forEach(item => {
+        this.tableData.forEach(item => {
           if (this.selectIds.has(item.id)) {
             this.selectIds.delete(item.id);
           }