NEZ-357 feat:mib browser snmp设置同步asset & alert rule侧滑bug修复

nezha-fronted/src/components/common/header.vue

@@ -203,7 +203,7 @@
           assetId: ''
         },
         alertRule: {
-          id: '',
+          id: null,
           alertName: '',
           type: '',
           linkObject: {id: '', name: ''},

nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
+  <div class="right-box right-box-alert-config" v-clickoutside="clickOutside" v-if="rightBox.show">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns">
-      <button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+      <button type="button" v-if="editAlertRule&&editAlertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
         <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -121,6 +121,9 @@
     },
     data() {
       return {
+        rightBox:{
+          show:false
+        },
         promqlCount: 1,
         promqlKeys: [0],
         expressions: [''],
@@ -214,11 +217,16 @@
       }
     },
     methods: {
+      show:function(){
+        this.rightBox.show=true;
+      },
       clickOutside() {
         this.esc(false);
+        this.rightBox.show=false;
       },
       esc(refresh) {
         this.$emit("close", refresh);
+        this.rightBox.show=false;
       },
       save() {
         this.editAlertRule.expr = this.expressions[0];
@@ -279,11 +287,10 @@
     watch: {
       alertRule: {
         deep: true,
-        immediate: true,
         handler(n, o) {
           console.info(n)
           this.editAlertRule = JSON.parse(JSON.stringify(n));
-          if (this.editAlertRule.id) {
+          if (this.editAlertRule&&this.editAlertRule.id) {
             this.expressions = [this.editAlertRule.expr];
             this.$nextTick(() => {
               this.expressions.forEach((ex, index) => {

nezha-fronted/src/components/page/alert/config.vue

@@ -102,7 +102,7 @@
     </div>
     </left-menu>
     <transition name="right-box">
-      <alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
+      <alert-config-box  :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
     </transition>
     <element-set
       v-if="tools.showElementSet"
@@ -123,10 +123,6 @@
     name: "alert-config",
     data() {
       return {
-        //侧滑
-        rightBox: {
-          show: false,
-        },
         /*二级页面相关*/
         bottomBox: {
           ruleDetail: {},
@@ -332,10 +328,9 @@
       },
       edit(u) {
         this.alertRule = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
+        this.$refs.alertConfigBox.show();
       },
       closeRightBox(refresh) {
-        this.rightBox.show = false;
         if (refresh) {
           this.getTableData();
         }
@@ -366,7 +361,7 @@
       },
       add() {
         this.alertRule = this.newAlertRule();
-        this.rightBox.show = true;
+        this.$refs.alertConfigBox.show();
       },
       newAlertRule() {
         return JSON.parse(JSON.stringify(this.blankAlertRule));

nezha-fronted/src/components/page/asset/asset.vue

@@ -944,7 +944,6 @@
     created() {
       this.getUserData();
       this.flushData();
-      this.getPingData();
     },
     mounted() {
       //初始化数据

nezha-fronted/src/components/page/config/mibBrowser.vue

@@ -18,6 +18,7 @@
             size="mini"
             value-key="host"
             style="width: 100%;"
+            @input="assetChange"
           >
             <template slot-scope="{ item }">
               <div>{{ item.host }}</div>
@@ -83,7 +84,7 @@
                     <div class="mib-browser-ad-search-label">{{$t('login.password')}}</div>
                   </el-col>
                   <el-col :span="17">
-                    <el-input class="input-x-mini-24" v-model.trim="searchParamPop.auth.password"></el-input>
+                    <el-input type="password" class="input-x-mini-24" v-model.trim="searchParamPop.auth.password"></el-input>
                   </el-col>
                 </el-row>
 
@@ -116,7 +117,7 @@
                     <div class="mib-browser-ad-search-label">{{$t('project.module.privPassword')}}</div>
                   </el-col>
                   <el-col :span="17">
-                    <el-input class="input-x-mini-24" v-model.trim="searchParamPop.auth.privPassword"></el-input>
+                    <el-input type="password" class="input-x-mini-24" v-model.trim="searchParamPop.auth.privPassword"></el-input>
                   </el-col>
                 </el-row>
               </template>
@@ -316,6 +317,7 @@
         assetData: [],
 
         typeData: ["OctetString", "Integer", "OID", "Gauge", "Counter32", "IpAddress", "TimeTicks", "Counter64", "UnsignedInteger", "BITS", "Float", "DateAndTime"],
+        assetInputTimer:null,
       }
     },
     computed: {
@@ -450,6 +452,55 @@
       clearResult() {
         this.resultData = [];
       },
+      resetSearchParam:function(){
+        this.searchParamPop={
+          host: '',
+            port: 161,
+            oid: '',
+            operation: 'get',
+            version: 2,
+            community: 'public',
+            auth: {
+            username: '',
+              password: '',
+              securityLevel: '',
+              authProtocol: '',
+              privProtocol: '',
+              privPassword: ''
+          }
+        }
+      },
+      assetChange:function(value){
+        clearTimeout(this.assetInputTimer)
+        this.assetInputTimer=setTimeout(()=>{
+          this.resetSearchParam();
+          let asset=this.assetData.find(item=>{
+            return item.host == value
+          })
+
+          if(asset&&asset.accounts&&asset.accounts.length>0){
+            let snmpAccount=asset.accounts.find(item=>{
+              return item.protocol == 'SNMP'
+            })
+
+            if(snmpAccount){
+              console.log(snmpAccount)
+              this.searchParamPop.port=snmpAccount.port;
+              this.searchParamPop.community=snmpAccount.params.community;
+              this.searchParamPop.version=snmpAccount.params.version;
+              if(this.searchParamPop.version == 3){
+                this.searchParamPop.auth.username=snmpAccount.params.user;
+                this.searchParamPop.auth.securityLevel=snmpAccount.params.securityLevel;
+                this.searchParamPop.auth.password=snmpAccount.params.password;
+                this.searchParamPop.auth.authProtocol=snmpAccount.params.authProtocol;
+                if(this.searchParamPop.auth.securityLevel=='authPriv')
+                this.searchParamPop.auth.privProtocol=snmpAccount.params.privProtocol;
+                this.searchParamPop.auth.privPassword=snmpAccount.params.privPassword;
+              }
+            }
+          }
+        },200)
+      },
       assetSuggestion(queryString, callback) {
         let data = [];
         if (!queryString) {