feat: module侧滑新增、修改增加snmp类型

nezha-fronted/src/assets/stylus/main.scss

@@ -858,6 +858,13 @@ li{
 .right-box .el-form-item__label {
   line-height: 30px;
 }
+.right-box-sub-title {
+  padding: 8px 0;
+}
+.right-box-line {
+  margin-bottom: 18px;
+  background-color: #DCDFE6;
+}
 .pop-top-btns {
   text-align: center;
   float: right;
@@ -1304,6 +1311,16 @@ li{
 .el-checkbox__input.is-checked .el-checkbox__inner, .asset .content-left .el-checkbox__input.is-indeterminate .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
   background-color: $global-text-color-active;
 }
+
+.el-radio-button__inner:hover {
+  color: $global-text-color-active;
+}
+
+.el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  background-color: $global-text-color-active;
+  border-color: $global-text-color-active;
+  box-shadow: -1px 0 0 0 $global-text-color-active;
+}
 /* --end--复选框自定义颜色 */
 
 /* dashboard-dialog */
@@ -1377,7 +1394,7 @@ li{
   line-height: 25px !important;
 }
 
-.el-textarea textarea {
+.el-textarea textarea:not(.snmp-walk textarea) {
   height: 140px !important;
 }
 /*el-data-picker选中背景色*/

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

@@ -292,7 +292,23 @@
             port: '',
             path: '',
             param: '',
-            paramObj: []
+            type: '',
+            paramObj: [],
+            //snmp setting 下划线命名是因为业务需求
+            walk: [],
+            walkStr: '', //转为string的walk，用于回显
+            version: 2, //2/3
+            max_repetitions: 25,
+            retries: 3,
+            timeout: 10, //s
+            community: 'public',
+            username: '',
+            security_level: 'noAuthNoPriv', //noAuthNoPriv/authNoPriv/authPriv
+            password: '',
+            auth_protocol: 'MD5', //MD5/SHA
+            priv_protocol: 'DES', //DES/AES
+            priv_password: '',
+            context_name: ''
           };
         } else if (item.type == 3) {
           this.$refs.addEndpointBox.show(true);

nezha-fronted/src/components/common/language/en.js

@@ -270,7 +270,8 @@ const en = {
     refreshLater:'Refresh later',//'请稍后刷新'
     testSuccess:'Test success',
     downloadSuccess : 'Download Success',
-    uploadSuccess: 'Upload Success'
+    uploadSuccess: 'Upload Success',
+    pressEnterToAdd: 'Press enter to add new line'
   },
   asset:{
     asset: 'Asset',
@@ -669,6 +670,17 @@ const en = {
       editModule: 'Edit module',//"编辑组件"
       description: 'Description',//"描述"
       createModule: 'New module',//"新增组件"
+      version: 'Version',
+      walk: 'Walk',
+      maxRepetitions: 'Max repetitions',
+      retries: 'Retries',
+      timeout: 'Timeout',
+      community: 'Community',
+      securityLevel: 'Security level',
+      authProtocol: 'Auth protocol',
+      privProtocol: 'Priv protocol',
+      contextName: 'Context name',
+      privPassword: 'Priv password',
       tip: {
         defaultEndpointSet: 'Default endpoint settings',//"默认的Endpoint设置"
         relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'//"组件关联的Endpoint将默认配置以下端口/路径/参数"

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

@@ -61,8 +61,8 @@
             <button type="button" v-if="assetViewData.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(obj.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{assetViewData.alertNum}}</button>
             <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{assetViewData.alertNum}}</button>
           </el-form-item>
-          <div class="asset-sub-title">{{$t('asset.createAssetTab.assetInfo')}}</div>
+          <div class="right-box-sub-title">{{$t('asset.createAssetTab.assetInfo')}}</div>
-          <div class="line-100 asset-line"></div>
+          <div class="line-100 right-box-line"></div>
           <!------------------------------------------资产类型---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.assetType')" class="right-box-form-content" prop="assetType">
             <el-select popper-class="asset-dropdown" size="small" v-if="!tabView" v-model="assetType" clearable @visible-change="cancelEdit"
@@ -124,8 +124,8 @@
             </div>
             <span v-if="tabView">{{assetData.purchaseDate}}</span>
           </el-form-item>
-          <div class="asset-sub-title">{{$t('asset.createAssetTab.dc')}}</div>
+          <div class="right-box-sub-title">{{$t('asset.createAssetTab.dc')}}</div>
-          <div class="line-100 asset-line"></div>
+          <div class="line-100 right-box-line"></div>
           <!------------------------------------------IDC---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
             <template v-if="!tabView">
@@ -199,10 +199,10 @@
             <span>{{cabinetSelectedData.remark}}</span>
           </el-form-item>
           <!--cli-->
-          <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}
+          <div class="right-box-sub-title">{{$t('asset.createAssetTab.cli')}}
             <el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
           </div>
-          <div class="line-100 asset-line"></div>
+          <div class="line-100 right-box-line"></div>
           <template v-if="accountSwitch">
             <account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult" :is-allowed-change-protocol="changeProtocolSwitch" @protocol-type-change="protocolTypeChange"></account-config-box>
           </template>
@@ -211,7 +211,7 @@
             <el-form-item :label="$t('asset.createAssetTab.exporter')" class="exporter-label">
               <el-switch class="exporter-switch" v-model="assetData.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0" :disabled="exporterDisableSwitch"></el-switch>
             </el-form-item>
-            <div class="line-100 asset-line" style="margin-top: -16px;"></div>
+            <div class="line-100 right-box-line" style="margin-top: -16px;"></div>
           </template>
         </el-form>
       </el-scrollbar>
@@ -1308,13 +1308,3 @@
     }
   }
 </script>
