NEZ-329 feat: asset详情页accounts

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

@@ -394,6 +394,7 @@ li{
   padding-bottom: 10px;
   color: #999;
   cursor: pointer;
+  display: inline-block;
 }
 .nz-tab-item-active {
   border-bottom: 3px solid $global-text-color-active;
@@ -401,7 +402,16 @@ li{
   cursor: default;
   font-weight: bold;
 }
-
+.nz-tab-item-close {
+  color: rgba(245, 108, 108, 0.6);
+  cursor: pointer;
+}
+.nz-tab-item-close:hover {
+  color: rgba(245, 108, 108, 1);
+}
+.nz-tab-error {
+  font-weight: normal;
+}
 /* end--nz-tab组件*/
 
 /* begin--二级页面tab*/
@@ -1071,6 +1081,11 @@ li{
 .right-box-add-endpoint.right-box-add-endpoint-snmp {
   width: 850px;
 }
+.snmp-form {
+  .el-form-item__content {
+    margin-left: 10px !important;
+  }
+}
 /* begin--右侧弹框--顶部按钮*/
 .right-box-top-btns {
   text-align: center;

nezha-fronted/src/components/charts/chart-list.vue

@@ -28,8 +28,8 @@
     z-index: 2000;
   }
   .vue-resizable-handle:after {
-    border-right: 2px solid #555;
+    border-right: 2px solid #acb6bf;
-    border-bottom: 2px solid #555;
+    border-bottom: 2px solid #acb6bf;
     content: "";
     position: absolute;
     right: 3px;

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

@@ -450,9 +450,9 @@ const en = {
       protocol:"Protocol",
       sshProtocol:"SSH",
       telnetProtocol:"Telnet",
-      userTip:"UserTip",//用户名提示
+      userTip:"User tip",//用户名提示
-      passwordTip:"PasswordTip",//密码提示
+      passwordTip:"Password tip",//密码提示
-      reloginPasswordTip:"Relogin",//密码提示
+      reloginPasswordTip:"Relogin tip",//密码提示
       userPwdIntroduce:'Please specify a user name and password so that the telenet login process can automatically log in',
       reLoginPwdIntroduce:'Please specify the password prompt so that the login process can run automatically',
       account:'User name',//'用户名'

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

@@ -21,7 +21,7 @@
         {{tabView == false && !pageObj.id ? $t('asset.createAssetTab.title') : ''}}
       </div>
 
-      <el-scrollbar class="right-box-form-box">
+      <el-scrollbar class="right-box-form-box" ref="scrollbar">
         <el-form ref="assetEditForm" :model="assetData" label-width="120px" class="right-box-form right-box-form-left" :rules="rules">
           <el-form-item :label="$t('asset.createAssetTab.sn')" prop="sn">
             <el-input size="small" v-if="!tabView" v-model="assetData.sn"/>
@@ -151,7 +151,7 @@
                   <el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.value'">
                     <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
                   </el-form-item>
-                  <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
+                  <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
                 </div>
               </el-scrollbar>
             </div>
@@ -176,22 +176,39 @@
             <location-cascader :disabled="assetData.modelId !=''?false:true" :default-model-u-size="modelSize" @change="setLocationData" :init-data="initLocationData" ref="locationCascader" :idc-option="IDCOptionData"></location-cascader>
           </el-form-item>
           <!--cli-->
-          <div class="right-box-sub-title">{{$t('asset.createAssetTab.cli')}}
+          <div class="right-box-sub-title">{{$t('config.account.account')}}
-            <el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
+            <!--<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 right-box-line"></div>
-          <template v-if="accountSwitch">
+          <!--<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>
+          </template>-->
+          <div class="nz-tab" style="padding-left: 30px;">
+            <div class="nz-tab-item-box" v-for="(account, index) in assetData.accounts" :key="index" @click="changeProtocolType(account.protocol)" :id="`account-login-type-${index}`">
+              <div class="nz-tab-item" :class="{'nz-tab-item-active': accountType == account.protocol}" style="position: relative;">
+                <span>{{account.protocol}}</span>
+                <transition name="el-zoom-in-top">
+                  <div v-if="errorProtocol.indexOf(account.protocol) > -1" class="nz-tab-error el-form-item__error">Required</div>
+                </transition>
+              </div>&nbsp;
+              <span class="nz-tab-item-close" @click.stop="removeAccount(index)"><i class="el-icon-circle-close"></i></span>
+            </div>
+            <el-popover placement="right" width="70" trigger="click" :disabled="assetData.accounts.length == 3" v-model.sync="showAccountOp" popper-class="no-style-class">
+              <button slot="reference" id="add-type" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" :class="{'nz-btn-disabled': assetData.accounts.length == 3}">
+                <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
+              </button>
+              <ul class="el-select-dropdown__list">
+                <li @click="addAccount(type)" v-for="(type, index) in selectableAccountTypes" :key="index" class="el-select-dropdown__item"><span>{{type}}</span></li>
+              </ul>
+            </el-popover>
+          </div>
+          <account-config-box v-for="(account,index) in assetData.accounts" :account="account" v-show="account.protocol == accountType" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult" @protocol-type-change="protocolTypeChange"></account-config-box>
 
-          <template v-if="!pageObj.id && !exporterDisableSwitch">
+          <template v-if="accountType == 'SSH'">
             <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" :show="!exporterDisableSwitch"></el-switch>
             </el-form-item>
           </template>
-          <template v-else>
-            <div style="height: 52px;"></div>
-          </template>
         </el-form>
       </el-scrollbar>
 
@@ -227,6 +244,8 @@
         firstShowModel: false,
         visible: '',
         vendorModelData: '',
+        showAccountOp: false,
+        errorProtocol: [], //校验不通过的account
         assetData: {
           id: '',
           sn: '',
@@ -241,7 +260,8 @@
             host:'',
             port:'',
           },
-          accounts: [{
+          accounts: [],
+          /*accounts: [{
             id: '',
             authType: 1,
             protocol:'SSH',
@@ -251,14 +271,15 @@
             userTip:"",
             passwordTip:'',
             reloginPasswordTip:''
-          }],
+          }],*/
           tags: [],
           exporter: 0
         },
+        selectableAccountTypes: ["SSH", "TELNET", "SNMP"],
         modelSize:1,
         initLocationData:null,
         locationInfo:null,
-        accountSwitch:false,//true 开启，false 关闭
+        //accountSwitch:false,//true 开启，false 关闭
         accountData: '',
         assetViewData: {
           assetType: '',
@@ -459,7 +480,20 @@
       'assetData.idcId': function(n, o) {
         this.addCabinetData.idcId = n;
       },
-      accountSwitch(n) {
+      'assetData.accounts': {
+        deep: true,
+        handler(n) {
+          let temp = ["SSH", "TELNET", "SNMP"];
+          n.forEach(item => {
+            let i = temp.indexOf(item.protocol);
+            if (i > -1) {
+              temp.splice(i, 1);
+            }
+          });
+          this.selectableAccountTypes = temp;
+        }
+      },
+      /*accountSwitch(n) {
         if (n) {
           if (!this.assetData.accounts[0]) {
             !this.assetData.accounts.push({
@@ -487,7 +521,7 @@
         }else{
           this.changeProtocolSwitch=true;
         }
-      },
+      },*/
       locationInfo:{
         deep:true,
         handler(n,o){
@@ -509,6 +543,64 @@
           this.$refs.tagEditBoxScrollbar.update();
         });
       },
+      addAccount(type) {
+        if (type == "SSH") {
+          this.assetData.accounts.push({
+            authType: 1,
+            protocol: "SSH",
+            port: 22,
+            params: {
+              user: "",
+              method: "password",
+              password: "",
+              key: "",
+              passwordKey: ""
+            }
+          });
+        } else if (type == "TELNET") {
+          this.assetData.accounts.push({
+            protocol: "TELNET",
+            port: 23,
+            params: {
+              user: "",
+              password: "",
+              userTip: "",
+              passwordTip: "",
+              reloginTip: ""
+            }
+          });
+        } else if (type == "SNMP") {
+          this.assetData.accounts.push({
+            protocol: "SNMP",
+            port: 161,
+            params: {
+              version:2,
+              community:"public",
+              security_name:"",
+              security_level:"",
+              auth_password:"",
+              priv_password:"",
+              auth_protocol:"",
+              priv_protocol:"",
+              context_name:""
+            }
+          });
+        }
+        this.accountType = type;
+        this.showAccountOp = false;
+        this.$nextTick(() => {
+          let sbWrap = this.$refs.scrollbar.$refs.wrap;
+          sbWrap.scrollTop = sbWrap.scrollHeight;
+        });
+      },
+      removeAccount(index) {
+        this.assetData.accounts.splice(index, 1);
+        if (this.assetData.accounts.length > 0) {
+          this.accountType = this.assetData.accounts[0].protocol;
+        } else {
+          this.accountType = "";
+        }
+      },
       removeTag: function(index) {
         this.assetData.tags.splice(index, 1);
         this.$nextTick(() => {
@@ -525,6 +617,7 @@
         this.getIDCOptionData();
         this.getVendorOptionData();
         this.getAssetTypeOptionData();
+        this.showAccountOp = false;
       },
       editQuit() {
         for (let i of this.assetTypeOptionData) {
@@ -595,8 +688,12 @@
             this.assetData.state = this.obj.state
             this.assetData.idcId = this.obj.idc.id;
             this.assetData.tags = this.obj.tags;
+            this.assetData.accounts = this.obj.accounts;
             this.assetData.cabinetId = this.obj.cabinet == null ? '' : this.obj.cabinet.id
             this.assetData.purchaseDate = this.obj.purchaseDate;
+            if (this.assetData.accounts && this.assetData.accounts.length > 0) {
+              this.accountType = this.assetData.accounts[0].protocol.toUpperCase();
+            }
             // this.assetData.accounts[0].id = this.obj.accounts[0].id
             // this.assetData.accounts[0].authType = this.obj.accounts[0].authType
             // this.assetData.accounts[0].user = this.obj.accounts[0].user
@@ -604,12 +701,12 @@
             // this.assetData.accounts[0].port = this.obj.accounts[0].port
             // this.assetData.accounts[0].cert = this.obj.accounts[0].privateKey
             this.assetData.accounts=this.obj.accounts[0]?this.obj.accounts:[];
-            this.accountSwitch=this.assetData.accounts.length>0;
+            //this.accountSwitch=this.assetData.accounts.length>0;
             this.idcSelectedData.location = this.obj.idc.location
             this.idcSelectedData.principal = this.obj.idc.principal
             this.idcSelectedData.tel = this.obj.idc.tel
             this.cabinetSelectedData.uSize = this.obj.cabinet == null ? '' : this.obj.cabinet.uSize
-            this.cabinetSelectedData.remark = this.obj.cabinet == null ? '' : this.obj.cabinet.remark
+            this.cabinetSelectedData.remark = this.obj.cabinet == null ? '' : this.obj.cabinet.remark;
             this.getAllModelOptionData(this.assetType);
           } else {
             this.resetAsset();
@@ -739,17 +836,7 @@
             port:'',
           },
           locationInfo:null,
-          accounts: [{
+          accounts: [],
-            id: '',
-            authType: 1,
-            protocol: 'SSH',
-            user: '',
-            pwd: '',
-            port: '',
-            userTip:"",
-            passwordTip:'',
-            reloginPasswordTip:''
-          }],
           tags: []
         };
         this.assetType = '';
@@ -790,12 +877,14 @@
             }
           }
 
-          if (!this.accountSwitch) {
+          /*if (!this.accountSwitch) {
             this.assetData.accounts = [];
-          }
+          }*/
 
-          if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
+          if(this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
-            this.$refs.accountConfigBox[0].validateAccount();
+            this.$refs.accountConfigBox.forEach(box => {
+              box.validateAccount();
+            });
           }
 
           this.$refs.assetEditForm.validate((valid) => {
@@ -896,8 +985,14 @@
           })
         }
       },
-      setAccountValideResult:function(result){
+      setAccountValideResult(result, protocol) {
-        this.accountValideResult=result;
+        this.accountValideResult = result;
+        let index = this.errorProtocol.indexOf(protocol);
+        if (result) {
+          index != -1 ? this.errorProtocol.splice(index, 1) : "";
+        } else {
+          index == -1 ? this.errorProtocol.push(protocol) : "";
+        }
       },
       //新增型号弹框关闭后重置弹框内容
       resetVendor() {
@@ -982,6 +1077,13 @@
 
         }
       },
+      changeProtocolType(type) {
+        this.accountType = type;
+        this.$nextTick(() => {
+          let sbWrap = this.$refs.scrollbar.$refs.wrap;
+          sbWrap.scrollTop = sbWrap.scrollHeight;
+        });
+      },
       deleteData(data, item) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),

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

@@ -42,7 +42,7 @@
           </div>
 
           <!-- snmp表单 -->
-          <template v-if="currentModule.type && currentModule.type == 'snmp'">
+          <span class="snmp-form" v-if="currentModule.type && currentModule.type == 'snmp'">
             <div class="right-box-sub-title">SNMP settings</div>
             <div class="line-100 right-box-line"></div>
 
@@ -232,7 +232,7 @@
                 </el-form-item>
               </el-col>
             </el-row>
-          </template>
+          </span>
 
           <div class="right-box-form-tip" v-if="rightBox.isEdit">
             {{$t('project.module.tip.defaultEndpointSet')}}

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

@@ -1,46 +1,94 @@
 <template>
-    <div>
+  <el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;">
-      <el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
-        <div class="nz-tab">
-          <div class="nz-tab-item-box" @click="changeProtocolType('SSH')" id="account-logintype-1">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SSH', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'TELNET' || account.protocol == 'SNMP')}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
-          </div>
-          <div @click="changeProtocolType('TELNET')" class="nz-tab-item-box" id="account-logintype-2">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'SSH' || account.protocol == 'SNMP')}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
-          </div>
-          <div @click="changeProtocolType('SNMP')" class="nz-tab-item-box" id="account-logintype-3">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SNMP', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'TELNET' || account.protocol == 'SSH')}">SNMP</div>
-          </div>
-        </div>
     <template v-if="account.protocol == 'SSH'">
-
+      <el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
-        </template>
+        <el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
-        <template v-if="account.protocol == 'TELNET'">
-
-        </template>
-        <template v-if="account.protocol == 'SNMP'">
-
-        </template>
-        <el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
-          <el-input autocomplete="new-password" size="small" v-model="account.user"/>
       </el-form-item>
-        <el-form-item :label="$t('asset.createAssetTab.loginType')" prop="loginType" v-show="account.protocol == 'SSH'">
+      <el-form-item :label="$t('asset.createAssetTab.loginType')" prop="params.method">
-          <el-radio-group v-model="account.authType" size="small">
+        <el-radio-group v-model="account.params.method" size="small">
-            <el-radio-button label="1">{{$t('asset.createAssetTab.password')}}</el-radio-button>
+          <el-radio-button label="password">{{$t('asset.createAssetTab.password')}}</el-radio-button>
-            <el-radio-button label="2">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
+          <el-radio-button label="key">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
         </el-radio-group>
       </el-form-item>
-        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="(account.authType==1 || account.protocol == 'TELNET')" >
+      <el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'password'">
-          <el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
+        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
       </el-form-item>
-        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="(account.authType==2 && account.protocol == 'SSH')" prop="file">
+      <el-form-item :label="$t('asset.createAssetTab.ssh')" v-if="account.params.method == 'key'" prop="file">
-          <el-input rows="4" type="textarea" placeholder="" v-model="account.privateKey" size="small"></el-input>
+        <el-input rows="4" type="textarea" placeholder="" v-model="account.params.key" size="small"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'key'">
+        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.passwordKey"/>
       </el-form-item>
       <el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
         <el-input size="small" v-model.number="account.port"/>
       </el-form-item>
+    </template>
+    <template v-if="account.protocol == 'TELNET'">
+      <el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
+        <el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.userTip')" prop="userTip">
+        <el-input autocomplete="new-password" size="small" v-model="account.params.userTip"/>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.password')">
+        <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
+      </el-form-item>
+      <el-form-item :label="this.$t('asset.createAssetTab.passwordTip')">
+        <el-input size="small" v-model="account.params.passwordTip"/>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" prop="reloginTip">
+        <el-input size="small" v-model="account.params.reloginTip"/>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
+        <el-input size="small" v-model.number="account.port"/>
+      </el-form-item>
+    </template>
+    <template v-if="account.protocol == 'SNMP'">
+      <el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
+        <el-input size="small" v-model.number="account.port"/>
+      </el-form-item>
+      <el-form-item :label="$t('project.module.community')" prop="params.community">
+        <el-input size="small" v-model="account.params.community"/>
+      </el-form-item>
+      <el-form-item :label="$t('project.module.version')" prop="params.version">
+        <el-radio-group v-model.number="account.params.version" size="small">
+          <el-radio-button :label="2"></el-radio-button>
+          <el-radio-button :label="3"></el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <!--SNMP V3 setting-->
+      <template v-if="account.params.version == 3">
+        <el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
+          <el-input size="small" v-model="account.params.user"/>
+        </el-form-item>
+        <el-form-item :label="$t('project.module.securityLevel')" prop="params.securityLevel">
+          <el-radio-group v-model="account.params.securityLevel" size="small">
+            <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-form-item :label="$t('login.password')" prop="params.password" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
+          <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
+        </el-form-item>
+        <el-form-item :label="$t('project.module.authProtocol')" prop="params.authProtocol" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
+          <el-radio-group v-model="account.params.authProtocol" 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-form-item :label="$t('project.module.privProtocol')" prop="params.privProtocol" v-if="account.params.securityLevel == 'authPriv'">
+          <el-radio-group v-model="account.params.privProtocol" 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-form-item :label="$t('project.module.privPassword')" prop="params.privPassword" v-if="account.params.securityLevel == 'authPriv'">
+          <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.privPassword"/>
+        </el-form-item>
+      </template>
+    </template>
   </el-form>
-    </div>
 </template>
 
 <script>
@@ -51,16 +99,14 @@ export default {
       account:{type:Object},
       isAllowedChangeProtocol:{type:Boolean,default:true}
     },
-    created() {
-    },
     data(){
       return {
         rules:{
-          user:[
+          "params.user": [
-            { required: true, message:this.$t('validate.required'),trigger: 'blur'}
+            { required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
-          port:[
+          port: [
-            {required:true,message:this.$t('validate.required'),trigger: 'blur'},
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
             { validator: port, trigger: 'blur'}
           ],
         },
@@ -121,7 +167,7 @@ export default {
       validateAccount:function(){
         this.validateResult=false;
         this.$refs.accountForm.validate((valid) => {
-          this.$emit("setValidateResult",valid);
+          this.$emit("setValidateResult", valid, this.account.protocol);
         });
       },