From de52aab93f4ee5706c38d6a315527f6031138330 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 9 Nov 2021 10:09:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20endpoint=20basic=20?=
 =?UTF-8?q?info=20=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-detail.vue    | 65 ++++++++++---------
 .../src/components/charts/chart-list.vue      | 26 ++++----
 2 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 7a035ba5b..18aaaed4d 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -34,7 +34,6 @@
                 <el-collapse-transition>
                   <div v-show="show.indexOf(index) > -1" class="chart-sub-content">
                     <template v-for="(value, key, i) in item.data">
-
                       <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
                       <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'basic' && assetKey[key]" :key="i" class="content-item">
                         <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
@@ -46,7 +45,6 @@
                           <span v-else-if="key === 'type'">{{value}}</span>
                           <span v-else-if="key === 'state'">{{value}}</span>
                           <span v-else-if="key === 'brand'">{{value}}</span>
-<!--                          <span v-else-if="key === 'model'">{{value}}</span>-->
                           <span v-else-if="key === 'alert'" class="as-button"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
                           <span v-else-if="key === 'endpoint'" class="as-button"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;{{value}}</span>
                           <div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
@@ -60,7 +58,7 @@
                                 </div>
                               </nz-alert-tag>
                             </template>
-                            <template v-else>&nbsp;</template>
+                            <template v-else>-</template>
                           </div>
                           <template v-else-if="key === 'cabinet'">
                             <span v-if="value&&item.data.cabinetStart&&item.data.cabinetEnd">{{value + '['+item.data.cabinetStart+'-'+item.data.cabinetEnd+']'}}</span>
@@ -129,37 +127,37 @@
                           <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointKey[key]}}</div>
                         </div>
                         <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <template>
-                            <span v-if="key === 'alerts'"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
-                            <span v-else-if="key === 'asset'"><i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;{{value}}</span>
-                            <span v-else-if="key === 'module'"><i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;&nbsp;{{value}}</span>
-                            <span v-else-if="key === 'state'">
-                              <span style="width: auto">
-                                <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
-                                <span v-if="value[0].state === 0">
-                                  <span class="active-icon red-bg inline-block"></span>
-                                </span>
-                                <span v-else-if="value[0].state === 1">
-                                  <span class="active-icon green-bg inline-block"></span>
-                                </span>
-                                <span v-else-if="value[0].state">
-                                  <span class="active-icon gray-bg inline-block"></span>
-                                </span>
+                          <span v-if="key === 'alert'"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
+                          <span v-else-if="key === 'asset'"><i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;{{value}}</span>
+                          <span v-else-if="key === 'module'"><i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;&nbsp;{{value}}</span>
+                          <span v-else-if="key === 'state'">
+                            <span style="width: auto">
+                              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+                              <span v-if="value[0].state === 0">
+                                <span class="active-icon red-bg inline-block"></span>
                               </span>
-                              <span style="width: auto">
-                                <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
-                                <span v-if="value[1].state === 0">
-                                  <span class="active-icon red-bg inline-block"></span>
-                                </span>
-                                <span v-else-if="value[1].state === 1">
-                                  <span class="active-icon green-bg inline-block"></span>
-                                </span>
-                                <span v-else-if="value[1].state">
-                                  <span class="active-icon gray-bg inline-block"></span>
-                                </span>
+                              <span v-else-if="value[0].state === 1">
+                                <span class="active-icon green-bg inline-block"></span>
+                              </span>
+                              <span v-else-if="value[0].state">
+                                <span class="active-icon gray-bg inline-block"></span>
                               </span>
                             </span>
-                            <span v-else class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
+                            <span style="width: auto">
+                              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+                              <span v-if="value[1].state === 0">
+                                <span class="active-icon red-bg inline-block"></span>
+                              </span>
+                              <span v-else-if="value[1].state === 1">
+                                <span class="active-icon green-bg inline-block"></span>
+                              </span>
+                              <span v-else-if="value[1].state">
+                                <span class="active-icon gray-bg inline-block"></span>
+                              </span>
+                            </span>
+                          </span>
+                          <template v-else-if="endpointKey[key]">
+                            <span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
                             <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
                           </template>
                         </div>
@@ -335,7 +333,7 @@ export default {
         project: this.$t('overall.project'),
         module: this.$t('project.module.module'),
         asset: this.$t('overall.asset'),
-        alerts: this.$t('project.endpoint.alerts'),
+        alert: this.$t('project.endpoint.alerts'),
         state: this.$t('project.endpoint.state')
       }
     }
@@ -561,4 +559,7 @@ export default {
 .colorFA901C{
   color: #fa901c;
 }
+.endpoint-cell-left{
+  margin-right: 5px;
+}
 </style>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 354bf8349..4b232d744 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1491,14 +1491,14 @@ export default {
       detail.push(
         {
           data: {
-            id: basicInfo.id,
-            name: basicInfo.name,
+            id: basicInfo.id ? basicInfo.id : '-',
+            name: basicInfo.name ? basicInfo.name : '-',
             // type: basicInfo.module.type,
-            project: basicInfo.project.name,
-            module: basicInfo.module.name,
-            asset: basicInfo.asset.manageIp,
-            alerts: basicInfo.alertNum,
-            state: basicInfo.configs
+            project: basicInfo.project ? basicInfo.project.name : '-',
+            module: basicInfo.module ? basicInfo.module.name : '-',
+            asset: basicInfo.asset ? basicInfo.asset.manageIp : '-',
+            alert: basicInfo.alertNum ? basicInfo.alertNum : 0,
+            state: basicInfo.configs ? basicInfo.configs : '-'
           },
           type: 'endpointInfo',
           title: this.$t('project.chart.basicTitle')
@@ -1542,21 +1542,21 @@ export default {
               // host: basic.pingInfo ? basic.pingInfo.host : '-',
               // assetType: basic.type ? basic.type.name : '-',
               name: basic.name ? basic.name : '-',
-              manageIp: basic.manageIp,
+              manageIp: basic.manageIp ? basic.manageIp : '-',
               type: basic.type ? basic.type.name : '-',
               state: basic.state ? basic.state.name : '-',
-              pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '',
+              pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '-',
               dataCenter: basic.dc ? basic.dc.name : '-',
               cabinet: basic.cabinet ? basic.cabinet.name : '-',
               brand: basic.brand ? basic.brand.name : '-',
               model: basic.model ? basic.model.name : '-',
-              tags: basic.fields,
-              alert: basic.alertNum,
-              endpoint: basic.endpointNum,
+              tags: basic.fields ? basic.fields : '-',
+              alert: basic.alertNum ? basic.alertNum : '-',
+              endpoint: basic.endpointNum ? basic.endpointNum : '-',
               // purchaseDate: basic.purchaseDate,
               // vendor: basic.brand ? basic.brand.name : '-',
               // sn: basic.sn,
-              pingStatus: basic.pingInfo ? basic.pingInfo.status : '-',
+              pingStatus: basic.pingInfo ? basic.pingInfo.status : '-'
               // cabinetStart: basic.cabinetStart,
               // cabinetEnd: basic.cabinetEnd,
               // pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''