-
-<style scoped>
-.asset-sub-title {
-  padding: 8px 0;
-}
-.asset-line {
-  margin-bottom: 18px;
-  background-color: #DCDFE6;
-}
-</style>

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

@@ -19,7 +19,7 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
+      <el-scrollbar class="right-box-form-box" ref="scrollbar">
         <el-form class="right-box-form" :model="module" label-position="top" :rules="rules" ref="moduleForm">
           <el-form-item :label='$t("project.project.project")' prop="project">
             <el-select v-if="rightBox.isEdit" value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
@@ -31,36 +31,224 @@
             <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="module.name" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.name}}</div>
           </el-form-item>
+
+          <el-form-item :label="$t('overall.type')" prop="type">
+            <el-radio-group v-model="module.type" size="small" @change="updateScrollbar" :disabled="module.id">
+              <el-radio-button label="http"></el-radio-button>
+              <el-radio-button label="snmp"></el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+
+          <!-- snmp表单 -->
+          <template v-if="module.type && module.type == 'snmp'">
+            <div class="right-box-sub-title">SNMP</div>
+            <div class="line-100 right-box-line"></div>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+              </el-col>
+              <el-col :span="18">
+                <el-form-item prop="walkStr">
+                  <el-input class="snmp-walk" v-model="module.walkStr" autosize type="textarea" :placeholder="$t('tip.pressEnterToAdd')"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label">{{$t('project.module.version')}}</div>
+              </el-col>
+              <el-col :span="18">
+                <el-form-item prop="version">
+                  <el-radio-group v-model.number="module.version" size="small" @change="updateScrollbar">
+                    <el-radio-button :label="2"></el-radio-button>
+                    <el-radio-button :label="3"></el-radio-button>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label">{{$t('project.module.maxRepetitions')}}</div>
+              </el-col>
+              <el-col :span="18">
+                <el-form-item prop="max_repetitions">
+                  <el-input v-model.number="module.max_repetitions" size="small"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label">{{$t('project.module.retries')}}</div>
+              </el-col>
+              <el-col :span="18">
+                <el-form-item prop="retries">
+                  <el-input v-model.number="module.retries" size="small"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label">{{$t('project.module.timeout')}}</div>
+              </el-col>
+              <el-col :span="18">
+                <el-form-item prop="timeout">
+                  <el-input v-model.number="module.timeout" size="small">
+                    <template slot="append">second</template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="1">&nbsp;</el-col>
+              <el-col :span="23">
+                <div class="right-box-sub-title">Auth</div>
+                <div class="line-100 right-box-line"></div>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label sub-label-required">{{$t('project.module.community')}}</div>
+              </el-col>
+              <el-col :span="18">
+                <el-form-item prop="community">
+                  <el-input v-model.trim="module.community" maxlength="64" show-word-limit size="small"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!--SNMP V3 setting-->
+            <template v-if="module.version == 3">
+              <el-row>
+                <el-col :span="6">
+                  <div class="sub-label sub-label-required">{{$t('login.username')}}</div>
+                </el-col>
+                <el-col :span="18">
+                  <el-form-item prop="username">
+                    <el-input v-model.trim="module.username" maxlength="64" show-word-limit size="small"></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row>
+                <el-col :span="6">
+                  <div class="sub-label">{{$t('project.module.securityLevel')}}</div>
+                </el-col>
+                <el-col :span="18">
+                  <el-form-item prop="security_level">
+                    <el-radio-group v-model="module.security_level" size="small" @change="updateScrollbar">
+                      <el-radio-button label="noAuthNoPriv"></el-radio-button>
+                      <el-radio-button label="authNoPriv"></el-radio-button>
+                      <el-radio-button label="authPriv"></el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row v-if="module.security_level == 'authNoPriv' || module.security_level == 'authPriv'">
+                <el-col :span="6">
+                  <div class="sub-label sub-label-required">{{$t('login.password')}}</div>
+                </el-col>
+                <el-col :span="18">
+                  <el-form-item prop="password">
+                    <el-input v-model.trim="module.password" maxlength="64" show-word-limit size="small"></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row v-if="module.security_level == 'authNoPriv' || module.security_level == 'authPriv'">
+                <el-col :span="6">
+                  <div class="sub-label">{{$t('project.module.authProtocol')}}</div>
+                </el-col>
+                <el-col :span="18">
+                  <el-form-item prop="auth_protocol">
+                    <el-radio-group v-model="module.auth_protocol" size="small">
+                      <el-radio-button label="MD5"></el-radio-button>
+                      <el-radio-button label="SHA"></el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row v-if="module.security_level == 'authPriv'">
+                <el-col :span="6">
+                  <div class="sub-label">{{$t('project.module.privProtocol')}}</div>
+                </el-col>
+                <el-col :span="18">
+                  <el-form-item prop="priv_protocol">
+                    <el-radio-group v-model="module.priv_protocol" size="small">
+                      <el-radio-button label="DES"></el-radio-button>
+                      <el-radio-button label="AES"></el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row v-if="module.security_level == 'authPriv'">
+                <el-col :span="6">
+                  <div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
+                </el-col>
+                <el-col :span="18">
+                  <el-form-item prop="priv_password">
+                    <el-input v-model.trim="module.priv_password" maxlength="64" show-word-limit size="small"></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </template>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="sub-label">{{$t('project.module.contextName')}}</div>
+              </el-col>
+              <el-col :span="18">
+                <el-form-item prop="context_name">
+                  <el-input v-model.trim="module.context_name" maxlength="64" show-word-limit size="small"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </template>
+
           <el-form-item :label='$t("project.module.description")' prop="remark">
             <el-input v-if="rightBox.isEdit" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="module.remark" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.remark}}</div>
           </el-form-item>
