gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：添加module，endpoint的labels列 以及asset搜索条件添加

Browse Source
This commit is contained in:
zhangyu
2020-11-10 14:11:29 +08:00
parent bfd70c845f
commit 6e406374e8
13 changed files with 798 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -81,6 +81,12 @@
</template>
<template v-else>-</template>
</span>
<span v-else-if="item.prop == 'labels'">
<template v-if="scope.row.labelModule">
<span v-for="(p,i) in scope.row.labelModule">{{p.key}}={{p.value}}<span v-if="i < scope.row.labelModule.length-1">，</span></span>
</template>
<template v-else>-</template>
</span>
<template v-else-if="item.prop == 'type'">{{scope.row.module.type}}</template>
<div v-else-if="item.prop == 'option'">&nbsp;
<span
@@ -204,6 +210,11 @@
prop: 'type',
show: false,
width:200,
},{
label: this.$t("project.endpoint.labels"),
prop: 'labels',
show: true,
width:200,
},{
label: this.$t("project.endpoint.param"),
prop: 'param',
@@ -278,9 +289,14 @@
try {
let tempObj = JSON.parse(response.data.list[i].param);
response.data.list[i].paramObj = [];
let tempObj1 = JSON.parse(response.data.list[i].labels);
response.data.list[i].labelModule = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
}
for (let k in tempObj1) {
response.data.list[i].labelModule.push({key: k, value: tempObj1[k]})
}
} catch (err) {
//console.error(response.data.list[i], err);
}
@@ -334,6 +350,9 @@
if (!this.endpoint.paramObj) {
this.$set(this.endpoint, 'paramObj', []);
}
if (!this.endpoint.labelModule) {
this.$set(this.endpoint, 'labelModule', []);
}
},
closeEditEndpointRightBox(refresh) {
this.rightBox.editEndpoint.show = false;

11
nezha-fronted/src/components/common/header.vue
View File

@@ -222,8 +222,8 @@
projectData: [], //顶部菜单project列表中的数据
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
editModule: { type: 'http', name: '', project: {}, port: 9100, path: '', param: '', paramObj: []}, //新增/编辑的module
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
editModule: { type: 'http', name: '', project: {}, port: 9100, path: '', param: '', paramObj: [], labelModule:[],labels:'',}, //新增/编辑的module
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [],labels:'',labelModule:[],}, //endpoint弹框用来回显module，此处固定为空对象
editEndpoint: { //新增/编辑的endpoint
id: '',
host: '',
@@ -232,9 +232,10 @@
path: '',
asset: {id: '', name: '', host: ''},
project: {id: '', name: ''},
module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
module: {id: '', name: '', param: '', paramObj: {}, projectId: '',labelModule:[],labels:''},
moduleId: '',
assetId: ''
assetId: '',
labelModule:[]
},
editAsset: {
id: '',
@@ -332,9 +333,11 @@
port: 9100,
path: '',
param: '',
labels:'',
type: 'http',
paramObj: [],
snmpParam: '',
labelModule:[],
//snmp setting 下划线命名是因为业务需求
walk: [],
version: 2, //2/3

2
nezha-fronted/src/components/common/js/constants.js
View File

@@ -92,7 +92,7 @@ export const asset = {
stateData: [
{value: 1, label: i18n.t('asset.inStock')},
{value: 2, label: i18n.t('asset.notInStock')},
{value: 3, label: i18n.t('asset.offStreamUnit')},
{value: 3, label: i18n.t('asset.Suspended')},
],
};

4
nezha-fronted/src/components/common/language/cn.js
View File

@@ -535,7 +535,7 @@ const cn = {
uSize: "U位",
inStock: "在库",
notInStock: "出库",
offStreamUnit:'停用',
Suspended:'停用',
principal: "负责人",
tel: "电话",
featureTitle: "属性",
@@ -867,7 +867,7 @@ const cn = {
stateInfo_230010: "Prometheus服务可用",
stateInfo_230011: "Endpoint 连接错误",
alerts:"告警",
label:'标签',
labels:'标签',
},
metrics: {
metrics: "指标",

4
nezha-fronted/src/components/common/language/en.js
View File

@@ -441,7 +441,7 @@ const en = {
uSize: 'U size',
inStock: 'In stock',//'在库'
notInStock: 'Not in stock',//'出库'
offStreamUnit:'off stream unit',
Suspended:'Suspended',
assetType:'Asset type',//'资产类型'
principal:'Administrator',//'负责人'
tel:'Telephone', //'电话'
@@ -874,7 +874,7 @@ const en = {
stateInfo_230010:'Promserver can be used',
stateInfo_230011:'Endpoint connection refused',
alerts:'Alerts',
label:'Label'
labels:'Labels'
},
metrics: {
metrics: 'Metrics',//"指标"

12
nezha-fronted/src/components/common/leftMenu.vue
View File

@@ -156,8 +156,8 @@
currentProjectTitle: '',
currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
module: {}, //编辑的module
blankModule: {name: '', project: {}, port: 9100, path: '', param: '', type: 'http', paramObj: [], snmpParam: '', walk: [], version: 2, max_repetitions: 25, retries: 3, timeout: 10, community: 'public', username: '', security_level: 'noAuthNoPriv', password: '', auth_protocol: 'MD5', priv_protocol: 'DES', priv_password: '', context_name: ''}, //空白module
currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
blankModule: {name: '', project: {}, port: 9100, path: '', param: '',labels:'', type: 'http', paramObj: [],labelModule:[], snmpParam: '', walk: [], version: 2, max_repetitions: 25, retries: 3, timeout: 10, community: 'public', username: '', security_level: 'noAuthNoPriv', password: '', auth_protocol: 'MD5', priv_protocol: 'DES', priv_password: '', context_name: ''}, //空白module
currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: '',labels:'',labelModule:[]}, //用来回显的module
ready: false,
rightBox: {module: {show: false}},
@@ -304,10 +304,15 @@
for (let i = 0; i < this.moduleList.length; i++) {
try {
let tempObj = JSON.parse(this.moduleList[i].param);
let tempObj1 = JSON.parse(this.moduleList[i].labels);
this.$set(this.moduleList[i], 'paramObj', []);
this.$set(this.moduleList[i], 'labelModule', []);
for (let k in tempObj) {
this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
}
for (let k in tempObj1) {
this.moduleList[i].labelModule.push({key: k, value: tempObj1[k]});
}
} catch (err) {}
}
}
@@ -343,6 +348,9 @@
if (!this.module.paramObj) {
this.$set(this.module, 'paramObj', []);
}
if (!this.module.labelModule) {
this.$set(this.module, 'labelModule', []);
}
if (this.module.snmpParam) {
this.initSnmpParam(this.module);
}

144
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="showEditParamBox(false)" v-clickoutside="clickOutside">
<div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="()=>{showEditParamBox(false);showEditLabelsBox(false)}" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns"></div>
<!-- end--顶部按钮-->
@@ -94,7 +94,7 @@
<el-input class="module-info module-info-port input-x-mini-22" :class="{'module-info-port-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.port"></el-input>
<el-popover
placement="bottom"
width="200"
width="100"
trigger="hover"
v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'"
>
@@ -103,6 +103,18 @@
</div>
<el-input id="edit-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini-22" v-model="currentModuleCopy.param"></el-input>
</el-popover>
<el-popover
placement="bottom"
width="100"
trigger="hover"
>
<div class="endpoint-param-pop">
<div v-for="item,index in currentModuleCopy.labelModule">{{item.key}}={{item.value}}</div>
</div>
<el-input id="edit-labels" @click.native.stop="showEditLabelsBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param module-info-labels input-x-mini-22" :class="{'module-info-labels-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.labels"></el-input>
</el-popover>
<el-input v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'" class="module-info module-info-path input-x-mini-22" v-model="currentModuleCopy.path"></el-input>
<button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light module-info module-info-cover"><i class="nz-icon nz-icon-override"></i></button>
</div>
@@ -151,6 +163,26 @@
</el-form-item>
</span>
</span>
<span v-else-if="title.prop == 'labels'">
<el-popover
v-if="!scope.row.isEdit"
placement="bottom"
width="200"
trigger="hover"
>
<div class="endpoint-param-pop">
<div v-for="p in scope.row.labelModule">{{p.key}}={{p.value}}</div>
</div>
<span slot="reference">
<span @mousedown.stop>{{scope.row.labels.length > 8 ? scope.row.labels.substring(0, 8) + '...' : scope.row.labels}}</span>
</span>
</el-popover>
<span @mousedown.stop v-else @click.stop="showEditLabelsBox(true, scope.row, 2, $event)">
<el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
<el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.labels"></el-input>
</el-form-item>
</span>
</span>
<span v-else-if="title.prop == 'path'">
<el-popover
placement="bottom"
@@ -236,6 +268,23 @@
</div>
</transition>
<!--end--param编辑框-->
<!--start--labels编辑框-->
<transition name="right-sub-box">
<div @mousedown.stop class="right-sub-box" v-if="editLabelsBox.show" :style="'top: ' + editLabelsBox.top + 'px; left: ' + editLabelsBox.left + 'px;'">
<div class="param-box">
<div class="param-box-row" v-for="(item, index) in tempLabelModule">
<el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
<span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
<span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeLabels(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
</div>
</div>
<div style="width: 100%; text-align: center; height: 25px;">
<el-button @click="addLabels" id="add-labels" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>
</div>
</div>
</transition>
<!--end--param编辑框-->
</div>
</template>
@@ -262,10 +311,12 @@
currentModuleCopy: {},
currentProjectCopy: {id: ''},
tempParamObj: [],
tempLabelModule: [],
tempEndpoint: {},
tempEndpoint2: {},
rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
editParamBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框
editLabelsBox: {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: -1},
@@ -278,18 +329,23 @@
{
label: this.$t("project.endpoint.asset"),
prop: 'asset',
width: 121,
width: 76,
show: true,
},{
label: this.$t("project.endpoint.host"),
prop: 'host',
width: 121,
width: 76,
show: true,
},{
label: this.$t("project.endpoint.port"),
prop: 'port',
width: 54,
show: true,
},{
label: this.$t("project.endpoint.labels"),
prop: 'labels',
width: 90,
show: true,
},{
label: this.$t("project.endpoint.param"),
prop: 'param',
@@ -350,6 +406,50 @@
this.editParamBox.show = show;
},
//子弹框控制 obj: module或endpoint对象 type:1module2endpoint
showEditLabelsBox(show, obj, type, e) {
//editLabelsBox tempLabelModule labelModule
console.log(123123123123,show, obj, type, e,this.tempLabelModule);
if (show) {
let position = e.target.getBoundingClientRect();
this.editLabelsBox.type = type;
if (this.editLabelsBox.type == 2) {
this.tempEndpoint = obj;
}
this.editLabelsBox.top = position.top - 227;
this.editLabelsBox.left = position.left - 48;
if (!obj.labels) {
this.$set(obj, 'labelModule', []);
this.tempLabelModule = [];
} else {
this.tempLabelModule = JSON.parse(JSON.stringify(obj.labelModule));
}
} else {
if (!this.editLabelsBox.show) {
return;
}
for (let i = 0; i < this.tempLabelModule.length; i++) {
if (!this.tempLabelModule[i].key || !this.tempLabelModule[i].value) {
this.tempLabelModule.splice(i, 1);
i--;
}
}
if (this.editLabelsBox.type == 1) {
this.currentModuleCopy.labelModule = this.tempLabelModule;
this.currentModuleCopy.labels = this.paramToJson(this.tempLabelModule);
} else if (this.editLabelsBox.type == 2) {
for (let i = 0; i < this.endpointList.length; i++) {
if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
this.endpointList[i].labels = this.paramToJson(this.tempLabelModule);
this.endpointList[i].labelModule = this.tempLabelModule;
break;
}
}
}
this.tempLabelModule = [];
}
this.editLabelsBox.show = show;
},
clickOutside() {
this.esc(false);
},
@@ -368,7 +468,15 @@
removeParam(index) {
this.tempParamObj.splice(index, 1);
},
// 新增labels
addLabels() {
this.tempLabelModule.push({key: '', value: ''});
},
// 移除单个param
removeLabels(index) {
this.tempLabelModule.splice(index, 1);
},
//编辑endpoint
toEditEndpoint(endpoint) {
for (let i = 0; i < this.endpointList.length; i++) {
@@ -462,6 +570,7 @@
this.endpoint.moduleId = '';
this.endpoint.projectId = project.id;
this.editParamBox.show = false;
this.editLabelsBox.show = false;
this.tempParamObj = [];
this.endpointList = [];
this.getAssetList();
@@ -471,6 +580,7 @@
changeModule(module) {
this.endpoint.moduleId = module.id;
this.editParamBox.show = false;
this.editLabelsBox.show = false;
this.tempParamObj = [];
},
@@ -525,6 +635,8 @@
host: item.host,
param: this.currentModuleCopy.param ? this.currentModuleCopy.param : "",
paramObj: this.currentModuleCopy.paramObj ? this.currentModuleCopy.paramObj : {},
labels: this.currentModuleCopy.labels ? this.currentModuleCopy.labels : "",
labelModule: this.currentModuleCopy.labelModule ? this.currentModuleCopy.labelModule : {},
port: this.currentModuleCopy.port,
path: this.currentModuleCopy.path,
moduleId: this.currentModuleCopy.id
@@ -576,10 +688,15 @@
for (let i = 0; i < response.data.list.length; i++) {
try {
let tempObj = JSON.parse(response.data.list[i].param);
let tempObj1 = JSON.parse(response.data.list[i].labels);
response.data.list[i].paramObj = [];
response.data.list[i].labelsModule = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
}
for (let k in tempObj1) {
response.data.list[i].labelsModule.push({key: k, value: tempObj1[k]})
}
} catch(err) {
//console.info(response.data.list[i], err);
}
@@ -601,7 +718,7 @@
//对endpointList进行处理，避免携带过多无用数据
let endpointList = [];
this.endpointList.forEach((item, index) => {
let endpoint = {moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host};
let endpoint = {moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host,labels:item.labels};
endpointList.push(endpoint);
});
this.$refs.addEndpoint.validate((valid) => {
@@ -627,6 +744,8 @@
this.endpointList[i].port = this.currentModuleCopy.port;
this.endpointList[i].param = this.currentModuleCopy.param;
this.endpointList[i].paramObj = this.currentModuleCopy.paramObj;
this.endpointList[i].labels = this.currentModuleCopy.labels;
this.endpointList[i].labelModule = this.currentModuleCopy.labelModule;
this.endpointList[i].path = this.currentModuleCopy.path;
}
this.$message({duration: 1000, type: 'success', message: this.$t("tip.coverSuccess")});
@@ -702,11 +821,11 @@
immediate: true,
handler(n, o) {
if (n.type && n.type.toLowerCase() == 'snmp') {
this.endpointTableTitle[3].show = false;
this.endpointTableTitle[4].show = false;
this.endpointTableTitle[5].show = false;
} else {
this.endpointTableTitle[3].show = true;
this.endpointTableTitle[4].show = true;
this.endpointTableTitle[5].show = true;
}
}
},
@@ -831,15 +950,22 @@
}
.module-info-port {
width: 53px;
right: 209px;
right: 309px;
}
.module-info-port-snmp {
right: 50px;
right: 142px;
}
.module-info-param {
width: 89px;
right: 116px;
}
.module-info-labels {
width: 89px;
right: 216px;
}
.module-info-labels-snmp {
right: 50px;
}
.module-info-path {
width: 70px;
right: 42px;

59
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -84,6 +84,34 @@
</el-scrollbar>
</div>
</el-form-item>
<!--label-->
<el-form-item :label="$t('project.endpoint.labels')" class="right-box-form-param">
<div style="text-align: right;margin-bottom: 5px">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
<!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
<!--</button>-->
<span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add">
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
</span>
</div>
<div class="param-box param-box-module">
<el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
<div class="param-box-row" v-for="(item, index) in endpoint.labelModule">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
</el-form-item>
<span class="param-box-row-eq">=</span>
<el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div>
</el-scrollbar>
</div>
</el-form-item>
</el-form>
</el-scrollbar>
@@ -194,6 +222,35 @@
}
},
// 新增label
addLabel() {
console.log(123123);
this.endpoint.labelModule.push({key: '', value: ''});
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
// 移除单个Label
removeLabel(index) {
this.endpoint.labelModule.splice(index, 1);
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
//将labels转为json字符串格式
labelsToJson(param) {
let tempParam = {};
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() {
return new Promise(resolve => {
@@ -296,12 +353,12 @@
}
});
},
//保存endpoint
save() {
this.$refs.endpointForm.validate((valide=>{
if(valide){
this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj);
this.editEndpoint.labels = this.labelsToJson(this.editEndpoint.labelModule);
let requestData = [];
requestData.push(this.editEndpoint);
this.$put('endpoint', requestData).then(response => {

64
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -268,6 +268,34 @@
</div>
</el-form-item>
<el-form-item :label="$t('project.endpoint.labels')" class="right-box-form-param">
<div style="text-align: right;margin-bottom: 5px">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
<!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
<!--</button>-->
<span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add">
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
</span>
</div>
<div class="param-box param-box-module">
<el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
<div class="param-box-row" v-for="(item, index) in editModule.labelModule">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
</el-form-item>
<span class="param-box-row-eq">=</span>
<el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div>
</el-scrollbar>
</div>
</el-form-item>
<el-form-item :label='$t("project.module.description")' prop="remark">
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="editModule.remark" size="small"></el-input>
</el-form-item>
@@ -446,7 +474,7 @@
this.$nextTick(()=>{
this.$refs.selectWalk.show();
})
this.editModule.port= 161
this.editModule.port= 161;
}
this.updateScrollbar();
},
@@ -505,7 +533,11 @@
},
/*保存*/
save() {
if(this.editModule.type.toLowerCase() == 'snmp'){
this.editModule.paramObj=[];//处理snmp可能会带有param的问题
}
this.editModule.param = this.paramToJson(this.editModule.paramObj);
this.editModule.labels = this.labelsToJson(this.editModule.labelModule);
this.$refs.moduleForm.validate((valid) => {
if (valid) {
if (this.editModule.type.toLowerCase() == 'snmp') {
@@ -585,7 +617,6 @@
this.$refs.paramBoxScrollbar.update();
});
},
// 移除单个param
removeParam(index) {
this.editModule.paramObj.splice(index, 1);
@@ -593,7 +624,21 @@
this.$refs.paramBoxScrollbar.update();
});
},
// 新增label
addLabel() {
console.log(123123);
this.editModule.labelModule.push({key: '', value: ''});
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
// 移除单个Label
removeLabel(index) {
this.editModule.labelModule.splice(index, 1);
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
//将param转为json字符串格式
paramToJson(param) {
let tempParam = {};
@@ -607,6 +652,19 @@
return jsonString;
}
},
//将labels转为json字符串格式
labelsToJson(param) {
let tempParam = {};
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;
}
},
updateScrollbar() {
this.$refs.scrollbar.update();
}

3
nezha-fronted/src/components/common/searchSelectInfo.vue
View File

@@ -46,6 +46,9 @@
}, {
value: 2,
label: i18n.t('asset.notInStock')
}, {
value: 3,
label: i18n.t('asset.Suspended')
}
],
pingStatus:[

2
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -87,7 +87,7 @@
<div v-if="item.prop=='state'">
<span v-if="scope.row.state==1">{{ $t('asset.inStock')}}</span>
<span v-if="scope.row.state==2">{{ $t('asset.notInStock')}}</span>
<span v-if="scope.row.state==3">{{ $t('asset.offStreamUnit')}}</span>
<span v-if="scope.row.state==3">{{ $t('asset.Suspended')}}</span>
</div>
<div v-if="item.prop == 'pingStatus'">
<el-popover

147
nezha-fronted/src/components/page/project/project.vue
View File

@@ -1,19 +1,24 @@
<style lang="scss">
@import '../../charts/chart';
.project-calendar .el-input__inner {
height: 24px;
}
.change-time-height {
height: 23px;
}
.date-pick-group {
display: flex;
align-items: center;
justify-content: space-between;
}
.date-pick-group button:first-of-type {
margin-right: 4px;
}
.date-pick-group button:last-of-type {
margin-left: 4px;
}
@@ -25,7 +30,9 @@
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
<div class="top-tool-search">
<search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input>
</div>
<export-excel
export-file-name="endpoint"
export-url="/endpoint/export"
@@ -35,7 +42,8 @@
class="margin-l-20"
>
<template slot="optionZone">
<button @click.stop="addEndpoint" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<button @click.stop="addEndpoint" :title="$t('overall.createEndpoint')"
class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<i class="nz-icon nz-icon-create-square"></i>
</button>
</template>
@@ -94,12 +102,21 @@
</span>
<span v-else-if="item.prop == 'param'">
<template v-if="scope.row.paramObj">
<span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
<span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span
v-if="i < scope.row.paramObj.length-1">，</span></span>
</template>
<template v-else>-</template>
</span>
<span v-else-if="item.prop == 'labels'">
<template v-if="scope.row.labelModule">
<span v-for="(p,i) in scope.row.labelModule">{{p.key}}={{p.value}}<span
v-if="i < scope.row.labelModule.length-1">，</span></span>
</template>
<template v-else>-</template>
</span>
<template v-else-if="item.prop=='alerts'">
<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light"
:disabled=" scope.row.alertNum < 99">
<span :id="'endpoint-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
{{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
<sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
@@ -109,18 +126,24 @@
</template>
<template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
<span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option"
:id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;
<span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="nz-icon nz-icon-search"></i></span>
<span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option"
:id="'edp-query-'+scope.row.id"><i class="nz-icon nz-icon-search"></i></span>
&nbsp;
<span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option"
:id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
<span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option"
:id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
</div>
<span v-else-if="item.prop == 'state'">
<el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
<el-popover placement="right" width="50" trigger="hover"
:popper-class="scope.row.state == '1'?'small-pop':''">
<div slot="reference" style="width: 20px">
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
<div
:class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
</div>
<div>
<div v-if="scope.row.state == '1'">up</div>
@@ -134,17 +157,22 @@
</el-table-column>
<el-table-column width="28" :resizable="true">
<template slot="header" slot-scope="scope">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}"
:class="{'to-top-is-hover': tools.tableHover}"
v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i
class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
<Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo'
@pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
</div>
</div>
</template>
@@ -169,10 +197,14 @@
@listResize="listResize"></bottom-box>
</transition>
<transition name="right-box">
<add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
<add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject"
:current-module="currentModule" @close="closeAddEndpointRightBox"
ref="addEndpointBox"></add-endpoint-box>
</transition>
<transition name="right-box">
<edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule" :endpoint="endpoint" @close="closeEditEndpointRightBox" ref="editEndpointBox"></edit-endpoint-box>
<edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule"
:endpoint="endpoint" @close="closeEditEndpointRightBox"
ref="editEndpointBox"></edit-endpoint-box>
</transition>
</div>
</template>
@@ -184,6 +216,7 @@
import bus from '../../../libs/bus'
import facade from '@/components/common/project/projectFacade'
import deleteButton from "../../common/deleteButton";
export default {
name:"project2",
components:{
@@ -228,7 +261,19 @@
tableId:'projectTable', //需要分页的table的id，用于记录每页数量
userData:[],
endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpoint:{
id:'',
host:'',
port:'',
param:'',
path:'',
asset:{},
project:{},
module:{},
moduleId:'',
assetId:'',
paramObj:[]
},
tableTitle:[
{
label:this.$t("project.endpoint.endpointId"),
@@ -254,6 +299,11 @@
prop:'type',
show:false,
width:200,
},{
label:this.$t("project.endpoint.labels"),
prop:'labels',
show:true,
width:200,
},{
label:this.$t("project.endpoint.param"),
prop:'param',
@@ -351,10 +401,15 @@
for(let i=0; i<response.data.list.length; i++){
try{
let tempObj=JSON.parse(response.data.list[i].param);
let tempObj1=JSON.parse(response.data.list[i].labels);
response.data.list[i].paramObj=[];
response.data.list[i].labelModule=[];
for(let k in tempObj){
response.data.list[i].paramObj.push({key:k,value:tempObj[k]})
}
for(let k in tempObj1){
response.data.list[i].labelModule.push({key:k,value:tempObj1[k]})
}
}catch(err){
//console.error(response.data.list[i], err);
}
@@ -448,6 +503,9 @@
if(!this.endpoint.paramObj){
this.$set(this.endpoint,'paramObj',[]);
}
if(!this.endpoint.labelModule){
this.$set(this.endpoint,'labelModule',[]);
}
},
addEndpoint(){
@@ -569,7 +627,9 @@
let errCodes=[230009,230010,230011];
if(row){
if(row.state==0){
if(errCodes.find((item)=>{return row.stateInfo.code == item})){
if(errCodes.find((item)=>{
return row.stateInfo.code==item
})){
return this.$t('project.endpoint.stateInfo_'+row.stateInfo.code)
}else{
return row.stateInfo.msg;
@@ -778,6 +838,7 @@
.project {
height: 100%;
}
/* .content-right-option {
cursor: pointer;
display: inline-block;
@@ -801,20 +862,24 @@
height: 27px;
margin-top: -3px;
}
.param-btn-active {
background-color: #656565;
color: white;
border: 1px solid #656565;
}
.param-btn-active:hover, .param-btn-active:focus {
background-color: #656565;
color: white;
}
.param-btn-clear {
background-color: #D4D4D4;
border: 1px solid #D4D4D4;
color: white;
}
.param-btn-clear:hover, .param-btn-clear:focus {
background-color: #D4D4D4;
color: white;
@@ -825,23 +890,29 @@
border-radius: 4px;
padding: 0 10px;
}
.param-box-endpoint {
height: 325px;
}
.param-box-module {
height: 227px;
}
.param-box-row {
padding: 7px 0 0 0;
position: relative;
}
.param-box-row:last-of-type {
padding-bottom: 7px;
}
.param-box-row-key, .param-box-row-value {
display: inline-block;
width: 41.5%;
}
.param-box-row-eq {
display: inline-block;
width: 22px;
@@ -850,6 +921,7 @@
line-height: 32px;
color: #c4c7cF;
}
.param-box-row-symbol {
font-size: 12px;
color: #c4c7cF;
@@ -863,11 +935,13 @@
right: 25px;
cursor: pointer;
}
.param-box-row-symbol > i {
position: absolute;
top: 1px;
right: 1px;
}
/* end--param*/
/* begin--子弹框*/
@@ -880,19 +954,23 @@
z-index: 2;
padding: 0 10px;
}
.right-sub-box .el-input-group {
width: 227px;
float: right;
margin: 7px 0 0 0;
}
/* begin--搜索框*/
.endpoint-asset-prepend {
border-radius: 4px 0 0 4px;
}
.endpoint-asset-label {
line-height: 26px;
height: 26px;
}
.endpoint-asset-dropdown {
position: absolute;
top: 27px;
@@ -901,60 +979,74 @@
width: 52px;
left: 0;
}
.endpoint-asset-dropdown-item {
text-align: center;
line-height: 22px;
height: 22px;
cursor: default;
}
.endpoint-asset-label-txt {
display: inline-block;
width: 19px;
text-align: center;
}
.endpoint-asset-dropdown-item:first-of-type {
border-radius: 4px 4px 0 0;
}
.endpoint-asset-dropdown-item:last-of-type {
border-radius: 0 0 4px 4px;
}
.endpoint-asset-dropdown-item:hover {
background-color: #3a8ee6;
}
/* end--搜索框*/
/* begin--table*/
.endpoint-sub-table {
margin-top: 25px;
}
.line-100 {
margin-bottom: 3px;
}
.endpoint-sub-table-head {
line-height: 28px;
height: 30px;
}
.endpoint-sub-table-row {
line-height: 28px;
height: 30px;
color: #656565;
}
.endpoint-sub-table-row-active {
background-color: #dadada;
}
.endpoint-sub-table-col {
display: inline-block;
width: 45%;
padding-left: 10px;
}
.endpoint-sub-table-paginate-all {
position: absolute;
left: 10px;
bottom: 17px;
color: #5a5a5a;
}
.endpoint-sub-table-body {
font-size: 15px;
}
/* end--table*/
/* end--子弹框*/
@@ -966,6 +1058,7 @@
min-width: 50px;
white-space: normal;
}
.item-tip:hover > .item-tip-show {
display: block;
}
@@ -976,74 +1069,92 @@
margin: 0 3px;
min-width: 25px;
}
.right-sub-box .el-pagination button, .right-sub-box .el-pagination span:not([class*=suffix]) {
margin: 0 3px;
height: 25px;
line-height: 25px;
}
.right-sub-box .el-pager li {
height: 25px;
line-height: 25px;
}
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #656565;
border: 1px solid #656565;
}
.right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
background-color: white;
}
.right-sub-box .el-pagination button, .right-sub-box .el-pager li {
border: 1px solid #DADADA;
}
.right-sub-box .el-pager li.active + li {
border: 1px solid #DADADA;
}
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: black;
}
.right-sub-box .el-pagination.is-background .el-pager li.active:hover {
color: white;
}
.endpoint-sub-table-paginate .el-pagination {
position: absolute;
right: 10px;
bottom: 13px;
}
.el-input-group__append > i {
cursor: pointer;
}
.el-table .disabledCheck .cell .el-checkbox__inner {
display: none !important;
}
.el-table .disabledCheck .cell::before {
/*content: '\e627';*/
/*font-family: 'nz-icon';*/
text-align: center;
line-height: 37px;
}
/* end--覆盖分页组件样式*/
/* 列表搜索框 样式重写*/
.relative-position {
position: relative;
}
.query-input-inactive {
left: 213px;
width: 18%;
}
.query-input-inactive .el-input__inner {
height: 26px;
line-height: 26px;
}
.metric-tip-icon {
vertical-align: middle;
transform: scale(0.6);
display: inline-block;
}
.metirc-tip-list {
line-height: 26px;
font-weight: bold;
}
.table-header-inner {
position: absolute;
z-index: 1;
@@ -1051,9 +1162,11 @@
left: 11px;
cursor: pointer;
}
.control-icon-unchecked {
color: #d1d1d1;
}
.control-icon-checked {
color: #666;
}

2
nezha-fronted/static/config.json
View File

@@ -1 +1 @@
{"baseUrl":"http://192.168.40.42:8080/nz-admin", "version": "1.2"}
{"baseUrl":"http://192.168.40.42:8080/nz-admin", "version": "1.2.2020.11.10.14.10"}