From ffcfaff389f9f280c8a92c1587873316f11d56db Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 7 Jul 2020 20:45:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=95=B0=E4=B8=AAbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.asset exporter项在编辑asset时隐藏；
2.module 新增时默认端口161/9100；
3.asset detail feature重复数据；
4.刚进入panel时新增chart时不应该有panel选项；
5.overview 流量图表 处理查询折线数据异常的情况；
6.alert-msg和alert-rule二级的msg表头保持一致；
7.alert-rule detail告警数量 靠左对齐
---
 .../src/components/charts/chart-detail.vue    |  69 +++++----
 .../src/components/charts/chart.scss          |  10 ++
 .../common/bottomBox/tabs/alertMessageTab.vue |   2 +-
 .../src/components/common/header.vue          |   6 +-
 .../components/common/rightBox/moduleBox.vue  |   4 +-
 .../src/components/page/alert/list.vue        |   5 +-
 .../src/components/page/config/dc.vue         |   4 +-
 .../components/page/dashboard/chartBox.vue    |   6 +-
 .../page/dashboard/overview/overview2.vue     | 143 ++++++++++--------
 .../src/components/page/dashboard/panel.vue   |  14 +-
 nezha-fronted/src/store/index.js              |   3 +-
 11 files changed, 144 insertions(+), 122 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index d2f221a75..50b64e3c5 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -75,30 +75,34 @@
 
                       <div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
                         <template v-if="Array.isArray(value) && value.length>0">
-                          <div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div>
-                          <el-table
-                            v-else
-                            class="nz-table asset-info-table"
-                            :data="value"
-                            tooltip-effect="light"
-                            height="100%"
-                            ref="dataTable"
-                            v-scrollBar:el-table="'small'"
-                          >
-                            <el-table-column
-                              :resizable="false"
-                              v-for="(_item, _index) in setLabels(value)"
-                              v-if="_item.show"
-                              :key="`col-${_index}`"
-                              :label="_item.label"
+                          <template v-if="typeof value[0] == 'string'">
+                            <div class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div>
+                          </template>
+                          <template v-else>
+                            <el-table
+                              class="nz-table asset-info-table"
+                              :data="value"
+                              tooltip-effect="light"
+                              height="100%"
+                              ref="dataTable"
+                              v-scrollBar:el-table="'small'"
                             >
-                              <template slot-scope="scope" :column="_item">
-                                <template >
-                                  <span v-html="scope.row[_item.prop]"></span>
+                              <el-table-column
+                                :resizable="false"
+                                v-for="(_item, _index) in setLabels(value)"
+                                v-if="_item.show"
+                                :key="`col-${_index}`"
+                                :label="_item.label"
+                              >
+                                <template slot-scope="scope" :column="_item">
+                                  <template >
+                                    <span v-html="scope.row[_item.prop]"></span>
+                                  </template>
                                 </template>
-                              </template>
-                            </el-table-column>
-                          </el-table>
+                              </el-table-column>
+                            </el-table>
+                          </template>
+
                         </template>
                         <template v-else-if="key">
                           <span class="content-text">{{value ? value : "&nbsp;"}}</span>
@@ -201,11 +205,11 @@
                           <template v-for="(module, mProjectName, ti) in item.data._module_" v-if="mProjectName == key">
                             <div class="content-item" @click.stop="showDeep(`deep-${index}-${i}-${ti}-${fi}`)" v-for="(moduleNum, moduleName, fi) in module" v-if="moduleName != '_endpoint_'">
                               <div class="content-item-key item-tip deep" :id="`key-${index}-${i}-${ti}-${fi}`">
