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

@ -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,6 +79,7 @@
: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,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,24 +200,26 @@
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-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-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"
@ -227,6 +228,7 @@
:value="index">
</el-option>
</el-select>
</el-form-item>
</div>
<div v-else>
<el-table :data="threadGroup.resourceNodes" :max-height="200">
@ -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,9 +69,9 @@
</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
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-model="threadGroup.threadNumber"
@change="calculateTotalChart()"
@ -79,6 +79,7 @@
: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,13 +174,12 @@
@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
<el-input-number controls-position="right"
:disabled="isReadOnly"
v-model="threadGroup.iterateNum"
:min="1"
@ -190,10 +188,11 @@
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
</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"
@ -201,23 +200,26 @@
size="mini"/>
</el-form-item>
<br>
<el-form-item :label="$t('load_test.ramp_up_time_within')">
<el-input-number
<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-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-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"
@ -226,13 +228,14 @@
: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: '次增加並發用戶',