CN-297 feat: detections下拉（部分）

src/assets/css/components/index.scss

@@ -23,6 +23,7 @@
 @import './views/detections/detection-filter';
 @import './views/detections/detection-list/detection-list';
 @import './views/detections/detection-list/row';
+@import './views/detections/detection-overview';
 @import './views/charts/panel';
 @import 'views/charts/chartIpOpenPortBar';
 @import './views/charts/chartTable';

src/assets/css/components/views/detections/detection-overview.scss

@@ -0,0 +1,49 @@
+.detection-detail-overview {
+  display: flex;
+  position: relative;
+  padding: 0 30px;
+
+  &>div {
+    flex: 0 0 50%;
+    display: flex;
+    flex-direction: column;
+
+    .overview__title {
+      padding: 10px 0;
+      color: #333;
+      font-weight: bold;
+      font-size: 14px;
+
+      &:first-of-type {
+        padding-top: 0;
+      }
+    }
+
+    .overview__row {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: nowrap;
+      padding: 2px 10px 2px 0;
+      font-size: 14px;
+
+      .row__label {
+        padding-right: 20px;
+        min-width: 100px;
+        color: #6B717B;
+      }
+
+      .row__content {
+        display: flex;
+        color: #3976CB;
+
+        &.row__content--link {
+          font-style: italic;
+          text-decoration: underline;
+          color: #1890FF;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

src/utils/api.js

@@ -81,7 +81,9 @@ export const api = {
   detectionVictimIp: '/interface/detection/filter/victimIp',
   detectionVictimLocation: '/interface/detection/filter/victimLocation',
   detectionSeverity: '/interface/detection/filter/severity',
-  detectionListBasic: '/interface/detection/list/basic'
+  detectionListBasic: '/interface/detection/list/basic',
+  detectionOverviewBasic: '/interface/detection/detail/overview/basic',
+  detectionOverviewEvent: '/interface/detection/detail/overview/event'
 }
 
 /* panel */

src/views/detections/DetectionOverview.vue

@@ -1,9 +1,288 @@
 <template>
-
+  <div class="detection-detail-overview">
+    <div class="overview__left">
+      <div class="overview__title">{{$t('overall.remark')}}</div>
+      <div class="overview__row">
+        <div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
+      </div>
+      <div class="overview__title">Fields</div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detection.list.startTime')}}</div>
+        <div class="row__content">{{basicInfo.startTime ? dayJs.tz(getMillisecond(basicInfo.startTime)).format('YYYY-MM-DD HH:mm:ss') : '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.victimIp')}}</div>
+        <div class="row__content">{{basicInfo.victimIp || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.victimLocation')}}</div>
+        <div class="row__content">{{basicInfo.victimLocationCountry || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.victimAsn')}}</div>
+        <div class="row__content">{{basicInfo.victimAsn || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.offenderIp')}}</div>
+        <div class="row__content">{{basicInfo.offenderIp || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.offenderLocation')}}</div>
+        <div class="row__content">{{basicInfo.offenderLocationCountry || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.offenderAsn')}}</div>
+        <div class="row__content">{{basicInfo.offenderAsn || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('overall.domain')}}</div>
+        <div class="row__content">{{basicInfo.domain || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.domainCategory')}}</div>
+        <div class="row__content">{{basicInfo.domainCategoryName || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.domainDetail.categoryGroup')}}</div>
+        <div class="row__content">{{basicInfo.domainCategoryGroup || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.reputationLevel')}}</div>
+        <div class="row__content">{{basicInfo.domainReputationLevel || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">APP</div>
+        <div class="row__content">{{basicInfo.appName || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">APP {{$t('entities.category')}}</div>
+        <div class="row__content">{{basicInfo.appCategory || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">APP {{$t('entities.subcategory')}}</div>
+        <div class="row__content">{{basicInfo.appSubcategory || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.malware')}}</div>
+        <div class="row__content">{{basicInfo.malwareName || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.malwareAlias')}}</div>
+        <div class="row__content">{{basicInfo.malwareAlias || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.malwareDescription')}}</div>
+        <div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.malwarePlatforms')}}</div>
+        <div class="row__content">{{basicInfo.malwarePlatforms || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.malwareTechniques')}}</div>
+        <div class="row__content row__content--link">{{basicInfo.malwareTechniques || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.malwareGroups')}}</div>
+        <div class="row__content row__content--link">{{basicInfo.malwareGroups || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label">{{$t('detections.reference')}}</div>
+        <div class="row__content row__content--link">{{reference || '-'}}</div>
+      </div>
+<!--      <template v-if="detection.securityType === 'command and control' || detection.securityType === 'payload_delivery'">
+      </template>-->
+    </div>
+    <div class="overview__right">
+      <div class="overview__title">{{$t('detections.goToVictim')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: basicInfo.victimIp})}}</div>
+      </div>
+      <div class="overview__title">{{$t('detections.goToOffender')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: basicInfo.offenderIp})}}</div>
+      </div>
+      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
+      <div class="overview__row">
+        <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
+      </div>
+      <div class="overview__title">{{$t('detections.relatedDetections')}}</div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { getMillisecond } from '@/utils/date-util'
 export default {
-  name: 'DetectionOverview'
+  name: 'DetectionOverview',
+  props: {
+    detection: Object
+  },
+  data () {
+    return {
+      basicInfo: {},
+      events: [],
+      reference: 'https://attack.mitre.org'
+    }
+  },
+  methods: {
+    getMillisecond,
+    query () {
+      this.basicInfo = {
+        "eventId": 1212,
+        "offenderIp": "2.2.2.2",
+        "offenderLocationCountry": "China",
+        "offenderLocationProvince": "Hebei",
+        "offenderLocationRegion": "Xingtai",
+        "offenderAsn": "hehe",
+        "victimIp": "2.2.2.2",
+        "victimLocationCountry": "China",
+        "victimLocationProvince": "Hebei",
+        "victimLocationRegion": "Xingtai",
+        "victimAsn": "hehe",
+        "domain": "5aibj.com",
+        "domainCategoryName": "bbs",
+        "domainCategoryGroup": "hehe",
+        "domainReputationLevel": "high",
+        "appName": "express vpn",
+        "appCategory": "vpn",
+        "appSubcategory": "foreign vpn",
+        "appRisk": "critical",
+        "cryptominingPool": "btcP",
+        "cryptominingCoinType": "btc",
+        "cryptominingSoftware": "a",
+        "malwareName": "gtw",
+        "malwareAlias": "gt",
+        "malwareDescription": "this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,",
+        "malwarePlatforms": "windows",
+        "malwareTechniques": "Audio captures",
+        "malwareGroups": "Silver terrier",
+        "startTime": 1645417930
+      }
+      this.events = [
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645307930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645317930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645327930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645337930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645347930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645357930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645367930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645377930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645387930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645397930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645407930
+        },
+        {
+          "eventSeverity": "high",
+          "securityType": "command and control",
+          "offenderIp": "2.2.2.2",
+          "victimIp": "2.2.2.3",
+          "startTime": 1645417930
+        }
+      ]
+      Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
+      })
+    },
+    queryBasic () {
+      return new Promise((resolve, reject) => {
+        try {
+          get(api.detectionOverviewBasic, { eventId: this.detection.eventId }).then(response => {
+            if (response.code === 200) {
+              resolve(response.data.list)
+            } else {
+              reject(response)
+            }
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
+    },
+    queryEvent () {
+      return new Promise((resolve, reject) => {
+        try {
+          get(api.detectionOverviewEvent, { eventId: this.detection.eventId }).then(response => {
+            if (response.code === 200) {
+              resolve(response.data.list)
+            } else {
+              reject(response)
+            }
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
+    }
+  },
+  mounted () {
+    this.query()
+  }
 }
 </script>

src/views/detections/DetectionRow.vue

@@ -51,7 +51,7 @@
         <div class="cn-detection__detail-overview" v-if="!isCollapse">
           <el-divider></el-divider>
           <detection-overview
-              :entity="entityData"
+              :detection="detection"
               :time-filter="timeFilter"
           ></detection-overview>
         </div>
@@ -74,7 +74,6 @@ export default {
   },
   data () {
     return {
-      entityData: [],
       isCollapse: true, // 是否是折叠状态
       eventSeverityColor: {
         critical: '#D84C4C',