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

NEZ-592 fix: 数据中心细节问题修复

Browse Source
This commit is contained in:
@changcode
2021-04-30 12:59:36 +08:00
parent 3f348e3624
commit d5e7761695
12 changed files with 254 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -171,12 +171,12 @@ export default {
}, },
dc: { dc: {
cabinet: [ cabinet: [
{ prop: 'asset', name: this.$t('asset.assets'), active: false }, { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true } { prop: 'asset', name: this.$t('asset.assets'), active: false }
], ],
asset: [ asset: [
{ prop: 'asset', name: this.$t('asset.assets'), active: true }, { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false } { prop: 'asset', name: this.$t('asset.assets'), active: true }
] ]
} }

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

@@ -691,7 +691,7 @@ const en = {
area: 'Area', area: 'Area',
dcName: 'Data center name', dcName: 'Data center name',
selectArea: 'Select area', selectArea: 'Select area',
cabinetNum: 'Cabinet number', cabinetNum: 'Cabinet',
assets: 'Assets', assets: 'Assets',
remark: 'Remark', remark: 'Remark',
cabinets: 'Cabinets', cabinets: 'Cabinets',

3
nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
View File

@@ -170,7 +170,6 @@ export default {
this.$refs.assetTypeForm.validate((valid) => { this.$refs.assetTypeForm.validate((valid) => {
if (valid) { if (valid) {
if (this.editAssetType.id) { if (this.editAssetType.id) {
console.log(this.editAssetType);
this.$put(this.url, this.editAssetType).then(res => { this.$put(this.url, this.editAssetType).then(res => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (res.code === 200) { if (res.code === 200) {
@@ -198,7 +197,6 @@ export default {
}) })
}, },
selectWalk (walk) { selectWalk (walk) {
console.log(walk);
if (this.editModule.walk.indexOf(walk) != -1) { if (this.editModule.walk.indexOf(walk) != -1) {
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1) this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
} else { } else {
@@ -208,7 +206,6 @@ export default {
assetType(){ assetType(){
this.$get('asset/typeConf').then(res => { this.$get('asset/typeConf').then(res => {
this.assetTypeList = res.data.list this.assetTypeList = res.data.list
console.log(this.assetTypeList);
}) })
} }
} }

3
nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
View File

@@ -125,7 +125,6 @@ export default {
this.$refs.modelForm.validate((valid) => { this.$refs.modelForm.validate((valid) => {
if (valid) { if (valid) {
if (this.editModel.id) { if (this.editModel.id) {
console.log(this.editModel)
this.$put(this.url, this.editModel).then(res => { this.$put(this.url, this.editModel).then(res => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (res.code === 200) { if (res.code === 200) {
@@ -170,7 +169,6 @@ export default {
} }
}, },
selectWalk (walk) { selectWalk (walk) {
console.log(walk)
if (this.editModule.walk.indexOf(walk) != -1) { if (this.editModule.walk.indexOf(walk) != -1) {
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1) this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
} else { } else {
@@ -191,7 +189,6 @@ export default {
/* 获取chart列表数据 */ /* 获取chart列表数据 */
ChartTemplateList () { ChartTemplateList () {
this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => { this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
console.log(res)
this.chartlList = res.data.list this.chartlList = res.data.list
}) })
} }

104
nezha-fronted/src/components/common/rightBox/agentBox.vue
View File

@@ -1,65 +1,61 @@
<template> <template>
<div v-clickoutside="{obj:editPromServer,func:clickOutside}" class="right-box right-box-prom"> <div v-clickoutside="{obj:editPromServer,func:clickOutside}" class="right-box right-box-prom">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button v-if="editPromServer.id" id="promServer-edit-del" v-has="'prom_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien"
type="button"
@click="del">
<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--标题--> <!-- begin--标题-->
<div class="right-box__header">{{editPromServer.id ? ($t("config.promServer.editProm") + " ID：" + editPromServer.id) : $t("config.promServer.createProm")}}</div> <div class="right-box__header">
<div class="right-box__header">{{editPromServer.id ? ($t("config.promServer.editProm") + " ID：" + editPromServer.id) : $t("config.promServer.createProm")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editPromServer, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box__container"> <div class="right-box__container">
<el-form ref="promServerForm" :model="editPromServer" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px"> <div class="container__form">
<!--DC--> <el-form ref="promServerForm" :model="editPromServer" :rules="rules" label-position = "top" label-width="120px">
<el-form-item :label="$t('config.dc.dc')" prop="dc.name"> <!--DC-->
<div class="right-box-form-content"> <el-form-item :label="$t('config.dc.dc')" prop="dc.name">
<el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id"> <div class="right-box-form-content">
<el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item"> <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<span class="config-dropdown-label-txt">{{item.name}}</span> <el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
<span class="config-dropdown-label-txt">{{item.name}}</span>
</el-option>
</el-select>
</div>
</el-form-item>
<!--host-->
<el-form-item label="Host" prop="host">
<el-input id="prom-box-input-host" v-model="editPromServer.host" placeholder="" size="small" type="text"></el-input>
</el-form-item>
<!--Port-->
<el-form-item label="Port" prop="port">
<el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input>
</el-form-item>
<!--type-->
<el-form-item :label="$t('config.promServer.type')" prop="type">
<!-- <el-cascader-->
<!-- id="prom-box-input-type"-->
<!-- style="width: 100%"-->
<!-- v-model="editPromServer.type"-->
<!-- placeholder=""-->
<!-- size="small"-->
<!-- :options="$CONSTANTS.promServer.theData"-->
<!-- :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
<!-- clearable></el-cascader>-->
<el-select v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
<el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option> </el-option>
</el-select> </el-select>
</div> </el-form-item>
</el-form-item> <el-form-item label="Token" prop="token">
<el-input id="prom-box-input-token" v-model="editPromServer.token" class="right-box-row-with-btn" placeholder="" size="small" type="text">
<!--host--> <i slot="suffix" class="nz-icon nz-icon-refresh" @click="refreshToken"></i>
<el-form-item label="Host" prop="host"> </el-input>
<el-input id="prom-box-input-host" v-model="editPromServer.host" placeholder="" size="small" type="text"></el-input> </el-form-item>
</el-form-item> </el-form>
<!--Port--> </div>
<el-form-item label="Port" prop="port">
<el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input>
</el-form-item>
<!--type-->
<el-form-item :label="$t('config.promServer.type')" prop="type">
<!-- <el-cascader-->
<!-- id="prom-box-input-type"-->
<!-- style="width: 100%"-->
<!-- v-model="editPromServer.type"-->
<!-- placeholder=""-->
<!-- size="small"-->
<!-- :options="$CONSTANTS.promServer.theData"-->
<!-- :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
<!-- clearable></el-cascader>-->
<el-select v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
<el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Token" prop="token">
<el-input id="prom-box-input-token" v-model="editPromServer.token" class="right-box-row-with-btn" placeholder="" size="small" type="text">
<i slot="suffix" class="nz-icon nz-icon-refresh" @click="refreshToken"></i>
</el-input>
</el-form-item>
</el-form>
</div> </div>
<!-- end--表单--> <!-- end--表单-->
<!--底部按钮--> <!--底部按钮-->

97
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -1,59 +1,54 @@
<template> <template>
<div class="right-box right-box-dc" v-clickoutside="{obj:editDc,func:clickOutside}"> <div class="right-box right-box-dc" v-clickoutside="{obj:editDc,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="dc-del" type="button" v-has="'dc_delete'" v-if="editDc.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--标题--> <!-- begin--标题-->
<div class="right-box__header">{{editDc.id ? ($t("config.dc.editDc") + " ID：" + editDc.id) : $t("config.dc.createDc")}}</div> <div class="right-box__header">
<!-- end--标题--> <div class="right-box__header">{{editDc.id ? ($t("config.dc.editDc") + " ID：" + editDc.id) : $t("config.dc.createDc")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editDc, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box__container"> <div class="right-box__container">
<el-form class="right-box-form right-box-form-left" label-width="120px" size="small" :model="editDc" label-position = "top" :rules="rules" ref="dcForm"> <div class="container__form">
<el-form-item :label='$t("overall.name")' prop="name"> <el-form label-width="120px" size="small" :model="editDc" label-position = "top" :rules="rules" ref="dcForm">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small" id="dc-box-input-name"></el-input> <el-form-item :label='$t("overall.name")' prop="name">
</el-form-item> <el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small" id="dc-box-input-name"></el-input>
<el-form-item :label='$t("asset.location")' prop="location"> </el-form-item>
<el-input placeholder="" v-model="editDc.location" size="small" id="dc-box-input-location"></el-input> <el-form-item :label='$t("asset.location")' prop="location">
</el-form-item> <el-input placeholder="" v-model="editDc.location" size="small" id="dc-box-input-location"></el-input>
<el-form-item :label='$t("asset.tel")' prop="tel"> </el-form-item>
<el-input placeholder="" v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input> <el-form-item :label='$t("asset.tel")' prop="tel">
</el-form-item> <el-input placeholder="" v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
<el-form-item :label='$t("asset.principal")' prop="principal"> </el-form-item>
<el-select value-key="id" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal"> <el-form-item :label='$t("asset.principal")' prop="principal">
<el-option v-for="item in userData" :id="'dc-principal-op-'+item.userId" :key="item.userId" :label="item.username" :value="item.userId"> <el-select value-key="id" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
<span>{{item.username}}</span> <el-option v-for="item in userData" :id="'dc-principal-op-'+item.userId" :key="item.userId" :label="item.username" :value="item.userId">
</el-option> <span>{{item.username}}</span>
</el-select> </el-option>
</el-form-item> </el-select>
<!--<el-form-item :label='$t("config.dc.area")' prop="area">--> </el-form-item>
<!--<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">--> <!--<el-form-item :label='$t("config.dc.area")' prop="area">-->
<!--<template v-slot:trigger>--> <!--<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">-->
<!--<el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>--> <!--<template v-slot:trigger>-->
<!--</template>--> <!--<el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>-->
<!--</select-area>--> <!--</template>-->
<!--</el-form-item>--> <!--</select-area>-->
<el-form-item :label="$t('config.dc.lnglat')" prop="state"> <!--</el-form-item>-->
<latlng-picker ref="latlngPicker" :append-to-body="false" :show-zoom="false"></latlng-picker> <el-form-item :label="$t('config.dc.lnglat')" prop="state">
</el-form-item> <latlng-picker ref="latlngPicker" :append-to-body="false" :show-zoom="false"></latlng-picker>
<el-form-item :label='$t("config.dc.state")' prop="state"> </el-form-item>
<el-switch <el-form-item :label='$t("config.dc.state")' prop="state">
id="dc-box-input-name" <el-switch
v-model="editDc.state" id="dc-box-input-name"
active-value="ON" v-model="editDc.state"
inactive-value="OFF" active-value="ON"
active-color="#ee9d3f" inactive-value="OFF"
> active-color="#ee9d3f"
</el-switch> >
</el-form-item> </el-switch>
</el-form-item>
</el-form> </el-form>
</div>
</div> </div>
<!--底部按钮--> <!--底部按钮-->

104
nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
View File

@@ -1,68 +1,60 @@
<template> <template>
<div v-clickoutside="{obj:editExprTemp,func:clickOutside}" class="right-box right-box-alert-config"> <div v-clickoutside="{obj:editExprTemp,func:clickOutside}" class="right-box right-box-alert-config">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button v-if="editExprTemp.id" id="alert-box-del" v-has="'alert_silence_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien"
type="button" @click="del">
<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--标题--> <!-- begin--标题-->
<div class="right-box__header">{{editExprTemp.id ? $t("config.exprTemp.edit") + " ID：" + editExprTemp.id : <div class="right-box__header">
<div class="right-box__header">{{editExprTemp.id ? $t("config.exprTemp.edit") + " ID：" + editExprTemp.id :
$t("config.exprTemp.create")}} $t("config.exprTemp.create")}}
</div> </div>
<!-- end--标题--> <div class="header__operation">
<span v-cancel="{obj: editExprTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box__container"> <div class="right-box__container">
<el-form ref="ExprTempForm" :model="editExprTemp" :rules="rules" <div class="container__form">
class="right-box-form right-box-form-left" label-position="top" label-width="120px"> <el-form ref="ExprTempForm" :model="editExprTemp" :rules="rules" label-position="top" label-width="120px">
<el-form-item :label="$t('config.exprTemp.name')" prop="name"> <el-form-item :label="$t('config.exprTemp.name')" prop="name">
<el-input v-model="editExprTemp.name" :placeholder="$t('overall.placeHolder')" size="small"></el-input> <el-input v-model="editExprTemp.name" :placeholder="$t('overall.placeHolder')" size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.exprTemp.gname')" prop="gname"> <el-form-item :label="$t('config.exprTemp.gname')" prop="gname">
<!--<el-input v-model="editExprTemp.gname" size="small" :placeholder="$t('overall.placeHolder')"></el-input>--> <!--<el-input v-model="editExprTemp.gname" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
<el-autocomplete <el-autocomplete
v-model="editExprTemp.gname" v-model="editExprTemp.gname"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
:placeholder="$t('overall.placeHolder')" :placeholder="$t('overall.placeHolder')"
class="inline-input" class="inline-input"
size="small" size="small"
style="width: 100%;" style="width: 100%;"
></el-autocomplete> ></el-autocomplete>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.exprTemp.expression')" prop="expression"> <el-form-item :label="$t('config.exprTemp.expression')" prop="expression">
<!--<el-input v-model="editExprTemp.expression" size="small" :placeholder="$t('overall.placeHolder')"></el-input>--> <!--<el-input v-model="editExprTemp.expression" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
<promql-input <promql-input
:id="'promqlKeys0'" :id="'promqlKeys0'"
:key="'promqlKeys0'" :key="'promqlKeys0'"
:expression-list="editExprTemp.expression" :expression-list="editExprTemp.expression"
:index="0" :index="0"
:plugins="['metric-selector', 'metric-input', 'remove']" :plugins="['metric-selector', 'metric-input', 'remove']"
:show-temp="false" :show-temp="false"
:showRemove="false" :showRemove="false"
:styleType="2" :styleType="2"
@change="expressionChange" @change="expressionChange"
></promql-input> ></promql-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.exprTemp.remark')" prop="remark"> <el-form-item :label="$t('config.exprTemp.remark')" prop="remark">
<el-input <el-input
v-model="editExprTemp.remark" v-model="editExprTemp.remark"
:placeholder="$t('alert.description')" :placeholder="$t('alert.description')"
maxlength="512" maxlength="512"
show-word-limit show-word-limit
size="small" size="small"
type="textarea" type="textarea"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div>
</div> </div>
<!-- end--表单--> <!-- end--表单-->
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<button id="alert-box-esc" v-cancel="{obj:editExprTemp,func:esc}" <button id="alert-box-esc" v-cancel="{obj:editExprTemp,func:esc}"

82
nezha-fronted/src/components/common/rightBox/mibBox.vue
View File

@@ -1,51 +1,47 @@
<template> <template>
<div class="right-box right-box-mib" v-clickoutside="{obj:editMib,func:clickOutside}" > <div class="right-box right-box-mib" v-clickoutside="{obj:editMib,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="mib-del" type="button" v-has="'snmp_file_delete'" v-if="editMib.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--标题--> <!-- begin--标题-->
<div class="right-box__header">{{editMib.id ? ($t("config.mib.editMib") + " ID：" + editMib.id) : $t("config.mib.createMib")}}</div> <div class="right-box__header">
<!-- end--标题--> <div class="right-box__header">{{editMib.id ? ($t("config.mib.editMib") + " ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editMib, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box__container"> <div class="right-box__container">
<el-form class="right-box-form right-box-form-left" :model="editMib" label-position = "top" label-width="120px" :rules="rules" ref="mibForm"> <div class="container__form">
<el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" > <el-form :model="editMib" label-position = "top" label-width="120px" :rules="rules" ref="mibForm">
<el-cascader <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
id="mib-input-selected-models" <el-cascader
:options="modelOptions" id="mib-input-selected-models"
:props="modelProps" :options="modelOptions"
:show-all-levels="false" :props="modelProps"
v-model="selectedModels" :show-all-levels="false"
@change="selectedModelChange" v-model="selectedModels"
ref="modelSelector" @change="selectedModelChange"
collapse-tags ref="modelSelector"
:placeholder="$t('config.mib.modelTip')" collapse-tags
size="small" :placeholder="$t('config.mib.modelTip')"
class="right-box__select" size="small"
popper-class="right-box-select-dropdown prevent-clickoutside" class="right-box__select"
clearable></el-cascader> popper-class="right-box-select-dropdown prevent-clickoutside"
</el-form-item> clearable></el-cascader>
<el-form-item :label="$t('config.mib.remark')" prop="remark"> </el-form-item>
<el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editMib.remark" size="small" id="mib-box-input-remark"></el-input> <el-form-item :label="$t('config.mib.remark')" prop="remark">
</el-form-item> <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editMib.remark" size="small" id="mib-box-input-remark"></el-input>
<el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!editMib.id}"> </el-form-item>
<el-upload drag :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row" id="mib-box-input-file"> <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!editMib.id}">
<div slot="tip" class="el-upload__tip" > <el-upload drag :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row" id="mib-box-input-file">
<span v-if="editMib.fileName">{{editMib.fileName}}</span> <div slot="tip" class="el-upload__tip" >
<span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span> <span v-if="editMib.fileName">{{editMib.fileName}}</span>
</div> <span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
<i class="nz-icon nz-icon-upload"></i> </div>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div> <i class="nz-icon nz-icon-upload"></i>
</el-upload> <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
</el-form-item> </el-upload>
</el-form> </el-form-item>
</el-form>
</div>
</div> </div>
<!--底部按钮--> <!--底部按钮-->

128
nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
View File

@@ -1,78 +1,74 @@
<template> <template>
<div class="right-box right-box-credential" v-clickoutside="{obj:editCredential,func:clickOutside}"> <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--标题--> <!-- begin--标题-->
<div class="right-box__header">{{editCredential.id ? ($t("config.mib.credential.edit") + " ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div> <div class="right-box__header">
<!-- end--标题--> <div class="right-box__header">{{editCredential.id ? ($t("config.mib.credential.edit") + " ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editCredential, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box__container"> <div class="right-box__container">
<el-form class="right-box-form right-box-form-left" label-width="120px" size="small" :model="editCredential" label-position = "top" :rules="rules" ref="credentialForm"> <div class="container__form">
<el-form-item :label='$t("overall.name")' prop="name"> <el-form label-width="120px" size="small" :model="editCredential" label-position = "top" :rules="rules" ref="credentialForm">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input> <el-form-item :label='$t("overall.name")' prop="name">
</el-form-item> <el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input>
<el-form-item :label='$t("config.mib.credential.remark")' prop="remark"> </el-form-item>
<el-input placeholder="" v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input> <el-form-item :label='$t("config.mib.credential.remark")' prop="remark">
</el-form-item> <el-input placeholder="" v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
<el-form-item :label='$t("config.mib.credential.type")' prop="type" class="half-form-item"> </el-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-form-item :label='$t("config.mib.credential.type")' prop="type" class="half-form-item">
<el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value"> <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">
<span class="panel-dropdown-label-txt" >{{item.label}}</span> <el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
</el-option> <span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-select> </el-option>
</el-form-item> </el-select>
<el-form-item :label='$t("config.mib.credential.port")' prop="port" class="half-form-item" > </el-form-item>
<el-input placeholder="" v-model.number="editCredential.port" size="small" id="credential-box-input-port"></el-input> <el-form-item :label='$t("config.mib.credential.port")' prop="port" class="half-form-item" >
</el-form-item> <el-input placeholder="" v-model.number="editCredential.port" size="small" id="credential-box-input-port"></el-input>
<el-form-item label='Read community' prop="readCommunity" v-if="editCredential.type ===1 || editCredential.type === 2"> </el-form-item>
<el-input placeholder="" v-model="editCredential.config.readCommunity" size="small" id="credential-box-input-readCommunity"></el-input> <el-form-item label='Read community' prop="readCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
</el-form-item> <el-input placeholder="" v-model="editCredential.config.readCommunity" size="small" id="credential-box-input-readCommunity"></el-input>
<el-form-item label='Write community' prop="writeCommunity" v-if="editCredential.type ===1 || editCredential.type === 2"> </el-form-item>
<el-input placeholder="" v-model="editCredential.config.writeCommunity" size="small" id="credential-box-input-writeCommunity" type="password" show-password></el-input> <el-form-item label='Write community' prop="writeCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
</el-form-item> <el-input placeholder="" v-model="editCredential.config.writeCommunity" size="small" id="credential-box-input-writeCommunity" type="password" show-password></el-input>
<el-form-item label="Username" prop="username" v-if="editCredential.type === 3" class="half-form-item"> </el-form-item>
<el-input placeholder="" v-model="editCredential.config.username" size="small" id="credential-box-input-username"></el-input> <el-form-item label="Username" prop="username" v-if="editCredential.type === 3" class="half-form-item">
</el-form-item> <el-input placeholder="" v-model="editCredential.config.username" size="small" id="credential-box-input-username"></el-input>
<el-form-item label="Content name" prop="contextname" v-if="editCredential.type === 3" class="half-form-item"> </el-form-item>
<el-input placeholder="" v-model="editCredential.config.contextname" size="small" id="credential-box-input-contextname"></el-input> <el-form-item label="Content name" prop="contextname" v-if="editCredential.type === 3" class="half-form-item">
</el-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 class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.auth')}}</div>
<div style="margin-bottom: 20px;width: 100%"></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-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-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"> <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> <span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.mib.credential.pin")' prop="authPin" v-if="editCredential.type === 3" class="half-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-input placeholder="" v-model="editCredential.config.authPin" size="small" id="credential-box-input-authPin" type="password" show-password></el-input>
</el-form-item> </el-form-item>
<div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.encryption')}}</div> <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> <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-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-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"> <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> <span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.mib.credential.pin")' prop="privPin" v-if="editCredential.type === 3" class="half-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-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-item>
</el-form> </el-form>
</div>
</div> </div>
<!--底部按钮--> <!--底部按钮-->
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">

4
nezha-fronted/src/components/common/table/settings/dcTable.vue
View File

@@ -61,7 +61,7 @@
</template> </template>
<template v-else-if="item.prop === 'assetNum'"> <template v-else-if="item.prop === 'assetNum'">
<span class="endpoint-num" @click="showBottomBox('asset', scope.row)"> <span class="endpoint-num" @click="showBottomBox('asset', scope.row)">
<i class="nz-icon nz-icon-asset" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/> <i class="nz-icon nz-icon-overview-project" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
{{scope.row[item.prop]}} {{scope.row[item.prop]}}
</span> </span>
</template> </template>
@@ -74,7 +74,7 @@
<template v-else-if="item.prop === 'cabinetNum'"> <template v-else-if="item.prop === 'cabinetNum'">
<span class="alert-num" @click="showBottomBox('cabinet', scope.row)"> <span class="alert-num" @click="showBottomBox('cabinet', scope.row)">
<i class="nz-icon nz-icon-Cabinet" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/> <i class="nz-icon nz-icon-cabinet" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/>
{{scope.row[item.prop]}} {{scope.row[item.prop]}}
</span> </span>
</template> </template>

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

@@ -1,5 +1,5 @@
<template> <template>
<div> <div style="height: 100%">
<nz-data-list <nz-data-list
v-if="showTab === 'file'" v-if="showTab === 'file'"
ref="dataList" ref="dataList"

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

@@ -1,5 +1,5 @@
<template> <template>
<div> <div style="hight: 100%">
<mib-file :show-tab="showTab" v-if="showTab == 'file'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></mib-file> <mib-file :show-tab="showTab" v-if="showTab == 'file'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></mib-file>
<mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toCredentialTab="changeTab(['mib','credentials'],'credentials')"></mib-browser> <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toCredentialTab="changeTab(['mib','credentials'],'credentials')"></mib-browser>
<credentials :show-tab="showTab" v-if="showTab == 'credentials'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></credentials> <credentials :show-tab="showTab" v-if="showTab == 'credentials'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></credentials>