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

feat:新增snmp认证

Browse Source
This commit is contained in:
wangwenrui
2021-04-14 19:17:16 +08:00
parent 72b2362408
commit 1c130e1cb2
11 changed files with 585 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -971,7 +971,7 @@ li{
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart, .right-box-asset-type,
.right-box-asset-state {
.right-box-asset-state , .right-box-credential{
width: 850px;
}
.right-box-chart .el-input__inner, .right-box-chart input {

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

@@ -129,7 +129,23 @@ export const setting = {
{ value: 'OFF', label: i18n.t('config.dc.suspended') }
]
}
export const snmpProtocolTypes=[
// {label:'V1',value:1},
{label:'V2',value:2},
{label:'V3',value:3}
]
export const snmpAuthMethod=[
{label:'None',value:''},
{label:'MD5',value:'MD5'},
{label:'SHA',value:'SHA'},
]
export const snmpEncryptionMethod=[
{label:'None',value:''},
{label:'DES',value:'DES'},
{label:'AES-128',value:'AES-128'},
{label:'AES-192',value:'AES-192'},
{label:'AES-256',value:'AES-256'},
]
export const terminalLog = {
status: {
0: i18n.t('config.terminallog.statusItem.connecting'),

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

@@ -698,11 +698,13 @@ const cn = {
perms: '权限',
button: '按钮',
menu: '菜单',
tab:'Tab',
parent: '上级菜单',
mainMenu: '主菜单',
createMenu: '新增菜单',
editMenu: '编辑菜单',
orderNum: '排序'
orderNum: '排序',
icon:'图标',
},
promServer: {
promServerList: 'Prometheus服务',
@@ -856,7 +858,17 @@ const cn = {
vendor: '厂商',
type: '类型',
mibBrowser: 'MIB浏览器',
noData: '暂无数据'
credentials: '证书',
noData: '暂无数据',
credential:{
type:"协议类型",
port:"端口",
remark:"备注",
auth:"认证",
method:'方式',
encryption:"加密",
pin:"密码"
}
},
system: {
system: '系统设置',

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

@@ -701,11 +701,13 @@ const en = {
perms: 'Permission',
button: 'Button',
menu: 'Menu',
tab:'Tab',
parent: 'Previous menu',
mainMenu: 'Primary menu',
createMenu: 'Create menu',
editMenu: 'Edit menu',
orderNum: 'Order'
orderNum: 'Order',
icon:'Icon'
},
agent: {
// 侧滑框
@@ -858,7 +860,19 @@ const en = {
vendor: 'Vendor',
type: 'Type',
mibBrowser: 'MIB browser',
noData: 'No Data'
credentials: 'Credentials',
noData: 'No Data',
credential:{
type:"Protocol type",
port:"Port",
remark:"Description",
edit:"Edit",
create:"Create",
auth:'Authentication',
method:'Method',
encryption:"Encryption",
pin:"Password"
}
},
system: {
system: 'System',

243
nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue Normal file
View File

@@ -0,0 +1,243 @@
<template>
<div class="right-box right-box-credential" v-clickoutside="{obj:editCredential,func:clickOutside}">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="credential-del" type="button" v-has="'credential_delete'" v-if="editCredential.id">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editCredential.id ? ($t("config.mib.credential.edit") + " ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-width="120px" size="small" :model="editCredential" label-position = "top" :rules="rules" ref="credentialForm">
<el-form-item :label='$t("overall.name")' prop="name">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input>
</el-form-item>
<el-form-item :label='$t("config.mib.credential.remark")' prop="remark">
<el-input placeholder="" v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
</el-form-item>
<el-form-item :label='$t("config.mib.credential.type")' prop="type" class="half-form-item">
<el-select v-model="editCredential.type" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" @change="typeChange">
<el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label='$t("config.mib.credential.port")' prop="port" class="half-form-item" >
<el-input placeholder="" v-model.number="editCredential.port" size="small" id="credential-box-input-port"></el-input>
</el-form-item>
<el-form-item label='Read community' prop="readCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
<el-input placeholder="" v-model="editCredential.config.readCommunity" size="small" id="credential-box-input-readCommunity"></el-input>
</el-form-item>
<el-form-item label='Write community' prop="writeCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
<el-input placeholder="" v-model="editCredential.config.writeCommunity" size="small" id="credential-box-input-writeCommunity" type="password" show-password></el-input>
</el-form-item>
<el-form-item label="Username" prop="username" v-if="editCredential.type === 3" class="half-form-item">
<el-input placeholder="" v-model="editCredential.config.username" size="small" id="credential-box-input-username"></el-input>
</el-form-item>
<el-form-item label="Content name" prop="contextname" v-if="editCredential.type === 3" class="half-form-item">
<el-input placeholder="" v-model="editCredential.config.contextname" size="small" id="credential-box-input-contextname"></el-input>
</el-form-item>
<div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.auth')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol" v-if="editCredential.type === 3" class="half-form-item">
<el-select v-model="editCredential.config.authProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small">
<el-option v-for="item in $CONSTANTS.snmpAuthMethod" :key="item.value" :label="item.label" :value="item.value">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label='$t("config.mib.credential.pin")' prop="authPin" v-if="editCredential.type === 3" class="half-form-item">
<el-input placeholder="" v-model="editCredential.config.authPin" size="small" id="credential-box-input-authPin" type="password" show-password></el-input>
</el-form-item>
<div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.encryption')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol" v-if="editCredential.type === 3" class="half-form-item">
<el-select v-model="editCredential.config.privProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
<el-option v-for="item in $CONSTANTS.snmpEncryptionMethod" :key="item.value" :label="item.label" :value="item.value">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label='$t("config.mib.credential.pin")' prop="privPin" v-if="editCredential.type === 3" class="half-form-item">
<el-input placeholder="" v-model="editCredential.config.privPin" size="small" id="credential-box-input-privPin" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''" type="password" show-password></el-input>
</el-form-item>
</el-form>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button v-cancel="{obj:editCredential,func:esc}" id="credential-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span>
</button>
<button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="credential-box-save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import {port} from "../js/validate";
export default {
name: 'credentialBox',
props: {
credential: Object,
},
data () {
return {
editCredential: {},
rules: {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
remark: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
type:[
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
port:[
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ validator: port, trigger: 'blur' }
]
},
}
},
methods: {
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
this.$emit('close', refresh)
},
clickOutside () {
this.esc(false)
},
typeChange:function(type){
if(type === 1 || type === 2){
this.$set(this.editCredential,'config',{
readCommunity:'',
writeCommunity:'',
})
}else{
this.$set(this.editCredential,'config',{
username:'',
contextname:'',
securityLevel:'',
authProtocol:'',
authPin:'',
privProtocol:'',
privPin:'',
})
}
},
/* 保存 */
save: function () {
if (this.prevent_opt.save) {
return
}
this.prevent_opt.save = true
this.$refs.credentialForm.validate((valid) => {
if (valid) {
if(this.editCredential.type === 3 ){
if(this.editCredential.config.authProtocol && !this.editCredential.config.privProtocol){
this.editCredential.securityLevel = 'authNoPriv'
}else if(this.editCredential.config.authProtocol && this.editCredential.config.privProtocol){
this.editCredential.securityLevel = 'authPriv'
}else{
this.editCredential.securityLevel = 'noAuthNoPriv'
}
}
let param = JSON.parse(JSON.stringify(this.editCredential))
param.config = JSON.stringify(param.config)
if (this.editCredential.id) {
this.$put('/snmp/credential',param).then(response=>{
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
this.prevent_opt.save = false
})
} else {
this.$post('/snmp/credential',param).then(response=>{
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
this.prevent_opt.save = false
})
}
} else {
this.prevent_opt.save = false
return false
}
})
},
/* 删除 */
del () {
if (this.prevent_opt.save) { return } ;
this.prevent_opt.save = true
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete('/snmp/credential?ids=' + this.editCredential.id).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
})
}).catch(() => {
this.prevent_opt.save = false
})
},
},
mounted () {
},
watch: {
credential: {
immediate: true,
deep: true,
handler (n, o) {
this.editCredential = JSON.parse(JSON.stringify(n))
this.editCredential.config = JSON.parse(this.editCredential.config)
console.log('edit',this.editCredential)
}
}
}
}
</script>
<style scoped>
.right-box-credential .half-form-item {
width: calc(50% - 20px);
}
.right-box-credential .half-form-item:nth-child(odd) {
width: calc(50% - 15px);
margin-left: 15px;
}
</style>

124
nezha-fronted/src/components/common/table/settings/credentialsTable.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<el-table
id="credentialTable"
ref="dataTable"
:data="tableData"
:height="height"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span>{{item.label}}</span>
<div class="col-resize-area"></div>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'id'">
<template v-if="scope.row.id">
{{scope.row.id}}
</template>
<template v-else>-</template>
</template>
<template v-if="item.prop === 'name'">
<template v-if="scope.row.name">
{{scope.row.name}}
</template>
<template v-else>-</template>
</template>
<template v-if="item.prop === 'type'">
<template v-if="scope.row.type">
{{$CONSTANTS.snmpProtocolTypes.find(t=>t.value == scope.row.type).label}}
</template>
<template v-else>-</template>
</template>
<template v-if="item.prop === 'port'">
<template v-if="scope.row.port">
{{scope.row.port}}
</template>
<template v-else>-</template>
</template>
<template v-if="item.prop === 'remark'">
<template v-if="scope.row.remark">
{{scope.row.remark}}
</template>
<template v-else>-</template>
</template>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
</el-table>
</template>
<script>
import table from '@/components/common/mixin/table'
export default {
name: "credentialsTable",
mixins: [table],
data(){
return{
tableTitle:[{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t('overall.name'),
prop: 'name',
show: true
},{
label:this.$t('config.mib.credential.type'),
prop: 'type',
show: true
},{
label:this.$t('config.mib.credential.port'),
prop: 'port',
show: true
},{
label:this.$t('config.mib.credential.remark'),
prop: 'remark',
show: true
}]
}
}
}
</script>
<style scoped>
</style>

33
nezha-fronted/src/components/page/config/agent.vue
View File

@@ -12,7 +12,7 @@
type="button" @click="add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<button id="load-agent" class="top-tool-btn margin-r-10" type="button" @click="toDownloadAgent">
<button id="load-agent" class="top-tool-btn margin-r-10" type="button" @click="toDownloadAgent" v-has="'agent_add'">
<i class="nz-icon-download nz-icon"></i>
</button>
<delete-button id="promserver-list-batch-delete" v-has="'agent_delete'" :delete-objs="batchDeleteObjs" api="agent" @after="getTableData" @before="delFlag=true"></delete-button>
@@ -72,21 +72,21 @@
</el-option>
</el-select>
</el-form-item>
</el-form>
<div v-if="loadFinish" class="download-url">
<el-input id="download-url-curl" v-model="curlUrl" :disabled="true">
<el-popover slot="suffix" v-model="curlVisible" :content="$t('tip.copySuccess')" placement="top" popper-class="small-pop" trigger="manual" @after-enter="popShow('curl')">
<el-form-item label="cURL" v-if="loadFinish" class="download-url">
<el-input id="download-url-curl" :disabled="true" v-model="curlUrl">
<el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="curlVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('curl')">
<i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-curl')"></i>
</el-popover>
</el-input>
</div>
<div v-if="loadFinish" class="download-url">
<el-input id="download-url-wget" v-model="wgetUrl" :disabled="true">
<el-popover slot="suffix" v-model="wgetVisible" :content="$t('tip.copySuccess')" placement="top" popper-class="small-pop" trigger="manual" @after-enter="popShow('wget')">
</el-form-item>
<el-form-item label="Wget" v-if="loadFinish" class="download-url">
<el-input id="download-url-wget" :disabled="true" v-model="wgetUrl">
<el-popover :content="$t('tip.copySuccess')" placement="top" trigger="manual" v-model="wgetVisible" popper-class="small-pop" slot="suffix" @after-enter="popShow('wget')">
<i slot="reference" class="nz-icon nz-icon-override" @click="copyUrl('download-url-wget')"></i>
</el-popover>
</el-input>
</div>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
@@ -203,9 +203,11 @@ export default {
this.tools.loading = false
if (response.code === 200) {
this.allDc = response.data.list
if(this.allDc&&this.allDc.length>0){
this.loadFinish = true
this.agentParam.dc = this.allDc[0].id
}
}
})
},
copyUrl (id) {
@@ -291,14 +293,10 @@ export default {
}
.agent-box .download-url{
height: 40px;
position: relative;
margin-bottom: 10px;
margin-left: 12px !important;
}
.agent-box .download-url .url-copy{
position: absolute;
right: 10px;
top: 5px;
}
.agent-box .download-url .url-copy i{
font-size: 20px;
@@ -320,7 +318,7 @@ export default {
</style>
<style>
.download-url > .el-input.is-disabled .el-input__inner{
.download-url .el-input.is-disabled .el-input__inner{
background-color: #F6F8FA;;
border-color: #E4E7ED;
color: #333;
@@ -328,7 +326,6 @@ export default {
}
.download-url .el-input__suffix {
position: absolute;
top: 8px;
-webkit-transition: all .3s;
height: 100%;
color: #333;

126
nezha-fronted/src/components/page/config/credentials.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div style="height: 100%">
<nz-data-list
v-show="showTab === 'credentials'"
ref="dataList"
:api="url"
:custom-table-title.sync="tools.customTableTitle"
:from="fromRoute.mib"
:layout="['searchInput', 'elementSet']"
:search-msg="searchMsg">
<template v-slot:top-tool-left>
<div id="module-type-6" class="nz-tab-item-box" @click="toFileTab">
<div class="nz-tab-item ">{{$t("config.mib.mibFiles")}}</div>
</div>
<div id="module-type-7" class="nz-tab-item-box" @click="toBrowserTab"><!--v-has="'snmp_browser_view'"-->
<div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
</div>
<div id="module-type-8" class="nz-tab-item-box" >
<div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.credentials")}}</div>
</div>
</template>
<template v-slot:top-tool-right>
<button id="mib-add" v-has="'credential_add'" :title="$t('overall.createMib')" class="top-tool-btn margin-r-10" type="button" @click="add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<delete-button id="mib-list-batch-delete" v-has="'credential_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:default="slotProps">
<credentials-table
ref="dataTable"
v-loading="slotProps.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
></credentials-table>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-data-list>
<transition name="right-box">
<snmp-credential-box :credential="object" v-if="rightBox.show" ref="credentialBox" @close="closeRightBox" @reload="getTableData"></snmp-credential-box>
</transition>
</div>
</template>
<script>
import mibBrowser from './mibBrowser'
import deleteButton from '@/components/common/deleteButton'
import nzDataList from '@/components/common/table/nzDataList'
import dataListMixin from '@/components/common/mixin/dataList'
import credentialsTable from '@/components/common/table/settings/credentialsTable'
import snmpCredentialBox from "../../common/rightBox/snmpCredentialBox";
export default {
name: "credentials",
props: {
showTab: String
},
components: {
mibBrowser,
deleteButton,
nzDataList,
credentialsTable,
snmpCredentialBox
},
mixins: [dataListMixin],
data(){
return{
url:'snmp/credential',
tableId: 'credentialTable', // 需要分页的table的id，用于记录每页数量
blankObject: {
id: null,
name: '',
type:2,
port:161,
remark: '',
config:{
},
},
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 1,
name: 'ID',
type: 'input',
label: 'id',
disabled: false
}, {
id: 5,
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false
},{
id:6,
name: 'Type',
type: 'input',
label: 'types',
disabled: false
}]
}
}
},
methods:{
toFileTab () {
this.$emit('toFileTab')
},
toBrowserTab(){
this.$emit('toBrowserTab')
}
}
}
</script>
<style scoped>
</style>

7
nezha-fronted/src/components/page/config/menus.vue
View File

@@ -63,7 +63,8 @@ export default {
type: 1,
route: '',
orderNum: 1,
perms: ''
perms: '',
icon:''
},
tableTitle: [ // 原table列
{
@@ -87,6 +88,10 @@ export default {
label: this.$t('config.menus.type'),
prop: 'type',
show: true
},{
label: this.$t('config.menus.icon'),
prop: 'icon',
show: true
}, {
label: this.$t('config.menus.route'),
prop: 'route',

15
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -8,14 +8,17 @@
:from="fromRoute.mib"
:layout="['searchInput', 'elementSet']"
:search-msg="searchMsg">
<!-- <template v-slot:top-tool-left>
<template v-slot:top-tool-left>
<div id="module-type-1" class="nz-tab-item-box">
<div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
</div>
<div id="module-type-2" v-has="'snmp_browser_view'" class="nz-tab-item-box" @click="showTab = 'browser'">
<div id="module-type-2" class="nz-tab-item-box" @click="showTab = 'browser'"><!--v-has="'snmp_browser_view'"-->
<div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
</div>
</template>-->
<div id="module-type-3" class="nz-tab-item-box" @click="showTab = 'credentials'">
<div class="nz-tab-item">{{$t("config.mib.credentials")}}</div>
</div>
</template>
<template v-slot:top-tool-right>
<button id="mib-add" v-has="'snmp_mibFile_add'" :title="$t('overall.createMib')" class="top-tool-btn margin-r-10" type="button" @click="add">
<i class="nz-icon-create-square nz-icon"></i>
@@ -43,7 +46,8 @@
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-data-list>
<mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
<mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'" @toCredentialTab="showTab = 'credentials'"></mib-browser>
<credentials :show-tab="showTab" v-if="showTab == 'credentials'" @toFileTab="showTab = 'file'" @toBrowserTab="showTab = 'browser'"></credentials>
<transition name="right-box">
<mib-box v-if="rightBox.show" ref="mibBox" :mib="object" @close="closeRightBox" @reload="getTableData"></mib-box>
</transition>
@@ -56,10 +60,11 @@ import deleteButton from '@/components/common/deleteButton'
import nzDataList from '@/components/common/table/nzDataList'
import dataListMixin from '@/components/common/mixin/dataList'
import mibTable from '@/components/common/table/settings/mibTable'
import credentials from "./credentials";
export default {
name: 'mib',
components: {
credentials,
mibBox,
mibBrowser,
deleteButton,

6
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -8,6 +8,9 @@
<div class="nz-tab-item-box" id="module-type-4">
<div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibBrowser")}}</div>
</div>
<div class="nz-tab-item-box" id="module-type-5" @click="toCredentialTab">
<div class="nz-tab-item ">{{$t("config.mib.credentials")}}</div>
</div>
</div>
<div class="top-tool-main-right">
<div class="top-tool-search host-input">
@@ -332,6 +335,9 @@ export default {
toFileTab () {
this.$emit('toFileTab')
},
toCredentialTab () {
this.$emit('toCredentialTab')
},
showDetail (data, node) {
this.currentWalk = data
this.searchParam.oid = data.objectID