NEZ-2664 fix：AssetInfo | EndpointInfo Chart数据填充

2023-03-10 16:11:23 +08:00
parent 252d370eb8
commit f97b2a9d4a
7 changed files with 167 additions and 23 deletions
--- a/nezha-fronted/src/components/chart/assetInfoData.js
+++ 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
--- 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"
--- 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
  },
--- 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
  },
--- 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
          })
-        })
+        }
      })
    }
  }
--- a/nezha-fronted/src/components/chart/endpointInfoData.js
+++ 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
--- 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
              })