fix: 一系列优化和调整：左侧筛选空串处理、下拉增加网络质量和链路、app风险等级映射

2022-02-13 23:20:24 +08:00
parent cba743199c
commit 7bdcd1c598
19 changed files with 318 additions and 60 deletions
--- a/src/views/entityExplorer/entityList/Card.vue
+++ b/src/views/entityExplorer/entityList/Card.vue
@@ -23,7 +23,7 @@
          </div>
          <div class="content__desc" >
            <span class="desc__label">{{$t('entities.risk')}}:&nbsp;</span>
-            <span>{{entityData.appRisk || '-'}}</span>
+            <span>{{appRisk(entityData.appRisk) || '-'}}</span>
          </div>
        </template>
      </div>
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -49,17 +49,17 @@
                <div class="basic-info__item">
                  <i class="cn-icon cn-icon-id"></i>
                  <span>{{$t('entities.category')}}&nbsp;:&nbsp;&nbsp;</span>
-                  <span>{{entityData.appId || '-'}}</span>
+                  <span>{{entityData.appCategory || '-'}}</span>
                </div>
                <div class="basic-info__item">
                  <i class="cn-icon cn-icon-category"></i>
                  <span>{{$t('entities.subcategory')}}&nbsp;:&nbsp;&nbsp;</span>
-                  <span>{{entityData.appCategory || '-'}}</span>
+                  <span>{{entityData.appSubategory || '-'}}</span>
                </div>
                <div class="basic-info__item">
                  <i class="cn-icon cn-icon-sub-category"></i>
                  <span>{{$t('entities.risk')}}&nbsp;:&nbsp;&nbsp;</span>
-                  <span>{{entityData.appSubategory || '-'}}</span>
+                  <span>{{appRisk(entityData.appRisk) || '-'}}</span>
                </div>
              </template>
              <!-- 通用字段 -->
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -63,6 +63,35 @@
      </div>
    </div>
  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <chart-single-value
