Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="move" unicode="&#58943;" d="M861.0304 605.184a32.3072 32.3072 0 0 0-23.2448 10.24l-73.5232 78.7968-73.5232-78.7456a31.9488 31.9488 0 1 0-46.4384 43.8784L742.4 763.904a32.3072 32.3072 0 0 0 23.2448 10.24 30.208 30.208 0 0 0 23.2448-10.24l98.048-104.4992A32.3072 32.3072 0 0 0 885.76 614.4a52.224 52.224 0 0 0-24.5248-9.0112zM762.88-15.360000000000014a30.208 30.208 0 0 0-23.2448 10.24l-98.048 104.4992a31.9488 31.9488 0 1 0 46.5408 43.9808l73.5232-78.6944L835.2256 143.36a31.9488 31.9488 0 0 0 46.4384-43.8784L783.616-5.1200000000000045c-2.56-6.4512-11.6224-10.24-20.48-10.24zM762.88 36.1472a31.9488 31.9488 0 0 0-32.256 32.256V695.5008a32.256 32.256 0 1 0 64.512 0v-627.0976a31.9488 31.9488 0 0 0-32.256-32.256zM510.0544 521.3184H170.7008a32.256 32.256 0 0 0 0 64.512h339.3536a31.9488 31.9488 0 0 0 32.256-32.256 32.768 32.768 0 0 0-32.256-32.256zM510.0544 358.70719999999994H170.7008a32.256 32.256 0 0 0 0 64.512h339.3536a31.9488 31.9488 0 0 0 32.256-32.256 32.768 32.768 0 0 0-32.256-32.256zM508.7744 172.90239999999994H169.4208a32.256 32.256 0 1 0 0 64.512h339.3536a31.9488 31.9488 0 0 0 32.256-32.256 32.768 32.768 0 0 0-32.256-32.256z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="sync" unicode="&#60055;" d="M293.312 208a32 32 0 0 0-31.296 38.816C287.488 363.39200000000005 392.64 448 512 448a256.96 256.96 0 0 0 220.768-126.592 32 32 0 1 0-55.168-32.384A192.768 192.768 0 0 1 512 384c-89.504 0-168.352-63.424-187.456-150.816a32 32 0 0 0-31.232-25.184zM512-64a256.288 256.288 0 0 0-223.072 130.592 32 32 0 1 0 55.744 31.392A192.352 192.352 0 0 1 512 0c89.504 0 168.352 63.424 187.456 150.816a32 32 0 0 0 62.496-13.632C736.512 20.607999999999947 631.36-64 512-64zM288-32a32 32 0 0 0-32 32v96a32 32 0 0 0 32 32h96a32 32 0 1 0 0-64h-64v-64a32 32 0 0 0-32-32zM736 256h-96a32 32 0 1 0 0 64h64v64a32 32 0 1 0 64 0v-96a32 32 0 0 0-32-32zM860.448 87.64800000000002a32 32 0 0 0-15.424 60.032A160.256 160.256 0 0 1 928 288a159.552 159.552 0 0 1-58.912 123.968 32 32 0 0 0-10.56 33.472c3.744 13.184 5.472 24.16 5.472 34.56 0 70.592-57.408 128-128 128-6.912 0-14.24-0.736-23.104-2.368a31.872 31.872 0 0 0-34.592 17.536C635.104 712.512 546.848 768 448 768c-141.152 0-256-114.848-256-256l0.416-7.264a31.936 31.936 0 0 0-13.76-27.04A192.224 192.224 0 0 1 96 320c0-63.424 31.328-122.72 83.744-158.624a32 32 0 0 0-36.128-52.832A256.16 256.16 0 0 0 32 320a256.16 256.16 0 0 0 96.096 199.776C132.224 692.64 274.144 832 448 832a317.376 317.376 0 0 0 277.056-160.384C728.768 671.8720000000001 732.448 672 736 672c105.888 0 192-86.112 192-192 0-10.464-0.992-20.96-3.136-32.128A223.168 223.168 0 0 0 992 288a224.128 224.128 0 0 0-116.192-196.384 31.68 31.68 0 0 0-15.36-3.968zM64 288a32 32 0 0 0-32 32c0 141.152 114.848 256 256 256a32 32 0 1 0 0-64c-105.888 0-192-86.112-192-192a32 32 0 0 0-32-32zM736 480a32 32 0 0 0-32 32c0 141.152-114.848 256-256 256a32 32 0 1 0 0 64c176.448 0 320-143.552 320-320a32 32 0 0 0-32-32z"  horiz-adv-x="1024" />
 
     

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

