feat(性能测试): 测试报告支持对比
This commit is contained in:
Captain.B
parent
b29d302ad2
commit
e26561e464
|
|
@ -1,9 +1,21 @@
|
|||
<template>
|
||||
<ms-container>
|
||||
<ms-main-container>
|
||||
<el-card>
|
||||
|
||||
</el-card>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<overview-compare-card ref="overviewCard"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<load-compare-card ref="loadCard"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<response-time-compare-card ref="responseTimeCard"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
</template>
|
||||
|
|
@ -12,15 +24,16 @@
|
|||
import MsContainer from "@/business/components/common/components/MsContainer";
|
||||
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
|
||||
import {checkoutTestManagerOrTestUser} from "@/common/js/utils";
|
||||
import OverviewCompareCard from "@/business/components/performance/report/components/OverviewCompareCard";
|
||||
import MsChart from "@/business/components/common/chart/MsChart";
|
||||
import LoadCompareCard from "@/business/components/performance/report/components/LoadCompareCard";
|
||||
import ResponseTimeCompareCard from "@/business/components/performance/report/components/ResponseTimeCompareCard";
|
||||
|
||||
export default {
|
||||
name: "PerformanceReportCompare",
|
||||
components: {MsMainContainer, MsContainer},
|
||||
components: {ResponseTimeCompareCard, LoadCompareCard, MsChart, OverviewCompareCard, MsMainContainer, MsContainer},
|
||||
mounted() {
|
||||
let reportId = this.$route.path.split('/')[4];
|
||||
console.log(reportId);
|
||||
let items = localStorage.getItem("compareReportIds");
|
||||
console.log(JSON.parse(items));
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
isReadOnly() {
|
||||
|
|
@ -30,11 +43,28 @@ export default {
|
|||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
init() {
|
||||
this.$refs.overviewCard.initTable();
|
||||
this.$refs.loadCard.initCard();
|
||||
this.$refs.responseTimeCard.initCard();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'(to) {
|
||||
if (to.name !== "ReportCompare") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -332,6 +332,8 @@ export default {
|
|||
this.$set(this.report, "id", this.reportId);
|
||||
this.$set(this.report, "status", data.status);
|
||||
this.$set(this.report, "testId", data.testId);
|
||||
this.$set(this.report, "name", data.name);
|
||||
this.$set(this.report, "createTime", data.createTime);
|
||||
this.$set(this.report, "loadConfiguration", data.loadConfiguration);
|
||||
this.checkReportStatus(data.status);
|
||||
if (this.status === "Completed" || this.status === "Running") {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<template v-slot:header>
|
||||
<span class="title">Load</span>
|
||||
</template>
|
||||
<div v-for="(option, index) in loadList" :key="index">
|
||||
<ms-chart ref="chart1" :options="option" :autoresize="true"></ms-chart>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsChart from "@/business/components/common/chart/MsChart";
|
||||
|
||||
export default {
|
||||
name: "LoadCompareCard",
|
||||
components: {MsChart},
|
||||
data() {
|
||||
return {
|
||||
loadList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initCard() {
|
||||
this.loadList = [];
|
||||
this.reportId = this.$route.path.split('/')[4];
|
||||
this.compareReports = JSON.parse(localStorage.getItem("compareReports"));
|
||||
|
||||
this.compareReports.forEach(report => {
|
||||
this.initOverview(report);
|
||||
})
|
||||
},
|
||||
initOverview(report) {
|
||||
this.$get("/performance/report/content/load_chart/" + report.id).then(res => {
|
||||
let data = res.data.data;
|
||||
let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
|
||||
let yAxis2List = data.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
let yAxis2ListMax = this._getChartMax(yAxis2List);
|
||||
|
||||
let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
|
||||
yAxisIndex0List = this._unique(yAxisIndex0List);
|
||||
let yAxisIndex1List = data.filter(m => m.yAxis === -1).map(m => m.groupName);
|
||||
yAxisIndex1List = this._unique(yAxisIndex1List);
|
||||
|
||||
let loadOption = {
|
||||
title: {
|
||||
text: report.name + " " + this.$options.filters['timestampFormatDate'](report.createTime),
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#65A2FF'
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
// extraCssText: 'z-index: 999;',
|
||||
confine: true,
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
yAxis: [{
|
||||
name: 'User',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisListMax,
|
||||
splitNumber: 5,
|
||||
interval: yAxisListMax / 5
|
||||
},
|
||||
{
|
||||
name: 'Transactions/s',
|
||||
type: 'value',
|
||||
splitNumber: 5,
|
||||
min: 0,
|
||||
max: yAxis2ListMax,
|
||||
interval: yAxis2ListMax / 5
|
||||
}
|
||||
],
|
||||
series: []
|
||||
};
|
||||
let setting = {
|
||||
series: [
|
||||
{
|
||||
name: 'users',
|
||||
color: '#0CA74A',
|
||||
},
|
||||
{
|
||||
name: 'hits',
|
||||
yAxisIndex: '1',
|
||||
color: '#65A2FF',
|
||||
},
|
||||
{
|
||||
name: 'errors',
|
||||
yAxisIndex: '1',
|
||||
color: '#E6113C',
|
||||
}
|
||||
]
|
||||
}
|
||||
yAxisIndex0List.forEach(item => {
|
||||
setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
|
||||
})
|
||||
|
||||
yAxisIndex1List.forEach(item => {
|
||||
setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
|
||||
})
|
||||
this.loadList.push(this.generateOption(loadOption, data, setting));
|
||||
}).catch(() => {
|
||||
this.loadList = [];
|
||||
})
|
||||
},
|
||||
generateOption(option, data, setting) {
|
||||
let chartData = data;
|
||||
let seriesArray = [];
|
||||
for (let set in setting) {
|
||||
if (set === "series") {
|
||||
seriesArray = setting[set];
|
||||
continue;
|
||||
}
|
||||
this.$set(option, set, setting[set]);
|
||||
}
|
||||
let legend = [], series = {}, xAxis = [], seriesData = [];
|
||||
chartData.forEach(item => {
|
||||
if (!xAxis.includes(item.xAxis)) {
|
||||
xAxis.push(item.xAxis);
|
||||
}
|
||||
xAxis.sort()
|
||||
let name = item.groupName
|
||||
if (!legend.includes(name)) {
|
||||
legend.push(name)
|
||||
series[name] = []
|
||||
}
|
||||
if (item.yAxis === -1) {
|
||||
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis2.toFixed(2)]);
|
||||
} else {
|
||||
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis.toFixed(2)]);
|
||||
}
|
||||
})
|
||||
this.$set(option.legend, "data", legend);
|
||||
this.$set(option.legend, "type", "scroll");
|
||||
this.$set(option.legend, "bottom", "10px");
|
||||
this.$set(option.xAxis, "data", xAxis);
|
||||
for (let name in series) {
|
||||
let d = series[name];
|
||||
d.sort((a, b) => a[0].localeCompare(b[0]));
|
||||
let items = {
|
||||
name: name,
|
||||
type: 'line',
|
||||
data: d,
|
||||
smooth: true
|
||||
};
|
||||
let seriesArrayNames = seriesArray.map(m => m.name);
|
||||
if (seriesArrayNames.includes(name)) {
|
||||
for (let j = 0; j < seriesArray.length; j++) {
|
||||
let seriesObj = seriesArray[j];
|
||||
if (seriesObj['name'] === name) {
|
||||
Object.assign(items, seriesObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
seriesData.push(items);
|
||||
}
|
||||
this.$set(option, "series", seriesData);
|
||||
return option;
|
||||
},
|
||||
_getChartMax(arr) {
|
||||
const max = Math.max(...arr);
|
||||
return Math.ceil(max / 4.5) * 5;
|
||||
},
|
||||
_unique(arr) {
|
||||
return Array.from(new Set(arr));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<el-card class="table-card">
|
||||
<template v-slot:header>
|
||||
<span class="title">Overview</span>
|
||||
</template>
|
||||
<el-table border :data="overviewList" class="adjust-table test-content">
|
||||
<el-table-column prop="name" :label="$t('commons.name')"/>
|
||||
<el-table-column prop="createTime" :label="$t('commons.create_time')">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxUsers" label="Max Users"/>
|
||||
<el-table-column prop="avgTransactions" label="Avg.Transactions"/>
|
||||
<el-table-column prop="errors" label="Errors"/>
|
||||
<el-table-column prop="avgResponseTime" label="Avg.Response Time"/>
|
||||
<el-table-column prop="responseTime90" label="90% Response Time"/>
|
||||
<el-table-column prop="avgBandwidth" label="Avg.Bandwidth"/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "OverviewCompareCard",
|
||||
data() {
|
||||
return {
|
||||
reportId: null,
|
||||
compareReports: [],
|
||||
overviewList: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initTable() {
|
||||
this.overviewList = [];
|
||||
|
||||
this.reportId = this.$route.path.split('/')[4];
|
||||
this.compareReports = JSON.parse(localStorage.getItem("compareReports"));
|
||||
|
||||
this.compareReports.forEach(report => {
|
||||
this.initOverview(report);
|
||||
})
|
||||
},
|
||||
initOverview(report) {
|
||||
this.$get("/performance/report/content/testoverview/" + report.id).then(res => {
|
||||
let data = res.data.data;
|
||||
this.overviewList.push({
|
||||
name: report.name,
|
||||
createTime: report.createTime,
|
||||
maxUsers: data.maxUsers,
|
||||
avgThroughput: data.avgThroughput,
|
||||
avgTransactions: data.avgTransactions,
|
||||
errors: data.errors,
|
||||
avgResponseTime: data.avgResponseTime,
|
||||
responseTime90: data.responseTime90,
|
||||
avgBandwidth: data.avgBandwidth,
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<template v-slot:header>
|
||||
<span class="title">Response Time</span>
|
||||
</template>
|
||||
<div v-for="(option, index) in responseTimeList" :key="index">
|
||||
<ms-chart ref="chart1" :options="option" :autoresize="true"></ms-chart>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsChart from "@/business/components/common/chart/MsChart";
|
||||
|
||||
export default {
|
||||
name: "ResponseTimeCompareCard",
|
||||
components: {MsChart},
|
||||
data() {
|
||||
return {
|
||||
responseTimeList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initCard() {
|
||||
this.responseTimeList = [];
|
||||
this.reportId = this.$route.path.split('/')[4];
|
||||
this.compareReports = JSON.parse(localStorage.getItem("compareReports"));
|
||||
|
||||
this.compareReports.forEach(report => {
|
||||
this.initOverview(report);
|
||||
})
|
||||
},
|
||||
initOverview(report) {
|
||||
this.$get("/performance/report/content/res_chart/" + report.id).then(res => {
|
||||
let data = res.data.data;
|
||||
let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
|
||||
let yAxis2List = data.filter(m => m.yAxis === -1).map(m => m.yAxis2);
|
||||
let yAxisListMax = this._getChartMax(yAxisList);
|
||||
let yAxis2ListMax = this._getChartMax(yAxis2List);
|
||||
|
||||
let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
|
||||
yAxisIndex0List = this._unique(yAxisIndex0List);
|
||||
let yAxisIndex1List = data.filter(m => m.yAxis === -1).map(m => m.groupName);
|
||||
yAxisIndex1List = this._unique(yAxisIndex1List);
|
||||
|
||||
let resOption = {
|
||||
title: {
|
||||
text: report.name + " " + this.$options.filters['timestampFormatDate'](report.createTime),
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#99743C'
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
// extraCssText: 'z-index: 999;',
|
||||
confine: true,
|
||||
formatter: function (params, ticket, callback) {
|
||||
let result = "";
|
||||
let name = params[0].name;
|
||||
result += name + "<br/>";
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
let seriesName = params[i].seriesName;
|
||||
if (seriesName.length > 100) {
|
||||
seriesName = seriesName.substring(0, 100);
|
||||
}
|
||||
let value = params[i].value;
|
||||
let marker = params[i].marker;
|
||||
result += marker + seriesName + ": " + value[1] + "<br/>";
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {},
|
||||
yAxis: [{
|
||||
name: 'User',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisListMax,
|
||||
interval: yAxisListMax / 5
|
||||
},
|
||||
{
|
||||
name: 'Response Time',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxis2ListMax,
|
||||
interval: yAxis2ListMax / 5
|
||||
}
|
||||
],
|
||||
series: []
|
||||
}
|
||||
let setting = {
|
||||
series: [
|
||||
{
|
||||
name: 'users',
|
||||
color: '#0CA74A',
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
yAxisIndex0List.forEach(item => {
|
||||
setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
|
||||
})
|
||||
|
||||
yAxisIndex1List.forEach(item => {
|
||||
setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
|
||||
})
|
||||
|
||||
this.responseTimeList.push(this.generateOption(resOption, data, setting));
|
||||
}).catch(() => {
|
||||
this.responseTimeList = [];
|
||||
})
|
||||
},
|
||||
generateOption(option, data, setting) {
|
||||
let chartData = data;
|
||||
let seriesArray = [];
|
||||
for (let set in setting) {
|
||||
if (set === "series") {
|
||||
seriesArray = setting[set];
|
||||
continue;
|
||||
}
|
||||
this.$set(option, set, setting[set]);
|
||||
}
|
||||
let legend = [], series = {}, xAxis = [], seriesData = [];
|
||||
chartData.forEach(item => {
|
||||
if (!xAxis.includes(item.xAxis)) {
|
||||
xAxis.push(item.xAxis);
|
||||
}
|
||||
xAxis.sort()
|
||||
let name = item.groupName
|
||||
if (!legend.includes(name)) {
|
||||
legend.push(name)
|
||||
series[name] = []
|
||||
}
|
||||
if (item.yAxis === -1) {
|
||||
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis2.toFixed(2)]);
|
||||
} else {
|
||||
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis.toFixed(2)]);
|
||||
}
|
||||
})
|
||||
this.$set(option.legend, "data", legend);
|
||||
this.$set(option.legend, "type", "scroll");
|
||||
this.$set(option.legend, "bottom", "10px");
|
||||
this.$set(option.xAxis, "data", xAxis);
|
||||
for (let name in series) {
|
||||
let d = series[name];
|
||||
d.sort((a, b) => a[0].localeCompare(b[0]));
|
||||
let items = {
|
||||
name: name,
|
||||
type: 'line',
|
||||
data: d,
|
||||
smooth: true
|
||||
};
|
||||
let seriesArrayNames = seriesArray.map(m => m.name);
|
||||
if (seriesArrayNames.includes(name)) {
|
||||
for (let j = 0; j < seriesArray.length; j++) {
|
||||
let seriesObj = seriesArray[j];
|
||||
if (seriesObj['name'] === name) {
|
||||
Object.assign(items, seriesObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
seriesData.push(items);
|
||||
}
|
||||
this.$set(option, "series", seriesData);
|
||||
return option;
|
||||
},
|
||||
_getChartMax(arr) {
|
||||
const max = Math.max(...arr);
|
||||
return Math.ceil(max / 4.5) * 5;
|
||||
},
|
||||
_unique(arr) {
|
||||
return Array.from(new Set(arr));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,20 +5,23 @@
|
|||
:visible.sync="loadReportVisible">
|
||||
<el-table v-loading="reportLoadingResult.loading"
|
||||
class="basic-config"
|
||||
:data="compareReports"
|
||||
:data="tableData"
|
||||
@select-all="handleSelectAll"
|
||||
@select="handleSelectionChange">
|
||||
|
||||
<el-table-column type="selection"/>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('commons.name')"
|
||||
show-overflow-tooltip>
|
||||
prop="name"
|
||||
:label="$t('commons.name')"
|
||||
show-overflow-tooltip>
|
||||
<template v-slot:default="scope">
|
||||
{{ scope.row.name }} <i v-if="scope.row.id === report.id" class="el-icon-star-on"></i>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
:label="$t('report.user_name')"
|
||||
show-overflow-tooltip>
|
||||
prop="userName"
|
||||
:label="$t('report.user_name')"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="triggerMode"
|
||||
:label="$t('test_track.report.list.trigger_mode')">
|
||||
|
|
@ -27,7 +30,7 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('commons.create_time')">
|
||||
:label="$t('commons.create_time')">
|
||||
<template v-slot:default="scope">
|
||||
<i class="el-icon-time"/>
|
||||
<span class="last-modified">{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
|
|
@ -55,46 +58,56 @@ export default {
|
|||
return {
|
||||
loadReportVisible: false,
|
||||
reportLoadingResult: {},
|
||||
compareReports: [],
|
||||
tableData: [],
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
selectIds: new Set,
|
||||
report: {},
|
||||
compareReports: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(report) {
|
||||
this.getCompareReports(report.testId);
|
||||
this.report = report;
|
||||
this.getCompareReports(report);
|
||||
|
||||
this.compareReports.push(report);
|
||||
|
||||
this.loadReportVisible = true;
|
||||
},
|
||||
close() {
|
||||
this.loadReportVisible = false;
|
||||
},
|
||||
getCompareReports(testId) {
|
||||
getCompareReports(report) {
|
||||
|
||||
let condition = {
|
||||
testId: testId,
|
||||
testId: report.testId,
|
||||
filters: {status: ["Completed"]}
|
||||
};
|
||||
this.reportLoadingResult = this.$post('/performance/report/list/all/' + this.currentPage + "/" + this.pageSize, condition, res => {
|
||||
let data = res.data;
|
||||
this.total = data.itemCount;
|
||||
this.compareReports = data.listObject;
|
||||
this.tableData = data.listObject;
|
||||
})
|
||||
},
|
||||
handleCompare() {
|
||||
let reportIds = [...this.selectIds];
|
||||
localStorage.setItem("compareReportIds", JSON.stringify(reportIds));
|
||||
this.tableData
|
||||
.filter(r => reportIds.indexOf(r.id) > -1 && this.report.id !== r.id)
|
||||
.forEach(r => this.compareReports.push(r));
|
||||
|
||||
localStorage.setItem("compareReports", JSON.stringify(this.compareReports));
|
||||
this.close();
|
||||
this.$router.push({path: '/performance/report/compare/' + reportIds[0]});
|
||||
},
|
||||
handleSelectAll(selection) {
|
||||
if (selection.length > 0) {
|
||||
this.compareReports.forEach(item => {
|
||||
this.tableData.forEach(item => {
|
||||
this.selectIds.add(item.id);
|
||||
});
|
||||
} else {
|
||||
this.compareReports.forEach(item => {
|
||||
this.tableData.forEach(item => {
|
||||
if (this.selectIds.has(item.id)) {
|
||||
this.selectIds.delete(item.id);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue