feat:asset-account配置增加telnet协议

1.asset-account配置增加telnet协议
2.dashboard chart面板删除按钮删除逻辑调整

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

@@ -416,7 +416,7 @@ export default {
       return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
     },
     // 删除图表
-    removeChart(chartId) {
+    removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
       const chart = this.dataList.find(item => item.id === chartId);
       if (chart) {
         this.$emit('on-remove-chart', chart);

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

@@ -258,6 +258,12 @@ const en = {
       loginType:'Login type',//'登录类型'
       password:'Password',//'密码'
       ssh:'SSH key',//'SSH-Key'
+      protocol:"Protocol",
+      sshProtocol:"SSH",
+      telnetProtocol:"Telnet",
+      userTip:"UserTip",
+      passwordTip:"PasswordTip",
+      reloginPasswordTip:"Relogin",
       account:'User name',//'用户名'
       port:'Port',//'端口'
       upload:'Upload',//'上传'
@@ -475,7 +481,7 @@ const en = {
       param: 'Parameter',//"参数"
       path: 'Path',//"路径"
       asset: 'Device',//"设备"
-      lastUpdate: 'Last update time',//"最后更新时间"
+      lastUpdate: 'Last Reply',//"最后更新时间"
       moduleParameter: 'Module',//"组件参数"
       addGraph: 'View Graph', //添加图标
       element: 'Element',

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

@@ -386,7 +386,7 @@
           </div>
           <div class="line-100 asset-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"></account-config-box>
+            <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"></account-config-box>
           </template>
 
           <template v-if="!pageObj.id">
@@ -438,9 +438,13 @@
           accounts: [{
             id: '',
             authType: 1,
+            protocol:'SSH',
             user: '',
             pwd: '',
             port: '',
+            userTip:"",
+            passwordTip:'',
+            reloginPasswordTip:''
           }],
           exporter: 0
         },
@@ -600,7 +604,8 @@
         },
         formData:null,
         module:{},
-        accountValideResult:true
+        accountValideResult:true,
+        changeProtocolSwitch:true,
       }
     },
     /*computed: {
@@ -635,9 +640,13 @@
               id: '',
               user:"",
               authType:1,
+              protocol:'SSH',
               pwd:"",
               port:'',
               privateKey:'',
+              userTip:"",
+              passwordTip:'',
+              reloginPasswordTip:''
             });
           }
         }
@@ -645,6 +654,12 @@
       'assetData.exporter':function(n,o){
         if(parseInt(n) === 1){
           this.accountSwitch=true;
+          this.changeProtocolSwitch=false;
+          for(let account of this.assetData.accounts){
+            account.protocol='SSH';
+          }
+        }else{
+          this.changeProtocolSwitch=true;
         }
       }
     },
@@ -817,9 +832,13 @@
           accounts: [{
             id: '',
             authType: 1,
+            protocol: 'SSH',
             user: '',
             pwd: '',
             port: '',
+            userTip:"",
+            passwordTip:'',
+            reloginPasswordTip:''
           }]
         };
         this.assetType = '';

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

@@ -1,7 +1,7 @@
 <template>
     <div>
       <el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
-          <!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-if="isEdit">
+          <!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-show="isEdit">
             <button type="button" @click="changeLoginType(1)" id="account-logintype-1"
                     class="nz-btn nz-btn-size-small float-left"
                     :class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
@@ -13,32 +13,55 @@
               <span>{{$t('asset.createAssetTab.ssh')}}</span>
             </button>
           </div>-->
-        <div class="nz-tab" v-if="isEdit">
+        <div class="nz-tab" v-show="isEdit">
-          <div class="nz-tab-item-box" @click="changeLoginType(1)" id="account-logintype-1">
+          <div class="nz-tab-item-box" @click="changeProtocolType('SSH')" id="account-logintype-1">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 1}">{{$t('asset.createAssetTab.password')}}</div>
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SSH','unclickable':!isAllowedChangeProtocol&&account.protocol == 'TELNET'}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
           </div>
-          <div @click="changeLoginType(2)" class="nz-tab-item-box">
+          <div @click="changeProtocolType('TELNET')" class="nz-tab-item-box">
-            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 2}">{{$t('asset.createAssetTab.ssh')}}</div>
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET','unclickable':!isAllowedChangeProtocol&&account.protocol == 'SSH'}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
           </div>
         </div>
-        <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-if="!isEdit">
+        <el-form-item :label="$t('asset.createAssetTab.protocol')" size="mini" v-show="!isEdit">
-          <div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>
+          <div class="right-box-form-content-txt" >{{account.protocol=='SSH'?$t('asset.createAssetTab.sshProtocol'):$t('asset.createAssetTab.telnetProtocol')}}</div>
         </el-form-item>
+<!--        <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-show="!isEdit">-->
+<!--          <div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>-->
+<!--        </el-form-item>-->
         <el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
-          <el-input autocomplete="new-password" size="small" v-model="account.user" v-if="isEdit"/>
+          <el-input autocomplete="new-password" size="small" v-model="account.user" v-show="isEdit"/>
-          <div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
+          <div class="right-box-form-content-txt" v-show="!isEdit">{{account.user}}</div>
         </el-form-item>
-        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" v-if="isEdit">
+        <el-form-item :label="$t('asset.createAssetTab.loginType')" prop="loginType" v-show="account.protocol == 'SSH'">
+          <el-radio-group v-model="account.authType" size="small">
+            <el-radio-button label="1">{{$t('asset.createAssetTab.password')}}</el-radio-button>
+            <el-radio-button label="2">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="isEdit&&(account.authType==1 || account.protocol == 'TELNET')" >
           <el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
         </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" v-if="isEdit"/>
+          <el-input size="small" v-model.number="account.port" v-show="isEdit"/>
-          <div class="right-box-form-content-txt" v-if="!isEdit">{{account.port}}</div>
+          <div class="right-box-form-content-txt" v-show="!isEdit">{{account.port}}</div>
         </el-form-item>
-        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file" v-if="isEdit">
+        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="isEdit&&(account.authType==2 && account.protocol == 'SSH')" prop="file">
           <el-input  rows="4" type="textarea" placeholder="" v-model="account.privateKey" size="small"></el-input>
         </el-form-item>
       </el-form>
+
+      <div class="telnet-option" v-show="isEdit && account.protocol=='TELNET'">
+        <div class="telnet-option_title clickable" @click="isShowTelnetOption">login option<i style="font-size: 12px;"  :class="{'el-icon-arrow-left':!showTelnetOption,'el-icon-arrow-down':showTelnetOption}"></i></div>
+        <el-form-item :label="$t('asset.createAssetTab.userTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
+          <el-input type="text" size="small" v-model="account.userTip" />
+        </el-form-item>
+        <el-form-item :label="$t('asset.createAssetTab.passwordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
+          <el-input type="text" size="small" v-model="account.passwordTip" />
+        </el-form-item>
+        <el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
+          <el-input type="text" size="small" v-model="account.reloginPasswordTip" />
+        </el-form-item>
+      </div>
+
     </div>
 </template>
 
@@ -48,7 +71,8 @@ export default {
     name: "accountConfig",
     props:{
       account:{type:Object},
-      isEdit:{type:Boolean,default:true}
+      isEdit:{type:Boolean,default:true},
+      isAllowedChangeProtocol:{type:Boolean,default:true}
     },
     created() {
     },
@@ -63,7 +87,7 @@ export default {
             { validator: port, trigger: 'blur'}
           ],
         },
-        uploadTip:''
+        showTelnetOption:false
       }
     },
     methods:{
@@ -72,25 +96,43 @@ export default {
           id:null,
           user:"",
           authType:1,
+          protocol:'SSH',
           pwd:"",
           port:null,
           privateKey:null,
-          uploadFile:null
+          userTip:"",
+          passwordTip:'',
+          reloginPasswordTip:''
         }
       },
-      changeLoginType:function(loginType){
+      isShowTelnetOption:function(){
-        this.account.authType=loginType;
+        this.showTelnetOption=!this.showTelnetOption;
-        if(loginType == 1){//密码登录
+        if(!this.showTelnetOption){
-          this.clearPrivateKey();
+          this.account.userTip="";
+          this.account.passwordTip="";
+          this.account.reloginPasswordTip="";
         }
-        if(loginType == 2){//公钥登录
+      },
-          this.account.pwd='';
+      telnetOptionState:function(){
+        if(this.account.userTip != ''|| this.account.passwordTip != '' || this.account.reloginPasswordTip != ''){
+          this.showTelnetOption=true;
+        }
+      },
+      changeProtocolType:function(protocolType){
+        if(this.isAllowedChangeProtocol){
+          this.account.protocol=protocolType;
+        }else{
+          return ;
         }
       },
       clearPrivateKey:function(){
         this.account.privateKey=null;
       },
-
+      clearTelnetOptions:function(){
+        this.account.userTip='';
+        this.account.passwordTip='';
+        this.account.reloginPasswordTip='';
+      },
       handleChange(file,fileList) {
         if (fileList.length > 0) {
           this.uploadFileList = [fileList[fileList.length - 1]]
@@ -111,11 +153,19 @@ export default {
         immediate:true,
         deep:true,
         handler(n,o){
-          // if (n && n.id) {
+          if(n.authType == 1){//密码登录
-          //   this.account=n;
+            this.clearPrivateKey();
-          // } else {
+          }
-          //   this.resetData();
+          if(n.authType == 2){//公钥登录
-          // }
+            this.account.pwd='';
+          }
+          if(n.protocol == 'SSH'){
+            this.showTelnetOption=false;
+            this.clearTelnetOptions();
+          }else{
+            this.clearPrivateKey();
+          }
+          this.telnetOptionState();
         }
       }
     }
@@ -143,4 +193,21 @@ export default {
     height: 40px;
   }
   /*去除上传文件动画end*/
