refactor(性能测试): 监控显示优化 (#6152)
* refactor(性能测试): 监控显示优化 Co-authored-by: Captain.B <bin@fit2cloud.com>
This commit is contained in:
metersphere-bot
GitHub
parent
2bc85f3e86
commit
410d443ea0
|
|
@ -1,28 +1,88 @@
|
|||
<template>
|
||||
<div v-loading="result.loading">
|
||||
<el-tabs @tab-click="clickTabs">
|
||||
<el-tab-pane v-for="(item, index) in instances" :key="item + index" :label="item" class="logging-content">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div>
|
||||
<el-select v-model="currentInstance" placeholder="" size="small" style="width: 100%"
|
||||
@change="handleChecked(currentInstance)">
|
||||
<el-option
|
||||
v-for="item in instances"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div style="padding-top: 10px">
|
||||
<el-checkbox-group v-model="checkList"
|
||||
@change="handleChecked(currentInstance)">
|
||||
<div v-for="op in checkOptions"
|
||||
:key="op.key"
|
||||
:content="op.label">
|
||||
<el-checkbox :label="op.label"/>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-collapse v-model="activeNames" class="monitor-detail">
|
||||
<el-collapse-item :title="$t('Monitor')" name="0">
|
||||
<el-checkbox-group v-model="checkList"
|
||||
@change="handleChecked(item)">
|
||||
<div v-for="op in checkOptions"
|
||||
:key="op.key"
|
||||
:content="op.label">
|
||||
<el-checkbox :label="op.label"/>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<ms-chart ref="chart2" class="chart-config" :options="totalOption" :autoresize="true"></ms-chart>
|
||||
<el-col :span="24">
|
||||
<ms-chart ref="chart2" class="chart-config" @datazoom="changeDataZoom" :options="totalOption"
|
||||
:autoresize="true"></ms-chart>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-row>
|
||||
<el-col :offset="2" :span="20">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column label="Label" align="center">
|
||||
<el-table-column
|
||||
prop="label"
|
||||
label="Label"
|
||||
sortable>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="Aggregate" align="center">
|
||||
<el-table-column
|
||||
prop="avg"
|
||||
label="Avg."
|
||||
width="100"
|
||||
sortable
|
||||
/>
|
||||
<el-table-column
|
||||
prop="min"
|
||||
label="Min."
|
||||
width="100"
|
||||
sortable
|
||||
/>
|
||||
<el-table-column
|
||||
prop="max"
|
||||
label="Max."
|
||||
width="100"
|
||||
sortable
|
||||
/>
|
||||
</el-table-column>
|
||||
<el-table-column label="Range" align="center">
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="Start"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
label="End"
|
||||
width="160"
|
||||
/>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,8 +90,10 @@
|
|||
|
||||
import MsChart from "@/business/components/common/chart/MsChart";
|
||||
import {
|
||||
getPerformanceMetricQuery, getPerformanceMetricQueryResource,
|
||||
getSharePerformanceMetricQuery, getSharePerformanceMetricQueryResource,
|
||||
getPerformanceMetricQuery,
|
||||
getPerformanceMetricQueryResource,
|
||||
getSharePerformanceMetricQuery,
|
||||
getSharePerformanceMetricQueryResource,
|
||||
} from "@/network/load-test";
|
||||
|
||||
const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
|
||||
|
|
@ -47,8 +109,10 @@ export default {
|
|||
id: '',
|
||||
init: false,
|
||||
loading: false,
|
||||
currentInstance: '',
|
||||
instances: [],
|
||||
data: [],
|
||||
tableData: [],
|
||||
checkList: ['CPU', 'Memory', 'Disk', 'Network In', 'Network Out'],
|
||||
checkOptions: [
|
||||
{key: 'cpu', label: 'CPU'},
|
||||
|
|
@ -96,7 +160,8 @@ export default {
|
|||
],
|
||||
series: []
|
||||
},
|
||||
totalOption: {}
|
||||
totalOption: {},
|
||||
seriesData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -110,25 +175,36 @@ export default {
|
|||
// this.init = true;
|
||||
if (this.planReportTemplate) {
|
||||
this.instances = this.planReportTemplate.reportResource;
|
||||
this.currentInstance = this.instances[0];
|
||||
this.data = this.planReportTemplate.metricData;
|
||||
this.totalOption = this.getOption(this.instances[0]);
|
||||
} else if (this.isShare){
|
||||
this.totalOption = this.getOption(this.currentInstance);
|
||||
} else if (this.isShare) {
|
||||
getSharePerformanceMetricQueryResource(this.shareId, this.id).then(response => {
|
||||
this.instances = response.data.data;
|
||||
if (!this.currentInstance) {
|
||||
this.currentInstance = this.instances[0];
|
||||
}
|
||||
getSharePerformanceMetricQuery(this.shareId, this.id).then(result => {
|
||||
if (result) {
|
||||
this.data = result.data.data;
|
||||
this.totalOption = this.getOption(this.instances[0]);
|
||||
this.totalOption = this.getOption(this.currentInstance);
|
||||
this.changeDataZoom({start: 0, end: 100});
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
getPerformanceMetricQueryResource(this.id).then(response => {
|
||||
this.instances = response.data.data;
|
||||
if (!this.currentInstance) {
|
||||
this.currentInstance = this.instances[0];
|
||||
}
|
||||
getPerformanceMetricQuery(this.id).then(result => {
|
||||
if (result) {
|
||||
this.data = result.data.data;
|
||||
this.totalOption = this.getOption(this.instances[0]);
|
||||
this.$nextTick(() => {
|
||||
this.totalOption = this.getOption(this.currentInstance);
|
||||
this.changeDataZoom({start: 0, end: 100});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -138,12 +214,7 @@ export default {
|
|||
this.totalOption = {};
|
||||
this.$nextTick(() => {
|
||||
this.totalOption = this.getOption(id);
|
||||
});
|
||||
},
|
||||
clickTabs(tab) {
|
||||
this.totalOption = {};
|
||||
this.$nextTick(() => {
|
||||
this.totalOption = this.getOption(tab.label);
|
||||
this.changeDataZoom({start: 0, end: 100});
|
||||
});
|
||||
},
|
||||
getOption(id) {
|
||||
|
|
@ -165,15 +236,22 @@ export default {
|
|||
this.baseOption.xAxis.data = d.timestamps;
|
||||
|
||||
let yAxis = d.values.map(v => v.toFixed(2));
|
||||
let data = [];
|
||||
for (let i = 0; i < d.timestamps.length; i++) {
|
||||
data.push([d.timestamps[i], yAxis[i]]);
|
||||
}
|
||||
|
||||
legend.push(name);
|
||||
series.push({
|
||||
name: name,
|
||||
data: yAxis,
|
||||
data: data,
|
||||
type: 'line',
|
||||
yAxisIndex: yAxisIndex,
|
||||
smooth: true,
|
||||
sampling: 'lttb',
|
||||
});
|
||||
|
||||
this.seriesData = series;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -181,6 +259,55 @@ export default {
|
|||
this.baseOption.series = series;
|
||||
return this.baseOption;
|
||||
},
|
||||
changeDataZoom(params) {
|
||||
let start = params.start / 100;
|
||||
let end = params.end / 100;
|
||||
if (params.batch) {
|
||||
start = params.batch[0].start / 100;
|
||||
end = params.batch[0].end / 100;
|
||||
}
|
||||
|
||||
let tableData = [];
|
||||
for (let i = 0; i < this.seriesData.length; i++) {
|
||||
let sub = this.seriesData[i].data, label = this.seriesData[i].name;
|
||||
let len = 0;
|
||||
let min, avg, max, sum = 0, startTime, endTime;
|
||||
for (let j = 0; j < sub.length; j++) {
|
||||
let time = sub[j][0];
|
||||
let value = Number.parseFloat(sub[j][1]);
|
||||
let index = (j / (sub.length - 1)).toFixed(2);
|
||||
if (index < start) {
|
||||
continue;
|
||||
}
|
||||
if (index >= end) {
|
||||
endTime = time;
|
||||
break;
|
||||
}
|
||||
|
||||
if (!startTime) {
|
||||
startTime = time;
|
||||
}
|
||||
|
||||
if (!min && !max) {
|
||||
min = max = value;
|
||||
}
|
||||
|
||||
if (min > value) {
|
||||
min = value;
|
||||
}
|
||||
if (max < value) {
|
||||
max = value;
|
||||
}
|
||||
sum += value;
|
||||
|
||||
len++; // 实际 len
|
||||
}
|
||||
|
||||
avg = (sum / len).toFixed(2);
|
||||
tableData.push({label, min, max, avg, startTime, endTime});
|
||||
}
|
||||
this.tableData = tableData;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route'(to) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue