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

This reverts commit e26561e4

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

@@ -1,21 +1,9 @@
 <template>
   <ms-container>
     <ms-main-container>
-      <el-row :gutter="20">
+      <el-card>
-        <el-col :span="24">
+
-          <overview-compare-card ref="overviewCard"/>
+      </el-card>
-        </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>
@@ -24,16 +12,15 @@
 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: {ResponseTimeCompareCard, LoadCompareCard, MsChart, OverviewCompareCard, MsMainContainer, MsContainer},
+  components: {MsMainContainer, MsContainer},
   mounted() {
-    this.init();
+    let reportId = this.$route.path.split('/')[4];
+    console.log(reportId);
+    let items = localStorage.getItem("compareReportIds");
+    console.log(JSON.parse(items));
   },
   computed: {
     isReadOnly() {
@@ -43,28 +30,11 @@ 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,8 +332,6 @@ 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

@@ -1,182 +0,0 @@
-<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

@@ -1,67 +0,0 @@
-<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

@@ -1,188 +0,0 @@
-<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,23 +5,20 @@
              :visible.sync="loadReportVisible">
     <el-table v-loading="reportLoadingResult.loading"
               class="basic-config"
-              :data="tableData"
+              :data="compareReports"
               @select-all="handleSelectAll"
               @select="handleSelectionChange">
 
       <el-table-column type="selection"/>
       <el-table-column
-          prop="name"
+        prop="name"
-          :label="$t('commons.name')"
+        :label="$t('commons.name')"
-          show-overflow-tooltip>
+        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"
+        prop="userName"
-          :label="$t('report.user_name')"
+        :label="$t('report.user_name')"
-          show-overflow-tooltip>
+        show-overflow-tooltip>
       </el-table-column>
       <el-table-column prop="triggerMode"
                        :label="$t('test_track.report.list.trigger_mode')">
@@ -30,7 +27,7 @@
         </template>
       </el-table-column>
       <el-table-column
-          :label="$t('commons.create_time')">
+        :label="$t('commons.create_time')">
         <template v-slot:default="scope">
           <i class="el-icon-time"/>
           <span class="last-modified">{{ scope.row.createTime | timestampFormatDate }}</span>
@@ -58,56 +55,46 @@ export default {
     return {
       loadReportVisible: false,
       reportLoadingResult: {},
-      tableData: [],
+      compareReports: [],
       currentPage: 1,
       pageSize: 10,
       total: 0,
       selectIds: new Set,
-      report: {},
-      compareReports: [],
     }
   },
   methods: {
     open(report) {
-      this.report = report;
+      this.getCompareReports(report.testId);
-      this.getCompareReports(report);
-
-      this.compareReports.push(report);
-
       this.loadReportVisible = true;
     },
     close() {
       this.loadReportVisible = false;
     },
-    getCompareReports(report) {
+    getCompareReports(testId) {
 
       let condition = {
-        testId: report.testId,
+        testId: 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.tableData = data.listObject;
+        this.compareReports = data.listObject;
       })
     },
     handleCompare() {
       let reportIds = [...this.selectIds];
-      this.tableData
+      localStorage.setItem("compareReportIds", JSON.stringify(reportIds));
-          .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.tableData.forEach(item => {
+        this.compareReports.forEach(item => {
           this.selectIds.add(item.id);
         });
       } else {
-        this.tableData.forEach(item => {
+        this.compareReports.forEach(item => {
           if (this.selectIds.has(item.id)) {
             this.selectIds.delete(item.id);
           }