Merge remote-tracking branch 'origin/codeCheck' into codeCheck

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

@@ -298,8 +298,9 @@ export default {
                           let t_date = new Date(dpsItem[0] * 1000);
                           let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
                           tableData.push({//表格数据
-                            label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                            // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                            metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                            // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                            element:{element:host,alias:alias},
                             time: timeTmp,//采集时间
                             value: dpsItem[1],//数值
                           });
@@ -378,6 +379,7 @@ export default {
           }).catch((error) => {
             if (error) {
               this.$message.error(error.toString());
+              console.error(error)
             }
           });
         });
@@ -395,9 +397,12 @@ export default {
           let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
             let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
             let reg=new RegExp(label+'=".+?"')
-            let find=legend.match(reg)[0];
+            let value=null;
-            let value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            if(reg.test(legend)){
-            return value;
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
           })
           return labelValue
         }else{

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

@@ -26,9 +26,14 @@
         </div>
         <div class="mt-10" v-cloak  v-show="firstShow">
             <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
-                <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
+<!--                <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
-                <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
+<!--                <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
-                <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
+              <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
+                <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
+                  <template slot-scope="scope">
+                    {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
+                  </template>
+                </el-table-column>
                 <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
             </el-table>
         </div>
@@ -43,9 +48,14 @@
               </div>
             </div>
                 <el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border  tooltip-effect="light" v-scrollBar:el-table>
-                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
+<!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
-                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
+<!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
-                    <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
+                  <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
+                  <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
+                    <template slot-scope="scope">
+                      {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
+                    </template>
+                  </el-table-column>
                     <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
 
                 </el-table>
@@ -116,17 +126,24 @@ export default {
             firstShow: false, // 默认不显示操作按钮,
             divFirstShow:false,
             //tableLoading: false,
-            columns: [{
+            columns: [
-                title: 'metric',
+            //   {
-                key: 'metric',
+            //     title: 'metric',
-                width: 200,
+            //     key: 'metric',
-                sortable: true,
+            //     width: 200,
-            }, {
+            //     sortable: true,
-                title: 'Label', //tag
+            // }, {
-                key: 'name',
+            //     title: 'Label', //tag
-                minWidth: 200,
+            //     key: 'name',
-                sortable: true,
+            //     minWidth: 200,
-            }, {
+            //     sortable: true,
+            // }
+              {
+                title:'Element',
+                key:'element',
+                sortable: true
+              }
+            , {
                 title: '采集时间',
                 key: 'time',
                 width: 160,
@@ -300,8 +317,9 @@ export default {
             this.seriesItemScreen = [];
             for(let i=0;i<8;i++){
               this.seriesItemScreen.push({//表格数据
-                label: '',//label
+                // label: '',//label
-                metric: '',//metric列
+                // metric: '',//metric列
+                element:'',
                 time: '',//采集时间
                 value: '',//数值
               });

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -244,7 +244,7 @@
         if (this.data.type === 'line' || this.data.type === 'bar' || this.data.type === 4) {
           return true;
         }
-        return false;
+         return false;
       },
   */
     },
@@ -254,23 +254,114 @@
         this.divFirstShow = showDiv;
       },
       clickLegend(legendName,index){
-        if (this.echartStore) {
+        // if (this.echartStore) {
-          this.echartStore.dispatchAction({
+        //   this.echartStore.dispatchAction({
-            type: 'legendToggleSelect',
+        //     type: 'legendToggleSelect',
-            name: legendName
+        //     name: legendName
-          });
+        //   });
-          let isGreyTmp = this.isGrey[index];
+          // let isGreyTmp = this.isGrey[index];
-          this.$set(this.isGrey, index, !isGreyTmp);
+          // this.$set(this.isGrey, index, !isGreyTmp);
+        // }
+
+        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+        let curIsGrey=this.isGrey[index];
+        if(this.echartStore){
+          this.legendList.forEach((item,i)=>{
+            let isGrey = this.isGrey[i];
+            if(index != i){
+              if(!curIsGrey && !isGrey){
+                this.echartStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }else if(!curIsGrey && isGrey){
+                this.echartStore.dispatchAction({
+                  type: 'legendSelect',
+                  name: item.name
+                });
+              }else{
+                this.echartStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }
+            }else {
+              this.echartStore.dispatchAction({
+                type: 'legendSelect',
+                name: item.name
+              });
+            }
+          })
+          this.isGrey.forEach((item,i)=>{
+            if(index != i){
+              if(!curIsGrey && !item){
+                this.$set(this.isGrey, i, true);
+              }else if(!curIsGrey && item){
+                this.$set(this.isGrey, i, false);
+              }else{
+                this.$set(this.isGrey, i, true);
+              }
+            }else{
+              if(item === true){
+                this.$set(this.isGrey, i, false);
+              }
+            }
+          })
         }
       },
       clickScreenLegend(legendName,index){
-        if (this.echartModalStore) {
+        // if (this.echartModalStore) {
-          this.echartModalStore.dispatchAction({
+        //   this.echartModalStore.dispatchAction({
-            type: 'legendToggleSelect',
+        //     type: 'legendToggleSelect',
-            name: legendName
+        //     name: legendName
-          });
+        //   });
-          let isGreyTmp = this.isGreyScreen[index];
+        //   let isGreyTmp = this.isGreyScreen[index];
-          this.$set(this.isGreyScreen, index, !isGreyTmp);
+        //   this.$set(this.isGreyScreen, index, !isGreyTmp);
+        // }
+        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+        let curIsGrey=this.isGreyScreen[index];
+        if(this.echartModalStore){
+          this.screenLegendList.forEach((item,i)=>{
+            let isGrey = this.isGreyScreen[i];
+            if(index != i){
+              if(!curIsGrey && !isGrey){
+                this.echartModalStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }else if(!curIsGrey && isGrey){
+                this.echartModalStore.dispatchAction({
+                  type: 'legendSelect',
+                  name: item.name
+                });
+              }else{
+                this.echartModalStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }
+            }else {
+              this.echartModalStore.dispatchAction({
+                type: 'legendSelect',
+                name: item.name
+              });
+            }
+          })
+          this.isGreyScreen.forEach((item,i)=>{
+            if(index != i){
+              if(!curIsGrey && !item){
+                this.$set(this.isGreyScreen, i, true);
+              }else if(!curIsGrey && item){
+                this.$set(this.isGreyScreen, i, false);
+              }else{
+                this.$set(this.isGreyScreen, i, true);
+              }
+            }else{
+              if(item === true){
+                this.$set(this.isGreyScreen, i, false);
+              }
+            }
+          })
         }
       },
       clearData(){
@@ -406,6 +497,9 @@
               //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
               let str = `<div   style='width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
               params.forEach((item, i) => {
+                let tip=legend.find((element)=>{
+                  return element.name == item.seriesName;
+                })
                 if(i===0){
                   let t_date = new Date(item.data[0]);
                   str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
@@ -446,7 +540,7 @@
                  */
                 str += `<div style='max-width:510px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
 
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName}: `;
+                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip.alias?tip.alias:tip.name}: `;
                 str +=`</div>`;
                 str += `<div style='max-width:90px;min-width:20px;float:right;text-align:right;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
                 str +=val;

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

@@ -0,0 +1,10 @@
+export function resetZIndex(e){
+  let popId=e.target.getAttribute('aria-describedby');//这里获取的属性 在包含slot='reference'
+  if(!popId){
+    popId=e.target.parentNode.getAttribute('aria-describedby');
+  }
+  let pop=document.getElementById(popId);
+  setTimeout(function(){
+    pop.style.zIndex=999999;
+  },100)
+}

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

@@ -85,6 +85,8 @@ const en = {
         chartId:"ID",
         chartName:"Chart Name",
         type:"Type",
+        legend:'Legend',
+        legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
         typeVal:{
           line:{
             label:'Line Chart' //"曲线图"
@@ -104,6 +106,7 @@ const en = {
       chartTableColumn:{
         metric:'Metric', //'指标'
         label:'Label', //'标签'
+        element:'Element',
         time:'Time', //'时间'
         value:'Value', //'值'
       },

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

@@ -90,6 +90,7 @@ export default {
       clearPrivateKey:function(){
         this.account.privateKey=null;
       },
+
       handleChange(file,fileList) {
         if (fileList.length > 0) {
           this.uploadFileList = [fileList[fileList.length - 1]]

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

@@ -38,7 +38,7 @@
                       <div class="inner-col right">
                         <el-popover placement="right"  width="50" trigger="hover" :content="(item.state == 1?'up':'down')+'['+(item.lastUpdate&&item.lastUpdate!=''?(new Date(item.lastUpdate).getHours()+':'+new Date(item.lastUpdate).getMinutes()):'--')+']'" >
                           <div slot="reference" style="width: 20px">
-                            <div @mouseover="resetZIndex" :class="{'active-icon green':item.state == 1,'active-icon red':item.state == 0}"></div>
+                            <div @mouseover="resetZIndex($event)" :class="{'active-icon green':item.state == 1,'active-icon red':item.state == 0}"></div>
                           </div>
                         </el-popover>
                       </div>
@@ -59,6 +59,7 @@
 </template>
 
 <script>
+  import {resetZIndex} from '../../common/js/common'
     export default {
       name: "endpointStatusPop",
       props:{
@@ -146,13 +147,7 @@
         esc:function(){
           this.popBox.show=false;
         },
-        resetZIndex:function(e){
+        resetZIndex,
-          let popId=e.target.parentElement.getAttribute('aria-describedby');
-          let pop=document.getElementById(popId);
-          setTimeout(function(){
-            pop.style.zIndex=999999;
-          },100)
-        },
         atShowPop:function(){
           this.getEndpointDatas();
         },

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

@@ -193,14 +193,23 @@
       </el-col>
 
     </el-row>
-    <el-form-item label="legend" prop="legend" >
+    <el-form-item prop="legend" >
-      <el-input v-model="elementInfo.legend" type="text" size="small"></el-input>
+      <el-row :gutter="4">
+        <el-col :span="4">
+          {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+          <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
+            <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="resetZIndex"></i>
+          </el-popover>
+        </el-col>
+        <el-col :span="20"><el-input v-model="elementInfo.legend" type="text" size="small"></el-input></el-col>
+      </el-row>
+<!--      <el-input v-model="elementInfo.legend" type="text" size="small"></el-input>-->
     </el-form-item>
   </el-form>
 </template>
 <script>
 import bus from '../../../libs/bus';
-
+import {resetZIndex} from "../../common/js/common";
 export default {
   name: 'chartTag',
   props: {
@@ -598,7 +607,8 @@ export default {
       if(val===1){
         this.elementInfo.expression='';
       }
-    }
+    },
+    resetZIndex,
   },
   computed: {
     metricShowList() {