CN-403 fix: performance详情域名截取二级域名

src/router/index.js

@@ -49,6 +49,10 @@ const routes = [
       {
         path: '/chart',
         component: () => import('@/views/settings/Chart')
+      },
+      {
+        path: '/temp',
+        component: () => import('@/views/Temp')
       }
     ]
   }

src/utils/tools.js

@@ -479,50 +479,50 @@ export function sortBy (i) {
 export function extensionEchartY (chart) {
   // 判断是否创建过div框,如果创建过就不再创建了
   // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
-  let id = document.getElementById("extension")
+  const id = document.getElementById('extension')
   if (!id) {
-    let div = "<div id = 'extension' style=\"display:block\"></div>"
+    const div = "<div id = 'extension' style=\"display:block\"></div>"
-    let contentDiv = document.createElement("div")
+    const contentDiv = document.createElement('div')
     contentDiv.setAttribute('id', 'extension')
     contentDiv.setAttribute('style', 'display:block')
     document.documentElement.append(contentDiv)
   }
   chart.on('mouseover', function (params) {
     // 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
-    if(params.componentType === "yAxis") {
+    if (params.componentType === 'yAxis') {
       // 设置悬浮文本的位置以及样式
-      let extEle = document.getElementById("extension")
+      const extEle = document.getElementById('extension')
-      extEle.style.cssText = "display:inline;position:absolute;" +
+      extEle.style.cssText = 'display:inline;position:absolute;' +
-          "    padding: 12px;" +
+          '    padding: 12px;' +
-          "    max-width: 400px !important;" +
+          '    max-width: 400px !important;' +
-          "    color: #666;" +
+          '    color: #666;' +
-          "    background-color: rgb(255, 255, 255);" +
+          '    background-color: rgb(255, 255, 255);' +
-          "    font-size: 14px;" +
+          '    font-size: 14px;' +
-          "    line-height: 20px;" +
+          '    line-height: 20px;' +
-          "    font-weight:400; " +
+          '    font-weight:400; ' +
-          "    font-family: \"Microsoft YaHei\"" +
+          '    font-family: "Microsoft YaHei"' +
-          "    border-style: solid;" +
+          '    border-style: solid;' +
-          "    border-width: 1px;" +
+          '    border-width: 1px;' +
-          "    border-radius: 4px;" +
+          '    border-radius: 4px;' +
-          "    border-color: transparent !important;" +
+          '    border-color: transparent !important;' +
-          "    box-shadow: rgb(0 0 0 / 30%) 0px 0px 3px;" +
+          '    box-shadow: rgb(0 0 0 / 30%) 0px 0px 3px;' +
-          "    white-space: nowrap;" +
+          '    white-space: nowrap;' +
-          "    z-index: 99999999;"
+          '    z-index: 99999999;'
 
-      extEle.innerHTML = params.value;
+      extEle.innerHTML = params.value
       document.documentElement.onmousemove = function (event) {
-        let extEle = document.getElementById("extension")
+        const extEle = document.getElementById('extension')
-        let xx = event.pageX - extEle.offsetWidth - 20
+        const xx = event.pageX - extEle.offsetWidth - 20
-        let yy = event.pageY + 20
+        const yy = event.pageY + 20
-        extEle.style.cssText = extEle.style.cssText+"top:"+yy+"px;left:"+xx+"px;"
+        extEle.style.cssText = extEle.style.cssText + 'top:' + yy + 'px;left:' + xx + 'px;'
       }
     }
   })
   chart.on('mouseout', function (params) {
     // 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
-    if(params.componentType == "yAxis") {
+    if (params.componentType == 'yAxis') {
-      let extEle = document.getElementById("extension")
+      const extEle = document.getElementById('extension')
-      extEle.style.cssText = "display:none;"
+      extEle.style.cssText = 'display:none;'
     }
   })
 }

src/views/charts/Chart.vue

@@ -354,7 +354,7 @@ export default {
   },
   data () {
     return {
-      tabHandleClickType: '',
+      tabHandleClickType: ''
     }
   },
   props: {
@@ -395,7 +395,7 @@ export default {
       } else {
         return getOption(this.chartInfo.type)
       }
-    },
+    }
   },
   methods: {
     resize () {
@@ -414,19 +414,19 @@ export default {
     initEchartsWithTable () {
       this.$refs['chart' + this.chartInfo.id] &&
         this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
-          `chart${this.chartInfo.id}`,
+          `chart${this.chartInfo.id}`
         )
     },
     query (params) {
       this.$emit('query', params)
-    },
+    }
   },
   watch: {
     tabHandleClickType: {
       deep: true,
       handler (n) {
         this.tabHandleClickType = n
-      },
+      }
     }
   },
   setup (props) {
@@ -442,7 +442,7 @@ export default {
       isSingleValue: isSingleValue(props.chartInfo.type),
       isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
       isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(
-        props.chartInfo.type,
+        props.chartInfo.type
       ),
       isRelationShip: isRelationShip(props.chartInfo.type),
       isTable: isTable(props.chartInfo.type),

src/views/charts/ChartHeader.vue

@@ -236,7 +236,7 @@ import {
   isBasicTable,
   isGroup,
   isEchartsWithTable,
-  isAlarmInfo,
+  isAlarmInfo
 } from './charts/tools'
 import ChartError from '@/views/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
@@ -246,7 +246,7 @@ import {
   chartActiveIpTableOrderOptions,
   chartPieTableTopOptions,
   eventSeverity,
-  chartTableColumnMapping,
+  chartTableColumnMapping
 } from '@/utils/constants'
 
 export default {
@@ -255,17 +255,17 @@ export default {
     chartInfo: Object,
     errorInfo: {
       type: String,
-      default: '',
+      default: ''
     },
     isError: {
       type: Boolean,
-      default: false,
+      default: false
     },
     table: Object,
-    orderPieTable: Object,
+    orderPieTable: Object
   },
   components: {
-    ChartError,
+    ChartError
   },
   data () {
     return {
@@ -280,30 +280,30 @@ export default {
         tableData: [
           {
             name: '192.168.20.21',
-            num: 111,
+            num: 111
           },
           {
             name: '192.168.20.22',
-            num: 345,
+            num: 345
           },
           {
             name: '192.168.20.23',
-            num: 111,
+            num: 111
           },
           {
             name: '192.168.20.24',
-            num: 345,
+            num: 345
           },
           {
             name: '192.168.20.25',
-            num: 111,
+            num: 111
           },
           {
             name: '192.168.20.26',
-            num: 345,
+            num: 345
-          },
+          }
-        ], // table的所有数据
+        ] // table的所有数据
-      },
+      }
     }
   },
   methods: {
@@ -346,13 +346,13 @@ export default {
         this.isFocusAll = false
       }
       this.$emit('tabHandleClick', item)
-    },
+    }
   },
   watch: {
     isFocus: {
       deep: true,
-      handler(n) {},
+      handler (n) {}
-    },
+    }
   },
   computed: {
     showRefreshButton () {
@@ -361,7 +361,7 @@ export default {
       const isGroupAndParentIsBlock =
         this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
       return !isGroupAndParentIsBlock
-    },
+    }
   },
   setup (props) {
     const dateRangeValue = 60
@@ -382,8 +382,8 @@ export default {
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
       isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
       isGroup: isGroup(props.chartInfo.type),
-      isAlarmInfo: isAlarmInfo(props.chartInfo.type),
+      isAlarmInfo: isAlarmInfo(props.chartInfo.type)
+    }
   }
-  },
 }
 </script>

src/views/charts/charts/ChartAlarmInfo.vue

@@ -119,7 +119,7 @@ export default {
     chartInfo: Object,
     chartData: [Array, Object],
     tabHandleClickType: String,
-    queryParams: Object,
+    queryParams: Object
   },
   data () {
     return {
@@ -151,7 +151,7 @@ export default {
         isNoData = false
       }
       return isNoData
-    },
+    }
   },
   watch: {
     tabHandleClickType: {
@@ -160,11 +160,11 @@ export default {
         this.$nextTick(() => {
           this.getData(1, n)
         })
-      },
+      }
     },
     alarmInfoCount: {
       deep: true,
-      handler(n) {},
+      handler (n) {}
     },
     queryParams: {
       deep: true,
@@ -172,25 +172,25 @@ export default {
         if (n.startTime && n.endTime) {
           this.getCount(1)
         }
-      },
+      }
-    },
+    }
   },
   components: {
-    ChartTablePagination,
+    ChartTablePagination
   },
   methods: {
     unitConvert,
     getMillisecond,
     getCount () {
-      let countQuery = {
+      const countQuery = {
         startTime: this.queryParams.startTime,
         endTime: this.queryParams.endTime,
         eventSeverity:
-          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
+          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
       }
       this.$nextTick(() => {
         get('/interface/dns/alarmInfoCount', {
-          ...countQuery,
+          ...countQuery
         }).then((response) => {
           if (response.code === 200) {
             this.alarmInfoCount = response.data
@@ -209,20 +209,20 @@ export default {
             : n
           : this.tabHandleClickType === 'All'
             ? ''
-          : this.tabHandleClickType,
+            : this.tabHandleClickType
       }
       const query = {
         startTime: this.queryParams.startTime,
         endTime: this.queryParams.endTime,
         eventSeverity:
-          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
+          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
       }
       this.$emit('getAlarmInfo', null, extraParams, false, {
         startTime: query.startTime,
-        endTime: query.endTime,
+        endTime: query.endTime
       })
       get('/interface/dns/alarmInfoCount', {
-        ...query,
+        ...query
       }).then((response) => {
         if (response.code === 200) {
           this.alarmInfoCount = response.data
@@ -231,7 +231,7 @@ export default {
     },
     pageJump (val) {
       this.getData(val)
-    },
+    }
-  },
+  }
 }
 </script>

src/views/charts/charts/ChartAppBasicInfo.vue

@@ -4,9 +4,9 @@
       <div style="display: flex; justify-content: space-between; width: 100%;">
         <el-descriptions :column="1" style="padding: 20px 30px;">
           <el-descriptions-item :label="$t('overall.appName') + ':'">{{$_.get(chartData, "name") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "allName") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "appLongname") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "tech") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "appTechnology") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "description") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "appDescription") || '-'}}</el-descriptions-item>
         </el-descriptions>
         <div class="cn-chart__body-single">
           <div class="cn-chart__body-single-table">

src/views/charts/charts/ChartEchart.vue

@@ -83,7 +83,7 @@ export default {
             otherData.forEach(data => {
               otherSum = otherSum + data.num
             })
-            chartDataTmp.push({'num':otherSum,'name':'other'})
+            chartDataTmp.push({ num: otherSum, name: 'other' })
           } else if (this.chartData.length <= 5) {
             chartDataTmp = this.chartData.slice(0, this.chartData.length)
             chartDataTmp.forEach(data => {

src/views/charts/charts/ChartSingleValue.vue

@@ -139,7 +139,7 @@ export default {
   props: {
     chartInfo: Object,
     chartData: [Array, Object],
-    queryParams: Object,
+    queryParams: Object
   },
   data () {
     return {
@@ -147,7 +147,7 @@ export default {
       color: '',
       type: 0,
       chartOption: null,
-      timer: null,
+      timer: null
     }
   },
   watch: {
@@ -158,8 +158,8 @@ export default {
         this.icon = n.params.icon
         this.color = n.params.color
         this.type = n.type
-      },
+      }
-    },
+    }
   },
   computed: {
     handleSingleValue () {
@@ -214,7 +214,7 @@ export default {
         }
         return c
       }
-    },
+    }
   },
   methods: {
     chartSingleValueTotal () {
@@ -234,29 +234,29 @@ export default {
                 data: r.values.map((v) => [
                   Number(v[0]) * 1000,
                   Number(v[1]),
-                  chartParams.unitType,
+                  chartParams.unitType
                 ]),
                 lineStyle: {
-                  color: getChartColor[i],
+                  color: getChartColor[i]
-                },
+                }
               }
             })
             myChart.setOption(this.chartOption)
-          },
+          }
         )
       }
-    },
+    }
   },
   mounted () {
     this.$nextTick(
       () =>
         (this.timer = setTimeout(() => {
           this.chartSingleValueTotal()
-        }, 200)),
+        }, 200))
     )
   },
   deactivated () {
     clearTimeout(this.timer)
-  },
+  }
 }
 </script>

src/views/charts/charts/ChartTablePagination.vue

@@ -39,10 +39,10 @@ export default {
   },
   watch: {
     pageSizeForAlarm: {
-      deep:true,
+      deep: true
     },
     total: {
-      deep:true,
+      deep: true
     }
   },
   methods: {

src/views/charts/charts/ChartTwoSituationStatistics.vue

@@ -35,13 +35,13 @@ export default {
       result: {
         doh: {
           count: 111,
-          percent: 0.85,
+          percent: 0.85
         },
         dot: {
           count: 111,
-          percent: 80.85,
+          percent: 80.85
-        },
+        }
-      },
+      }
     }
   }
 }

src/views/charts/charts/chart-echart-mixin.js

@@ -84,14 +84,14 @@ export default {
           this.myChart2.setOption(this.chartOption)
           this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
         }
-        let _this = this
+        const _this = this
-        window.addEventListener("resize", function(){
+        window.addEventListener('resize', function () {
           _this.$store.getters.getChartList.forEach(chart => {
             if (chart) {
               chart.resize()
             }
           })
-        });
+        })
       } finally {
         setTimeout(() => {
           this.$emit('showLoading', false)

src/views/charts/charts/tools.js

@@ -223,11 +223,11 @@ export function getLayout (type) {
 
 export function getGroupHeight (arr) {
   if (arr.length) {
-    let minYArr = [...arr]
+    const minYArr = [...arr]
     minYArr.sort((a, b) => {
       return a.y - b.y
     })
-    let maxYArr = [...arr]
+    const maxYArr = [...arr]
     maxYArr.sort((a, b) => {
       return (b.y + b.h) - (a.y + a.h)
     })

src/views/detections/Index.vue

@@ -347,7 +347,7 @@ export default {
           const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
           const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
 
-          let xData = []
+          const xData = []
           dataMap.forEach(function (value, key) {
             // eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
             value.forEach(item => {
@@ -357,13 +357,13 @@ export default {
             })
           })
           eventSeverityTrendOption.series.forEach(serie => {
-            let seriesData = []
+            const seriesData = []
             xData.forEach(item => {
               if (dataMap.has(serie.name)) {
-                let hasX = dataMap.get(serie.name).some(function(v) {
+                const hasX = dataMap.get(serie.name).some(function (v) {
                   if (item == v[0]) {
                     seriesData.push(Number(v[1]))
-                    return true;
+                    return true
                   }
                 })
                 if (!hasX) {

src/views/detections/options/detectionOptions.js

@@ -254,13 +254,13 @@ export const activeAttackBar = {
     axisLabel: {
       show: true,
       width: 95,
-      overflow:'truncate',
+      overflow: 'truncate'
 
     },
     splitLine: {
       show: false
     },
-    triggerEvent: true,
+    triggerEvent: true
   },
   series: [{
     barWidth: 5,

src/views/detections/overview/DetectionPerformanceEventAppOverview.vue

@@ -45,7 +45,12 @@
     <div class="overview__right">
       <div class="overview__title">{{$t('detections.goToEntity')}}</div>
       <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.appName})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('app', detection.appName)">{{detection.appName}}</span>
+        </div>
       </div>
       <div class="overview__title">{{$t('detections.goToHunt')}}</div>
       <div class="overview__row">
@@ -116,11 +121,11 @@ export default {
         path: '/entityDetail',
         query: {
           entityType: type,
-          name: name,
+          name: name
-        },
+        }
       })
       window.open(href, '_blank')
-    },
+    }
   },
   mounted () {
     this.query()

src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue

@@ -49,7 +49,12 @@
     <div class="overview__right">
       <div class="overview__title">{{$t('detections.goToEntity')}}</div>
       <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.domain})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('domain', computeSecondaryDomain(detection.domain))">{{computeSecondaryDomain(detection.domain)}}</span>
+        </div>
       </div>
       <div class="overview__title">{{$t('detections.goToHunt')}}</div>
       <div class="overview__row">
@@ -61,7 +66,7 @@
 
 <script>
 import { api, getData } from '@/utils/api'
-import { eventSeverityColor } from '@/utils/constants'
+import { eventSeverityColor, topDomain } from '@/utils/constants'
 export default {
   name: 'DetectionPerformanceEventDomainOverview',
   props: {
@@ -94,6 +99,32 @@ export default {
         }
         return result || '-'
       }
+    },
+    computeSecondaryDomain () {
+      return function (name) {
+        // 命中的顶级域名
+        let hitTopDomain = ''
+        // 同顶级域名比对
+        const hits = []
+        topDomain.forEach(td => {
+          const hitIndex = name.lastIndexOf(td)
+          if (hitIndex > -1 && hitIndex + td.length === name.length) {
+            hits.push(td)
+          }
+        })
+        if (hits.length > 0) {
+          hits.sort((a, b) => {
+            return b.split('.').length - a.split('.').length
+          })
+          hitTopDomain = hits[0]
+        } else {
+          const arr = name.split('.')
+          hitTopDomain = arr[arr.length - 1]
+        }
+        const index = name.lastIndexOf(hitTopDomain)
+        const preArr = name.substring(0, index).split('.')
+        return [preArr[preArr.length - 2], hitTopDomain].join('.')
+      }
     }
   },
   methods: {
@@ -120,11 +151,11 @@ export default {
         path: '/entityDetail',
         query: {
           entityType: type,
-          name: name,
+          name: name
-        },
+        }
       })
       window.open(href, '_blank')
-    },
+    }
   },
   mounted () {
     this.query()

src/views/detections/overview/DetectionPerformanceEventIpOverview.vue

@@ -39,7 +39,12 @@
     <div class="overview__right">
       <div class="overview__title">{{$t('detections.goToEntity')}}</div>
       <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.serverIp})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('ip', detection.serverIp)">{{detection.serverIp}}</span>
+        </div>
       </div>
       <div class="overview__title">{{$t('detections.goToHunt')}}</div>
       <div class="overview__row">
@@ -108,11 +113,11 @@ export default {
         path: '/entityDetail',
         query: {
           entityType: type,
-          name: name,
+          name: name
-        },
+        }
       })
       window.open(href, '_blank')
-    },
+    }
   },
   mounted () {
     this.query()

src/views/detections/overview/DetectionSecurityEventOverview.vue

@@ -173,9 +173,7 @@
           <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
           <span
             class="row__content--link"
-            @click="goDetail('ip', basicInfo.victimIp)"
+            @click="goDetail('ip', basicInfo.victimIp)"></span>
-            >{{ basicInfo.victimIp }}</span
-          >
         </div>
       </div>
       <div class="overview__title">{{ $t('detections.goToOffender') }}</div>
@@ -287,14 +285,14 @@ import _ from 'lodash'
 export default {
   name: 'DetectionOverview',
   props: {
-    detection: Object,
+    detection: Object
   },
   data () {
     return {
       eventSeverityColor,
       basicInfo: {},
       events: [],
-      reference: 'https://attack.mitre.org',
+      reference: 'https://attack.mitre.org'
     }
   },
   computed: {
@@ -318,7 +316,7 @@ export default {
             unitTypes.time,
             's',
             null,
-            0,
+            0
           ).join('')
           if (eventStartTime > entityStartTime) {
             return `T0+${suffix}`
@@ -328,7 +326,7 @@ export default {
         }
         return ''
       }
-    },
+    }
   },
   methods: {
     getMillisecond,
@@ -337,7 +335,7 @@ export default {
         responses[0] && (this.basicInfo = responses[0])
         responses[1] &&
           (this.events = responses[1].sort(
-            (e1, e2) => e1.startTime - e2.startTime,
+            (e1, e2) => e1.startTime - e2.startTime
           ))
       })
     },
