feat: Endpoint新增弹框等
1.Endpoint新增弹框 2.metric列表bug修复 3.account创建时加了密码输入框 4.告警规则新增弹框 5.endpoint列表增加state、lastupdate字段
This commit is contained in:
chenjinsong
@@ -88,225 +88,7 @@
|
||||
</el-table>
|
||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
|
||||
<transition name="right-box">
|
||||
<div class="right-box right-box-alert-config" v-if="rightBox.show">
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.esc')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
|
||||
<span v-else>{{$t('overall.edit')}}</span>
|
||||
</div>
|
||||
<div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{rightBox.title}}</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表单-->
|
||||
<div class="right-box-form">
|
||||
<!--name-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.config.name')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
v-if="rightBox.isEdit"
|
||||
type="text"
|
||||
placeholder=""
|
||||
v-model="alertRule.alertName"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
size="small"
|
||||
></el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--type-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.list.type')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||
<el-option
|
||||
v-for="item in typeData"
|
||||
:key="item.key"
|
||||
:label="item.value"
|
||||
:value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--linkedId-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.config.link')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
v-if="rightBox.isEdit"
|
||||
type="text"
|
||||
v-model="alertRule.linkId"
|
||||
size="mini"
|
||||
></el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject.name}}</div>
|
||||
<!--<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||
<el-option
|
||||
v-for="item in severityData"
|
||||
:key="item.key"
|
||||
:label="item.value"
|
||||
:value="item.key">
|
||||
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="item.name"
|
||||
size="mini"
|
||||
></el-input>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!--expr-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.config.expr')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-if="rightBox.isEdit"
|
||||
placeholder=""
|
||||
v-model="alertRule.expr"
|
||||
size="small"
|
||||
></el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--for-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.config.for')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
type="text"
|
||||
v-if="rightBox.isEdit"
|
||||
placeholder=""
|
||||
v-model="alertRule.last"
|
||||
size="small"
|
||||
>
|
||||
<template slot="append">second</template>
|
||||
</el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--severity-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.severity')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||
<el-option
|
||||
v-for="item in severityData"
|
||||
:key="item.key"
|
||||
:label="item.value"
|
||||
:value="item.key">
|
||||
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="item.name"
|
||||
size="mini"
|
||||
></el-input>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--summary-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.summary')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
type="text"
|
||||
v-if="rightBox.isEdit"
|
||||
placeholder=""
|
||||
v-model="alertRule.summary"
|
||||
size="small"
|
||||
></el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--description-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('alert.description')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-if="rightBox.isEdit"
|
||||
placeholder=""
|
||||
v-model="alertRule.description"
|
||||
size="small"
|
||||
></el-input>
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--receiver-->
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||
<el-option
|
||||
@click.native="blurEditReceiver()"
|
||||
v-for="item in receiverData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item">
|
||||
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="item.name"
|
||||
size="mini"
|
||||
></el-input>
|
||||
</span>
|
||||
<span class="config-dropdown-error-message">{{item.errorMessage}}</span>
|
||||
<span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
|
||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||
</span>
|
||||
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="right-box-row-btn" v-if="rightBox.isEdit">
|
||||
<span class="el-icon-plus"></span>
|
||||
</div>
|
||||
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end--表单-->
|
||||
|
||||
<!-- begin--底部按钮-->
|
||||
<div class="right-box-bottom-btns">
|
||||
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||
</div>
|
||||
<!-- end--底部按钮-->
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -346,11 +128,7 @@ export default {
|
||||
searchLabel: { //搜索参数
|
||||
|
||||
},
|
||||
rightBox: { //弹出框相关
|
||||
show: false,
|
||||
isEdit: false, //false查看，true编辑
|
||||
title: ''
|
||||
},
|
||||
|
||||
alertRule: {
|
||||
id: '',
|
||||
alertName: '',
|
||||
@@ -441,40 +219,13 @@ export default {
|
||||
show: true,
|
||||
}
|
||||
],
|
||||
receiverData: [{
|
||||
id: '1',
|
||||
name: 'group1',
|
||||
description: '小组1desc'
|
||||
}, {
|
||||
id: '2',
|
||||
name: 'group2',
|
||||
description: '小组2desc'
|
||||
}, {
|
||||
id: '3',
|
||||
name: '小组3',
|
||||
description: '小组3desc'
|
||||
}, {
|
||||
id: '4',
|
||||
name: '小组4',
|
||||
description: '小组4desc'
|
||||
}, {
|
||||
id: '5',
|
||||
name: '小组啊小组5',
|
||||
description: '小组5desc'
|
||||
}, {
|
||||
id: '6',
|
||||
name: '小组6',
|
||||
description: '小组6desc'
|
||||
}],
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toEdit: function(u) {
|
||||
this.alertRule = Object.assign({}, u);
|
||||
this.rightBox.isEdit = true;
|
||||
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + u.id;
|
||||
this.rightBox.show = true;
|
||||
this.$refs.alertConfigBox.show(true, true);
|
||||
},
|
||||
del: function(u) {
|
||||
this.$confirm(this.$t("tip.confirmDelete"), {
|
||||
@@ -494,84 +245,13 @@ export default {
|
||||
},
|
||||
toAdd: function() {
|
||||
this.cleanAlertRule();
|
||||
this.rightBox.isEdit = true;
|
||||
this.rightBox.title = this.$t("alert.config.createAlertConfig");
|
||||
this.rightBox.show = true;
|
||||
this.$refs.alertConfigBox.show(true, true);
|
||||
},
|
||||
detail: function(u) {
|
||||
this.alertRule = Object.assign({}, u);
|
||||
this.rightBox.isEdit = false;
|
||||
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + u.id;
|
||||
this.rightBox.show = true;
|
||||
},
|
||||
save: function() {
|
||||
if (this.alertRule.id) {
|
||||
this.$put('alert/rule', this.alertRule).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.getTableData();
|
||||
this.rightBox.show = false;
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$post('alert/rule', this.alertRule).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.getTableData();
|
||||
this.rightBox.show = false;
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
saveOrToEdit: function() {
|
||||
if (!this.rightBox.isEdit) {
|
||||
this.rightBox.isEdit = true;
|
||||
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
|
||||
} else {
|
||||
this.save();
|
||||
}
|
||||
},
|
||||
toEditReceiver: function(item) {
|
||||
if (!item.isEdit) {
|
||||
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
|
||||
this.blurEditReceiver();
|
||||
item.isEdit = true;
|
||||
} else {
|
||||
//如果已在编辑状态，判断name是否有变更，有变更则发请求
|
||||
if (item.name != item.oldName) {
|
||||
if (this.updateReceiverName(item) == 200) {
|
||||
item.isEdit = false;
|
||||
}
|
||||
} else {
|
||||
item.errorMessage = '';
|
||||
item.isEdit = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
blurEditReceiver: function() {
|
||||
for (var i = 0; i < this.receiverData.length; i++) {
|
||||
if (this.receiverData[i].isEdit) {
|
||||
this.receiverData[i].name = this.receiverData[i].oldName;
|
||||
this.receiverData[i].isEdit = false;
|
||||
this.receiverData[i].errorMessage = '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
toDelReceiver: function(item) {
|
||||
this.blurEditReceiver();
|
||||
//TODO 请求后台，删除组
|
||||
},
|
||||
initReceiverData: function() {
|
||||
for (var i = 0; i < this.receiverData.length; i++) {
|
||||
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
|
||||
this.$set(this.receiverData[i], 'isEdit', false);
|
||||
}
|
||||
this.$refs.alertConfigBox.show(true, false);
|
||||
},
|
||||
|
||||
getTableData: function() {
|
||||
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
|
||||
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
||||
@@ -582,9 +262,6 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
esc: function() {
|
||||
this.rightBox.show = false;
|
||||
},
|
||||
updateReceiverName: function(item) {
|
||||
//TODO 请求接口改名
|
||||
var code = 200;
|
||||
@@ -609,8 +286,6 @@ export default {
|
||||
}
|
||||
},
|
||||
jumpTo(data,id) {
|
||||
this.$store.state.assetData.moduleData = data;
|
||||
this.$store.state.assetData.selectedData = id;
|
||||
this.$router.push({
|
||||
path: "/" + data,
|
||||
query: {
|
||||
@@ -638,18 +313,6 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData();
|
||||
this.initReceiverData();
|
||||
},
|
||||
computed: {
|
||||
sProject() {
|
||||
return this.$store.state.createAlertConfig;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sProject(n, o) {
|
||||
this.$store.commit('toCreateAlertConfig', false);
|
||||
this.toAdd();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user