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

refactor: 删除旧版api的页面

This commit is contained in:
Captain.B 2021-10-11 14:58:48 +08:00 committed by 刘瑞斌
parent 2035a17857
commit 607a8bc8ea
15 changed files with 8 additions and 1476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/business/components/api/head/ApiHeaderMenus.vue
View File

@ -5,47 +5,20 @@
<el-col :span="14">
<el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active='$route.path'>
<el-menu-item v-show="isNewVersion" :index="'/api/home'">
<el-menu-item :index="'/api/home'">
{{ $t("i18n.home") }}
</el-menu-item>
<el-menu-item v-show="isOldVersion" :index="'/api/home_obsolete'">
{{ $t("i18n.home") }}
</el-menu-item>
<el-menu-item v-show="isNewVersion" :index="'/api/definition'" v-permission="['PROJECT_API_DEFINITION:READ']">
<el-menu-item :index="'/api/definition'" v-permission="['PROJECT_API_DEFINITION:READ']">
{{ $t("i18n.definition") }}
</el-menu-item>
<el-menu-item v-show="isNewVersion" :index="'/api/automation'" v-permission="['PROJECT_API_SCENARIO:READ']">
<el-menu-item :index="'/api/automation'" v-permission="['PROJECT_API_SCENARIO:READ']">
{{ $t("i18n.automation") }}
</el-menu-item>
<el-menu-item v-show="isNewVersion" :index="'/api/automation/report'"
v-permission="['PROJECT_API_REPORT:READ']">
<el-menu-item :index="'/api/automation/report'" v-permission="['PROJECT_API_REPORT:READ']">
{{ $t("i18n.report") }}
</el-menu-item>
<el-submenu v-show="isOldVersion" index="4">
<template v-slot:title>{{ $t('commons.test') }}</template>
<ms-recent-list ref="testRecent" :options="testRecent"/>
<el-divider class="menu-divider"/>
<ms-show-all :index="'/api/test/list/all'"/>
<el-menu-item :index="apiTestProjectPath" class="blank_item"></el-menu-item>
<ms-create-button :index="'/api/test/create'"
:title="$t('load_test.create')"/>
</el-submenu>
<el-submenu v-show="isOldVersion" index="5">
<template v-slot:title>{{ $t('commons.report') }}</template>
<ms-recent-list ref="reportRecent" :options="reportRecent"/>
<el-divider class="menu-divider"/>
<ms-show-all :index="'/api/report/list/all'"/>
</el-submenu>
<el-menu-item v-show="isOldVersion" :index="'/api/monitor/view'">
{{ $t('commons.monitor') }}
</el-menu-item>
</el-menu>
</el-col>
</el-row>
@ -92,12 +65,6 @@ export default {
currentProject: ''
};
},
computed: {
...mapGetters([
'isNewVersion',
'isOldVersion',
])
},
methods: {
reload() {
this.isRouterAlive = false;

77
frontend/src/business/components/api/home/ApiReportRecentList.vue
View File

@ -1,77 +0,0 @@
<template>
<el-card class="table-card" v-loading="result.loading">
<template v-slot:header>
<span class="title">{{$t('api_report.title')}}</span>
</template>
<el-table border :data="tableData" class="adjust-table table-content" @row-click="link" height="300px">
<el-table-column prop="name" :label="$t('commons.name')" width="150" show-overflow-tooltip/>
<el-table-column width="250" :label="$t('commons.create_time')">
<template v-slot:default="scope">
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column width="250" :label="$t('commons.update_time')">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column prop="triggerMode" width="150" :label="'触发方式'">
<template v-slot:default="scope">
<report-trigger-mode-item :trigger-mode="scope.row.triggerMode"/>
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('commons.status')">
<template v-slot:default="{row}">
<ms-api-report-status :row="row"/>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script>
import MsApiReportStatus from "../report/ApiReportStatus";
import ReportTriggerModeItem from "../../common/tableItem/ReportTriggerModeItem";
export default {
name: "MsApiReportRecentList",
components: {ReportTriggerModeItem, MsApiReportStatus},
data() {
return {
result: {},
tableData: [],
loading: false
}
},
methods: {
search() {
this.result = this.$get("/api/report/recent/5", response => {
this.tableData = response.data;
});
},
link(row) {
this.$router.push({
path: '/api/report/view/' + row.id,
})
}
},
created() {
this.search();
},
activated() {
this.search();
}
}
</script>
<style scoped>
.el-table {
cursor:pointer;
}
</style>

72
frontend/src/business/components/api/home/ApiTestHome.vue
View File

@ -1,72 +0,0 @@
<template>
<ms-container>
<ms-main-container v-loading="result.loading">
<el-row :gutter="20">
<el-col :span="12">
<ms-api-test-recent-list/>
</el-col>
<el-col :span="12">
<ms-api-report-recent-list/>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<ms-test-heatmap :values="values"/>
</el-col>
<el-col :span="12">
<ms-schedule-list :group="'API_TEST'"/>
</el-col>
</el-row>
</ms-main-container>
</ms-container>
</template>
<script>
import MsContainer from "../../common/components/MsContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
import MsApiTestRecentList from "./ApiTestRecentList";
import MsApiReportRecentList from "./ApiReportRecentList";
import MsTestHeatmap from "../../common/components/MsTestHeatmap";
import MsScheduleList from "./ScheduleList";
export default {
name: "ApiTestHome",
components: {
MsScheduleList,
MsTestHeatmap, MsApiReportRecentList, MsApiTestRecentList, MsMainContainer, MsContainer
},
data() {
return {
values: [],
result: {},
}
},
activated() {
this.getValues();
},
mounted() {
this.getValues();
},
methods: {
getValues() {
this.result = this.$get('/api/report/dashboard/tests', response => {
this.values = response.data;
});
}
}
}
</script>
<style scoped>
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
</style>

72
frontend/src/business/components/api/home/ApiTestRecentList.vue
View File

@ -1,72 +0,0 @@
<template>
<el-card class="table-card" v-loading="result.loading">
<template v-slot:header>
<span class="title">{{$t('commons.test')}}</span>
</template>
<el-table border :data="tableData" class="adjust-table table-content" @row-click="link" height="300px">
<el-table-column prop="name" :label="$t('commons.name')" width="150" show-overflow-tooltip/>
<el-table-column prop="projectName" :label="$t('load_test.project_name')" width="150" show-overflow-tooltip/>
<el-table-column width="250" :label="$t('commons.create_time')">
<template v-slot:default="scope">
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column width="250" :label="$t('commons.update_time')">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('commons.status')">
<template v-slot:default="{row}">
<ms-api-test-status :row="row"/>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script>
import MsApiTestStatus from "../test/ApiTestStatus";
export default {
name: "MsApiTestRecentList",
components: {MsApiTestStatus},
data() {
return {
result: {},
tableData: [],
loading: false
}
},
methods: {
search() {
this.result = this.$get("/api/recent/5", response => {
this.tableData = response.data;
});
},
link(row) {
this.$router.push({
path: '/api/test/edit?id=' + row.id,
})
}
},
created() {
this.search();
},
activated() {
this.search();
}
}
</script>
<style scoped>
.el-table {
cursor: pointer;
}
</style>

20
frontend/src/business/components/api/router.js
View File

@ -1,5 +1,3 @@
import MsProject from "@/business/components/settings/workspace/MsProject";
export default {
path: "/api",
name: "api",
@ -13,22 +11,6 @@ export default {
name: 'fucHome',
component: () => import('@/business/components/api/homepage/ApiTestHomePage'),
},
{
path: 'home_obsolete',
name: 'fucHome',
component: () => import('@/business/components/api/home/ApiTestHome'),
},
{
path: "test/:type",
name: "ApiTestConfig",
component: () => import('@/business/components/api/test/ApiTestConfig'),
props: (route) => ({id: route.query.id})
},
{
path: "test/list/:projectId",
name: "ApiTestList",
component: () => import('@/business/components/api/test/ApiTestList'),
},
// {
// path: "project/:type",
// name: "fucProject",
@ -71,4 +53,4 @@ export default {
component: () => import('@/business/components/api/monitor/ApiMonitor'),
},
]
}
};

79
frontend/src/business/components/api/test/ApiReportDialog.vue
View File

@ -1,79 +0,0 @@
<template>
<el-dialog :title="$t('api_report.title')" :visible.sync="reportVisible">
<el-table border class="adjust-table" :data="tableData" v-loading="result.loading">
<el-table-column :label="$t('commons.name')" width="150" show-overflow-tooltip>
<template v-slot:default="scope">
<el-link type="info" @click="link(scope.row)">{{ scope.row.name }}</el-link>
</template>
</el-table-column>
<el-table-column width="250" :label="$t('commons.create_time')">
<template v-slot:default="scope">
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column width="250" :label="$t('commons.update_time')">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('commons.status')">
<template v-slot:default="{row}">
<ms-api-report-status :row="row"/>
</template>
</el-table-column>
</el-table>
<ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
</el-dialog>
</template>
<script>
import MsApiReportStatus from "../report/ApiReportStatus";
import MsTablePagination from "@/business/components/common/pagination/TablePagination";
export default {
name: "MsApiReportDialog",
components: {MsApiReportStatus, MsTablePagination},
props: ["testId"],
data() {
return {
reportVisible: false,
result: {},
tableData: [],
loading: false,
currentPage: 1,
pageSize: 10,
total: 0,
}
},
methods: {
open() {
this.reportVisible = true;
this.search();
},
link(row) {
this.reportVisible = false;
this.$router.push({
path: '/api/report/view/' + row.id,
})
},
search() {
let url = "/api/report/list/" + this.testId + "/" + this.currentPage + "/" + this.pageSize;
this.result = this.$get(url, response => {
let data = response.data;
this.total = data.itemCount;
this.tableData = data.listObject;
});
},
},
}
</script>
<style scoped>
</style>

