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

5
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"
@ -1209,7 +1210,7 @@ export default {
if (node.parent && node.parent.data && node.parent.data.id) { if (node.parent && node.parent.data && node.parent.data.id) {
this.evaluationParent(node.parent, status); this.evaluationParent(node.parent, status);
} }
if (node.data.code === 'ERROR') { if (node.data.code === 'ERROR') {
return; return;
} }
if (node.data.code === 'FAKE_ERROR') { if (node.data.code === 'FAKE_ERROR') {
@ -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) => {

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

@ -1,39 +1,51 @@
<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">
:show-checkbox="multiple" <el-input size="mini" prefix-icon="el-icon-search" v-model="filterText"> </el-input>
:node-key="obj.id" <el-tree
:check-strictly="checkStrictly" class="common-tree"
:expand-on-click-node="multiple&&expandClickNode" :style="{ minWidth: `${popoverWidth}px !important` }"
:check-on-click-node="checkClickNode" :width="width"
:highlight-current="true" ref="tree"
@check="clickDeal" :data="treeData"
:default-checked-keys="checkedId" :props="obj"
:filter-node-method="filterNode" :show-checkbox="multiple"
@node-click="nodeClick"/> :node-key="obj.id"
<el-select slot="reference" ref="select" :size="size" :check-strictly="checkStrictly"
v-model="returnDataKeys" :expand-on-click-node="multiple && expandClickNode"
:multiple="multiple" :check-on-click-node="checkClickNode"
:clearable="clearable" :default-expand-all="defaultExpandAll"
:collapse-tags="collapseTags" :highlight-current="true"
:disabled="disabled" @check="clickDeal"
@click.native="selectClick" :default-checked-keys="checkedId"
@remove-tag="removeTag" :filter-node-method="filterNode"
@clear="clean" @node-click="nodeClick" />
:placeholder="placeholder" <el-select
class="ms-tree-select"> slot="reference"
ref="select"
:size="size"
v-model="returnDataKeys"
:multiple="multiple"
:clearable="clearable"
:collapse-tags="collapseTags"
:disabled="disabled"
@click.native="selectClick"
@remove-tag="removeTag"
@clear="clean"
:placeholder="placeholder"
class="ms-tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
<el-row> <el-row>
<el-button v-if="multiple" class="ok" @click="isShowSelect=false" size="mini" type="text"> <el-button v-if="multiple" class="ok" @click="isShowSelect = false" size="mini" type="text">
{{ $t('commons.confirm') }} {{ $t('commons.confirm') }}
</el-button> </el-button>
</el-row> </el-row>
@ -42,7 +54,6 @@
</template> </template>
<script> <script>
export default { export default {
name: 'SelectTree', name: 'SelectTree',
props: { props: {
@ -51,22 +62,22 @@ export default {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
obj: { obj: {
type: Object, type: Object,
required: false, required: false,
default: () => { default: () => {
return { return {
id: 'id',// ID id: 'id', // ID
label: 'name',// 显示名称 label: 'name', // 显示名称
children: 'children', //子级字段名 children: 'children', //子级字段名
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,28 +267,32 @@ 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 };
}); });
this.returnDataKeys = this.options.map((item) => { this.returnDataKeys = this.options.map((item) => {
return item.value; return item.value;
@ -289,7 +316,7 @@ export default {
}, },
//单选:清空选中 //单选:清空选中
clean() { clean() {
this.$refs.tree.setCurrentKey(null);//清除树选中key this.$refs.tree.setCurrentKey(null); //清除树选中key
this.returnDatas = null; this.returnDatas = null;
this.returnDataKeys = ''; this.returnDataKeys = '';
this.selectNodeIds = []; this.selectNodeIds = [];
@ -308,9 +335,9 @@ export default {
//单选：设置、初始化对象 //单选：设置、初始化对象
setData(data) { setData(data) {
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,34 +347,36 @@ 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);
this.options.push({label: node.label, value: node.key}); this.options.push({ label: node.label, value: node.key });
return {label: node.label, value: node.key}; return { label: node.label, value: node.key };
} }
}); });
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%;
@ -499,16 +527,13 @@ export default {
z-index: 111; z-index: 111;
} }
: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>

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

@ -2,38 +2,61 @@
<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']"
:create-tip="$t('test_resource_pool.create_resource_pool')" :condition.sync="condition"
:title="$t('commons.test_resource_pool')"/> @search="search"
@create="create"
:create-tip="$t('test_resource_pool.create_resource_pool')"
:title="$t('commons.test_resource_pool')"
/>
</template> </template>
<el-table border class="adjust-table" :data="items" style="width: 100%" <el-table
:height="screenHeight" border
class="adjust-table"
:data="items"
style="width: 100%"
: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
inactive-color="#DCDFE6" v-model="scope.row.status"
active-value="VALID" inactive-color="#DCDFE6"
inactive-value="INVALID" active-value="VALID"
@change="changeSwitch(scope.row)" inactive-value="INVALID"
@change="changeSwitch(scope.row)"
/> />
</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,74 +64,122 @@
<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
:delete-permission="['SYSTEM_TEST_POOL:READ+DELETE']" :edit-permission="['SYSTEM_TEST_POOL:READ+EDIT']"
@editClick="edit(scope.row)" @deleteClick="del(scope.row)"/> :delete-permission="['SYSTEM_TEST_POOL:READ+DELETE']"
@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>
<el-form-item :label="$t('commons.description')" prop="description"> <el-form-item :label="$t('commons.description')" prop="description">
<el-input v-model="form.description" autocomplete="off"/> <el-input v-model="form.description" autocomplete="off" />
</el-form-item> </el-form-item>
<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
<el-switch v-model="form.backendListener"/> :label="$t('test_resource_pool.backend_listener')"
prop="backendListener"
v-xpack
>
<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,64 +191,96 @@
<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>
</template> </template>
<el-input v-model="item.namespace" type="text"/> <el-input v-model="item.namespace" type="text" />
</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="Deploy Name" :rules="requiredRules"> <el-form-item label="Deploy Name" :rules="requiredRules">
<el-input v-model="item.deployName"/> <el-input v-model="item.deployName" />
</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="API Image"> <el-form-item label="API Image">
<el-input v-model="item.apiImage" type="text"/> <el-input v-model="item.apiImage" type="text" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</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")
effect="light" }}</el-link>
trigger="hover"> <el-tooltip
:content="
$t('system.test_resource_pool.edit_job_template_tip')
"
effect="light"
trigger="hover"
>
<i class="el-icon-info"></i> <i class="el-icon-info"></i>
</el-tooltip> </el-tooltip>
</template> </template>
@ -185,90 +288,122 @@
</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
<template v-slot:default="{row}"> >
<el-input size="small" v-model="row.ip" autocomplete="off"/> <el-table-column type="index" width="50" />
<el-table-column align="center" prop="ip" label="IP">
<template v-slot:default="{ row }">
<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" <template v-slot:default="{ row }">
prop="port" <el-input-number
label="Port"> size="small"
<template v-slot:default="{row}"> v-model="row.port"
<el-input-number size="small" v-model="row.port" :min="1" :max="65535"></el-input-number> :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}"> >
<el-input-number size="small" v-model="row.monitorPort" :min="1" :max="65535"></el-input-number> <template v-slot:default="{ row }">
<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}"> >
<el-input-number size="small" v-model="row.maxConcurrency" :min="1" <template v-slot:default="{ row }">
:max="1000000000"></el-input-number> <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}"> <template v-slot:default="{ $index }">
<el-checkbox size="small" v-model="row.enable"/> <el-button
@click="removeResourceInfo($index)"
type="danger"
icon="el-icon-delete"
size="mini"
circle
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" :label="$t('commons.operating')">
<template v-slot:default="{$index}">
<el-button @click="removeResourceInfo($index)" type="danger" icon="el-icon-delete" size="mini"
circle/>
</template>
</el-table-column>
</el-table> </el-table>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<batch-add-resource ref="batchAddResource" @batchSave="batchSave"/> <batch-add-resource ref="batchAddResource" @batchSave="batchSave" />
</el-form> </el-form>
</div> </div>
<template v-slot:footer> <template v-slot:footer>
<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,24 +414,34 @@ 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 {
checkResourcePoolUse, checkResourcePoolUse,
createResourcePool, createResourcePool,
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";
import JobTemplate from "@/business/system/components/JobTemplate"; 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,
@ -310,36 +455,59 @@ export default {
currentPage: 1, currentPage: 1,
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,28 +516,31 @@ export default {
}, },
methods: { methods: {
initTableData() { initTableData() {
this.loading = getResourcePoolPages(this.currentPage, this.pageSize, this.condition) this.loading = getResourcePoolPages(
.then(res => { this.currentPage,
let {listObject, itemCount} = res.data; this.pageSize,
this.items = listObject; this.condition
this.total = itemCount; ).then((res) => {
}); let { listObject, itemCount } = res.data;
this.items = listObject;
this.total = itemCount;
});
}, },
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.loading = delResourcePoolById(row.id).then(() => { this,
this.initTableData(); this.$t("test_resource_pool.delete_prompt"),
this.$success(this.$t('commons.delete_success')); () => {
}) this.loading = delResourcePoolById(row.id).then(() => {
}, () => { this.initTableData();
this.$info(this.$t('commons.delete_cancel')); this.$success(this.$t("commons.delete_success"));
}) });
},
() => {
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,41 +720,47 @@ 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();
}); });
}); });
}, },
closeFunc() { closeFunc() {
this.form = {performance: true, api: true, backendListener: true}; this.form = { performance: true, api: true, backendListener: true };
this.dialogVisible = false; this.dialogVisible = false;
removeGoBackListener(this.closeFunc); removeGoBackListener(this.closeFunc);
}, },
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"),
this.updatePoolStatus(row); cancelButtonText: this.$t("commons.cancel"),
}).catch(() => { type: "warning",
row.status = 'VALID'; }
this.result.loading = false; )
this.$info(this.$t('commons.cancel')); .then(() => {
}); this.updatePoolStatus(row);
})
.catch(() => {
row.status = "VALID";
this.result.loading = false;
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()
if (!res.data) { .then((res) => {
this.apiImageTag = 'dev'; if (!res.data) {
return; this.apiImageTag = "dev";
} return;
let i = res.data.lastIndexOf('-'); }
this.apiImageTag = res.data.substring(0, i); let i = res.data.lastIndexOf("-");
}).catch(err => { this.apiImageTag = res.data.substring(0, i);
}) })
.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>