@@ -347,7 +345,7 @@ export default {
           get(api.detection.securityEvent.overviewBasic, {
             eventId: this.detection.eventId,
             startTime: this.detection.startTime,
-            endTime: this.detection.endTime,
+            endTime: this.detection.endTime
           }).then((response) => {
             if (response.code === 200) {
               resolve(response.data.result[0])
@@ -366,7 +364,7 @@ export default {
           get(api.detection.securityEvent.overviewEvent, {
             startTime: this.detection.startTime,
             offenderIp: this.detection.offenderIp,
-            victimIp: this.detection.victimIp,
+            victimIp: this.detection.victimIp
           }).then((response) => {
             if (response.code === 200) {
               resolve(response.data.result)
@@ -384,14 +382,14 @@ export default {
         path: '/entityDetail',
         query: {
           entityType: type,
-          name: name,
+          name: name
-        },
+        }
       })
       window.open(href, '_blank')
-    },
+    }
   },
   mounted () {
     this.query()
-  },
+  }
 }
 </script>

src/views/entityExplorer/entityList/Row.vue

@@ -200,17 +200,17 @@ export default {
   name: 'Row',
   props: {
     index: Number,
-    timeFilter: Object,
+    timeFilter: Object
   },
   components: {
-    DetailOverview,
+    DetailOverview
   },
   mixins: [entityListMixin, entityDetailMixin, relatedServer],
   data () {
     return {
       isCollapse: true, // 是否是折叠状态
       trafficUrl: '',
-      entityType: '',
+      entityType: ''
     }
   },
   computed: {
@@ -257,7 +257,7 @@ export default {
       }
       this.entityType = type
       return type
-    },
+    }
   },
   watch: {
     entityData: {
@@ -281,13 +281,13 @@ export default {
               break
           }
         }
-      },
+      }
-    },
+    }
   },
   setup () {
     return {
       unitConvert,
-      unitTypes,
+      unitTypes
     }
   },
   methods: {
@@ -309,7 +309,7 @@ export default {
         ip: this.entityType
       }
       return queryParams
-    },
+    }
-  },
+  }
 }
 </script>

src/views/entityExplorer/entityList/detailOverview/App.vue

@@ -4,19 +4,23 @@
     <div class="overview__content">
       <div class="overview__row">
         <div class="row__label row__label--width130">APP ID</div>
-        <div class="row__content">{{entityData.appId|| '-'}}</div>
+        <div class="row__content">{{entity.appId|| '-'}}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
-        <div class="row__content">{{entityData.appCategory|| '-'}}</div>
+        <div class="row__content">{{entity.appCategory|| '-'}}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.subcategory')}}</div>
-        <div class="row__content">{{entityData.appSubcategory || '-'}}</div>
+        <div class="row__content">{{entity.appSubcategory || '-'}}</div>
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.riskLevel')}}</div>
-        <div class="row__content">{{appRisk(entityData.appRisk) || '-'}}</div>
+        <div class="row__content">{{appRisk(entity.appRisk) || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.remark')}}</div>
+        <div class="row__content">{{entity.appDescription || '-'}}</div>
       </div>
     </div>
   </div>