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

src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss

@@ -3,12 +3,12 @@
   .chart-list {
     .vue-grid-layout > .vue-grid-item {
       .cn-chart {
-         .app-detail__related-domain {
+        .app-detail__related-domain {
           display: flex;
           flex-direction: row;
           height: 100%;
           width: 100%;
-         .related-domain__list {
+          .related-domain__list {
             display: flex;
             flex-direction: column;
             flex: 0 0 25%;

src/assets/css/components/views/charts/chartEchartWithTable.scss

@@ -34,9 +34,9 @@
               }
             }
 
-            .chart-drawing{
+            /*.chart-drawing{
               height: calc(100% - 36px) !important;
-            }
+            }*/
           }
           .cn-chart__body.pie-with-table {
             flex-basis: 40%;

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -14,6 +14,11 @@
     .single-value__content {
       .content__data {
         font-size: 14px;
+        color: #333;
+        .single-value__unit {
+          font-size: 14px;
+          color: #333;
+        }
       }
       .content__title {
         font-size: 12px;

src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss

@@ -11,6 +11,12 @@
     width: 550px;
     height: 350px;
 
+    &.overview-map--ip {
+      height: 300px;
+    }
+    &.overview-map--app {
+      height: 325px;
+    }
     .cn-chart {
       height: 100%;
       width: 100%;
@@ -128,11 +134,11 @@
         border-radius: 4px;
 
         .tag__value {
-          padding-right: 5px;
           color: #3976CB;
           font-weight: bold;
         }
         .tag__desc {
+          padding-right: 5px;
           color: #3976CB;
         }
       }

src/components/advancedSearch/TagMode.vue

@@ -36,7 +36,7 @@
         <!-- 值 -->
         <div class="condition__value">
           <div v-if="meta.value.isEditing">
-            <el-input v-model="meta.value.value" size="mini" @blur="valueBlur(meta)" ref="valueInput"></el-input>
+            <el-input v-model="meta.value.value" size="mini" @blur="valueBlur(meta)" ref="valueInput" @keyup.enter="valueBlur(meta)"></el-input>
           </div>
           <span v-else @click="valueClick(meta)">{{meta.value.label}}</span>
         </div>

src/components/advancedSearch/meta/sql-parser.js

@@ -1,5 +1,6 @@
 import { GenericSQL, SqlParserVisitor } from 'dt-sql-parser'
 import Meta, { connection, condition, columnType, cloneMeta } from '@/components/advancedSearch/meta/meta'
+import { riskLevelMapping } from '@/utils/constants'
 import _ from 'lodash'
 // 补全语句，用于解析
 const sqlPrev = 'select a from b where '
@@ -87,7 +88,7 @@ export default class SqlParser extends SqlParserVisitor {
       if (isFullText) {
         if (meta.meta === condition) {
           if (meta.column.type !== columnType.fullText) {
-            sql += `${meta.column.name}${meta.operator.value}${meta.value.value} `
+            sql += `${meta.column.name}${meta.operator.value}${valueHandle(meta.value.value, meta.column.name)} `
           } else {
             sql += "QUERY('"
             this.columnList.forEach(column => {
@@ -100,7 +101,7 @@ export default class SqlParser extends SqlParserVisitor {
         if (meta.meta === condition) {
           sql += (meta.column.name)
           if (meta.column.type !== columnType.fullText) {
-            sql += `${meta.operator.value}${meta.value.value} `
+            sql += `${meta.operator.value}${valueHandle(meta.value.value, meta.column.name)} `
           } else {
             sql += ' '
           }
@@ -275,3 +276,19 @@ function handleInOrLike (value, type) {
     handleValue: v
   }
 }
+
+function valueHandle (value, columnName) {
+  if (value === "'unknown'") {
+    return "''"
+  } else {
+    if (columnName) {
+      if (columnName === 'app_risk') {
+        const m = riskLevelMapping.find(mapping => {
+          return `'${mapping.name}'` === value || `'${mapping.value}'` === value
+        })
+        return (m && m.value) || value
+      }
+    }
+    return value
+  }
+}

src/components/charts/PieTable.vue

@@ -9,9 +9,9 @@
       :current-row-key="tableNameColumn"
       tooltip-effect="light"
       :expand-row-keys="expandRowKeys"
-      :size="'mini'"
+      size="mini"
-      :height="'100%'">
+      height="100%">
-    <el-table-column type="expand" :min-width="'5%'">
+    <el-table-column type="expand" min-width="5%">
       <template #default="props">
         <div style="position: relative">
           <div class="chart__loading" style="top: 0; height: 100%; z-index: 1;" v-show="loading">
@@ -37,7 +37,7 @@
                 :prop="item.prop"
                 #default="{row}">
             <span v-if="item.prop === 'nameColumn'">
-                {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}}
+                {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:appRisk(row['appRiskLevel'])))}}
             </span>
               <span v-else-if="item.prop === 'tableNameColumn'">
                 {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
@@ -65,7 +65,7 @@
         :prop="item.prop"
         #default="{row}">
       <span v-if="item.prop === 'nameColumn'">
-          {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}}
+          {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:appRisk(row['appRiskLevel'])))}}
       </span>
       <span v-else-if="item.prop === 'tableNameColumn'">
           {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
@@ -87,7 +87,7 @@
 import unitConvert from '@/utils/unit-convert'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder } from '@/utils/tools'
-import { unitTypes } from '@/utils/constants'
+import { unitTypes, riskLevelMapping } from '@/utils/constants'
 
 export default {
   name: 'PieTable',
@@ -119,6 +119,16 @@ export default {
       }
     }
   },
+  computed: {
+    appRisk () {
+      return function (level) {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.value == level
+        })
+        return (m && m.name) || level
+      }
+    }
+  },
   data () {
     return {
       nameColumn: '',
@@ -133,7 +143,7 @@ export default {
           width: '20%'
         },
         {
-          label: this.$t('entities.category'),
+          label: this.$t(this.chartInfo.params.tableTypeColumnLabel),
           prop: 'nameColumn',
           width: '22%'
         },

src/components/entities/EntityTop.vue

@@ -81,9 +81,12 @@ export default {
         this.entityTopTenData = data.map(d => {
           return {
             ...d,
+            name: d.name || 'unknown',
             percent: (parseFloat(d.count / totalCount) * 100).toFixed(2)
           }
         })
+      } else {
+        this.entityTopTenData = []
       }
     },
     indexMethod (index) {

src/utils/api.js

@@ -42,6 +42,9 @@ export const api = {
   // app detail
   entityAppDetailTraffic: '/interface/entity/detail/overview/app/traffic',
   entityAppDetailRelation: '/interface/entity/detail/overview/app/relation',
+  entityAppDetailNetworkQuantity: '/interface/entity/detail/overview/app/networkQuantity',
+  entityAppDetailLinkIn: '/interface/entity/detail/overview/app/linkIn',
+  entityAppDetailLinkOut: '/interface/entity/detail/overview/app/linkOut',
   entityAppDetailAlert: '/interface/entity/detail/overview/app/alert',
   entityAppDetailSecurity: '/interface/entity/detail/overview/app/security',
   // domain detail
@@ -59,6 +62,9 @@ export const api = {
   entityDomainDetailTrafficMap: '/interface/entity/detail/domain/trafficMap',
   entityAppDetailTrafficMap: '/interface/entity/detail/app/trafficMap',
   entityIpDetailRelation: '/interface/entity/detail/overview/ip/relation',
+  entityIpDetailNetworkQuantity: '/interface/entity/detail/overview/ip/networkQuantity',
+  entityIpDetailLinkIn: '/interface/entity/detail/overview/ip/linkIn',
+  entityIpDetailLinkOut: '/interface/entity/detail/overview/ip/linkOut',
   entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert',
   entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security'
 }

src/utils/constants.js

@@ -136,7 +136,13 @@ export const chartPieTableTopOptions = [
   { name: 'Packets', value: 'packets' },
   { name: 'Bytes', value: 'bytes' }
 ]
-
+export const riskLevelMapping = [
+  { name: 'Trustworthy', value: 1 },
+  { name: 'Low Risk', value: 2 },
+  { name: 'Moderate Risk', value: 3 },
+  { name: 'Suspicious', value: 4 },
+  { name: 'High Risk', value: 5 }
+]
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',
   [storageKey.iso36112WorldLow]: 'worldChinaLow',

src/views/charts/charts/ChartEchartWithTable.vue

@@ -19,6 +19,7 @@ import { getUnitType } from '@/utils/unit-convert'
 import { replaceUrlPlaceholder } from '@/utils/tools'
 import { get } from '@/utils/http'
 import chartEchartMixin from './chart-echart-mixin'
+import { riskLevelMapping } from '@/utils/constants'
 
 export default {
   name: 'ChartEchartWithTable',
@@ -38,7 +39,15 @@ export default {
   components: {
     PieTable
   },
-  mounted () {
+  computed: {
+    appRisk () {
+      return function (level) {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.value == level
+        })
+        return (m && m.name) || level
+      }
+    }
   },
   methods: {
     handleQueryParams (queryParams) {
@@ -61,7 +70,7 @@ export default {
         }
         return {
           data: d,
-          name: d[chartParams.nameColumn],
+          name: this.appRisk(d[chartParams.nameColumn]),
           value: parseInt(d[chartParams.valueColumn]),
           unitType: unitType
         }

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>

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>
               <!-- 通用字段 -->

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() {
+  watch: {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
+    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 {

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'))
-          this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency') || null)
+        this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
-          this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency') || null)
+        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
-          this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency') || null)
+        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
-          this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent') || null)
+        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
-          this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent') || null)
-        }
       }
     }
   },
-  mounted() {
+  mounted () {
     this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
   },
   setup (props) {

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() {
+  watch: {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
+    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 = {

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) {
+          if (response.code === 200) {
-            const sum = response.data.aggregation.sum
+            if (!this.$_.isEmpty(response.data.result)) {
-            const max = response.data.aggregation.max
+              let sum = 0
-            this.entityData.linkOutPercent = (parseFloat(max / sum) * 100).toFixed(2)
+              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.queryEntityDetailNetworkQuantity()
+      this.queryEntityDetailLinkOutUrl()
-        this.queryEntityDetailLinkOutUrl()
+      this.queryEntityDetailLinkInUrl()
-        this.queryEntityDetailLinkInUrl()
-      }
     }
   },
   setup () {

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()

src/views/entityExplorer/search/ExplorerSearch.vue

@@ -187,12 +187,12 @@ export default {
         },
         {
           name: 'app_risk',
-          type: 'long',
+          type: 'string',
           // label: this.$t('trafficSummary.appRisk')
           label: 'APP risk'
         }
       ],
-      operatorList: ['=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'],
+      operatorList: ['=', '!=', '>', '<', '>=', '<='/*, 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'*/],
       connectionList: [
         {
           value: 'AND',