319 lines
8.4 KiB
Vue
319 lines
8.4 KiB
Vue
<template>
|
|
<div>
|
|
<cb-advance-table @cell-click="handleCellClick" :data="clusterTableData" :params="params" :columns="Clustercolumns" :get-list="getClusterData" :total="total" :loading="loading">
|
|
<template v-slot:action>
|
|
<el-button type="primary" @click="addCluster()"> 新增 </el-button>
|
|
</template>
|
|
<template #name="val, record">
|
|
<span class="detail-href" @click="getDetail(record)" v-if="record.clusterStatus !== 'Initializing'">{{ val }}</span>
|
|
<span v-else>{{ val }}</span>
|
|
</template>
|
|
<template #clusterStatus="val">
|
|
<cb-status-icon :type="val | tceClusterColor" v-if="val && val.toLowerCase() != 'stopped'">{{ val | tceClusterText }}</cb-status-icon>
|
|
</template>
|
|
<template #clusterOs="val">
|
|
{{ val ? val : 'ubuntu16.04.1 LTSx86_64' }}
|
|
</template>
|
|
<template #clusterVersion="val">
|
|
{{ val && val.length > 0 ? val : '1.10.5' }}
|
|
</template>
|
|
<template #operate="val, record">
|
|
<AssignTenant :detail="record" type="TKE" @back="getClusterData"></AssignTenant>
|
|
<div class="action-divider"></div>
|
|
<el-button type="text" @click="edit(record)" :disabled="record.clusterStatus == 'Initializing'"> 编辑 </el-button>
|
|
<div class="action-divider"></div>
|
|
<el-button type="text" @click="handleOperate({ flag: 3, row: record })" :disabled="record.status === 'BIND' || record.tenantName"> 删除 </el-button>
|
|
</template>
|
|
</cb-advance-table>
|
|
<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>
|
|
<delete-cluster :data="deleteClusterData" :vendor-id="platformObject.vendorId" v-if="deleteClusterData.dialog" :clusterInfo="clusterInfo"></delete-cluster>
|
|
<add-cluster :add-data="addClusterData" :vendor-id="platformObject.vendorId" :platform-object="platformObject" v-if="addClusterData.dialog"></add-cluster>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import bind from './bind.vue'
|
|
import { getClusterList } from 'views/resource/ctstack/services/tke.js'
|
|
import { removeFloatIp, detailFloatIp } from 'views/resource/ctstack/services/floatips.js'
|
|
import { getRegion } from 'views/resource/ctstack/services/regions.js'
|
|
import service from './service/index.vue'
|
|
import modifyCluster from './modifyCluster.vue'
|
|
import deleteCluster from './deleteCluster.vue'
|
|
import addCluster from './addCluster.vue'
|
|
import webSocket from '@cmp/cmp-common/mixins/getGlobalSocket'
|
|
import detail from './detail'
|
|
import AssignTenant from 'views/platform/assign/index.vue'
|
|
const Clustercolumns = [
|
|
{
|
|
label: 'ID',
|
|
prop: 'clusterId',
|
|
disabled: true,
|
|
scopedSlots: { customRender: 'name' }
|
|
},
|
|
{
|
|
label: '名称',
|
|
prop: 'name'
|
|
},
|
|
{
|
|
label: '状态',
|
|
prop: '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: '所属租户',
|
|
prop: 'tenantName'
|
|
},
|
|
{
|
|
label: '描述',
|
|
prop: 'clusterDescription'
|
|
},
|
|
{
|
|
label: '系统',
|
|
prop: 'clusterOs',
|
|
scopedSlots: { customRender: 'clusterOs' }
|
|
},
|
|
{
|
|
label: '创建时间',
|
|
prop: 'gmtCreate'
|
|
},
|
|
{
|
|
label: '操作',
|
|
scopedSlots: { customRender: 'operate' },
|
|
width: '220px'
|
|
}
|
|
]
|
|
export default {
|
|
mixins: [webSocket],
|
|
components: {
|
|
bind,
|
|
service,
|
|
modifyCluster,
|
|
deleteCluster,
|
|
addCluster,
|
|
detail,
|
|
AssignTenant
|
|
},
|
|
props: {
|
|
platformObject: {
|
|
type: Object,
|
|
default: function () {
|
|
return {
|
|
vendorId: -1
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
clusterInfo: {},
|
|
instanceVisible: false,
|
|
secrectVisible: false,
|
|
serviceVisible: false,
|
|
flexibleVisible: false,
|
|
Clustercolumns,
|
|
clusterTableData: [],
|
|
activeName: 'first', // 从这里开始
|
|
loading: false,
|
|
detaildialogVisible: false,
|
|
detail: {},
|
|
params: {
|
|
page: 1,
|
|
rows: 10
|
|
},
|
|
total: 0,
|
|
addData: {
|
|
dialog: false,
|
|
data: {}
|
|
},
|
|
regionList: [],
|
|
bindData: {
|
|
dialog: false,
|
|
data: {}
|
|
},
|
|
modifyClusterData: {
|
|
dialog: false,
|
|
data: {}
|
|
},
|
|
addClusterData: {
|
|
dialog: false,
|
|
data: {}
|
|
},
|
|
deleteClusterData: {
|
|
dialog: false,
|
|
data: {}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onmessage(data) {
|
|
const arr = ['tke.modify.cluster', 'tke.delete.instance', 'tke.add.instance', 'ctstack.sync', 'ctstack.cluster', 'tke.create.cluster', 'tke.delete.cluster']
|
|
if (arr.includes(data.operate)) {
|
|
this.getClusterData()
|
|
}
|
|
},
|
|
addCluster() {
|
|
this.$router.push({ name: 'ctstackCreateCluster', query: { vendorId: this.platformObject.vendorId } })
|
|
},
|
|
handleCellClick(data) {
|
|
this.clusterInfo = data
|
|
},
|
|
edit(row) {
|
|
this.modifyClusterData = {
|
|
dialog: true,
|
|
data: {
|
|
remark: row.remark,
|
|
id: row.id
|
|
}
|
|
}
|
|
},
|
|
handleOperate(command) {
|
|
switch (command.flag) {
|
|
case 1: // 密钥
|
|
this.showSecrect(command.row)
|
|
break
|
|
case 2: // 服务
|
|
this.showService(command.row)
|
|
break
|
|
case 3: // 删除
|
|
this.deleteCluster(command.row)
|
|
break
|
|
case 4: // 添加已有节点
|
|
this.addExistInstance(command.row)
|
|
break
|
|
case 5: // 伸缩组
|
|
this.showFlexible(command.row)
|
|
break
|
|
case 'node':
|
|
this.showInstance(command.row)
|
|
break
|
|
default:
|
|
}
|
|
},
|
|
deleteCluster(row) {
|
|
this.clusterInfo = row
|
|
this.deleteClusterData = {
|
|
dialog: true,
|
|
mode: false,
|
|
data: row
|
|
}
|
|
},
|
|
closeService() {
|
|
this.serviceVisible = false
|
|
},
|
|
showService(row) {
|
|
this.serviceVisible = true
|
|
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() {
|
|
// if (this.instanceVisible) {
|
|
// this.$refs.instanceTable.getData()
|
|
// return
|
|
// }
|
|
this.loading = true
|
|
this.clusterTableData = []
|
|
this.total = 0
|
|
const params = {
|
|
page: this.params.page,
|
|
rows: this.params.rows,
|
|
params: JSON.stringify([
|
|
{
|
|
param: {
|
|
vendorId: this.platformObject.vendorId
|
|
},
|
|
sign: 'EQ'
|
|
}
|
|
])
|
|
}
|
|
getClusterList(params)
|
|
.then(data => {
|
|
if (data.success) {
|
|
this.clusterTableData = data.data.rows
|
|
this.total = data.data.total
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 详情
|
|
getDetail(row) {
|
|
this.detaildialogVisible = true
|
|
this.detail = row
|
|
},
|
|
add() {
|
|
this.addData = {
|
|
dialog: true,
|
|
data: {
|
|
vendorId: this.platformObject.vendorId
|
|
}
|
|
}
|
|
},
|
|
// 获取域
|
|
getRegion() {
|
|
getRegion({ vendorId: this.platformObject.vendorId }).then(data => {
|
|
if (data.success) {
|
|
this.regionList = 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>
|