From f97b2a9d4a0d07e40eb26e56b95726ef43cd258b Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 10 Mar 2023 16:11:23 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2664=20fix=EF=BC=9AAssetInfo=20|=20Endpoint?=
 =?UTF-8?q?Info=20Chart=E6=95=B0=E6=8D=AE=E5=A1=AB=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/assetInfoData.js     | 48 ++++++++++++++
 nezha-fronted/src/components/chart/chart.vue  |  2 +
 .../components/chart/chart/chartAssetInfo.vue |  3 +-
 .../chart/chart/chartEndpointInfo.vue         |  3 +-
 .../src/components/chart/chartDetail.vue      | 45 ++++++++-----
 .../src/components/chart/endpointInfoData.js  | 66 +++++++++++++++++++
 .../src/components/chart/panelChart.vue       | 23 ++++++-
 7 files changed, 167 insertions(+), 23 deletions(-)
 create mode 100644 nezha-fronted/src/components/chart/assetInfoData.js
 create mode 100644 nezha-fronted/src/components/chart/endpointInfoData.js

diff --git a/nezha-fronted/src/components/chart/assetInfoData.js b/nezha-fronted/src/components/chart/assetInfoData.js
new file mode 100644
index 000000000..84d232f7d
--- /dev/null
+++ b/nezha-fronted/src/components/chart/assetInfoData.js
@@ -0,0 +1,48 @@
+const data = {
+  msg: 'success',
+  code: 200,
+  data: {
+    id: 'assetID',
+    name: 'template',
+    manageIp: '127.0.0.1',
+    type: {
+      name: 'Server'
+    },
+    state: {
+      name: 'In use'
+    },
+    brand: {
+      name: 'Dell'
+    },
+    dc: {
+      name: 'JBXXG'
+    },
+    model: {
+      name: 'ADC-Serve'
+    },
+    fields: [],
+    cabinet: {
+      name: '机柜'
+    },
+    pingInfo: {
+      status: 0,
+      rtt: null
+    },
+    endpointNum: 0,
+    alert: [
+      {
+        priority: 'P1',
+        num: 2
+      },
+      {
+        priority: 'P2',
+        num: 0
+      },
+      {
+        priority: 'P3',
+        num: 0
+      }
+    ]
+  }
+}
+export default data
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index c88136028..198167c7e 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -161,6 +161,7 @@
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
         @chartIsNoData="chartIsNoData"
+        :from="from"
       ></chart-asset-info>
       <chart-endpoint-info
         :ref="'chart' + chartInfo.id"
@@ -170,6 +171,7 @@
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
         @chartIsNoData="chartIsNoData"
+        :from="from"
       ></chart-endpoint-info>
       <chart-table
         :ref="'chart' + chartInfo.id"
diff --git a/nezha-fronted/src/components/chart/chart/chartAssetInfo.vue b/nezha-fronted/src/components/chart/chart/chartAssetInfo.vue
index 06badb8a1..dbe67d4e9 100644
--- a/nezha-fronted/src/components/chart/chart/chartAssetInfo.vue
+++ b/nezha-fronted/src/components/chart/chart/chartAssetInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-detail :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
+  <chart-detail :chart-info="chartInfo" :chart-detail="chartData" :from="from"></chart-detail>
 </template>
 
 <script>
