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

style(性能测试): 优化性能测试报告中环境的展示效果 

--bug=1028215 --user=宋天阳 【性能测试】-报告的运行环境弹窗内容显示有点挤，建议增加行高
https://www.tapd.cn/55049933/s/1401694
This commit is contained in:
song-tianyang 2023-08-08 15:50:18 +08:00 committed by 建国
parent dd92feeba2
commit 24f39642f0
2 changed files with 145 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
performance-test/frontend/src/business/report/components/ProjectEnvironmentDialog.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<el-dialog <el-dialog
:title="$t('commons.environment')" :title="$t('commons.environment')"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="30%" width="30%"
:append-to-body="true" :append-to-body="true"
:destroy-on-close="true" :destroy-on-close="true"
z-index="99998" z-index="99998"
:before-close="handleClose"> :before-close="handleClose">
<div> <div>
<div v-if="projectEnvMap" type="flex"> <div v-if="projectEnvMap" type="flex">
<div v-for="(values,key) in projectEnvMap" :key="key" style="margin-right: 10px"> <div v-for="(values,key) in projectEnvMap" :key="key" style="margin-right: 10px;margin-bottom: 10px">
{{ key + ":" }} {{ key + ":" }}
<ms-tag v-for="(item,index) in values" :key="index" type="success" :content="item" <ms-tag v-for="(item,index) in values" :key="index" type="success" :content="item"
style="margin-left: 2px"/> style="margin-left: 2px"/>

