fix: 分享查看性能测试报告报错 (#5700)
Co-authored-by: chenjianxing <jianxing.chen@fit2cloud.com>
This commit is contained in:
parent
f4feade41c
commit
e845887234
|
@ -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;
|
||||
|
|
|
@ -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}")
|
||||
public LoadTestExportJmx getJmxContent(@PathVariable String reportId) {
|
||||
@GetMapping("/performance/report/get-jmx-content/{shareId}/{reportId}")
|
||||
public LoadTestExportJmx getJmxContent(@PathVariable String shareId, @PathVariable String reportId) {
|
||||
return performanceReportService.getJmxContent(reportId);
|
||||
}
|
||||
|
||||
@GetMapping("/performance/get-jmx-content/{testId}")
|
||||
public List<LoadTestExportJmx> getOldJmxContent(@PathVariable String testId) {
|
||||
@GetMapping("/performance/get-jmx-content/{shareId}/{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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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 => {
|
||||
this.tableData = res.data.data;
|
||||
}).catch(() => {
|
||||
this.tableData = [];
|
||||
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;
|
||||
});
|
||||
|
||||
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.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
|
||||
this.errorTop1 = res.data.data.map(e => {
|
||||
return {error1: e.error1, error1Size: e.error1Size};
|
||||
});
|
||||
this.errorTop2 = res.data.data.map(e => {
|
||||
return {error2: e.error2, error2Size: e.error2Size};
|
||||
});
|
||||
this.errorTop3 = res.data.data.map(e => {
|
||||
return {error3: e.error3, error3Size: e.error3Size};
|
||||
});
|
||||
this.errorTop4 = res.data.data.map(e => {
|
||||
return {error4: e.error4, error4Size: e.error4Size};
|
||||
});
|
||||
this.errorTop5 = res.data.data.map(e => {
|
||||
return {error5: e.error5, error5Size: e.error5Size};
|
||||
});
|
||||
this.errorSummary = res.data.data.map(e => {
|
||||
return {sample: e.sample, samples: e.samples, errorsAllSize: e.errorsAllSize};
|
||||
});
|
||||
}).catch(() => {
|
||||
this.errorTop1 = [];
|
||||
this.errorTop2 = [];
|
||||
this.errorTop3 = [];
|
||||
this.errorTop4 = [];
|
||||
this.errorTop5 = [];
|
||||
this.errorSummary = [];
|
||||
this.errorTop2 = data.map(e => {
|
||||
return {error2: e.error2, error2Size: e.error2Size};
|
||||
});
|
||||
this.errorTop3 = data.map(e => {
|
||||
return {error3: e.error3, error3Size: e.error3Size};
|
||||
});
|
||||
this.errorTop4 = data.map(e => {
|
||||
return {error4: e.error4, error4Size: e.error4Size};
|
||||
});
|
||||
this.errorTop5 = data.map(e => {
|
||||
return {error5: e.error5, error5Size: e.error5Size};
|
||||
});
|
||||
this.errorSummary = data.map(e => {
|
||||
return {sample: e.sample, samples: e.samples, errorsAllSize: e.errorsAllSize};
|
||||
});
|
||||
},
|
||||
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>
|
||||
|
||||
|
|
|
@ -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 => {
|
||||
this.resource = data.data;
|
||||
if (!this.resource || this.resource.length === 0) {
|
||||
this.init = false;
|
||||
}
|
||||
this.page = data.data.map(item => item.resourceId).reduce((result, curr) => {
|
||||
result[curr] = 1;
|
||||
return result;
|
||||
}, {});
|
||||
this.logContent = data.data.map(item => item.resourceId).reduce((result, curr) => {
|
||||
result[curr] = [];
|
||||
return result;
|
||||
}, {});
|
||||
});
|
||||
if (this.planReportTemplate) {
|
||||
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.map(item => item.resourceId).reduce((result, curr) => {
|
||||
result[curr] = 1;
|
||||
return result;
|
||||
}, {});
|
||||
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];
|
||||
this.$get(url, res => {
|
||||
let data = res.data;
|
||||
data.listObject.forEach(log => {
|
||||
this.logContent[resourceId].push(log);
|
||||
if (this.planReportTemplate) {
|
||||
this.handleGetLogResourceDetail(this.planReportTemplate.logResourceDetail, resourceId);
|
||||
} else if (this.isShare){
|
||||
getSharePerformanceReportLogResourceDetail(this.shareId, this.id, resourceId, this.page[resourceId], data => {
|
||||
this.handleGetLogResourceDetail(data, resourceId);
|
||||
});
|
||||
this.page[resourceId]++;
|
||||
this.loading = false;
|
||||
} 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>
|
||||
|
||||
|
|
|
@ -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)
|
||||
.then(response => {
|
||||
if (this.planReportTemplate) {
|
||||
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)
|
||||
.then(result => {
|
||||
if (result) {
|
||||
this.data = result.data.data;
|
||||
this.totalOption = this.getOption(this.instances[0]);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
getSharePerformanceMetricQuery(this.shareId, this.id).then(result => {
|
||||
if (result) {
|
||||
this.data = result.data.data;
|
||||
this.totalOption = this.getOption(this.instances[0]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} 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 = {};
|
||||
|
|
|
@ -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 => {
|
||||
this.tableData = res.data.data;
|
||||
this.originalData = res.data.data;
|
||||
}).catch(() => {
|
||||
this.tableData = [];
|
||||
})
|
||||
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>
|
||||
|
||||
|
|
|
@ -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,17 +459,27 @@ export default {
|
|||
this.resetDefault();
|
||||
},
|
||||
getCheckOptions(reportKey) {
|
||||
this.$get("/performance/report/content/" + reportKey + "/" + this.id)
|
||||
.then(res => {
|
||||
let data = res.data.data;
|
||||
if (!data || data.length === 0) {
|
||||
this.init = false;
|
||||
return;
|
||||
}
|
||||
let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
|
||||
yAxisIndex0List = this._unique(yAxisIndex0List);
|
||||
this.checkOptions[reportKey] = ['ALL'].concat(yAxisIndex0List);
|
||||
if (this.planReportTemplate) {
|
||||
let data = this.planReportTemplate.detailContent;
|
||||
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;
|
||||
}
|
||||
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,112 +489,125 @@ export default {
|
|||
this.baseOption.yAxis = [];
|
||||
this.legend = [];
|
||||
let promises = [];
|
||||
for (let name in this.checkList) {
|
||||
promises.push(this.getChart(name, this.checkList[name]));
|
||||
}
|
||||
Promise.all(promises).then((res) => {
|
||||
res = res.filter(v => !!v);
|
||||
// console.log(res);
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
if (i === 0) {
|
||||
this.baseOption.yAxis.push({
|
||||
name: this.$t('load_test.report.' + res[i].reportKey),
|
||||
type: 'value',
|
||||
min: 0,
|
||||
position: 'left',
|
||||
boundaryGap: [0, '100%']
|
||||
});
|
||||
} else {
|
||||
this.baseOption.yAxis.push({
|
||||
name: this.$t('load_test.report.' + res[i].reportKey),
|
||||
type: 'value',
|
||||
min: 0,
|
||||
position: 'right',
|
||||
nameRotate: 20,
|
||||
offset: (i - 1) * 50,
|
||||
boundaryGap: [0, '100%']
|
||||
});
|
||||
}
|
||||
this.totalOption = this.generateOption(this.baseOption, res[i].data, i);
|
||||
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]));
|
||||
}
|
||||
this.totalOption.grid.right = (res.length - 1) * 5 + '%';
|
||||
this.changeDataZoom({start: 0, end: 100});
|
||||
this.result.loading = false;
|
||||
}).catch(() => {
|
||||
this.result.loading = false;
|
||||
});
|
||||
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++) {
|
||||
if (i === 0) {
|
||||
this.baseOption.yAxis.push({
|
||||
name: this.$t('load_test.report.' + res[i].reportKey),
|
||||
type: 'value',
|
||||
min: 0,
|
||||
position: 'left',
|
||||
boundaryGap: [0, '100%']
|
||||
});
|
||||
} else {
|
||||
this.baseOption.yAxis.push({
|
||||
name: this.$t('load_test.report.' + res[i].reportKey),
|
||||
type: 'value',
|
||||
min: 0,
|
||||
position: 'right',
|
||||
nameRotate: 20,
|
||||
offset: (i - 1) * 50,
|
||||
boundaryGap: [0, '100%']
|
||||
});
|
||||
}
|
||||
this.totalOption = this.generateOption(this.baseOption, res[i].data, i);
|
||||
}
|
||||
this.totalOption.grid.right = (res.length - 1) * 5 + '%';
|
||||
this.changeDataZoom({start: 0, end: 100});
|
||||
this.result.loading = false;
|
||||
},
|
||||
getChart(reportKey, checkList) {
|
||||
if (!checkList || checkList.length === 0) {
|
||||
return;
|
||||
}
|
||||
return this.$get("/performance/report/content/" + reportKey + "/" + this.id)
|
||||
.then(res => {
|
||||
let data = res.data.data;
|
||||
let allData = [];
|
||||
let checkAllOption = checkList.indexOf('ALL') > -1;
|
||||
if (checkAllOption) {
|
||||
let avgOpt = [
|
||||
'ResponseTimeChart',
|
||||
'ResponseTimePercentilesChart',
|
||||
'LatencyChart',
|
||||
];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis = result[xAxis].map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
if (avgOpt.indexOf(reportKey) > -1) {
|
||||
yAxis = yAxis / result[xAxis].length;
|
||||
}
|
||||
allData.push({
|
||||
groupName: 'ALL',
|
||||
xAxis: xAxis,
|
||||
yAxis: yAxis
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
data = data.filter(item => {
|
||||
if (checkList.indexOf(item.groupName) > -1) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// 选中了all
|
||||
data = data.concat(allData);
|
||||
|
||||
|
||||
// prefix
|
||||
data.forEach(item => {
|
||||
item.groupName = this.$t('load_test.report.' + reportKey) + ': ' + item.groupName;
|
||||
});
|
||||
return {data, reportKey};
|
||||
// if (this.baseOption.yAxis.length === 0) {
|
||||
// this.baseOption.yAxis.push({
|
||||
// name: this.$t('load_test.report.' + reportKey),
|
||||
// type: 'value',
|
||||
// min: 0,
|
||||
// position: 'left',
|
||||
// boundaryGap: [0, '100%']
|
||||
// });
|
||||
// } else {
|
||||
// this.baseOption.yAxis.push({
|
||||
// name: this.$t('load_test.report.' + reportKey),
|
||||
// type: 'value',
|
||||
// min: 0,
|
||||
// position: 'right',
|
||||
// nameRotate: 20,
|
||||
// offset: (this.baseOption.yAxis.length - 1) * 50,
|
||||
// boundaryGap: [0, '100%']
|
||||
// });
|
||||
// this.baseOption.grid.right = (this.baseOption.yAxis.length - 1) * 5 + '%';
|
||||
// }
|
||||
// let yAxisIndex = this.baseOption.yAxis.length - 1;
|
||||
// this.totalOption = this.generateOption(this.baseOption, data, yAxisIndex);
|
||||
})
|
||||
.catch(() => {
|
||||
this.totalOption = {};
|
||||
this.totalOption = {};
|
||||
if (this.isShare){
|
||||
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) {
|
||||
let avgOpt = [
|
||||
'ResponseTimeChart',
|
||||
'ResponseTimePercentilesChart',
|
||||
'LatencyChart',
|
||||
];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis = result[xAxis].map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
if (avgOpt.indexOf(reportKey) > -1) {
|
||||
yAxis = yAxis / result[xAxis].length;
|
||||
}
|
||||
allData.push({
|
||||
groupName: 'ALL',
|
||||
xAxis: xAxis,
|
||||
yAxis: yAxis
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
data = data.filter(item => {
|
||||
if (checkList.indexOf(item.groupName) > -1) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// 选中了all
|
||||
data = data.concat(allData);
|
||||
|
||||
|
||||
// prefix
|
||||
data.forEach(item => {
|
||||
item.groupName = this.$t('load_test.report.' + reportKey) + ': ' + item.groupName;
|
||||
});
|
||||
return {data, reportKey};
|
||||
// if (this.baseOption.yAxis.length === 0) {
|
||||
// this.baseOption.yAxis.push({
|
||||
// name: this.$t('load_test.report.' + reportKey),
|
||||
// type: 'value',
|
||||
// min: 0,
|
||||
// position: 'left',
|
||||
// boundaryGap: [0, '100%']
|
||||
// });
|
||||
// } else {
|
||||
// this.baseOption.yAxis.push({
|
||||
// name: this.$t('load_test.report.' + reportKey),
|
||||
// type: 'value',
|
||||
// min: 0,
|
||||
// position: 'right',
|
||||
// nameRotate: 20,
|
||||
// offset: (this.baseOption.yAxis.length - 1) * 50,
|
||||
// boundaryGap: [0, '100%']
|
||||
// });
|
||||
// this.baseOption.grid.right = (this.baseOption.yAxis.length - 1) * 5 + '%';
|
||||
// }
|
||||
// let yAxisIndex = this.baseOption.yAxis.length - 1;
|
||||
// this.totalOption = this.generateOption(this.baseOption, data, yAxisIndex);
|
||||
},
|
||||
generateOption(option, data, yAxisIndex) {
|
||||
let chartData = data;
|
||||
|
|
|
@ -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,312 +120,354 @@ export default {
|
|||
props: ['report', 'export', 'isShare', 'shareId', 'planReportTemplate'],
|
||||
methods: {
|
||||
initTableData() {
|
||||
this.$get("/performance/report/content/testoverview/" + this.id).then(res => {
|
||||
let data = res.data.data;
|
||||
this.maxUsers = data.maxUsers;
|
||||
this.avgThroughput = data.avgThroughput;
|
||||
this.avgTransactions = data.avgTransactions;
|
||||
this.errors = data.errors;
|
||||
this.avgResponseTime = data.avgResponseTime;
|
||||
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'));
|
||||
});
|
||||
this.initData();
|
||||
if (this.planReportTemplate) {
|
||||
let data = this.planReportTemplate.loadOverview;
|
||||
this.buildInfo(data);
|
||||
} else if (this.isShare){
|
||||
getSharePerformanceReportOverview(this.shareId, this.id, (data) => {
|
||||
this.buildInfo(data);
|
||||
});
|
||||
} 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 => {
|
||||
let data = res.data.data;
|
||||
|
||||
let loadOption = {
|
||||
color: color,
|
||||
title: {
|
||||
text: 'Load',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#65A2FF'
|
||||
},
|
||||
if (this.planReportTemplate) {
|
||||
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: {
|
||||
text: 'Load',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#65A2FF'
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
// extraCssText: 'z-index: 999;',
|
||||
confine: true,
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
series: []
|
||||
};
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
// extraCssText: 'z-index: 999;',
|
||||
confine: true,
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
series: []
|
||||
};
|
||||
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
let yAxis2 = result[xAxis].filter(a => a.yAxis === -1).map(a => a.yAxis2).reduce((a, b) => a + b, 0);
|
||||
allData.push({
|
||||
groupName: 'users',
|
||||
xAxis: xAxis,
|
||||
yAxis: yAxis1,
|
||||
yAxis2: -1,
|
||||
yAxisIndex: 0,
|
||||
}, {
|
||||
groupName: 'transactions/s',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis2,
|
||||
yAxisIndex: 1,
|
||||
});
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
let yAxis2 = result[xAxis].filter(a => a.yAxis === -1).map(a => a.yAxis2).reduce((a, b) => a + b, 0);
|
||||
allData.push({
|
||||
groupName: 'users',
|
||||
xAxis: xAxis,
|
||||
yAxis: yAxis1,
|
||||
yAxis2: -1,
|
||||
yAxisIndex: 0,
|
||||
}, {
|
||||
groupName: 'transactions/s',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis2,
|
||||
yAxisIndex: 1,
|
||||
});
|
||||
}
|
||||
let yAxisList = allData.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
|
||||
let yAxis2List = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
let yAxis2ListMax = this._getChartMax(yAxis2List);
|
||||
loadOption.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
|
||||
}
|
||||
let yAxisList = allData.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
|
||||
let yAxis2List = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
let yAxis2ListMax = this._getChartMax(yAxis2List);
|
||||
loadOption.yAxis = [{
|
||||
name: 'User',
|
||||
]
|
||||
this.loadOption = this.generateOption(loadOption, allData);
|
||||
},
|
||||
getResChart() {
|
||||
if (this.planReportTemplate) {
|
||||
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: {
|
||||
text: 'Response Time',
|
||||
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: {},
|
||||
series: []
|
||||
};
|
||||
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
yAxis1 = yAxis1 / result[xAxis].length;
|
||||
|
||||
allData.push({
|
||||
groupName: 'response',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis1,
|
||||
yAxisIndex: 0,
|
||||
});
|
||||
}
|
||||
|
||||
let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
resOption.yAxis = [
|
||||
{
|
||||
name: 'Response Time',
|
||||
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
|
||||
}
|
||||
]
|
||||
this.loadOption = this.generateOption(loadOption, allData);
|
||||
}).catch(() => {
|
||||
this.loadOption = {};
|
||||
});
|
||||
},
|
||||
getResChart() {
|
||||
this.$get("/performance/report/content/res_chart/" + this.id).then(res => {
|
||||
let data = res.data.data;
|
||||
|
||||
let resOption = {
|
||||
color: color,
|
||||
title: {
|
||||
text: 'Response Time',
|
||||
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: {},
|
||||
series: []
|
||||
};
|
||||
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
yAxis1 = yAxis1 / result[xAxis].length;
|
||||
|
||||
allData.push({
|
||||
groupName: 'response',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis1,
|
||||
yAxisIndex: 0,
|
||||
});
|
||||
}
|
||||
|
||||
let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
resOption.yAxis = [
|
||||
{
|
||||
name: 'Response Time',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisListMax,
|
||||
interval: yAxisListMax / 5
|
||||
}
|
||||
];
|
||||
this.resOption = this.generateOption(resOption, allData);
|
||||
}).catch(() => {
|
||||
this.resOption = {};
|
||||
});
|
||||
];
|
||||
this.resOption = this.generateOption(resOption, allData);
|
||||
},
|
||||
getErrorChart() {
|
||||
this.$get("/performance/report/content/error_chart/" + this.id).then(res => {
|
||||
let data = res.data.data;
|
||||
|
||||
let errorOption = {
|
||||
color: color,
|
||||
title: {
|
||||
text: 'Errors',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#99743C'
|
||||
},
|
||||
if (this.planReportTemplate) {
|
||||
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: {
|
||||
text: 'Errors',
|
||||
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/>";
|
||||
},
|
||||
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);
|
||||
}
|
||||
|
||||
return result;
|
||||
let value = params[i].value;
|
||||
let marker = params[i].marker;
|
||||
result += marker + seriesName + ": " + value[1] + "<br/>";
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
series: []
|
||||
};
|
||||
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
|
||||
allData.push({
|
||||
groupName: 'errors',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis1,
|
||||
yAxisIndex: 0,
|
||||
});
|
||||
}
|
||||
let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
errorOption.yAxis = [
|
||||
{
|
||||
name: 'No',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisListMax,
|
||||
interval: yAxisListMax / 5
|
||||
return result;
|
||||
}
|
||||
]
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
series: []
|
||||
};
|
||||
|
||||
this.errorOption = this.generateOption(errorOption, allData);
|
||||
}).catch(() => {
|
||||
this.errorOption = {};
|
||||
});
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
|
||||
allData.push({
|
||||
groupName: 'errors',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis1,
|
||||
yAxisIndex: 0,
|
||||
});
|
||||
}
|
||||
let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
errorOption.yAxis = [
|
||||
{
|
||||
name: 'No',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisListMax,
|
||||
interval: yAxisListMax / 5
|
||||
}
|
||||
]
|
||||
|
||||
this.errorOption = this.generateOption(errorOption, allData);
|
||||
},
|
||||
getResponseCodeChart() {
|
||||
this.$get("/performance/report/content/response_code_chart/" + this.id).then(res => {
|
||||
let data = res.data.data;
|
||||
|
||||
let resCodeOption = {
|
||||
color: color,
|
||||
title: {
|
||||
text: 'Response code',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#99743C'
|
||||
},
|
||||
if (this.planReportTemplate) {
|
||||
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: {
|
||||
text: 'Response code',
|
||||
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/>";
|
||||
},
|
||||
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);
|
||||
}
|
||||
|
||||
return result;
|
||||
let value = params[i].value;
|
||||
let marker = params[i].marker;
|
||||
result += marker + seriesName + ": " + value[1] + "<br/>";
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
series: []
|
||||
};
|
||||
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
|
||||
allData.push({
|
||||
groupName: 'codes',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis1,
|
||||
yAxisIndex: 0,
|
||||
});
|
||||
}
|
||||
let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
resCodeOption.yAxis = [
|
||||
{
|
||||
name: 'No',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisListMax,
|
||||
interval: yAxisListMax / 5
|
||||
return result;
|
||||
}
|
||||
];
|
||||
this.resCodeOption = this.generateOption(resCodeOption, allData);
|
||||
}).catch(() => {
|
||||
this.resCodeOption = {};
|
||||
});
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
series: []
|
||||
};
|
||||
|
||||
let allData = [];
|
||||
let result = groupBy(data, 'xAxis');
|
||||
for (const xAxis in result) {
|
||||
let yAxis1 = result[xAxis].filter(a => a.yAxis2 === -1).map(a => a.yAxis).reduce((a, b) => a + b, 0);
|
||||
|
||||
allData.push({
|
||||
groupName: 'codes',
|
||||
xAxis: xAxis,
|
||||
yAxis: -1,
|
||||
yAxis2: yAxis1,
|
||||
yAxisIndex: 0,
|
||||
});
|
||||
}
|
||||
let yAxisList = allData.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
resCodeOption.yAxis = [
|
||||
{
|
||||
name: 'No',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisListMax,
|
||||
interval: yAxisListMax / 5
|
||||
}
|
||||
];
|
||||
this.resCodeOption = this.generateOption(resCodeOption, allData);
|
||||
},
|
||||
generateOption(option, data) {
|
||||
let chartData = data;
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -527,8 +527,8 @@ export function stopFullScreenLoading(loading, timeout) {
|
|||
}
|
||||
|
||||
export function getShareId() {
|
||||
// let herfUrl = 'http://localhost:8080/sharePlanReport?shareId=ba80f96a-184f-4607-b78e-324129153d9e';
|
||||
let herfUrl = window.location.href;
|
||||
//let herfUrl = 'http://localhost:8080/sharePlanReport?shareId=bf9496ac-8577-46b4-adf9-9c7e93dd06a8';
|
||||
let herfUrl = window.location.href;
|
||||
if (herfUrl.indexOf('shareId=') > -1) {
|
||||
let shareId = '';
|
||||
new URL(herfUrl).searchParams.forEach((value, key) => {
|
||||
|
|
|
@ -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) : {};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue