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

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

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