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

feat: 场景用例步骤增加停止按钮

This commit is contained in:
shiziyuan9527 2021-08-16 17:25:11 +08:00 committed by 刘瑞斌
parent c357870ece
commit d53844ef15
7 changed files with 129 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
View File

@ -1,7 +1,6 @@
<template>
<div>
<api-base-component
v-loading="loading"
@copy="copyRow"
@remove="remove"
@active="active"
@ -32,11 +31,17 @@
</span>
</template>
<template v-slot:button>
<el-tooltip :content="$t('api_test.run')" placement="top">
<el-button :disabled="!request.enable" @click="run" icon="el-icon-video-play" style="padding: 5px" class="ms-btn" size="mini" circle/>
<el-tooltip :content="$t('api_test.run')" placement="top" v-if="!loading">
<el-button :disabled="!request.enable" @click="run" icon="el-icon-video-play" style="padding: 5px" class="ms-btn" size="mini" circle />
</el-tooltip>
<el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
<el-button :disabled="!request.enable" @click.once="stop" size="mini" style="color:white;padding: 0 0.1px;width: 24px;height: 24px;" class="stop-btn" circle>
<div style="transform: scale(0.66)">
<span style="margin-left: -4.5px;font-weight: bold;">STOP</span>
</div>
</el-button>
</el-tooltip>
</template>
<!--请求内容-->
<template v-slot:request>
<legend style="width: 100%">
@ -75,44 +80,46 @@
</template>
<!-- 执行结果内容 -->
<template v-slot:result>
<p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
<div v-if="request.result">
<div v-for="(scenario,h) in request.result.scenarios" :key="h">
<el-tabs v-model="request.activeName" closable class="ms-tabs">
<el-tab-pane v-for="(item,i) in scenario.requestResults" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
<api-response-component :currentProtocol="request.protocol" :apiActive="true" :result="item"/>
<div v-loading="loading">
<p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
<div v-if="request.result">
<div v-for="(scenario,h) in request.result.scenarios" :key="h">
<el-tabs v-model="request.activeName" closable class="ms-tabs">
<el-tab-pane v-for="(item,i) in scenario.requestResults" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
<api-response-component :currentProtocol="request.protocol" :apiActive="true" :result="item"/>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div v-else-if="showXpackCompnent&&request.backEsbDataStruct != null">
<esb-definition-response
:currentProtocol="request.protocol"
:request="request"
:is-api-component="false"
:show-options-button="false"
:show-header="true"
:result="request.requestResult"
v-xpack
v-if="showXpackCompnent"
/>
</div>
<div v-else>
<el-tabs v-model="request.activeName" closable class="ms-tabs" v-if="request.requestResult && request.requestResult.length > 1">
<el-tab-pane v-for="(item,i) in request.requestResult" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
<api-response-component
:currentProtocol="request.protocol"
:apiActive="true"
:result="item"
/>
</el-tab-pane>
</el-tabs>
<api-response-component
:currentProtocol="request.protocol"
:apiActive="true"
:result="request.requestResult[0]"
v-else/>
</div>
</div>
<div v-else-if="showXpackCompnent&&request.backEsbDataStruct != null">
<esb-definition-response
:currentProtocol="request.protocol"
:request="request"
:is-api-component="false"
:show-options-button="false"
:show-header="true"
:result="request.requestResult"
v-xpack
v-if="showXpackCompnent"
/>
</div>
<div v-else>
<el-tabs v-model="request.activeName" closable class="ms-tabs" v-if="request.requestResult && request.requestResult.length > 1">
<el-tab-pane v-for="(item,i) in request.requestResult" :label="'循环'+(i+1)" :key="i" style="margin-bottom: 5px">
<api-response-component
:currentProtocol="request.protocol"
:apiActive="true"
:result="item"
/>
</el-tab-pane>
</el-tabs>
<api-response-component
:currentProtocol="request.protocol"
:apiActive="true"
:result="request.requestResult[0]"
v-else/>
</div>
</template>
</api-base-component>
<ms-run :debug="true" :reportId="reportId" :run-data="runData" :env-map="envMap"
@ -437,6 +444,14 @@ export default {
/*触发执行操作*/
this.reportId = getUUID();
},
stop() {
let url = "/api/automation/stop/" + this.reportId;
this.$get(url, () => {
this.runLoading = false;
this.loading = false;
this.$success(this.$t('report.test_stop_success'));
});
},
errorRefresh() {
this.loading = false;
},
@ -530,4 +545,10 @@ export default {
.ms-req-success {
color: #67C23A;
}
.stop-btn {
background-color: #E62424;
border-color: #EE6161;
color: white;
}
</style>

30
frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
View File

@ -1,5 +1,5 @@
<template>
<el-card v-loading="result.loading" style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
<el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
<div @click="active(apiCase)" v-if="type!=='detail'">
<el-row>
<el-col :span="3">
@ -20,7 +20,7 @@
</el-col>
</el-row>
</el-col>
<el-col :span="api.protocol==='HTTP'?6:10">
<el-col :span="api.protocol==='HTTP'?6:10" v-loading="loading && !(apiCase.active||type==='detail')">
<span @click.stop>
<i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}" @click="active(apiCase)"/>
<el-input v-if="!apiCase.id || isShowInput" size="small" v-model="apiCase.name" :name="index" :key="index"
@ -64,7 +64,14 @@
<el-col :span="3">
<span @click.stop>
<ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
class="run-button" size="mini" :disabled="!apiCase.id" circle/>
class="run-button" size="mini" :disabled="!apiCase.id" circle v-if="!loading"/>
<el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
<el-button :disabled="!apiCase.id" @click.once="stop" size="mini" style="color:white;padding: 0;width: 28px;height: 28px;" class="stop-btn" circle>
<div style="transform: scale(0.72)">
<span style="margin-left: -3.5px;font-weight: bold">STOP</span>
</div>
</el-button>
</el-tooltip>
<ms-tip-button @click="copyCase(apiCase)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
size="mini" :disabled="!apiCase.id || isCaseEdit" circle/>
<ms-tip-button @click="deleteCase(index,apiCase)" :tip="$t('commons.delete')" icon="el-icon-delete"
@ -96,7 +103,7 @@
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="apiCase.active||type==='detail'">
<div v-if="apiCase.active||type==='detail'" v-loading="loading">
<el-divider></el-divider>
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<ms-api-request-form :isShowEnable="true" :showScript="true" :is-read-only="isReadOnly" :headers="apiCase.request.headers " :request="apiCase.request" v-if="api.protocol==='HTTP'"/>
@ -223,6 +230,12 @@ export default {
},
type: String,
isCaseEdit: Boolean,
loading: {
type: Boolean,
default() {
return false;
}
}
},
created() {
if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
@ -272,6 +285,9 @@ export default {
this.saveTestCase(data);
this.$emit('singleRun', data);
},
stop() {
this.$emit('stop');
},
copyCase(data) {
if (data && data.request) {
let uuid = getUUID();
@ -485,4 +501,10 @@ export default {
white-space: nowrap;
width: 150px;
}
.stop-btn {
background-color: #E62424;
border-color: #dd3636;
color: white;
}
</style>

16
frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
View File

@ -22,9 +22,10 @@
<el-container v-if="!result.loading">
<el-main>
<div v-for="(item,index) in apiCaseList" :key="item.id ? item.id : item.uuid">
<api-case-item v-loading="singleLoading && singleRunId === item.id || batchLoadingIds.indexOf(item.id) > -1"
<api-case-item :loading="singleLoading && singleRunId === item.id || batchLoadingIds.indexOf(item.id) > -1"
@refresh="refresh"
@singleRun="singleRun"
@stop="stop"
@refreshModule="refreshModule"
@copyCase="copyCase"
@showExecResult="showExecResult"
@ -250,6 +251,7 @@ export default {
let obj = {envId: this.environment, show: true};
this.batchEdit(obj);
this.runResult = {testId: getUUID()};
this.$refs.apiCaseItem.runLoading = false;
this.$success(this.$t('organization.integration.successful_operation'));
this.$emit("refresh");
},
@ -257,6 +259,7 @@ export default {
this.batchLoadingIds = [];
this.singleLoading = false;
this.singleRunId = "";
this.$refs.apiCaseItem.runLoading = false;
this.$emit("refresh");
},
refresh() {
@ -405,6 +408,17 @@ export default {
this.$emit("refresh", row.id);
},
stop(callback) {
let url = "/api/automation/stop/" + this.reportId;
this.$get(url, () => {
if (callback) {
callback();
}
this.singleLoading = false;
this.$success(this.$t('report.test_stop_success'));
});
},
batchRun() {
if (this.currentApi.protocol !== "SQL" && this.currentApi.protocol !== "DUBBO" && this.currentApi.protocol !== "dubbo://" && !this.environment) {
this.$warning(this.$t('api_test.environment.select_environment'));

15
frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
View File

@ -18,13 +18,16 @@
<el-button size="small" type="primary" v-else @click.once="stop" style="float: right;margin-right: 20px">{{ $t('report.stop_btn') }}</el-button>
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="api.request" ref="requestForm"/>
<div v-loading="loading">
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="api.request" ref="requestForm"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
<ms-request-result-tail :response="responseData" ref="runResult"/>
</div>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
<ms-request-result-tail :response="responseData" ref="runResult" v-loading="loading"/>
<ms-jmx-step :request="api.request" :response="responseData"/>
</el-card>

15
frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
View File

@ -43,15 +43,18 @@
</el-form-item>
</el-form>
<div v-loading="loading">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<!-- HTTP 请求参数 -->
<ms-api-request-form :isShowEnable="true" :headers="api.request.headers" :request="api.request"/>
</el-form>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
<ms-request-result-tail v-loading="loading" :response="responseData" ref="runResult"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
<ms-request-result-tail :response="responseData" ref="runResult"/>
</div>
<ms-jmx-step :request="api.request" :response="responseData"/>

14
frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
View File

@ -17,13 +17,15 @@
</el-dropdown>
<el-button size="small" type="primary" v-else @click.once="stop" style="float: right;margin-right: 20px">{{ $t('report.stop_btn') }}</el-button>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
<div v-loading="loading">
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="runResult" v-loading="loading"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="runResult"/>
</div>
<ms-jmx-step :request="api.request" :response="responseData"/>

6
frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
View File

@ -32,16 +32,16 @@
<!-- <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>-->
<!-- <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>-->
<div v-if="api.method=='TCP'">
<div v-if="api.method=='TCP'" v-loading="loading">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<!-- <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>-->
<ms-tcp-format-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" ref="runResult" v-loading="loading"/>
<ms-request-result-tail :response="responseData" ref="runResult"/>
</div>
<div v-else-if="api.method=='ESB'">
<div v-else-if="api.method=='ESB'" v-loading="loading">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<esb-definition v-xpack v-if="showXpackCompnent" :show-script="true" :request="api.request" @callback="runTest" ref="requestForm"/>
</div>