test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(性能测试): 报告统计table的宽度修改

This commit is contained in:
Captain.B 2021-05-08 14:11:37 +08:00 committed by 刘瑞斌
parent f2e6767f6d
commit 9d2e1a4d9c
2 changed files with 144 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
frontend/src/business/components/performance/report/components/ErrorLog.vue
View File

@ -30,11 +30,9 @@
</el-table-column>
</el-table>
<div style="margin-top: 40px;"></div>
<span class="table-title">Top 5 Errors</span>
<el-table
:data="errorTop5"
:data="errorSummary"
border
stripe
style="width: 100%"
@ -43,83 +41,111 @@
<el-table-column
prop="sample"
label="Sample"
width="200"
>
</el-table-column>
<el-table-column
prop="samples"
label="#Samples"
width="120"
>
</el-table-column>
<el-table-column
prop="errorsAllSize"
label="All Errors"
width="100"
>
</el-table-column>
</el-table>
<span class="table-title">#1 Error</span>
<el-table
:data="errorTop1"
border
stripe
style="width: 100%"
>
<el-table-column
prop="error1"
label="#1 Error"
width="400"
>
</el-table-column>
<el-table-column
prop="error1Size"
label="#1 Errors Count"
width="150"
>
</el-table-column>
</el-table>
<span class="table-title">#2 Error</span>
<el-table
:data="errorTop2"
border
stripe
style="width: 100%"
>
<el-table-column
prop="error2"
label="#2 Error"
width="400"
>
</el-table-column>
<el-table-column
prop="error2Size"
label="#2 Errors Count"
width="150"
>
</el-table-column>
</el-table>
<span class="table-title">#3 Error</span>
<el-table
:data="errorTop3"
border
stripe
style="width: 100%"
>
<el-table-column
prop="error3"
label="#3 Error"
width="400"
>
</el-table-column>
<el-table-column
prop="error3Size"
label="#3 Errors Count"
width="150"
>
</el-table-column>
</el-table>
<span class="table-title">#4 Error</span>
<el-table
:data="errorTop4"
border
stripe
style="width: 100%"
>
<el-table-column
prop="error4"
label="#4 Error"
width="400"
>
</el-table-column>
<el-table-column
prop="error4Size"
label="#4 Errors Count"
width="150"
>
</el-table-column>
</el-table>
<span class="table-title">#5 Error</span>
<el-table
:data="errorTop5"
border
stripe
style="width: 100%"
>
<el-table-column
prop="error5"
label="#5 Error"
width="400"
>
</el-table-column>
<el-table-column
prop="error5Size"
label="#5 Errors Count"
width="150"
>
</el-table-column>
</el-table>
@ -127,57 +153,90 @@
</template>
<script>
export default {
name: "ErrorLog",
data() {
return {
tableData: [],
errorTop5: [],
id: ''
}
},
methods: {
initTableData() {
this.$get("/performance/report/content/errors/" + this.id).then(res => {
this.tableData = res.data.data;
}).catch(() => {
export default {
name: "ErrorLog",
data() {
return {
tableData: [],
errorSummary: [],
errorTop1: [],
errorTop2: [],
errorTop3: [],
errorTop4: [],
errorTop5: [],
id: ''
};
},
methods: {
initTableData() {
this.$get("/performance/report/content/errors/" + 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 => {
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 = [];
});
}
},
watch: {
report: {
handler(val) {
if (!val.status || !val.id) {
return;
}
let status = val.status;
this.id = val.id;
if (status === "Completed" || status === "Running") {
this.initTableData();
} else {
this.tableData = [];
})
this.$get("/performance/report/content/errors_top5/" + this.id).then(res => {
this.errorTop5 = res.data.data;
}).catch(() => {
this.errorTop1 = [];
this.errorTop2 = [];
this.errorTop3 = [];
this.errorTop4 = [];
this.errorTop5 = [];
})
}
},
watch: {
report: {
handler(val) {
if (!val.status || !val.id) {
return;
}
let status = val.status;
this.id = val.id;
if (status === "Completed" || status === "Running") {
this.initTableData();
} else {
this.tableData = [];
this.errorTop5 = [];
}
},
deep: true
}
},
props: ['report']
}
this.errorSummary = [];
}
},
deep: true
}
},
props: ['report']
};
</script>
<style scoped>
.table-title {
font-size: 20px;
color: #8492a6;
display: block;
text-align: center;
margin-bottom: 8px;
}
.table-title {
font-size: 20px;
color: #8492a6;
display: block;
text-align: center;
margin-bottom: 8px;
margin-top: 40px;
}
</style>

33
frontend/src/business/components/performance/report/components/RequestStatistics.vue
View File

@ -6,14 +6,15 @@
border
style="width: 100%"
>
<el-table-column label="Requests" fixed width="450" align="center">
<el-table-column label="Requests" fixed min-width="150" align="center">
<el-table-column
prop="label"
label="Label"
width="450">
min-width="150">
<template v-slot:header="{column}">
<span>Label</span>
<i class="el-icon-search" style="margin-left: 8px;cursor: pointer;font-weight: bold;" @click="click(column)"></i>
<i class="el-icon-search" style="margin-left: 8px;cursor: pointer;font-weight: bold;"
@click="click(column)"></i>
<el-input v-model="searchLabel"
placeholder="请输入 Label 搜索"
size="mini"
@ -39,6 +40,7 @@
prop="fail"
label="FAIL"
align="center"
min-width="60"
/>
<el-table-column
@ -51,39 +53,46 @@
<el-table-column label="Response Times(ms)" align="center">
<el-table-column
prop="average"
label="Average"
label="Avg"
min-width="60"
/>
<el-table-column
prop="min"
label="Min"
min-width="60"
/>
<el-table-column
prop="max"
label="Max"
min-width="60"
/>
<el-table-column
prop="median"
label="Median"
label="Med"
min-width="60"
/>
<el-table-column
prop="tp90"
label="90% line"
label="90%"
min-width="60"
/>
<el-table-column
prop="tp95"
label="95% line"
label="95%"
min-width="60"
/>
<el-table-column
prop="tp99"
label="99% line"
label="99%"
min-width="60"
/>
</el-table-column>
<el-table-column label="Throughput">
<el-table-column
prop="transactions"
label="Transactions/s"
width="150"
label="Trans/s"
width="100"
/>
</el-table-column>
@ -92,13 +101,13 @@
prop="received"
label="Received"
align="center"
width="150"
width="100"
/>
<el-table-column
prop="sent"
label="Sent"
align="center"
width="150"
width="100"
/>
</el-table-column>