feat: Endpoint新增弹框等

1.Endpoint新增弹框
2.metric列表bug修复
3.account创建时加了密码输入框
4.告警规则新增弹框
5.endpoint列表增加state、lastupdate字段
This commit is contained in:
chenjinsong
2019-12-24 17:31:51 +08:00
parent e4ad8d3dba
commit 76203eceba
12 changed files with 575 additions and 398 deletions

View File

@@ -109,8 +109,8 @@
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box> <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-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> </div>
</template> </template>
@@ -138,6 +138,19 @@ export default {
moduleId: '', moduleId: '',
assetId: '' assetId: ''
}, },
alertRule: {
id: '',
alertName: '',
type: '',
linkObject: {id: '', name: ''},
linkId: '',
expr: '',
last: '',
severity: '',
summary: '',
description: '',
receiver: '',
},
createMenu: [ //新增按钮内容 createMenu: [ //新增按钮内容
{ {
label: this.$t('project.project.createProject'), 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: []}; this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
} else if (item.type == 3) { } else if (item.type == 3) {
this.$refs.addEndpointBox.show(true); this.$refs.addEndpointBox.show(true);
} else if (item.type == 5) {
this.$refs.alertConfigBox.show(true, true);
} }
}, },
jumpToAsset(data, id) { jumpToAsset(data, id) {
@@ -193,6 +208,7 @@ export default {
this.jumpTo(data); this.jumpTo(data);
}, },
jumpToProject(p) { jumpToProject(p) {
this.currentProject = p;
this.$store.commit('setProject', p); this.$store.commit('setProject', p);
this.jumpTo('project'); this.jumpTo('project');
}, },
@@ -211,6 +227,18 @@ export default {
this.$get('project', {}).then(response => { this.$get('project', {}).then(response => {
if (response.code == 200) { if (response.code == 200) {
this.projectData = response.data.list; 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);
}
} }
}) })
}, },

View File