423
frontend/src/business/components/api/test/ApiTestConfig.vue
View File

@ -1,423 +0,0 @@
<template>
<ms-container>
<ms-main-container>
<el-card>
<el-container class="test-container" v-loading="result.loading">
<el-header>
<el-row>
<el-input :disabled="isReadOnly" class="test-name" v-model="test.name" maxlength="60"
:placeholder="$t('api_test.input_name')"
show-word-limit>
<template slot="prepend">测试名称</template>
</el-input>
<el-tooltip :content="'Ctrl + S'"
placement="top"
:enterable="false">
<el-button type="primary" plain :disabled="isReadOnly" @click="saveTest">
{{ $t('commons.save') }}
</el-button>
</el-tooltip>
<el-button type="primary" plain :disabled="isReadOnly"
@click="saveRunTest">
{{ $t('load_test.save_and_run') }}
</el-button>
<!-- <el-button :disabled="isReadOnly" type="primary" plain v-if="isShowRun" @click="runTest">-->
<!-- {{$t('api_test.run')}}-->
<!-- </el-button>-->
<el-button :disabled="isReadOnly" type="warning" plain @click="cancel">{{ $t('commons.cancel') }}
</el-button>
<el-dropdown trigger="click" @command="handleCommand">
<el-button class="el-dropdown-link more" icon="el-icon-more" plain/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="report">
{{ $t('api_report.title') }}
</el-dropdown-item>
<el-dropdown-item command="jar" :disabled="isReadOnly">
{{ $t('api_test.jar_config.title') }}
</el-dropdown-item>
<el-dropdown-item command="performance" :disabled="create || isReadOnly">
{{ $t('api_test.create_performance_test') }}
</el-dropdown-item>
<el-dropdown-item command="export" :disabled="isReadOnly || create">
{{ $t('api_test.export_config') }}
</el-dropdown-item>
<el-dropdown-item command="import" :disabled="isReadOnly">
{{ $t('api_test.api_import.label') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<api-import ref="apiImport"/>
<ms-api-report-dialog :test-id="id" ref="reportDialog"/>
<ms-schedule-config :schedule="test.schedule" :is-read-only="isReadOnly" :save="saveCronExpression"
@scheduleChange="saveSchedule" :test-id="id" :check-open="checkScheduleEdit"/>
<ms-jar-config :is-read-only="isReadOnly" ref="jarConfig"/>
</el-row>
</el-header>
<ms-api-scenario-config :debug-report-id="debugReportId" @runDebug="runDebug" :is-read-only="isReadOnly"
:test="test" :scenarios="test.scenarioDefinition" :project-id="test.projectId"
ref="config"/>
</el-container>
</el-card>
</ms-main-container>
</ms-container>
</template>
<script>
import MsApiScenarioConfig from "./components/ApiScenarioConfig";
import {Scenario, Test} from "./model/ScenarioModel"
import MsApiReportStatus from "../report/ApiReportStatus";
import MsApiReportDialog from "./ApiReportDialog";
import {downloadFile, getCurrentProjectID, getCurrentWorkspaceId, getUUID} from "@/common/js/utils";
import MsScheduleConfig from "../../common/components/MsScheduleConfig";
import ApiImport from "./components/import/ApiImport";
import MsContainer from "@/business/components/common/components/MsContainer";
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
import MsJarConfig from "./components/jar/JarConfig";
export default {
name: "MsApiTestConfig",
components: {
MsJarConfig,
MsMainContainer,
MsContainer, ApiImport, MsScheduleConfig, MsApiReportDialog, MsApiReportStatus, MsApiScenarioConfig
},
props: ["id"],
data() {
return {
reportVisible: false,
create: false,
result: {},
projects: [],
change: false,
test: new Test(),
isReadOnly: false,
debugReportId: ''
}
},
watch: {
'$route': 'init',
test: {
handler: function () {
this.change = true;
},
deep: true
}
},
methods: {
init() {
this.isReadOnly = false;
if (this.id) {
this.create = false;
this.getTest(this.id);
} else {
this.create = true;
this.test = new Test();
if (this.$refs.config) {
this.$refs.config.reset();
}
}
this.test.projectId = getCurrentProjectID();
},
updateReference() {
let updateIds = [];
this.test.scenarioDefinition.forEach(scenario => {
if (scenario.isReference()) {
updateIds.push(scenario.id.split("#")[0]);
}
})
if (updateIds.length === 0) return;
// 更新引用场景
this.result = this.$post("/api/list/ids", {ids: updateIds}, response => {
let scenarioMap = {};
if (response.data) {
response.data.forEach(test => {
JSON.parse(test.scenarioDefinition).forEach(options => {
let referenceId = test.id + "#" + options.id;
scenarioMap[referenceId] = new Scenario(options);
scenarioMap[referenceId].id = referenceId;
})
})
}
let scenarios = [];
this.test.scenarioDefinition.forEach(scenario => {
if (scenario.isReference()) {
if (scenarioMap[scenario.id]) {
let item = scenarioMap[scenario.id];
item.referenceEnable = scenario.referenceEnable;
scenarios.push(item);
}
} else {
scenarios.push(scenario);
}
})
this.test.scenarioDefinition = scenarios;
})
},
getTest(id) {
this.result = this.$get("/api/get/" + id, response => {
if (response.data) {
let item = response.data;
this.test = new Test({
id: item.id,
projectId: item.projectId,
name: item.name,
status: item.status,
scenarioDefinition: JSON.parse(item.scenarioDefinition),
schedule: item.schedule ? item.schedule : {},
});
this.updateReference();
this.$refs.config.reset();
}
});
},
save(callback) {
let validator = this.test.isValid();
if (!validator.isValid) {
this.$warning(this.$t(validator.info));
return;
}
this.change = false;
let bodyFiles = this.getBodyUploadFiles();
let url = this.create ? "/api/create" : "/api/update";
let jmx = this.test.toJMX();
let blob = new Blob([jmx.xml], {type: "application/octet-stream"});
let file = new File([blob], jmx.name);
this.result = this.$fileUpload(url, file, bodyFiles, this.test, () => {
if (callback) callback();
this.create = false;
this.resetBodyFile();
});
},
saveTest() {
this.save(() => {
this.$success(this.$t('commons.save_success'));
if (this.create) {
this.$router.push({
path: '/api/test/edit?id=' + this.test.id
})
}
})
},
runTest() {
this.result = this.$post("/api/run", {id: this.test.id, triggerMode: 'MANUAL'}, (response) => {
this.$success(this.$t('api_test.running'));
this.$router.push({
path: '/api/report/view/' + response.data
})
});
},
saveRunTest() {
this.change = false;
if (!this.validateEnableTest()) {
this.$warning(this.$t('api_test.enable_validate_tip'));
return;
}
this.save(() => {
this.$success(this.$t('commons.save_success'));
this.runTest();
})
},
getBodyUploadFiles() {
let bodyUploadFiles = [];
this.test.bodyUploadIds = [];
this.test.scenarioDefinition.forEach(scenario => {
scenario.requests.forEach(request => {
if (request.body) {
request.body.kvs.forEach(param => {
if (param.files) {
param.files.forEach(item => {
if (item.file) {
let fileId = getUUID().substring(0, 8);
item.name = item.file.name;
item.id = fileId;
this.test.bodyUploadIds.push(fileId);
bodyUploadFiles.push(item.file);
}
});
}
});
}
});
});
return bodyUploadFiles;
},
validateEnableTest() {
for (let scenario of this.test.scenarioDefinition) {
if (scenario.enable) {
for (let request of scenario.requests) {
if (request.enable) {
return true;
}
}
}
}
return false;
},
resetBodyFile() {
//下次保存不再上传已传文件
this.test.scenarioDefinition.forEach(scenario => {
scenario.requests.forEach(request => {
if (request.body) {
request.body.kvs.forEach(param => {
if (param.files) {
param.files.forEach(item => {
if (item.file) {
item.file = undefined;
}
});
}
});
}
});
});
},
cancel() {
this.$router.push('/api/test/list/all');
// console.log(this.test.toJMX().xml);
},
handleCommand(command) {
switch (command) {
case "report":
this.$refs.reportDialog.open();
break;
case "performance":
this.$store.commit('setTest', {
name: this.test.name,
jmx: this.test.toJMX()
})
this.$router.push({
path: "/performance/test/create"
})
break;
case "export":
downloadFile(this.test.name + ".json", this.test.export());
break;
case "jar":
this.$refs.jarConfig.open();
break;
case "import":
this.$refs.apiImport.open();
break;
}
},
saveCronExpression(cronExpression) {
this.test.schedule.enable = true;
this.test.schedule.value = cronExpression;
this.saveSchedule();
},
saveSchedule() {
this.checkScheduleEdit();
let param = {};
param = this.test.schedule;
param.resourceId = this.test.id;
// 兼容问题，数据库里有的projectId为空
if (!param.projectId) {
param.projectId = getCurrentProjectID();
}
if (!param.workspaceId) {
param.workspaceId = getCurrentWorkspaceId();
}
let url = '/api/schedule/create';
if (param.id) {
url = '/api/schedule/update';
}
this.$post(url, param, () => {
this.$success(this.$t('commons.save_success'));
this.getTest(this.test.id);
});
},
checkScheduleEdit() {
if (this.create) {
this.$message(this.$t('api_test.environment.please_save_test'));
return false;
}
return true;
},
runDebug(scenario) {
if (this.create) {
this.$warning(this.$t('api_test.environment.please_save_test'));
return;
}
let url = "/api/run/debug";
let runningTest = new Test();
Object.assign(runningTest, this.test);
let bodyFiles = this.getBodyUploadFiles();
runningTest.scenarioDefinition = [];
runningTest.scenarioDefinition.push(scenario);
let validator = runningTest.isValid();
if (!validator.isValid) {
this.$warning(this.$t(validator.info));
return;
}
let jmx = runningTest.toJMX();
let blob = new Blob([jmx.xml], {type: "application/octet-stream"});
let file = new File([blob], jmx.name);
this.$fileUpload(url, file, bodyFiles, this.test, response => {
this.debugReportId = response.data;
this.resetBodyFile();
});
},
handleEvent(event) {
if (event.keyCode === 83 && event.ctrlKey) {
// console.log('拦截到 ctrl + s');//ctrl+s
this.saveTest();
event.preventDefault();
event.returnValue = false;
return false;
}
},
},
created() {
this.init();
//
document.addEventListener('keydown', this.handleEvent)
},
beforeDestroy() {
document.removeEventListener('keydown', this.handleEvent);
}
}
</script>
<style scoped>
.test-container {
height: calc(100vh - 155px);
min-height: 600px;
}
.test-name {
width: 600px;
margin-left: -20px;
margin-right: 20px;
}
.test-project {
min-width: 150px;
}
.test-container .more {
margin-left: 10px;
}
</style>

231
frontend/src/business/components/api/test/ApiTestList.vue
View File

@ -1,231 +0,0 @@
<template>
<ms-container>
<ms-main-container>
<el-card class="table-card" v-loading="result.loading">
<template v-slot:header>
<ms-table-header :condition.sync="condition" @search="search"
:title="$t('commons.test')"
@create="create" :createTip="$t('load_test.create')" :runTip="$t('load_test.run')"
:show-run="true"
@runTest="runTest" @historicalDataUpgrade="historicalDataUpgrade"/>
</template>
<one-click-operation ref="OneClickOperation" :select-ids="selectIds"
:select-project-names="selectProjectNames" :select-project-id="selectProjectId"
@refresh="init()"></one-click-operation>
<el-table border :data="tableData" class="adjust-table table-content" @sort-change="sort"
@row-click="handleView"
@filter-change="filter" @select-all="select" @select="select">
<el-table-column
type="selection"></el-table-column>
<el-table-column prop="name" :label="$t('commons.name')" width="250" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="projectName" :label="$t('load_test.project_name')" width="200" show-overflow-tooltip/>
<el-table-column prop="userName" :label="$t('api_test.creator')" width="150" show-overflow-tooltip/>
<el-table-column width="250" :label="$t('commons.create_time')" sortable
prop="createTime">
<template v-slot:default="scope">
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column width="250" :label="$t('commons.update_time')" sortable
prop="updateTime">
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('commons.status')"
column-key="status"
:filters="statusFilters">
<template v-slot:default="{row}">
<ms-api-test-status :row="row"/>
</template>
</el-table-column>
<el-table-column width="150" :label="$t('commons.operating')">
<template v-slot:default="scope">
<div>
<ms-table-operators :buttons="buttons" :row="scope.row"/>
</div>
</template>
</el-table-column>
</el-table>
<ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
</el-card>
<api-copy-dialog ref="apiCopy" @refresh="search"/>
<ms-upgrade ref="upgrade" :select-ids="selectIds"
:select-project-names="selectProjectNames" :select-project-id="selectProjectId"/>
</ms-main-container>
</ms-container>
</template>
<script>
import OneClickOperation from './OneClickOperation';
import MsTablePagination from "../../common/pagination/TablePagination";
import MsTableHeader from "../../common/components/MsTableHeader";
import MsTableOperator from "../../common/components/MsTableOperator";
import MsContainer from "../../common/components/MsContainer";
import MsMainContainer from "../../common/components/MsMainContainer";
import MsApiTestStatus from "./ApiTestStatus";
import MsTableOperators from "../../common/components/MsTableOperators";
import {TEST_CONFIGS} from "../../common/components/search/search-components";
import ApiCopyDialog from "./components/ApiCopyDialog";
import MsUpgrade from "./Upgrade";
import {_filter, _sort} from "@/common/js/tableUtils";
export default {
components: {
ApiCopyDialog,
OneClickOperation,
MsTableOperators,
MsApiTestStatus, MsMainContainer, MsContainer, MsTableHeader, MsTablePagination, MsTableOperator, MsUpgrade
},
data() {
return {
result: {},
condition: {
components: TEST_CONFIGS
},
projectId: null,
tableData: [],
multipleSelection: [],
currentPage: 1,
pageSize: 10,
total: 0,
loading: false,
selectIds: new Set(),
selectProjectNames: new Set(),
selectProjectId: new Set(),
buttons: [
{
tip: this.$t('commons.edit'), icon: "el-icon-edit",
exec: this.handleEdit
}, {
tip: this.$t('commons.copy'), icon: "el-icon-copy-document", type: "success",
exec: this.handleCopy
}, {
tip: this.$t('commons.delete'), icon: "el-icon-delete", type: "danger",
exec: this.handleDelete
}
],
statusFilters: [
{text: 'Saved', value: 'Saved'},
{text: 'Starting', value: 'Starting'},
{text: 'Running', value: 'Running'},
{text: 'Reporting', value: 'Reporting'},
{text: 'Completed', value: 'Completed'},
{text: 'Error', value: 'Error'}
]
}
},
watch: {
'$route': 'init'
},
methods: {
create() {
this.$router.push('/api/test/create');
},
select(selection) {
this.selectIds.clear()
this.selectProjectNames.clear()
this.selectProjectId.clear()
selection.forEach(s => {
this.selectIds.add(s.id)
this.selectProjectNames.add(s.projectName)
this.selectProjectId.add(s.projectId)
})
},
runTest() {
if (this.selectIds.size < 1) {
this.$warning(this.$t('test_track.plan_view.select_manipulate'));
} else {
this.$refs.OneClickOperation.openOneClickOperation();
}
},
search() {
if (this.projectId !== 'all') {
this.condition.projectId = this.projectId;
}
let url = "/api/list/" + this.currentPage + "/" + this.pageSize;
this.result = this.$post(url, this.condition, response => {
let data = response.data;
this.total = data.itemCount;
this.tableData = data.listObject;
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleEdit(test) {
this.$router.push({
path: '/api/test/edit?id=' + test.id,
})
},
handleView(test) {
this.$router.push({
path: '/api/test/view?id=' + test.id,
})
},
handleDelete(test) {
this.$alert(this.$t('load_test.delete_confirm') + test.name + "？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
this.result = this.$post("/api/delete", {id: test.id}, () => {
this.$success(this.$t('commons.delete_success'));
this.search();
});
}
}
});
},
handleCopy(test) {
this.$refs.apiCopy.open(test);
},
init() {
this.selectIds.clear()
this.selectProjectNames.clear()
this.selectIds.clear()
this.projectId = this.$route.params.projectId;
if (this.projectId && this.projectId !== "all") {
this.$store.commit('setProjectId', this.projectId);
}
this.search();
},
sort(column) {
_sort(column, this.condition);
this.init();
},
filter(filters) {
_filter(filters, this.condition);
this.init();
},
historicalDataUpgrade() {
if (this.selectIds.size < 1) {
this.$warning(this.$t('test_track.plan_view.select_manipulate'));
} else {
this.$refs.upgrade.openOneClickOperation();
}
}
},
created() {
this.init();
}
}
</script>
<style scoped>
.table-content {
width: 100%;
}
.el-table {
cursor: pointer;
}
</style>

38
frontend/src/business/components/api/test/ApiTestStatus.vue
View File

@ -1,38 +0,0 @@
<template>
<div>
<el-tag size="mini" type="primary" v-if="row.status === 'Starting'">
{{ row.status }}
</el-tag>
<el-tag size="mini" type="success" v-else-if="row.status === 'Running'">
{{ row.status }}
</el-tag>
<el-tag size="mini" type="warning" v-else-if="row.status === 'Reporting'">
{{ row.status }}
</el-tag>
<el-tooltip placement="top" v-else-if="row.status === 'Error'" effect="light">
<template v-slot:content>
<div>{{row.description}}</div>
</template>
<el-tag size="mini" type="danger">
{{ row.status }}
</el-tag>
</el-tooltip>
<el-tag v-else size="mini" type="info">
{{ row.status }}
</el-tag>
</div>
</template>
<script>
export default {
name: "MsApiTestStatus",
props: {
row: Object
}
}
</script>
<style scoped>
</style>

205
frontend/src/business/components/api/test/OneClickOperation.vue
View File

@ -1,205 +0,0 @@
<template>
<el-dialog
:title="$t('load_test.run')"
:visible.sync="oneClickOperationVisible"
width="30%"
left
:destroy-on-close="true"
show-close
@closed="handleClose">
<el-form :model="ruleForm" label-position="right" label-width="100px" size="small" :rules="rule">
<el-form-item :label="$t('test_track.case.test_name')" prop="testName">
<el-input v-model="ruleForm.testName" autocomplete="off" clearable show-word-limit></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<ms-dialog-footer
@cancel="oneClickOperationVisible = false"
@confirm="checkedSaveAndRunTest"/>
</span>
</el-dialog>
</template>
<script>
import MsDialogFooter from '../../common/components/MsDialogFooter'
import {Test} from "./model/ScenarioModel"
import MsApiScenarioConfig from "./components/ApiScenarioConfig";
import MsApiReportStatus from "../report/ApiReportStatus";
import MsApiReportDialog from "./ApiReportDialog";
import {getUUID} from "@/common/js/utils";
import {parseEnvironment} from "./model/EnvironmentModel";
export default {
name: "OneClickOperation",
components: {
MsApiReportDialog, MsApiReportStatus, MsApiScenarioConfig, MsDialogFooter
},
data() {
return {
oneClickOperationVisible: false,
test: null,
tests: [],
ruleForm: {},
change: false,
projectId: "",
rule: {
testName: [
{required: true, message: this.$t('api_test.input_name'), trigger: 'blur'},
],
}
};
},
watch: {
test: {
handler: function () {
this.change = true;
},
deep: true
}
},
props: {
selectIds: {
type: Set
},
selectProjectNames: {
type: Set
},
selectProjectId: {
type: Set
}
},
methods: {
openOneClickOperation() {
this.oneClickOperationVisible = true;
},
checkedSaveAndRunTest() {
if (this.ruleForm.testName) {
if (this.selectProjectNames.size > 1) {
this.$warning(this.$t('load_test.same_project_test'));
this.oneClickOperationVisible = false;
this.$emit('refresh')
} else {
this.checkNameResult(this.ruleForm.testName)
}
} else {
this.$warning(this.$t('api_test.input_name'))
}
},
checkNameResult() {
this.checkName(() => {
for (let x of this.selectIds) {
this.getTest(x)
}
})
},
checkName(callback) {
for (let i of this.selectProjectId) {
this.result = this.$post('/api/checkName', {name: this.ruleForm.testName, projectId: i}, () => {
if (callback) callback();
})
}
},
_getEnvironmentAndRunTest: function (item) {
this.result = this.$get('/api/environment/list/' + item.projectId, response => {
let environments = response.data;
let environmentMap = new Map();
environments.forEach(environment => {
parseEnvironment(environment);
environmentMap.set(environment.id, environment);
});
this.test.scenarioDefinition.forEach(scenario => {
if (scenario.environmentId) {
let env = environmentMap.get(scenario.environmentId);
if (!env) {
scenario.environmentId = undefined;
} else {
scenario.environment = env;
}
}
}
)
this.tests = [];
this.saveRunTest();
this.oneClickOperationVisible = false;
this.$emit('refresh')
});
},
getTest(id) {
this.result = this.$get("/api/get/" + id, response => {
if (response.data) {
let item = response.data;
this.tests.push(item);
let test = new Test({
projectId: item.projectId,
name: this.ruleForm.testName,
scenarioDefinition: JSON.parse(item.scenarioDefinition),
schedule: {},
});
this.test = this.test || test;
if (this.tests.length > 1) {
this.test.scenarioDefinition = this.test.scenarioDefinition.concat(test.scenarioDefinition);
}
if (this.tests.length === this.selectIds.size) {
this._getEnvironmentAndRunTest(item);
}
}
});
},
saveRunTest() {
this.change = false;
this.save(() => {
this.$success(this.$t('commons.save_success'));
this.runTest();
})
},
save(callback) {
this.change = false;
let url = "/api/create/merge";
this.result = this.$request(this.getOptions(url, this.selectIds), () => {
if (callback) callback();
});
},
runTest() {
this.result = this.$post("/api/run", {id: this.test.id, triggerMode: 'MANUAL'}, (response) => {
this.$success(this.$t('api_test.running'));
this.$router.push({
path: '/api/report/view/' + response.data
})
this.test = ""
});
},
getOptions(url, selectIds) {
let formData = new FormData();
formData.append('request', new Blob([JSON.stringify(this.test)], {
type: "application/json"
}));
formData.append('selectIds', new Blob([JSON.stringify(Array.from(selectIds))], {
type: "application/json"
}));
let jmx = this.test.toJMX();
let blob = new Blob([jmx.xml], {type: "application/octet-stream"});
formData.append("file", new File([blob], jmx.name));
return {
method: 'POST',
url: url,
data: formData,
headers: {
'Content-Type': undefined
}
};
},
handleClose() {
this.ruleForm = {}
},
}
}
</script>
<style scoped>
</style>

198
frontend/src/business/components/api/test/Upgrade.vue
View File

@ -1,198 +0,0 @@
<template>
<el-dialog
:title="$t('commons.module.select_module')"
:visible.sync="oneClickOperationVisible"
width="600px"
left
:destroy-on-close="true"
show-close
@closed="handleClose" v-loading="loading">
<ms-node-tree
v-loading="result.loading"
:tree-nodes="data"
@add="add"
:type="'edit'"
@edit="edit"
@drag="drag"
@remove="remove"
@nodeSelectEvent="nodeChange"
ref="nodeTree">
<template v-slot:header>
<el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
</el-input>
</template>
</ms-node-tree>
<span slot="footer" class="dialog-footer">
<ms-dialog-footer
@cancel="oneClickOperationVisible = false"
@confirm="confirm"/>
</span>
</el-dialog>
</template>
<script>
import MsDialogFooter from '../../common/components/MsDialogFooter'
import MsApiScenarioConfig from "./components/ApiScenarioConfig";
import MsApiReportStatus from "../report/ApiReportStatus";
import MsApiReportDialog from "./ApiReportDialog";
import {getUUID, getCurrentProjectID} from "@/common/js/utils";
import SelectMenu from "../../track/common/SelectMenu";
import MsNodeTree from "../../track/common/NodeTree";
import {buildNodePath} from "../definition/model/NodeTree";
export default {
name: "MsUpgrade",
components: {
MsApiReportDialog, MsApiReportStatus, MsApiScenarioConfig,
MsDialogFooter,
MsNodeTree,
SelectMenu,
},
data() {
return {
oneClickOperationVisible: false,
moduleOptions: [],
loading: false,
result: {},
data: [],
condition: {
filterText: "",
trashEnable: false
},
currentModule: undefined,
};
},
props: {
selectIds: {
type: Set
},
selectProjectNames: {
type: Set
},
selectProjectId: {
type: Set
}
},
watch: {
'condition.filterText'(val) {
this.$refs.nodeTree.filter(val);
},
},
methods: {
openOneClickOperation() {
this.initModule();
this.oneClickOperationVisible = true;
},
getPath(id) {
let path = this.moduleOptions.filter(function (item) {
return item.id === id ? item.path : "";
});
return path[0].path;
},
confirm() {
if (!this.currentModule) {
this.$warning("请选择一个模块");
return;
}
if (this.currentModule.id === "root") {
this.$warning("不能选根模块，请重新选择一个模块");
return;
}
this.loading = true;
let arr = Array.from(this.selectIds);
let obj = {testIds: arr, projectId: getCurrentProjectID(), modulePath: this.getPath(this.currentModule.id), moduleId: this.currentModule.id};
this.$post("/api/historicalDataUpgrade", obj, response => {
this.loading = false;
this.$success(this.$t('organization.integration.successful_operation'));
this.oneClickOperationVisible = false;
})
},
initModule() {
let url = "/api/automation/module/list/" + getCurrentProjectID();
this.$get(url, response => {
if (response.data != undefined && response.data != null) {
this.data = response.data;
let modules = [];
this.data.forEach(node => {
buildNodePath(node, {path: ''}, modules);
});
this.moduleOptions = modules;
}
});
},
handleClose() {
this.ruleForm = {}
},
edit(param) {
param.projectId = getCurrentProjectID();
param.protocol = this.condition.protocol;
this.$post("/api/automation/module/edit", param, () => {
this.$success(this.$t('commons.save_success'));
this.initModule();
this.refresh();
}, (error) => {
this.initModule();
});
},
add(param) {
param.projectId = getCurrentProjectID();
param.protocol = this.condition.protocol;
this.$post("/api/automation/module/add", param, () => {
this.$success(this.$t('commons.save_success'));
this.initModule();
}, (error) => {
this.initModule();
});
},
remove(nodeIds) {
this.$post("/api/automation/module/delete", nodeIds, () => {
this.initModule();
this.refresh();
}, (error) => {
this.initModule();
});
},
drag(param, list) {
this.$post("/api/automation/module/drag", param, () => {
this.$post("/api/automation/module/pos", list, () => {
this.initModule();
});
}, (error) => {
this.initModule();
});
},
nodeChange(node, nodeIds, pNodes) {
this.currentModule = node.data;
this.condition.trashEnable = false;
if (node.data.id === 'root') {
this.$emit("nodeSelectEvent", node, [], pNodes);
} else {
this.$emit("nodeSelectEvent", node, nodeIds, pNodes);
}
},
saveAsEdit(data) {
this.$emit('saveAsEdit', data);
},
refresh() {
this.$emit("refreshTable");
},
addScenario() {
if (!getCurrentProjectID()) {
this.$warning(this.$t('commons.check_project_tip'));
return;
}
this.$refs.basisScenario.open(this.currentModule);
},
enableTrash() {
this.condition.trashEnable = true;
}
}
}
</script>
<style scoped>
</style>

10
frontend/src/business/components/common/head/HeaderTopMenus.vue
View File

@ -82,23 +82,13 @@ export default {
this.registerEvents();
},
computed: {
...mapGetters([
'isNewVersion',
'isOldVersion',
])
},
methods: {
handleSelect(index) {
this.activeIndex = index;
},
active() {
if (this.activeIndex === '/api') {
if (this.isNewVersion) {
window.location.href = "/#/api/home";
} else if (this.isOldVersion) {
window.location.href = "/#/api/home_obsolete";
}
}
},
check(key) {

4
frontend/src/business/components/common/head/HeaderUser.vue
View File

@ -39,10 +39,6 @@ export default {
currentUser: () => {
return getCurrentUser();
},
...mapGetters([
'isNewVersion',
'isOldVersion',
])
},
methods: {
logout: function () {

6
frontend/src/business/components/common/head/SearchList.vue
View File

@ -49,12 +49,6 @@ export default {
inject: [
'reload'
],
computed: {
...mapGetters([
'isNewVersion',
'isOldVersion',
]),
},
data() {
return {
result: {},

2
frontend/src/store/getters.js
View File

@ -1,6 +1,4 @@
const getters = {
isNewVersion: state => state.versionSwitch === 'new',
isOldVersion: state => state.versionSwitch === 'old',
// getTestCaseNodePath(state, nodeId) {
// for (const index in state.moduleOptions) {
// let item = state.moduleOptions[index];