NEZ-1191 fix: 修复Endpoint 详情页面显示状态不正确

2021-11-08 14:56:50 +08:00
parent 30ddb294f5
commit fa1b6e4530
3 changed files with 84 additions and 33 deletions
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -41,12 +41,14 @@
                          <span class="content-text">{{assetKey[key]}}</span>
                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{assetKey[key]}}</div>
                        </div>
-
                        <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                        <span v-if="key === 'state'">
-                          {{value}}
-                        </span>
-                          <span v-else-if="key === 'alert'" :class="{'success': value <= 0, 'danger': value > 0}" class="as-button">{{value + ' ' + $t('overall.active')}}</span>
+                          <span v-if="key === 'name'">{{value}}</span>
+                          <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;">
                            <template v-if="value && value.length > 0">
                              <nz-alert-tag v-for="(tagItem, tagIndex) in value" :key="tagItem.id" :cursor-point="false"
@@ -127,8 +129,39 @@
                          <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">
-                          <span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
+                          <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>
+                              <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>
+                            <span v-else 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>
                      </div>

@@ -257,24 +290,29 @@ export default {
      oldSearchTime: [],

      assetKey: {
-        host: this.$t('asset.host'),
+        // host: this.$t('asset.host'),
        id: 'Id',
-        assetType: this.$t('asset.assetType'),
-        sn: this.$t('asset.device'),
+        name: this.$t('overall.name'),
+        manageIp: this.$t('overall.manageIp'),
+        type: this.$t('overall.type'),
+        // assetType: this.$t('asset.assetType'),
+        // sn: this.$t('asset.device'),
        state: this.$t('asset.assetState'),
        pingRtt: this.$t('asset.assetPing'),
        dataCenter: this.$t('asset.dataCenter'),
        cabinet: this.$t('asset.cabinet'),
+        brand: this.$t('asset.brand'),
        model: this.$t('asset.model'),
-        vendor: this.$t('asset.vendor'),
-        purchaseDate: this.$t('asset.procurementDate'),
+        tags: this.$t('overall.labels'),
+        alert: this.$t('asset.alerts'),
+        endpoint: this.$t('asset.modules')
+        // vendor: this.$t('asset.vendor'),
+        // purchaseDate: this.$t('asset.procurementDate'),
        // principal: this.$t('asset.principal'),
        // tel: this.$t('asset.principalTel'),
        // pingStatus: this.$t('asset.assetPing'),
-        pingLastReply: this.$t('asset.lastReply'),
-        endpoint: this.$t('asset.modules'),
-        alert: this.$t('asset.alerts'),
-        tags: this.$t('overall.tag')
+        // pingLastReply: this.$t('asset.lastReply'),
+
      },
      projectKey: {
        id: 'ID',
@@ -293,9 +331,10 @@ export default {
      endpointKey: {
        id: 'ID',
        name: this.$t('overall.name'),
-        type: this.$t('overall.type'),
+        // type: this.$t('overall.type'),
        project: this.$t('overall.project'),
        module: this.$t('project.module.module'),
+        asset: this.$t('overall.asset'),
        alerts: this.$t('project.endpoint.alerts'),
        state: this.$t('project.endpoint.state')
      }
@@ -420,6 +459,7 @@ export default {
      this.panelIdInner = panelId
      this.data = chartItem
      this.detail = detail
+      console.log(this.detail)
      // console.info(this.data, this.detail)
      /* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
        this.$nextTick(() => {
@@ -518,3 +558,8 @@ export default {
  }
 }
 </script>
+<style>
+.colorFA901C{
+  color: #fa901c;
+}
+</style>
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1488,16 +1488,18 @@ export default {
      chartInfo.name = this.$t('project.chart.endpointInfo')
      chartInfo.from = fromRoute.endpoint
      const basicInfo = JSON.parse(JSON.stringify(this.obj))
+      console.log(basicInfo)
      detail.push(
        {
          data: {
            id: basicInfo.id,
            name: basicInfo.name,
-            type: basicInfo.module.type,
+            // type: basicInfo.module.type,
            project: basicInfo.project.name,
            module: basicInfo.module.name,
+            asset: basicInfo.asset.manageIp,
            alerts: basicInfo.alertNum,
-            state: basicInfo.state === 1 ? 'up' : 'down'
+            state: basicInfo.configs
          },
          type: 'endpointInfo',
          title: this.$t('project.chart.basicTitle')
@@ -1538,23 +1540,27 @@ export default {
            // basic.cabinet = basic.cabinet ? basic.cabinet.name : '-'
            const obj = {
              id: basic.id,
-              host: basic.pingInfo ? basic.pingInfo.host : '-',
-              assetType: basic.type ? basic.type.name : '-',
+              // host: basic.pingInfo ? basic.pingInfo.host : '-',
+              // assetType: basic.type ? basic.type.name : '-',
+              name: basic.name ? basic.name : '-',
+              manageIp: basic.manageIp,
+              type: basic.type ? basic.type.name : '-',
              state: basic.state ? basic.state.name : '-',
              pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '',
              dataCenter: basic.dc ? basic.dc.name : '-',
              cabinet: basic.cabinet ? basic.cabinet.name : '-',
-              alert: basic.alertNum,
-              endpoint: basic.endpointNum,
-              purchaseDate: basic.purchaseDate,
-              vendor: basic.brand ? basic.brand.name : '-',
+              brand: basic.brand ? basic.brand.name : '-',
              model: basic.model ? basic.model.name : '-',
-              sn: basic.sn,
              tags: basic.fields,
-              pingStatus: basic.pingInfo ? basic.pingInfo.status : '-',
-              cabinetStart: basic.cabinetStart,
-              cabinetEnd: basic.cabinetEnd,
-              pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''
+              alert: basic.alertNum,
+              endpoint: basic.endpointNum
+              // purchaseDate: basic.purchaseDate,
+              // vendor: basic.brand ? basic.brand.name : '-',
+              // sn: basic.sn,
+              // pingStatus: basic.pingInfo ? basic.pingInfo.status : '-',
+              // cabinetStart: basic.cabinetStart,
+              // cabinetEnd: basic.cabinetEnd,
+              // pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''
              // principal: basic.dc ? basic.dc.principal : '-',
              // tel: basic.tel,
            }
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -89,7 +89,7 @@
        <div class="alert-label-title">{{$t('overall.alert')}}</div>
        <div class="alert-label-value">
          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
        </div>
      </div>
      <div class="alert-label-box">
@@ -130,7 +130,7 @@
        <div class="alert-label-title">{{$t('overall.alert')}}</div>
        <div class="alert-label-value">
          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
        </div>
      </div>
      <div class="alert-label-box">
@@ -170,7 +170,7 @@
        <div class="alert-label-title">{{$t('overall.alert')}}</div>
        <div class="alert-label-value">
          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
        </div>
      </div>
      <div class="alert-label-box">