fix: 集群列表查询/删除

develop
时启龙 2024-09-09 18:22:09 +08:00
parent 4db64f287b
commit 1254045093
5 changed files with 96 additions and 244 deletions

View File

@ -2501,26 +2501,42 @@ export function policyColor(value) {
return obj[value] || 'danger' return obj[value] || 'danger'
} }
export function tceClusterColor(value) { export function ctstackClusterColor(value) {
const obj = { const obj = {
Running: 'success', normal: 'success',
Creating: 'warning', creating: 'warning',
Abnormal: 'danger', create_fail: 'danger',
Failed: 'danger', adjust: 'warning',
Initializing: 'warning', updating: 'warning',
enabled: 'success', suspend: 'warning',
disabled: 'danger' deleting: 'warning',
deleted: 'success',
delete_fail: 'danger',
resetting: 'warning',
resettled: 'success',
reset_fail: 'danger',
upgrading: 'warning',
upgrade_fail: 'danger'
} }
return obj[value] return obj[value]
} }
export function tceClusterText(value) { export function ctstackClusterText(value) {
const obj = { const obj = {
Running: '运行中', normal: '正常',
Creating: '创建中', creating: '创建中',
Abnormal: '异常', create_fail: '创建失败',
Failed: '失败', adjust: '规模调整中',
Initializing: '创建中' updating: '升级中',
suspend: '暂停',
deleting: '删除中',
deleted: '已删除',
delete_fail: '删除失败',
resetting: '节点重置中',
resettled: '节点已重置',
reset_fail: '节点重置失败',
upgrading: '集群升级中',
upgrade_fail: '集群升级失败'
} }
return obj[value] return obj[value]
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<cb-advance-table @cell-click="handleCellClick" :data="clusterTableData" :params="params" :columns="Clustercolumns" :get-list="getClusterData" :total="total" :loading="loading"> <cb-advance-table :data="clusterTableData" :params="params" :columns="Clustercolumns" :get-list="getClusterData" :total="total" :loading="loading" :search-configs="searchConfigs">
<template v-slot:action> <template v-slot:action>
<el-button type="primary" @click="addCluster()"> </el-button> <el-button type="primary" @click="addCluster()"> </el-button>
</template> </template>
@ -9,7 +9,7 @@
<span v-else>{{ val }}</span> <span v-else>{{ val }}</span>
</template> </template>
<template #clusterStatus="val"> <template #clusterStatus="val">
<cb-status-icon :type="val | tceClusterColor" v-if="val && val.toLowerCase() != 'stopped'">{{ val | tceClusterText }}</cb-status-icon> <cb-status-icon :type="val | ctstackClusterColor" v-if="val && val.toLowerCase() != 'stopped'">{{ val | ctstackClusterText }}</cb-status-icon>
</template> </template>
<template #clusterOs="val"> <template #clusterOs="val">
{{ val ? val : 'ubuntu16.04.1 LTSx86_64' }} {{ val ? val : 'ubuntu16.04.1 LTSx86_64' }}
@ -26,29 +26,23 @@
</template> </template>
</cb-advance-table> </cb-advance-table>
<detail v-if="detaildialogVisible" :detail="detail" @back="detaildialogVisible = false" :platform-object="platformObject"></detail> <detail v-if="detaildialogVisible" :detail="detail" @back="detaildialogVisible = false" :platform-object="platformObject"></detail>
<bind :add-data="bindData" v-if="bindData.dialog"></bind>
<service ref="serviceTable" v-if="serviceVisible" :vendorId="platformObject.vendorId" :clusterInfo="clusterInfo" @close="closeService"></service>
<modify-cluster :add-data="modifyClusterData" :vendor-id="platformObject.vendorId" v-if="modifyClusterData.dialog"></modify-cluster> <modify-cluster :add-data="modifyClusterData" :vendor-id="platformObject.vendorId" v-if="modifyClusterData.dialog"></modify-cluster>
<delete-cluster :data="deleteClusterData" :vendor-id="platformObject.vendorId" v-if="deleteClusterData.dialog" :clusterInfo="clusterInfo"></delete-cluster>
</div> </div>
</template> </template>
<script> <script>
// container TCE , // container TCE ,
import bind from './bind.vue' import { getClusterList, deleteCluster } from 'views/resource/ctstack/services/tke.js'
import { getClusterList } from 'views/resource/ctstack/services/tke.js'
import { removeFloatIp, detailFloatIp } from 'views/resource/ctstack/services/floatips.js' import { removeFloatIp, detailFloatIp } from 'views/resource/ctstack/services/floatips.js'
import { getRegion } from 'views/resource/ctstack/services/regions.js' import { getRegion } from 'views/resource/ctstack/services/regions.js'
import service from './service/index.vue'
import modifyCluster from './modifyCluster.vue' import modifyCluster from './modifyCluster.vue'
import deleteCluster from './deleteCluster.vue'
import webSocket from '@cmp/cmp-common/mixins/getGlobalSocket' import webSocket from '@cmp/cmp-common/mixins/getGlobalSocket'
import detail from './detail.vue' import detail from './detail.vue'
import AssignTenant from 'views/platform/assign/index.vue' import AssignTenant from 'views/platform/assign/index.vue'
const Clustercolumns = [ const Clustercolumns = [
{ {
label: 'ID', label: 'ID',
prop: 'clusterId', prop: 'clusterUuid',
disabled: true, disabled: true,
scopedSlots: { customRender: 'name' } scopedSlots: { customRender: 'name' }
}, },
@ -56,30 +50,39 @@ const Clustercolumns = [
label: '名称', label: '名称',
prop: 'name' prop: 'name'
}, },
{
label: '部署模式',
prop: 'clusterSpec'
},
{
label: '集群版本',
prop: 'version'
},
{
label: 'Service IP 地址范围',
prop: 'serviceCidr'
},
{
label: 'Pod IP地址范围',
prop: 'nodeCidr'
},
{
label: '资源池ID',
prop: 'resourceGroupUuid'
},
{
label: '弹性ip',
prop: 'eipUuid'
},
{
label: 'VPC',
prop: 'vpcUuid'
},
{ {
label: '状态', label: '状态',
prop: 'clusterStatus', prop: 'clusterStatus',
scopedSlots: { customRender: 'clusterStatus' } scopedSlots: { customRender: 'clusterStatus' }
}, },
{
label: '版本',
prop: 'clusterVersion',
scopedSlots: { customRender: 'clusterVersion' }
},
{
label: '类型',
prop: 'clusterType',
customRender(val) {
const map = {
INDEPENDENT_CLUSTER: '独立集群'
}
return map[val] || val
}
},
{
label: '节点数量',
prop: 'clusterNodeNum'
},
{ {
label: '所属租户', label: '所属租户',
prop: 'tenantName' prop: 'tenantName'
@ -88,11 +91,6 @@ const Clustercolumns = [
label: '描述', label: '描述',
prop: 'clusterDescription' prop: 'clusterDescription'
}, },
{
label: '系统',
prop: 'clusterOs',
scopedSlots: { customRender: 'clusterOs' }
},
{ {
label: '创建时间', label: '创建时间',
prop: 'gmtCreate' prop: 'gmtCreate'
@ -106,10 +104,7 @@ const Clustercolumns = [
export default { export default {
mixins: [webSocket], mixins: [webSocket],
components: { components: {
bind,
service,
modifyCluster, modifyCluster,
deleteCluster,
detail, detail,
AssignTenant AssignTenant
}, },
@ -125,14 +120,8 @@ export default {
}, },
data() { data() {
return { return {
clusterInfo: {},
instanceVisible: false,
secrectVisible: false,
serviceVisible: false,
flexibleVisible: false,
Clustercolumns, Clustercolumns,
clusterTableData: [], clusterTableData: [],
activeName: 'first', //
loading: false, loading: false,
detaildialogVisible: false, detaildialogVisible: false,
detail: {}, detail: {},
@ -141,25 +130,24 @@ export default {
rows: 10 rows: 10
}, },
total: 0, total: 0,
addData: {
dialog: false,
data: {}
},
regionList: [],
bindData: {
dialog: false,
data: {}
},
modifyClusterData: { modifyClusterData: {
dialog: false, dialog: false,
data: {} data: {}
},
deleteClusterData: {
dialog: false,
data: {}
} }
} }
}, },
watch: {
platformObject: {
handler(newVal, oldVal) {
this.searchConfigs = [
{ type: 'Input', label: '名称', value: 'name' },
{ type: 'Select', label: '所属地域', data: [], value: 'regionId', props: { value: 'regionId' } },
{ type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId }
]
},
deep: true
}
},
methods: { methods: {
onmessage(data) { onmessage(data) {
const arr = ['tke.modify.cluster', 'tke.delete.instance', 'tke.add.instance', 'ctstack.sync', 'ctstack.cluster', 'tke.create.cluster', 'tke.delete.cluster'] const arr = ['tke.modify.cluster', 'tke.delete.instance', 'tke.add.instance', 'ctstack.sync', 'ctstack.cluster', 'tke.create.cluster', 'tke.delete.cluster']
@ -170,9 +158,7 @@ export default {
addCluster() { addCluster() {
this.$router.push({ name: 'ctstackCreateCluster', query: { vendorId: this.platformObject.vendorId } }) this.$router.push({ name: 'ctstackCreateCluster', query: { vendorId: this.platformObject.vendorId } })
}, },
handleCellClick(data) {
this.clusterInfo = data
},
edit(row) { edit(row) {
this.modifyClusterData = { this.modifyClusterData = {
dialog: true, dialog: true,
@ -184,21 +170,12 @@ export default {
}, },
handleOperate(command) { handleOperate(command) {
switch (command.flag) { switch (command.flag) {
case 1: //
this.showSecrect(command.row)
break
case 2: //
this.showService(command.row)
break
case 3: // case 3: //
this.deleteCluster(command.row) this.deleteCluster(command.row)
break break
case 4: // case 4: //
this.addExistInstance(command.row) this.addExistInstance(command.row)
break break
case 5: //
this.showFlexible(command.row)
break
case 'node': case 'node':
this.showInstance(command.row) this.showInstance(command.row)
break break
@ -206,46 +183,23 @@ export default {
} }
}, },
deleteCluster(row) { deleteCluster(row) {
this.clusterInfo = row this.$confirm('确定删除集群?', '提示', {
this.deleteClusterData = { confirmButtonText: '确定',
dialog: true, cancelButtonText: '取消',
mode: false, type: 'warning'
data: row }).then(() => {
} deleteCluster(row).then(data => {
}, if (data.success) {
closeService() { this.$message({
this.serviceVisible = false type: 'success',
}, message: data.message
showService(row) { })
this.serviceVisible = true this.getClusterData()
this.clusterInfo = row }
}, })
closeSecrect() { })
this.secrectVisible = false
},
showSecrect(row) {
this.secrectVisible = true
this.clusterInfo = row
},
showFlexible(row) {
this.flexibleVisible = true
this.clusterInfo = row
},
closeInstance() {
this.instanceVisible = false
},
closeFlexible() {
this.flexibleVisible = false
},
showInstance(row) {
this.instanceVisible = true
this.clusterInfo = row
}, },
getClusterData() { getClusterData() {
// if (this.instanceVisible) {
// this.$refs.instanceTable.getData()
// return
// }
this.loading = true this.loading = true
this.clusterTableData = [] this.clusterTableData = []
this.total = 0 this.total = 0
@ -277,36 +231,14 @@ export default {
this.detaildialogVisible = true this.detaildialogVisible = true
this.detail = row this.detail = row
}, },
add() {
this.addData = {
dialog: true,
data: {
vendorId: this.platformObject.vendorId
}
}
},
// //
getRegion() { getRegion() {
getRegion({ vendorId: this.platformObject.vendorId }).then(data => { getRegion({ vendorId: this.platformObject.vendorId }).then(data => {
if (data.success) { if (data.success) {
this.regionList = data.data this.searchConfigs[1].data = data.data
} }
}) })
} }
},
mounted() {
if (this.$router.currentRoute.params.formCreateInstance) {
this.showInstance(this.$router.currentRoute.params.clusterInfo)
}
},
watch: {
platformObject: {
handler(newVal, oldVal) {
this.getClusterData()
},
deep: true,
immediate: true
}
} }
} }
</script> </script>

View File

@ -64,8 +64,8 @@
</template> </template>
<script> <script>
import instance from './instance/index.vue' import instance from './instance/index.vue'
import key from './secrect/index' import key from './secrect/index.vue'
import flexible from './flexible/index' import flexible from './flexible/index.vue'
import region from './region/index.vue' import region from './region/index.vue'
export default { export default {
components: { instance, key, flexible, region }, components: { instance, key, flexible, region },

View File

@ -1,92 +0,0 @@
<template>
<div>
<cb-detail :title="clusterInfo.name + ' 服务'" @goBack="goBack">
<template v-slot:item_container>
<cb-advance-table :data="tableData" :params="params" :columns="columns" :get-list="getData" :total="total" :loading="loading">
<template v-slot:action> </template>
<template #instanceState="val">
<cb-status-icon :type="val | tceInstanceColor">{{ val | tceInstanceText }}</cb-status-icon>
</template>
<template #operate="val, record">
<div class="action-divider"></div>
<el-button type="text" @click="remove(record.id)" :disabled="record.status === 'BIND'"> 删除 </el-button>
<div class="action-divider"></div>
</template>
</cb-advance-table>
</template>
</cb-detail>
</div>
</template>
<script>
import { getServiceList } from 'views/resource/ctstack/services/tke.js'
const columns = [
{
label: '名称',
prop: 'serviceName'
},
{
label: '类型',
prop: 'type'
},
{
label: 'ip',
prop: 'ipAddress'
},
{
label: '创建时间',
prop: 'createTime'
}
]
export default {
props: ['vendorId', 'clusterInfo'],
name: '',
data() {
return {
searchConfigs: [{ type: 'Input', label: '名称', value: 'serviceName' }],
searchData: {
serviceName: ''
},
columns,
params: {
page: 1,
rows: 10
},
total: 0,
tableData: [],
loading: false
}
},
methods: {
goBack() {
this.$emit('close')
},
getData() {
const params = {
page: this.params.page,
rows: this.params.rows,
params: JSON.stringify([{ param: { vendorId: this.vendorId, clusterId: this.clusterInfo.clusterId }, sign: 'EQ' }])
}
getServiceList(params)
.then(data => {
if (data.success) {
this.tableData = data.data.rows
this.total = data.data.total
}
})
.finally(() => {
this.loading = false
})
}
},
watch: {
clusterInfo: {
handler(newVal, oldVal) {
this.getData()
},
deep: true,
immediate: true
}
}
}
</script>

View File

@ -139,12 +139,8 @@ export function modifyInstance({ id, newName }) {
} }
// 集群 删除 // 集群 删除
export function deleteCluster(params, mode) { export function deleteCluster(params) {
const formData = new FormData() return request.delete(`${clusterListUrl}/${params.id}`)
formData.append('mode', mode)
return request.delete(`${clusterListUrl}/${params.id}`, {
data: formData
})
} }
// 容器服务 日志列表 // 容器服务 日志列表