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

NEZ-329 feat: asset详情页accounts

Browse Source
This commit is contained in:
chenjinsong
2020-06-23 18:03:47 +08:00
parent 5d4ba76320
commit e8634a9bdd
6 changed files with 249 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -394,6 +394,7 @@ li{
padding-bottom: 10px;
color: #999;
cursor: pointer;
display: inline-block;
}
.nz-tab-item-active {
border-bottom: 3px solid $global-text-color-active;
@@ -401,7 +402,16 @@ li{
cursor: default;
font-weight: bold;
}
.nz-tab-item-close {
color: rgba(245, 108, 108, 0.6);
cursor: pointer;
}
.nz-tab-item-close:hover {
color: rgba(245, 108, 108, 1);
}
.nz-tab-error {
font-weight: normal;
}
/* end--nz-tab组件*/
/* begin--二级页面tab*/
@@ -1071,6 +1081,11 @@ li{
.right-box-add-endpoint.right-box-add-endpoint-snmp {
width: 850px;
}
.snmp-form {
.el-form-item__content {
margin-left: 10px !important;
}
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;

4
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -28,8 +28,8 @@
z-index: 2000;
}
.vue-resizable-handle:after {
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-right: 2px solid #acb6bf;
border-bottom: 2px solid #acb6bf;
content: "";
position: absolute;
right: 3px;

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

@@ -450,9 +450,9 @@ const en = {
protocol:"Protocol",
sshProtocol:"SSH",
telnetProtocol:"Telnet",
userTip:"UserTip",//用户名提示
passwordTip:"PasswordTip",//密码提示
reloginPasswordTip:"Relogin",//密码提示
userTip:"User tip",//用户名提示
passwordTip:"Password tip",//密码提示
reloginPasswordTip:"Relogin tip",//密码提示
userPwdIntroduce:'Please specify a user name and password so that the telenet login process can automatically log in',
reLoginPwdIntroduce:'Please specify the password prompt so that the login process can run automatically',
account:'User name',//'用户名'

166
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -21,7 +21,7 @@
{{tabView == false && !pageObj.id ? $t('asset.createAssetTab.title') : ''}}
</div>
<el-scrollbar class="right-box-form-box">
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form ref="assetEditForm" :model="assetData" label-width="120px" class="right-box-form right-box-form-left" :rules="rules">
<el-form-item :label="$t('asset.createAssetTab.sn')" prop="sn">
<el-input size="small" v-if="!tabView" v-model="assetData.sn"/>
@@ -151,7 +151,7 @@
<el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
</div>
</el-scrollbar>
</div>
@@ -176,22 +176,39 @@
<location-cascader :disabled="assetData.modelId !=''?false:true" :default-model-u-size="modelSize" @change="setLocationData" :init-data="initLocationData" ref="locationCascader" :idc-option="IDCOptionData"></location-cascader>
</el-form-item>
<!--cli-->
<div class="right-box-sub-title">{{$t('asset.createAssetTab.cli')}}
<el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
<div class="right-box-sub-title">{{$t('config.account.account')}}
<!--<el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>-->
</div>
<div class="line-100 right-box-line"></div>
<template v-if="accountSwitch">
<!--<template v-if="accountSwitch">
<account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult" :is-allowed-change-protocol="changeProtocolSwitch" @protocol-type-change="protocolTypeChange"></account-config-box>
</template>
</template>-->
<div class="nz-tab" style="padding-left: 30px;">
<div class="nz-tab-item-box" v-for="(account, index) in assetData.accounts" :key="index" @click="changeProtocolType(account.protocol)" :id="`account-login-type-${index}`">
<div class="nz-tab-item" :class="{'nz-tab-item-active': accountType == account.protocol}" style="position: relative;">
<span>{{account.protocol}}</span>
<transition name="el-zoom-in-top">
<div v-if="errorProtocol.indexOf(account.protocol) > -1" class="nz-tab-error el-form-item__error">Required</div>
</transition>
</div>&nbsp;
<span class="nz-tab-item-close" @click.stop="removeAccount(index)"><i class="el-icon-circle-close"></i></span>
</div>
<el-popover placement="right" width="70" trigger="click" :disabled="assetData.accounts.length == 3" v-model.sync="showAccountOp" popper-class="no-style-class">
<button slot="reference" id="add-type" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" :class="{'nz-btn-disabled': assetData.accounts.length == 3}">
<span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
</button>
<ul class="el-select-dropdown__list">
<li @click="addAccount(type)" v-for="(type, index) in selectableAccountTypes" :key="index" class="el-select-dropdown__item"><span>{{type}}</span></li>
</ul>
</el-popover>
</div>
<account-config-box v-for="(account,index) in assetData.accounts" :account="account" v-show="account.protocol == accountType" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult" @protocol-type-change="protocolTypeChange"></account-config-box>
<template v-if="!pageObj.id && !exporterDisableSwitch">
<template v-if="accountType == 'SSH'">
<el-form-item :label="$t('asset.createAssetTab.exporter')" class="exporter-label">
<el-switch class="exporter-switch" v-model="assetData.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0" :show="!exporterDisableSwitch"></el-switch>
</el-form-item>
</template>
<template v-else>
<div style="height: 52px;"></div>
</template>
</el-form>
</el-scrollbar>
@@ -227,6 +244,8 @@
firstShowModel: false,
visible: '',
vendorModelData: '',
showAccountOp: false,
errorProtocol: [], //校验不通过的account
assetData: {
id: '',
sn: '',
@@ -241,7 +260,8 @@
host:'',
port:'',
},
accounts: [{
accounts: [],
/*accounts: [{
id: '',
authType: 1,
protocol:'SSH',
@@ -251,14 +271,15 @@
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}],
}],*/
tags: [],
exporter: 0
},
selectableAccountTypes: ["SSH", "TELNET", "SNMP"],
modelSize:1,
initLocationData:null,
locationInfo:null,
accountSwitch:false,//true 开启，false 关闭
//accountSwitch:false,//true 开启，false 关闭
accountData: '',
assetViewData: {
assetType: '',
@@ -459,7 +480,20 @@
'assetData.idcId': function(n, o) {
this.addCabinetData.idcId = n;
},
accountSwitch(n) {
'assetData.accounts': {
deep: true,
handler(n) {
let temp = ["SSH", "TELNET", "SNMP"];
n.forEach(item => {
let i = temp.indexOf(item.protocol);
if (i > -1) {
temp.splice(i, 1);
}
});
this.selectableAccountTypes = temp;
}
},
/*accountSwitch(n) {
if (n) {
if (!this.assetData.accounts[0]) {
!this.assetData.accounts.push({
@@ -487,7 +521,7 @@
}else{
this.changeProtocolSwitch=true;
}
},
},*/
locationInfo:{
deep:true,
handler(n,o){
@@ -509,6 +543,64 @@
this.$refs.tagEditBoxScrollbar.update();
});
},
addAccount(type) {
if (type == "SSH") {
this.assetData.accounts.push({
authType: 1,
protocol: "SSH",
port: 22,
params: {
user: "",
method: "password",
password: "",
key: "",
passwordKey: ""
}
});
} else if (type == "TELNET") {
this.assetData.accounts.push({
protocol: "TELNET",
port: 23,
params: {
user: "",
password: "",
userTip: "",
passwordTip: "",
reloginTip: ""
}
});
} else if (type == "SNMP") {
this.assetData.accounts.push({
protocol: "SNMP",
port: 161,
params: {
version:2,
community:"public",
security_name:"",
security_level:"",
auth_password:"",
priv_password:"",
auth_protocol:"",
priv_protocol:"",
context_name:""
}
});
}
this.accountType = type;
this.showAccountOp = false;
this.$nextTick(() => {
let sbWrap = this.$refs.scrollbar.$refs.wrap;
sbWrap.scrollTop = sbWrap.scrollHeight;
});
},
removeAccount(index) {
this.assetData.accounts.splice(index, 1);
if (this.assetData.accounts.length > 0) {
this.accountType = this.assetData.accounts[0].protocol;
} else {
this.accountType = "";
}
},
removeTag: function(index) {
this.assetData.tags.splice(index, 1);
this.$nextTick(() => {
@@ -525,6 +617,7 @@
this.getIDCOptionData();
this.getVendorOptionData();
this.getAssetTypeOptionData();
this.showAccountOp = false;
},
editQuit() {
for (let i of this.assetTypeOptionData) {
@@ -595,8 +688,12 @@
this.assetData.state = this.obj.state
this.assetData.idcId = this.obj.idc.id;
this.assetData.tags = this.obj.tags;
this.assetData.accounts = this.obj.accounts;
this.assetData.cabinetId = this.obj.cabinet == null ? '' : this.obj.cabinet.id
this.assetData.purchaseDate = this.obj.purchaseDate;
if (this.assetData.accounts && this.assetData.accounts.length > 0) {
this.accountType = this.assetData.accounts[0].protocol.toUpperCase();
}
// this.assetData.accounts[0].id = this.obj.accounts[0].id
// this.assetData.accounts[0].authType = this.obj.accounts[0].authType
// this.assetData.accounts[0].user = this.obj.accounts[0].user
@@ -604,12 +701,12 @@
// this.assetData.accounts[0].port = this.obj.accounts[0].port
// this.assetData.accounts[0].cert = this.obj.accounts[0].privateKey
this.assetData.accounts=this.obj.accounts[0]?this.obj.accounts:[];
this.accountSwitch=this.assetData.accounts.length>0;
//this.accountSwitch=this.assetData.accounts.length>0;
this.idcSelectedData.location = this.obj.idc.location
this.idcSelectedData.principal = this.obj.idc.principal
this.idcSelectedData.tel = this.obj.idc.tel
this.cabinetSelectedData.uSize = this.obj.cabinet == null ? '' : this.obj.cabinet.uSize
this.cabinetSelectedData.remark = this.obj.cabinet == null ? '' : this.obj.cabinet.remark
this.cabinetSelectedData.remark = this.obj.cabinet == null ? '' : this.obj.cabinet.remark;
this.getAllModelOptionData(this.assetType);
} else {
this.resetAsset();
@@ -739,17 +836,7 @@
port:'',
},
locationInfo:null,
accounts: [{
id: '',
authType: 1,
protocol: 'SSH',
user: '',
pwd: '',
port: '',
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}],
accounts: [],
tags: []
};
this.assetType = '';
@@ -790,12 +877,14 @@
}
}
if (!this.accountSwitch) {
/*if (!this.accountSwitch) {
this.assetData.accounts = [];
}
}*/
if(this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
this.$refs.accountConfigBox[0].validateAccount();
this.$refs.accountConfigBox.forEach(box => {
box.validateAccount();
});
}
this.$refs.assetEditForm.validate((valid) => {
@@ -896,8 +985,14 @@
})
}
},
setAccountValideResult:function(result){
setAccountValideResult(result, protocol) {
this.accountValideResult = result;
let index = this.errorProtocol.indexOf(protocol);
if (result) {
index != -1 ? this.errorProtocol.splice(index, 1) : "";
} else {
index == -1 ? this.errorProtocol.push(protocol) : "";
}
},
//新增型号弹框关闭后重置弹框内容
resetVendor() {
@@ -982,6 +1077,13 @@
}
},
changeProtocolType(type) {
this.accountType = type;
this.$nextTick(() => {
let sbWrap = this.$refs.scrollbar.$refs.wrap;
sbWrap.scrollTop = sbWrap.scrollHeight;
});
},
deleteData(data, item) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),

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

@@ -42,7 +42,7 @@
</div>
<!-- snmp表单 -->
<template v-if="currentModule.type && currentModule.type == 'snmp'">
<span class="snmp-form" v-if="currentModule.type && currentModule.type == 'snmp'">
<div class="right-box-sub-title">SNMP settings</div>
<div class="line-100 right-box-line"></div>
@@ -232,7 +232,7 @@
</el-form-item>
</el-col>
</el-row>
</template>
</span>
<div class="right-box-form-tip" v-if="rightBox.isEdit">
{{$t('project.module.tip.defaultEndpointSet')}}

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

@@ -1,46 +1,94 @@
<template>
<div>
<el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
<div class="nz-tab">
<div class="nz-tab-item-box" @click="changeProtocolType('SSH')" id="account-logintype-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SSH', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'TELNET' || account.protocol == 'SNMP')}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
</div>
<div @click="changeProtocolType('TELNET')" class="nz-tab-item-box" id="account-logintype-2">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'SSH' || account.protocol == 'SNMP')}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
</div>
<div @click="changeProtocolType('SNMP')" class="nz-tab-item-box" id="account-logintype-3">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SNMP', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'TELNET' || account.protocol == 'SSH')}">SNMP</div>
</div>
</div>
<el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;">
<template v-if="account.protocol == 'SSH'">
</template>
<template v-if="account.protocol == 'TELNET'">
</template>
<template v-if="account.protocol == 'SNMP'">
</template>
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input autocomplete="new-password" size="small" v-model="account.user"/>
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.loginType')" prop="loginType" v-show="account.protocol == 'SSH'">
<el-radio-group v-model="account.authType" size="small">
<el-radio-button label="1">{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label="2">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
<el-form-item :label="$t('asset.createAssetTab.loginType')" prop="params.method">
<el-radio-group v-model="account.params.method" size="small">
<el-radio-button label="password">{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label="key">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="(account.authType==1 || account.protocol == 'TELNET')" >
<el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
<el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'password'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="(account.authType==2 && account.protocol == 'SSH')" prop="file">
<el-input rows="4" type="textarea" placeholder="" v-model="account.privateKey" size="small"></el-input>
<el-form-item :label="$t('asset.createAssetTab.ssh')" v-if="account.params.method == 'key'" prop="file">
<el-input rows="4" type="textarea" placeholder="" v-model="account.params.key" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'key'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.passwordKey"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
</template>
<template v-if="account.protocol == 'TELNET'">
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.userTip')" prop="userTip">
<el-input autocomplete="new-password" size="small" v-model="account.params.userTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.passwordTip')">
<el-input size="small" v-model="account.params.passwordTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" prop="reloginTip">
<el-input size="small" v-model="account.params.reloginTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
</template>
<template v-if="account.protocol == 'SNMP'">
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
<el-form-item :label="$t('project.module.community')" prop="params.community">
<el-input size="small" v-model="account.params.community"/>
</el-form-item>
<el-form-item :label="$t('project.module.version')" prop="params.version">
<el-radio-group v-model.number="account.params.version" size="small">
<el-radio-button :label="2"></el-radio-button>
<el-radio-button :label="3"></el-radio-button>
</el-radio-group>
</el-form-item>
<!--SNMP V3 setting-->
<template v-if="account.params.version == 3">
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-input size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('project.module.securityLevel')" prop="params.securityLevel">
<el-radio-group v-model="account.params.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-form-item>
<el-form-item :label="$t('login.password')" prop="params.password" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="$t('project.module.authProtocol')" prop="params.authProtocol" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
<el-radio-group v-model="account.params.authProtocol" size="small">
<el-radio-button label="MD5"></el-radio-button>
<el-radio-button label="SHA"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('project.module.privProtocol')" prop="params.privProtocol" v-if="account.params.securityLevel == 'authPriv'">
<el-radio-group v-model="account.params.privProtocol" size="small">
<el-radio-button label="DES"></el-radio-button>
<el-radio-button label="AES"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('project.module.privPassword')" prop="params.privPassword" v-if="account.params.securityLevel == 'authPriv'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.privPassword"/>
</el-form-item>
</template>
</template>
</el-form>
</div>
</template>
<script>
@@ -51,12 +99,10 @@ export default {
account:{type:Object},
isAllowedChangeProtocol:{type:Boolean,default:true}
},
created() {
},
data(){
return {
rules:{
user:[
"params.user": [
{ required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
port: [
@@ -121,7 +167,7 @@ export default {
validateAccount:function(){
this.validateResult=false;
this.$refs.accountForm.validate((valid) => {
this.$emit("setValidateResult",valid);
this.$emit("setValidateResult", valid, this.account.protocol);
});
},