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
v-if="reportExportVisible"
id="apiTestReport"
:project-env-map="projectEnvMap"
:title="report.name"
:content="content"
:report="report"

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

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

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

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

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

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

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

@ -76,7 +76,7 @@
<el-col :span="6">
<span class="default-property">
{{ $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>
</el-link>
</span>
@ -116,7 +116,7 @@
<el-col :span="8">
<span class="default-property">
{{ $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>
</el-link>
</span>
@ -234,7 +234,7 @@ export default {
.rows-count-number {
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px;
color: var(--count_number);
color: var(--count_number) !important;
}
.detail-container {

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

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

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

@ -1,35 +1,36 @@
<template>
<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>
</div>
</template>
<script>
import MsReportTitle from "./MsReportTitle";
export default {
name: "MsReportExportTemplate",
components: {MsReportTitle},
props: {title: String, type: String, report: Object},
}
import MsReportTitle from "./MsReportTitle";
export default {
name: "MsReportExportTemplate",
components: {MsReportTitle},
props: {title: String, type: String, report: Object, projectEnvMap: {}},
}
</script>
<style scoped>
.report-export {
padding: 30px;
}
.report-export {
padding: 30px;
}
.report-title {
margin-bottom: 30px;
}
.report-title {
margin-bottom: 30px;
}
.report-export {
background: white;
}
.report-export {
background: white;
}
@page {
margin-bottom: 30px;
margin-top: 30px;
}
@page {
margin-bottom: 30px;
margin-top: 30px;
}
</style>

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

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