+            v-for="(chartInfo, i) in singleValues.chartInfos"
+            :chart-info="chartInfo"
+            :chart-data="singleValues.chartDatas[i]"
+            :key="i"
+            class="cn-chart__single-value--detail-overview"
+        ></chart-single-value>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('entities.accessLink')}}</div>
+    <div class="overview__content">
+      <div class="overview__tags">
+        <div class="overview__tag">
+          <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
+          <span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
+        </div>
+        <div class="overview__tag">
+          <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
+          <span class="tag__value">{{entityData.linkInPercent ? unitConvert(entityData.linkInPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.alert')}}</div>
    <div class="overview__content">
@@ -103,7 +132,7 @@
      </div>
    </div>
  </div>
-  <div class="overview-map">
+  <div class="overview-map overview-map--app">
    <chart2
        :chart-info="chart"
        :chart-data="chartData"
@@ -122,13 +151,15 @@ import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import Chart2 from '@/views/charts/Chart2'
 import _ from 'lodash'
-import {get} from "@/utils/http";
+import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
+import { get } from '@/utils/http'

 export default {
  name: 'App',
  mixins: [entityDetailMixin],
  components: {
-    Chart2
+    Chart2,
+    ChartSingleValue
  },
  data () {
    return {
@@ -136,11 +167,59 @@ export default {
      entityType: 'app',
      trafficUrl: api.entityAppDetailTraffic,
      relationUrl: api.entityAppDetailRelation,
+      networkQuantityUrl: api.entityAppDetailNetworkQuantity,
+      linkInUrl: api.entityAppDetailLinkIn,
+      linkOutUrl: api.entityAppDetailLinkOut,
      alertUrl: api.entityAppDetailAlert,
      securityUrl: api.entityAppDetailSecurity,
      trafficUrlMap: api.entityAppDetailTrafficMap,
      chartData: null,
-      listMode: 'list'
+      listMode: 'list',
+      singleValues: {
+        chartInfos: [
+          {
+            params: {
+              icon: 'cn-icon cn-icon-time',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.avgRoundTripTime'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-http',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.httpResponseLatency'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-ssl',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.sslConLatency'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-package-loss',
+              unitType: unitTypes.percent
+            },
+            type: 51,
+            i18n: 'entities.sequenceGapLossPercent'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-upload',
+              unitType: unitTypes.percent
+            },
+            type: 51,
+            i18n: 'entities.pktRetransPercent'
+          }
+        ],
+        chartDatas: [null, null, null, null, null]
+      }
    }
  },
  methods: {
@@ -164,8 +243,21 @@ export default {
      })
    }
  },
-  mounted() {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
+  watch: {
+    entityData: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
+        this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
+        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
+        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
+        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
  },
  setup (props) {
    return {
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -160,7 +160,7 @@ import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import Chart2 from '@/views/charts/Chart2'
 import _ from 'lodash'
-import {get} from "@/utils/http";
+import { get } from '@/utils/http'
 export default {
  name: 'Domain',
  components: {
@@ -170,7 +170,7 @@ export default {
  mixins: [entityDetailMixin],
  data () {
    return {
-      entityData: {},
+      // entityData: {},
      entityType: 'domain',
      trafficUrl: api.entityDomainDetailTraffic,
      relationUrl: api.entityDomainDetailRelation,
@@ -211,7 +211,7 @@ export default {
          {
            params: {
              icon: 'cn-icon cn-icon-package-loss',
-              unitType: unitTypes.time
+              unitType: unitTypes.percent
            },
            type: 51,
            i18n: 'entities.sequenceGapLossPercent'
@@ -219,10 +219,10 @@ export default {
          {
            params: {
              icon: 'cn-icon cn-icon-upload',
-              unitType: unitTypes.time
+              unitType: unitTypes.percent
            },
            type: 51,
-            i18n: 'entities.avgRoundTripTime'
+            i18n: 'entities.pktRetransPercent'
          }
        ],
        chartDatas: [null, null, null, null, null]
@@ -255,17 +255,15 @@ export default {
      immediate: true,
      deep: true,
      handler (n) {
-        if ((n.pktRetransPercent && n.sequenceGapLossPercent && n.sslConLatency && n.establishLatency && n.httpResponseLatency) !== undefined) {
-          this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency') || null)
-          this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency') || null)
-          this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency') || null)
-          this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent') || null)
-          this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent') || null)
-        }
+        this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
+        this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
+        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
+        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
+        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
      }
    }
  },
-  mounted() {
+  mounted () {
    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
  },
  setup (props) {
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -55,6 +55,35 @@
      </div>
    </div>
  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <chart-single-value
+            v-for="(chartInfo, i) in singleValues.chartInfos"
+            :chart-info="chartInfo"
+            :chart-data="singleValues.chartDatas[i]"
+            :key="i"
+            class="cn-chart__single-value--detail-overview"
+        ></chart-single-value>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('entities.accessLink')}}</div>
+    <div class="overview__content">
+      <div class="overview__tags">
+        <div class="overview__tag">
+          <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
+          <span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
+        </div>
+        <div class="overview__tag">
+          <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
+          <span class="tag__value">{{entityData.linkInPercent ? unitConvert(entityData.linkInPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.alert')}}</div>
    <div class="overview__content">
@@ -95,7 +124,7 @@
      </div>
    </div>
  </div>
-  <div class="overview-map">
+  <div class="overview-map overview-map--ip">
    <chart2
        :chart-info="chart"
        :chart-data="chartData"
@@ -109,18 +138,20 @@

 <script>
 import entityDetailMixin from './entityDetailMixin'
+import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
 import { api } from '@/utils/api'
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import Chart2 from '@/views/charts/Chart2'
 import _ from 'lodash'
-import {get} from "@/utils/http";
+import { get } from '@/utils/http'

 export default {
  name: 'Ip',
  mixins: [entityDetailMixin],
  components: {
-    Chart2
+    Chart2,
+    ChartSingleValue
  },
  data () {
    return {
@@ -129,10 +160,58 @@ export default {
      trafficUrl: api.entityIpDetailTraffic,
      trafficUrlMap: api.entityIpDetailTrafficMap,
      relationUrl: api.entityIpDetailRelation,
+      networkQuantityUrl: api.entityIpDetailNetworkQuantity,
+      linkInUrl: api.entityIpDetailLinkIn,
+      linkOutUrl: api.entityIpDetailLinkOut,
      alertUrl: api.entityIpDetailAlert,
      securityUrl: api.entityIpDetailSecurity,
      listMode: 'list',
-      chartData: null
+      chartData: null,
+      singleValues: {
+        chartInfos: [
+          {
+            params: {
+              icon: 'cn-icon cn-icon-time',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.avgRoundTripTime'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-http',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.httpResponseLatency'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-ssl',
+              unitType: unitTypes.time
+            },
+            type: 51,
+            i18n: 'entities.sslConLatency'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-package-loss',
+              unitType: unitTypes.percent
+            },
+            type: 51,
+            i18n: 'entities.sequenceGapLossPercent'
+          },
+          {
+            params: {
+              icon: 'cn-icon cn-icon-upload',
+              unitType: unitTypes.percent
+            },
+            type: 51,
+            i18n: 'entities.pktRetransPercent'
+          }
+        ],
+        chartDatas: [null, null, null, null, null]
+      }
    }
  },
  methods: {
@@ -155,10 +234,23 @@ export default {
          this.chartData = response.data.result
        }
      })
-    },
+    }
  },
-  mounted() {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
+  watch: {
+    entityData: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
+        this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
+        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
+        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
+        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
  },
  setup (props) {
    const entityCopy = {
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -160,10 +160,18 @@ export default {
    queryEntityDetailLinkOutUrl () {
      if (this.linkOutUrl) {
        get(this.linkOutUrl, this.getQueryParams()).then(response => {
-          if (response.code === 200 && response.data.aggregation) {
-            const sum = response.data.aggregation.sum
-            const max = response.data.aggregation.max
-            this.entityData.linkOutPercent = (parseFloat(max / sum) * 100).toFixed(2)
+          if (response.code === 200) {
+            if (!this.$_.isEmpty(response.data.result)) {
+              let sum = 0
+              response.data.result.forEach(r => {
+                sum += parseFloat(r.bytes)
+              })
+              const sorted = response.data.result.sort((r1, r2) => {
+                return parseFloat(r2.bytes) - parseFloat(r1.bytes)
+              })
+              const max = parseFloat(sorted[0].bytes)
+              this.entityData.linkOutPercent = (parseFloat(max / sum) * 100).toFixed(2)
+            }
          }
        })
      }
@@ -192,11 +200,9 @@ export default {
      this.queryEntityDetailRelation()
      this.queryEntityDetailAlert()
      this.queryEntityDetailSecurity()
-      if (this.entityData.entityType === 'domain') {
-        this.queryEntityDetailNetworkQuantity()
-        this.queryEntityDetailLinkOutUrl()
-        this.queryEntityDetailLinkInUrl()
-      }
+      this.queryEntityDetailNetworkQuantity()
+      this.queryEntityDetailLinkOutUrl()
+      this.queryEntityDetailLinkInUrl()
    }
  },
  setup () {
--- a/src/views/entityExplorer/entityList/entityListMixin.js
+++ b/src/views/entityExplorer/entityList/entityListMixin.js
@@ -3,7 +3,7 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import * as echarts from 'echarts'
 import { entityListLineOption } from '@/components/charts/chart-options'
-import { unitTypes } from '@/utils/constants'
+import {riskLevelMapping, unitTypes} from '@/utils/constants'

 export default {
  props: {
@@ -75,6 +75,14 @@ export default {
      }
      return url
    },
+    appRisk () {
+      return function (level) {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.value == level
+        })
+        return (m && m.name) || level
+      }
+    },
    queryParams () {
      let params
      const now = window.$dayJs.tz().valueOf()