feat: Endpoint新增弹框等
1.Endpoint新增弹框 2.metric列表bug修复 3.account创建时加了密码输入框 4.告警规则新增弹框 5.endpoint列表增加state、lastupdate字段
This commit is contained in:
chenjinsong
@@ -109,8 +109,8 @@
|
||||
|
||||
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
|
||||
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
||||
<!--<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>-->
|
||||
|
||||
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>
|
||||
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -138,6 +138,19 @@ export default {
|
||||
moduleId: '',
|
||||
assetId: ''
|
||||
},
|
||||
alertRule: {
|
||||
id: '',
|
||||
alertName: '',
|
||||
type: '',
|
||||
linkObject: {id: '', name: ''},
|
||||
linkId: '',
|
||||
expr: '',
|
||||
last: '',
|
||||
severity: '',
|
||||
summary: '',
|
||||
description: '',
|
||||
receiver: '',
|
||||
},
|
||||
createMenu: [ //新增按钮内容
|
||||
{
|
||||
label: this.$t('project.project.createProject'),
|
||||
@@ -185,6 +198,8 @@ export default {
|
||||
this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
|
||||
} else if (item.type == 3) {
|
||||
this.$refs.addEndpointBox.show(true);
|
||||
} else if (item.type == 5) {
|
||||
this.$refs.alertConfigBox.show(true, true);
|
||||
}
|
||||
},
|
||||
jumpToAsset(data, id) {
|
||||
@@ -193,6 +208,7 @@ export default {
|
||||
this.jumpTo(data);
|
||||
},
|
||||
jumpToProject(p) {
|
||||
this.currentProject = p;
|
||||
this.$store.commit('setProject', p);
|
||||
this.jumpTo('project');
|
||||
},
|
||||
@@ -211,6 +227,18 @@ export default {
|
||||
this.$get('project', {}).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.projectData = response.data.list;
|
||||
let flag = false;
|
||||
//如果currentProject不在新取到的数据里，说明它被删了
|
||||
for (let i = 0; i < this.projectData.length; i++) {
|
||||
if (this.projectData[i].id == this.currentProject.id) {
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!flag && this.projectData.length > 0) {
|
||||
this.currentProject = this.projectData[0];
|
||||
this.$store.commit('setProject', this.currentProject);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -21,14 +21,17 @@ const en = {
|
||||
cover: 'Cover'
|
||||
},
|
||||
search: {
|
||||
searchTip: 'Press Enter or click to search'
|
||||
searchTip: 'Press Enter or click to search',
|
||||
recentSearch: 'Recent Searches',
|
||||
noRecentSearch: 'No Recent Searches'
|
||||
},
|
||||
tip: {
|
||||
confirmDelete: "Confirm Delete?",
|
||||
yes: "Yes",
|
||||
no: "No",
|
||||
deleteSuccess: "Successfully Deleted",
|
||||
saveSuccess: "Successfully Saved"
|
||||
saveSuccess: "Successfully Saved",
|
||||
coverSuccess: 'Successfully Covered'
|
||||
},
|
||||
asset:{
|
||||
createAsset: "Create Asset",
|
||||
@@ -73,7 +76,8 @@ const en = {
|
||||
accountId: "Accound ID",
|
||||
createAccount: "Create Account",
|
||||
editAccount: "Edit Account",
|
||||
notCurrentlySupport: 'Not currently supported'
|
||||
notCurrentlySupport: 'Not currently supported',
|
||||
password: 'Password'
|
||||
},
|
||||
promServer: {
|
||||
promServerList: "Prometheus Server",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition name="right-box">
|
||||
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @click="showEditParamBox(false)">
|
||||
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
||||
@@ -28,7 +28,7 @@
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" size="small">
|
||||
<el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" size="small">
|
||||
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
@@ -37,7 +37,7 @@
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small">
|
||||
<el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small">
|
||||
<el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
@@ -101,12 +101,13 @@
|
||||
<el-input @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param" size="mini" v-model="currentModuleCopy.param"></el-input>
|
||||
</el-popover>
|
||||
<el-input class="module-info module-info-path" size="mini" v-model="currentModuleCopy.path"></el-input>
|
||||
<el-button class="module-info module-info-cover" size="mini">{{$t('overall.cover')}}</el-button>
|
||||
<el-button class="module-info module-info-cover" size="mini" @click="coverEndpoint">{{$t('overall.cover')}}</el-button>
|
||||
</div>
|
||||
<!--endpoints-->
|
||||
<div class="endpoints-box-endpoints">
|
||||
<el-table
|
||||
:data="endpointList"
|
||||
ref="endpointTable"
|
||||
style="width: 100%;border-radius: 4px;"
|
||||
height="calc(100% - 40px)"
|
||||
empty-text=" ">
|
||||
@@ -135,8 +136,8 @@
|
||||
<div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
|
||||
</div>
|
||||
<span slot="reference">
|
||||
<span v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
|
||||
<span v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param" size="mini" v-model="scope.row.param"></el-input></span>
|
||||
<span @mousedown.stop v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
|
||||
<span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param" size="mini" v-model="scope.row.param"></el-input></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
</span>
|
||||
@@ -149,17 +150,17 @@
|
||||
>
|
||||
<span slot="reference">
|
||||
<span v-if="!scope.row.isEdit">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
|
||||
<span v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.path"></el-input></span>
|
||||
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.path"></el-input></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-else-if="title.prop == 'port'">
|
||||
<span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
|
||||
<span v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.port"></el-input></span>
|
||||
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.port"></el-input></span>
|
||||
</span>
|
||||
<span v-else-if="title.prop == 'host'">
|
||||
<span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
|
||||
<span v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.host"></el-input></span>
|
||||
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.host"></el-input></span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -173,7 +174,10 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div><el-button class="endpoints-clear-btn" size="mini">{{$t('overall.clear')}}</el-button></div>
|
||||
<div>
|
||||
<el-button class="endpoints-clear-btn" size="mini" @click="clearSelection">{{$t('overall.clear')}}</el-button>
|
||||
<span style="display: inline-block; float: right;line-height: 39px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -188,7 +192,7 @@
|
||||
|
||||
<!--start--param编辑框-->
|
||||
<transition name="right-sub-box">
|
||||
<div @click.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
|
||||
<div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
|
||||
<div class="param-box">
|
||||
<div class="param-box-row" v-for="(item, index) in tempParamObj">
|
||||
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
|
||||
@@ -211,7 +215,6 @@
|
||||
export default {
|
||||
name: "endpointBox",
|
||||
props: {
|
||||
endpoint: Object,
|
||||
currentProject: Object,
|
||||
currentModule: Object
|
||||
},
|
||||
@@ -221,7 +224,7 @@
|
||||
tempParamObj: [],
|
||||
tempEndpoint: {},
|
||||
rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
|
||||
editParamBox: {show: false, top: 0, left: 0, type: 1}, //param编辑弹框
|
||||
editParamBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框
|
||||
moduleParamShow: false, //module默认参数param悬浮窗
|
||||
assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
|
||||
assetPageObj: {pageNo: 1, pageSize: 9999},
|
||||
@@ -282,6 +285,14 @@
|
||||
this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj));
|
||||
}
|
||||
} else {
|
||||
if (this.endpointList.length > 0) {
|
||||
for (let i = 0; i < this.endpointList.length; i++) {
|
||||
this.endpointList[i].isEdit = false;
|
||||
}
|
||||
}
|
||||
if (!this.editParamBox.show) {
|
||||
return;
|
||||
}
|
||||
if (this.editParamBox.type == 1) {
|
||||
this.currentModuleCopy.paramObj = this.tempParamObj;
|
||||
this.currentModuleCopy.param = this.paramToJson(this.tempParamObj);
|
||||
@@ -303,17 +314,16 @@
|
||||
esc() {
|
||||
this.rightBox.show = false;
|
||||
this.editParamBox.show = false;
|
||||
this.viewParamBox.show = false;
|
||||
},
|
||||
|
||||
// 新增param
|
||||
addParam() {
|
||||
this.currentModuleCopy.paramObj.push({key: '', value: ''});
|
||||
this.tempParamObj.push({key: '', value: ''});
|
||||
},
|
||||
|
||||
// 移除单个param
|
||||
removeParam(index) {
|
||||
this.endpoint.paramObj.splice(index, 1);
|
||||
this.tempParamObj.splice(index, 1);
|
||||
},
|
||||
|
||||
//编辑endpoint
|
||||
@@ -336,29 +346,16 @@
|
||||
}
|
||||
},
|
||||
|
||||
//将param转为json字符串格式
|
||||
paramToJson(param) {
|
||||
let tempParam = {};
|
||||
if (!param) {
|
||||
param = [];
|
||||
}
|
||||
for (let i = 0; i < param.length; i++) {
|
||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
||||
}
|
||||
let jsonString = JSON.stringify(tempParam);
|
||||
if (jsonString == '{}') {
|
||||
return "";
|
||||
} else {
|
||||
return jsonString;
|
||||
}
|
||||
},
|
||||
|
||||
/*获取project列表*/
|
||||
getProjectList() {
|
||||
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.projectList = response.data.list;
|
||||
if (this.moduleList.length == 0) {
|
||||
this.getModuleList(this.currentProject.id);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
@@ -384,6 +381,27 @@
|
||||
this.getAssetList();
|
||||
},
|
||||
|
||||
changeProject(project) {
|
||||
this.currentModuleCopy = {};
|
||||
this.editParamBox.show = false;
|
||||
this.tempParamObj = [];
|
||||
},
|
||||
|
||||
changeModule(module) {
|
||||
this.editParamBox.show = false;
|
||||
this.tempParamObj = [];
|
||||
},
|
||||
|
||||
//清空勾选的endpoint
|
||||
clearSelection() {
|
||||
let selections = this.$refs.endpointTable.selection;
|
||||
if (selections && selections.length > 0) {
|
||||
for (let i = 0; i < selections.length; i++) {
|
||||
this.removeEndpoint(selections[i])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// endpoint弹框中的asset子弹框里asset选择事件
|
||||
selectAsset(obj, index) {
|
||||
this.endpointList.push({
|
||||
@@ -404,7 +422,7 @@
|
||||
paramToJson(param) {
|
||||
let tempParam = {};
|
||||
for (let i = 0; i < param.length; i++) {
|
||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
||||
eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
|
||||
}
|
||||
let jsonString = JSON.stringify(tempParam);
|
||||
if (jsonString == '{}') {
|
||||
@@ -436,10 +454,7 @@
|
||||
|
||||
//保存endpoint
|
||||
save() {
|
||||
this.endpoint.moduleId = this.currentModuleCopy.id;
|
||||
this.endpoint.projectId = this.currentProject.id;
|
||||
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
|
||||
this.$put('endpoint', this.endpoint).then(response => {
|
||||
this.$post('endpoint', this.endpointList).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.esc();
|
||||
@@ -450,8 +465,17 @@
|
||||
});
|
||||
},
|
||||
|
||||
//param展示悬浮框
|
||||
viewParam(item, flag, event) {
|
||||
//覆盖endpoint的port/path/param
|
||||
coverEndpoint() {
|
||||
if (this.endpointList.length > 0) {
|
||||
for (let i = 0; i < this.endpointList.length; i++) {
|
||||
this.endpointList[i].port = this.currentModuleCopy.port;
|
||||
this.endpointList[i].param = this.currentModuleCopy.param;
|
||||
this.endpointList[i].paramObj = this.currentModuleCopy.paramObj;
|
||||
this.endpointList[i].path = this.currentModuleCopy.path;
|
||||
}
|
||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.coverSuccess")});
|
||||
}
|
||||
},
|
||||
|
||||
//删除endpoint
|
||||
@@ -476,8 +500,12 @@
|
||||
dropdownSelect(label) {
|
||||
this.assetSearch.label = label;
|
||||
this.assetSearch.dropdownShow = false;
|
||||
this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule));
|
||||
},
|
||||
|
||||
clearEndpoints() {
|
||||
this.getAssetList();
|
||||
this.endpointList = [];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getProjectList();
|
||||
|
||||
411
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
Normal file
411
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "alertConfigBox",
|
||||
props: {
|
||||
parentAlertRule: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
alertRule: {id: ''},
|
||||
rightBox: {show: false, isEdit: false, title: ''},
|
||||
severityData: [
|
||||
{
|
||||
key: 'medium',
|
||||
value: this.$t("alert.config.medium")
|
||||
},
|
||||
{
|
||||
key: 'high',
|
||||
value: this.$t("alert.config.high")
|
||||
},
|
||||
{
|
||||
key: 'low',
|
||||
value: this.$t("alert.config.low")
|
||||
}
|
||||
],
|
||||
typeData: [
|
||||
{
|
||||
key: 1,
|
||||
value: this.$t('alert.config.typeOption.project')
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
value: this.$t('alert.config.typeOption.module')
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
value: this.$t('alert.config.typeOption.asset')
|
||||
}
|
||||
],
|
||||
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'
|
||||
}],
|
||||
linkObjList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(show, isEdit) {
|
||||
this.rightBox.show = show;
|
||||
this.rightBox.isEdit = isEdit;
|
||||
},
|
||||
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.$emit('reload');
|
||||
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.$emit('reload');
|
||||
this.rightBox.show = false;
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
del: function(u) {
|
||||
this.$confirm(this.$t("tip.confirmDelete"), {
|
||||
confirmButtonText: this.$t("tip.yes"),
|
||||
cancelButtonText: this.$t("tip.no"),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$delete("alert/rule?ids=" + u.id).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||
this.$emit('reload');
|
||||
} 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 (let 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 (let i = 0; i < this.receiverData.length; i++) {
|
||||
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
|
||||
this.$set(this.receiverData[i], 'isEdit', false);
|
||||
}
|
||||
},
|
||||
esc: function() {
|
||||
this.rightBox.show = false;
|
||||
},
|
||||
|
||||
getLinkObj() {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initReceiverData();
|
||||
this.rightBox.title = this.$t("alert.config.createAlertConfig");
|
||||
},
|
||||
watch: {
|
||||
parentAlertRule: {
|
||||
deep: true,
|
||||
handler(n, o) {
|
||||
this.alertRule = n;
|
||||
if (this.rightBox.show) {
|
||||
if (this.rightBox.isEdit && this.alertRule.id) {
|
||||
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
|
||||
} else if (this.rightBox.isEdit && !this.alertRule.id) {
|
||||
this.rightBox.title = this.$t("alert.config.createAlertConfig");
|
||||
} else if (!this.rightBox.isEdit && this.alertRule.id) {
|
||||
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + this.alertRule.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -264,7 +264,7 @@
|
||||
paramToJson(param) {
|
||||
let tempParam = {};
|
||||
for (let i = 0; i < param.length; i++) {
|
||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
||||
eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
|
||||
}
|
||||
let jsonString = JSON.stringify(tempParam);
|
||||
if (jsonString == '{}') {
|
||||
@@ -360,7 +360,9 @@
|
||||
this.endpoint.moduleId = this.currentModule.id;
|
||||
this.endpoint.projectId = this.currentProject.id;
|
||||
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
|
||||
this.$put('endpoint', this.endpoint).then(response => {
|
||||
let requestData = [];
|
||||
requestData.push(this.endpoint);
|
||||
this.$put('endpoint', requestData).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.esc();
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
} else {
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<i class="el-icon-time" @click="look_history"></i>
|
||||
<div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
|
||||
<div class="list_box_title">
|
||||
<span>{{other.recentSearch}}</span>
|
||||
<span>{{$t('search.recentSearch')}}</span>
|
||||
<i class="el-icon-close" @click="localStorage_display=!localStorage_display"></i>
|
||||
</div>
|
||||
<div class="list_box_content" v-if="history_once.length>0">
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="list_box_clear">
|
||||
<span v-if="history_once.length>0" @click="clear_history">{{other.clearReSearch}}</span>
|
||||
<span v-else class="no_historyList">{{other.noRecentSearch}}</span>
|
||||
<span v-else class="no_historyList">{{$t('search.noRecentSearch')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<div class="el-select-add-btn">
|
||||
<el-popover
|
||||
placement="left"
|
||||
trigger="click"
|
||||
trigger="manual"
|
||||
v-model="popTypeVisible"
|
||||
>
|
||||
<div class="pop-window-assetType">
|
||||
|
||||
@@ -148,6 +148,19 @@
|
||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-form-row" v-if="rightBox.isEdit && !user.userId">
|
||||
<div class="right-box-form-label">{{$t('config.account.password')}}</div>
|
||||
<div class="right-box-form-content">
|
||||
<el-input
|
||||
type="text"
|
||||
placeholder=""
|
||||
v-model="user.password"
|
||||
maxlength="16"
|
||||
show-word-limit
|
||||
size="small"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-form-row">
|
||||
<div class="right-box-form-label">E-mail</div>
|
||||
<div class="right-box-form-content">
|
||||
|
||||
@@ -82,6 +82,8 @@
|
||||
<span v-else-if="item.prop == 'param'">
|
||||
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
|
||||
<span v-else-if="item.prop == 'state'">{{scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}</span>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -99,7 +101,7 @@
|
||||
|
||||
<module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
|
||||
<edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
|
||||
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
|
||||
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -132,6 +134,14 @@ export default {
|
||||
label: this.$t("project.endpoint.path"),
|
||||
prop: 'path',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("alert.list.state"),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.lastUpdate"),
|
||||
prop: 'lastUpdate',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.asset"),
|
||||
prop: 'asset',
|
||||
@@ -235,7 +245,7 @@ export default {
|
||||
this.metricSearchLabel.moduleId = this.currentModule.id;
|
||||
this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo);
|
||||
this.$set(this.metricSearchLabel, 'pageSize', this.metricPageObj.pageSize);
|
||||
this.$get('metric', this.metricPageObj).then(response => {
|
||||
this.$get('metric', this.metricSearchLabel).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.metricsTableData = response.data.list;
|
||||
this.metricPageObj.total = response.data.total;
|
||||
@@ -319,6 +329,7 @@ export default {
|
||||
|
||||
toCreateEndpoint() {
|
||||
this.$refs.addEndpointBox.show(true);
|
||||
this.$refs.addEndpointBox.clearEndpoints();
|
||||
},
|
||||
|
||||
//查看endpoint详情
|
||||
@@ -333,7 +344,6 @@ export default {
|
||||
|
||||
//弹出module编辑页
|
||||
toEditModule(module) {
|
||||
console.info(module)
|
||||
this.currentModule = JSON.parse(JSON.stringify(module));
|
||||
if (!this.currentModule.paramObj) {
|
||||
this.$set(this.currentModule, 'paramObj', []);
|
||||
@@ -399,7 +409,23 @@ export default {
|
||||
//this.$refs.addEndpointBox.show(false);
|
||||
} else if (type == 4) {
|
||||
}
|
||||
},
|
||||
|
||||
dateFormat(time) {
|
||||
if (!time) {
|
||||
return;
|
||||
}
|
||||
let date = new Date(time*1000);
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||||
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
|
||||
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
this.currentProject = this.$store.state.currentProject;
|
||||
|
||||
@@ -22,6 +22,7 @@ import editEndpointBox from './components/common/rightBox/editEndpointBox'; //en
|
||||
import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
|
||||
import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
|
||||
import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
|
||||
import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
|
||||
|
||||
Vue.component("Pagination", Pagination);
|
||||
Vue.component("searchInput", searchInput);
|
||||
@@ -31,6 +32,7 @@ Vue.component("edit-endpoint-box", editEndpointBox);
|
||||
Vue.component("add-endpoint-box", addEndpointBox);
|
||||
Vue.component("assetAddUnit", assetAddUnit);
|
||||
Vue.component("assetEditUnit", assetEditUnit);
|
||||
Vue.component("alert-config-box", alertConfigBox);
|
||||
|
||||
Vue.prototype.$axios = axios;
|
||||
Vue.prototype.$post = post;
|
||||
|
||||
Reference in New Issue
Block a user