From 3c6d8415614e187f8b17d9f273786a7b7946945e Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Mon, 27 Jul 2020 16:21:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?NEZ-357=20feat:mib=20browser=20snmp?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=90=8C=E6=AD=A5asset=20&=20alert=20rule?=
 =?UTF-8?q?=E4=BE=A7=E6=BB=91bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          |  2 +-
 .../common/rightBox/alertConfigBox.vue        | 15 +++--
 .../src/components/page/alert/config.vue      | 11 +---
 .../src/components/page/asset/asset.vue       |  1 -
 .../src/components/page/config/mibBrowser.vue | 55 ++++++++++++++++++-
 5 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 2b39ca2fb..59bc334bd 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -203,7 +203,7 @@
           assetId: ''
         },
         alertRule: {
-          id: '',
+          id: null,
           alertName: '',
           type: '',
           linkObject: {id: '', name: ''},
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index fc1c06137..c65858e98 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/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) => {
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index a7b878c6d..d01c9e718 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/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));
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 5f4080e6f..f04234d6e 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -944,7 +944,6 @@
     created() {
       this.getUserData();
       this.flushData();
-      this.getPingData();
     },
     mounted() {
       //初始化数据
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 9dcc73f66..8197c5f47 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/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) {

From 1733fa805bfbd79a811c066770341cace86136a1 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 27 Jul 2020 17:27:24 +0800
Subject: [PATCH 2/2] =?UTF-8?q?perf:=20asset=E9=87=8D=E6=9E=84=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/page/asset/asset.vue       | 117 +++++-------------
 1 file changed, 29 insertions(+), 88 deletions(-)

diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 5f4080e6f..32466da98 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -54,14 +54,11 @@
               </el-collapse-item>
               <el-collapse-item name="ping" :title="$t('asset.left.ping')">
                 <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :label="item.value">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :label="item.label">
                     <div class="sidebar-info-item-txt">
-                      <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
-                        <span slot="reference">{{item.value}}</span>
-                      </el-popover>
-                      <span v-else>{{item.value}}</span>
+                      <span>{{item.label}}</span>
                     </div>
-                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
+                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total < 99">
                       <el-badge class="mark" :value="item.total" :max="99"/>
                     </el-tooltip>
                   </el-checkbox>
@@ -428,7 +425,7 @@
         assetTypeCheckList: [],
         vendorData: [],
         vendorCheckList: [],
-        pingData: this.$CONSTANTS.asset.pingData,
+        pingData: [],
         pingCheckList: [],
 
         pageObj: {
@@ -661,41 +658,6 @@
           })
         });
       },
-      addNewData(type) {
-        if (type === 'IDC') {
-          this.$post('idc', this.addIdcData).then(res => {
-            if (res.code === 200) {
-              const h = this.$createElement;
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.getDcData()
-              this.getTableData()
-              /*this.getLeftMenuList()
-              this.getAssetData()*/
-            } else {
-              this.$message.error(res.msg);
-            }
-          })
-        }
-      },
-      deleteData(data, item) {
-        this.$confirm(this.$t("tip.assetConfirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete(data + "?ids=" + item).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-              this.getDcData();
-              /*this.getAssetData();
-              this.getLeftMenuList();*/
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
       markOptionData(data) {
         data.forEach(item => {
           this.$set(item, 'isEdit', false);
@@ -705,26 +667,6 @@
           this.$set(item, item.id + item.name, false)
         })
       },
-      editOptionData(item) {
-        if (!item.isEdit) {
-          item.isEdit = true;
-        } else {
-          if (item.name !== item.oldName) {
-            item.isEdit = false;
-          } else {
-            item.isEdit = false;
-          }
-        }
-      },
-      delOptionData(data) {
-      },
-      tabControl(data) {
-        if (data === 'close') {
-          this.editUnitShow = false;
-          this.$refs['assetEditUnit'].tabView = false;
-          this.rightBox.show = false;
-        }
-      },
       indOf(a, b) {
         let c = [];
         for (let i = 0; i < a.length; i++) {
@@ -920,38 +862,37 @@
       /*}
         this.getAssetData();*/
       },
-      /*// 获取左侧菜单数据
+      // 获取左侧菜单数据
       getLeftMenuList(){
-        this.$get('asset/filter').then(response => {
-          if (response.code === 200) {
-            //dc
-            this.checkListData = this.IDCOptionData = response.data.dc;
-            this.markOptionData(this.IDCOptionData);
-            // AssetType
-            this.assetTypeCheckListData = response.data.assetType;
-            // vendor
-            this.vendorCheckListData = response.data.vendor;
-            // ping
-            this.pingCheckListData= response.data.ping.map(item=>{
-              item.label=item.name;
-              item.value=item.status;
-              return item
-            })
-          }
-        })
-      },*/
-    },
-    created() {
-      this.getUserData();
-      this.flushData();
-      this.getPingData();
+        return new Promise(resolve => {
+          this.$get('asset/filter').then(response => {
+            if (response.code === 200) {
+              //dc
+              this.dcData = response.data.dc;
+              // AssetType
+              this.assetTypeData = response.data.assetType;
+              // vendor
+              this.vendorData = response.data.vendor;
+              // ping
+              this.pingData = response.data.ping.map(item => {
+                item.label = item.name;
+                item.value = item.status;
+                return item;
+              });
+            }
+            resolve();
+          });
+        });
+      },
     },
     mounted() {
       //初始化数据
-      Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getUserData(), this.getDcData()]).then(response => {
+      /*Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getUserData(), this.getDcData()]).then(response => {
+        this.getTableData();
+      });*/
+      this.getLeftMenuList().then(() => {
         this.getTableData();
       });
-      // this.getLeftMenuList()//获取左侧菜单列表
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
       if (pageSize != 'undefined' && pageSize != null) {