fix: 分享查看性能测试报告报错 (#5700)

Co-authored-by: chenjianxing <jianxing.chen@fit2cloud.com>

backend/src/main/java/io/metersphere/api/service/ApiScenarioReportService.java

@@ -94,7 +94,7 @@ public class ApiScenarioReportService {
     public APIScenarioReportResult get(String reportId) {
         APIScenarioReportResult reportResult = extApiScenarioReportMapper.get(reportId);
         ApiScenarioReportDetail detail = apiScenarioReportDetailMapper.selectByPrimaryKey(reportId);
-        if (detail != null) {
+        if (detail != null && reportResult != null) {
             reportResult.setContent(new String(detail.getContent(), StandardCharsets.UTF_8));
         }
         return reportResult;

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

@@ -1,5 +1,7 @@
 package io.metersphere.controller;
 
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageHelper;
 import io.metersphere.api.dto.APIReportResult;
 import io.metersphere.api.dto.automation.APIScenarioReportResult;
 import io.metersphere.api.dto.automation.TestPlanFailureApiDTO;
@@ -8,9 +10,15 @@ import io.metersphere.api.service.ApiDefinitionService;
 import io.metersphere.api.service.ApiScenarioReportService;
 import io.metersphere.api.service.ShareInfoService;
 import io.metersphere.base.domain.IssuesDao;
+import io.metersphere.base.domain.LoadTestReportLog;
 import io.metersphere.base.domain.LoadTestReportWithBLOBs;
-import io.metersphere.performance.base.ReportTimeInfo;
+import io.metersphere.commons.utils.PageUtils;
+import io.metersphere.commons.utils.Pager;
+import io.metersphere.dto.LogDetailDTO;
+import io.metersphere.performance.base.*;
 import io.metersphere.performance.dto.LoadTestExportJmx;
+import io.metersphere.performance.dto.MetricData;
+import io.metersphere.performance.service.MetricQueryService;
 import io.metersphere.performance.service.PerformanceReportService;
 import io.metersphere.performance.service.PerformanceTestService;
 import io.metersphere.track.dto.TestPlanCaseDTO;
@@ -53,6 +61,8 @@ public class ShareController {
     PerformanceTestService performanceTestService;
     @Resource
     TestPlanReportService testPlanReportService;
+    @Resource
+    MetricQueryService metricService;
 
     @GetMapping("/issues/plan/get/{shareId}/{planId}")
     public List<IssuesDao> getIssuesByPlanoId(@PathVariable String shareId, @PathVariable String planId) {
@@ -150,13 +160,13 @@ public class ShareController {
         return testPlanLoadCaseService.isExistReport(request);
     }
 
-    @GetMapping("/performance/report/get-jmx-content/{reportId}")
+    @GetMapping("/performance/report/get-jmx-content/{shareId}/{reportId}")
-    public LoadTestExportJmx getJmxContent(@PathVariable String reportId) {
+    public LoadTestExportJmx getJmxContent(@PathVariable String shareId, @PathVariable String reportId) {
         return performanceReportService.getJmxContent(reportId);
     }
 
-    @GetMapping("/performance/get-jmx-content/{testId}")
+    @GetMapping("/performance/get-jmx-content/{shareId}/{testId}")
-    public List<LoadTestExportJmx> getOldJmxContent(@PathVariable String testId) {
+    public List<LoadTestExportJmx> getOldJmxContent(@PathVariable String shareId, @PathVariable String testId) {
 //        checkPermissionService.checkPerformanceTestOwner(testId);
         return performanceTestService.getJmxContent(testId);
     }
@@ -167,4 +177,69 @@ public class ShareController {
         return testPlanReportService.getReport(reportId);
     }
 
+    @GetMapping("/performance/report/content/testoverview/{shareId}/{reportId}")
+    public TestOverview getTestOverview(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getTestOverview(reportId);
+    }
+
+    @GetMapping("/performance/report/content/load_chart/{shareId}/{reportId}")
+    public List<ChartsData> getLoadChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getLoadChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/res_chart/{shareId}/{reportId}")
+    public List<ChartsData> getResponseTimeChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getResponseTimeChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/error_chart/{shareId}/{reportId}")
+    public List<ChartsData> getErrorChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getErrorChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/response_code_chart/{shareId}/{reportId}")
+    public List<ChartsData> getResponseCodeChartData(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getResponseCodeChartData(reportId);
+    }
+
+    @GetMapping("/performance/report/content/{shareId}/{reportKey}/{reportId}")
+    public List<ChartsData> getReportChart(@PathVariable String shareId, @PathVariable String reportKey, @PathVariable String reportId) {
+        return performanceReportService.getReportChart(reportKey, reportId);
+    }
+
+    @GetMapping("/performance/report/content/{shareId}/{reportId}")
+    public List<Statistics> getReportContent(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportStatistics(reportId);
+    }
+
+    @GetMapping("/performance/report/content/errors/{shareId}/{reportId}")
+    public List<Errors> getReportErrors(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportErrors(reportId);
+    }
+
+    @GetMapping("/performance/report/content/errors_top5/{shareId}/{reportId}")
+    public List<ErrorsTop5> getReportErrorsTop5(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportErrorsTOP5(reportId);
+    }
+
+    @GetMapping("/performance/report/log/resource/{shareId}/{reportId}")
+    public List<LogDetailDTO> getResourceIds(@PathVariable String shareId, @PathVariable String reportId) {
+        return performanceReportService.getReportLogResource(reportId);
+    }
+
+    @GetMapping("/performance/report/log/{shareId}/{reportId}/{resourceId}/{goPage}")
+    public Pager<List<LoadTestReportLog>> logs(@PathVariable String shareId, @PathVariable String reportId, @PathVariable String resourceId, @PathVariable int goPage) {
+        Page<Object> page = PageHelper.startPage(goPage, 1, true);
+        return PageUtils.setPageInfo(page, performanceReportService.getReportLogs(reportId, resourceId));
+    }
+
+    @GetMapping("/metric/query/{shareId}/{id}")
+    public List<MetricData> queryMetric(@PathVariable String shareId, @PathVariable("id") String reportId) {
+        return metricService.queryMetric(reportId);
+    }
+
+    @GetMapping("/metric/query/resource/{shareId}/{id}")
+    public List<String> queryReportResource(@PathVariable String shareId, @PathVariable("id") String reportId) {
+        return metricService.queryReportResource(reportId);
+    }
 }

backend/src/main/java/io/metersphere/track/service/TestPlanScenarioCaseService.java

@@ -78,7 +78,7 @@ public class TestPlanScenarioCaseService {
 
         apiTestCases.forEach(item -> {
             Project project = projectMap.get(item.getProjectId());
-            if (project.getScenarioCustomNum() != null && project.getScenarioCustomNum()) {
+            if (project != null && project.getScenarioCustomNum() != null && project.getScenarioCustomNum()) {
                 item.setCustomNum(item.getCustomNum());
             } else {
                 item.setCustomNum(item.getNum().toString());

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

@@ -153,6 +153,11 @@
 </template>
 
 <script>
+import {
+  getPerformanceReportErrorsContent, getPerformanceReportErrorsTop5,
+  getSharePerformanceReportErrorsContent, getSharePerformanceReportErrorsTop5
+} from "@/network/load-test";
+
 export default {
   name: "ErrorLog",
   data() {
@@ -167,40 +172,58 @@ export default {
       id: ''
     };
   },
+  props: ['report', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     initTableData() {
-      this.$get("/performance/report/content/errors/" + this.id).then(res => {
+      if (this.planReportTemplate) {
+        this.dataData = this.planReportTemplate.errorsContent;
+        this.handleGetTop5(this.planReportTemplate.errorTop5);
+      } else if (this.isShare){
+        getSharePerformanceReportErrorsContent(this.shareId, this.id).then(res => {
           this.tableData = res.data.data;
-      }).catch(() => {
-        this.tableData = [];
         });
-      this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
+
-        this.errorTop1 = res.data.data.map(e => {
+        getSharePerformanceReportErrorsTop5(this.shareId, this.id).then(res => {
+          this.handleGetTop5(res.data.data);
+        });
+      } else {
+        getPerformanceReportErrorsContent(this.id).then(res => {
+          this.tableData = res.data.data;
+        });
+
+        getPerformanceReportErrorsTop5(this.id).then(res => {
+          this.handleGetTop5(res.data.data);
+        });
+      }
+    },
+    handleGetTop5(data) {
+      this.errorTop1 = data.map(e => {
         return {error1: e.error1, error1Size: e.error1Size};
       });
-        this.errorTop2 = res.data.data.map(e => {
+      this.errorTop2 = data.map(e => {
         return {error2: e.error2, error2Size: e.error2Size};
       });
-        this.errorTop3 = res.data.data.map(e => {
+      this.errorTop3 = data.map(e => {
         return {error3: e.error3, error3Size: e.error3Size};
       });
-        this.errorTop4 = res.data.data.map(e => {
+      this.errorTop4 = data.map(e => {
         return {error4: e.error4, error4Size: e.error4Size};
       });
-        this.errorTop5 = res.data.data.map(e => {
+      this.errorTop5 = data.map(e => {
         return {error5: e.error5, error5Size: e.error5Size};
       });
-        this.errorSummary = res.data.data.map(e => {
+      this.errorSummary = data.map(e => {
         return {sample: e.sample, samples: e.samples, errorsAllSize: e.errorsAllSize};
       });
-      }).catch(() => {
+    },
+    initData() {
+      this.tableData = [];
       this.errorTop1 = [];
       this.errorTop2 = [];
       this.errorTop3 = [];
       this.errorTop4 = [];
       this.errorTop5 = [];
       this.errorSummary = [];
-      });
     }
   },
   watch: {
@@ -226,7 +249,6 @@ export default {
       deep: true
     }
   },
-  props: ['report']
 };
 </script>
 

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

@@ -20,6 +20,11 @@
 
 <script>
 
+import {
+  getPerformanceReportLogResource, getPerformanceReportLogResourceDetail,
+  getSharePerformanceReportLogResource, getSharePerformanceReportLogResourceDetail,
+} from "@/network/load-test";
+
 export default {
   name: "LogDetails",
   data() {
@@ -36,24 +41,36 @@ export default {
       logStatus: {}
     };
   },
+  props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     getResource() {
       this.init = true;
       this.active = '0';
-      this.result = this.$get("/performance/report/log/resource/" + this.id, data => {
+      if (this.planReportTemplate) {
-        this.resource = data.data;
+        this.handleGetLogResource(this.planReportTemplate.logResource);
+      } else if (this.isShare){
+        getSharePerformanceReportLogResource(this.shareId, this.id, (data) => {
+          this.handleGetLogResource(data);
+        });
+      } else {
+        getPerformanceReportLogResource(this.id, (data) => {
+          this.handleGetLogResource(data);
+        });
+      }
+    },
+    handleGetLogResource(data) {
+      this.resource = data;
       if (!this.resource || this.resource.length === 0) {
         this.init = false;
       }
-        this.page = data.data.map(item => item.resourceId).reduce((result, curr) => {
+      this.page = data.map(item => item.resourceId).reduce((result, curr) => {
         result[curr] = 1;
         return result;
       }, {});
-        this.logContent = data.data.map(item => item.resourceId).reduce((result, curr) => {
+      this.logContent = data.map(item => item.resourceId).reduce((result, curr) => {
         result[curr] = [];
         return result;
       }, {});
-      });
     },
     load(resourceId) {
       if (this.loading || this.page[resourceId] > this.pageCount) {
@@ -61,15 +78,24 @@ export default {
       }
       this.logStatus[resourceId] = true;
       this.loading = true;
-      let url = "/performance/report/log/" + this.id + "/" + resourceId + "/" + this.page[resourceId];
+      if (this.planReportTemplate) {
-      this.$get(url, res => {
+        this.handleGetLogResourceDetail(this.planReportTemplate.logResourceDetail, resourceId);
-        let data = res.data;
+      } else if (this.isShare){
+        getSharePerformanceReportLogResourceDetail(this.shareId, this.id, resourceId, this.page[resourceId], data => {
+          this.handleGetLogResourceDetail(data, resourceId);
+        });
+      } else {
+        getPerformanceReportLogResourceDetail(this.id, resourceId, this.page[resourceId], data => {
+          this.handleGetLogResourceDetail(data, resourceId);
+        });
+      }
+    },
+    handleGetLogResourceDetail(data, resourceId) {
       data.listObject.forEach(log => {
         this.logContent[resourceId].push(log);
       });
       this.page[resourceId]++;
       this.loading = false;
-      });
     },
     selectTab(tab) {
       let resourceId = tab.$vnode.key;
@@ -135,7 +161,6 @@ export default {
       deep: true
     }
   },
-  props: ['report']
 };
 </script>
 

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

@@ -29,12 +29,16 @@
 <script>
 
 import MsChart from "@/business/components/common/chart/MsChart";
+import {
+  getPerformanceMetricQuery, getPerformanceMetricQueryResource,
+  getSharePerformanceMetricQuery, getSharePerformanceMetricQueryResource,
+} from "@/network/load-test";
 
 const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
 
 export default {
   name: "MonitorCard",
-  props: ['report'],
+  props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   components: {MsChart},
   data() {
     return {
@@ -104,22 +108,29 @@ export default {
   methods: {
     getResource() {
       // this.init = true;
-      this.result = this.$get("/metric/query/resource/" + this.id)
+      if (this.planReportTemplate) {
-        .then(response => {
+        this.totalOption = this.getOption(this.planReportTemplate.metricResource);
+      } else if (this.isShare){
+        getSharePerformanceMetricQueryResource(this.shareId, this.id).then(response => {
           this.instances = response.data.data;
-          this.$get("/metric/query/" + this.id)
+          getSharePerformanceMetricQuery(this.shareId, this.id).then(result => {
-            .then(result => {
             if (result) {
               this.data = result.data.data;
               this.totalOption = this.getOption(this.instances[0]);
             }
-            })
-            .catch(() => {
           });
-        })
-        .catch(() => {
         });
-
+      } else {
+        getPerformanceMetricQueryResource(this.id).then(response => {
+          this.instances = response.data.data;
+          getPerformanceMetricQuery(this.id).then(result => {
+            if (result) {
+              this.data = result.data.data;
+              this.totalOption = this.getOption(this.instances[0]);
+            }
+          });
+        });
+      }
     },
     handleChecked(id) {
       this.totalOption = {};

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

@@ -130,6 +130,10 @@
 </template>
 
 <script>
+import {
+  getPerformanceReportContent,getSharePerformanceReportContent,
+} from "@/network/load-test";
+
 export default {
   name: "RequestStatistics",
   data() {
@@ -142,14 +146,27 @@ export default {
       showBtn: true,
     }
   },
+  props: ['report', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     initTableData() {
-      this.$get("/performance/report/content/" + this.id).then(res => {
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.content;
+        this.buildInfo(data);
+      } else if (this.isShare){
+        getSharePerformanceReportContent(this.shareId, this.id).then(res => {
           this.tableData = res.data.data;
           this.originalData = res.data.data;
         }).catch(() => {
           this.tableData = [];
         })
+      } else {
+        getPerformanceReportContent(this.id).then(res => {
+          this.tableData = res.data.data;
+          this.originalData = res.data.data;
+        }).catch(() => {
+          this.tableData = [];
+        })
+      }
     },
     click(column) {
       this.searchLabel = '';
@@ -182,7 +199,6 @@ export default {
       deep: true
     }
   },
-  props: ['report']
 }
 </script>
 

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

@@ -293,6 +293,10 @@
 
 <script>
 import MsChart from "@/business/components/common/chart/MsChart";
+import {
+  getPerformanceReportDetailContent,
+  getSharePerformanceReportDetailContent,
+} from "@/network/load-test";
 
 const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
 
@@ -317,7 +321,7 @@ const CHART_MAP = [
 export default {
   name: "TestDetails",
   components: {MsChart},
-  props: ['report', 'export'],
+  props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   data() {
     return {
       result: {},
@@ -455,9 +459,20 @@ export default {
       this.resetDefault();
     },
     getCheckOptions(reportKey) {
-      this.$get("/performance/report/content/" + reportKey + "/" + this.id)
+      if (this.planReportTemplate) {
-        .then(res => {
+        let data = this.planReportTemplate.detailContent;
-          let data = res.data.data;
+        this.handleGetCheckOptions(data, reportKey);
+      } else if (this.isShare){
+        return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => {
+          this.handleGetCheckOptions(res.data.data, reportKey);
+        });
+      } else {
+        return getPerformanceReportDetailContent(reportKey, this.id).then(res => {
+          this.handleGetCheckOptions(res.data.data, reportKey);
+        });
+      }
+    },
+    handleGetCheckOptions(data, reportKey) {
       if (!data || data.length === 0) {
         this.init = false;
         return;
@@ -465,7 +480,6 @@ export default {
       let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
       yAxisIndex0List = this._unique(yAxisIndex0List);
       this.checkOptions[reportKey] = ['ALL'].concat(yAxisIndex0List);
-        });
     },
     getTotalChart() {
       this.result.loading = true;
@@ -475,10 +489,21 @@ export default {
       this.baseOption.yAxis = [];
       this.legend = [];
       let promises = [];
+      if (this.planReportTemplate) {
+        let data = this.planReportTemplate.detailContent;
+        this.buildInfo(data);
+      } else {
         for (let name in this.checkList) {
           promises.push(this.getChart(name, this.checkList[name]));
         }
         Promise.all(promises).then((res) => {
+          this.handleGetTotalChart(res);
+        }).catch(() => {
+          this.result.loading = false;
+        });
+      }
+    },
+    handleGetTotalChart(res) {
       res = res.filter(v => !!v);
       // console.log(res);
       for (let i = 0; i < res.length; i++) {
@@ -506,17 +531,23 @@ export default {
       this.totalOption.grid.right = (res.length - 1) * 5 + '%';
       this.changeDataZoom({start: 0, end: 100});
       this.result.loading = false;
-      }).catch(() => {
-        this.result.loading = false;
-      });
     },
     getChart(reportKey, checkList) {
       if (!checkList || checkList.length === 0) {
         return;
       }
-      return this.$get("/performance/report/content/" + reportKey + "/" + this.id)
+      this.totalOption = {};
-        .then(res => {
+      if (this.isShare){
-          let data = res.data.data;
+        return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => {
+          return this.handleGetChart(res.data.data, reportKey, checkList);
+        });
+      } else {
+        return getPerformanceReportDetailContent(reportKey, this.id).then(res => {
+          return this.handleGetChart(res.data.data, reportKey, checkList);
+        });
+      }
+    },
+    handleGetChart(data, reportKey, checkList) {
       let allData = [];
       let checkAllOption = checkList.indexOf('ALL') > -1;
       if (checkAllOption) {
@@ -577,10 +608,6 @@ export default {
       // }
       // let yAxisIndex = this.baseOption.yAxis.length - 1;
       // this.totalOption = this.generateOption(this.baseOption, data, yAxisIndex);
-        })
-        .catch(() => {
-          this.totalOption = {};
-        });
     },
     generateOption(option, data, yAxisIndex) {
       let chartData = data;

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

@@ -78,6 +78,16 @@
 
 <script>
 import MsChart from "@/business/components/common/chart/MsChart";
+import {
+  getPerformanceReportErrorChart,
+  getPerformanceReportLoadChart,
+  getPerformanceReportOverview,
+  getPerformanceReportResChart, getPerformanceReportResponseCodeChart,
+  getSharePerformanceReportErrorChart,
+  getSharePerformanceReportLoadChart,
+  getSharePerformanceReportOverview,
+  getSharePerformanceReportResChart, getSharePerformanceReportResponseCodeChart,
+} from "@/network/load-test";
 
 const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
 
@@ -110,34 +120,55 @@ export default {
   props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
   methods: {
     initTableData() {
-      this.$get("/performance/report/content/testoverview/" + this.id).then(res => {
+      this.initData();
-        let data = res.data.data;
+      if (this.planReportTemplate) {
-        this.maxUsers = data.maxUsers;
+        let data = this.planReportTemplate.loadOverview;
-        this.avgThroughput = data.avgThroughput;
+        this.buildInfo(data);
-        this.avgTransactions = data.avgTransactions;
+      } else if (this.isShare){
-        this.errors = data.errors;
+        getSharePerformanceReportOverview(this.shareId, this.id, (data) => {
-        this.avgResponseTime = data.avgResponseTime;
+          this.buildInfo(data);
-        this.responseTime90 = data.responseTime90;
-        this.avgBandwidth = data.avgBandwidth;
-      }).catch(() => {
-        this.maxUsers = '0';
-        this.avgThroughput = '0';
-        this.avgTransactions = '0';
-        this.errors = '0';
-        this.avgResponseTime = '0';
-        this.responseTime90 = '0';
-        this.avgBandwidth = '0';
-        // this.$warning(this.$t('report.generation_error'));
         });
+      } else {
+        getPerformanceReportOverview(this.id, data => {
+          this.buildInfo(data);
+        });
+      }
       this.getLoadChart();
       this.getResChart();
       this.getErrorChart();
       this.getResponseCodeChart();
     },
+    initData() {
+      this.buildInfo();
+      this.loadOption = {};
+      this.resOption = {};
+      this.errorOption = {};
+      this.resCodeOption = {};
+    },
+    buildInfo(data) {
+      this.maxUsers = data ? data.maxUsers : '0';
+      this.avgThroughput = data ? data.avgThroughput : '0';
+      this.avgTransactions = data ? data.avgTransactions : '0';
+      this.errors = data ? data.errors : '0';
+      this.avgResponseTime = data ? data.avgResponseTime : '0';
+      this.responseTime90 = data ? data.responseTime90 : '0';
+      this.avgBandwidth = data ? data.avgBandwidth : '0';
+    },
     getLoadChart() {
-      this.$get("/performance/report/content/load_chart/" + this.id).then(res => {
+      if (this.planReportTemplate) {
-        let data = res.data.data;
+        let data = this.planReportTemplate.loadOverviewLoadChart;
-
+        this.handleGetLoadChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportLoadChart(this.shareId, this.id, data => {
+          this.handleGetLoadChart(data);
+        });
+      } else {
+        getPerformanceReportLoadChart(this.id, (data) => {
+          this.handleGetLoadChart(data);
+        });
+      }
+    },
+    handleGetLoadChart(data) {
       let loadOption = {
         color: color,
         title: {
@@ -200,14 +231,22 @@ export default {
         }
       ]
       this.loadOption = this.generateOption(loadOption, allData);
-      }).catch(() => {
-        this.loadOption = {};
-      });
     },
     getResChart() {
-      this.$get("/performance/report/content/res_chart/" + this.id).then(res => {
+      if (this.planReportTemplate) {
-        let data = res.data.data;
+        let data = this.planReportTemplate.loadOverviewResChart;
-
+        this.handleGetResChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportResChart(this.shareId, this.id, data => {
+          this.handleGetResChart(data);
+        });
+      } else {
+        getPerformanceReportResChart(this.id, data => {
+          this.handleGetResChart(data);
+        });
+      }
+    },
+    handleGetResChart(data) {
       let resOption = {
         color: color,
         title: {
@@ -272,14 +311,22 @@ export default {
         }
       ];
       this.resOption = this.generateOption(resOption, allData);
-      }).catch(() => {
-        this.resOption = {};
-      });
     },
     getErrorChart() {
-      this.$get("/performance/report/content/error_chart/" + this.id).then(res => {
+      if (this.planReportTemplate) {
-        let data = res.data.data;
+        let data = this.planReportTemplate.loadOverviewErrorChart;
-
+        this.handleGetErrorChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportErrorChart(this.shareId, this.id, data => {
+          this.handleGetErrorChart(data);
+        });
+      } else {
+        getPerformanceReportErrorChart(this.id, data => {
+          this.handleGetErrorChart(data);
+        });
+      }
+    },
+    handleGetErrorChart(data) {
       let errorOption = {
         color: color,
         title: {
@@ -343,14 +390,22 @@ export default {
       ]
 
       this.errorOption = this.generateOption(errorOption, allData);
-      }).catch(() => {
-        this.errorOption = {};
-      });
     },
     getResponseCodeChart() {
-      this.$get("/performance/report/content/response_code_chart/" + this.id).then(res => {
+      if (this.planReportTemplate) {
-        let data = res.data.data;
+        let data = this.planReportTemplate.loadOverviewResponseCodeChart;
-
+        this.handleGetResponseCodeChart(data);
+      } else if (this.isShare){
+        getSharePerformanceReportResponseCodeChart(this.shareId, this.id,data => {
+          this.handleGetResponseCodeChart(data);
+        });
+      } else {
+        getPerformanceReportResponseCodeChart(this.id,data => {
+          this.handleGetResponseCodeChart(data);
+        });
+      }
+    },
+    handleGetResponseCodeChart(data) {
       let resCodeOption = {
         color: color,
         title: {
@@ -413,9 +468,6 @@ export default {
         }
       ];
       this.resCodeOption = this.generateOption(resCodeOption, allData);
-      }).catch(() => {
-        this.resCodeOption = {};
-      });
     },
     generateOption(option, data) {
       let chartData = data;

frontend/src/business/components/track/plan/view/comonents/load/LoadCaseReportView.vue

@@ -53,22 +53,28 @@
                                               :share-id="shareId" :is-read-only="true" :report="report"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_overview')">
-              <ms-report-test-overview :report="report" ref="testOverview"/>
+              <ms-report-test-overview :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                       :share-id="shareId" ref="testOverview"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_details')">
-              <ms-report-test-details :report="report" ref="testDetails"/>
+              <ms-report-test-details :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                      :share-id="shareId" ref="testDetails"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_request_statistics')">
-              <ms-report-request-statistics :report="report" ref="requestStatistics"/>
+              <ms-report-request-statistics :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                            :share-id="shareId" ref="requestStatistics"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_error_log')">
-              <ms-report-error-log :report="report" ref="errorLog"/>
+              <ms-report-error-log :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                   :share-id="shareId" ref="errorLog"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_log_details')">
-              <ms-report-log-details :report="report"/>
+              <ms-report-log-details  :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                                     :share-id="shareId"/>
             </el-tab-pane>
             <el-tab-pane :label="$t('report.test_monitor_details')">
-              <monitor-card :report="report"/>
+              <monitor-card :report="report" :is-share="isShare" :plan-report-template="planReportTemplate"
+                            :share-id="shareId"/>
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -106,7 +112,12 @@ import MsMainContainer from "@/business/components/common/components/MsMainConta
 import MsPerformancePressureConfig from "@/business/components/performance/report/components/PerformancePressureConfig";
 import MonitorCard from "@/business/components/performance/report/components/MonitorCard";
 import MsReportTestDetails from '@/business/components/performance/report/components/TestDetails';
-import {getPerformanceReport, getPerformanceReportTime, getSharePerformanceReport} from "@/network/load-test";
+import {
+  getPerformanceReport,
+  getPerformanceReportTime,
+  getSharePerformanceReport,
+  getSharePerformanceReportTime
+} from "@/network/load-test";
 
 
 export default {
@@ -192,7 +203,7 @@ export default {
         this.handleInitReportTimeInfo(this.planReportTemplate);
       } else if (this.isShare) {
         if (this.reportId) {
-          this.result = getPerformanceReportTime(this.shareId, this.reportId)
+          this.result = getSharePerformanceReportTime(this.shareId, this.reportId)
             .then((res) => {
               this.handleInitReportTimeInfo(res.data.data);
             }).catch(() => {

frontend/src/common/js/utils.js

@@ -527,7 +527,7 @@ export function stopFullScreenLoading(loading, timeout) {
 }
 
 export function getShareId() {
-  // let herfUrl = 'http://localhost:8080/sharePlanReport?shareId=ba80f96a-184f-4607-b78e-324129153d9e';
+  //let herfUrl = 'http://localhost:8080/sharePlanReport?shareId=bf9496ac-8577-46b4-adf9-9c7e93dd06a8';
    let herfUrl = window.location.href;
   if (herfUrl.indexOf('shareId=') > -1) {
     let shareId = '';

frontend/src/network/load-test.js

@@ -34,3 +34,94 @@ export function getOldPerformanceJmxContent(testId, callback) {
 export function getShareOldPerformanceJmxContent(testId, callback) {
   return testId ? baseGet('/performance/get-jmx-content/' + testId, callback) : {};
 }
+
+export function getPerformanceReportOverview(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/testoverview/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportOverview(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/testoverview/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportLoadChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/load_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportLoadChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/load_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportResChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/res_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportResChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/res_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportErrorChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/error_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportErrorChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/error_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportResponseCodeChart(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/response_code_chart/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportResponseCodeChart(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/response_code_chart/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportDetailContent(reportKey, reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/' + reportKey + '/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportDetailContent(shareId, reportKey, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/' + shareId + '/' + reportKey + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportContent(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportContent(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportErrorsContent(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/errors/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportErrorsContent(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/errors/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportErrorsTop5(reportId, callback) {
+  return reportId ? baseGet('/performance/report/content/errors_top5/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportErrorsTop5(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/content/errors_top5/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportLogResource(reportId, callback) {
+  return reportId ? baseGet('/performance/report/log/resource/' + reportId, callback) : {};
+}
+export function getSharePerformanceReportLogResource(shareId, reportId, callback) {
+  return reportId ? baseGet('/share/performance/report/log/resource/' + shareId + '/' + reportId, callback) : {};
+}
+
+export function getPerformanceReportLogResourceDetail(reportId, resourceId, pageInfo, callback) {
+  return reportId ? baseGet('/performance/report/log/' + reportId + '/' + resourceId + "/" + pageInfo, callback) : {};
+}
+export function getSharePerformanceReportLogResourceDetail(shareId, reportId, resourceId, pageInfo, callback) {
+  return reportId ? baseGet('/performance/report/log/' + shareId + '/' + reportId + '/' + resourceId + "/" + pageInfo, callback) : {};
+}
+
+export function getPerformanceMetricQueryResource(resourceId, callback) {
+  return resourceId ? baseGet('/metric/query/resource/' + resourceId, callback) : {};
+}
+export function getSharePerformanceMetricQueryResource(shareId, resourceId, callback) {
+  return resourceId ? baseGet('/share/metric/query/resource/' + shareId + '/' + resourceId, callback) : {};
+}
+
+export function getPerformanceMetricQuery(resourceId, callback) {
+  return resourceId ? baseGet('/metric/query/' + resourceId, callback) : {};
+}
+export function getSharePerformanceMetricQuery(shareId, resourceId, callback) {
+  return resourceId ? baseGet('/share/metric/query/' + shareId + '/' + resourceId, callback) : {};
+}