refactor: 优化场景报告-子请求的展示

优化场景报告-子请求的展示
This commit is contained in:
song-tianyang 2021-05-18 17:09:35 +08:00 committed by 刘瑞斌
parent ebbbeb4806
commit 340f69a467
4 changed files with 162 additions and 3 deletions

View File

@ -47,7 +47,7 @@ public class MsTransactionController extends MsTestElement {
this.setName(getLabelName());
}
transactionController.setName(this.getName());
transactionController.setProperty(TestElement.TEST_CLASS, IfController.class.getName());
transactionController.setProperty(TestElement.TEST_CLASS, TransactionController.class.getName());
transactionController.setProperty(TestElement.GUI_CLASS, SaveService.aliasToClass("TransactionControllerGui"));
transactionController.setGenerateParentSample(generateParentSample);
transactionController.setIncludeTimers(includeTimers);

View File

@ -85,6 +85,13 @@ public class TestResult {
item.getSubRequestResults().forEach(subItem -> {
subItem.setName(array[0]);
});
}else {
item.getSubRequestResults().forEach(subItem -> {
if (StringUtils.isNotEmpty(subItem.getName()) && subItem.getName().indexOf(SEPARATOR) != -1) {
String array[] = subItem.getName().split(SEPARATOR);
subItem.setName(array[0]);
}
});
}
});
scenarios.add(result);

View File

@ -13,6 +13,7 @@
<div class="el-step__icon is-text ms-api-col-create" v-else>
<div class="el-step__icon-inner"> {{ indexNumber+1 }}</div>
</div>
<i class="icon el-icon-arrow-right" :class="{'is-active': isActive}" @click="active" @click.stop/>
{{ request.name }}
</div>
</div>
@ -52,6 +53,13 @@
</el-col>
</el-row>
</div>
<el-collapse-transition>
<div v-show="isActive" style="width: 99%">
<ms-request-sub-result-tail :scenario-name="scenarioName"
:request-type="requestType" v-if="isActive"
:request="request"/>
</div>
</el-collapse-transition>
</div>
</template>
@ -60,10 +68,13 @@
import MsAssertionResults from "./AssertionResults";
import MsRequestText from "./RequestText";
import MsResponseText from "./ResponseText";
import MsRequestSubResultTail from "./RequestSubResultTail";
export default {
name: "MsRequestResult",
components: {MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric},
name: "MsRequestSubResult",
components: {
MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric,MsRequestSubResultTail
},
props: {
request: Object,
scenarioName: String,
@ -156,4 +167,7 @@
border-top: 1px solid #e8eaec;
}
.icon.is-active {
transform: rotate(90deg);
}
</style>

View File

@ -0,0 +1,138 @@
<template>
<div class="request-result">
<div>
<el-row :gutter="8" type="flex" align="middle" class="info">
<el-col :span="2">
<div class="method">
{{request.method}}
</div>
</el-col>
<el-col :span="8">
<el-tooltip effect="dark" :content="request.url" placement="bottom" :open-delay="800">
<div class="url">{{request.url}}</div>
</el-tooltip>
</el-col>
<el-col :span="8">
<div class="url"> {{$t('api_report.start_time')}}{{request.startTime | timestampFormatDate(true) }}
</div>
</el-col>
</el-row>
</div>
<el-collapse-transition>
<div v-show="isActive">
<ms-response-text :request-type="requestType" v-if="isCodeEditAlive" :response="request.responseResult" :request="request"/>
</div>
</el-collapse-transition>
</div>
</template>
<script>
import MsRequestMetric from "./RequestMetric";
import MsAssertionResults from "./AssertionResults";
import MsRequestText from "./RequestText";
import MsResponseText from "./ResponseText";
import MsRequestResult from "./RequestResult";
import MsRequestSubResult from "./RequestSubResult";
export default {
name: "MsRequestSubResultTail",
components: {MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric, MsRequestResult, MsRequestSubResult},
props: {
request: Object,
scenarioName: String,
requestType: String
},
data() {
return {
isActive: true,
activeName: "sub",
isCodeEditAlive: true
}
},
methods: {
active() {
this.isActive = !this.isActive;
},
reload() {
this.isCodeEditAlive = false;
this.$nextTick(() => (this.isCodeEditAlive = true));
}
},
watch: {
'request.responseResult'() {
this.reload();
}
},
computed: {
assertion() {
return this.request.passAssertions + " / " + this.request.totalAssertions;
},
hasSub() {
return this.request.subRequestResults.length > 0;
},
}
}
</script>
<style scoped>
.request-result {
width: 100%;
min-height: 40px;
padding: 2px 0;
}
.request-result .info {
background-color: #F9F9F9;
margin-left: 20px;
cursor: pointer;
}
.request-result .method {
color: #1E90FF;
font-size: 14px;
font-weight: 500;
line-height: 40px;
padding-left: 5px;
}
.request-result .url {
color: #7f7f7f;
font-size: 12px;
font-weight: 400;
margin-top: 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.request-result .tab .el-tabs__header {
margin: 0;
}
.request-result .text {
height: 300px;
overflow-y: auto;
}
.sub-result .info {
background-color: #FFF;
}
.sub-result .method {
border-left: 5px solid #1E90FF;
padding-left: 20px;
}
.sub-result:last-child {
border-bottom: 1px solid #EBEEF5;
}
.request-result .icon.is-active {
transform: rotate(90deg);
}
</style>