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:
song-tianyang 2022-07-15 14:36:59 +08:00 committed by TIanyang
parent c25795e462
commit f783b00d37
8 changed files with 157 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/business/components/api/automation/report/ApiReportDetail.vue
View File

@ -94,6 +94,7 @@
<ms-api-report-export <ms-api-report-export
v-if="reportExportVisible" v-if="reportExportVisible"
id="apiTestReport" id="apiTestReport"
:project-env-map="projectEnvMap"
:title="report.name" :title="report.name"
:content="content" :content="content"
:report="report" :report="report"

149
frontend/src/business/components/api/automation/report/ApiReportExport.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<ms-report-export-template :title="title" :report="report" :type="$t('report.api_test_report')"> <ms-report-export-template :title="title" :report="report" :project-env-map="projectEnvMap"
:type="$t('report.api_test_report')">
<ms-metric-chart :content="content" :is-export="true" :totalTime="totalTime" :report="report"/> <ms-metric-chart :content="content" :is-export="true" :totalTime="totalTime" :report="report"/>
<div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario"> <div class="scenario-result" v-for="(scenario, index) in content.scenarios" :key="index" :scenario="scenario">
<div> <div>
@ -15,41 +16,41 @@
{{ getName(request.name) }} {{ getName(request.name) }}
</div> </div>
<div class="url"> <div class="url">
{{request.url}} {{ request.url }}
</div> </div>
</div> </div>
<el-divider/> <el-divider/>
<div class="request-middle"> <div class="request-middle">
<api-report-reqest-header-item :title="$t('api_test.request.method')"> <api-report-reqest-header-item :title="$t('api_test.request.method')">
<span class="method"> {{request.method}}</span> <span class="method"> {{ request.method }}</span>
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.response_time')"> <api-report-reqest-header-item :title="$t('api_report.response_time')">
{{request.responseResult.responseTime}} ms {{ request.responseResult.responseTime }} ms
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.latency')"> <api-report-reqest-header-item :title="$t('api_report.latency')">
{{request.responseResult.latency}} ms {{ request.responseResult.latency }} ms
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.request_size')"> <api-report-reqest-header-item :title="$t('api_report.request_size')">
{{request.requestSize}} bytes {{ request.requestSize }} bytes
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.response_size')"> <api-report-reqest-header-item :title="$t('api_report.response_size')">
{{request.responseResult.responseSize}} bytes {{ request.responseResult.responseSize }} bytes
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.error')"> <api-report-reqest-header-item :title="$t('api_report.error')">
{{request.error}} {{ request.error }}
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.assertions')"> <api-report-reqest-header-item :title="$t('api_report.assertions')">
{{request.passAssertions + " / " + request.totalAssertions}} {{ request.passAssertions + " / " + request.totalAssertions }}
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.response_code')"> <api-report-reqest-header-item :title="$t('api_report.response_code')">
{{request.responseResult.responseCode}} {{ request.responseResult.responseCode }}
</api-report-reqest-header-item> </api-report-reqest-header-item>
<api-report-reqest-header-item :title="$t('api_report.result')"> <api-report-reqest-header-item :title="$t('api_report.result')">
@ -65,10 +66,10 @@
{{ $t('error_report_library.option.name') }} {{ $t('error_report_library.option.name') }}
</el-tag> </el-tag>
<el-tag size="mini" type="success" v-else-if="request.success"> <el-tag size="mini" type="success" v-else-if="request.success">
{{$t('api_report.success')}} {{ $t('api_report.success') }}
</el-tag> </el-tag>
<el-tag size="mini" type="danger" v-else> <el-tag size="mini" type="danger" v-else>
{{$t('api_report.fail')}} {{ $t('api_report.fail') }}
</el-tag> </el-tag>
</api-report-reqest-header-item> </api-report-reqest-header-item>
</div> </div>
@ -80,80 +81,82 @@
</template> </template>
<script> <script>
import MsScenarioResult from "./components/ScenarioResult"; import MsScenarioResult from "./components/ScenarioResult";
import MsRequestResultTail from "./components/RequestResultTail"; import MsRequestResultTail from "./components/RequestResultTail";
import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem"; import ApiReportReqestHeaderItem from "./ApiReportReqestHeaderItem";
import MsMetricChart from "./components/MetricChart"; import MsMetricChart from "./components/MetricChart";
import MsReportTitle from "../../../common/components/report/MsReportTitle"; import MsReportTitle from "../../../common/components/report/MsReportTitle";
import MsReportExportTemplate from "../../../common/components/report/MsReportExportTemplate"; import MsReportExportTemplate from "../../../common/components/report/MsReportExportTemplate";
import MsAssertionResults from "@/business/components/api/automation/report/components/AssertionResults" import MsAssertionResults from "@/business/components/api/automation/report/components/AssertionResults"
export default { export default {
name: "MsApiReportExport", name: "MsApiReportExport",
components: { components: {
MsReportExportTemplate, MsReportExportTemplate,
MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult ,MsAssertionResults MsReportTitle, MsMetricChart, ApiReportReqestHeaderItem, MsRequestResultTail, MsScenarioResult, MsAssertionResults
}, },
props: { props: {
report:Object, report: Object,
content: Object, content: Object,
totalTime: Number, totalTime: Number,
title: String projectEnvMap: {},
}, title: String
data() { },
return {} data() {
}, return {}
methods:{ },
getName(name) { methods: {
if (name && name.indexOf("^@~@^") !== -1) { getName(name) {
let arr = name.split("^@~@^"); if (name && name.indexOf("^@~@^") !== -1) {
if (arr[arr.length - 1].indexOf("UUID=")) { let arr = name.split("^@~@^");
return arr[arr.length - 1].split("UUID=")[0]; if (arr[arr.length - 1].indexOf("UUID=")) {
} return arr[arr.length - 1].split("UUID=")[0];
return arr[arr.length - 1];
} }
return name; return arr[arr.length - 1];
} }
return name;
} }
} }
}
</script> </script>
<style scoped> <style scoped>
.scenario-result { .scenario-result {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.method { .method {
color: #1E90FF; color: #1E90FF;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.request-top, .request-bottom , .request-middle{ .request-top, .request-bottom, .request-middle {
margin-left: 20px; margin-left: 20px;
} }
.url { .url {
color: #409EFF; color: #409EFF;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
.el-card { .el-card {
border-style: none; border-style: none;
padding: 10px 30px; padding: 10px 30px;
} }
.request-top div { .request-top div {
margin-top: 10px; margin-top: 10px;
} }
.ms-test-error_code {
color: #F6972A; .ms-test-error_code {
background-color: #FDF5EA; color: #F6972A;
border-color: #FDF5EA; background-color: #FDF5EA;
} border-color: #FDF5EA;
}
</style> </style>

2
frontend/src/business/components/api/homepage/components/card/ApiCaseCountCard.vue
View File

@ -258,7 +258,7 @@ export default {
.rows-count-number { .rows-count-number {
font-family: 'ArialMT', 'Arial', sans-serif; font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px; font-size: 14px;
color: var(--count_number); color: var(--count_number) !important;
} }
.detail-container { .detail-container {

2
frontend/src/business/components/api/homepage/components/card/ApiCountCard.vue
View File

@ -185,7 +185,7 @@ export default {
.rows-count-number { .rows-count-number {
font-family: 'ArialMT', 'Arial', sans-serif; font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px; font-size: 14px;
color: var(--count_number); color: var(--count_number) !important;
} }
.detail-container { .detail-container {

6
frontend/src/business/components/api/homepage/components/card/ScenarioCountCard.vue
View File

@ -76,7 +76,7 @@
<el-col :span="6"> <el-col :span="6">
<span class="default-property"> <span class="default-property">
{{ $t('api_test.home_page.detail_card.unexecute') }} {{ $t('api_test.home_page.detail_card.unexecute') }}
<el-link type="info" @click="redirectPage('unexecuteCount')" target="_blank" style="color: #000000"> <el-link type="info" class="rows-count-number" @click="redirectPage('unexecuteCount')" target="_blank">
<b>{{ sceneCountData.unexecuteCount }}</b> <b>{{ sceneCountData.unexecuteCount }}</b>
</el-link> </el-link>
</span> </span>
@ -116,7 +116,7 @@
<el-col :span="8"> <el-col :span="8">
<span class="default-property"> <span class="default-property">
{{ $t('api_test.home_page.detail_card.unexecute') }} {{ $t('api_test.home_page.detail_card.unexecute') }}
<el-link type="info" @click="redirectPage('unexecuteCount')" target="_blank" style="color: #000000"> <el-link type="info" class="rows-count-number" @click="redirectPage('unexecuteCount')" target="_blank">
<b>{{ sceneCountData.unexecuteCount }}</b> <b>{{ sceneCountData.unexecuteCount }}</b>
</el-link> </el-link>
</span> </span>
@ -234,7 +234,7 @@ export default {
.rows-count-number { .rows-count-number {
font-family: 'ArialMT', 'Arial', sans-serif; font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px; font-size: 14px;
color: var(--count_number); color: var(--count_number) !important;
} }
.detail-container { .detail-container {

2
frontend/src/business/components/api/homepage/components/card/ScheduleTaskCountCard.vue
View File

@ -169,7 +169,7 @@ export default {
.rows-count-number { .rows-count-number {
font-family: 'ArialMT', 'Arial', sans-serif; font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px; font-size: 14px;
color: var(--count_number); color: var(--count_number) !important;
} }
.detail-container { .detail-container {

41
frontend/src/business/components/common/components/report/MsReportExportTemplate.vue
View File

@ -1,35 +1,36 @@
<template> <template>
<div class="report-export"> <div class="report-export">
<ms-report-title :title="title" :type="type" :report="report"/> <ms-report-title :title="title" :type="type" :report="report" :project-env-map="projectEnvMap"/>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<script> <script>
import MsReportTitle from "./MsReportTitle"; import MsReportTitle from "./MsReportTitle";
export default {
name: "MsReportExportTemplate", export default {
components: {MsReportTitle}, name: "MsReportExportTemplate",
props: {title: String, type: String, report: Object}, components: {MsReportTitle},
} props: {title: String, type: String, report: Object, projectEnvMap: {}},
}
</script> </script>
<style scoped> <style scoped>
.report-export { .report-export {
padding: 30px; padding: 30px;
} }
.report-title { .report-title {
margin-bottom: 30px; margin-bottom: 30px;
} }
.report-export { .report-export {
background: white; background: white;
} }
@page { @page {
margin-bottom: 30px; margin-bottom: 30px;
margin-top: 30px; margin-top: 30px;
} }
</style> </style>

90
frontend/src/business/components/common/components/report/MsReportTitle.vue
View File

@ -1,62 +1,78 @@
<template> <template>
<div class="clearfix report-title"> <div class="clearfix report-title">
<div class="report-left"> <el-row>
<div class="title"> <div class="report-left">
【{{ type }}】- {{ title }} <div class="title">
<span v-if="report && (report.endTime || report.createTime)"> 【{{ type }}】- {{ title }}
<span v-if="report && (report.endTime || report.createTime)">
<span style="margin-left: 10px">{{ $t('report.test_start_time') }}：</span> <span style="margin-left: 10px">{{ $t('report.test_start_time') }}：</span>
<span class="time"> {{ report.createTime | timestampFormatDate }}</span> <span class="time"> {{ report.createTime | timestampFormatDate }}</span>
<span style="margin-left: 10px">{{ $t('report.test_end_time') }}：</span> <span style="margin-left: 10px">{{ $t('report.test_end_time') }}：</span>
<span class="time"> {{ report.endTime | timestampFormatDate }}</span> <span class="time"> {{ report.endTime | timestampFormatDate }}</span>
</span> </span>
</div>
</div> </div>
</div> <div class="report-right">
<div class="report-right"> <img class="logo" src="@/assets/logo-MeterSphere.png">
<img class="logo" src="@/assets/logo-MeterSphere.png"> </div>
</div> </el-row>
<el-row v-if="showProjectEnv" type="flex">
<span> {{ $t('commons.environment') + ':' }} </span>
<div v-for="(values,key) in projectEnvMap" :key="key" style="margin-right: 10px">
{{ key + ":" }}
<ms-tag v-for="(item,index) in values" :key="index" type="success" :content="item"
style="margin-left: 2px"/>
</div>
</el-row>
</div> </div>
</template> </template>
<script> <script>
export default { import MsTag from "@/business/components/common/components/MsTag";
name: "MsReportTitle",
props: {title: String, type: String, report: Object}, export default {
data() { name: "MsReportTitle",
return {} components: {MsTag},
} props: {title: String, type: String, report: Object, projectEnvMap: {}},
} data() {
return {}
},
computed: {
showProjectEnv() {
return this.projectEnvMap && JSON.stringify(this.projectEnvMap) !== '{}';
},
}
}
</script> </script>
<style scoped> <style scoped>
.report-left { .report-left {
float: left; float: left;
} }
.report-right { .report-right {
float: right; float: right;
} }
.logo { .logo {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
vertical-align: middle vertical-align: middle
} }
.report-left { .report-left {
font-size: 15px; font-size: 15px;
} }
.time { .time {
margin-left: 10px; margin-left: 10px;
} }
.title {
margin-bottom: 5px;
}
.title {
margin-bottom: 5px;
}
</style> </style>