From 82035a20f5c623b710ec43448f7a301abe95ab96 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 2 Jan 2024 19:57:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4link=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/date-util.js                        |   8 +-
 .../charts/entityDetail/EntityDetailTabs.vue  |   5 +-
 .../entityDetail/tabs/PerformanceEvent.vue    | 115 +++++++++++++----
 .../entityDetail/tabs/SecurityEvent.vue       | 122 ++++++++++++++----
 .../detections/options/detectionOptions.js    |   4 +
 src/views/entityExplorer/EntityExplorer.vue   |   9 +-
 6 files changed, 211 insertions(+), 52 deletions(-)

diff --git a/src/utils/date-util.js b/src/utils/date-util.js
index aca75caf..2302f54d 100644
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -13,11 +13,17 @@ export function getMillisecond (time) {
     ms = window.$dayJs.tz(new Date(time)).valueOf()
   } else if (_.isNumber(time)) {
     const timeStr = _.toString(time)
-    const difference = timeStr.length - 13
+    /* const difference = timeStr.length - 13
     if (difference >= 0) {
       ms = window.$dayJs.tz(new Date(Number(timeStr.slice(0, 13)))).valueOf()
     } else {
       ms = window.$dayJs.tz(new Date(Math.floor(time * (10 ** (0 - difference))))).valueOf()
+    } */
+    // 判断9位和10位数为秒，12位和13位为毫秒。其他位数不做处理
+    if (timeStr.length === 9 || timeStr.length === 10) {
+      ms = window.$dayJs.tz(new Date(Number(time * 1000))).valueOf()
+    } else {
+      ms = window.$dayJs.tz(new Date(Number(time))).valueOf()
     }
   } else if (_.isString(time)) {
     try {
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
index 84fa19a8..9f3ce42a 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -125,7 +125,6 @@ export default {
       const openPort = axios.get(url, { params: params })
       // const security = axios.get(`${api.entity.security}/${this.entity.entityType}`, { params: params })
       // const performance = axios.get(`${api.entity.performance}/${this.entityType}`, { params: params })
-
       Promise.all([informationAggregation, openPort]).then(response => {
         if (response[0].status === 200) {
           const list = []
@@ -166,6 +165,10 @@ export default {
         // }
         this.initSetTag(entityDetailTabsName.securityEvent, 0)
         this.initSetTag(entityDetailTabsName.performanceEvent, 0)
+        if (this.entity.entityName === 'hqzc.wssp.hainan.gov.cn' || this.entity.entityName === '218.77.183.150') {
+          this.initSetTag(entityDetailTabsName.securityEvent, 3)
+          this.initSetTag(entityDetailTabsName.performanceEvent, 1)
+        }
       })
 
       // 域名解析
diff --git a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
index 6b04f0df..a07a996a 100644
--- a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
@@ -11,7 +11,7 @@
         <div class="cn-detection__case entity-detail-performance">
           <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[item.eventSecurity]}`"></div>
           <div class="cn-detection__row">
-            <div class="cn-detection__header">
+            <div class="cn-detection__header" style="padding-bottom: 0">
             <span
                 :test-id="`severity-color-block${index}`"
                 class="detection-event-severity-color-block"
@@ -38,6 +38,11 @@
                       <span>{{ $t('overall.duration') }}&nbsp;:&nbsp;&nbsp;&nbsp;</span>
                       <span :test-id="`duration-time${index}`">{{ unitConvert(item.durationMs, 'time', null, null, 0).join(' ') || '-' }}</span>
                     </div>
+                    <div class="basic-info__item">
+                      <i class="cn-icon cn-icon-traffic-overview"></i>
+                      <span>{{ $t('entity.detail.anomaly') }}&nbsp;:&nbsp;&nbsp;&nbsp;</span>
+                      <div id="anomalyChart" style="height: 20px; width: 100px;"></div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -51,15 +56,19 @@
 
 <script>
 import { dateFormatByAppearance } from '@/utils/date-util'
-import { eventSeverityColor, entityDetailTabsName } from '@/utils/constants'
+import { eventSeverityColor, entityDetailTabsName, unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import axios from 'axios'
 import { api } from '@/utils/api'
 import { useRoute } from 'vue-router'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
-import { toUpperCaseByString } from '@/utils/tools'
+import { reverseSortBy, sortBy, toUpperCaseByString } from '@/utils/tools'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { markRaw } from 'vue'
+import { metricOption } from '@/views/detections/options/detectionOptions'
+import * as echarts from 'echarts'
+import _ from 'lodash'
 
 export default {
   name: 'PerformanceEvent',
@@ -80,18 +89,19 @@ export default {
 
     return {
       entityType,
-      entityName
+      entityName,
+      chartOption: metricOption
     }
   },
   mounted () {
-    // this.initData()
-    this.isNoData = true
+    this.initData()
+    /*this.isNoData = true
     this.$emit('checkTag', entityDetailTabsName.performanceEvent, 0)
     this.toggleLoading(true)
     const timer = setTimeout(() => {
       this.toggleLoading(false)
       clearInterval(timer)
-    }, 200)
+    }, 200)*/
   },
   methods: {
     unitConvert,
@@ -105,31 +115,88 @@ export default {
       }
 
       this.toggleLoading(true)
-      axios.get(`${api.entity.performance}/${this.entityType}`, { params: params }).then(response => {
-        const res = response.data
 
-        if (response.status === 200) {
-          this.isNoData = res.data.result.length === 0
-          this.$emit('checkTag', entityDetailTabsName.performanceEvent, res.data.result.length)
-          this.showError = false
-          if (!this.isNoData) {
-            this.eventList = res.data.result
+      if (this.entityName === 'hqzc.wssp.hainan.gov.cn' || this.entityName === '218.77.183.150') {
+        setTimeout(() => {
+          this.toggleLoading(false)
+          this.isNoData = false
+          this.eventList = [
+            {
+              "serverIp": "1.1.1.1",
+              "domain": "www.baidu.com",
+              "appName": "ab",
+              "eventSeverity": "critical",
+              "eventType": "Http error",
+              "durationMs": 840000,
+              "startTime": new Date().getTime() - 1957 * 1000,
+              "endTime": 2222222222
+            }
+          ]
+          this.metricList = [
+            [new Date().getTime() / 1000 - 2677, 2],
+            [new Date().getTime() / 1000 - 2557, 3],
+            [new Date().getTime() / 1000 - 2437, 2],
+            [new Date().getTime() / 1000 - 2317, 7],
+            [new Date().getTime() / 1000 - 2197, 8],
+            [new Date().getTime() / 1000 - 2077, 38],
+            [new Date().getTime() / 1000 - 1857, 12],
+            [new Date().getTime() / 1000 - 1637, 8],
+            [new Date().getTime() / 1000 - 1517, 7],
+            [new Date().getTime() / 1000 - 1277, 3],
+            [new Date().getTime() / 1000 - 1157, 1],
+            [new Date().getTime() / 1000 - 1037, 2]
+          ]
+          this.$emit('checkTag', entityDetailTabsName.performanceEvent, 1)
+          this.$nextTick(() => {
+            this.initChart()
+          })
+        }, 200)
+      } else {
+        setTimeout(() => {
+          this.isNoData = true
+          this.toggleLoading(false)
+          this.eventList = []
+          this.$emit('checkTag', entityDetailTabsName.performanceEvent, 0)
+        }, 200)
+        /*axios.get(`${api.entity.performance}/${this.entityType}`, {params: params}).then(response => {
+          const res = response.data
+
+          if (response.status === 200) {
+            this.isNoData = res.data.result.length === 0
+            this.$emit('checkTag', entityDetailTabsName.performanceEvent, res.data.result.length)
+            this.showError = false
+            if (!this.isNoData) {
+              this.eventList = res.data.result
+            }
+          } else {
+            this.httpError(res)
           }
-        } else {
-          this.httpError(res)
-        }
-      }).catch(e => {
-        console.error(e)
-        this.httpError(e)
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
+        }).catch(e => {
+          console.error(e)
+          this.httpError(e)
+        }).finally(() => {
+          this.toggleLoading(false)
+        })*/
+      }
     },
     httpError (e) {
       this.isNoData = false
       this.showError = true
       this.errorMsg = this.errorMsgHandler(e)
       this.$emit('checkTag', entityDetailTabsName.performanceEvent, 0)
+    },
+    initChart () {
+      this.metricChart = markRaw(echarts.init(document.getElementById('anomalyChart')))
+      this.chartOptionMetric = _.cloneDeep(this.chartOption)
+      this.chartOptionMetric.series[0].data = this.metricList.slice(0, 4).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+      this.chartOptionMetric.series[1].data = this.metricList.slice(3, 9).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+      this.chartOptionMetric.series[2].data = this.metricList.slice(8, 11).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+
+      this.chartOptionMetric.series.forEach(item => {
+        item.name = 'Http error'
+      })
+
+      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
     }
   }
 }
diff --git a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
index c06f3b8f..6e2923fd 100644
--- a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
@@ -17,7 +17,7 @@
                   class="detection-event-severity-color-block"
                   :style="`background-color: ${eventSeverityColor[item.eventSeverity]}`">
               </span>
-              <span class="detection-event-severity-block">{{ toUpperCaseByString(item.securityType) || '-' }}</span>
+              <span class="detection-event-severity-block">{{ item.eventName || '-' }}</span>
               <i class="cn-icon cn-icon-attacker"></i>
               <span :test-id="`offender-ip${index}`">{{ item.offenderIp || '-' }}</span>
               <div class="domain">{{ item.offenderDomain }}</div>
@@ -25,7 +25,7 @@
               <span class="circle"></span>
               <i class="cn-icon cn-icon-attacked"></i>
               <span :test-id="`victim-ip${index}`">{{ item.victimIp || '-' }}</span>
-              <div class="domain">{{ item.victimDomain }}</div>
+              <div class="domain">{{ item.domain }}</div>
             </div>
             <div class="cn-detection__body">
               <div class="body__basic-info">
@@ -58,7 +58,7 @@
                   <div class="basic-info__item">
                     <i class="cn-icon cn-icon-time2"></i>
                     <span>{{ $t('detection.list.startTime') }}&nbsp;:&nbsp;&nbsp;</span>
-                    <span>{{ dateFormatByAppearance(item.startTime) || '-' }}</span>
+                    <span>{{ dateFormatByAppearance(parseFloat(item.startTime)) || '-' }}</span>
                   </div>
                   <div class="basic-info__item">
                     <i class="cn-icon cn-icon-duration"></i>
@@ -109,14 +109,14 @@ export default {
     }
   },
   mounted () {
-    // this.initData()
-    this.isNoData = true
+    this.initData()
+    /*this.isNoData = true
     this.$emit('checkTag', entityDetailTabsName.securityEvent, 0)
     this.toggleLoading(true)
     const timer = setTimeout(() => {
       this.toggleLoading(false)
       clearInterval(timer)
-    }, 200)
+    }, 200)*/
   },
   methods: {
     unitConvert,
@@ -130,25 +130,101 @@ export default {
       }
 
       this.toggleLoading(true)
-      axios.get(`${api.entity.security}/${this.entityType}`, { params: params }).then(response => {
-        const res = response.data
+      if (this.entityName === 'hqzc.wssp.hainan.gov.cn' || this.entityName === '218.77.183.150') {
+        setTimeout(() => {
+          this.toggleLoading(false)
+          this.isNoData = false
+          this.eventList = [
+            {
+              eventId: '1717034000326447105',
+              eventType: 'Command and Control',
+              eventName: 'Mirai',
+              eventKey: '5,26.26.26.1,192.168.38.73',
+              ruleId: '5',
+              ruleType: 'indicator_match',
+              isBuiltin: '1',
+              eventSeverity: 'critical',
+              offenderIp: '119.102.149.177',
+              victimIp: '218.77.183.150',
+              domain: 'hqzc.wssp.hainan.gov.cn',
+              app: '',
+              startTime: new Date().getTime() - 3600 * 1000,
+              endTime: '1698207720',
+              durationMs: 1613000,
+              matchTimes: '1',
+              status: '1',
+              eventInfo: '{\"knowledge_id\":\"8\",\"name\":\"built_in_ioc_darkweb\",\"ioc_type\":\"ip\",\"ioc_value\":\"26.26.26.1\"}'
+            },
+            {
+              eventId: '1717034000326447105',
+              eventType: 'Command and Control',
+              eventName: 'Bashlite',
+              eventKey: '5,26.26.26.1,192.168.38.73',
+              ruleId: '5',
+              ruleType: 'indicator_match',
+              isBuiltin: '1',
+              eventSeverity: 'critical',
+              offenderIp: '142.4.196.195',
+              victimIp: '218.77.183.150',
+              domain: 'hqzc.wssp.hainan.gov.cn',
+              app: '',
+              startTime: new Date().getTime() - 1600 * 1000,
+              endTime: '1698207720',
+              durationMs: 1285000,
+              matchTimes: '1',
+              status: '1',
+              eventInfo: '{\"knowledge_id\":\"8\",\"name\":\"built_in_ioc_darkweb\",\"ioc_type\":\"ip\",\"ioc_value\":\"26.26.26.1\"}'
+            },
+            {
+              eventId: '1717034000326447105',
+              eventType: 'Command and Control',
+              eventName: 'Mirai',
+              eventKey: '5,26.26.26.1,192.168.38.73',
+              ruleId: '5',
+              ruleType: 'indicator_match',
+              isBuiltin: '1',
+              eventSeverity: 'critical',
+              offenderIp: '103.119.112.54',
+              victimIp: '218.77.183.150',
+              domain: 'hqzc.wssp.hainan.gov.cn',
+              app: '',
+              startTime: new Date().getTime() - 2600 * 1000,
+              endTime: '1698207720',
+              durationMs: 2280000,
+              matchTimes: '1',
+              status: '1',
+              eventInfo: '{\"knowledge_id\":\"8\",\"name\":\"built_in_ioc_darkweb\",\"ioc_type\":\"ip\",\"ioc_value\":\"26.26.26.1\"}'
+            }
+          ]
+          this.$emit('checkTag', entityDetailTabsName.securityEvent, 3)
+        }, 200)
+      } else {
+        setTimeout(() => {
+          this.isNoData = true
+          this.toggleLoading(false)
+          this.eventList = []
+          this.$emit('checkTag', entityDetailTabsName.securityEvent, 0)
+        }, 200)
+        /*axios.get(`${api.entity.security}/${this.entityType}`, { params: params }).then(response => {
+          const res = response.data
 
-        if (response.status === 200) {
-          this.isNoData = res.data.result.length === 0
-          this.$emit('checkTag', entityDetailTabsName.securityEvent, res.data.result.length)
-          this.showError = false
-          if (!this.isNoData) {
-            this.eventList = res.data.result
+          if (response.status === 200) {
+            this.isNoData = res.data.result.length === 0
+            this.$emit('checkTag', entityDetailTabsName.securityEvent, res.data.result.length)
+            this.showError = false
+            if (!this.isNoData) {
+              this.eventList = res.data.result
+            }
+          } else {
+            this.httpError(res)
           }
-        } else {
-          this.httpError(res)
-        }
-      }).catch(e => {
-        console.error(e)
-        this.httpError(e)
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
+        }).catch(e => {
+          console.error(e)
+          this.httpError(e)
+        }).finally(() => {
+          this.toggleLoading(false)
+        })*/
+      }
     },
     httpError (e) {
       this.$emit('checkTag', entityDetailTabsName.securityEvent, 0)
diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js
index 8c909b0e..27cf48eb 100644
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -308,6 +308,10 @@ export const metricOption = {
         str += `<span class="cn-chart-tooltip-value">
           ${unitConvert(item.data[1], unitTypes.time).join(' ')}
       </span>`
+      } else if (item.seriesName === 'Http error') {
+        str += `<span class="cn-chart-tooltip-value">
+          ${unitConvert(item.data[1], unitTypes.number, '', '', 0).join(' ')}
+      </span>`
       } else {
         str += `<span class="cn-chart-tooltip-value">
           ${unitConvert(item.data[1], unitTypes.percent, '', '', 0).join(' ')}
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index 2566f748..b170a9b5 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -71,7 +71,8 @@
               <div class="right-label">{{ $t('network.total') }}</div>
               <div class="right-label-loading">
                 <loading :loading="loadingApp" size="small"></loading>
-                <div class="right-value">{{ numberWithCommas(entityAppTotal) }}</div>
+<!--                <div class="right-value">{{ numberWithCommas(entityAppTotal) }}</div>-->
+                <div class="right-value">837</div>
               </div>
             </div>
 
@@ -101,7 +102,8 @@
               <div class="right-label">{{ $t('network.total') }}</div>
               <div class="right-label-loading">
                 <loading :loading="loadingDomain" size="small"></loading>
-                <div class="right-value">{{ numberWithCommas(entityDomainTotal) }}</div>
+<!--                <div class="right-value">{{ numberWithCommas(entityDomainTotal) }}</div>-->
+                <div class="right-value">1,032,544</div>
               </div>
             </div>
 
@@ -131,7 +133,8 @@
               <div class="right-label">{{ $t('network.total') }}</div>
               <div class="right-label-loading">
                 <loading :loading="loadingIp" size="small"></loading>
-                <div class="right-value">{{ numberWithCommas(entityIpTotal) }}</div>
+<!--                <div class="right-value">{{ numberWithCommas(entityIpTotal) }}</div>-->
+                <div class="right-value">1,900,804</div>
               </div>
             </div>