@@ -21,14 +21,17 @@ const en = {
cover: 'Cover' cover: 'Cover'
}, },
search: { search: {
searchTip: 'Press Enter or click to search' searchTip: 'Press Enter or click to search',
recentSearch: 'Recent Searches',
noRecentSearch: 'No Recent Searches'
}, },
tip: { tip: {
confirmDelete: "Confirm Delete?", confirmDelete: "Confirm Delete?",
yes: "Yes", yes: "Yes",
no: "No", no: "No",
deleteSuccess: "Successfully Deleted", deleteSuccess: "Successfully Deleted",
saveSuccess: "Successfully Saved" saveSuccess: "Successfully Saved",
coverSuccess: 'Successfully Covered'
}, },
asset:{ asset:{
createAsset: "Create Asset", createAsset: "Create Asset",
@@ -73,7 +76,8 @@ const en = {
accountId: "Accound ID", accountId: "Accound ID",
createAccount: "Create Account", createAccount: "Create Account",
editAccount: "Edit Account", editAccount: "Edit Account",
notCurrentlySupport: 'Not currently supported' notCurrentlySupport: 'Not currently supported',
password: 'Password'
}, },
promServer: { promServer: {
promServerList: "Prometheus Server", promServerList: "Prometheus Server",

View File

@@ -1,6 +1,6 @@
<template> <template>
<transition name="right-box"> <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--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc"> <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-row">
<div class="right-box-form-label">{{$t("project.project.project")}}</div> <div class="right-box-form-label">{{$t("project.project.project")}}</div>
<div class="right-box-form-content"> <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-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select> </el-select>
</div> </div>
@@ -37,7 +37,7 @@
<div class="right-box-form-row"> <div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.module")}}</div> <div class="right-box-form-label">{{$t("project.module.module")}}</div>
<div class="right-box-form-content"> <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-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select> </el-select>
</div> </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-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-popover>
<el-input class="module-info module-info-path" size="mini" v-model="currentModuleCopy.path"></el-input> <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> </div>
<!--endpoints--> <!--endpoints-->
<div class="endpoints-box-endpoints"> <div class="endpoints-box-endpoints">
<el-table <el-table
:data="endpointList" :data="endpointList"
ref="endpointTable"
style="width: 100%;border-radius: 4px;" style="width: 100%;border-radius: 4px;"
height="calc(100% - 40px)" height="calc(100% - 40px)"
empty-text=" "> empty-text=" ">
@@ -135,8 +136,8 @@
<div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div> <div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
</div> </div>
<span slot="reference"> <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 @mousedown.stop 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-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> </span>
</el-popover> </el-popover>
</span> </span>
@@ -149,17 +150,17 @@
> >
<span slot="reference"> <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-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> </span>
</el-popover> </el-popover>
</span> </span>
<span v-else-if="title.prop == 'port'"> <span v-else-if="title.prop == 'port'">
<span v-if="!scope.row.isEdit">{{scope.row.port}}</span> <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>
<span v-else-if="title.prop == 'host'"> <span v-else-if="title.prop == 'host'">
<span v-if="!scope.row.isEdit">{{scope.row.host}}</span> <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> </span>
</template> </template>
</el-table-column> </el-table-column>
@@ -173,7 +174,10 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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> </div>
</div> </div>
@@ -188,7 +192,7 @@
<!--start--param编辑框--> <!--start--param编辑框-->
<transition name="right-sub-box"> <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">
<div class="param-box-row" v-for="(item, index) in tempParamObj"> <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> <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
@@ -211,7 +215,6 @@
export default { export default {
name: "endpointBox", name: "endpointBox",
props: { props: {
endpoint: Object,
currentProject: Object, currentProject: Object,
currentModule: Object currentModule: Object
}, },
@@ -221,7 +224,7 @@
tempParamObj: [], tempParamObj: [],
tempEndpoint: {}, tempEndpoint: {},
rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false}, 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悬浮窗 moduleParamShow: false, //module默认参数param悬浮窗
assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关 assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
assetPageObj: {pageNo: 1, pageSize: 9999}, assetPageObj: {pageNo: 1, pageSize: 9999},
@@ -282,6 +285,14 @@
this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj)); this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj));
} }
} else { } 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) { if (this.editParamBox.type == 1) {
this.currentModuleCopy.paramObj = this.tempParamObj; this.currentModuleCopy.paramObj = this.tempParamObj;
this.currentModuleCopy.param = this.paramToJson(this.tempParamObj); this.currentModuleCopy.param = this.paramToJson(this.tempParamObj);
@@ -303,17 +314,16 @@
esc() { esc() {
this.rightBox.show = false; this.rightBox.show = false;
this.editParamBox.show = false; this.editParamBox.show = false;
this.viewParamBox.show = false;
}, },
// 新增param // 新增param
addParam() { addParam() {
this.currentModuleCopy.paramObj.push({key: '', value: ''}); this.tempParamObj.push({key: '', value: ''});
}, },
// 移除单个param // 移除单个param
removeParam(index) { removeParam(index) {
this.endpoint.paramObj.splice(index, 1); this.tempParamObj.splice(index, 1);
}, },
//编辑endpoint //编辑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列表*/ /*获取project列表*/
getProjectList() { getProjectList() {
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => { this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.projectList = response.data.list; this.projectList = response.data.list;
if (this.moduleList.length == 0) {
this.getModuleList(this.currentProject.id);
} }
}
}); });
}, },
@@ -384,6 +381,27 @@
this.getAssetList(); 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选择事件 // endpoint弹框中的asset子弹框里asset选择事件
selectAsset(obj, index) { selectAsset(obj, index) {
this.endpointList.push({ this.endpointList.push({
@@ -404,7 +422,7 @@
paramToJson(param) { paramToJson(param) {
let tempParam = {}; let tempParam = {};
for (let i = 0; i < param.length; i++) { 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); let jsonString = JSON.stringify(tempParam);
if (jsonString == '{}') { if (jsonString == '{}') {
@@ -436,10 +454,7 @@
//保存endpoint //保存endpoint
save() { save() {
this.endpoint.moduleId = this.currentModuleCopy.id; this.$post('endpoint', this.endpointList).then(response => {
this.endpoint.projectId = this.currentProject.id;
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
this.$put('endpoint', this.endpoint).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(); this.esc();
@@ -450,8 +465,17 @@
}); });
}, },
//param展示悬浮框 //覆盖endpoint的port/path/param
viewParam(item, flag, event) { 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 //删除endpoint
@@ -476,8 +500,12 @@
dropdownSelect(label) { dropdownSelect(label) {
this.assetSearch.label = label; this.assetSearch.label = label;
this.assetSearch.dropdownShow = false; this.assetSearch.dropdownShow = false;
this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule));
}, },
clearEndpoints() {
this.getAssetList();
this.endpointList = [];
}
}, },
created() { created() {
this.getProjectList(); this.getProjectList();

View 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>

View File

@@ -264,7 +264,7 @@
paramToJson(param) { paramToJson(param) {
let tempParam = {}; let tempParam = {};
for (let i = 0; i < param.length; i++) { 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); let jsonString = JSON.stringify(tempParam);
if (jsonString == '{}') { if (jsonString == '{}') {
@@ -360,7 +360,9 @@
this.endpoint.moduleId = this.currentModule.id; this.endpoint.moduleId = this.currentModule.id;
this.endpoint.projectId = this.currentProject.id; this.endpoint.projectId = this.currentProject.id;
this.endpoint.param = this.paramToJson(this.endpoint.paramObj); 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) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(); this.esc();

View File

@@ -119,7 +119,7 @@
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
}) });
}); });
} }
}, },

