style: 格式化vue代码
This commit is contained in:
Captain.B
parent
abd9bad78b
commit
ea9378c81d
|
|
@ -22,11 +22,12 @@
|
|||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="2">
|
||||
<el-button :disabled="isReadOnly" type="primary" plain @click="save">{{$t('commons.save')}}</el-button>
|
||||
<el-button :disabled="isReadOnly" type="primary" plain @click="save">{{ $t('commons.save') }}</el-button>
|
||||
<el-button :disabled="isReadOnly" type="primary" plain @click="saveAndRun">
|
||||
{{$t('load_test.save_and_run')}}
|
||||
{{ $t('load_test.save_and_run') }}
|
||||
</el-button>
|
||||
<el-button :disabled="isReadOnly" type="warning" plain @click="cancel">{{ $t('commons.cancel') }}
|
||||
</el-button>
|
||||
<el-button :disabled="isReadOnly" type="warning" plain @click="cancel">{{$t('commons.cancel')}}</el-button>
|
||||
|
||||
<ms-schedule-config :schedule="testPlan.schedule" :save="saveCronExpression" @scheduleChange="saveSchedule"
|
||||
:check-open="checkScheduleEdit" :custom-validate="durationValidate"/>
|
||||
|
|
@ -52,272 +53,272 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import PerformanceBasicConfig from "./components/PerformanceBasicConfig";
|
||||
import PerformancePressureConfig from "./components/PerformancePressureConfig";
|
||||
import PerformanceAdvancedConfig from "./components/PerformanceAdvancedConfig";
|
||||
import MsContainer from "../../common/components/MsContainer";
|
||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||
import {checkoutTestManagerOrTestUser} from "../../../../common/js/utils";
|
||||
import MsScheduleConfig from "../../common/components/MsScheduleConfig";
|
||||
import PerformanceBasicConfig from "./components/PerformanceBasicConfig";
|
||||
import PerformancePressureConfig from "./components/PerformancePressureConfig";
|
||||
import PerformanceAdvancedConfig from "./components/PerformanceAdvancedConfig";
|
||||
import MsContainer from "../../common/components/MsContainer";
|
||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||
import {checkoutTestManagerOrTestUser} from "../../../../common/js/utils";
|
||||
import MsScheduleConfig from "../../common/components/MsScheduleConfig";
|
||||
|
||||
export default {
|
||||
name: "EditPerformanceTestPlan",
|
||||
components: {
|
||||
MsScheduleConfig,
|
||||
PerformancePressureConfig,
|
||||
PerformanceBasicConfig,
|
||||
PerformanceAdvancedConfig,
|
||||
MsContainer,
|
||||
MsMainContainer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
testPlan: {schedule: {}},
|
||||
listProjectPath: "/project/listAll",
|
||||
savePath: "/performance/save",
|
||||
editPath: "/performance/edit",
|
||||
runPath: "/performance/run",
|
||||
projects: [],
|
||||
active: '0',
|
||||
testId: '',
|
||||
isReadOnly: false,
|
||||
tabs: [{
|
||||
title: this.$t('load_test.basic_config'),
|
||||
id: '0',
|
||||
component: 'PerformanceBasicConfig'
|
||||
}, {
|
||||
title: this.$t('load_test.pressure_config'),
|
||||
id: '1',
|
||||
component: 'PerformancePressureConfig'
|
||||
}, {
|
||||
title: this.$t('load_test.advanced_config'),
|
||||
id: '2',
|
||||
component: 'PerformanceAdvancedConfig'
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'(to) {
|
||||
// 如果是创建测试
|
||||
if (to.name === 'createPerTest') {
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
|
||||
if (to.name !== 'editPerTest') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isReadOnly = false;
|
||||
if (!checkoutTestManagerOrTestUser()) {
|
||||
this.isReadOnly = true;
|
||||
}
|
||||
this.getTest(to.params.testId);
|
||||
export default {
|
||||
name: "EditPerformanceTestPlan",
|
||||
components: {
|
||||
MsScheduleConfig,
|
||||
PerformancePressureConfig,
|
||||
PerformanceBasicConfig,
|
||||
PerformanceAdvancedConfig,
|
||||
MsContainer,
|
||||
MsMainContainer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
testPlan: {schedule: {}},
|
||||
listProjectPath: "/project/listAll",
|
||||
savePath: "/performance/save",
|
||||
editPath: "/performance/edit",
|
||||
runPath: "/performance/run",
|
||||
projects: [],
|
||||
active: '0',
|
||||
testId: '',
|
||||
isReadOnly: false,
|
||||
tabs: [{
|
||||
title: this.$t('load_test.basic_config'),
|
||||
id: '0',
|
||||
component: 'PerformanceBasicConfig'
|
||||
}, {
|
||||
title: this.$t('load_test.pressure_config'),
|
||||
id: '1',
|
||||
component: 'PerformancePressureConfig'
|
||||
}, {
|
||||
title: this.$t('load_test.advanced_config'),
|
||||
id: '2',
|
||||
component: 'PerformanceAdvancedConfig'
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'(to) {
|
||||
// 如果是创建测试
|
||||
if (to.name === 'createPerTest') {
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
|
||||
if (to.name !== 'editPerTest') {
|
||||
return;
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
this.isReadOnly = false;
|
||||
if (!checkoutTestManagerOrTestUser()) {
|
||||
this.isReadOnly = true;
|
||||
}
|
||||
this.getTest(this.$route.params.testId);
|
||||
this.listProjects();
|
||||
this.getTest(to.params.testId);
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
this.isReadOnly = false;
|
||||
if (!checkoutTestManagerOrTestUser()) {
|
||||
this.isReadOnly = true;
|
||||
}
|
||||
this.getTest(this.$route.params.testId);
|
||||
this.listProjects();
|
||||
},
|
||||
mounted() {
|
||||
this.importAPITest();
|
||||
},
|
||||
methods: {
|
||||
importAPITest() {
|
||||
let apiTest = this.$store.state.api.test;
|
||||
if (apiTest && apiTest.name) {
|
||||
this.$set(this.testPlan, "projectId", apiTest.projectId);
|
||||
this.$set(this.testPlan, "name", apiTest.name);
|
||||
let blob = new Blob([apiTest.jmx.xml], {type: "application/octet-stream"});
|
||||
let file = new File([blob], apiTest.jmx.name);
|
||||
this.$refs.basicConfig.beforeUpload(file);
|
||||
this.$refs.basicConfig.handleUpload({file: file});
|
||||
this.active = '1';
|
||||
this.$store.commit("clearTest");
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.importAPITest();
|
||||
},
|
||||
methods: {
|
||||
importAPITest() {
|
||||
let apiTest = this.$store.state.api.test;
|
||||
if (apiTest && apiTest.name) {
|
||||
this.$set(this.testPlan, "projectId", apiTest.projectId);
|
||||
this.$set(this.testPlan, "name", apiTest.name);
|
||||
let blob = new Blob([apiTest.jmx.xml], {type: "application/octet-stream"});
|
||||
let file = new File([blob], apiTest.jmx.name);
|
||||
this.$refs.basicConfig.beforeUpload(file);
|
||||
this.$refs.basicConfig.handleUpload({file: file});
|
||||
this.active = '1';
|
||||
this.$store.commit("clearTest");
|
||||
}
|
||||
},
|
||||
getTest(testId) {
|
||||
if (testId) {
|
||||
this.testId = testId;
|
||||
this.result = this.$get('/performance/get/' + testId, response => {
|
||||
if (response.data) {
|
||||
this.testPlan = response.data;
|
||||
if (!this.testPlan.schedule) {
|
||||
this.testPlan.schedule = {};
|
||||
}
|
||||
getTest(testId) {
|
||||
if (testId) {
|
||||
this.testId = testId;
|
||||
this.result = this.$get('/performance/get/' + testId, response => {
|
||||
if (response.data) {
|
||||
this.testPlan = response.data;
|
||||
if (!this.testPlan.schedule) {
|
||||
this.testPlan.schedule = {};
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
listProjects() {
|
||||
this.result = this.$get(this.listProjectPath, response => {
|
||||
this.projects = response.data;
|
||||
})
|
||||
},
|
||||
save() {
|
||||
if (!this.validTestPlan()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let options = this.getSaveOption();
|
||||
|
||||
this.result = this.$request(options, () => {
|
||||
this.$success(this.$t('commons.save_success'));
|
||||
this.$refs.advancedConfig.cancelAllEdit();
|
||||
this.$router.push({path: '/performance/test/all'})
|
||||
});
|
||||
},
|
||||
saveAndRun() {
|
||||
if (!this.validTestPlan()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let options = this.getSaveOption();
|
||||
|
||||
this.result = this.$request(options, (response) => {
|
||||
this.testPlan.id = response.data;
|
||||
this.$success(this.$t('commons.save_success'));
|
||||
this.result = this.$post(this.runPath, {id: this.testPlan.id, triggerMode: 'MANUAL'}, (response) => {
|
||||
let reportId = response.data;
|
||||
this.$router.push({path: '/performance/report/view/' + reportId})
|
||||
})
|
||||
});
|
||||
},
|
||||
getSaveOption() {
|
||||
let formData = new FormData();
|
||||
let url = this.testPlan.id ? this.editPath : this.savePath;
|
||||
|
||||
if (this.$refs.basicConfig.uploadList.length > 0) {
|
||||
this.$refs.basicConfig.uploadList.forEach(f => {
|
||||
formData.append("file", f);
|
||||
});
|
||||
}
|
||||
// 基本配置
|
||||
this.testPlan.updatedFileList = this.$refs.basicConfig.updatedFileList();
|
||||
// 压力配置
|
||||
this.testPlan.loadConfiguration = JSON.stringify(this.$refs.pressureConfig.convertProperty());
|
||||
this.testPlan.testResourcePoolId = this.$refs.pressureConfig.resourcePool;
|
||||
// 高级配置
|
||||
this.testPlan.advancedConfiguration = JSON.stringify(this.$refs.advancedConfig.configurations());
|
||||
|
||||
// file属性不需要json化
|
||||
let requestJson = JSON.stringify(this.testPlan, function (key, value) {
|
||||
return key === "file" ? undefined : value
|
||||
});
|
||||
|
||||
formData.append('request', new Blob([requestJson], {
|
||||
type: "application/json"
|
||||
}));
|
||||
|
||||
return {
|
||||
method: 'POST',
|
||||
url: url,
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
cancel() {
|
||||
});
|
||||
}
|
||||
},
|
||||
listProjects() {
|
||||
this.result = this.$get(this.listProjectPath, response => {
|
||||
this.projects = response.data;
|
||||
})
|
||||
},
|
||||
save() {
|
||||
if (!this.validTestPlan()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let options = this.getSaveOption();
|
||||
|
||||
this.result = this.$request(options, () => {
|
||||
this.$success(this.$t('commons.save_success'));
|
||||
this.$refs.advancedConfig.cancelAllEdit();
|
||||
this.$router.push({path: '/performance/test/all'})
|
||||
},
|
||||
validTestPlan() {
|
||||
if (!this.testPlan.name) {
|
||||
this.$error(this.$t('load_test.test_name_is_null'));
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
saveAndRun() {
|
||||
if (!this.validTestPlan()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.testPlan.projectId) {
|
||||
this.$error(this.$t('load_test.project_is_null'));
|
||||
return false;
|
||||
}
|
||||
let options = this.getSaveOption();
|
||||
|
||||
if (!this.$refs.basicConfig.validConfig()) {
|
||||
return false;
|
||||
}
|
||||
this.result = this.$request(options, (response) => {
|
||||
this.testPlan.id = response.data;
|
||||
this.$success(this.$t('commons.save_success'));
|
||||
this.result = this.$post(this.runPath, {id: this.testPlan.id, triggerMode: 'MANUAL'}, (response) => {
|
||||
let reportId = response.data;
|
||||
this.$router.push({path: '/performance/report/view/' + reportId})
|
||||
})
|
||||
});
|
||||
},
|
||||
getSaveOption() {
|
||||
let formData = new FormData();
|
||||
let url = this.testPlan.id ? this.editPath : this.savePath;
|
||||
|
||||
if (!this.$refs.pressureConfig.validConfig()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.$refs.advancedConfig.validConfig()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
/// todo: 其他校验
|
||||
|
||||
return true;
|
||||
},
|
||||
changeTabActive(activeName) {
|
||||
this.$nextTick(() => {
|
||||
this.active = activeName;
|
||||
if (this.$refs.basicConfig.uploadList.length > 0) {
|
||||
this.$refs.basicConfig.uploadList.forEach(f => {
|
||||
formData.append("file", f);
|
||||
});
|
||||
},
|
||||
saveCronExpression(cronExpression) {
|
||||
this.testPlan.schedule.enable = true;
|
||||
this.testPlan.schedule.value = cronExpression;
|
||||
this.saveSchedule();
|
||||
},
|
||||
saveSchedule() {
|
||||
this.checkScheduleEdit();
|
||||
let param = {};
|
||||
param = this.testPlan.schedule;
|
||||
param.resourceId = this.testPlan.id;
|
||||
let url = '/performance/schedule/create';
|
||||
if (param.id) {
|
||||
url = '/performance/schedule/update';
|
||||
}
|
||||
this.$post(url, param, response => {
|
||||
this.$success(this.$t('commons.save_success'));
|
||||
this.getTest(this.testPlan.id);
|
||||
});
|
||||
},
|
||||
checkScheduleEdit() {
|
||||
if (!this.testPlan.id) {
|
||||
this.$message(this.$t('api_test.environment.please_save_test'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
durationValidate(intervalTime) {
|
||||
let duration = this.$refs.pressureConfig.duration * 60 * 1000;
|
||||
if (intervalTime < duration) {
|
||||
return {
|
||||
pass: false,
|
||||
info: this.$t('load_test.schedule_tip')
|
||||
}
|
||||
}
|
||||
// 基本配置
|
||||
this.testPlan.updatedFileList = this.$refs.basicConfig.updatedFileList();
|
||||
// 压力配置
|
||||
this.testPlan.loadConfiguration = JSON.stringify(this.$refs.pressureConfig.convertProperty());
|
||||
this.testPlan.testResourcePoolId = this.$refs.pressureConfig.resourcePool;
|
||||
// 高级配置
|
||||
this.testPlan.advancedConfiguration = JSON.stringify(this.$refs.advancedConfig.configurations());
|
||||
|
||||
// file属性不需要json化
|
||||
let requestJson = JSON.stringify(this.testPlan, function (key, value) {
|
||||
return key === "file" ? undefined : value
|
||||
});
|
||||
|
||||
formData.append('request', new Blob([requestJson], {
|
||||
type: "application/json"
|
||||
}));
|
||||
|
||||
return {
|
||||
method: 'POST',
|
||||
url: url,
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
cancel() {
|
||||
this.$router.push({path: '/performance/test/all'})
|
||||
},
|
||||
validTestPlan() {
|
||||
if (!this.testPlan.name) {
|
||||
this.$error(this.$t('load_test.test_name_is_null'));
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.testPlan.projectId) {
|
||||
this.$error(this.$t('load_test.project_is_null'));
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.$refs.basicConfig.validConfig()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.$refs.pressureConfig.validConfig()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.$refs.advancedConfig.validConfig()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
/// todo: 其他校验
|
||||
|
||||
return true;
|
||||
},
|
||||
changeTabActive(activeName) {
|
||||
this.$nextTick(() => {
|
||||
this.active = activeName;
|
||||
});
|
||||
},
|
||||
saveCronExpression(cronExpression) {
|
||||
this.testPlan.schedule.enable = true;
|
||||
this.testPlan.schedule.value = cronExpression;
|
||||
this.saveSchedule();
|
||||
},
|
||||
saveSchedule() {
|
||||
this.checkScheduleEdit();
|
||||
let param = {};
|
||||
param = this.testPlan.schedule;
|
||||
param.resourceId = this.testPlan.id;
|
||||
let url = '/performance/schedule/create';
|
||||
if (param.id) {
|
||||
url = '/performance/schedule/update';
|
||||
}
|
||||
this.$post(url, param, response => {
|
||||
this.$success(this.$t('commons.save_success'));
|
||||
this.getTest(this.testPlan.id);
|
||||
});
|
||||
},
|
||||
checkScheduleEdit() {
|
||||
if (!this.testPlan.id) {
|
||||
this.$message(this.$t('api_test.environment.please_save_test'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
durationValidate(intervalTime) {
|
||||
let duration = this.$refs.pressureConfig.duration * 60 * 1000;
|
||||
if (intervalTime < duration) {
|
||||
return {
|
||||
pass: true
|
||||
pass: false,
|
||||
info: this.$t('load_test.schedule_tip')
|
||||
}
|
||||
}
|
||||
return {
|
||||
pass: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.testplan-config {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.testplan-config {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 130px;
|
||||
}
|
||||
.el-select {
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.edit-testplan-container .input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
.edit-testplan-container .input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.advanced-config {
|
||||
height: calc(100vh - 280px);
|
||||
overflow: auto;
|
||||
}
|
||||
.advanced-config {
|
||||
height: calc(100vh - 280px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</el-tag>
|
||||
<el-tooltip placement="top" v-else-if="row.status === 'Error'" effect="light">
|
||||
<template v-slot:content>
|
||||
<div>{{row.description}}</div>
|
||||
<div>{{ row.description }}</div>
|
||||
</template>
|
||||
<el-tag size="mini" type="danger">
|
||||
{{ row.status }}
|
||||
|
|
@ -30,13 +30,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MsPerformanceTestStatus",
|
||||
export default {
|
||||
name: "MsPerformanceTestStatus",
|
||||
|
||||
props: {
|
||||
row: Object
|
||||
}
|
||||
props: {
|
||||
row: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
<div>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<h3>{{$t('load_test.params')}}</h3>
|
||||
<el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini" @click="add('params')">{{$t('commons.add')}}
|
||||
<h3>{{ $t('load_test.params') }}</h3>
|
||||
<el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini" @click="add('params')">
|
||||
{{ $t('commons.add') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -26,7 +27,7 @@
|
|||
:placeholder="$t('load_test.param_name')"
|
||||
clearable>
|
||||
</el-input>
|
||||
<span>{{row.name}}</span>
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -60,12 +61,13 @@
|
|||
v-model="row.value"
|
||||
:placeholder="$t('load_test.param_value')"
|
||||
clearable></el-input>
|
||||
<span>{{row.value}}</span>
|
||||
<span>{{ row.value }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('load_test.operating')">
|
||||
<template v-slot:default="{row, $index}">
|
||||
<ms-table-operator-button :disabled="readOnly" :tip="$t('commons.delete')" icon="el-icon-delete" type="danger"
|
||||
<ms-table-operator-button :disabled="readOnly" :tip="$t('commons.delete')" icon="el-icon-delete"
|
||||
type="danger"
|
||||
@exec="del(row, 'params', $index)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -77,10 +79,11 @@
|
|||
<el-col :span="8">
|
||||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.connect_timeout')}}</div>
|
||||
<div>{{ $t('load_test.connect_timeout') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input-number :disabled="readOnly" size="mini" v-model="timeout" :min="10" :max="100000"></el-input-number>
|
||||
<el-input-number :disabled="readOnly" size="mini" v-model="timeout" :min="10"
|
||||
:max="100000"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
ms
|
||||
|
|
@ -92,10 +95,11 @@
|
|||
<el-col :span="8">
|
||||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.custom_http_code')}}</div>
|
||||
<div>{{ $t('load_test.custom_http_code') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input :disabled="readOnly" size="mini" v-model="statusCodeStr" :placeholder="$t('load_test.separated_by_commas')"
|
||||
<el-input :disabled="readOnly" size="mini" v-model="statusCodeStr"
|
||||
:placeholder="$t('load_test.separated_by_commas')"
|
||||
@input="checkStatusCode"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -105,169 +109,169 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
|
||||
import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
|
||||
|
||||
export default {
|
||||
name: "PerformanceAdvancedConfig",
|
||||
components: {MsTableOperatorButton},
|
||||
data() {
|
||||
return {
|
||||
timeout: 2000,
|
||||
statusCode: [],
|
||||
domains: [],
|
||||
params: [],
|
||||
statusCodeStr: '',
|
||||
}
|
||||
export default {
|
||||
name: "PerformanceAdvancedConfig",
|
||||
components: {MsTableOperatorButton},
|
||||
data() {
|
||||
return {
|
||||
timeout: 2000,
|
||||
statusCode: [],
|
||||
domains: [],
|
||||
params: [],
|
||||
statusCodeStr: '',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
props: {
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
testId: String,
|
||||
},
|
||||
mounted() {
|
||||
testId: String,
|
||||
},
|
||||
mounted() {
|
||||
if (this.testId) {
|
||||
this.getAdvancedConfig();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
testId() {
|
||||
if (this.testId) {
|
||||
this.getAdvancedConfig();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
testId () {
|
||||
if (this.testId) {
|
||||
this.getAdvancedConfig();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAdvancedConfig() {
|
||||
this.$get('/performance/get-advanced-config/' + this.testId, (response) => {
|
||||
if (response.data) {
|
||||
let data = JSON.parse(response.data);
|
||||
this.timeout = data.timeout || 10;
|
||||
this.statusCode = data.statusCode || [];
|
||||
this.statusCodeStr = this.statusCode.join(',');
|
||||
this.domains = data.domains || [];
|
||||
this.params = data.params || [];
|
||||
/*this.domains.forEach(d => d.edit = false);
|
||||
this.params.forEach(d => d.edit = false);*/
|
||||
}
|
||||
});
|
||||
},
|
||||
add(dataName) {
|
||||
if (dataName === 'domains') {
|
||||
this[dataName].push({
|
||||
domain: 'fit2cloud.com',
|
||||
enable: true,
|
||||
ip: '127.0.0.1',
|
||||
edit: true,
|
||||
});
|
||||
}
|
||||
if (dataName === 'params') {
|
||||
this[dataName].push({
|
||||
name: 'param1',
|
||||
enable: true,
|
||||
value: '0',
|
||||
edit: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAdvancedConfig() {
|
||||
this.$get('/performance/get-advanced-config/' + this.testId, (response) => {
|
||||
if (response.data) {
|
||||
let data = JSON.parse(response.data);
|
||||
this.timeout = data.timeout || 10;
|
||||
this.statusCode = data.statusCode || [];
|
||||
this.statusCodeStr = this.statusCode.join(',');
|
||||
this.domains = data.domains || [];
|
||||
this.params = data.params || [];
|
||||
/*this.domains.forEach(d => d.edit = false);
|
||||
this.params.forEach(d => d.edit = false);*/
|
||||
}
|
||||
});
|
||||
},
|
||||
add(dataName) {
|
||||
if (dataName === 'domains') {
|
||||
this[dataName].push({
|
||||
domain: 'fit2cloud.com',
|
||||
enable: true,
|
||||
ip: '127.0.0.1',
|
||||
edit: true,
|
||||
});
|
||||
edit(row) {
|
||||
row.edit = !row.edit
|
||||
},
|
||||
del(row, dataName, index) {
|
||||
this[dataName].splice(index, 1);
|
||||
},
|
||||
confirmEdit(row) {
|
||||
row.edit = false;
|
||||
row.enable = true;
|
||||
},
|
||||
groupBy(data, key) {
|
||||
return data.reduce((p, c) => {
|
||||
let name = c[key];
|
||||
if (!p.hasOwnProperty(name)) {
|
||||
p[name] = 0;
|
||||
}
|
||||
if (dataName === 'params') {
|
||||
this[dataName].push({
|
||||
name: 'param1',
|
||||
enable: true,
|
||||
value: '0',
|
||||
edit: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
edit(row) {
|
||||
row.edit = !row.edit
|
||||
},
|
||||
del(row, dataName, index) {
|
||||
this[dataName].splice(index, 1);
|
||||
},
|
||||
confirmEdit(row) {
|
||||
row.edit = false;
|
||||
row.enable = true;
|
||||
},
|
||||
groupBy(data, key) {
|
||||
return data.reduce((p, c) => {
|
||||
let name = c[key];
|
||||
if (!p.hasOwnProperty(name)) {
|
||||
p[name] = 0;
|
||||
}
|
||||
p[name]++;
|
||||
return p;
|
||||
}, {});
|
||||
},
|
||||
validConfig() {
|
||||
let counts = this.groupBy(this.domains, 'domain');
|
||||
for (let c in counts) {
|
||||
if (counts[c] > 1) {
|
||||
this.$error(this.$t('load_test.domain_is_duplicate'));
|
||||
return false;
|
||||
}
|
||||
}
|
||||
counts = this.groupBy(this.params, 'name');
|
||||
for (let c in counts) {
|
||||
if (counts[c] > 1) {
|
||||
this.$error(this.$t('load_test.param_is_duplicate'));
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (this.domains.filter(d => !d.domain || !d.ip).length > 0) {
|
||||
this.$error(this.$t('load_test.domain_ip_is_empty'));
|
||||
p[name]++;
|
||||
return p;
|
||||
}, {});
|
||||
},
|
||||
validConfig() {
|
||||
let counts = this.groupBy(this.domains, 'domain');
|
||||
for (let c in counts) {
|
||||
if (counts[c] > 1) {
|
||||
this.$error(this.$t('load_test.domain_is_duplicate'));
|
||||
return false;
|
||||
}
|
||||
if (this.params.filter(d => !d.name || !d.value).length > 0) {
|
||||
this.$error(this.$t('load_test.param_name_value_is_empty'));
|
||||
}
|
||||
counts = this.groupBy(this.params, 'name');
|
||||
for (let c in counts) {
|
||||
if (counts[c] > 1) {
|
||||
this.$error(this.$t('load_test.param_is_duplicate'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
checkStatusCode() {
|
||||
let license_num = this.statusCodeStr;
|
||||
license_num = license_num.replace(/[^\d,]/g, ''); // 清除“数字”和“.”以外的字符
|
||||
this.statusCodeStr = license_num;
|
||||
},
|
||||
cancelAllEdit() {
|
||||
this.domains.forEach(d => d.edit = false);
|
||||
this.params.forEach(d => d.edit = false);
|
||||
},
|
||||
configurations() {
|
||||
let statusCode = [];
|
||||
if (this.statusCodeStr) {
|
||||
statusCode = this.statusCodeStr.split(',');
|
||||
}
|
||||
return {
|
||||
timeout: this.timeout,
|
||||
statusCode: statusCode,
|
||||
params: this.params,
|
||||
domains: this.domains,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
if (this.domains.filter(d => !d.domain || !d.ip).length > 0) {
|
||||
this.$error(this.$t('load_test.domain_ip_is_empty'));
|
||||
return false;
|
||||
}
|
||||
if (this.params.filter(d => !d.name || !d.value).length > 0) {
|
||||
this.$error(this.$t('load_test.param_name_value_is_empty'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
checkStatusCode() {
|
||||
let license_num = this.statusCodeStr;
|
||||
license_num = license_num.replace(/[^\d,]/g, ''); // 清除“数字”和“.”以外的字符
|
||||
this.statusCodeStr = license_num;
|
||||
},
|
||||
cancelAllEdit() {
|
||||
this.domains.forEach(d => d.edit = false);
|
||||
this.params.forEach(d => d.edit = false);
|
||||
},
|
||||
configurations() {
|
||||
let statusCode = [];
|
||||
if (this.statusCodeStr) {
|
||||
statusCode = this.statusCodeStr.split(',');
|
||||
}
|
||||
return {
|
||||
timeout: this.timeout,
|
||||
statusCode: statusCode,
|
||||
params: this.params,
|
||||
domains: this.domains,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.edit-input {
|
||||
padding-right: 0px;
|
||||
}
|
||||
.edit-input {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.tb-edit .el-textarea {
|
||||
display: none;
|
||||
}
|
||||
.tb-edit .el-textarea {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tb-edit .current-row .el-textarea {
|
||||
display: block;
|
||||
}
|
||||
.tb-edit .current-row .el-textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tb-edit .current-row .el-textarea + span {
|
||||
display: none;
|
||||
}
|
||||
.tb-edit .current-row .el-textarea + span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
text-align: left;
|
||||
}
|
||||
.el-col {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-col .el-table {
|
||||
align: center;
|
||||
}
|
||||
.el-col .el-table {
|
||||
align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<i class="el-icon-upload"/>
|
||||
<div class="el-upload__text" v-html="$t('load_test.upload_tips')"></div>
|
||||
<template v-slot:tip>
|
||||
<div class="el-upload__tip">{{$t('load_test.upload_type')}}</div>
|
||||
<div class="el-upload__tip">{{ $t('load_test.upload_type') }}</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
|
|
@ -42,9 +42,11 @@
|
|||
<el-table-column
|
||||
:label="$t('commons.operating')">
|
||||
<template v-slot:default="scope">
|
||||
<el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || isReadOnly" type="primary" icon="el-icon-download"
|
||||
<el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || isReadOnly" type="primary"
|
||||
icon="el-icon-download"
|
||||
size="mini" circle/>
|
||||
<el-button :disabled="isReadOnly" @click="handleDelete(scope.row, scope.$index)" type="danger" icon="el-icon-delete" size="mini"
|
||||
<el-button :disabled="isReadOnly" @click="handleDelete(scope.row, scope.$index)" type="danger"
|
||||
icon="el-icon-delete" size="mini"
|
||||
circle/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -53,170 +55,170 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {Message} from "element-ui";
|
||||
import {Message} from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "PerformanceBasicConfig",
|
||||
props: {
|
||||
testPlan: {
|
||||
type: Object
|
||||
},
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
export default {
|
||||
name: "PerformanceBasicConfig",
|
||||
props: {
|
||||
testPlan: {
|
||||
type: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
getFileMetadataPath: "/performance/file/metadata",
|
||||
jmxDownloadPath: '/performance/file/download',
|
||||
jmxDeletePath: '/performance/file/delete',
|
||||
fileList: [],
|
||||
tableData: [],
|
||||
uploadList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
getFileMetadataPath: "/performance/file/metadata",
|
||||
jmxDownloadPath: '/performance/file/download',
|
||||
jmxDeletePath: '/performance/file/delete',
|
||||
fileList: [],
|
||||
tableData: [],
|
||||
uploadList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.testPlan.id) {
|
||||
this.getFileMetadata(this.testPlan)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
testPlan() {
|
||||
if (this.testPlan.id) {
|
||||
this.getFileMetadata(this.testPlan)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
testPlan() {
|
||||
if (this.testPlan.id) {
|
||||
this.getFileMetadata(this.testPlan)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFileMetadata(testPlan) {
|
||||
this.fileList = [];
|
||||
this.tableData = [];
|
||||
this.uploadList = [];
|
||||
this.result = this.$get(this.getFileMetadataPath + "/" + testPlan.id, response => {
|
||||
let files = response.data;
|
||||
|
||||
if (!files) {
|
||||
Message.error({message: this.$t('load_test.related_file_not_found'), showClose: true});
|
||||
return;
|
||||
}
|
||||
// deep copy
|
||||
this.fileList = JSON.parse(JSON.stringify(files));
|
||||
this.tableData = JSON.parse(JSON.stringify(files));
|
||||
this.tableData.map(f => {
|
||||
f.size = f.size + ' Bytes';
|
||||
});
|
||||
})
|
||||
},
|
||||
beforeUpload(file) {
|
||||
if (!this.fileValidator(file)) {
|
||||
/// todo: 显示错误信息
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.tableData.filter(f => f.name === file.name).length > 0) {
|
||||
this.$error(this.$t('load_test.delete_file'));
|
||||
return false;
|
||||
}
|
||||
|
||||
let type = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
|
||||
this.tableData.push({
|
||||
name: file.name,
|
||||
size: file.size + ' Bytes', /// todo: 按照大小显示Byte、KB、MB等
|
||||
type: type.toUpperCase(),
|
||||
updateTime: file.lastModified,
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
handleUpload(uploadResources) {
|
||||
this.uploadList.push(uploadResources.file);
|
||||
},
|
||||
handleDownload(file) {
|
||||
let data = {
|
||||
name: file.name,
|
||||
id: file.id,
|
||||
};
|
||||
let config = {
|
||||
url: this.jmxDownloadPath,
|
||||
method: 'post',
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
};
|
||||
this.result = this.$request(config).then(response => {
|
||||
const content = response.data;
|
||||
const blob = new Blob([content]);
|
||||
if ("download" in document.createElement("a")) {
|
||||
// 非IE下载
|
||||
// chrome/firefox
|
||||
let aTag = document.createElement('a');
|
||||
aTag.download = file.name;
|
||||
aTag.href = URL.createObjectURL(blob);
|
||||
aTag.click();
|
||||
URL.revokeObjectURL(aTag.href)
|
||||
} else {
|
||||
// IE10+下载
|
||||
navigator.msSaveBlob(blob, this.filename)
|
||||
}
|
||||
}).catch(e => {
|
||||
Message.error({message: e.message, showClose: true});
|
||||
});
|
||||
},
|
||||
handleDelete(file, index) {
|
||||
this.$alert(this.$t('load_test.delete_file_confirm') + file.name + "？", '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this._handleDelete(file, index);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
_handleDelete(file, index) {
|
||||
this.fileList.splice(index, 1);
|
||||
this.tableData.splice(index, 1);
|
||||
//
|
||||
let i = this.uploadList.findIndex(upLoadFile => upLoadFile.name === file.name);
|
||||
if (i > -1) {
|
||||
this.uploadList.splice(i, 1);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFileMetadata(testPlan) {
|
||||
this.fileList = [];
|
||||
this.tableData = [];
|
||||
this.uploadList = [];
|
||||
this.result = this.$get(this.getFileMetadataPath + "/" + testPlan.id, response => {
|
||||
let files = response.data;
|
||||
|
||||
if (!files) {
|
||||
Message.error({message: this.$t('load_test.related_file_not_found'), showClose: true});
|
||||
return;
|
||||
}
|
||||
// deep copy
|
||||
this.fileList = JSON.parse(JSON.stringify(files));
|
||||
this.tableData = JSON.parse(JSON.stringify(files));
|
||||
this.tableData.map(f => {
|
||||
f.size = f.size + ' Bytes';
|
||||
});
|
||||
})
|
||||
},
|
||||
beforeUpload(file) {
|
||||
if (!this.fileValidator(file)) {
|
||||
/// todo: 显示错误信息
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.tableData.filter(f => f.name === file.name).length > 0) {
|
||||
this.$error(this.$t('load_test.delete_file'));
|
||||
return false;
|
||||
}
|
||||
|
||||
let type = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
|
||||
this.tableData.push({
|
||||
name: file.name,
|
||||
size: file.size + ' Bytes', /// todo: 按照大小显示Byte、KB、MB等
|
||||
type: type.toUpperCase(),
|
||||
updateTime: file.lastModified,
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
handleUpload(uploadResources) {
|
||||
this.uploadList.push(uploadResources.file);
|
||||
},
|
||||
handleDownload(file) {
|
||||
let data = {
|
||||
name: file.name,
|
||||
id: file.id,
|
||||
};
|
||||
let config = {
|
||||
url: this.jmxDownloadPath,
|
||||
method: 'post',
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
};
|
||||
this.result = this.$request(config).then(response => {
|
||||
const content = response.data;
|
||||
const blob = new Blob([content]);
|
||||
if ("download" in document.createElement("a")) {
|
||||
// 非IE下载
|
||||
// chrome/firefox
|
||||
let aTag = document.createElement('a');
|
||||
aTag.download = file.name;
|
||||
aTag.href = URL.createObjectURL(blob);
|
||||
aTag.click();
|
||||
URL.revokeObjectURL(aTag.href)
|
||||
} else {
|
||||
// IE10+下载
|
||||
navigator.msSaveBlob(blob, this.filename)
|
||||
}
|
||||
}).catch(e => {
|
||||
Message.error({message: e.message, showClose: true});
|
||||
});
|
||||
},
|
||||
handleDelete(file, index) {
|
||||
this.$alert(this.$t('load_test.delete_file_confirm') + file.name + "？", '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this._handleDelete(file, index);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
_handleDelete(file, index) {
|
||||
this.fileList.splice(index, 1);
|
||||
this.tableData.splice(index, 1);
|
||||
//
|
||||
let i = this.uploadList.findIndex(upLoadFile => upLoadFile.name === file.name);
|
||||
if (i > -1) {
|
||||
this.uploadList.splice(i, 1);
|
||||
}
|
||||
},
|
||||
handleExceed() {
|
||||
this.$error(this.$t('load_test.file_size_limit'));
|
||||
},
|
||||
fileValidator(file) {
|
||||
/// todo: 是否需要对文件内容和大小做限制
|
||||
return file.size > 0;
|
||||
},
|
||||
updatedFileList() {
|
||||
return this.fileList;// 表示修改了已经上传的文件列表
|
||||
},
|
||||
validConfig() {
|
||||
let newJmxNum = 0, oldJmxNum = 0;
|
||||
if (this.uploadList.length > 0) {
|
||||
newJmxNum = this.uploadList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
|
||||
}
|
||||
if (this.fileList.length > 0) {
|
||||
oldJmxNum = this.fileList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
|
||||
}
|
||||
if (newJmxNum + oldJmxNum !== 1) {
|
||||
this.$error(this.$t('load_test.jmx_is_null'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
handleExceed() {
|
||||
this.$error(this.$t('load_test.file_size_limit'));
|
||||
},
|
||||
}
|
||||
fileValidator(file) {
|
||||
/// todo: 是否需要对文件内容和大小做限制
|
||||
return file.size > 0;
|
||||
},
|
||||
updatedFileList() {
|
||||
return this.fileList;// 表示修改了已经上传的文件列表
|
||||
},
|
||||
validConfig() {
|
||||
let newJmxNum = 0, oldJmxNum = 0;
|
||||
if (this.uploadList.length > 0) {
|
||||
newJmxNum = this.uploadList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
|
||||
}
|
||||
if (this.fileList.length > 0) {
|
||||
oldJmxNum = this.fileList.filter(f => f.name.toLowerCase().endsWith(".jmx")).length;
|
||||
}
|
||||
if (newJmxNum + oldJmxNum !== 1) {
|
||||
this.$error(this.$t('load_test.jmx_is_null'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.basic-config {
|
||||
width: 100%
|
||||
}
|
||||
.basic-config {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.last-modified {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.last-modified {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<el-col :span="10">
|
||||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.thread_num')}}</div>
|
||||
<div class="config-form-label">{{ $t('load_test.thread_num') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input-number
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</el-form>
|
||||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.duration')}}</div>
|
||||
<div class="config-form-label">{{ $t('load_test.duration') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input-number
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<el-form-item>
|
||||
<div class="config-form-label">{{$t('load_test.rps_limit')}}</div>
|
||||
<div class="config-form-label">{{ $t('load_test.rps_limit') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-switch v-model="rpsLimitEnable"/>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
<el-form :inline="true" class="input-bottom-border">
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.ramp_up_time_within')}}</div>
|
||||
<div>{{ $t('load_test.ramp_up_time_within') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input-number
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
size="mini"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.ramp_up_time_minutes')}}</div>
|
||||
<div>{{ $t('load_test.ramp_up_time_minutes') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input-number
|
||||
|
|
@ -78,12 +78,12 @@
|
|||
size="mini"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.ramp_up_time_times')}}</div>
|
||||
<div>{{ $t('load_test.ramp_up_time_times') }}</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form :inline="true" class="input-bottom-border">
|
||||
<el-form-item>
|
||||
<div>{{$t('load_test.select_resource_pool')}}</div>
|
||||
<div>{{ $t('load_test.select_resource_pool') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="resourcePool" :disabled="isReadOnly" size="mini">
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="title">{{$t('load_test.pressure_prediction_chart')}}</div>
|
||||
<div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
|
||||
<chart class="chart-container" ref="chart1" :options="orgOptions" :autoresize="true"></chart>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -106,263 +106,263 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import echarts from "echarts";
|
||||
|
||||
const TARGET_LEVEL = "TargetLevel";
|
||||
const RAMP_UP = "RampUp";
|
||||
const STEPS = "Steps";
|
||||
const DURATION = "duration";
|
||||
const RPS_LIMIT = "rpsLimit";
|
||||
const RPS_LIMIT_ENABLE = "rpsLimitEnable";
|
||||
const TARGET_LEVEL = "TargetLevel";
|
||||
const RAMP_UP = "RampUp";
|
||||
const STEPS = "Steps";
|
||||
const DURATION = "duration";
|
||||
const RPS_LIMIT = "rpsLimit";
|
||||
const RPS_LIMIT_ENABLE = "rpsLimitEnable";
|
||||
|
||||
export default {
|
||||
name: "PerformancePressureConfig",
|
||||
props: {
|
||||
testPlan: {
|
||||
type: Object
|
||||
},
|
||||
testId: {
|
||||
type: String
|
||||
},
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
export default {
|
||||
name: "PerformancePressureConfig",
|
||||
props: {
|
||||
testPlan: {
|
||||
type: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
threadNumber: 10,
|
||||
duration: 10,
|
||||
rampUpTime: 10,
|
||||
step: 10,
|
||||
rpsLimit: 10,
|
||||
rpsLimitEnable: false,
|
||||
orgOptions: {},
|
||||
resourcePool: null,
|
||||
resourcePools: [],
|
||||
}
|
||||
testId: {
|
||||
type: String
|
||||
},
|
||||
mounted() {
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
threadNumber: 10,
|
||||
duration: 10,
|
||||
rampUpTime: 10,
|
||||
step: 10,
|
||||
rpsLimit: 10,
|
||||
rpsLimitEnable: false,
|
||||
orgOptions: {},
|
||||
resourcePool: null,
|
||||
resourcePools: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.testId) {
|
||||
this.getLoadConfig();
|
||||
} else {
|
||||
this.calculateChart();
|
||||
}
|
||||
this.resourcePool = this.testPlan.testResourcePoolId;
|
||||
this.getResourcePools();
|
||||
},
|
||||
watch: {
|
||||
testPlan(n) {
|
||||
this.resourcePool = n.testResourcePoolId;
|
||||
},
|
||||
testId() {
|
||||
if (this.testId) {
|
||||
this.getLoadConfig();
|
||||
} else {
|
||||
this.calculateChart();
|
||||
}
|
||||
this.resourcePool = this.testPlan.testResourcePoolId;
|
||||
this.getResourcePools();
|
||||
},
|
||||
watch: {
|
||||
testPlan(n) {
|
||||
this.resourcePool = n.testResourcePoolId;
|
||||
},
|
||||
testId() {
|
||||
if (this.testId) {
|
||||
this.getLoadConfig();
|
||||
} else {
|
||||
this.calculateChart();
|
||||
},
|
||||
methods: {
|
||||
getResourcePools() {
|
||||
this.result = this.$get('/testresourcepool/list/quota/valid', response => {
|
||||
this.resourcePools = response.data;
|
||||
// 如果当前的资源池无效 设置 null
|
||||
if (response.data.filter(p => p.id === this.resourcePool).length === 0) {
|
||||
this.resourcePool = null;
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getResourcePools() {
|
||||
this.result = this.$get('/testresourcepool/list/quota/valid', response => {
|
||||
this.resourcePools = response.data;
|
||||
// 如果当前的资源池无效 设置 null
|
||||
if (response.data.filter(p => p.id === this.resourcePool).length === 0) {
|
||||
this.resourcePool = null;
|
||||
getLoadConfig() {
|
||||
if (this.testId) {
|
||||
|
||||
this.$get('/performance/get-load-config/' + this.testId, (response) => {
|
||||
if (response.data) {
|
||||
let data = JSON.parse(response.data);
|
||||
|
||||
data.forEach(d => {
|
||||
switch (d.key) {
|
||||
case TARGET_LEVEL:
|
||||
this.threadNumber = d.value;
|
||||
break;
|
||||
case RAMP_UP:
|
||||
this.rampUpTime = d.value;
|
||||
break;
|
||||
case DURATION:
|
||||
this.duration = d.value;
|
||||
break;
|
||||
case STEPS:
|
||||
this.step = d.value;
|
||||
break;
|
||||
case RPS_LIMIT:
|
||||
this.rpsLimit = d.value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.threadNumber = this.threadNumber || 10;
|
||||
this.duration = this.duration || 30;
|
||||
this.rampUpTime = this.rampUpTime || 12;
|
||||
this.step = this.step || 3;
|
||||
this.rpsLimit = this.rpsLimit || 10;
|
||||
|
||||
this.calculateChart();
|
||||
}
|
||||
})
|
||||
},
|
||||
getLoadConfig() {
|
||||
if (this.testId) {
|
||||
|
||||
this.$get('/performance/get-load-config/' + this.testId, (response) => {
|
||||
if (response.data) {
|
||||
let data = JSON.parse(response.data);
|
||||
|
||||
data.forEach(d => {
|
||||
switch (d.key) {
|
||||
case TARGET_LEVEL:
|
||||
this.threadNumber = d.value;
|
||||
break;
|
||||
case RAMP_UP:
|
||||
this.rampUpTime = d.value;
|
||||
break;
|
||||
case DURATION:
|
||||
this.duration = d.value;
|
||||
break;
|
||||
case STEPS:
|
||||
this.step = d.value;
|
||||
break;
|
||||
case RPS_LIMIT:
|
||||
this.rpsLimit = d.value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.threadNumber = this.threadNumber || 10;
|
||||
this.duration = this.duration || 30;
|
||||
this.rampUpTime = this.rampUpTime || 12;
|
||||
this.step = this.step || 3;
|
||||
this.rpsLimit = this.rpsLimit || 10;
|
||||
|
||||
this.calculateChart();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
calculateChart() {
|
||||
if (this.duration < this.rampUpTime) {
|
||||
this.rampUpTime = this.duration;
|
||||
}
|
||||
if (this.rampUpTime < this.step) {
|
||||
this.step = this.rampUpTime;
|
||||
}
|
||||
this.orgOptions = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a}: {c0}',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'User',
|
||||
data: [],
|
||||
type: 'line',
|
||||
step: 'start',
|
||||
smooth: false,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
}]
|
||||
};
|
||||
let timePeriod = Math.floor(this.rampUpTime / this.step);
|
||||
let timeInc = timePeriod;
|
||||
|
||||
let threadPeriod = Math.floor(this.threadNumber / this.step);
|
||||
let threadInc1 = Math.floor(this.threadNumber / this.step);
|
||||
let threadInc2 = Math.ceil(this.threadNumber / this.step);
|
||||
let inc2count = this.threadNumber - this.step * threadInc1;
|
||||
for (let i = 0; i <= this.duration; i++) {
|
||||
// x 轴
|
||||
this.orgOptions.xAxis.data.push(i);
|
||||
if (i > timePeriod) {
|
||||
timePeriod += timeInc;
|
||||
if (inc2count > 0) {
|
||||
threadPeriod = threadPeriod + threadInc2;
|
||||
inc2count--;
|
||||
} else {
|
||||
threadPeriod = threadPeriod + threadInc1;
|
||||
}
|
||||
if (threadPeriod > this.threadNumber) {
|
||||
threadPeriod = this.threadNumber;
|
||||
}
|
||||
this.orgOptions.series[0].data.push(threadPeriod);
|
||||
} else {
|
||||
this.orgOptions.series[0].data.push(threadPeriod);
|
||||
}
|
||||
}
|
||||
},
|
||||
validConfig() {
|
||||
if (!this.resourcePool) {
|
||||
this.$warning(this.$t('load_test.resource_pool_is_null'));
|
||||
// 资源池为空，设置参数为资源池所在Tab的name
|
||||
this.$emit('changeActive', '1');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.threadNumber || !this.duration || !this.rampUpTime || !this.step || !this.rpsLimit) {
|
||||
this.$warning(this.$t('load_test.pressure_config_params_is_empty'));
|
||||
this.$emit('changeActive', '1');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
convertProperty() {
|
||||
/// todo：下面4个属性是jmeter ConcurrencyThreadGroup plugin的属性，这种硬编码不太好吧，在哪能转换这种属性？
|
||||
return [
|
||||
{key: TARGET_LEVEL, value: this.threadNumber},
|
||||
{key: RAMP_UP, value: this.rampUpTime},
|
||||
{key: STEPS, value: this.step},
|
||||
{key: DURATION, value: this.duration},
|
||||
{key: RPS_LIMIT, value: this.rpsLimit},
|
||||
{key: RPS_LIMIT_ENABLE, value: this.rpsLimitEnable},
|
||||
];
|
||||
});
|
||||
}
|
||||
},
|
||||
calculateChart() {
|
||||
if (this.duration < this.rampUpTime) {
|
||||
this.rampUpTime = this.duration;
|
||||
}
|
||||
if (this.rampUpTime < this.step) {
|
||||
this.step = this.rampUpTime;
|
||||
}
|
||||
this.orgOptions = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a}: {c0}',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'User',
|
||||
data: [],
|
||||
type: 'line',
|
||||
step: 'start',
|
||||
smooth: false,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
}]
|
||||
};
|
||||
let timePeriod = Math.floor(this.rampUpTime / this.step);
|
||||
let timeInc = timePeriod;
|
||||
|
||||
let threadPeriod = Math.floor(this.threadNumber / this.step);
|
||||
let threadInc1 = Math.floor(this.threadNumber / this.step);
|
||||
let threadInc2 = Math.ceil(this.threadNumber / this.step);
|
||||
let inc2count = this.threadNumber - this.step * threadInc1;
|
||||
for (let i = 0; i <= this.duration; i++) {
|
||||
// x 轴
|
||||
this.orgOptions.xAxis.data.push(i);
|
||||
if (i > timePeriod) {
|
||||
timePeriod += timeInc;
|
||||
if (inc2count > 0) {
|
||||
threadPeriod = threadPeriod + threadInc2;
|
||||
inc2count--;
|
||||
} else {
|
||||
threadPeriod = threadPeriod + threadInc1;
|
||||
}
|
||||
if (threadPeriod > this.threadNumber) {
|
||||
threadPeriod = this.threadNumber;
|
||||
}
|
||||
this.orgOptions.series[0].data.push(threadPeriod);
|
||||
} else {
|
||||
this.orgOptions.series[0].data.push(threadPeriod);
|
||||
}
|
||||
}
|
||||
},
|
||||
validConfig() {
|
||||
if (!this.resourcePool) {
|
||||
this.$warning(this.$t('load_test.resource_pool_is_null'));
|
||||
// 资源池为空，设置参数为资源池所在Tab的name
|
||||
this.$emit('changeActive', '1');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.threadNumber || !this.duration || !this.rampUpTime || !this.step || !this.rpsLimit) {
|
||||
this.$warning(this.$t('load_test.pressure_config_params_is_empty'));
|
||||
this.$emit('changeActive', '1');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
convertProperty() {
|
||||
/// todo：下面4个属性是jmeter ConcurrencyThreadGroup plugin的属性，这种硬编码不太好吧，在哪能转换这种属性？
|
||||
return [
|
||||
{key: TARGET_LEVEL, value: this.threadNumber},
|
||||
{key: RAMP_UP, value: this.rampUpTime},
|
||||
{key: STEPS, value: this.step},
|
||||
{key: DURATION, value: this.duration},
|
||||
{key: RPS_LIMIT, value: this.rpsLimit},
|
||||
{key: RPS_LIMIT_ENABLE, value: this.rpsLimitEnable},
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.pressure-config-container .el-input {
|
||||
width: 130px;
|
||||
.pressure-config-container .el-input {
|
||||
width: 130px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pressure-config-container .config-form-label {
|
||||
width: 130px;
|
||||
}
|
||||
.pressure-config-container .config-form-label {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.pressure-config-container .input-bottom-border input {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
}
|
||||
.pressure-config-container .input-bottom-border input {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-col .el-form {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-col .el-form {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-col {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.title {
|
||||
margin-left: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue