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

This commit is contained in:
CaptainB 2021-11-12 16:43:22 +08:00 committed by 刘瑞斌
parent d7b9c1b18d
commit 8ba1f74740
5 changed files with 144 additions and 115 deletions

View File

@ -6,11 +6,11 @@
<el-form-item :label="$t('load_test.select_resource_pool')">
<el-select v-model="resourcePool" :disabled="isReadOnly" size="mini" @change="resourcePoolChange">
<el-option
v-for="item in resourcePools"
:key="item.id"
:label="item.name"
:disabled="!item.performance"
:value="item.id">
v-for="item in resourcePools"
:key="item.id"
:label="item.name"
:disabled="!item.performance"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
@ -69,7 +69,7 @@
</el-col>
</el-row>
</template>
<el-form :inline="true">
<el-form :inline="true" label-width="100px">
<el-form-item :label="$t('load_test.thread_num')">
<el-input-number controls-position="right"
:disabled="isReadOnly"
@ -79,26 +79,26 @@
:max="maxThreadNumbers"
size="mini"/>
</el-form-item>
<br>
<el-form-item :label="$t('load_test.on_sample_error')">
<el-select v-model="threadGroup.onSampleError" :disabled="isReadOnly" size="mini">
<el-option
v-for="item in onSampleErrors"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in onSampleErrors"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<br>
<el-form-item>
<el-radio-group v-model="threadGroup.threadType" @change="calculateTotalChart()">
<el-radio label="DURATION">{{ $t('load_test.by_duration') }}</el-radio>
<el-radio label="ITERATION">{{ $t('load_test.by_iteration') }}</el-radio>
<el-form-item label="执行方式">
<el-radio-group v-model="threadGroup.threadType" @change="calculateTotalChart()" size="mini">
<el-radio-button label="DURATION">{{ $t('load_test.by_duration') }}</el-radio-button>
<el-radio-button label="ITERATION">{{ $t('load_test.by_iteration') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<br>
<div v-if="threadGroup.threadType === 'DURATION'">
<el-form-item>
<el-form-item :label="$t('load_test.duration')">
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-model="threadGroup.durationHours"
@ -107,7 +107,7 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('schedule.cron.hours')"/>
<el-form-item :label="$t('schedule.cron.hours')" label-width="40px"/>
<el-form-item>
<el-input-number controls-position="right"
:disabled="isReadOnly"
@ -117,7 +117,7 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('schedule.cron.minutes')"/>
<el-form-item :label="$t('schedule.cron.minutes')" label-width="40px"/>
<el-form-item>
<el-input-number controls-position="right"
:disabled="isReadOnly"
@ -127,11 +127,12 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('schedule.cron.seconds')"/>
<el-form-item :label="$t('schedule.cron.seconds')" label-width="20px"/>
<br>
<el-form-item :label="$t('load_test.rps_limit')">
<el-form-item :label="$t('load_test.rps_limit_enable')">
<el-switch v-model="threadGroup.rpsLimitEnable" @change="calculateTotalChart()"/>
&nbsp;
</el-form-item>
<el-form-item :label="$t('load_test.rps_limit')">
<el-input-number controls-position="right"
:disabled="isReadOnly || !threadGroup.rpsLimitEnable"
v-model="threadGroup.rpsLimit"
@ -140,9 +141,8 @@
:max="99999"
size="mini"/>
</el-form-item>
<br>
<div v-if="threadGroup.tgType === 'com.blazemeter.jmeter.threads.concurrency.ConcurrencyThreadGroup'">
<el-form-item :label="$t('load_test.ramp_up_time_within')">
<el-form-item label="Ramp-Up">
<el-input-number controls-position="right"
:disabled="isReadOnly"
:min="1"
@ -152,7 +152,7 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_minutes')">
<el-form-item label="Step" label-width="50px">
<el-input-number controls-position="right"
:disabled="isReadOnly"
:min="1"
@ -161,11 +161,10 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_times')"/>
</div>
<div v-if="threadGroup.tgType === 'ThreadGroup'">
<el-form-item :label="$t('load_test.ramp_up_time_within')">
<el-form-item label="Ramp-Up">
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-if="rampUpTimeVisible"
@ -175,7 +174,6 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_seconds')"/>
</div>
</div>
@ -190,9 +188,10 @@
size="mini"/>
</el-form-item>
<br>
<el-form-item :label="$t('load_test.rps_limit')">
<el-form-item :label="$t('load_test.rps_limit_enable')">
<el-switch v-model="threadGroup.rpsLimitEnable" @change="calculateTotalChart()"/>
&nbsp;
</el-form-item>
<el-form-item :label="$t('load_test.rps_limit')">
<el-input-number controls-position="right"
:disabled="isReadOnly || !threadGroup.rpsLimitEnable"
v-model="threadGroup.rpsLimit"
@ -201,32 +200,35 @@
size="mini"/>
</el-form-item>
<br>
<el-form-item :label="$t('load_test.ramp_up_time_within')">
<el-form-item label="Ramp-Up">
<el-input-number controls-position="right"
:disabled="isReadOnly"
:min="1"
v-model="threadGroup.iterateRampUp"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_seconds')"/>
</div>
<!-- 资源池自己配置各个节点的并发 -->
<div v-if="resourcePoolType === 'NODE'">
<el-radio-group v-model="threadGroup.strategy" :disabled="isReadOnly" style="padding-bottom: 10px;">
<el-radio label="auto">{{ $t('load_test.auto_ratio') }}</el-radio>
<el-radio label="specify">{{ $t('load_test.specify_resource') }}</el-radio>
<el-radio label="custom">{{ $t('load_test.custom_ratio') }}</el-radio>
</el-radio-group>
<el-form-item :label="$t('load_test.resource_strategy')">
<el-radio-group v-model="threadGroup.strategy" :disabled="isReadOnly" size="mini">
<el-radio-button label="auto">{{ $t('load_test.auto_ratio') }}</el-radio-button>
<el-radio-button label="specify">{{ $t('load_test.specify_resource') }}</el-radio-button>
<el-radio-button label="custom">{{ $t('load_test.custom_ratio') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-if="threadGroup.strategy === 'auto'"></div>
<div v-else-if="threadGroup.strategy === 'specify'">
<el-select v-model="threadGroup.resourceNodeIndex" :disabled="isReadOnly" size="mini">
<el-option
v-for="(node, index) in resourceNodes"
:key="node.ip"
:label="node.ip"
:value="index">
</el-option>
</el-select>
<el-form-item :label="$t('load_test.specify_resource')">
<el-select v-model="threadGroup.resourceNodeIndex" :disabled="isReadOnly" size="mini">
<el-option
v-for="(node, index) in resourceNodes"
:key="node.ip"
:label="node.ip"
:value="index">
</el-option>
</el-select>
</el-form-item>
</div>
<div v-else>
<el-table :data="threadGroup.resourceNodes" :max-height="200">
@ -287,7 +289,7 @@ const RATIOS = "ratios";
const hexToRgb = function (hex) {
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 {
@ -570,8 +572,8 @@ export default {
let tg = handler.threadGroups[i];
if (tg.enabled === 'false' ||
tg.deleted === 'true' ||
tg.threadType === 'ITERATION') {
tg.deleted === 'true' ||
tg.threadType === 'ITERATION') {
continue;
}
if (this.getDuration(tg) < tg.rampUpTime) {
@ -686,7 +688,7 @@ export default {
}
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.$emit('changeActive', '1');
return false;
@ -806,4 +808,12 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.duration-input .el-input-number--mini {
width: 100px;
}
.el-select--mini {
width: 130px;
}
</style>

View File

@ -69,16 +69,17 @@
</el-col>
</el-row>
</template>
<el-form :inline="true">
<el-form :inline="true" label-width="100px">
<el-form-item :label="$t('load_test.thread_num')">
<el-input-number
:disabled="isReadOnly"
v-model="threadGroup.threadNumber"
@change="calculateTotalChart()"
:min="1"
:max="maxThreadNumbers"
size="mini"/>
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-model="threadGroup.threadNumber"
@change="calculateTotalChart()"
:min="1"
:max="maxThreadNumbers"
size="mini"/>
</el-form-item>
<br>
<el-form-item :label="$t('load_test.on_sample_error')">
<el-select v-model="threadGroup.onSampleError" :disabled="isReadOnly" size="mini">
<el-option
@ -90,15 +91,14 @@
</el-select>
</el-form-item>
<br>
<el-form-item>
<el-radio-group v-model="threadGroup.threadType" @change="calculateTotalChart()">
<el-radio label="DURATION">{{ $t('load_test.by_duration') }}</el-radio>
<el-radio label="ITERATION">{{ $t('load_test.by_iteration') }}</el-radio>
<el-form-item label="执行方式">
<el-radio-group v-model="threadGroup.threadType" @change="calculateTotalChart()" size="mini">
<el-radio-button label="DURATION">{{ $t('load_test.by_duration') }}</el-radio-button>
<el-radio-button label="ITERATION">{{ $t('load_test.by_iteration') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<br>
<div v-if="threadGroup.threadType === 'DURATION'">
<el-form-item>
<el-form-item :label="$t('load_test.duration')">
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-model="threadGroup.durationHours"
@ -107,7 +107,7 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('schedule.cron.hours')"/>
<el-form-item :label="$t('schedule.cron.hours')" label-width="40px"/>
<el-form-item>
<el-input-number controls-position="right"
:disabled="isReadOnly"
@ -117,7 +117,7 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('schedule.cron.minutes')"/>
<el-form-item :label="$t('schedule.cron.minutes')" label-width="40px"/>
<el-form-item>
<el-input-number controls-position="right"
:disabled="isReadOnly"
@ -127,11 +127,12 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('schedule.cron.seconds')"/>
<el-form-item :label="$t('schedule.cron.seconds')" label-width="20px"/>
<br>
<el-form-item :label="$t('load_test.rps_limit')">
<el-form-item :label="$t('load_test.rps_limit_enable')">
<el-switch v-model="threadGroup.rpsLimitEnable" @change="calculateTotalChart()"/>
&nbsp;
</el-form-item>
<el-form-item :label="$t('load_test.rps_limit')">
<el-input-number controls-position="right"
:disabled="isReadOnly || !threadGroup.rpsLimitEnable"
v-model="threadGroup.rpsLimit"
@ -140,9 +141,8 @@
:max="99999"
size="mini"/>
</el-form-item>
<br>
<div v-if="threadGroup.tgType === 'com.blazemeter.jmeter.threads.concurrency.ConcurrencyThreadGroup'">
<el-form-item :label="$t('load_test.ramp_up_time_within')">
<el-form-item label="Ramp-Up">
<el-input-number controls-position="right"
:disabled="isReadOnly"
:min="1"
@ -152,7 +152,7 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_minutes')">
<el-form-item label="Step" label-width="50px">
<el-input-number controls-position="right"
:disabled="isReadOnly"
:min="1"
@ -161,11 +161,10 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_times')"/>
</div>
<div v-if="threadGroup.tgType === 'ThreadGroup'">
<el-form-item :label="$t('load_test.ramp_up_time_within')">
<el-form-item label="Ramp-Up">
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-if="rampUpTimeVisible"
@ -175,64 +174,68 @@
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_seconds')"/>
</div>
</div>
<div v-if="threadGroup.threadType === 'ITERATION'">
<el-form-item :label="$t('load_test.iterate_num')">
<el-input-number
:disabled="isReadOnly"
v-model="threadGroup.iterateNum"
:min="1"
:max="9999999"
@change="calculateTotalChart()"
size="mini"/>
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-model="threadGroup.iterateNum"
:min="1"
:max="9999999"
@change="calculateTotalChart()"
size="mini"/>
</el-form-item>
<br>
<el-form-item :label="$t('load_test.rps_limit')">
<el-form-item :label="$t('load_test.rps_limit_enable')">
<el-switch v-model="threadGroup.rpsLimitEnable" @change="calculateTotalChart()"/>
&nbsp;
<el-input-number
:disabled="isReadOnly || !threadGroup.rpsLimitEnable"
v-model="threadGroup.rpsLimit"
:min="1"
:max="99999"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.rps_limit')">
<el-input-number controls-position="right"
:disabled="isReadOnly || !threadGroup.rpsLimitEnable"
v-model="threadGroup.rpsLimit"
:min="1"
:max="99999"
size="mini"/>
</el-form-item>
<br>
<el-form-item :label="$t('load_test.ramp_up_time_within')">
<el-input-number
:disabled="isReadOnly"
:min="1"
v-model="threadGroup.iterateRampUp"
size="mini"/>
<el-form-item label="Ramp-Up">
<el-input-number controls-position="right"
:disabled="isReadOnly"
:min="1"
v-model="threadGroup.iterateRampUp"
size="mini"/>
</el-form-item>
<el-form-item :label="$t('load_test.ramp_up_time_seconds')"/>
</div>
<!-- 资源池自己配置各个节点的并发 -->
<div v-if="resourcePoolType === 'NODE'">
<el-radio-group v-model="threadGroup.strategy" :disabled="isReadOnly" style="padding-bottom: 10px;">
<el-radio label="auto">自动分配</el-radio>
<el-radio label="specify">固定节点</el-radio>
<el-radio label="custom">自定义</el-radio>
</el-radio-group>
<el-form-item :label="$t('load_test.resource_strategy')">
<el-radio-group v-model="threadGroup.strategy" :disabled="isReadOnly" size="mini">
<el-radio-button label="auto">{{ $t('load_test.auto_ratio') }}</el-radio-button>
<el-radio-button label="specify">{{ $t('load_test.specify_resource') }}</el-radio-button>
<el-radio-button label="custom">{{ $t('load_test.custom_ratio') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-if="threadGroup.strategy === 'auto'"></div>
<div v-else-if="threadGroup.strategy === 'specify'">
<el-select v-model="threadGroup.resourceNodeIndex" :disabled="isReadOnly" size="mini">
<el-option
v-for="(node, index) in resourceNodes"
:key="node.ip"
:label="node.ip"
:value="index">
</el-option>
</el-select>
<el-form-item :label="$t('load_test.specify_resource')">
<el-select v-model="threadGroup.resourceNodeIndex" :disabled="isReadOnly" size="mini">
<el-option
v-for="(node, index) in resourceNodes"
:key="node.ip"
:label="node.ip"
:value="index">
</el-option>
</el-select>
</el-form-item>
</div>
<div v-else>
<el-table :data="threadGroup.resourceNodes" :max-height="200">
<el-table-column type="index" width="50"/>
<el-table-column prop="ip" label="IP"/>
<el-table-column prop="maxConcurrency" :label="$t('test_resource_pool.max_threads')"/>
<el-table-column prop="ratio" label="占比">
<el-table-column prop="ratio" :label="$t('test_track.home.percentage')">
<template v-slot:default="{row}">
<el-input-number size="small" v-model="row.ratio" :min="0" :step=".1"
:max="1"></el-input-number>
@ -806,4 +809,13 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.duration-input .el-input-number--mini {
width: 100px;
}
.el-select--mini {
width: 130px;
}
</style>

View File

@ -792,12 +792,14 @@ export default {
duration: 'Duration time',
granularity: 'Aggregation time (seconds)',
input_duration: 'Please enter a duration',
rps_limit: 'RPS Limit:',
rps_limit: 'RPS Limit',
rps_limit_enable: 'RPS Value',
resource_strategy: 'Allocation Strategy',
input_rps_limit: 'Please enter a limit',
ramp_up_time_within: 'In',
ramp_up_time_minutes: 'seconds, separate',
ramp_up_time_seconds: 'seconds add concurrent users',
iterate_num: 'Iterations: ',
iterate_num: 'Iterations',
by_iteration: 'By iterations',
by_duration: 'By duration',
ramp_up_time_times: 'add concurrent users',

View File

@ -796,12 +796,15 @@ export default {
duration: '压测时长',
granularity: '聚合时间(秒)',
input_duration: '请输入时长',
rps_limit: 'RPS上限',
rps_limit: 'RPS上限',
rps_limit_enable: 'RPS开启',
resource_strategy: '分配策略',
input_rps_limit: '请输入限制',
ramp_up_time: '预热时间',
ramp_up_time_within: '在',
ramp_up_time_minutes: '秒内,分',
ramp_up_time_seconds: '秒内增加并发用户',
iterate_num: '迭代次数 (次): ',
iterate_num: '迭代次数',
by_iteration: '按迭代次数',
by_duration: '按持续时间',
ramp_up_time_times: '次增加并发用户',

View File

@ -795,12 +795,14 @@ export default {
duration: '壓測時長',
granularity: '聚合時間(秒)',
input_duration: '請輸入時長',
rps_limit: 'RPS上限',
rps_limit: 'RPS上限',
rps_limit_enable: 'RPS開啟',
resource_strategy: '分配策略',
input_rps_limit: '請輸入限製',
ramp_up_time_within: '在',
ramp_up_time_minutes: '秒內,分',
ramp_up_time_seconds: '秒內增加並發用戶',
iterate_num: '叠代次數 (次): ',
iterate_num: '叠代次數',
by_iteration: '按叠代次數',
by_duration: '按持續時間',
ramp_up_time_times: '次增加並發用戶',