View File

@@ -6,7 +6,7 @@
<i class="el-icon-time" @click="look_history"></i> <i class="el-icon-time" @click="look_history"></i>
<div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'"> <div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
<div class="list_box_title"> <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> <i class="el-icon-close" @click="localStorage_display=!localStorage_display"></i>
</div> </div>
<div class="list_box_content" v-if="history_once.length>0"> <div class="list_box_content" v-if="history_once.length>0">
@@ -21,7 +21,7 @@
</div> </div>
<div class="list_box_clear"> <div class="list_box_clear">
<span v-if="history_once.length>0" @click="clear_history">{{other.clearReSearch}}</span> <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> </div>
</div> </div>

View File

@@ -88,225 +88,7 @@
</el-table> </el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div> </div>
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
<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>
</div> </div>
</template> </template>
@@ -346,11 +128,7 @@ export default {
searchLabel: { //搜索参数 searchLabel: { //搜索参数
}, },
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看true编辑
title: ''
},
alertRule: { alertRule: {
id: '', id: '',
alertName: '', alertName: '',
@@ -441,40 +219,13 @@ export default {
show: true, 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: [] tableData: []
} }
}, },
methods: { methods: {
toEdit: function(u) { toEdit: function(u) {
this.alertRule = Object.assign({}, u); this.alertRule = Object.assign({}, u);
this.rightBox.isEdit = true; this.$refs.alertConfigBox.show(true, true);
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID" + u.id;
this.rightBox.show = true;
}, },
del: function(u) { del: function(u) {
this.$confirm(this.$t("tip.confirmDelete"), { this.$confirm(this.$t("tip.confirmDelete"), {
@@ -494,84 +245,13 @@ export default {
}, },
toAdd: function() { toAdd: function() {
this.cleanAlertRule(); this.cleanAlertRule();
this.rightBox.isEdit = true; this.$refs.alertConfigBox.show(true, true);
this.rightBox.title = this.$t("alert.config.createAlertConfig");
this.rightBox.show = true;
}, },
detail: function(u) { detail: function(u) {
this.alertRule = Object.assign({}, u); this.alertRule = Object.assign({}, u);
this.rightBox.isEdit = false; this.$refs.alertConfigBox.show(true, 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);
}
}, },
getTableData: function() { getTableData: function() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
@@ -582,9 +262,6 @@ export default {
} }
}) })
}, },
esc: function() {
this.rightBox.show = false;
},
updateReceiverName: function(item) { updateReceiverName: function(item) {
//TODO 请求接口改名 //TODO 请求接口改名
var code = 200; var code = 200;
@@ -609,8 +286,6 @@ export default {
} }
}, },
jumpTo(data,id) { jumpTo(data,id) {
this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id;
this.$router.push({ this.$router.push({
path: "/" + data, path: "/" + data,
query: { query: {
@@ -638,18 +313,6 @@ export default {
}, },
mounted() { mounted() {
this.getTableData(); this.getTableData();
this.initReceiverData();
},
computed: {
sProject() {
return this.$store.state.createAlertConfig;
}
},
watch: {
sProject(n, o) {
this.$store.commit('toCreateAlertConfig', false);
this.toAdd();
}
} }
} }
</script> </script>

View File

@@ -74,7 +74,7 @@
<div class="el-select-add-btn"> <div class="el-select-add-btn">
<el-popover <el-popover
placement="left" placement="left"
trigger="click" trigger="manual"
v-model="popTypeVisible" v-model="popTypeVisible"
> >
<div class="pop-window-assetType"> <div class="pop-window-assetType">

View File

@@ -148,6 +148,19 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
</div> </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-row">
<div class="right-box-form-label">E-mail</div> <div class="right-box-form-label">E-mail</div>
<div class="right-box-form-content"> <div class="right-box-form-content">

View File

@@ -82,6 +82,8 @@
<span v-else-if="item.prop == 'param'"> <span v-else-if="item.prop == 'param'">
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</span> <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</span>
</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> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>
@@ -99,7 +101,7 @@
<module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box> <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> <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> </div>
</template> </template>
@@ -132,6 +134,14 @@ export default {
label: this.$t("project.endpoint.path"), label: this.$t("project.endpoint.path"),
prop: 'path', prop: 'path',
show: true, 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"), label: this.$t("project.endpoint.asset"),
prop: 'asset', prop: 'asset',
@@ -235,7 +245,7 @@ export default {
this.metricSearchLabel.moduleId = this.currentModule.id; this.metricSearchLabel.moduleId = this.currentModule.id;
this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo); this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo);
this.$set(this.metricSearchLabel, 'pageSize', this.metricPageObj.pageSize); 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) { if (response.code === 200) {
this.metricsTableData = response.data.list; this.metricsTableData = response.data.list;
this.metricPageObj.total = response.data.total; this.metricPageObj.total = response.data.total;
@@ -319,6 +329,7 @@ export default {
toCreateEndpoint() { toCreateEndpoint() {
this.$refs.addEndpointBox.show(true); this.$refs.addEndpointBox.show(true);
this.$refs.addEndpointBox.clearEndpoints();
}, },
//查看endpoint详情 //查看endpoint详情
@@ -333,7 +344,6 @@ export default {
//弹出module编辑页 //弹出module编辑页
toEditModule(module) { toEditModule(module) {
console.info(module)
this.currentModule = JSON.parse(JSON.stringify(module)); this.currentModule = JSON.parse(JSON.stringify(module));
if (!this.currentModule.paramObj) { if (!this.currentModule.paramObj) {
this.$set(this.currentModule, 'paramObj', []); this.$set(this.currentModule, 'paramObj', []);
@@ -399,7 +409,23 @@ export default {
//this.$refs.addEndpointBox.show(false); //this.$refs.addEndpointBox.show(false);
} else if (type == 4) { } 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() { created() {
this.currentProject = this.$store.state.currentProject; this.currentProject = this.$store.state.currentProject;

View File

@@ -22,6 +22,7 @@ import editEndpointBox from './components/common/rightBox/editEndpointBox'; //en
import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件 import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件 import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件 import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
Vue.component("Pagination", Pagination); Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput); Vue.component("searchInput", searchInput);
@@ -31,6 +32,7 @@ Vue.component("edit-endpoint-box", editEndpointBox);
Vue.component("add-endpoint-box", addEndpointBox); Vue.component("add-endpoint-box", addEndpointBox);
Vue.component("assetAddUnit", assetAddUnit); Vue.component("assetAddUnit", assetAddUnit);
Vue.component("assetEditUnit", assetEditUnit); Vue.component("assetEditUnit", assetEditUnit);
Vue.component("alert-config-box", alertConfigBox);
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
Vue.prototype.$post = post; Vue.prototype.$post = post;