207 lines
7.9 KiB
Vue
207 lines
7.9 KiB
Vue
<template>
|
||
<div v-clickoutside="{obj:editPromServer,func:clickOutside}" class="right-box right-box-prom">
|
||
<!-- begin--顶部按钮-->
|
||
<div class="right-box-top-btns right-box-form-delete">
|
||
<button v-if="editPromServer.id" id="promServer-edit-del" v-has="'prom_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien"
|
||
type="button"
|
||
@click="del">
|
||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
|
||
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
|
||
</button>
|
||
</div>
|
||
<!-- end--顶部按钮-->
|
||
|
||
<!-- begin--标题-->
|
||
<div class="right-box__header">{{editPromServer.id ? ($t("config.promServer.editProm") + " ID：" + editPromServer.id) : $t("config.promServer.createProm")}}</div>
|
||
<!-- end--标题-->
|
||
|
||
<!-- begin--表单-->
|
||
<div class="right-box__container">
|
||
<el-form ref="promServerForm" :model="editPromServer" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px">
|
||
<!--DC-->
|
||
<el-form-item :label="$t('config.dc.dc')" prop="dc.name">
|
||
<div class="right-box-form-content">
|
||
<el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
|
||
<el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
|
||
<span class="config-dropdown-label-txt">{{item.name}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!--host-->
|
||
<el-form-item label="Host" prop="host">
|
||
<el-input id="prom-box-input-host" v-model="editPromServer.host" placeholder="" size="small" type="text"></el-input>
|
||
</el-form-item>
|
||
<!--Port-->
|
||
<el-form-item label="Port" prop="port">
|
||
<el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input>
|
||
</el-form-item>
|
||
<!--type-->
|
||
<el-form-item :label="$t('config.promServer.type')" prop="type">
|
||
<!-- <el-cascader-->
|
||
<!-- id="prom-box-input-type"-->
|
||
<!-- style="width: 100%"-->
|
||
<!-- v-model="editPromServer.type"-->
|
||
<!-- placeholder=""-->
|
||
<!-- size="small"-->
|
||
<!-- :options="$CONSTANTS.promServer.theData"-->
|
||
<!-- :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
|
||
<!-- clearable></el-cascader>-->
|
||
<el-select v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
|
||
<el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
|
||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="Token" prop="token">
|
||
<el-input id="prom-box-input-token" v-model="editPromServer.token" class="right-box-row-with-btn" placeholder="" size="small" type="text">
|
||
<i slot="suffix" class="nz-icon nz-icon-refresh" @click="refreshToken"></i>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- end--表单-->
|
||
<!--底部按钮-->
|
||
<div class="right-box-bottom-btns">
|
||
<button id="prom-esc" v-cancel="{obj:editPromServer,func:esc}"
|
||
class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
|
||
<span>{{$t('overall.cancel')}}</span>
|
||
</button>
|
||
<button id="prom-save" :class="{'nz-btn-disabled':prevent_opt.save}"
|
||
:disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="save">
|
||
<span>{{$t('overall.save')}}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { host, port } from '../../common/js/validate'
|
||
import { agent2 } from '@/components/common/js/constants'
|
||
export default {
|
||
name: 'agentBox',
|
||
props: {
|
||
promServer: Object
|
||
},
|
||
data () {
|
||
return {
|
||
agent2: agent2,
|
||
agentPrometheusEnabled: localStorage.getItem('nz-prometheus-federation-enabled'),
|
||
rules: {
|
||
'dc.name': [
|
||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||
],
|
||
host: [
|
||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
|
||
{ validator: host, trigger: 'blur' }
|
||
],
|
||
port: [
|
||
{ validator: port, trigger: 'blur' },
|
||
{ required: true, message: this.$t('validate.required') }
|
||
],
|
||
type: [
|
||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||
]
|
||
},
|
||
editPromServer: {},
|
||
dcData: [], // data center数据
|
||
federationEnabled: !Number(localStorage.getItem('nz-prometheus-federation-enabled'))
|
||
}
|
||
},
|
||
methods: {
|
||
refreshToken: function () {
|
||
if (!this.editPromServer.token || this.editPromServer.token == '') {
|
||
this.$message.error('The token is empty')
|
||
return
|
||
}
|
||
this.$post('agent/token/refresh', this.editPromServer).then(response => {
|
||
if (response.code == 200) {
|
||
this.editPromServer.token = response.data.token
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
})
|
||
},
|
||
/* 关闭弹框 */
|
||
esc (refresh) {
|
||
this.$emit('close', refresh)
|
||
},
|
||
clickOutside () {
|
||
this.esc(false)
|
||
},
|
||
/* 保存 */
|
||
save () {
|
||
this.$refs.promServerForm.validate(valid => {
|
||
if (valid) {
|
||
this.prevent_opt.save = true
|
||
if (this.editPromServer.id) {
|
||
this.$put('promServer', this.editPromServer).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
this.prevent_opt.save = false
|
||
})
|
||
} else {
|
||
this.$post('promServer', this.editPromServer).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
this.prevent_opt.save = false
|
||
})
|
||
}
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
/* 删除 */
|
||
del () {
|
||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$delete('promServer?ids=' + this.editPromServer.id).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
// 获取dc下拉列表数据
|
||
getDcData () {
|
||
this.$get('dc', { pageSize: -1 }).then(response => {
|
||
if (response.code === 200) {
|
||
this.dcData = response.data.list
|
||
}
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
// 将prop里的user转为组件内部对象
|
||
promServer: {
|
||
immediate: true,
|
||
deep: true,
|
||
handler (n) {
|
||
this.editPromServer = JSON.parse(JSON.stringify(n))
|
||
}
|
||
},
|
||
'editPromServer.dc': function (n, o) {
|
||
this.editPromServer.dcId = n.id
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getDcData()
|
||
}
|
||
}
|
||
</script>
|