feat:traffic setting 功能修改
This commit is contained in:
@@ -301,7 +301,8 @@ const en = {
|
||||
port:'Invalid port',
|
||||
url:'Invalid URL',
|
||||
uSize:'Must be number(1 - 47)',
|
||||
requiredIdc:'dc is required'
|
||||
requiredIdc:'dc is required',
|
||||
key:'Invalid key'
|
||||
},
|
||||
search: {
|
||||
searchTip: 'Enter to search',//'点击或回车执行搜索'
|
||||
|
||||
@@ -3,16 +3,27 @@
|
||||
<div class="right-sub-box sub-box" v-if="editTagsBox.show" :style="'top: ' + editTagsBox.top + 'px; left: ' + editTagsBox.left + 'px;'" >
|
||||
<div class="param-box" style="height: calc(100% - 25px)">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
|
||||
<!--<div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
|
||||
<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="removeTags(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
|
||||
</div>-->
|
||||
<el-tag v-for="(item, index) in tempTagsObj" class="sub-box-tags" size="small" :closable="true" :key="index" @close='delTag(item,index)'>
|
||||
<div >{{item.key}}:{{item.value}}</div>
|
||||
</el-tag>
|
||||
<div class="param-box-row" v-show="showNewTagInput">
|
||||
<el-input placeholder="key" style="width: 63px" ref="tagKeyInput" class="param-box-row-key input-x-mini-22" :class="{'input-error':newTagInputError}" v-model="newTag.key" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
|
||||
<span class="param-box-row-eq">=</span>
|
||||
<el-input placeholder="value" style="width: 63px" class="param-box-row-value input-x-mini-22" v-model="newTag.value" @keydown.enter.native="confirmInput" @blur="confirmInput"></el-input>
|
||||
</div>
|
||||
<div v-if="showNewTagInput&&newTagInputError" style="text-align: left;padding-left: 10px">
|
||||
<span style="color: #F56C6C;font-size: 12px;">{{$t('validate.key')}}</span>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
|
||||
<!-- <el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>-->
|
||||
<el-button @click="showEditTagsBox(false)" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-check"></i></el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,6 +39,9 @@
|
||||
tempTagsObj:[],
|
||||
rowIndex:0,
|
||||
curConfigs:null,
|
||||
newTag:{key:'',value:''},
|
||||
showNewTagInput:true,
|
||||
newTagInputError:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@@ -41,7 +55,7 @@
|
||||
this.tempTagsObj=[];
|
||||
let obj=null;
|
||||
try{
|
||||
obj=JSON.parse(configs[index]['tags'])
|
||||
obj=configs[index]['tags']
|
||||
}catch (e) {
|
||||
|
||||
}
|
||||
@@ -54,40 +68,89 @@
|
||||
if (!this.editTagsBox.show) {
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < this.tempTagsObj.length; i++) {
|
||||
if (!this.tempTagsObj[i].key || !this.tempTagsObj[i].value) {
|
||||
this.tempTagsObj.splice(i, 1);
|
||||
i--;
|
||||
this.confirmInput();
|
||||
this.showNewTagInput=true;
|
||||
let tempObj={};
|
||||
for(let i=0;i<this.tempTagsObj.length;i++){
|
||||
let obj=this.tempTagsObj[i];
|
||||
if(obj.key && obj.value){
|
||||
tempObj[obj.key]=obj.value;
|
||||
}
|
||||
}
|
||||
|
||||
let tagsJson=this.tagsToJson(this.tempTagsObj);
|
||||
this.curConfigs[this.rowIndex]['tags']=tagsJson;
|
||||
this.curConfigs[this.rowIndex]['tags']=Object.assign({},tempObj)
|
||||
}
|
||||
this.editTagsBox.show = show;
|
||||
},
|
||||
tagsToJson(tags) {
|
||||
let tempTags = {};
|
||||
for (let i = 0; i < tags.length; i++) {
|
||||
eval('tempTags["' + tags[i].key + '"]="' + tags[i].value + '"');
|
||||
validateInput:function(){
|
||||
if(this.newTag.key == ''){
|
||||
return false;
|
||||
}
|
||||
let jsonString = JSON.stringify(tempTags);
|
||||
if (jsonString == '{}') {
|
||||
return "";
|
||||
} else {
|
||||
return jsonString;
|
||||
if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(this.newTag.key)){
|
||||
this.newTagInputError=true;
|
||||
return false;
|
||||
}
|
||||
if(this.newTag.value == ''){
|
||||
return false;
|
||||
}
|
||||
this.newTagInputError=false;
|
||||
return true;
|
||||
},
|
||||
confirmInput:function(){
|
||||
if(this.validateInput()){
|
||||
this.tempTagsObj.push(Object.assign({},this.newTag));
|
||||
this.showNewTagInput=true;
|
||||
this.newTag={key:'',value:''};
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.tagKeyInput.focus();
|
||||
})
|
||||
}
|
||||
},
|
||||
editTag:function(tag,index){
|
||||
if(this.showNewTagInput == true){//已经有编辑状态的tag,先保存
|
||||
this.confirmInput();
|
||||
}
|
||||
this.tempTagsObj.splice(index,1);
|
||||
this.newTag=Object.assign({},tag)
|
||||
this.showNewTagInput=true;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.tagKeyInput.focus();
|
||||
})
|
||||
},
|
||||
addTags:function(){
|
||||
this.tempTagsObj.push({key:'',value:''})
|
||||
if(this.showNewTagInput == true){//已经有编辑状态的tag,先保存
|
||||
this.confirmInput();
|
||||
}
|
||||
this.newTag={key:'',value:''}
|
||||
this.showNewTagInput=true;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.tagKeyInput.focus();
|
||||
})
|
||||
},
|
||||
removeTags:function(index){
|
||||
delTag:function(tag,index){
|
||||
this.tempTagsObj.splice(index,1)
|
||||
},
|
||||
clearNewTag:function(){
|
||||
this.newTag={key:'',value:''}
|
||||
this.showNewTagInput=true;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sub-box-tags{
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
width: 150px;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.sub-box-tags .el-tag__close{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 2px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.right-sub-box {
|
||||
width: 170px;
|
||||
@@ -96,6 +159,13 @@
|
||||
z-index: 2;
|
||||
padding: 0;
|
||||
}
|
||||
.sub-box{
|
||||
padding:5px;
|
||||
text-align: center;
|
||||
}
|
||||
.sub-box .param-box-row{
|
||||
padding:0 10px 0 10px !important;
|
||||
}
|
||||
.sub-box .add-btn{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
assetList:[],
|
||||
rightBox: {
|
||||
show: false,
|
||||
title: '',
|
||||
title: this.$t('config.dc.traffic.title'),
|
||||
isCreate: false,
|
||||
isEdit:false
|
||||
},
|
||||
@@ -66,7 +66,18 @@
|
||||
idcId:'',
|
||||
setting:[
|
||||
{
|
||||
assetId:null,
|
||||
host:'',
|
||||
port:161,
|
||||
community:'public',
|
||||
version:2,
|
||||
auth:{
|
||||
username:'',
|
||||
securityLevel:'',
|
||||
securityLevel:'',
|
||||
authProtocol:'',
|
||||
privProtocol:'',
|
||||
privPassword:'',
|
||||
},
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
@@ -89,9 +100,21 @@
|
||||
addAssetSetting:function(){
|
||||
let valid=this.validateTabs();
|
||||
if(valid){
|
||||
|
||||
this.uuids.push(getUUID());
|
||||
this.traffic.setting.push({
|
||||
assetId:null,
|
||||
host:'',
|
||||
port:161,
|
||||
community:'public',
|
||||
version:2,
|
||||
auth:{
|
||||
username:'',
|
||||
securityLevel:'',
|
||||
securityLevel:'',
|
||||
authProtocol:'',
|
||||
privProtocol:'',
|
||||
privPassword:'',
|
||||
},
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
@@ -99,7 +122,6 @@
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
inputError:false,
|
||||
}
|
||||
]
|
||||
})
|
||||
@@ -107,7 +129,18 @@
|
||||
},
|
||||
getEmptyTraffic:function(){
|
||||
let obj={
|
||||
assetId:null,
|
||||
host:'',
|
||||
port:161,
|
||||
community:'public',
|
||||
version:2,
|
||||
auth:{
|
||||
username:'',
|
||||
securityLevel:'',
|
||||
securityLevel:'',
|
||||
authProtocol:'',
|
||||
privProtocol:'',
|
||||
privPassword:'',
|
||||
},
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
@@ -166,7 +199,7 @@
|
||||
direction:config.direction.toString(),
|
||||
ifindex:config.ifindex,
|
||||
ifdescr:config.ifdescr,
|
||||
tags:config.tags&&config.tags!=''?JSON.parse(config.tags):{},
|
||||
tags:config.tags,
|
||||
}
|
||||
result.setting.push(settingItem);
|
||||
})
|
||||
@@ -201,12 +234,12 @@
|
||||
if(list.length>0){
|
||||
let map=new Map();
|
||||
list.forEach(item=>{
|
||||
let arr=map.get(item.asset.id);
|
||||
let arr=map.get(item.host);
|
||||
if(arr){
|
||||
arr.push(item)
|
||||
map.set(item.asset.id,arr);
|
||||
map.set(item.host,arr);
|
||||
}else{
|
||||
map.set(item.asset.id,[item])
|
||||
map.set(item.host,[item])
|
||||
}
|
||||
})
|
||||
this.traffic={
|
||||
@@ -215,17 +248,21 @@
|
||||
}
|
||||
let keys=map.keys();
|
||||
for(let key of keys){//settings 为同一asset下的设置集合
|
||||
let configs=map.get(key);
|
||||
let settingItem={
|
||||
assetId:key,
|
||||
host:configs[0].host,
|
||||
port:configs[0].port,
|
||||
community:configs[0].community,
|
||||
version:configs[0].version,
|
||||
auth:configs[0].auth,
|
||||
configs:[],
|
||||
}
|
||||
let configs=map.get(key);
|
||||
configs.forEach(item=>{
|
||||
let config={
|
||||
direction:item.direction&&item.direction!=''?item.direction.split(','):[],
|
||||
ifindex:item.ifindex,
|
||||
ifdescr:item.ifdescr,
|
||||
tags:JSON.stringify(item.tags),
|
||||
tags:item.tags,
|
||||
edit:false,
|
||||
}
|
||||
settingItem.configs.push(config);
|
||||
@@ -237,7 +274,18 @@
|
||||
idcId:'',
|
||||
setting:[
|
||||
{
|
||||
assetId:null,
|
||||
host:'',
|
||||
port:161,
|
||||
community:'public',
|
||||
version:2,
|
||||
auth:{
|
||||
username:'',
|
||||
securityLevel:'',
|
||||
securityLevel:'',
|
||||
authProtocol:'',
|
||||
privProtocol:'',
|
||||
privPassword:'',
|
||||
},
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
|
||||
@@ -1,9 +1,113 @@
|
||||
<template>
|
||||
<div class="asset-config-tab">
|
||||
<el-form-item :label="$t('asset.asset')" size="small" class="right-box-form-content" ref="assetConfigForm" label-width="90px">
|
||||
<el-select class="right-box-row-with-btn" clearable @clear="clearAssetInput" v-model="assetSetting.assetId" @change="assetChanged" popper-class="no-style-class" :class="{'input-error':assetValidate}">
|
||||
<!--<el-select class="right-box-row-with-btn" clearable @clear="clearAssetInput" v-model="assetSetting.assetId" @change="assetChanged" popper-class="no-style-class" :class="{'input-error':assetValidate}">
|
||||
<el-option v-for="(item,index) in assetList" :label="item.host" :disabled="item.isOccupy" :value="item.id" :key="item.host+'-'+item.id"></el-option>
|
||||
</el-select>
|
||||
</el-select>-->
|
||||
<el-autocomplete
|
||||
clearable
|
||||
class="asset-input right-box-row-with-btn"
|
||||
v-model="assetSetting.host"
|
||||
:fetch-suggestions="queryAssetHosts"
|
||||
:debounce="1000"
|
||||
:trigger-on-focus="false"
|
||||
:highlight-first-item="true"
|
||||
@input="hostInputChange"
|
||||
></el-autocomplete>
|
||||
<el-popover trigger="click" placement="bottom" @show="popShow" @hide="popHide" popper-class="no-style-class">
|
||||
<div class="mib-browser-ad-search">
|
||||
<el-row class="mib-browser-ad-search-item">
|
||||
<el-col :span="6"><div class="mib-browser-ad-search-label">{{$t("project.endpoint.port")}}</div></el-col>
|
||||
<el-col :span="17">
|
||||
<el-input class="input-x-mini-24" v-model.number="assetSetting.port"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="mib-browser-ad-search-item">
|
||||
<el-col :span="6"><div class="mib-browser-ad-search-label">{{$t('project.module.community')}}</div></el-col>
|
||||
<el-col :span="17">
|
||||
<el-input class="input-x-mini-24" v-model="assetSetting.community"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="mib-browser-ad-search-item">
|
||||
<el-col :span="6"><div class="mib-browser-ad-search-label">{{$t('project.module.version')}}</div></el-col>
|
||||
<el-col :span="17">
|
||||
<el-radio-group v-model.number="assetSetting.version">
|
||||
<el-radio-button :label="2"></el-radio-button>
|
||||
<el-radio-button :label="3"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--SNMP V3 setting-->
|
||||
<template v-if="assetSetting.version == 3">
|
||||
<el-row class="mib-browser-ad-search-item">
|
||||
<el-col :span="6">
|
||||
<div class="mib-browser-ad-search-label">{{$t('login.username')}}</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.username"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mib-browser-ad-search-item">
|
||||
<el-col :span="6">
|
||||
<div class="mib-browser-ad-search-label">{{$t('project.module.securityLevel')}}</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-radio-group v-model="assetSetting.auth.securityLevel" size="small">
|
||||
<el-radio-button label="noAuthNoPriv"></el-radio-button>
|
||||
<el-radio-button label="authNoPriv"></el-radio-button>
|
||||
<el-radio-button label="authPriv"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mib-browser-ad-search-item" v-if="assetSetting.auth.securityLevel == 'authNoPriv' || assetSetting.auth.securityLevel == 'authPriv'">
|
||||
<el-col :span="6">
|
||||
<div class="mib-browser-ad-search-label">{{$t('login.password')}}</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.password"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mib-browser-ad-search-item same-label-width" v-if="assetSetting.auth.securityLevel == 'authNoPriv' || assetSetting.auth.securityLevel == 'authPriv'">
|
||||
<el-col :span="6">
|
||||
<div class="mib-browser-ad-search-label">{{$t('project.module.authProtocol')}}</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-radio-group v-model="assetSetting.auth.authProtocol">
|
||||
<el-radio-button label="MD5"></el-radio-button>
|
||||
<el-radio-button label="SHA"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mib-browser-ad-search-item same-label-width" v-if="assetSetting.auth.securityLevel == 'authPriv'">
|
||||
<el-col :span="6">
|
||||
<div class="mib-browser-ad-search-label">{{$t('project.module.privProtocol')}}</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-radio-group v-model="assetSetting.auth.privProtocol">
|
||||
<el-radio-button label="DES"></el-radio-button>
|
||||
<el-radio-button label="AES"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mib-browser-ad-search-item" v-if="assetSetting.auth.securityLevel == 'authPriv'">
|
||||
<el-col :span="6">
|
||||
<div class="mib-browser-ad-search-label">{{$t('project.module.privPassword')}}</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-input class="input-x-mini-24" v-model.trim="assetSetting.auth.privPassword"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</div>
|
||||
<button slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="snmp-advanced">
|
||||
<i class="el-icon-more"></i>
|
||||
</button>
|
||||
</el-popover>
|
||||
<div class="right-box-row-btn" @click="delSelf"><i class="el-icon-minus"></i></div>
|
||||
</el-form-item>
|
||||
<div class="endpoints-box-endpoints">
|
||||
@@ -12,7 +116,7 @@
|
||||
v-scrollBar:el-table="'large'"
|
||||
max-height="300"
|
||||
height="200"
|
||||
:row-class-name="assetSetting.assetId == null?'not-allowed':''"
|
||||
:row-class-name="assetSetting.host == null?'not-allowed':''"
|
||||
@row-dblclick="changeRowEditState"
|
||||
@row-click="validateRows"
|
||||
class="taffic-setting-tab"
|
||||
@@ -23,7 +127,9 @@
|
||||
show-overflow-tooltip
|
||||
v-for="(item, index) in tableLabels"
|
||||
:width="item.width"
|
||||
align="center"
|
||||
:key="`col-${index}`"
|
||||
style="max-height: 200px"
|
||||
>
|
||||
<template slot="header">
|
||||
<span v-if="item.required == true"><span style="color: red;">*</span>{{item.label}}</span>
|
||||
@@ -31,17 +137,40 @@
|
||||
</template>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'tags'">
|
||||
<div v-if="scope.row.edit==false">{{scope.row[item.prop]}}</div>
|
||||
<template v-else>
|
||||
<el-input @click.native.stop="showEditTagsBox(true,scope.$index,$event)" :disabled="assetSetting.assetId == null" v-model="scope.row[item.prop]" size="mini" :readonly="true" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}"></el-input>
|
||||
</template>
|
||||
<div style="height: 50px;">
|
||||
<el-scrollbar style="height: 100%;">
|
||||
<el-tag
|
||||
v-for="(value, key, index) in scope.row[item.prop]"
|
||||
class="tab-tags"
|
||||
size="mini"
|
||||
:closable="scope.row.edit==true"
|
||||
:key="key"
|
||||
@click="showEditTagsBox(true,scope.$index,$event)"
|
||||
style="display: block;margin-bottom:5px;" >
|
||||
<!-- <div class="tab-tags-item">-->
|
||||
<!-- <div class="tag-item-key">{{key}}:</div><div class="tag-item-value">{{value}}</div>-->
|
||||
|
||||
<!-- </div>-->
|
||||
{{key}}:{{value}}
|
||||
</el-tag>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.prop == 'ifindex'">
|
||||
<span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>
|
||||
<el-select v-model="scope.row[item.prop]" :disabled="assetSetting.assetId == null" size="mini" popper-class="no-style-class" @change="ifIndexChange(scope.row[item.prop],scope.row)" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}">
|
||||
<el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>
|
||||
</el-select>
|
||||
<!-- <el-select v-model="scope.row[item.prop]" :disabled="assetSetting.host == null" size="mini" popper-class="no-style-class" @change="ifIndexChange(scope.row[item.prop],scope.row)" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">-->
|
||||
<!-- <el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<el-autocomplete
|
||||
v-model.number="scope.row[item.prop]"
|
||||
:fetch-suggestions="loadIfIndex"
|
||||
:debounce="300"
|
||||
:trigger-on-focus="true"
|
||||
size="mini"
|
||||
:highlight-first-item="true"
|
||||
@input="ifIndexInputChange"
|
||||
></el-autocomplete>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="item.prop == 'ifdescr'">
|
||||
@@ -53,7 +182,7 @@
|
||||
<span v-if="scope.row[item.prop][1]">{{scope.row[item.prop][1]}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-checkbox-group :disabled="assetSetting.assetId == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}">
|
||||
<el-checkbox-group :disabled="assetSetting.host == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.host == null}">
|
||||
<div class="input__inner">
|
||||
<el-checkbox label="rx"></el-checkbox>
|
||||
<el-checkbox label="tx"></el-checkbox>
|
||||
@@ -65,7 +194,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="" :width="30">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.stop="delTabRow(scope.$index,scope.row.ifindex)" :disabled="assetSetting.assetId == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="el-icon-minus"></i></el-button>
|
||||
<el-button @click.stop="delTabRow(scope.$index,scope.row.ifindex)" :disabled="assetSetting.host == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="el-icon-minus"></i></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -130,6 +259,10 @@
|
||||
editTagsBox: {show: false, top: 0, left: 0,}, //param编辑弹框
|
||||
tempTagsObj:[],
|
||||
showTags:[],
|
||||
showTagInput:false,
|
||||
newTag:{key:'',value:''},
|
||||
hostTimer:null,
|
||||
ifIndexError:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -175,22 +308,16 @@
|
||||
]
|
||||
this.queryInterfaceInfos(this.assetSetting.assetId,true);
|
||||
},
|
||||
queryInterfaceInfos:function(assetId,skipCommit=false){
|
||||
if(!assetId&&assetId !=''){
|
||||
return;
|
||||
}
|
||||
let asset=this.assetList.find(item=>{
|
||||
return item.id == assetId;
|
||||
})
|
||||
if(asset){
|
||||
this.$refs.loading.startLoading();
|
||||
queryInterfaceInfos:function(skipCommit=false){
|
||||
// this.$refs.loading.startLoading();
|
||||
let queryParams={
|
||||
operation:'walk',
|
||||
host:asset.host,
|
||||
port:161,
|
||||
version:2,
|
||||
community:'public',
|
||||
host:this.assetSetting.host,
|
||||
port:this.assetSetting.port,
|
||||
version:this.assetSetting.version,
|
||||
community:this.assetSetting.community,
|
||||
oid:'1.3.6.1.2.1.2.2.1',
|
||||
auth:this.assetSetting.auth,
|
||||
}
|
||||
this.$post('/mib/browser',queryParams).then(response=>{
|
||||
this.ifIndexList=[];
|
||||
@@ -212,15 +339,72 @@
|
||||
this.ifDescMap.set(item.name,item.value)
|
||||
})
|
||||
this.commitAdd(skipCommit);
|
||||
this.$refs.loading.endLoading();
|
||||
// this.$refs.loading.endLoading();
|
||||
}else{
|
||||
this.$refs.loading.endLoading();
|
||||
// this.$refs.loading.endLoading();
|
||||
console.error(response);
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
loadIfIndex:function(queryString,cb){
|
||||
cb(this.ifIndexList);
|
||||
},
|
||||
queryAssetHosts:function(queryString,cb){
|
||||
let param={
|
||||
pageSize:-1,
|
||||
host:queryString,
|
||||
}
|
||||
this.$get('/asset',param).then(response=>{
|
||||
if(response.code == 200){
|
||||
let data=response.data.list;
|
||||
console.log(data)
|
||||
let result=data.map(item=>{
|
||||
return {label:item.host,value:item.host}
|
||||
})
|
||||
cb(result)
|
||||
}else{
|
||||
cb([]);
|
||||
console.error(response)
|
||||
}
|
||||
})
|
||||
},
|
||||
popShow() {
|
||||
|
||||
},
|
||||
popHide() {
|
||||
|
||||
},
|
||||
showInput:function(){
|
||||
this.showTagInput=true;
|
||||
},
|
||||
handleInputConfirm:function(){
|
||||
|
||||
},
|
||||
ifIndexInputChange:function(value){
|
||||
if(this.ifIndexList && this.ifIndexList.length>0){
|
||||
let temp=this.ifIndexList.find(item=>{
|
||||
return item.value == Number.parseInt(value);
|
||||
if(!temp){
|
||||
this.ifIndexError=true;
|
||||
}else{
|
||||
this.ifIndexError=false;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
hostInputChange:function(value){
|
||||
console.log('input change')
|
||||
if(this.hostTimer){
|
||||
clearTimeout(this.hostTimer);
|
||||
}
|
||||
this.hostTimer=setTimeout(()=>{
|
||||
console.log('lazy loading')
|
||||
this.queryInterfaceInfos();
|
||||
},1000)
|
||||
},
|
||||
|
||||
changeRowEditState:function(row,column,event){
|
||||
if(this.validateRows()){
|
||||
this.commitAdd(true);
|
||||
@@ -234,7 +418,7 @@
|
||||
},
|
||||
validateRows:function(){
|
||||
let validateFlag=true;
|
||||
validateFlag=this.assetSetting && this.assetSetting.assetId != null ;
|
||||
validateFlag=this.assetSetting && this.assetSetting.host != '' ;
|
||||
if(!validateFlag){
|
||||
this.assetValidate=true;
|
||||
return validateFlag;
|
||||
@@ -306,7 +490,7 @@
|
||||
this.$emit('delSelf',this.index)
|
||||
},
|
||||
showEditTagsBox:function(show,index,e){
|
||||
if(this.assetSetting.assetId != null){
|
||||
if(this.assetSetting.host != ''){
|
||||
this.$refs.subBox.showEditTagsBox(show,this.assetSetting.configs,index,e);
|
||||
}
|
||||
},
|
||||
@@ -334,8 +518,32 @@
|
||||
.asset-config-tab .add-btn{
|
||||
text-align: center;
|
||||
}
|
||||
.asset-config-tab #snmp-advanced{
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
left: -4px;
|
||||
top:1px;
|
||||
}
|
||||
.asset-config-tab .right-box-row-with-btn{
|
||||
width: calc(100% - 69px);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.tab-tags{
|
||||
/*border: 0px;*/
|
||||
/*padding: 0;*/
|
||||
/*display: inline-block;*/
|
||||
/*border-radius: 2px;*/
|
||||
/*width: 100px;*/
|
||||
}
|
||||
.tab-tags .tab-tags-item{
|
||||
display: flex;
|
||||
}
|
||||
.tab-tags-item .tag-item-key{
|
||||
/*background-color: #E6E4E4;*/
|
||||
}
|
||||
.taffic-setting-tab .el-table__row:hover{
|
||||
.input__inner{
|
||||
border-color: #F0F0F0;
|
||||
@@ -358,15 +566,33 @@
|
||||
.direction-checkbox .el-checkbox__label{
|
||||
padding-left:0px
|
||||
}
|
||||
.taffic-setting-tab td>.cell , .taffic-setting-tab td{
|
||||
/*.taffic-setting-tab td>.cell , .taffic-setting-tab td{
|
||||
text-align: center !important;
|
||||
padding:0 10px!important;
|
||||
}
|
||||
.taffic-setting-tab th>.cell{
|
||||
text-align: center !important;
|
||||
padding:0 10px!important;
|
||||
}
|
||||
}*/
|
||||
.not-allowed:hover{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.asset-config-tab .asset-input .el-input__inner{
|
||||
border-top-right-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
/*mib 移植*/
|
||||
.mib-browser-ad-search-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mib-browser-ad-search .el-radio-group .el-radio-button__inner {
|
||||
height: 24px;
|
||||
line-height: 0;
|
||||
}
|
||||
.mib-browser-ad-search-label {
|
||||
line-height: 24px;
|
||||
}
|
||||
.mib-browser-ad-search {
|
||||
width: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -308,8 +308,8 @@
|
||||
configTraffic: function (u) {
|
||||
let tempDc = JSON.parse(JSON.stringify(u));
|
||||
this.currentDc = tempDc;
|
||||
console.log(this.currentDc)
|
||||
setTimeout(()=>{
|
||||
|
||||
this.$refs.trafficBox.show(true, true);
|
||||
},200)
|
||||
},
|
||||
|
||||
@@ -284,6 +284,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
let legend = [];
|
||||
if (res.length > 0) {
|
||||
res.forEach((response, index) => {
|
||||
let promqlIndex=promqlInputIndexs[index];
|
||||
if (response.data.status == 'success') {
|
||||
let data = response.data.data.result;
|
||||
data.forEach((result, i) => {
|
||||
@@ -312,8 +313,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
series.push(seriesItem);
|
||||
legend.push({name: seriesItem.name, alias: null, isGray: false});
|
||||
})
|
||||
|
||||
this.$refs['promql-'+promqlIndex][0].setError('')
|
||||
}else{
|
||||
let promqlIndex=promqlInputIndexs[index];
|
||||
console.log(response)
|
||||
this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
|
||||
}
|
||||
|
||||
@@ -463,12 +463,11 @@
|
||||
this.currentProject=project;
|
||||
// this.$store.commit('setProject',this.currentProject)
|
||||
}
|
||||
this.currentModule={};
|
||||
|
||||
// this.$refs.projectLeft.setActiveNames([]);
|
||||
}else{
|
||||
this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
|
||||
}
|
||||
this.currentModule={};
|
||||
},
|
||||
getAllModuleList:function(){
|
||||
this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
|
||||
@@ -500,6 +499,7 @@
|
||||
this.$refs.projectSearch.clearSearch();
|
||||
this.showSubList = false;
|
||||
this.selectedEndpoints=[];
|
||||
this.currentProject={};
|
||||
},
|
||||
|
||||
//弹出endpoint编辑页
|
||||
|
||||
Reference in New Issue
Block a user