+
           <div class="right-box-form-tip" v-if="rightBox.isEdit">
             {{$t('project.module.tip.defaultEndpointSet')}}
             <div class="line-100"></div>
             {{$t('project.module.tip.relation')}}
           </div>
-          <el-form-item :label='$t("project.endpoint.port")' prop="port">
+
+          <el-form-item :label='$t("project.endpoint.port")' prop="port" >
             <el-input v-if="rightBox.isEdit" placeholder="" v-model.number="module.port" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.port}}</div>
           </el-form-item>
-          <el-form-item :label='$t("project.endpoint.path")' prop="path">
+
-            <el-input  v-if="rightBox.isEdit" placeholder="" v-model="module.path" size="small"></el-input>
+          <el-form-item v-if="module.type && module.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
+            <el-input v-if="rightBox.isEdit" placeholder="" v-model="module.path" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{module.path}}</div>
           </el-form-item>
+
           <el-form-item class="right-box-form-param">
             <template slot="label">
               <span>{{$t('project.endpoint.param')}}</span>
               <div class="right-box-form-btns" v-if="rightBox.isEdit">
                 <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
                 <button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span class="top-tool-btn-txt">{{$t('overall.clearAll')}}</span>
+                  <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
                 </button>
                 <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
                   <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
                 </button>
               </div>
             </template>
+
             <div v-if="rightBox.isEdit" class="param-box param-box-module">
               <div class="param-box-row" v-for="(item, index) in module.paramObj">
                 <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
@@ -123,8 +311,18 @@
           port: [
             {validator:port, trigger: 'blur'},
           ],
-          path: [
+          walk: [
-          ]
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          username: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          password: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          priv_password: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
         },
         projectList: [],
       }
@@ -144,11 +342,66 @@
         this.esc();
       },
 