-                              <span class="content-text">
-                                <span><i v-if="module._endpoint_[moduleName]" :class="{'el-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) == -1,'el-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1}"></i></span>
-                                <span>{{moduleName}}</span>
-                                <!--<span v-if="module._endpoint_[moduleName]">{{Object.keys(module._endpoint_[moduleName]).length-1}}个endpoint</span>-->
-                              </span>
+                                <span class="content-text">
+                                  <span><i v-if="module._endpoint_[moduleName]" :class="{'el-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) == -1,'el-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1}"></i></span>
+                                  <span>{{moduleName}}</span>
+                                  <!--<span v-if="module._endpoint_[moduleName]">{{Object.keys(module._endpoint_[moduleName]).length-1}}个endpoint</span>-->
+                                </span>
                                 <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}-${i}-${ti}`, moduleName, fi, ready)">{{moduleName}}</div>
                               </div>
                               <div class="content-item-value item-tip deep" :id="`value-${index}-${i}-${ti}-${fi}`">
@@ -377,20 +381,15 @@
         this.$chartResizeTool.start(vm, this.data, e);
       },
       setLabels:function(source){
-        let labels=[];
-        source.forEach(item=>{
-          labels=labels.concat(Object.keys(item))
-        })
-        labels=Array.from(new Set(labels));
-
-        labels=labels.map(item=>{
+        let labels = Object.keys(source[0]);
+        labels = labels.map(item=>{
           return{
             label:this.replaceSplit(item),
             prop:item,
             show:true,
           }
         });
-        console.info(labels)
+        console.info(labels);
         return labels;
       },
       replaceSplit(key){
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index fa1074e3e..3e4ef7b6f 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -379,6 +379,16 @@
           box-sizing: border-box;
           height: 26px;
         }
+        .item-tip.deep:nth-of-type(2) {
+          padding-left: 13px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .item-tip.deepp:last-of-type {
+          padding-left: 13px;
+          box-sizing: border-box;
+          height: 26px;
+        }
         .tag-value:hover .item-tip-show {
           display: block;
         }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 860498163..f9178513d 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -276,7 +276,7 @@
             prop: 'endAt',
             show: true,
           }, {
-            label: this.$t('alert.list.current'),
+            label: this.$t('overall.value'),
             prop: 'current',
             show: true
           }, {
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 8810b3973..efd732e00 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -509,12 +509,12 @@
         //this.$router.go(-1);
       },
       getLinkData(){
-        console.log('aaa');
+        //console.log('aaa');
         this.$get('link').then(response=>{
-          console.log(response);
+          //console.log(response);
           // this.linkData=response.data;
           this.$store.commit('setLinkData',response.data);
-          console.log(this.$store)
+          //console.log(this.$store)
         });
       },
     },
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 8289d0803..9d770129d 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -692,7 +692,7 @@
         immediate: true,
         deep: true,
         handler(n, o) {
-          if (n.type && n.type.toLowerCase() == 'snmp') {
+          if (!n.id && n.type && n.type.toLowerCase() == 'snmp') {
             n.port = 161;
             this.expandedWalkData = [];
             this.$nextTick(() => {
@@ -701,6 +701,8 @@
             for (let i = 0; i < n.walk.length; i++) {
               this.expandedWalkData.push(n.walk[i].substring(0, n.walk[i].lastIndexOf(".")));
             }
+          } else if (!n.id && n.type && n.type.toLowerCase() == 'http') {
+            n.port = 9100;
           }
         }
       },
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index cc9076d0d..7e1dde121 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -69,9 +69,10 @@
           >
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'alertRule'">
-                <div class="link too-long-split"
+                <!--<div class="link too-long-split"
                    @click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"
-                   v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
+                   v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>-->
+                <span class="too-long-split"v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</span>
                 <template v-else>-</template>
               </template>
               <!--<div v-else-if="item.prop == 'type'" class="content-right-options">
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 29f87c91f..02d10f3cb 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -73,8 +73,8 @@
             >
               <template slot-scope="scope" :column="item">
                 <div v-if="item.prop == 'option'" class="content-right-options">
-                  <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                  &nbsp;
+                  <!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+                  &nbsp;-->
                   <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
                   &nbsp;
                   <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 4fd43e0d6..6e00f6d20 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -394,13 +394,13 @@
       'promql-input': promqlInput,
     },
     mounted() {
-      if(this.showPanel){
-        this.panelName2 = this.showPanel.name;
-      }
       this.rightBox.show = true;
       this.isUrl = false;
       this.isSingleStat = false;
       this.$nextTick(() => {
+        if(this.showPanel){
+          this.panelName2 = this.showPanel.name;
+        }
         this.initElements();
       });
     },
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index dd5a4d7a7..3ee2aef32 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -494,77 +494,88 @@
       queryAlertTrendData() {
         this.$refs.chartbox.startLoading();
         this.chartSeries = [];
-
-        this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{
-          if(response.status == 'success'){
-            if(response.data.result){
-              let series={
-                name: 'RX',
-                symbol:'none',  //去掉点
-                smooth:0.2,  //曲线变平滑
-                data: [],
-                type:'line',
-                lineStyle: {
-                  width: 1,
-                  opacity: 0.9
-                },
-              };
-              if (response.data.result.length > 0) {
-                series.data=response.data.result[0].values.map((item)=>{
-                  return [item[0]*1000,item[1]];
-                });
-              }
-              this.chartSeries.push(series);
-              if (this.chartSeries.length == 2) {
-                this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-                this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
-                this.$refs.chartbox.modifyOption("grid", "top", 30);
-                this.$refs.chartbox.modifyOption("grid", "left", 0);
-                this.$refs.chartbox.modifyOption("grid", "right", 30);
-                this.$refs.chartbox.modifyOption("grid", "bottom", 8);
-                this.$refs.chartbox.modifyOption("grid", "containLabel", true);
-                this.$refs.chartbox.setSeries(this.chartSeries);
-                this.$refs.chartbox.endLoading();
+        let rxPromise = new Promise((resolve, reject) => {
+          this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{
+            if(response.status == 'success'){
+              if(response.data.result){
+                let series={
+                  name: 'RX',
+                  symbol:'none',  //去掉点
+                  smooth:0.2,  //曲线变平滑
+                  data: [],
+                  type:'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  },
+                };
+                if (response.data.result.length > 0) {
+                  series.data=response.data.result[0].values.map((item)=>{
+                    return [item[0]*1000,item[1]];
+                  });
+                }
+                this.chartSeries.push(series);
+                if (this.chartSeries.length == 2) {
+                  this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+                  this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
+                  this.$refs.chartbox.modifyOption("grid", "top", 30);
+                  this.$refs.chartbox.modifyOption("grid", "left", 0);
+                  this.$refs.chartbox.modifyOption("grid", "right", 30);
+                  this.$refs.chartbox.modifyOption("grid", "bottom", 8);
+                  this.$refs.chartbox.modifyOption("grid", "containLabel", true);
+                  this.$refs.chartbox.setSeries(this.chartSeries);
+                }
               }
+              resolve(true);
+            }else{
+              console.error(response);
+              resolve(false);
             }
-          }else{
-            console.error(response)
-          }
+          });
         });
-        this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response=>{
-          if(response.status == 'success'){
-            if(response.data.result){
-              let series={
-                name: 'TX',
-                symbol:'none',  //去掉点
-                smooth:0.2,  //曲线变平滑
-                data: [],
-                type:'line',
-                lineStyle: {
-                  width: 1,
-                  opacity: 0.9
-                },
-              };
-              if (response.data.result.length > 0) {
-                series.data=response.data.result[0].values.map((item)=>{
-                  return [item[0]*1000,item[1]];
-                });
-              }
-              this.chartSeries.push(series);
-              if (this.chartSeries.length == 2) {
-                this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-                this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
-                this.$refs.chartbox.modifyOption("grid", "top", 30);
-                this.$refs.chartbox.modifyOption("grid", "left", 0);
-                this.$refs.chartbox.modifyOption("grid", "right", 30);
-                this.$refs.chartbox.modifyOption("grid", "bottom", 8);
-                this.$refs.chartbox.setSeries(this.chartSeries);
-                this.$refs.chartbox.endLoading();
+        let txPromise = new Promise((resolve, reject) => {
+          this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response=>{
+            if(response.status == 'success'){
+              if(response.data.result){
+                let series={
+                  name: 'TX',
+                  symbol:'none',  //去掉点
+                  smooth:0.2,  //曲线变平滑
+                  data: [],
+                  type:'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  },
+                };
+                if (response.data.result.length > 0) {
+                  series.data=response.data.result[0].values.map((item)=>{
+                    return [item[0]*1000,item[1]];
+                  });
+                }
+                this.chartSeries.push(series);
+                if (this.chartSeries.length == 2) {
+                  this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+                  this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
+                  this.$refs.chartbox.modifyOption("grid", "top", 30);
+                  this.$refs.chartbox.modifyOption("grid", "left", 0);
+                  this.$refs.chartbox.modifyOption("grid", "right", 30);
+                  this.$refs.chartbox.modifyOption("grid", "bottom", 8);
+                  this.$refs.chartbox.setSeries(this.chartSeries);
+                  //this.$refs.chartbox.endLoading();
+                }
               }
+              resolve(true);
+            }else{
+              console.error(response)
+              resolve(false);
             }
-          }else{
-            console.error(response)
-          }
+          });
+        });
+        Promise.all([rxPromise, txPromise]).then(resolve => {
+          this.$refs.chartbox.endLoading();
+        }, reject => {
+          this.$refs.chartbox.endLoading();
         });
       },
       trendParamHandle(t) {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 6b6485b69..dad67480f 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -226,7 +226,7 @@
         }
         this.filter.searchName='';
         //this.$refs.searchInput.select();
-        this.showPanel = val
+        this.showPanel = val;
         this.filter.panelId = this.showPanel.id;
         // let curTime = this.$refs.calendarPanel.getCurrentTime();
         let curTime=this.searchTime;
@@ -429,15 +429,13 @@
             let isInitData = false;
             if (response.data.list.length > 0) {
               if (this.$store.state.showPanel.id !== 0 && this.$store.state.showPanel.name !== '') {
-                this.showPanel.name = this.$store.state.showPanel.name;
-                this.showPanel.id = this.$store.state.showPanel.id;
+                this.showPanel = this.$store.state.showPanel;
               }
               if (clearShowPanel) {
                 this.showPanel.id = '';
               }
-              if (this.showPanel.id === '') {
-                this.showPanel.id = response.data.list[0].id;
-                this.showPanel.name = response.data.list[0].name;
+              if (!this.showPanel.id) {
+                this.showPanel = response.data.list[0];
                 this.filter.panelId = this.showPanel.id;
                 this.getData(this.filter);
                 isInitData = true;
@@ -453,7 +451,7 @@
             }
             this.$store.state.showPanel.id = 0;
             this.$store.state.showPanel.name = '';
-
+            this.$store.state.showPanel.type = 'dashboard';
           }else {
             if(response.msg){
               this.$message.error(response.msg);
@@ -580,7 +578,7 @@
           });
         }
         this.panelDataDragTmp = [...this.panelData];
-        console.log(this.panelDataDragTmp)
+        //console.log(this.panelDataDragTmp)
       },
       end (event) {
         // console.info("end event:", event)
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index e19c98010..a1eeaecaa 100644
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -33,7 +33,8 @@ const store = new Vuex.Store({
     },
     showPanel:{
       id:0,
-      name:''
+      name:'',
+      type: "dashboard"
     },
     consoleShow:false,//是否显示console窗口
     consoleCount:0,//当前console窗口数