@@ -277,6 +277,9 @@ li{
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
+.gray-filter {
+  filter: opacity(50%);
+}
 .nz-btn-group .nz-btn:last-child:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -394,6 +397,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 +405,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 +1084,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-alert-list.vue

@@ -481,6 +481,8 @@ export default {
         immediate:true,
         handler(n,o){
           this.data=Object.assign({},n)
+          this.data.resizable=true;
+          this.data.editable=true;
         }
       },
       panelId:{

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

@@ -253,7 +253,7 @@ const en = {
       contentTitle:'Nezha Management System',
       traffic: 'Traffic',
       asset:{
-        title:'Asset',
+        title:'Assets',
         assetType:'Asset type',
         modelStat:'Model',
         dcStat:'Data center',
@@ -275,16 +275,16 @@ const en = {
         },
       },
       project:{
-        project:'Project',
+        project:'Projects',
         name:'Name',
         module:'Module',
         endpoint:'Endpoint',
       },
       module: {
-        module: "Module",
+        module: "Modules",
       },
       endpoint: {
-        endpoint: "Endpoint",
+        endpoint: "Endpoints",
       },
       dataCenter:{
         dataCenter:'Data center',
@@ -292,7 +292,7 @@ const en = {
         promServer:'Prom server',
       },
       alert:{
-        alertMessage: 'Alert message',
+        alertMessage: 'Alert messages',
         level:'Level',
         alertRule:'Alert rule',
         ruleNum:'Rule num',
@@ -453,9 +453,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/pagination.vue

@@ -182,6 +182,7 @@ export default {
   .pagination .el-pagination {
     max-height: 42px;
     padding-right: 0;
+    overflow-x: hidden;
   }
   .pagination-size-select .el-input--mini .el-input__inner{
     height: 20px;

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);
         });
       },
 

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

@@ -74,9 +74,6 @@
                     <template slot="optionZone">
                       <button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
                         <i class="nz-icon nz-icon-create-square"></i></button>
-                      <!--<div class="export-left-btn" @click.stop="tagShow('showAdd')">
-                        <i class="nz-icon nz-icon-create-square" :title="$t('overall.createAsset')" ></i>
-                      </div>-->
                     </template>
                   </export-excel>
                 </div>
@@ -122,7 +119,6 @@
                     <div v-if="item.prop=='state'">
                       <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
                     </div>
-        <!--            :content="scope.row.pingRtt ? (scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'['+ scope.row.pingRtt+'ms'+']':(scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'[unreachable]'"-->
               <div v-if="item.prop == 'pingStatus'">
                 <el-popover
                   placement="right"
@@ -136,41 +132,15 @@
               </div>
               <template v-if="item.prop=='Module'">
                 <span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
-                <!--<template v-if="scope.row.moduleNum > 0" >
-                  <endpoint-status-pop :asset-id="scope.row.id" :ref="'endpointPop' + scope.row.id">
-                    <template v-slot:optionZone>
-                    <span class="clickable">{{scope.row.endpointNum}}</span>
-                  </template>
-                  </endpoint-status-pop>
-                  <module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
-                    <template v-slot:optionZone>
-  &lt;!&ndash;                    <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>&ndash;&gt;
-                        <span class="clickable">{{scope.row.moduleNum}}</span>
-                    </template>
-                  </module-list-pop>
-                </template>
-  &lt;!&ndash;              <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button>&ndash;&gt;
-                <span v-else class="unclickable">{{scope.row.endpointNum}}</span>-->
               </template>
               <template v-if="item.prop=='Alert'">
                 <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
               </template>
               <div v-if="item.prop=='dataCenter'">
-  <!--              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left"  @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
-  <!--                <template v-slot:optionZone>-->
-  <!--&lt;!&ndash;                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>&ndash;&gt;-->
-  <!--                  <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
-  <!--                </template>-->
-  <!--              </idc-config-box>-->
                 <span  >{{scope.row.idc.name}}</span>
               </div>
               <template v-if="item.prop=='cabinet'">
-  <!--              <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='&#45;&#45;'" ref="cabinetConfigBox"  placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))"  @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">-->
-  <!--&lt;!&ndash;                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>&ndash;&gt;-->
-  <!--                <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>-->
-  <!--              </cabinet-config-box>-->
                 <span   v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
-  <!--              <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>-->
                 <span v-else >{{returnData(scope.row.cabinet)}}</span>
               </template>
               <div v-if="item.prop=='model'">
@@ -201,9 +171,15 @@
                   class="el-icon-delete"></i>
                 </span>
                 &nbsp;
-                <span title="CLI" @click="cli(scope.row.id ,scope.row.host,scope.row.accounts)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
+                <el-dropdown trigger="hover" @command="cli">
-                  class="nz-icon nz-icon-cli"></i>
+                  <span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
+                    class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0}"></i>
                   </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item v-for="(account, index) in scope.row.accounts" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+
               </template>
             </template>
           </el-table-column>
@@ -584,20 +560,14 @@
         this.$store.commit('setHeaderTable', data);
         this.tablelable = data;
       },
-      cli(id,host,accounts){
+      cli([id,host,account]){
-        let port = '';
-        let accountId = '';
-        if(accounts && accounts.length>0 && accounts[0].port){
-          port = accounts[0].port;
-          accountId = accounts[0].id;
-        }
         const consoleParam = {
-          id:id,
+          id: id,
-          host:host,
+          host: host,
-          accountId:accountId,
+          accountId: account.id,
-          port:port,
+          port: account.port,
         }
-        this.$store.commit('addConsole',consoleParam);
+        this.$store.commit('addConsole', consoleParam);
         //this.$refs.webSsh.show(id,host,accountId,port);
       },
       jumpToAlertMsg(asset) {

nezha-fronted/src/components/page/dashboard/explore/editor.vue

@@ -4,7 +4,7 @@
     <span class="nz-input-append editor-clear" style="padding-top:8px;display: none" @click="clearContent"><i class="el-icon-circle-close"></i></span>
     <div class="metric-editor-popper" :style="{left:popperPos.left+'px'}">
       <div class="metric-popper-main" v-show="showType&&Object.keys(showSuggestions).length>0">
-          <el-scrollbar style="height: 100%" class="ps-scroll-small" ref="scroll">
+          <el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
             <div v-for="(key, index) in orders" >
               <div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
               <div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
@@ -163,9 +163,31 @@
           this.matchMetric()
         }
       },
-      matchFuncBody:function(){
+      formatContent:function(){
-        let functionReg=/[a-zA-Z_]\w*?\(.*\)/g
 
+        let punctuationReg=/[\{\}\(\)\[\]]/g;
+        this.formatText(punctuationReg,{'color':'#ff7941'})
+
+        let labelKeyReg=/[a-z_]\w*(?=\s*(=|!=|=~|!~))/g
+        this.formatText(labelKeyReg,{'color':'#3274d9'})
+
+        let labelValueReg= /"(?:\\.|[^\\"])*"/g
+        this.formatText(labelValueReg,{'color':'#3eb15b'})
+
+        let metricReg= /([A-Za-z:][\w:]*)\b(?![\(\]{=!",])/g;
+        this.formatText(metricReg,{'color':'#52545c'})
+
+        let rangeReg=/(?<=\[)\b\d+[smdwy]\b(?=\])/ig
+        this.formatText(rangeReg,{'color':'#9954bb'})
+
+      },
+      formatText:function(pattern,style){
+        if(pattern.test(this.content)){
+          let matchs=this.globalMatch(pattern,this.content);
+          matchs.forEach(item=>{
+            this.quill.formatText(item.index,item[0].length,style,'silent')
+          })
+        }
       },
       matchMetric:function(){
         let metricReg=/[a-zA-Z_]\w*?\b\{.*?\}/g
@@ -215,7 +237,7 @@
       queryTypeInfos:function(){
         this.noStyleSuggestions={};
         this.$set(this.noStyleSuggestions,'metrics',this.tempStoreMetric)
-        this.$set(this.noStyleSuggestions,'operators',suggestions.getOperators())
+        // this.$set(this.noStyleSuggestions,'operators',suggestions.getOperators())
         this.$set(this.noStyleSuggestions,'functions',suggestions.getFunctions())
         this.showSuggestions=this.deepClone(this.noStyleSuggestions)
       },
@@ -670,6 +692,7 @@
       queryMetrics:function(){
         if(this.metricList&&this.metricList.length>0){
           this.tempStoreMetric=this.deepClone(this.metricList)
+          this.queryTypeInfos();
         }else{
           this.$get('/prom/api/v1/label/__name__/values').then(response=>{
             if(response.status == 'success'){
@@ -699,10 +722,14 @@
         enter:{
           key:13,
           handler:function(range,content){
+            if(!$temp.showType){
               $temp.showType=false;
               $temp.quill.blur();
               $temp.$emit('on-enter')
               return false;
+            }else{
+              $temp.pickItem();
+            }
           }
         }
       };
@@ -713,6 +740,7 @@
         console.log('quill blur')
       })
       this.quill.on('text-change',function(delta, oldDelta, source){
+        if(source != 'silent'){
           console.log('delta',delta,'oldDelta',oldDelta,'source',source)
           let char='',operation='';
           let oldContent=oldDelta.ops[0].insert.substring(0,oldDelta.ops[0].insert.length-1);
@@ -748,6 +776,8 @@
           $temp.content=$temp.getContent();
           console.log('current content-->',$temp.content)
           $temp.getPosition();
+          $temp.formatContent();
+        }
       })
       this.registerKeydown();
     },
@@ -790,7 +820,7 @@
     box-sizing: border-box;
     border: 1px solid lightgrey;
     height: 100%;
-    max-width: 66%;
+    /*max-width: 66%;*/
     min-width: 200px;
     float: left;
     border-radius: 3px;
@@ -798,6 +828,7 @@
     color: #52545c;
     padding: 5px;
     background-color: white;
+    overflow-x: hidden;
   }
   .metric-editor-popper .metric-popper-desc{
     display: inline-block;

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -286,7 +286,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                 let step=bus.getStep(this.filterTime[0],this.filterTime[1]);
                 promqlInputIndexs.push(index);
                 queryExpression.push(item)
-                requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step='+step))
+                requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step='+step))
               }
             })
             if (requestArr.length > 0) {
@@ -299,8 +299,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
               if (res.length > 0) {
                 res.forEach((response, index) => {
                   let promqlIndex=promqlInputIndexs[index];
-                  if (response.data.status == 'success') {
+                  if (response.data&&response.status == 'success') {
-                    let data = response.data.data.result;
+                    let data = response.data.result;
                     data.forEach((result, i) => {
                       let seriesItem = {
                         name: '',
@@ -338,7 +338,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                     this.$refs['promql-'+promqlIndex][0].setError('')
                   }else{
                     console.log(response)
-                    this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
+                    this.$refs['promql-'+promqlIndex][0].setError(response.error)
                   }
                 })
 
@@ -360,7 +360,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
               let requestArr = [];
               this.expressions.forEach((item, index) => {
                 if (item != '') {
-                  requestArr.push(axios.get('/prom/api/v1/query?query=' + item))
+                  requestArr.push(this.$get('/prom/api/v1/query?query=' + item))
                 }
               })
               if (requestArr.length > 0) {
@@ -372,9 +372,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                 if (res.length > 0) {
                   this.tableData = [];
                   this.tableLabels = [];
+                  console.log(111111111111111111111,res)
                   res.forEach((response, index) => {
-                    if (response.data.status == 'success') {
+                    if (response.data&&response.status == 'success') {
-                      let data = response.data.data.result;
+                      let data = response.data.result;
                       if (data) {
                         data.forEach((result, i) => {
                           let metrics = Object.assign({}, result.metric);

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -3,15 +3,15 @@
       <div class="query-row">
         <div class="query-input">
           <div class="metricBtn">
-            <el-dropdown class="metric-selector">
+            <el-dropdown class="metric-selector" >
               <el-dropdown-menu style="display: none"></el-dropdown-menu>
               <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
               <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue"  slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
             </el-dropdown>
           </div>
-          <div class="inputBox">
+          <div class="inputBox" @click="dropDownVisible=false">
 <!--            <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
-            <editor :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange"></editor>
+            <editor :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
             <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
             <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
           </div>

nezha-fronted/src/components/page/dashboard/explore/suggestions.vue

@@ -57,6 +57,7 @@
     },
   ];
   const funcs=[
+    ...operators,
     {
       insertText: 'abs',
       label: 'abs',

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -40,11 +40,12 @@
                   <el-dropdown-item v-for="item in panelData" :key="item.id+1"
                                     :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
                     <!--{{item.name}}-->
-                    <el-row  :gutter="10" class="panel-list-width panelContent" >
+                    <el-row  :gutter="10" class="panel-list-width" >
-                      <el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
+                      <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-move"></i></el-col>
-                      <el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
+                      <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
+                      <el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
                       <el-col :span="1">&nbsp;</el-col>
-                      <el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
+                      <el-col :span="1"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
                     </el-row>
                   </el-dropdown-item>
                 </draggable>
@@ -940,7 +941,9 @@
 
   .nz-dashboard-picker {
   }
-
+  .move-area:hover{
+    cursor: move;
+  }
 </style>
 <style lang="scss">
   .panel .top-tools input {