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

refactor(性能测试): 修改压力配置的页面

This commit is contained in:
Captain.B 2021-03-23 17:36:25 +08:00
parent 6544382236
commit 40c1ebea20
2 changed files with 64 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue
View File

@ -1,16 +1,25 @@
<template>
<div v-loading="result.loading" class="pressure-config-container">
<el-row>
<el-col>
<ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
</el-col>
</el-row>
<el-row>
<el-collapse v-model="activeNames">
<el-collapse-item :title="threadGroup.attributes.testname" :name="index"
v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
:key="index">
<el-col :span="10">
<el-col :span="10">
<el-collapse v-model="activeNames" accordion>
<el-collapse-item :name="index"
v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
:key="index">
<template slot="title">
<div style="padding-right: 10px">
{{ threadGroup.attributes.testname }}
</div>
<el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'DURATION'">
{{ $t('load_test.thread_num') }}{{ threadGroup.threadNumber }},
{{ $t('load_test.duration') }}: {{ threadGroup.duration }} {{ getUnitLabel(threadGroup) }}
</el-tag>
<el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'ITERATION'">
{{ $t('load_test.thread_num') }} {{ threadGroup.threadNumber }},
{{ $t('load_test.iterate_num') }} {{ threadGroup.iterateNum }}
</el-tag>
</template>
<el-form :inline="true">
<el-form-item :label="$t('load_test.thread_num')">
<el-input-number
@ -34,7 +43,7 @@
:disabled="true"
v-model="threadGroup.duration"
:min="1"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item>
@ -51,7 +60,7 @@
<el-input-number
:disabled="true"
v-model="threadGroup.rpsLimit"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
:min="1"
size="mini"/>
</el-form-item>
@ -63,7 +72,7 @@
:min="1"
:max="threadGroup.duration"
v-model="threadGroup.rampUpTime"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_minutes', [getUnitLabel(threadGroup)])">
@ -72,7 +81,7 @@
:min="1"
:max="Math.min(threadGroup.threadNumber, threadGroup.rampUpTime)"
v-model="threadGroup.step"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_times')"/>
@ -96,7 +105,7 @@
:disabled="true"
v-model="threadGroup.iterateNum"
:min="1"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<br>
@ -106,7 +115,7 @@
<el-input-number
:disabled="true || !threadGroup.rpsLimitEnable"
v-model="threadGroup.rpsLimit"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
:min="1"
size="mini"/>
</el-form-item>
@ -116,19 +125,18 @@
:disabled="true"
:min="1"
v-model="threadGroup.iterateRampUp"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_seconds', [getUnitLabel(threadGroup)])"/>
</div>
</el-form>
</el-col>
<el-col :span="14">
<div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
<ms-chart class="chart-container" :options="threadGroup.options" :autoresize="true"></ms-chart>
</el-col>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</el-col>
<el-col :span="14">
<ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
</el-col>
</el-row>
</div>
</template>
@ -240,8 +248,7 @@ export default {
break;
}
});
this.calculateChart(this.threadGroups[i]);
this.calculateTotalChart(this.threadGroups[i]);
}
},
getLoadConfig() {

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

@ -14,21 +14,33 @@
</el-select>
</el-form-item>
</el-form>
<ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
</el-col>
</el-row>
<el-row>
<el-collapse v-model="activeNames">
<el-collapse-item :title="threadGroup.attributes.testname" :name="index"
v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
:key="index">
<el-col :span="10">
<el-col :span="10">
<el-collapse v-model="activeNames" accordion>
<el-collapse-item :name="index"
v-for="(threadGroup, index) in threadGroups.filter(th=>th.enabled === 'true' && th.deleted=='false')"
:key="index">
<template slot="title">
<div style="padding-right: 10px">
{{ threadGroup.attributes.testname }}
</div>
<el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'DURATION'">
{{ $t('load_test.thread_num') }}{{ threadGroup.threadNumber }},
{{ $t('load_test.duration') }}: {{ threadGroup.duration }} {{ getUnitLabel(threadGroup) }}
</el-tag>
<el-tag type="primary" size="mini" v-if="threadGroup.threadType === 'ITERATION'">
{{ $t('load_test.thread_num') }} {{ threadGroup.threadNumber }},
{{$t('load_test.iterate_num')}} {{threadGroup.iterateNum}}
</el-tag>
</template>
<el-form :inline="true">
<el-form-item :label="$t('load_test.thread_num')">
<el-input-number
:disabled="isReadOnly"
v-model="threadGroup.threadNumber"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
:min="resourcePoolResourceLength"
size="mini"/>
</el-form-item>
@ -47,7 +59,7 @@
v-model="threadGroup.duration"
:min="1"
:max="9999"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item>
@ -64,7 +76,7 @@
<el-input-number
:disabled="isReadOnly || !threadGroup.rpsLimitEnable"
v-model="threadGroup.rpsLimit"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
:min="1"
:max="99999"
size="mini"/>
@ -77,7 +89,7 @@
:min="1"
:max="threadGroup.duration"
v-model="threadGroup.rampUpTime"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_minutes', [getUnitLabel(threadGroup)])">
@ -86,7 +98,7 @@
:min="1"
:max="Math.min(threadGroup.threadNumber, threadGroup.rampUpTime)"
v-model="threadGroup.step"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_times')"/>
@ -98,7 +110,7 @@
:disabled="isReadOnly"
:min="1"
v-model="threadGroup.rampUpTime"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_seconds', [getUnitLabel(threadGroup)])"/>
@ -112,7 +124,7 @@
v-model="threadGroup.iterateNum"
:min="1"
:max="9999999"
@change="calculateChart(threadGroup)"
@change="calculateTotalChart(threadGroup)"
size="mini"/>
</el-form-item>
<br>
@ -137,13 +149,12 @@
<el-form-item :label="$t('load_test.ramp_up_time_seconds', [getUnitLabel(threadGroup)])"/>
</div>
</el-form>
</el-col>
<el-col :span="14">
<div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
<ms-chart class="chart-container" :options="threadGroup.options" :autoresize="true"></ms-chart>
</el-col>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</el-col>
<el-col :span="14">
<ms-chart class="chart-container" ref="chart1" :options="options" :autoresize="true"></ms-chart>
</el-col>
</el-row>
</div>
</template>
@ -303,8 +314,6 @@ export default {
this.$set(this.threadGroups[i], "enabled", this.threadGroups[i].enabled || 'true');
this.$set(this.threadGroups[i], "deleted", this.threadGroups[i].deleted || 'false');
})
this.calculateChart(this.threadGroups[i]);
}
this.calculateTotalChart();
}