+      //转化snmpParam属性
+      parseSnmpParam() {
+        let snmpObj = { //下划线命名是因为业务需求
+          walk: this.module.walkStr.split(/\n/),
+          version: this.module.version, //2/3
+          max_repetitions: this.module.max_repetitions ? this.module.max_repetitions : 25,
+          retries: this.module.retries ? this.module.retries : 3,
+          timeout: this.module.timeout ? this.module.timeout + "s" : "10s", //s
+          auth: {
+            community: this.module.community,
+          }
+        };
+        if (this.module.version == 3) {
+          snmpObj.auth.username = this.module.username;
+          snmpObj.auth.security_level = this.module.security_level;
+        }
+        if (this.module.security_level == "authNoPriv" || this.module.security_level == "authPriv") {
+          snmpObj.auth.password = this.module.password;
+          snmpObj.auth.auth_protocol = this.module.auth_protocol;
+          if (this.module.security_level != "authNoPriv") {
+            snmpObj.auth.priv_password = this.module.priv_password;
+            snmpObj.auth.priv_protocol = this.module.priv_protocol;
+          }
+        }
+        this.module.snmpParam = JSON.stringify(snmpObj);
+      },
+      //回显时解析snmpParam
+      reparseSnmpParam(module) {
+        let snmpObj = JSON.parse(module.snmpParam);
+        module.walkStr = snmpObj.walk.join("\n");
+        module.version = snmpObj.version;
+        module.max_repetitions = snmpObj.max_repetitions;
+        module.retries = snmpObj.retries;
+        module.timeout = parseInt(snmpObj.timeout.replace("s", ""));
+        module.community = snmpObj.auth.community;
+        if (snmpObj.version == 3) {
+          module.username = snmpObj.auth.username;
+          module.security_level = snmpObj.auth.security_level;
+        }
+        if (snmpObj.auth.security_level == "authNoPriv" || snmpObj.auth.security_level == "authPriv") {
+          module.password = snmpObj.auth.password;
+          module.auth_protocol = snmpObj.auth.auth_protocol;
+          if (snmpObj.auth.security_level != "authNoPriv") {
+            module.priv_password = snmpObj.auth.priv_password;
+            module.priv_protocol = snmpObj.auth.priv_protocol;
+          }
+        }
+      },
       /*保存*/
       save() {
         this.module.param = this.paramToJson(this.module.paramObj);
         this.$refs.moduleForm.validate((valid) => {
           if (valid) {
+            if (this.module.type.toLowerCase() == 'snmp') {
+              this.parseSnmpParam();
+            } else {
+              if (this.module.snmpParam) {
+                this.module.snmpParam = "";
+              }
+            }
             this.module.projectId = this.module.project.id;
             if (this.module.id) {
               this.$put('module', this.module).then(response => {
@@ -251,6 +504,9 @@
           return jsonString;
         }
       },
+      updateScrollbar() {
+        this.$refs.scrollbar.update();
+      }
     },
     created() {
       this.getProjectList();
@@ -263,11 +519,20 @@
     watch: {
       module: {
         immediate: true,
-        deep:true,
+        deep: true,
         handler(n, o) {
+          if (n) {
+            if (n.type && n.type.toLowerCase() == 'snmp') {
+              n.port = 161;
+              this.reparseSnmpParam(n);
+            }
+          }
           if (n && n.id) {
             this.rightBox.title =this.rightBox.isEdit? this.$t("project.module.editModule") + "  ID：" + n.id : this.$t("project.module.module") + "  ID：" + n.id ;
           } else {
+            if (!n.type) {
+              n.type = 'http';
+            }
             this.rightBox.title = this.$t("project.module.createModule");
           }
         }
@@ -279,5 +544,17 @@
   }
 </script>
 
-<style scoped>
+<style>
+  .sub-label {
+    padding-right: 15px;
+    font-size: 14px;
+    color: #666;
+    text-align: right;
+    line-height: 32px
+  }
+  .sub-label-required::before {
+    content: '*';
+    color: #F56C6C;
+    margin-right: 4px;
+  }
 </style>

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

@@ -8,8 +8,7 @@
     <div class="content-left">
       <div class="sidebar-title">{{$t('alert.alert')}}</div>
       <div class="sidebar-info">
-        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-
+        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
-">{{$t('alert.alertList')}}</div>
         <div class="sidebar-info-item" @click="jumpTo('alertConfig')" id="alert-jump-config">
           {{$t('alert.alertConfig')}}
         </div>