@@ -10,6 +10,7 @@ export default {
     chartDetail
   },
   props: {
+    from: String,
     chartInfo: Object,
     chartData: Object
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue b/nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue
index 73c312f34..0888f045f 100644
--- a/nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue
+++ b/nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-detail :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
+  <chart-detail :chart-info="chartInfo" :chart-detail="chartData" :from="from"></chart-detail>
 </template>
 
 <script>
@@ -10,6 +10,7 @@ export default {
     chartDetail
   },
   props: {
+    from: String,
     chartData: Object,
     chartInfo: Object
   },
diff --git a/nezha-fronted/src/components/chart/chartDetail.vue b/nezha-fronted/src/components/chart/chartDetail.vue
index 6fdd1892a..2f727ec0c 100644
--- a/nezha-fronted/src/components/chart/chartDetail.vue
+++ b/nezha-fronted/src/components/chart/chartDetail.vue
@@ -102,7 +102,7 @@
           <div class="basic-info-table-list">
             <div class="basic-info-table-title">{{$t('overall.module')}}</div>
             <div class="basic-info-table-value">
-              <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
+              <i class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
               <span>{{chartDetail && chartDetail.module ? chartDetail.module.name : '--'}}</span>
             </div>
           </div>
@@ -169,6 +169,7 @@ import trendMixin from '../common/alert/trendMixins'
 export default {
   name: 'chartDetail',
   props: {
+    from: String,
     chartDetail: Object,
     chartInfo: Object
   },
@@ -224,30 +225,38 @@ export default {
           dimension: 'priority',
           step: 'd'
         }
-        if (this.chartInfo.type === 'assetInfo') {
-          params.assetId = this.chartDetail.id
-        } else if (this.chartInfo.type === 'endpointInfo') {
-          params.endpointId = this.chartDetail.id
-        }
-        this.$get('/stat/alertMessage/trend', params).then((res) => {
-          if (!res.data) {
-            return
+        const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+        // dashboardTemp示例数据不请求接口
+        if (this.from !== 'dashboardTemp') {
+          if (this.chartInfo.type === 'assetInfo') {
+            params.assetId = this.chartDetail.id
+          } else if (this.chartInfo.type === 'endpointInfo') {
+            params.endpointId = this.chartDetail.id
           }
-          const alertDaysData = res.data.result ? res.data.result[0].values : []
-          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
-          alertDaysData.forEach(item => {
-            item.values.forEach(time => {
-              const findItem = newWeekDays.find(days => days.time == time[0])
-              if (findItem) {
-                findItem[item.metric.priority] = time[1]
-              }
+          this.$get('/stat/alertMessage/trend', params).then((res) => {
+            if (!res.data) {
+              return
+            }
+            const alertDaysData = res.data.result ? res.data.result[0].values : []
+            alertDaysData.forEach(item => {
+              item.values.forEach(time => {
+                const findItem = newWeekDays.find(days => days.time == time[0])
+                if (findItem) {
+                  findItem[item.metric.priority] = time[1]
+                }
+              })
+            })
+            setTimeout(() => {
+              this.alertDaysData = newWeekDays
+              this.trendLoading = false
             })
           })
+        } else {
           setTimeout(() => {
             this.alertDaysData = newWeekDays
             this.trendLoading = false
           })
-        })
+        }
       })
     }
   }
diff --git a/nezha-fronted/src/components/chart/endpointInfoData.js b/nezha-fronted/src/components/chart/endpointInfoData.js
new file mode 100644
index 000000000..0572c8193
--- /dev/null
+++ b/nezha-fronted/src/components/chart/endpointInfoData.js
@@ -0,0 +1,66 @@
+const data = {
+  msg: 'success',
+  code: 200,
+  data: {
+    id: 'endpointID',
+    name: 'template',
+    project: {
+      name: 'Nezha'
+    },
+    module: {
+      name: 'node_exporter'
+    },
+    asset: {
+      name: '联想物理机'
+    },
+    alert: [
+      {
+        priority: 'P1',
+        num: 2
+      },
+      {
+        priority: 'P2',
+        num: 0
+      },
+      {
+        priority: 'P3',
+        num: 0
+      }
+    ],
+    configs: [
+      {
+        id: 3,
+        endpointId: 2,
+        type: 'metrics',
+        config: '{"basic_auth":{"pin":"","username":""},"bearer_token":"","scrape_timeout":"","params":{"a":["1"],"b":["1","2","3"]},"metrics_path":"/metrics","labels":{"ppp":"a|b|c","ddd":"abc","er":"6"},"protocol":"http","snmpCredentialsId":"","port":9100,"host":"192.168.44.13","relabel_config":[],"scrape_interval":"","walk":[]}',
+        version: 12,
+        enable: 1,
+        hash: '7283547773012943786',
+        seq: 'a49bbde7-6d18-4353-8176-43f18a369e93',
+        ver: 12,
+        state: 1,
+        lastUpdate: '2023-03-10 07:45:00',
+        asset: null,
+        dc: null,
+        stateConf: null
+      },
+      {
+        id: 4,
+        endpointId: 2,
+        type: 'logs',
+        config: '[{"pipeline":[],"fileName":"","relabel_config":[],"type":"file","labels":{}}]',
+        version: 12,
+        enable: 0,
+        hash: '2871630644718992098',
+        seq: 'a49bbde7-6d18-4353-8176-43f18a369e93',
+        ver: 12,
+        state: 8,
+        lastUpdate: '2023-03-10 07:45:01',
+        asset: null,
+        dc: null,
+        stateConf: null
+      }
+    ]
+  }
+}
+export default data
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index d2d11c69a..62d6569ce 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -69,6 +69,8 @@ import { chartType, fromRoute } from '@/components/common/js/constants'
 import bus from '@/libs/bus'
 import axios from 'axios'
 import chartTempData from '@/components/chart/chartTempData'
+import assetInfoData from '@/components/chart/assetInfoData'
+import endpointInfoData from '@/components/chart/endpointInfoData'
 import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 
@@ -341,21 +343,36 @@ export default {
           case 'system': {
             this.chartInfo.elements = this.chartInfo.param.datasource
             if (this.from === fromRoute.chartTemp || this.from === fromRoute.dashboardTemp) {
+              let tempData
+              if (this.chartInfo.type === 'assetInfo') {
+                tempData = this.$loadsh.cloneDeep(assetInfoData.data)
+              } else if (this.chartInfo.type === 'endpointInfo') {
+                tempData = this.$loadsh.cloneDeep(endpointInfoData.data)
+              } else {
+                tempData = [chartTempData.data.result]
+              }
               setTimeout(() => {
-                this.chartData = [chartTempData.data.result]
+                this.chartData = tempData
                 this.loading = false
               }, 100)
               return
             }
+            // assetInfo or endpointInfo
+            let linkId = ''
+            if (this.from == 'panel') {
+              linkId = this.chartInfo.panel.link
+            } else {
+              linkId = this.chartDetailInfo.id
+            }
             if (this.chartInfo.type === 'assetInfo') {
-              this.$get('asset/asset/' + this.chartDetailInfo.id).then(res => {
+              this.$get('asset/asset/' + linkId).then(res => {
                 this.chartData = res.data
                 this.loading = false
               })
               break
             }
             if (this.chartInfo.type === 'endpointInfo') {
-              this.$get('monitor/endpoint/' + this.chartDetailInfo.id).then(res => {
+              this.$get('monitor/endpoint/' + linkId).then(res => {
                 this.chartData = res.data
                 this.loading = false
               })