mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-02 20:19:16 +08:00
refactor: 重构资源池页面
This commit is contained in:
Captain.B
parent
69715c2af7
commit
b99e219d7c
@ -47,14 +47,14 @@
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('test_resource_pool.create_resource_pool')"
|
||||
:visible.sync="createVisible" width="70%"
|
||||
:title="form.id ? $t('test_resource_pool.update_resource_pool') : $t('test_resource_pool.create_resource_pool')"
|
||||
:visible.sync="dialogVisible" width="70%"
|
||||
@closed="closeFunc"
|
||||
:destroy-on-close="true"
|
||||
v-loading="result.loading"
|
||||
>
|
||||
<el-form :model="form" label-position="right" label-width="120px" size="small" :rules="rule"
|
||||
ref="createTestResourcePoolForm">
|
||||
ref="testResourcePoolForm">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="form.name" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
@ -137,105 +137,15 @@
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<ms-dialog-footer
|
||||
@cancel="createVisible = false"
|
||||
@confirm="createTestResourcePool('createTestResourcePoolForm')"/>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
v-loading="result.loading"
|
||||
:title="$t('test_resource_pool.update_resource_pool')" :visible.sync="updateVisible" width="70%"
|
||||
:destroy-on-close="true"
|
||||
@close="closeFunc">
|
||||
<el-form :model="form" label-position="right" label-width="120px" size="small" :rules="rule"
|
||||
ref="updateTestResourcePoolForm">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="form.name" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.description')" prop="description">
|
||||
<el-input v-model="form.description" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.image')" prop="image">
|
||||
<el-input v-model="form.image" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('test_resource_pool.type')" prop="type">
|
||||
<el-select v-model="form.type" :placeholder="$t('test_resource_pool.select_pool_type')"
|
||||
@change="changeResourceType()">
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
<div v-for="(item,index) in infoList " :key="index">
|
||||
<div class="node-line" v-if="form.type === 'K8S'" v-xpack>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="Master URL"
|
||||
:rules="requiredRules">
|
||||
<el-input v-model="item.masterUrl" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="Token"
|
||||
:rules="requiredRules">
|
||||
<el-input v-model="item.token" type="password" show-password autocomplete="off"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('test_resource_pool.max_threads')"
|
||||
:rules="requiredRules">
|
||||
<el-input-number v-model="item.maxConcurrency" :min="1" :max="1000000000"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="node-line" v-if="form.type === 'NODE'">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="IP" :rules="requiredRules">
|
||||
<el-input v-model="item.ip" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="Port" style="padding-left: 20px"
|
||||
:rules="requiredRules">
|
||||
<el-input-number v-model="item.port" :min="1" :max="65535"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('test_resource_pool.max_threads')"
|
||||
:rules="requiredRules"
|
||||
style="padding-left: 20px">
|
||||
<el-input-number v-model="item.maxConcurrency" :min="1" :max="1000000000"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :offset="2" :span="2">
|
||||
<span class="box">
|
||||
<el-button @click="addResourceInfo()" type="success" size="mini" circle>
|
||||
<font-awesome-icon :icon="['fas', 'plus']"/>
|
||||
</el-button>
|
||||
</span>
|
||||
<span class="box">
|
||||
<el-button @click="removeResourceInfo(index)" type="danger" size="mini" circle>
|
||||
<font-awesome-icon :icon="['fas', 'minus']"/>
|
||||
</el-button>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
v-if="form.id"
|
||||
@cancel="dialogVisible = false"
|
||||
@confirm="updateTestResourcePool()"/>
|
||||
<ms-dialog-footer
|
||||
@cancel="updateVisible = false"
|
||||
@confirm="updateTestResourcePool('updateTestResourcePoolForm')"/>
|
||||
v-else
|
||||
@cancel="dialogVisible = false"
|
||||
@confirm="createTestResourcePool()"/>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -245,7 +155,7 @@ import MsTablePagination from "../../common/pagination/TablePagination";
|
||||
import MsTableHeader from "../../common/components/MsTableHeader";
|
||||
import MsTableOperator from "../../common/components/MsTableOperator";
|
||||
import MsDialogFooter from "../../common/components/MsDialogFooter";
|
||||
import {listenGoBack, removeGoBackListener} from "../../../../common/js/utils";
|
||||
import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
|
||||
|
||||
export default {
|
||||
name: "MsTestResourcePool",
|
||||
@ -253,9 +163,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
createVisible: false,
|
||||
dialogVisible: false,
|
||||
infoList: [],
|
||||
updateVisible: false,
|
||||
queryPath: "testresourcepool/list",
|
||||
condition: {},
|
||||
items: [],
|
||||
@ -340,11 +249,11 @@ export default {
|
||||
this.initTableData();
|
||||
},
|
||||
create() {
|
||||
this.createVisible = true;
|
||||
this.dialogVisible = true;
|
||||
listenGoBack(this.closeFunc);
|
||||
},
|
||||
edit(row) {
|
||||
this.updateVisible = true;
|
||||
this.dialogVisible = true;
|
||||
this.form = JSON.parse(JSON.stringify(row));
|
||||
this.convertResources();
|
||||
listenGoBack(this.closeFunc);
|
||||
@ -374,8 +283,8 @@ export default {
|
||||
this.$info(this.$t('commons.delete_cancel'));
|
||||
});
|
||||
},
|
||||
createTestResourcePool(createTestResourcePoolForm) {
|
||||
this.$refs[createTestResourcePoolForm].validate(valid => {
|
||||
createTestResourcePool() {
|
||||
this.$refs.testResourcePoolForm.validate(valid => {
|
||||
if (valid) {
|
||||
let vri = this.validateResourceInfo();
|
||||
if (vri.validate) {
|
||||
@ -385,7 +294,7 @@ export default {
|
||||
type: 'success',
|
||||
message: this.$t('commons.save_success')
|
||||
},
|
||||
this.createVisible = false,
|
||||
this.dialogVisible = false,
|
||||
this.initTableData());
|
||||
});
|
||||
} else {
|
||||
@ -411,8 +320,8 @@ export default {
|
||||
});
|
||||
this.form.resources = resources;
|
||||
},
|
||||
updateTestResourcePool(updateTestResourcePoolForm) {
|
||||
this.$refs[updateTestResourcePoolForm].validate(valid => {
|
||||
updateTestResourcePool() {
|
||||
this.$refs.testResourcePoolForm.validate(valid => {
|
||||
if (valid) {
|
||||
let vri = this.validateResourceInfo();
|
||||
if (vri.validate) {
|
||||
@ -422,7 +331,7 @@ export default {
|
||||
type: 'success',
|
||||
message: this.$t('commons.modify_success')
|
||||
},
|
||||
this.updateVisible = false,
|
||||
this.dialogVisible = false,
|
||||
this.initTableData(),
|
||||
self.loading = false);
|
||||
});
|
||||
@ -437,8 +346,7 @@ export default {
|
||||
},
|
||||
closeFunc() {
|
||||
this.form = {};
|
||||
this.updateVisible = false;
|
||||
this.createVisible = false;
|
||||
this.dialogVisible = false;
|
||||
removeGoBackListener(this.closeFunc);
|
||||
},
|
||||
changeSwitch(row) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user