+  .telnet-option{
+    position: relative;
+  }
+  .telnet-option:before{
+    content: "";
+    display: inline-block;
+    width: 79.9%;
+    height: 1px;
+    background-color: lightgrey;
+    vertical-align: middle;
+    margin-bottom: 18px;
+  }
+  .telnet-option .telnet-option_title{
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 18px;
+  }
 </style>

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

@@ -350,10 +350,12 @@
         }).then(() => {
           this.$delete("panel/"+this.panelId+"/charts?ids="+cloneChart.id).then(response => {
             if (response.code === 200) {
+              if(this.$refs.chartForm){
+                this.$refs.chartForm.resetFields();//清空表单
+              }
               this.esc();
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
               //this.getTableData();//删除相关图表后，刷新面板数据---调用panel的方法刷新
-              this.$refs.chartForm.resetFields();//清空表单
               this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
               this.$emit('on-delete-success');
             } else {

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

@@ -352,7 +352,7 @@
         this.$refs.addChartModal.editData(data, this.showPanel.id);
       },
       // 移除图表:弹出确认框询问
-      removeData(data) {
+      removeData(data,from) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
@@ -361,11 +361,18 @@
           this.$delete("panel/" + data.panelId + "/charts?ids=" + data.id).then(response => {
             if (response.code === 200) {
               this.$message({
-                duration: 1000,
+                duration: 2000,
                 type: 'success',
                 message: this.$t("tip.deleteSuccess")
               });
-              this.getTableData(); //删除相关图表后，刷新面板数据
+                let chartList=this.$refs.chartList.dataList;
+                for (let i =0;i< chartList.length;i++){
+                  if(chartList[i].id === data.id){
+                    chartList.splice(i,1);
+                    break;
+                  }
+                }
+                // this.getTableData(); //删除相关图表后，刷新面板数据
             } else {
               this.$message.error(response.msg);
             }

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

@@ -145,7 +145,7 @@
                
               <span :title="$t('overall.edit')" @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
             </div>
-<!--            <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
+            <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
             <span v-else-if="item.prop == 'state'" >
               <el-popover placement="right" width="50" trigger="hover" :content="(scope.row.state == '1'?'up':'down')+'['+(scope.row.lastUpdate&&scope.row.lastUpdate!=''?(new Date(scope.row.lastUpdate).getHours()+':'+new Date(scope.row.lastUpdate).getMinutes()):'--')+']'">
                 <div slot="reference" style="width: 20px">
@@ -222,7 +222,7 @@
 <!--          </button>-->
         </div>
       </div>
-      <div class="table-header-inner" @click="clearSelectedMetrics"><span><i class="nz-icon nz-icon-duoxuan " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
+      <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
       <el-table
         v-loading="queryEdpLoading"
         :data="showTableData"
@@ -257,7 +257,8 @@
               </div>
               <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
             </el-popover>
-            <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>
+            <span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
+<!--            <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>-->
           </template>
         </el-table-column>
         <el-table-column
@@ -373,11 +374,13 @@
             label: this.$t("alert.list.state"),
             prop: 'state',
             show: true,
-          },{
+          },
+          {
             label: this.$t("project.endpoint.lastUpdate"),
             prop: 'lastUpdate',
-            show: false,
+            show: true,
-          }, {
+          },
+          {
             label: this.$t('config.account.option'),
             prop: 'option',
             show: true,
@@ -1135,8 +1138,15 @@
               this.endpointQueryTabData=JSON.parse(JSON.stringify(results));
               for (let result of results){
                 // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
-                let temp=result.metric.__name__;
+                let metricName=result.metric.__name__;
-                let simpleTemp=result.metric.__name__;//显示简略信息：隐藏same labels后的结果
+                let temp=metricName;
+                let simpleTemp=metricName;//显示简略信息：隐藏same labels后的结果
+                let metricColor="";
+                let bracketsColor="#eb7b18";//#eb7b18
+                let labelColor="#65bbd1";//#66d9ef
+                let valueColor="#61c261";//#74e680
+                let colorTemp=`<span style="${metricColor}">${metricName}</span>`;
+                let colorSimpleTemp=`<span>${metricName}</span>`;
                 let metricTip={};
                 let queryInfos=(this.elementMetricDatas.filter((item)=>{
                   return item.metric===temp;
@@ -1149,20 +1159,37 @@
                 delete result.metric.__name__;
                 temp+="{";
                 simpleTemp+="{";
-                for (let key in result.metric){
+                colorTemp+=`<span style="color: ${bracketsColor}">{</span>`;
+                colorSimpleTemp+=`<span style="color: ${bracketsColor}">{</span>`;
+                let keys=Object.keys(result.metric);
+                for (let index in keys){
+                  let key=keys[index];
                   temp+=key +"='"+result.metric[key]+"',";
+                  colorTemp +=`<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
                   if(!this.sameLabels.some((i)=>{return i == key})){
                     simpleTemp+=key +"='"+result.metric[key]+"',";
+                    colorSimpleTemp+=`<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
                   }
                 }
-                temp=temp.charAt(temp.length-1) == ","?temp.substr(0,temp.length-1):temp;
+                temp=temp.substr(0,temp.length-1);
-                simpleTemp=simpleTemp.charAt(simpleTemp.length-1) == ","?simpleTemp.substr(0,simpleTemp.length-1):simpleTemp;
+                simpleTemp=simpleTemp.substr(0,simpleTemp.length-1);
+                colorTemp=colorTemp.substr(0,colorTemp.length-1);
+                colorSimpleTemp=colorSimpleTemp.substr(0,colorSimpleTemp.length-1);
+
                 temp+="}";
                 simpleTemp+="}";
+                colorTemp+=`<span style="color: ${bracketsColor}">}</span>`;
+                colorSimpleTemp+=`<span style="color: ${bracketsColor}">}</span>`;
                 if(!/.+\{.+\}/.test(simpleTemp)){
                   simpleTemp=simpleTemp.substr(0,simpleTemp.length-2);
                 }
-                let edpQueryData={element:temp,simpleElement:simpleTemp,value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
+
+                if(!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)){
+                  let metricReg=new RegExp("<span.*?>"+metricName+"<\/span>")
+                  colorSimpleTemp=metricReg.exec(colorSimpleTemp)[0];
+                }
+
+                let edpQueryData={element:temp,simpleElement:simpleTemp,colorElement:colorTemp,colorSimpleElement:colorSimpleTemp, value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
                 this.showTableData.push(edpQueryData);
               }
               this.showTableDataCopy=JSON.stringify(this.showTableData);
@@ -1301,6 +1328,7 @@
         axios.all(axiosArr).then(res =>{
           res.forEach((response,promIndex)=>{
             if (response.status == 200) {
+              if(response.data.status == 'success'){
                 let queryData=response.data.data.result[0];
                 if(queryData){
                   let chartData={
@@ -1340,14 +1368,20 @@
                   });
                   this.chartDatas.push(chartData);
                 }
+              }else{
+                this.$message.error(response.data.error)
+                console.error(response.data)
+              }
             }
           })
             this.$nextTick(()=>{
+              if(this.graphChart){
                 this.graphChart.clear();
                 this.chartOptions.color=this.bgColorList;
                 this.chartOptions.series=this.chartDatas;
                 this.graphChart.setOption(this.chartOptions);//创建图表
                 this.$refs.chartScrollbar.update();
+              }
             });
         })
       },