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

feat: module侧滑新增、修改增加snmp类型

Browse Source
This commit is contained in:
陈劲松
2020-04-01 21:21:42 +08:00
parent 052de1f8ff
commit 1b1c31b73f
6 changed files with 342 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -858,6 +858,13 @@ li{
.right-box .el-form-item__label {
line-height: 30px;
}
.right-box-sub-title {
padding: 8px 0;
}
.right-box-line {
margin-bottom: 18px;
background-color: #DCDFE6;
}
.pop-top-btns {
text-align: center;
float: right;
@@ -1304,6 +1311,16 @@ li{
.el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: $global-text-color-active;
}
.el-radio-button__inner:hover {
color: $global-text-color-active;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
background-color: $global-text-color-active;
border-color: $global-text-color-active;
box-shadow: -1px 0 0 0 $global-text-color-active;
}
/* --end--复选框自定义颜色 */
/* dashboard-dialog */
@@ -1377,7 +1394,7 @@ li{
line-height: 25px !important;
}
.el-textarea textarea {
.el-textarea textarea:not(.snmp-walk textarea) {
height: 140px !important;
}
/*el-data-picker选中背景色*/

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

@@ -292,7 +292,23 @@
port: '',
path: '',
param: '',
paramObj: []
type: '',
paramObj: [],
//snmp setting 下划线命名是因为业务需求
walk: [],
walkStr: '', //转为string的walk，用于回显
version: 2, //2/3
max_repetitions: 25,
retries: 3,
timeout: 10, //s
community: 'public',
username: '',
security_level: 'noAuthNoPriv', //noAuthNoPriv/authNoPriv/authPriv
password: '',
auth_protocol: 'MD5', //MD5/SHA
priv_protocol: 'DES', //DES/AES
priv_password: '',
context_name: ''
};
} else if (item.type == 3) {
this.$refs.addEndpointBox.show(true);

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

@@ -270,7 +270,8 @@ const en = {
refreshLater:'Refresh later',//'请稍后刷新'
testSuccess:'Test success',
downloadSuccess : 'Download Success',
uploadSuccess: 'Upload Success'
uploadSuccess: 'Upload Success',
pressEnterToAdd: 'Press enter to add new line'
},
asset:{
asset: 'Asset',
@@ -669,6 +670,17 @@ const en = {
editModule: 'Edit module',//"编辑组件"
description: 'Description',//"描述"
createModule: 'New module',//"新增组件"
version: 'Version',
walk: 'Walk',
maxRepetitions: 'Max repetitions',
retries: 'Retries',
timeout: 'Timeout',
community: 'Community',
securityLevel: 'Security level',
authProtocol: 'Auth protocol',
privProtocol: 'Priv protocol',
contextName: 'Context name',
privPassword: 'Priv password',
tip: {
defaultEndpointSet: 'Default endpoint settings',//"默认的Endpoint设置"
relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'//"组件关联的Endpoint将默认配置以下端口/路径/参数"

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

@@ -61,8 +61,8 @@
<button type="button" v-if="assetViewData.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(obj.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{assetViewData.alertNum}}</button>
<button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{assetViewData.alertNum}}</button>
</el-form-item>
<div class="asset-sub-title">{{$t('asset.createAssetTab.assetInfo')}}</div>
<div class="line-100 asset-line"></div>
<div class="right-box-sub-title">{{$t('asset.createAssetTab.assetInfo')}}</div>
<div class="line-100 right-box-line"></div>
<!------------------------------------------资产类型---------------------------------------------->
<el-form-item :label="$t('asset.createAssetTab.assetType')" class="right-box-form-content" prop="assetType">
<el-select popper-class="asset-dropdown" size="small" v-if="!tabView" v-model="assetType" clearable @visible-change="cancelEdit"
@@ -124,8 +124,8 @@
</div>
<span v-if="tabView">{{assetData.purchaseDate}}</span>
</el-form-item>
<div class="asset-sub-title">{{$t('asset.createAssetTab.dc')}}</div>
<div class="line-100 asset-line"></div>
<div class="right-box-sub-title">{{$t('asset.createAssetTab.dc')}}</div>
<div class="line-100 right-box-line"></div>
<!------------------------------------------IDC---------------------------------------------->
<el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
<template v-if="!tabView">
@@ -199,10 +199,10 @@
<span>{{cabinetSelectedData.remark}}</span>
</el-form-item>
<!--cli-->
<div class="asset-sub-title">{{$t('asset.createAssetTab.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>
<div class="line-100 asset-line"></div>
<div class="line-100 right-box-line"></div>
<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>
@@ -211,7 +211,7 @@
<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" :disabled="exporterDisableSwitch"></el-switch>
</el-form-item>
<div class="line-100 asset-line" style="margin-top: -16px;"></div>
<div class="line-100 right-box-line" style="margin-top: -16px;"></div>
</template>
</el-form>
</el-scrollbar>
@@ -1308,13 +1308,3 @@
}
}
</script>
<style scoped>
.asset-sub-title {
padding: 8px 0;
}
.asset-line {
margin-bottom: 18px;
background-color: #DCDFE6;
}
</style>

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

@@ -19,7 +19,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form" :model="module" label-position="top" :rules="rules" ref="moduleForm">
<el-form-item :label='$t("project.project.project")' prop="project">
<el-select v-if="rightBox.isEdit" value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
@@ -31,36 +31,224 @@
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="module.name" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.name}}</div>
</el-form-item>
<el-form-item :label="$t('overall.type')" prop="type">
<el-radio-group v-model="module.type" size="small" @change="updateScrollbar" :disabled="module.id">
<el-radio-button label="http"></el-radio-button>
<el-radio-button label="snmp"></el-radio-button>
</el-radio-group>
</el-form-item>
<!-- snmp表单 -->
<template v-if="module.type && module.type == 'snmp'">
<div class="right-box-sub-title">SNMP</div>
<div class="line-100 right-box-line"></div>
<el-row>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="walkStr">
<el-input class="snmp-walk" v-model="module.walkStr" autosize type="textarea" :placeholder="$t('tip.pressEnterToAdd')"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="sub-label">{{$t('project.module.version')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="version">
<el-radio-group v-model.number="module.version" size="small" @change="updateScrollbar">
<el-radio-button :label="2"></el-radio-button>
<el-radio-button :label="3"></el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="sub-label">{{$t('project.module.maxRepetitions')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="max_repetitions">
<el-input v-model.number="module.max_repetitions" size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="sub-label">{{$t('project.module.retries')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="retries">
<el-input v-model.number="module.retries" size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="sub-label">{{$t('project.module.timeout')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="timeout">
<el-input v-model.number="module.timeout" size="small">
<template slot="append">second</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="23">
<div class="right-box-sub-title">Auth</div>
<div class="line-100 right-box-line"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.community')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="community">
<el-input v-model.trim="module.community" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--SNMP V3 setting-->
<template v-if="module.version == 3">
<el-row>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('login.username')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="username">
<el-input v-model.trim="module.username" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div class="sub-label">{{$t('project.module.securityLevel')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="security_level">
<el-radio-group v-model="module.security_level" size="small" @change="updateScrollbar">
<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-col>
</el-row>
<el-row v-if="module.security_level == 'authNoPriv' || module.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('login.password')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="password">
<el-input v-model.trim="module.password" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="module.security_level == 'authNoPriv' || module.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label">{{$t('project.module.authProtocol')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="auth_protocol">
<el-radio-group v-model="module.auth_protocol" 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-col>
</el-row>
<el-row v-if="module.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label">{{$t('project.module.privProtocol')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="priv_protocol">
<el-radio-group v-model="module.priv_protocol" 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-col>
</el-row>
<el-row v-if="module.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="priv_password">
<el-input v-model.trim="module.priv_password" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
</template>
<el-row>
<el-col :span="6">
<div class="sub-label">{{$t('project.module.contextName')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="context_name">
<el-input v-model.trim="module.context_name" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
</template>
<el-form-item :label='$t("project.module.description")' prop="remark">
<el-input v-if="rightBox.isEdit" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="module.remark" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.remark}}</div>
</el-form-item>
<div class="right-box-form-tip" v-if="rightBox.isEdit">
{{$t('project.module.tip.defaultEndpointSet')}}
<div class="line-100"></div>
{{$t('project.module.tip.relation')}}
</div>
<el-form-item :label='$t("project.endpoint.port")' prop="port" >
<el-input v-if="rightBox.isEdit" placeholder="" v-model.number="module.port" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.port}}</div>
</el-form-item>
<el-form-item :label='$t("project.endpoint.path")' prop="path">
<el-form-item v-if="module.type && module.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="module.path" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.path}}</div>
</el-form-item>
<el-form-item class="right-box-form-param">
<template slot="label">
<span>{{$t('project.endpoint.param')}}</span>
<div class="right-box-form-btns" v-if="rightBox.isEdit">
<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 class="top-tool-btn-txt">{{$t('overall.clearAll')}}</span>
<span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
</button>
<button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
</div>
</template>
<div v-if="rightBox.isEdit" class="param-box param-box-module">
<div class="param-box-row" v-for="(item, index) in module.paramObj">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
@@ -123,8 +311,18 @@
port: [
{validator:port, trigger: 'blur'},
],
path: [
]
walk: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
username: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
password: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
priv_password: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
},
projectList: [],
}
@@ -144,11 +342,66 @@
this.esc();
},
//转化snmpParam属性
parseSnmpParam() {
let snmpObj = { //下划线命名是因为业务需求
walk: this.module.walkStr.split(/\n/),
version: this.module.version, //2/3
max_repetitions: this.module.max_repetitions ? this.module.max_repetitions : 25,
retries: this.module.retries ? this.module.retries : 3,
timeout: this.module.timeout ? this.module.timeout + "s" : "10s", //s
auth: {
community: this.module.community,
}
};
if (this.module.version == 3) {
snmpObj.auth.username = this.module.username;
snmpObj.auth.security_level = this.module.security_level;
}
if (this.module.security_level == "authNoPriv" || this.module.security_level == "authPriv") {
snmpObj.auth.password = this.module.password;
snmpObj.auth.auth_protocol = this.module.auth_protocol;
if (this.module.security_level != "authNoPriv") {
snmpObj.auth.priv_password = this.module.priv_password;
snmpObj.auth.priv_protocol = this.module.priv_protocol;
}
}
this.module.snmpParam = JSON.stringify(snmpObj);
},
//回显时解析snmpParam
reparseSnmpParam(module) {
let snmpObj = JSON.parse(module.snmpParam);
module.walkStr = snmpObj.walk.join("\n");
module.version = snmpObj.version;
module.max_repetitions = snmpObj.max_repetitions;
module.retries = snmpObj.retries;
module.timeout = parseInt(snmpObj.timeout.replace("s", ""));
module.community = snmpObj.auth.community;
if (snmpObj.version == 3) {
module.username = snmpObj.auth.username;
module.security_level = snmpObj.auth.security_level;
}
if (snmpObj.auth.security_level == "authNoPriv" || snmpObj.auth.security_level == "authPriv") {
module.password = snmpObj.auth.password;
module.auth_protocol = snmpObj.auth.auth_protocol;
if (snmpObj.auth.security_level != "authNoPriv") {
module.priv_password = snmpObj.auth.priv_password;
module.priv_protocol = snmpObj.auth.priv_protocol;
}
}
},
/*保存*/
save() {
this.module.param = this.paramToJson(this.module.paramObj);
this.$refs.moduleForm.validate((valid) => {
if (valid) {
if (this.module.type.toLowerCase() == 'snmp') {
this.parseSnmpParam();
} else {
if (this.module.snmpParam) {
this.module.snmpParam = "";
}
}
this.module.projectId = this.module.project.id;
if (this.module.id) {
this.$put('module', this.module).then(response => {
@@ -251,6 +504,9 @@
return jsonString;
}
},
updateScrollbar() {
this.$refs.scrollbar.update();
}
},
created() {
this.getProjectList();
@@ -265,9 +521,18 @@
immediate: true,
deep: true,
handler(n, o) {
if (n) {
if (n.type && n.type.toLowerCase() == 'snmp') {
n.port = 161;
this.reparseSnmpParam(n);
}
}
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("project.module.editModule") + " ID：" + n.id : this.$t("project.module.module") + " ID：" + n.id ;
} else {
if (!n.type) {
n.type = 'http';
}
this.rightBox.title = this.$t("project.module.createModule");
}
}
@@ -279,5 +544,17 @@
}
</script>
<style scoped>
<style>
.sub-label {
padding-right: 15px;
font-size: 14px;
color: #666;
text-align: right;
line-height: 32px
}
.sub-label-required::before {
content: '*';
color: #F56C6C;
margin-right: 4px;
}
</style>

3
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -8,8 +8,7 @@
<div class="content-left">
<div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-
">{{$t('alert.alertList')}}</div>
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
<div class="sidebar-info-item" @click="jumpTo('alertConfig')" id="alert-jump-config">
{{$t('alert.alertConfig')}}
</div>