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

style(接口测试): 编辑场景模块选项样式调整 

【【接口测试】github#30574，接口场景模块展示-在修改场景时无法直接定位到当前场景所在模块，需要一层一层打开并且当有多层级目录时无法展示完整】https://www.tapd.cn/55049933/bugtrace/bugs/view?bug_id=1155049933001040224

Signed-off-by: fit2-zhao <yong.zhao@fit2cloud.com>
This commit is contained in:
fit2-zhao 2024-07-03 14:48:41 +08:00 committed by Craftsman
parent b42f7311a7
commit 0911a02805
3 changed files with 571 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
api-test/frontend/src/business/automation/scenario/EditApiScenario.vue
View File

@ -24,6 +24,7 @@
<ms-select-tree <ms-select-tree
size="small" size="small"
:data="moduleOptions" :data="moduleOptions"
:default-expand-all="true"
:defaultKey="currentScenario.apiScenarioModuleId" :defaultKey="currentScenario.apiScenarioModuleId"
@getValue="setModule" @getValue="setModule"
:obj="moduleObj" :obj="moduleObj"
@ -2409,7 +2410,7 @@ export default {
let currentEnvironment = {}; let currentEnvironment = {};
this.environments.forEach((environment) => { this.environments.forEach((environment) => {
// 找到原始环境和数据源名称 // 找到原始环境和数据源名称
if (environment.id === request.originalEnvironmentId !== envId) { if ((environment.id === request.originalEnvironmentId) !== envId) {
parseEnvironment(environment); parseEnvironment(environment);
if (environment.config && environment.config.databaseConfigs) { if (environment.config && environment.config.databaseConfigs) {
environment.config.databaseConfigs.forEach((item) => { environment.config.databaseConfigs.forEach((item) => {

183
framework/sdk-parent/frontend/src/components/select-tree/SelectTree.vue
View File

@ -1,25 +1,37 @@
<template> <template>
<div v-loading="loading" ref="projectButton"> <div v-loading="loading" ref="projectButton">
<div class="mask" v-show="isShowSelect"></div> <div class="mask" v-show="isShowSelect"></div>
<el-popover placement="bottom-start" :width="popoverWidth" trigger="manual" v-model="isShowSelect" <el-popover
@hide="popoverHide" @show="show"> placement="bottom-start"
<el-input trigger="manual"
size="mini" v-model="isShowSelect"
prefix-icon="el-icon-search" :style="{ minWidth: `${popoverWidth}px !important` }"
v-model="filterText"> style="min-width: 200px !important; max-height: 400px; overflow: auto"
</el-input> @hide="popoverHide"
<el-tree class="common-tree" :width="width" ref="tree" :data="treeData" :props="obj" @show="show">
<el-input size="mini" prefix-icon="el-icon-search" v-model="filterText"> </el-input>
<el-tree
class="common-tree"
:style="{ minWidth: `${popoverWidth}px !important` }"
:width="width"
ref="tree"
:data="treeData"
:props="obj"
:show-checkbox="multiple" :show-checkbox="multiple"
:node-key="obj.id" :node-key="obj.id"
:check-strictly="checkStrictly" :check-strictly="checkStrictly"
:expand-on-click-node="multiple && expandClickNode" :expand-on-click-node="multiple && expandClickNode"
:check-on-click-node="checkClickNode" :check-on-click-node="checkClickNode"
:default-expand-all="defaultExpandAll"
:highlight-current="true" :highlight-current="true"
@check="clickDeal" @check="clickDeal"
:default-checked-keys="checkedId" :default-checked-keys="checkedId"
:filter-node-method="filterNode" :filter-node-method="filterNode"
@node-click="nodeClick" /> @node-click="nodeClick" />
<el-select slot="reference" ref="select" :size="size" <el-select
slot="reference"
ref="select"
:size="size"
v-model="returnDataKeys" v-model="returnDataKeys"
:multiple="multiple" :multiple="multiple"
:clearable="clearable" :clearable="clearable"
@ -42,7 +54,6 @@
</template> </template>
<script> <script>
export default { export default {
name: 'SelectTree', name: 'SelectTree',
props: { props: {
@ -51,7 +62,7 @@ export default {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
obj: { obj: {
type: Object, type: Object,
@ -64,9 +75,9 @@ export default {
path: 'path', //路径 path: 'path', //路径
content: 'content', //描述 content: 'content', //描述
pid: 'pid', //父id pid: 'pid', //父id
disabled: this.isDisabled disabled: this.isDisabled,
} };
} },
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
@ -77,91 +88,99 @@ export default {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
} },
}, },
// 配置是否可清空选择 // 配置是否可清空选择
clearable: { clearable: {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
} },
}, },
// 配置多选时是否将选中值按文字的形式展示 // 配置多选时是否将选中值按文字的形式展示
collapseTags: { collapseTags: {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
} },
}, },
// 显示复选框情况下，是否严格遵循父子不互相关联 // 显示复选框情况下，是否严格遵循父子不互相关联
checkStrictly: { checkStrictly: {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
}
}, },
},
defaultExpandAll: {
type: Boolean,
default() {
return false;
},
},
//多选是设置点击节点是否可以选中 //多选是设置点击节点是否可以选中
checkClickNode: { checkClickNode: {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
} },
}, },
//多选时：点击节点展开还是点三角标 //多选时：点击节点展开还是点三角标
expandClickNode: { expandClickNode: {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
} },
}, },
// 默认选中的节点key // 默认选中的节点key
defaultKey: { defaultKey: {
type: [Number, String, Array, Object], type: [Number, String, Array, Object],
default() { default() {
return []; return [];
} },
}, },
size: { size: {
type: String, type: String,
default() { default() {
return 'small'; return 'small';
} },
}, },
width: { width: {
type: String, type: String,
default() { default() {
return '100%'; return '100%';
} },
}, },
height: { height: {
type: String, type: String,
default() { default() {
return '300px'; return '300px';
} },
}, },
placeholder: { placeholder: {
type: String, type: String,
default() { default() {
return this.$t('el.select.placeholder'); return this.$t('el.select.placeholder');
} },
} },
}, },
//上面是父组件可传入参数 //上面是父组件可传入参数
data() { data() {
return { return {
popoverWidth: "0px",//下拉框大小 popoverWidth: '200px', //下拉框大小
isShowSelect: false, // 是否显示树状选择器 isShowSelect: false, // 是否显示树状选择器
options: [], //select option选项 options: [], //select option选项
returnDatas: [], //返回给父组件数组对象 returnDatas: [], //返回给父组件数组对象
returnDataKeys: [], //返回父组件数组主键值 returnDataKeys: [], //返回父组件数组主键值
filterText: "", filterText: '',
loading: false, loading: false,
checkedId: [], checkedId: [],
selectNodeIds: [] selectNodeIds: [],
}; };
}, },
computed: { computed: {
treeData() { // 若非树状结构，则转化为树状结构数据 treeData() {
// 若非树状结构，则转化为树状结构数据
return JSON.stringify(this.data).indexOf(this.obj.children) !== -1 ? this.data : this.switchTree(); return JSON.stringify(this.data).indexOf(this.obj.children) !== -1 ? this.data : this.switchTree();
}, },
}, },
@ -171,54 +190,57 @@ export default {
methods: { methods: {
updated() { updated() {
// 给多选树设置默认值 // 给多选树设置默认值
this.$refs.tree.setCheckedKeys(this.checkedId) this.$refs.tree.setCheckedKeys(this.checkedId);
}, },
clickDeal(currentObj, treeStatus) { clickDeal(currentObj, treeStatus) {
// 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。 // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中 let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中
// 选中 // 选中
if (selected !== -1) { if (selected !== -1) {
// 子节点只要被选中父节点就被选中 // 子节点只要被选中父节点就被选中
// this.selectedParent(currentObj) // this.selectedParent(currentObj)
// 统一处理子节点为相同的勾选状态 // 统一处理子节点为相同的勾选状态
this.uniteChildSame(currentObj, true) this.uniteChildSame(currentObj, true);
} else { } else {
// 未选中 处理子节点全部未选中 // 未选中 处理子节点全部未选中
if (currentObj.children && currentObj.children.length !== 0) { if (currentObj.children && currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, false) this.uniteChildSame(currentObj, false);
} }
} }
this.nodeClick(currentObj, treeStatus) this.nodeClick(currentObj, treeStatus);
}, },
// 统一处理子节点为相同的勾选状态 // 统一处理子节点为相同的勾选状态
uniteChildSame(treeList, isSelected) { uniteChildSame(treeList, isSelected) {
this.$refs.tree.setChecked(treeList.id, isSelected) this.$refs.tree.setChecked(treeList.id, isSelected);
if (treeList.children) { if (treeList.children) {
for (let i = 0; i < treeList.children.length; i++) { for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected) this.uniteChildSame(treeList.children[i], isSelected);
} }
} }
}, },
// 统一处理父节点为选中 // 统一处理父节点为选中
selectedParent(currentObj) { selectedParent(currentObj) {
let currentNode = this.$refs.tree.getNode(currentObj) let currentNode = this.$refs.tree.getNode(currentObj);
if (currentNode.parent.key !== undefined) { if (currentNode.parent.key !== undefined) {
this.$refs.tree.setChecked(currentNode.parent, true) this.$refs.tree.setChecked(currentNode.parent, true);
this.selectedParent(currentNode.parent) this.selectedParent(currentNode.parent);
} }
}, },
outsideClick() { outsideClick() {
this.isShowSelect = false; this.isShowSelect = false;
}, },
init() { init() {
if (this.defaultKey != undefined && this.defaultKey.length > 0) { if (this.defaultKey !== undefined && this.defaultKey.length > 0) {
if (this.multiple) { if (this.multiple) {
// 多选 // 多选
if (Object.prototype.toString.call(this.defaultKey).indexOf("Array") != -1) { if (Object.prototype.toString.call(this.defaultKey).indexOf('Array') !== -1) {
if (Object.prototype.toString.call(this.defaultKey[0]).indexOf("Object") != -1) {//对象 if (Object.prototype.toString.call(this.defaultKey[0]).indexOf('Object') !== -1) {
//对象
this.setDatas(this.defaultKey); this.setDatas(this.defaultKey);
} else if (Object.prototype.toString.call(this.defaultKey[0]).indexOf("Number") != -1 } else if (
|| Object.prototype.toString.call(this.defaultKey[0]).indexOf("String") != -1) { Object.prototype.toString.call(this.defaultKey[0]).indexOf('Number') !== -1 ||
Object.prototype.toString.call(this.defaultKey[0]).indexOf('String') !== -1
) {
this.setKeys(this.defaultKey); this.setKeys(this.defaultKey);
} else { } else {
return; return;
@ -226,12 +248,13 @@ export default {
} else { } else {
return; return;
} }
} else { } else {
// 单选 // 单选
if (Object.prototype.toString.call(this.defaultKey).indexOf("Number") != -1 if (
|| Object.prototype.toString.call(this.defaultKey).indexOf("String") != -1 Object.prototype.toString.call(this.defaultKey).indexOf('Number') !== -1 ||
|| Object.prototype.toString.call(this.defaultKey).indexOf("Object") != -1) { Object.prototype.toString.call(this.defaultKey).indexOf('String') !== -1 ||
Object.prototype.toString.call(this.defaultKey).indexOf('Object') !== -1
) {
this.setKey(this.defaultKey); this.setKey(this.defaultKey);
} else { } else {
return; return;
@ -244,25 +267,29 @@ export default {
}, },
//下拉框select点击[入口] //下拉框select点击[入口]
selectClick() { selectClick() {
this.$emit("selectClick") this.$emit('selectClick');
if (this.disabled) { if (this.disabled) {
return; return;
} }
this.$nextTick(function () {//设置下拉框自适应宽度 this.$nextTick(function () {
//设置下拉框自适应宽度
this.popoverWidth = this.$refs.select.$el.clientWidth - 26; this.popoverWidth = this.$refs.select.$el.clientWidth - 26;
}) });
//显示下拉框 //显示下拉框
return this.isShowSelect = !this.isShowSelect return (this.isShowSelect = !this.isShowSelect);
}, },
//单选: 树点击方法 //单选: 树点击方法
nodeClick(data, node) { nodeClick(data, node) {
if (!this.multiple) {//单选 if (!this.multiple) {
//单选
this.isShowSelect = false; this.isShowSelect = false;
this.setKey(node.key); this.setKey(node.key);
} else {//多选 } else {
//多选
let checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据 let checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
let t = []; let t = [];
this.options = checkedKeys.map((item) => {//设置option选项 this.options = checkedKeys.map((item) => {
//设置option选项
let node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node let node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
t.push(node.data); t.push(node.data);
return { label: node.label, value: node.key }; return { label: node.label, value: node.key };
@ -310,7 +337,7 @@ export default {
this.options = []; this.options = [];
this.options.push({ label: data[this.obj.label], value: data[this.obj.id] }); this.options.push({ label: data[this.obj.label], value: data[this.obj.id] });
this.returnDatas = data; this.returnDatas = data;
this.returnDataKeys = data[this.obj.id] this.returnDataKeys = data[this.obj.id];
this.selectNodeIds = []; this.selectNodeIds = [];
this.getChildNodeId(data, this.selectNodeIds); this.getChildNodeId(data, this.selectNodeIds);
}, },
@ -320,7 +347,8 @@ export default {
this.returnDataKeys = thisKeys; this.returnDataKeys = thisKeys;
let t = []; let t = [];
this.options = []; this.options = [];
thisKeys.map((item) => {//设置option选项 thisKeys.map((item) => {
//设置option选项
let node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node let node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
if (node) { if (node) {
t.push(node.data); t.push(node.data);
@ -329,25 +357,26 @@ export default {
} }
}); });
this.returnDatas = t; this.returnDatas = t;
this.popoverHide() this.popoverHide();
}, },
//多选:设置、初始化对象 //多选:设置、初始化对象
setDatas(data) { setDatas(data) {
this.$refs.tree.setCheckedNodes(data); this.$refs.tree.setCheckedNodes(data);
this.returnDatas = data; this.returnDatas = data;
let t = []; let t = [];
data.map((item) => {//设置option选项 data.map((item) => {
//设置option选项
t.push(item[this.obj.id]); t.push(item[this.obj.id]);
}); });
this.returnDataKeys = t; this.returnDataKeys = t;
this.popoverHide() this.popoverHide();
}, },
// 多选,删除任一select选项的回调 // 多选,删除任一select选项的回调
removeTag(val) { removeTag(val) {
this.$refs.tree.setChecked(val, false); //设置为未选中 this.$refs.tree.setChecked(val, false); //设置为未选中
let node = this.$refs.tree.getNode(val); //获取节点 let node = this.$refs.tree.getNode(val); //获取节点
if (!this.checkStrictly && node.childNodes.length > 0) { if (!this.checkStrictly && node.childNodes.length > 0) {
this.treeToList(node).map(item => { this.treeToList(node).map((item) => {
if (item.childNodes.length <= 0) { if (item.childNodes.length <= 0) {
this.$refs.tree.setChecked(item, false); this.$refs.tree.setChecked(item, false);
} }
@ -355,21 +384,20 @@ export default {
} }
this.nodeClick(); this.nodeClick();
this.popoverHide(); this.popoverHide();
}, },
show() { show() {
document.addEventListener('click', this.hidePanel, false) document.addEventListener('click', this.hidePanel, false);
}, },
//下拉框关闭执行 //下拉框关闭执行
popoverHide() { popoverHide() {
this.$emit('setSelectNodeIds', this.selectNodeIds); this.$emit('setSelectNodeIds', this.selectNodeIds);
this.$emit('getValue', this.returnDataKeys, this.returnDatas ? this.returnDatas : {}); this.$emit('getValue', this.returnDataKeys, this.returnDatas ? this.returnDatas : {});
document.removeEventListener('click', this.hidePanel, false) document.removeEventListener('click', this.hidePanel, false);
}, },
hidePanel(e) { hidePanel(e) {
if (!this.$refs.projectButton.contains(e.target)) { if (!this.$refs.projectButton.contains(e.target)) {
this.isShowSelect = false this.isShowSelect = false;
this.popoverHide() this.popoverHide();
} }
}, },
// 多选，清空所有勾选 // 多选，清空所有勾选
@ -422,9 +450,9 @@ export default {
return false; return false;
}, },
reload() { reload() {
this.loading = true this.loading = true;
this.$nextTick(() => { this.$nextTick(() => {
this.loading = false this.loading = false;
}); });
}, },
}, },
@ -435,13 +463,14 @@ export default {
// 隐藏select自带的下拉框 // 隐藏select自带的下拉框
this.$refs.select.blur(); this.$refs.select.blur();
}, },
treeData: {//监听tree数据 treeData: {
//监听tree数据
handler: function () { handler: function () {
this.$nextTick(() => { this.$nextTick(() => {
this.init(); this.init();
}) });
}, },
deep: true deep: true,
}, },
defaultKey: { defaultKey: {
handler: function () { handler: function () {
@ -452,7 +481,7 @@ export default {
} }
} }
}, },
deep: true deep: true,
}, },
data: { data: {
handler: function () { handler: function () {
@ -462,7 +491,7 @@ export default {
} }
} }
}, },
deep: true deep: true,
}, },
filterText(val) { filterText(val) {
this.$nextTick(() => { this.$nextTick(() => {
@ -474,10 +503,9 @@ export default {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
}); });
}, },
} },
}; };
</script> </script>
<style scoped> <style scoped>
.mask { .mask {
height: 100%; height: 100%;
@ -502,13 +530,10 @@ export default {
:deep(.el-tree-node__children) { :deep(.el-tree-node__children) {
overflow: inherit; overflow: inherit;
} }
.ok { .ok {
float: right; float: right;
} }
.el-row { .el-row {
padding-top: 0px !important; padding-top: 0px !important;
} }
</style> </style>

561
system-setting/frontend/src/business/system/pool/TestResourcePool.vue
View File

@ -2,25 +2,40 @@
<div> <div>
<el-card class="table-card" v-loading="loading"> <el-card class="table-card" v-loading="loading">
<template v-slot:header> <template v-slot:header>
<ms-table-header :create-permission="['SYSTEM_TEST_POOL:READ+CREATE']" :condition.sync="condition" <ms-table-header
@search="search" @create="create" :create-permission="['SYSTEM_TEST_POOL:READ+CREATE']"
:condition.sync="condition"
@search="search"
@create="create"
:create-tip="$t('test_resource_pool.create_resource_pool')" :create-tip="$t('test_resource_pool.create_resource_pool')"
:title="$t('commons.test_resource_pool')"/> :title="$t('commons.test_resource_pool')"
/>
</template> </template>
<el-table border class="adjust-table" :data="items" style="width: 100%" <el-table
border
class="adjust-table"
:data="items"
style="width: 100%"
:height="screenHeight" :height="screenHeight"
> >
<el-table-column prop="name" :label="$t('commons.name')" /> <el-table-column prop="name" :label="$t('commons.name')" />
<el-table-column prop="description" :label="$t('commons.description')"/> <el-table-column
prop="description"
:label="$t('commons.description')"
/>
<el-table-column prop="type" :label="$t('test_resource_pool.type')"> <el-table-column prop="type" :label="$t('test_resource_pool.type')">
<template v-slot:default="scope"> <template v-slot:default="scope">
<span v-if="scope.row.type === 'NODE'">Node</span> <span v-if="scope.row.type === 'NODE'">Node</span>
<span v-if="scope.row.type === 'K8S'" v-xpack>Kubernetes</span> <span v-if="scope.row.type === 'K8S'" v-xpack>Kubernetes</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="status" :label="$t('test_resource_pool.enable_disable')"> <el-table-column
prop="status"
:label="$t('test_resource_pool.enable_disable')"
>
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-switch v-model="scope.row.status" <el-switch
v-model="scope.row.status"
inactive-color="#DCDFE6" inactive-color="#DCDFE6"
active-value="VALID" active-value="VALID"
inactive-value="INVALID" inactive-value="INVALID"
@ -28,12 +43,20 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" :label="$t('commons.create_time')" width="180"> <el-table-column
prop="createTime"
:label="$t('commons.create_time')"
width="180"
>
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.createTime | datetimeFormat }}</span> <span>{{ scope.row.createTime | datetimeFormat }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="updateTime" :label="$t('commons.update_time')" width="180"> <el-table-column
prop="updateTime"
:label="$t('commons.update_time')"
width="180"
>
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.updateTime | datetimeFormat }}</span> <span>{{ scope.row.updateTime | datetimeFormat }}</span>
</template> </template>
@ -41,29 +64,47 @@
<el-table-column :label="$t('commons.operating')"> <el-table-column :label="$t('commons.operating')">
<template v-slot:default="scope"> <template v-slot:default="scope">
<div> <div>
<ms-table-operator :edit-permission="['SYSTEM_TEST_POOL:READ+EDIT']" <ms-table-operator
:edit-permission="['SYSTEM_TEST_POOL:READ+EDIT']"
:delete-permission="['SYSTEM_TEST_POOL:READ+DELETE']" :delete-permission="['SYSTEM_TEST_POOL:READ+DELETE']"
@editClick="edit(scope.row)" @deleteClick="del(scope.row)"/> @editClick="edit(scope.row)"
@deleteClick="del(scope.row)"
/>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize" <ms-table-pagination
:total="total"/> :change="initTableData"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"
/>
</el-card> </el-card>
<el-dialog <el-dialog
:close-on-click-modal="false" :close-on-click-modal="false"
:title="form.id ? $t('test_resource_pool.update_resource_pool') : $t('test_resource_pool.create_resource_pool')" :title="
:visible.sync="dialogVisible" width="80%" form.id
? $t('test_resource_pool.update_resource_pool')
: $t('test_resource_pool.create_resource_pool')
"
:visible.sync="dialogVisible"
width="80%"
top="5%" top="5%"
@closed="closeFunc" @closed="closeFunc"
:destroy-on-close="true" :destroy-on-close="true"
v-loading="dialogLoading" v-loading="dialogLoading"
> >
<div style="height: 60vh;overflow: auto;"> <div style="height: 60vh; overflow: auto">
<el-form :model="form" label-position="right" label-width="140px" size="small" :rules="rule" <el-form
ref="testResourcePoolForm"> :model="form"
label-position="right"
label-width="140px"
size="small"
:rules="rule"
ref="testResourcePoolForm"
>
<el-form-item :label="$t('commons.name')" prop="name"> <el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="form.name" autocomplete="off" /> <el-input v-model="form.name" autocomplete="off" />
</el-form-item> </el-form-item>
@ -73,42 +114,72 @@
<el-form-item :label="$t('commons.image')" prop="image"> <el-form-item :label="$t('commons.image')" prop="image">
<el-input v-model="form.image" /> <el-input v-model="form.image" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('test_resource_pool.backend_listener')" prop="backendListener" v-xpack> <el-form-item
:label="$t('test_resource_pool.backend_listener')"
prop="backendListener"
v-xpack
>
<el-switch v-model="form.backendListener" /> <el-switch v-model="form.backendListener" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('test_resource_pool.usage')" prop="usage"> <el-form-item :label="$t('test_resource_pool.usage')" prop="usage">
<el-checkbox :label="$t('commons.api')" v-model="form.api"></el-checkbox> <el-checkbox
<el-checkbox :label="$t('commons.performance')" v-model="form.performance"></el-checkbox> :label="$t('commons.api')"
v-model="form.api"
></el-checkbox>
<el-checkbox
:label="$t('commons.performance')"
v-model="form.performance"
></el-checkbox>
</el-form-item> </el-form-item>
<el-form-item label="JMeter HEAP" prop="HEAP"> <el-form-item label="JMeter HEAP" prop="HEAP">
<el-input v-model="form.heap" placeholder="-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m" maxlength="200" show-word-limit/> <el-input
v-model="form.heap"
placeholder="-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m"
maxlength="200"
show-word-limit
/>
</el-form-item> </el-form-item>
<el-form-item label="JMeter GC_ALGO" prop="GC_ALGO"> <el-form-item label="JMeter GC_ALGO" prop="GC_ALGO">
<el-input v-model="form.gcAlgo" <el-input
placeholder="-XX:+UseG1GC -XX:MaxGCPauseMillis=100 -XX:G1ReservePercent=20" maxlength="200" show-word-limit/> v-model="form.gcAlgo"
placeholder="-XX:+UseG1GC -XX:MaxGCPauseMillis=100 -XX:G1ReservePercent=20"
maxlength="200"
show-word-limit
/>
</el-form-item> </el-form-item>
<el-form-item prop="type" :label="$t('test_resource_pool.type')"> <el-form-item prop="type" :label="$t('test_resource_pool.type')">
<el-select v-model="form.type" :placeholder="$t('test_resource_pool.select_pool_type')" <el-select
@change="changeResourceType(form.type)"> v-model="form.type"
:placeholder="$t('test_resource_pool.select_pool_type')"
@change="changeResourceType(form.type)"
>
<el-option key="NODE" value="NODE" label="Node">Node</el-option> <el-option key="NODE" value="NODE" label="Node">Node</el-option>
<el-option key="K8S" value="K8S" label="Kubernetes" v-xpack>Kubernetes</el-option> <el-option key="K8S" value="K8S" label="Kubernetes" v-xpack
>Kubernetes</el-option
>
</el-select> </el-select>
</el-form-item> </el-form-item>
<div class="node-line" v-if="form.type === 'K8S'" v-xpack> <div class="node-line" v-if="form.type === 'K8S'" v-xpack>
<div v-for="(item, index) in infoList" :key="index"> <div v-for="(item, index) in infoList" :key="index">
<el-row> <el-row>
<el-col> <el-col>
<el-form-item label="Master URL" <el-form-item label="Master URL" :rules="requiredRules">
:rules="requiredRules"> <el-input
<el-input v-model="item.masterUrl" autocomplete="new-password"/> v-model="item.masterUrl"
autocomplete="new-password"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col> <el-col>
<el-form-item label="Token" <el-form-item label="Token" :rules="requiredRules">
:rules="requiredRules"> <el-input
<el-input v-model="item.token" type="password" show-password autocomplete="new-password"/> v-model="item.token"
type="password"
show-password
autocomplete="new-password"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -120,17 +191,36 @@
<el-popover <el-popover
placement="bottom" placement="bottom"
width="450" width="450"
trigger="hover"> trigger="hover"
>
<div> <div>
<strong>{{ $t('test_resource_pool.k8s_sa_tips') }}</strong><br> <strong>{{
<el-link type="primary" @click="downloadYaml(item, 'role')">role.yaml</el-link> $t("test_resource_pool.k8s_sa_tips")
}}</strong
><br />
<el-link
type="primary"
@click="downloadYaml(item, 'role')"
>role.yaml</el-link
>
</div> </div>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
<strong>{{ $t('test_resource_pool.k8s_deploy_type_tips') }}</strong><br> <strong>{{
<el-link type="primary" @click="downloadYaml(item, 'DaemonSet')">daemonset.yaml</el-link> $t("test_resource_pool.k8s_deploy_type_tips")
}}</strong
><br />
<el-link
type="primary"
@click="downloadYaml(item, 'DaemonSet')"
>daemonset.yaml</el-link
>
&nbsp; &nbsp;
<el-link type="primary" @click="downloadYaml(item, 'Deployment')">deployment.yaml</el-link> <el-link
type="primary"
@click="downloadYaml(item, 'Deployment')"
>deployment.yaml</el-link
>
</div> </div>
<i class="el-icon-info" slot="reference"></i> <i class="el-icon-info" slot="reference"></i>
</el-popover> </el-popover>
@ -155,29 +245,42 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<el-form-item :label="$t('test_resource_pool.max_threads')" <el-form-item
:rules="requiredRules"> :label="$t('test_resource_pool.max_threads')"
<el-input-number v-model="item.maxConcurrency" :min="1" :max="1000000000"/> :rules="requiredRules"
>
<el-input-number
v-model="item.maxConcurrency"
:min="1"
:max="1000000000"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item :label="$t('test_resource_pool.pod_thread_limit')" <el-form-item
:rules="requiredRules"> :label="$t('test_resource_pool.pod_thread_limit')"
<el-input-number v-model="item.podThreadLimit" :min="1" :max="1000000"/> :rules="requiredRules"
</el-form-item> >
</el-col> <el-input-number
<el-col :span="4"> v-model="item.podThreadLimit"
<el-form-item :label="$t('test_resource_pool.sync_jar')"> :min="1"
<el-checkbox v-model="item.enable"/> :max="1000000"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item> <el-form-item>
<template v-slot:label> <template v-slot:label>
<el-link type="primary" @click="jobTemplate">{{ $t('system.test_resource_pool.edit_job_template') }}</el-link> <el-link type="primary" @click="jobTemplate">{{
<el-tooltip :content="$t('system.test_resource_pool.edit_job_template_tip')" $t("system.test_resource_pool.edit_job_template")
}}</el-link>
<el-tooltip
:content="
$t('system.test_resource_pool.edit_job_template_tip')
"
effect="light" effect="light"
trigger="hover"> trigger="hover"
>
<i class="el-icon-info"></i> <i class="el-icon-info"></i>
</el-tooltip> </el-tooltip>
</template> </template>
@ -185,74 +288,104 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<job-template ref="jobTemplate" @saveJobTemplate="saveJobTemplate"/> <job-template
ref="jobTemplate"
@saveJobTemplate="saveJobTemplate"
/>
</div> </div>
<div class="node-line" v-if="form.type === 'NODE'"> <div class="node-line" v-if="form.type === 'NODE'">
<el-row> <el-row>
<el-col :span="22" :offset="2"> <el-col :span="22" :offset="2">
<el-row style="margin-bottom: 10px;"> <el-row style="margin-bottom: 10px">
<el-col :span="8"> <el-col :span="8">
<el-button icon="el-icon-circle-plus-outline" plain size="mini" <el-button
@click="addResourceInfo()"> icon="el-icon-circle-plus-outline"
{{ $t('commons.add') }} plain
size="mini"
@click="addResourceInfo()"
>
{{ $t("commons.add") }}
</el-button> </el-button>
<el-button icon="el-icon-circle-plus-outline" plain size="mini" <el-button
@click="batchAddResource"> icon="el-icon-circle-plus-outline"
{{ $t('commons.batch_add') }} plain
size="mini"
@click="batchAddResource"
>
{{ $t("commons.batch_add") }}
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-table :data="infoList" class="tb-edit" align="center" border highlight-current-row> <el-table
<el-table-column type="index" width="50"/> :data="infoList"
<el-table-column class="tb-edit"
align="center" align="center"
prop="ip" border
label="IP"> highlight-current-row
>
<el-table-column type="index" width="50" />
<el-table-column align="center" prop="ip" label="IP">
<template v-slot:default="{ row }"> <template v-slot:default="{ row }">
<el-input size="small" v-model="row.ip" autocomplete="off"/> <el-input
size="small"
v-model="row.ip"
autocomplete="off"
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" prop="port" label="Port">
align="center"
prop="port"
label="Port">
<template v-slot:default="{ row }"> <template v-slot:default="{ row }">
<el-input-number size="small" v-model="row.port" :min="1" :max="65535"></el-input-number> <el-input-number
size="small"
v-model="row.port"
:min="1"
:max="65535"
></el-input-number>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="monitorPort" prop="monitorPort"
label="Monitor"> label="Monitor"
>
<template v-slot:default="{ row }"> <template v-slot:default="{ row }">
<el-input-number size="small" v-model="row.monitorPort" :min="1" :max="65535"></el-input-number> <el-input-number
size="small"
v-model="row.monitorPort"
:min="1"
:max="65535"
></el-input-number>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="maxConcurrency" prop="maxConcurrency"
:label="$t('test_resource_pool.max_threads')"> :label="$t('test_resource_pool.max_threads')"
>
<template v-slot:default="{ row }"> <template v-slot:default="{ row }">
<el-input-number size="small" v-model="row.maxConcurrency" :min="1" <el-input-number
:max="1000000000"></el-input-number> size="small"
v-model="row.maxConcurrency"
:min="1"
:max="1000000000"
></el-input-number>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="enable" :label="$t('commons.operating')"
:label="$t('test_resource_pool.sync_jar')"> >
<template v-slot:default="{row}">
<el-checkbox size="small" v-model="row.enable"/>
</template>
</el-table-column>
<el-table-column align="center" :label="$t('commons.operating')">
<template v-slot:default="{ $index }"> <template v-slot:default="{ $index }">
<el-button @click="removeResourceInfo($index)" type="danger" icon="el-icon-delete" size="mini" <el-button
circle/> @click="removeResourceInfo($index)"
type="danger"
icon="el-icon-delete"
size="mini"
circle
/>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-col> </el-col>
</el-row> </el-row>
@ -264,11 +397,13 @@
<ms-dialog-footer <ms-dialog-footer
v-if="form.id" v-if="form.id"
@cancel="dialogVisible = false" @cancel="dialogVisible = false"
@confirm="updateTestResourcePool()"/> @confirm="updateTestResourcePool()"
/>
<ms-dialog-footer <ms-dialog-footer
v-else v-else
@cancel="dialogVisible = false" @cancel="dialogVisible = false"
@confirm="createTestResourcePool()"/> @confirm="createTestResourcePool()"
/>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
@ -279,7 +414,10 @@ import MsTablePagination from "metersphere-frontend/src/components/pagination/Ta
import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader"; import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader";
import MsTableOperator from "metersphere-frontend/src/components/MsTableOperator"; import MsTableOperator from "metersphere-frontend/src/components/MsTableOperator";
import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter"; import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
import {listenGoBack, removeGoBackListener} from "metersphere-frontend/src/utils"; import {
listenGoBack,
removeGoBackListener,
} from "metersphere-frontend/src/utils";
import BatchAddResource from "../components/BatchAddResource"; import BatchAddResource from "../components/BatchAddResource";
import { getYaml } from "./test-resource-pool"; import { getYaml } from "./test-resource-pool";
import { import {
@ -288,7 +426,7 @@ import {
delResourcePoolById, delResourcePoolById,
getResourcePoolPages, getResourcePoolPages,
modifyResourcePool, modifyResourcePool,
modifyResourcePoolStatus modifyResourcePoolStatus,
} from "../../../api/resource-pool"; } from "../../../api/resource-pool";
import { getSystemVersion } from "../../../api/system"; import { getSystemVersion } from "../../../api/system";
import { operationConfirm } from "metersphere-frontend/src/utils"; import { operationConfirm } from "metersphere-frontend/src/utils";
@ -296,7 +434,14 @@ import JobTemplate from "@/business/system/components/JobTemplate";
export default { export default {
name: "MsTestResourcePool", name: "MsTestResourcePool",
components: {JobTemplate, BatchAddResource, MsTablePagination, MsTableHeader, MsTableOperator, MsDialogFooter}, components: {
JobTemplate,
BatchAddResource,
MsTablePagination,
MsTableHeader,
MsTableOperator,
MsDialogFooter,
},
data() { data() {
return { return {
loading: false, loading: false,
@ -311,35 +456,58 @@ export default {
pageSize: 10, pageSize: 10,
total: 0, total: 0,
form: { performance: true, api: true, backendListener: true }, form: { performance: true, api: true, backendListener: true },
screenHeight: 'calc(100vh - 155px)', screenHeight: "calc(100vh - 155px)",
requiredRules: [{required: true, message: this.$t('test_resource_pool.fill_the_data'), trigger: 'blur'}], requiredRules: [
{
required: true,
message: this.$t("test_resource_pool.fill_the_data"),
trigger: "blur",
},
],
rule: { rule: {
name: [ name: [
{required: true, message: this.$t('test_resource_pool.input_pool_name'), trigger: 'blur'}, {
{min: 2, max: 20, message: this.$t('commons.input_limit', [2, 20]), trigger: 'blur'}, required: true,
message: this.$t("test_resource_pool.input_pool_name"),
trigger: "blur",
},
{
min: 2,
max: 20,
message: this.$t("commons.input_limit", [2, 20]),
trigger: "blur",
},
{ {
required: true, required: true,
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/, pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
message: this.$t('test_resource_pool.pool_name_valid'), message: this.$t("test_resource_pool.pool_name_valid"),
trigger: 'blur' trigger: "blur",
} },
], ],
image: [ image: [
{max: 100, message: this.$t('commons.input_limit', [0, 100])} { max: 100, message: this.$t("commons.input_limit", [0, 100]) },
], ],
description: [ description: [
{max: 60, message: this.$t('commons.input_limit', [0, 60]), trigger: 'blur'} {
max: 60,
message: this.$t("commons.input_limit", [0, 60]),
trigger: "blur",
},
], ],
type: [ type: [
{required: true, message: this.$t('test_resource_pool.select_pool_type'), trigger: 'blur'} {
] required: true,
message: this.$t("test_resource_pool.select_pool_type"),
trigger: "blur",
},
],
}, },
updatePool: { updatePool: {
testName: '', testName: "",
haveTestUsePool: false haveTestUsePool: false,
}, },
apiImage: '', apiImage: "",
apiImageTag: '', apiImageTag: "",
}; };
}, },
activated() { activated() {
@ -348,8 +516,11 @@ export default {
}, },
methods: { methods: {
initTableData() { initTableData() {
this.loading = getResourcePoolPages(this.currentPage, this.pageSize, this.condition) this.loading = getResourcePoolPages(
.then(res => { this.currentPage,
this.pageSize,
this.condition
).then((res) => {
let { listObject, itemCount } = res.data; let { listObject, itemCount } = res.data;
this.items = listObject; this.items = listObject;
this.total = itemCount; this.total = itemCount;
@ -358,18 +529,18 @@ export default {
changeResourceType(type) { changeResourceType(type) {
this.infoList = []; this.infoList = [];
let info = {}; let info = {};
if (type === 'NODE') { if (type === "NODE") {
info.ip = ''; info.ip = "";
info.port = '8082'; info.port = "8082";
info.monitorPort = '9100'; info.monitorPort = "9100";
} }
if (type === 'K8S') { if (type === "K8S") {
info.masterUrl = ''; info.masterUrl = "";
info.token = ''; info.token = "";
info.namespace = ''; info.namespace = "";
info.podThreadLimit = 5000; info.podThreadLimit = 5000;
info.deployType = 'DaemonSet'; info.deployType = "DaemonSet";
info.deployName = 'ms-node-controller'; info.deployName = "ms-node-controller";
} }
info.maxConcurrency = 100; info.maxConcurrency = 100;
this.infoList.push(info); this.infoList.push(info);
@ -377,16 +548,16 @@ export default {
addResourceInfo() { addResourceInfo() {
this.infoList.push({ this.infoList.push({
port: '8082', port: "8082",
monitorPort: '9100', monitorPort: "9100",
maxConcurrency: 100 maxConcurrency: 100,
}); });
}, },
removeResourceInfo(index) { removeResourceInfo(index) {
if (this.infoList.length > 1) { if (this.infoList.length > 1) {
this.infoList.splice(index, 1); this.infoList.splice(index, 1);
} else { } else {
this.$warning(this.$t('test_resource_pool.cannot_remove_all_node')); this.$warning(this.$t("test_resource_pool.cannot_remove_all_node"));
} }
}, },
batchAddResource() { batchAddResource() {
@ -397,14 +568,14 @@ export default {
}, },
batchSave(resources) { batchSave(resources) {
let targets = this._handleBatchVars(resources); let targets = this._handleBatchVars(resources);
targets.forEach(row => { targets.forEach((row) => {
this.infoList.push(row); this.infoList.push(row);
}); });
}, },
_handleBatchVars(data) { _handleBatchVars(data) {
let params = data.split("\n"); let params = data.split("\n");
let keyValues = []; let keyValues = [];
params.forEach(item => { params.forEach((item) => {
let line = item.split(/，|,/); let line = item.split(/，|,/);
if (line.length < 3) { if (line.length < 3) {
return; return;
@ -419,23 +590,29 @@ export default {
return keyValues; return keyValues;
}, },
saveJobTemplate(template) { saveJobTemplate(template) {
this.infoList.forEach(item => { this.infoList.forEach((item) => {
item.jobTemplate = template; item.jobTemplate = template;
}); });
}, },
validateResourceInfo() { validateResourceInfo() {
if (this.infoList.length <= 0) { if (this.infoList.length <= 0) {
return {validate: false, msg: this.$t('test_resource_pool.cannot_empty')}; return {
validate: false,
msg: this.$t("test_resource_pool.cannot_empty"),
};
} }
let resourcePoolType = this.form.type; let resourcePoolType = this.form.type;
let resultValidate = {validate: true, msg: this.$t('test_resource_pool.fill_the_data')}; let resultValidate = {
this.infoList.forEach(info => { validate: true,
msg: this.$t("test_resource_pool.fill_the_data"),
};
this.infoList.forEach((info) => {
for (let key in info) { for (let key in info) {
// 排除非必填项 // 排除非必填项
if (key === 'nodeSelector' || key === 'apiImage') { if (key === "nodeSelector" || key === "apiImage") {
continue; continue;
} }
if (info[key] != '0' && !info[key]) { if (info[key] != "0" && !info[key]) {
resultValidate.validate = false; resultValidate.validate = false;
return false; return false;
} }
@ -446,11 +623,13 @@ export default {
return false; return false;
} }
if (resourcePoolType === 'K8S' && info.nodeSelector) { if (resourcePoolType === "K8S" && info.nodeSelector) {
let validate = this.isJsonString(info.nodeSelector); let validate = this.isJsonString(info.nodeSelector);
if (!validate) { if (!validate) {
resultValidate.validate = false; resultValidate.validate = false;
resultValidate.msg = this.$t('test_resource_pool.node_selector_invalid'); resultValidate.msg = this.$t(
"test_resource_pool.node_selector_invalid"
);
} }
} }
}); });
@ -475,26 +654,32 @@ export default {
this.form.resources.forEach(function (resource) { this.form.resources.forEach(function (resource) {
let configuration = JSON.parse(resource.configuration); let configuration = JSON.parse(resource.configuration);
configuration.id = resource.id; configuration.id = resource.id;
configuration.monitorPort = configuration.monitorPort || '9100'; configuration.monitorPort = configuration.monitorPort || "9100";
configuration.deployType = configuration.deployType || 'DaemonSet'; configuration.deployType = configuration.deployType || "DaemonSet";
configuration.deployName = configuration.deployName || 'ms-node-controller'; configuration.deployName =
configuration.deployName || "ms-node-controller";
resources.push(configuration); resources.push(configuration);
}); });
} }
this.infoList = resources; this.infoList = resources;
}, },
del(row) { del(row) {
operationConfirm(this, this.$t('test_resource_pool.delete_prompt'), () => { operationConfirm(
this,
this.$t("test_resource_pool.delete_prompt"),
() => {
this.loading = delResourcePoolById(row.id).then(() => { this.loading = delResourcePoolById(row.id).then(() => {
this.initTableData(); this.initTableData();
this.$success(this.$t('commons.delete_success')); this.$success(this.$t("commons.delete_success"));
}) });
}, () => { },
this.$info(this.$t('commons.delete_cancel')); () => {
}) this.$info(this.$t("commons.delete_cancel"));
}
);
}, },
createTestResourcePool() { createTestResourcePool() {
this.$refs.testResourcePoolForm.validate(valid => { this.$refs.testResourcePoolForm.validate((valid) => {
if (!valid) { if (!valid) {
return false; return false;
} }
@ -505,7 +690,7 @@ export default {
} }
this.convertSubmitResources(); this.convertSubmitResources();
this.dialogLoading = createResourcePool(this.form).then(() => { this.dialogLoading = createResourcePool(this.form).then(() => {
this.$success(this.$t('commons.save_success')); this.$success(this.$t("commons.save_success"));
this.dialogVisible = false; this.dialogVisible = false;
this.initTableData(); this.initTableData();
}); });
@ -516,7 +701,7 @@ export default {
let poolId = this.form.id; let poolId = this.form.id;
this.infoList.forEach(function (info) { this.infoList.forEach(function (info) {
let configuration = JSON.stringify(info); let configuration = JSON.stringify(info);
let resource = {"configuration": configuration, id: info.id}; let resource = { configuration: configuration, id: info.id };
if (poolId) { if (poolId) {
resource.testResourcePoolId = poolId; resource.testResourcePoolId = poolId;
} }
@ -525,7 +710,7 @@ export default {
this.form.resources = resources; this.form.resources = resources;
}, },
updateTestResourcePool() { updateTestResourcePool() {
this.$refs.testResourcePoolForm.validate(valid => { this.$refs.testResourcePoolForm.validate((valid) => {
if (!valid) { if (!valid) {
return false; return false;
} }
@ -535,7 +720,7 @@ export default {
} }
this.convertSubmitResources(); this.convertSubmitResources();
this.dialogLoading = modifyResourcePool(this.form).then(() => { this.dialogLoading = modifyResourcePool(this.form).then(() => {
this.$success(this.$t('commons.modify_success')); this.$success(this.$t("commons.modify_success"));
this.dialogVisible = false; this.dialogVisible = false;
this.initTableData(); this.initTableData();
}); });
@ -548,27 +733,33 @@ export default {
}, },
changeSwitch(row) { changeSwitch(row) {
this.result.loading = true; this.result.loading = true;
this.$info(this.$t('test_resource_pool.check_in'), 1000); this.$info(this.$t("test_resource_pool.check_in"), 1000);
if (row.status === 'VALID') { if (row.status === "VALID") {
this.updatePoolStatus(row); this.updatePoolStatus(row);
return false; return false;
} }
// 禁用时检查是否有正在使用该资源池的性能测试 // 禁用时检查是否有正在使用该资源池的性能测试
if (row.status === 'INVALID') { if (row.status === "INVALID") {
this.checkHaveTestUsePool(row).then(() => { this.checkHaveTestUsePool(row).then(() => {
if (this.updatePool && this.updatePool.haveTestUsePool) { if (this.updatePool && this.updatePool.haveTestUsePool) {
let testIndex = this.updatePool.testName.indexOf(";") let testIndex = this.updatePool.testName.indexOf(";");
let subPrompt = this.updatePool.testName.substring(0, testIndex); let subPrompt = this.updatePool.testName.substring(0, testIndex);
this.$confirm(this.$t('test_resource_pool.update_prompt', [subPrompt]), this.$t('commons.prompt'), { this.$confirm(
confirmButtonText: this.$t('commons.confirm'), this.$t("test_resource_pool.update_prompt", [subPrompt]),
cancelButtonText: this.$t('commons.cancel'), this.$t("commons.prompt"),
type: 'warning' {
}).then(() => { confirmButtonText: this.$t("commons.confirm"),
cancelButtonText: this.$t("commons.cancel"),
type: "warning",
}
)
.then(() => {
this.updatePoolStatus(row); this.updatePoolStatus(row);
}).catch(() => { })
row.status = 'VALID'; .catch(() => {
row.status = "VALID";
this.result.loading = false; this.result.loading = false;
this.$info(this.$t('commons.cancel')); this.$info(this.$t("commons.cancel"));
}); });
} else { } else {
this.updatePoolStatus(row); this.updatePoolStatus(row);
@ -577,50 +768,62 @@ export default {
} }
}, },
checkHaveTestUsePool(row) { checkHaveTestUsePool(row) {
return checkResourcePoolUse(row.id).then(res => { return checkResourcePoolUse(row.id).then((res) => {
this.updatePool = res.data; this.updatePool = res.data;
}) });
}, },
updatePoolStatus(row) { updatePoolStatus(row) {
modifyResourcePoolStatus(row.id, row.status).then(() => { modifyResourcePoolStatus(row.id, row.status)
this.$success(row.status === 'VALID' ? this.$t('commons.enable_success') : this.$t('commons.disable_success')); .then(() => {
}).catch(() => { this.$success(
this.$error(this.$t('test_resource_pool.status_change_failed')); row.status === "VALID"
row.status = 'INVALID'; ? this.$t("commons.enable_success")
: this.$t("commons.disable_success")
);
}) })
.catch(() => {
this.$error(this.$t("test_resource_pool.status_change_failed"));
row.status = "INVALID";
});
}, },
downloadYaml(item, deployType) { downloadYaml(item, deployType) {
if (!item.namespace) { if (!item.namespace) {
this.$error(this.$t('test_resource_pool.fill_the_data')); this.$error(this.$t("test_resource_pool.fill_the_data"));
return; return;
} }
if (!item.deployName) { if (!item.deployName) {
this.$error(this.$t('test_resource_pool.fill_the_data')); this.$error(this.$t("test_resource_pool.fill_the_data"));
return; return;
} }
let apiImage = 'registry.cn-qingdao.aliyuncs.com/metersphere/node-controller:' + this.apiImageTag; let apiImage =
"registry.cn-qingdao.aliyuncs.com/metersphere/node-controller:" +
this.apiImageTag;
if (item.apiImage) { if (item.apiImage) {
apiImage = item.apiImage; apiImage = item.apiImage;
} }
let yaml = getYaml(deployType, item.deployName, item.namespace, apiImage); let yaml = getYaml(deployType, item.deployName, item.namespace, apiImage);
let blob = new Blob([yaml], {type: 'application/yaml'}); let blob = new Blob([yaml], { type: "application/yaml" });
let url = URL.createObjectURL(blob); let url = URL.createObjectURL(blob);
let downloadAnchorNode = document.createElement('a') let downloadAnchorNode = document.createElement("a");
downloadAnchorNode.setAttribute("href", url); downloadAnchorNode.setAttribute("href", url);
downloadAnchorNode.setAttribute("download", deployType.toLowerCase() + ".yaml") downloadAnchorNode.setAttribute(
"download",
deployType.toLowerCase() + ".yaml"
);
downloadAnchorNode.click(); downloadAnchorNode.click();
downloadAnchorNode.remove(); downloadAnchorNode.remove();
}, },
getApiImageTag() { getApiImageTag() {
getSystemVersion().then(res => { getSystemVersion()
.then((res) => {
if (!res.data) { if (!res.data) {
this.apiImageTag = 'dev'; this.apiImageTag = "dev";
return; return;
} }
let i = res.data.lastIndexOf('-'); let i = res.data.lastIndexOf("-");
this.apiImageTag = res.data.substring(0, i); this.apiImageTag = res.data.substring(0, i);
}).catch(err => {
}) })
.catch((err) => {});
}, },
isJsonString(str) { isJsonString(str) {
try { try {
@ -631,15 +834,13 @@ export default {
return false; return false;
} }
return false; return false;
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
.box { .box {
padding-left: 5px; padding-left: 5px;
} }
</style> </style>