274
performance-test/frontend/src/business/test/components/PerformancePressureConfig.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div v-loading="result.loading" class="pressure-config-container"> <div v-loading="result.loading" v-if="threadGroups.length > 0" class="pressure-config-container">
<el-row> <el-row>
<el-col> <el-col>
<el-form :inline="true" :disabled="isReadOnly"> <el-form :inline="true" :disabled="isReadOnly">
<el-form-item :label="$t('load_test.select_resource_pool')"> <el-form-item :label="$t('load_test.select_resource_pool')">
<el-select v-model="resourcePool" size="mini" @change="resourcePoolChange"> <el-select v-model="resourcePool" size="mini" @change="resourcePoolChange">
<el-option <el-option
v-for="item in resourcePools" v-for="item in resourcePools"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:disabled="!item.performance" :disabled="!item.performance"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -81,10 +81,10 @@
<el-form-item :label="$t('load_test.on_sample_error')"> <el-form-item :label="$t('load_test.on_sample_error')">
<el-select v-model="threadGroup.onSampleError" size="mini"> <el-select v-model="threadGroup.onSampleError" size="mini">
<el-option <el-option
v-for="item in onSampleErrors" v-for="item in onSampleErrors"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -213,10 +213,10 @@
<el-select v-model="threadGroup.resourceNodeIndex" @change="specifyNodeChange(threadGroup)" <el-select v-model="threadGroup.resourceNodeIndex" @change="specifyNodeChange(threadGroup)"
size="mini"> size="mini">
<el-option <el-option
v-for="(node, index) in resourceNodes" v-for="(node, index) in resourceNodes"
:key="node.ip" :key="node.ip"
:label="node.ip" :label="node.ip"
:value="index"> :value="index">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -283,7 +283,7 @@ const RATIOS = "ratios";
const hexToRgb = function (hex) { const hexToRgb = function (hex) {
return 'rgb(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) return 'rgb(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5))
+ ',' + parseInt('0x' + hex.slice(5, 7)) + ')'; + ',' + parseInt('0x' + hex.slice(5, 7)) + ')';
}; };
export default { export default {
@ -397,136 +397,136 @@ export default {
methods: { methods: {
getResourcePools() { getResourcePools() {
getResourcePools(this.isShare) getResourcePools(this.isShare)
.then(response => { .then(response => {
this.resourcePools = response.data; this.resourcePools = response.data;
// 如果当前的资源池无效 设置 null // 如果当前的资源池无效 设置 null
if (this.resourcePool) { if (this.resourcePool) {
if (response.data.filter(p => p.id === this.resourcePool && p.performance).length === 0) { if (response.data.filter(p => p.id === this.resourcePool && p.performance).length === 0) {
this.resourcePool = null; this.resourcePool = null;
// 标记因资源池无效而将资源池ID置为null // 标记因资源池无效而将资源池ID置为null
this.setPoolNull = true; this.setPoolNull = true;
}
} }
}
this.resourcePoolChange(); this.resourcePoolChange();
}); });
}, },
getLoadConfig() { getLoadConfig() {
getLoadConfig(this.testId, this.reportId, this.isShare) getLoadConfig(this.testId, this.reportId, this.isShare)
.then(response => { .then(response => {
let data = JSON.parse(response.data); let data = JSON.parse(response.data);
for (let i = 0; i < this.threadGroups.length; i++) { for (let i = 0; i < this.threadGroups.length; i++) {
data[i].forEach(item => { data[i].forEach(item => {
switch (item.key) { switch (item.key) {
case TARGET_LEVEL: case TARGET_LEVEL:
this.threadGroups[i].threadNumber = item.value; this.threadGroups[i].threadNumber = item.value;
break; break;
case RAMP_UP: case RAMP_UP:
this.threadGroups[i].rampUpTime = item.value; this.threadGroups[i].rampUpTime = item.value;
break; break;
case ITERATE_RAMP_UP: case ITERATE_RAMP_UP:
this.threadGroups[i].iterateRampUp = item.value; this.threadGroups[i].iterateRampUp = item.value;
break; break;
case DURATION: case DURATION:
this.threadGroups[i].duration = item.value; this.threadGroups[i].duration = item.value;
break; break;
case DURATION_HOURS: case DURATION_HOURS:
this.threadGroups[i].durationHours = item.value; this.threadGroups[i].durationHours = item.value;
break; break;
case DURATION_MINUTES: case DURATION_MINUTES:
this.threadGroups[i].durationMinutes = item.value; this.threadGroups[i].durationMinutes = item.value;
break; break;
case DURATION_SECONDS: case DURATION_SECONDS:
this.threadGroups[i].durationSeconds = item.value; this.threadGroups[i].durationSeconds = item.value;
break; break;
case UNIT: case UNIT:
this.threadGroups[i].unit = item.value; this.threadGroups[i].unit = item.value;
break; break;
case STEPS: case STEPS:
this.threadGroups[i].step = item.value; this.threadGroups[i].step = item.value;
break; break;
case RPS_LIMIT: case RPS_LIMIT:
this.threadGroups[i].rpsLimit = item.value; this.threadGroups[i].rpsLimit = item.value;
break; break;
case RPS_LIMIT_ENABLE: case RPS_LIMIT_ENABLE:
this.threadGroups[i].rpsLimitEnable = item.value; this.threadGroups[i].rpsLimitEnable = item.value;
break; break;
case THREAD_TYPE: case THREAD_TYPE:
this.threadGroups[i].threadType = item.value; this.threadGroups[i].threadType = item.value;
break; break;
case ITERATE_NUM: case ITERATE_NUM:
this.threadGroups[i].iterateNum = item.value; this.threadGroups[i].iterateNum = item.value;
break; break;
case ENABLED: case ENABLED:
this.threadGroups[i].enabled = item.value; this.threadGroups[i].enabled = item.value;
break; break;
case DELETED: case DELETED:
this.threadGroups[i].deleted = item.value; this.threadGroups[i].deleted = item.value;
break; break;
case HANDLER: case HANDLER:
this.threadGroups[i].handler = item.value; this.threadGroups[i].handler = item.value;
break; break;
case THREAD_GROUP_TYPE: case THREAD_GROUP_TYPE:
this.threadGroups[i].tgType = item.value; this.threadGroups[i].tgType = item.value;
break; break;
case ON_SAMPLE_ERROR: case ON_SAMPLE_ERROR:
this.threadGroups[i].onSampleError = item.value; this.threadGroups[i].onSampleError = item.value;
break; break;
case STRATEGY: case STRATEGY:
this.threadGroups[i].strategy = item.value; this.threadGroups[i].strategy = item.value;
break; break;
case RESOURCE_NODE_INDEX: case RESOURCE_NODE_INDEX:
this.threadGroups[i].resourceNodeIndex = item.value; this.threadGroups[i].resourceNodeIndex = item.value;
break; break;
case RATIOS: case RATIOS:
this.threadGroups[i].ratios = item.value; this.threadGroups[i].ratios = item.value;
break; break;
case SERIALIZE_THREAD_GROUPS: case SERIALIZE_THREAD_GROUPS:
this.serializeThreadGroups = item.value;// 所有的线程组值一样 this.serializeThreadGroups = item.value;// 所有的线程组值一样
break; break;
case AUTO_STOP: case AUTO_STOP:
this.autoStop = item.value;// 所有的线程组值一样 this.autoStop = item.value;// 所有的线程组值一样
break; break;
case AUTO_STOP_DELAY: case AUTO_STOP_DELAY:
this.autoStopDelay = item.value;// 所有的线程组值一样 this.autoStopDelay = item.value;// 所有的线程组值一样
break; break;
default: default:
break; break;
} }
// //
this.$set(this.threadGroups[i], "unit", this.threadGroups[i].unit || 'S'); this.$set(this.threadGroups[i], "unit", this.threadGroups[i].unit || 'S');
this.$set(this.threadGroups[i], "threadType", this.threadGroups[i].threadType || 'DURATION'); this.$set(this.threadGroups[i], "threadType", this.threadGroups[i].threadType || 'DURATION');
this.$set(this.threadGroups[i], "iterateNum", this.threadGroups[i].iterateNum || 1); this.$set(this.threadGroups[i], "iterateNum", this.threadGroups[i].iterateNum || 1);
this.$set(this.threadGroups[i], "iterateRampUp", this.threadGroups[i].iterateRampUp || 10); this.$set(this.threadGroups[i], "iterateRampUp", this.threadGroups[i].iterateRampUp || 10);
this.$set(this.threadGroups[i], "enabled", this.threadGroups[i].enabled || 'true'); this.$set(this.threadGroups[i], "enabled", this.threadGroups[i].enabled || 'true');
this.$set(this.threadGroups[i], "deleted", this.threadGroups[i].deleted || 'false'); this.$set(this.threadGroups[i], "deleted", this.threadGroups[i].deleted || 'false');
this.$set(this.threadGroups[i], "onSampleError", this.threadGroups[i].onSampleError || 'continue'); this.$set(this.threadGroups[i], "onSampleError", this.threadGroups[i].onSampleError || 'continue');
}); });
} }
for (let i = 0; i < this.threadGroups.length; i++) { for (let i = 0; i < this.threadGroups.length; i++) {
let tg = this.threadGroups[i]; let tg = this.threadGroups[i];
tg.durationHours = Math.floor(tg.duration / 3600); tg.durationHours = Math.floor(tg.duration / 3600);
tg.durationMinutes = Math.floor((tg.duration / 60 % 60)); tg.durationMinutes = Math.floor((tg.duration / 60 % 60));
tg.durationSeconds = Math.floor((tg.duration % 60)); tg.durationSeconds = Math.floor((tg.duration % 60));
} }
this.resourcePoolChange(); this.resourcePoolChange();
this.calculateTotalChart(); this.calculateTotalChart();
}); });
}, },
getJmxContent() { getJmxContent() {
let threadGroups = []; let threadGroups = [];
getJmxContent(this.testId, this.reportId, this.isShare) getJmxContent(this.testId, this.reportId, this.isShare)
.then(response => { .then(response => {
response.data.forEach(d => { response.data.forEach(d => {
threadGroups = threadGroups.concat(findThreadGroup(d.jmx, d.name)); threadGroups = threadGroups.concat(findThreadGroup(d.jmx, d.name));
threadGroups.forEach(tg => { threadGroups.forEach(tg => {
tg.options = {}; tg.options = {};
});
}); });
this.threadGroups = threadGroups;
this.$emit('fileChange', threadGroups);
this.getLoadConfig();
}); });
this.threadGroups = threadGroups;
this.$emit('fileChange', threadGroups);
this.getLoadConfig();
});
}, },
resourcePoolChange() { resourcePoolChange() {
let result = this.resourcePools.filter(p => p.id === this.resourcePool); let result = this.resourcePools.filter(p => p.id === this.resourcePool);
@ -607,8 +607,8 @@ export default {
let tg = handler.threadGroups[i]; let tg = handler.threadGroups[i];
if (tg.enabled === 'false' || if (tg.enabled === 'false' ||
tg.deleted === 'true' || tg.deleted === 'true' ||
tg.threadType === 'ITERATION') { tg.threadType === 'ITERATION') {
continue; continue;
} }
if (this.getDuration(tg) < tg.rampUpTime) { if (this.getDuration(tg) < tg.rampUpTime) {
@ -733,7 +733,7 @@ export default {
} }
if (!tg.threadNumber || !tg.duration if (!tg.threadNumber || !tg.duration
|| !tg.rampUpTime || !tg.step || !tg.iterateNum) { || !tg.rampUpTime || !tg.step || !tg.iterateNum) {
this.$warning(this.$t('load_test.pressure_config_params_is_empty')); this.$warning(this.$t('load_test.pressure_config_params_is_empty'));
this.$emit('changeActive', '1'); this.$emit('changeActive', '1');
return false; return false;