feat: mib-browser(未完成)

2020-04-10 21:40:36 +08:00
parent 70661be3cd
commit e49326fd1a
8 changed files with 410 additions and 88 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -258,7 +258,7 @@ li{
  border-radius: 4px;
  display: inline-block;
 }
-.nz-btn-group-size-normal {
+.nz-btn-group-size-small {
  max-height: 24px;
 }
 .nz-btn-group .nz-btn:first-child:not(:last-child) {
@@ -268,7 +268,6 @@ li{
 .nz-btn-group .nz-btn:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
-  border-left: 1px solid rgba(162,162,162,0.5);
 }
 .nz-btn-group .nz-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
@@ -286,6 +285,16 @@ li{
 .nz-btn-group .nz-input-group-middle input {
  border-radius: 0px !important;
  border: none;
+  border-right: 1px solid rgba(162,162,162,0.50) !important;
+}
+.nz-btn-group .nz-input-group-left input {
+  border-radius: 4px 0px 0px 4px !important;
+  border: none;
+  border-right: 1px solid rgba(162,162,162,0.50) !important;
+}
+.nz-btn-group .nz-input-group-right input {
+  border-radius: 0px 4px 4px 0px !important;
+  border: none;
 }
 /* end--按钮组件*/

@@ -306,14 +315,17 @@ li{
 .input-x-mini-24 .el-input__inner {
  height: 24px;
  line-height: 24px;
-  padding: 0 5px;
-  font-size: 12px;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.input-x-mini-24 .el-input__icon {
+  line-height: 24px;
 }
 .input-x-mini-26 .el-input__inner {
  height: 26px;
  line-height: 26px;
  padding: 0 5px;
-  font-size: 12px;
+  font-size: 14px;
 }
 .el-textarea .el-input__count { /*防止字数限制提示信息遮挡内容和滚动条*/
  right: 20px;
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -19,7 +19,7 @@
            <i slot="suffix" class="el-input__icon el-icon-search" style="float:right" @click="focusInput"></i>
          </el-input>
        </div>
-        <div class="margin-r-20 nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
+        <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
          v-model="formatTime"loading
          type="datetime"
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -589,11 +589,12 @@ const en = {
      models:'Models',
      modelTip:'please select models',
      createMib:'Create Mib',
-      mibFile:'Mib File',
+      mibFiles:'Mib Files',
      uploadTip:'please upload mib file',
      requiredMibFile:'mib file is required',
      vendor:'Vendor',
      type:'Type',
+      mibBrowser: 'Mib browser',
    },
    system:{
      system:'System',
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -32,7 +32,7 @@
              <div class="right-child-box-title">{{$t('asset.asset')}}</div>
              <!--end--标题-->
              <!--begin--搜索框-->
-              <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light endpoint-asset-search">
+              <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
                <button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
                  <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
                  <span>
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -56,7 +56,7 @@
                  <!---->
                  <div class="pop-item-wider " >
                    <!-- begin--搜索框-->
-                    <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light endpoint-asset-search">
+                    <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
                      <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
                        <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
                        <span>
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -33,13 +33,14 @@
      </div>
    </div>
    <div class="content-right">
+      <template v-if="showTab == 'file'">
        <div class="top-tools">
-        <div class="nz-tab" style="right: 100%; transform: translateX(100%); position: absolute;width: 200px;">
-          <div class="nz-tab-item-box" @click="" id="module-type-1">
-            <div class="nz-tab-item nz-tab-item-active">Files</div>
+          <div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
+            <div class="nz-tab-item-box" id="module-type-1">
+              <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
            </div>
-          <div @click="" class="nz-tab-item-box" id="module-type-2">
-            <div class="nz-tab-item">Browser</div>
+            <div @click="showTab = 'browser'" class="nz-tab-item-box" id="module-type-2">
+              <div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
            </div>
          </div>
          <div class="top-tool-main-right">
@@ -89,8 +90,8 @@
                </div>
              </template>
              <div v-else-if="item.prop == 'option'" class="content-right-options">
-<!--              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>-->
-<!--              &nbsp;-->
+  <!--              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>-->
+  <!--              &nbsp;-->
                <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
                &nbsp;
                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
@@ -109,6 +110,8 @@
        </el-table>
        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
+      </template>
+      <mib-browser :showTab="showTab" v-show="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
    </div>

    <element-set
@@ -125,10 +128,17 @@
 <script>
  import axios from 'axios'
  import bus from '../../../libs/bus';
+  import mibBrowser from './mibBrowser';
+
  export default {
    name: "mib",
+    components: {
+      'mib-browser': mibBrowser
+    },
    data() {
      return {
+        showTab: 'file', //file/browser
+
        tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
        showTopBtn: false,
        mib: {
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -1,13 +1,312 @@
 <template>
-
+  <span class="mib-browser">
+    <div class="top-tools">
+      <div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
+        <div class="nz-tab-item-box" @click="toFileTab" id="module-type-3">
+          <div class="nz-tab-item">{{$t("config.mib.mibFiles")}}</div>
+        </div>
+        <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>
+      <div class="top-tool-main-right">
+        <div class="top-tool-search">
+          <el-input size="mini" v-model="searchParam.host" placeholder="Host"></el-input>
+        </div>
+        <div class="top-tool-search margin-l-20 oid-input">
+          <el-input size="mini" v-model="searchParam.oid" placeholder="OID"></el-input>
+        </div>
+        <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-l-20">
+          <el-select class="nz-input-group-left input-x-mini-24 operation" v-model="searchParam.operation">
+            <el-option v-for="item in operationData" :key="item" :value="item"></el-option>
+          </el-select><button
+          @click="advancedShow = true" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="browser-advanced"><i class="el-icon-more"></i></button><button
+          @click="search" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="browser-go">Go</button>
+        </div>
+      </div>
+    </div>
+    <div class="mib-browser-box">
+      <el-row style="height: 100%;">
+        <!--左半部分-->
+        <el-col :span="7" class="mib-browser-left">
+          <!--tree-->
+          <el-scrollbar class="mib-browser-tree" ref="scrollbar">
+            <el-tree
+              ref="walkTree"
+              node-key="objectID"
+              :props="{label: 'name', children: 'subTree', disabled: disabledNode}"
+              :data="walkData"
+              :expand-on-click-node="false"
+              check-on-click-node
+              check-strictly
+              @node-click="showDetail"
+            >
+              <div slot-scope="{node, data}" class="walk-tree-item">
+                <span v-if="!data.type"><i class="el-icon-reading"></i></span>
+                <span v-else>
+                  <i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
+                  <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
+                  <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
+                  <i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
+                  <i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
+                </span>
+                {{data.name}}
+              </div>
+            </el-tree>
+          </el-scrollbar>
+          <!--detail-->
+          <div class="mib-browser-detail">
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Name</el-col>
+              <el-col :span="19">{{currentWalk.name}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">OID</el-col>
+              <el-col :span="19">{{currentWalk.objectID}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">MIB</el-col>
+              <el-col :span="19">{{mibName(currentWalk.objectID)}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Syntax</el-col>
+              <el-col :span="19">{{currentWalk.syntax}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Access</el-col>
+              <el-col :span="19">{{currentWalk.access}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Status</el-col>
+              <el-col :span="19">{{currentWalk.status}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Indexes</el-col>
+              <el-col :span="19">{{currentWalk.index}}</el-col>
+            </el-row>
+            <el-row class="mib-browser-detail-row">
+              <el-col :span="5">Description</el-col>
+              <el-col :span="19">
+                <el-scrollbar style="height: 100%;">
+                  <div class="mib-browser-detail-description">{{currentWalk.description}}</div>
+                </el-scrollbar>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <!--右半部分-->
+        <el-col :span="17" class="mib-browser-right">
+          <div class="mib-browser-table-title">
+            <span>Result table</span>
+            <span>
+              <span class="mib-browser-table-op" :title="$t('overall.exportExcel')"><i class="el-icon-download"></i></span>
+              <span @click="clearResult" class="mib-browser-table-op" :title="$t('overall.clear')"><i class="el-icon-close"></i></span>
+            </span>
+          </div>
+          <div class="mib-browser-table">
+            <el-row class="mib-browser-table-header">
+              <el-col :span="8">Name/OID</el-col>
+              <el-col :span="9">Value</el-col>
+              <el-col :span="3">Type</el-col>
+              <el-col :span="4">IP:Port</el-col>
+            </el-row>
+            <el-row class="mib-browser-table-tr" v-for="item, index in resultData" :key="index">
+              <el-col :span="8">{{item.name ? item.name : item.oid}}</el-col>
+              <el-col :span="9">{{item.value}}</el-col>
+              <el-col :span="3">{{item.type}}</el-col>
+              <el-col :span="4">{{item.ip + (item.port ? ":" + item.port : "")}}</el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </span>
 </template>

 <script>
  export default {
-    name: "mibBrowser"
+    name: "mibBrowser",
+    props: {
+      showTab: String,
+    },
+    data() {
+      return {
+        searchParam: {
+          host: '',
+          port: 161,
+          oid: '',
+          operation: 'get'
+        },
+        operationData: ['get', 'walk', 'getnext', 'set'],
+        advancedShow: false,
+
+        walkData: [],
+        currentWalk: {name: '', objectID: '', syntax: '', access: '', status: '', index: '', description: ''},
+        resultData: []
+      }
+    },
+    computed: {
+      mibName() {
+        return (value) => {
+          return value ? this.getMibName(value) : "";
+        }
+      }
+    },
+    methods: {
+      toFileTab() {
+        this.$emit("toFileTab");
+      },
+      showDetail(data, node) {
+        this.currentWalk = data;
+      },
+      disabledNode(data) {
+        if (data.objectID) {
+          return false;
+        }
+        return true;
+      },
+      getMibName(oid) {
+        let node = this.$refs.walkTree.getNode(oid);
+        let mibName = getMibName(node);
+        function getMibName(n) {
+          if (n.parent && n.parent.parent) {
+            return getMibName(n.parent);
+          } else if (n.parent) {
+            return n.data.name;
+          } else {
+            return "";
+          }
+        }
+        if (mibName) {
+          return mibName;
+        } else {
+          return "";
+        }
+      },
+      getWalkData() {
+        this.$get('mib/tree', {pageSize: -1, pageNo: 1}).then(response => {
+          if (response.code === 200) {
+            let obj = JSON.parse(response.data);
+            this.walkData = [];
+            for (let item in obj) {
+              this.walkData.push({name: item, subTree: obj[item]});
+            }
+          }
+        });
+      },
+      search() {
+        this.$get('mib/browser').then(response => {
+          if (response.code === 200) {
+            this.resultData = response.data.list;
+          }
+        });
+      },
+      clearResult() {
+        this.resultData = [];
+      }
+    },
+    mounted() {
+      this.getWalkData();
+    }
  }
 </script>

-<style scoped>
+<style lang="scss">
+.mib-browser {
+  .top-tool-search .el-input__inner {
+    height: 25px;
+    line-height: 25px;
+  }
+  .operation {
+    width: 90px;
+  }
+  .oid-input {
+    width: 500px;
+  }

+  .mib-browser-box {
+    border: 1px solid #D8D8D8;
+    border-radius: 4px;
+    height: calc(100% - 55px);
+    width: 100%;
+  }
+
+  .mib-browser-left {
+    border-right: 2px solid #D8D8D8;
+    height: 100%;
+  }
+  .mib-browser-tree {
+    height: calc(66% - 1px);
+    background-color: white;
+    border-radius: 4px 0 0 0;
+    border-bottom: 2px solid #dcdcdc;
+    font-size: 14px;
+  }
+  .mib-browser-detail {
+    height: 34%;
+  }
+  .mib-browser-detail-row {
+    line-height: 25px;
+    background-color: white;
+    border-bottom: 1px solid #D8D8D8;
+    font-size: 14px;
+  }
+  .mib-browser-detail-row .el-col:first-of-type {
+    color: #666;
+  }
+  .mib-browser-detail-row:not(:last-of-type) {
+    border-bottom: 1px solid #D8D8D8;
+    height: 25px;
+  }
+  .mib-browser-detail-row:last-of-type {
+    height: calc(100% - 175px);
+  }
+  .mib-browser-detail-row:last-of-type .el-col {
+    height: 100%;
+  }
+  .mib-browser-detail-row .el-col {
+    padding: 0 5px
+  }
+  .mib-browser-detail-row .el-col:first-of-type {
+    border-right: 1px solid #D8D8D8;
+  }
+  .mib-browser-detail-row:last-of-type .el-col:last-of-type {
+    padding-right: 0;
+  }
+  .mib-browser-detail-description {
+    padding: 0 14px 0 0;
+  }
+  .mib-browser-table-title {
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
+    border-bottom: 1px solid #D8D8D8;
+    padding: 0 5px 0 8px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .mib-browser-table-op {
+    display: inline-block;
+    margin: 0 5px;
+    cursor: pointer;
+  }
+  .mib-browser-table-header .el-col {
+    color: #666;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-bottom: 1px solid #D8D8D8;
+  }
+  .mib-browser-table-header .el-col:not(:last-of-type), .mib-browser-table-tr .el-col:not(:last-of-type) {
+    border-right: 1px solid #D8D8D8;
+  }
+  .mib-browser-table-tr .el-col {
+    border-bottom: 1px solid #D8D8D8;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 4px;
+    font-size: 14px;
+    background-color: white;
+  }
+}
 </style>
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -49,7 +49,7 @@
            </div>
          </div>

-          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
+          <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20">
            <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
                    class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
              <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>