cyber-narrator-cn-ui/src/views/detections/DetectionOverview.vue

<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 class="overview__row-timeline">
        <div class="row-timeline" v-for="event in events" :key="event">
          <div class="row-timeline__time-info" :style="event.startTime === basicInfo.startTime ? 'color: #333;font-weight: bold;' : ''">{{formatT0(event.startTime)}}</div>
          <div class="row-timeline__line">
            <div class="line-point-larger" v-if="event.startTime === basicInfo.startTime">
              <div class="line-point"></div>
            </div>
            <div v-else class="line-point"></div>
          </div>
          <div class="row-timeline__card">
            <div>
              <div class="timeline__severity timeline__severity--high">
                <i class="cn-icon cn-icon-alert-level"></i>
                <span>{{event.eventSeverity}}</span>
              </div>
              <div class="timeline__security-type">{{event.securityType}}</div>
              <div class="timeline__start-time">{{dayJs.tz(getMillisecond(event.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</div>
            </div>
          </div>
          <div class="row-timeline__foot">
            <div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.offenderIp) > -1}">
              <i class="cn-icon cn-icon-attacker"></i>
              <span>{{event.offenderIp}}</span>
            </div>
            <div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.victimIp) > -1}">
              <i class="cn-icon cn-icon-attacked"></i>
              <span>{{event.victimIp}}</span>
            </div>
          </div>
        </div>
      </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',
  props: {
    detection: Object
  },
  data () {
    return {
      basicInfo: {},
      events: [],
      reference: 'https://attack.mitre.org'
    }
  },
  computed: {
    formatT0 () {
      return function (startTime) {
        return startTime === this.basicInfo.startTime ? 'T0' : 'T0-10m'
      }
    }
  },
  methods: {
    getMillisecond,
    query () {
      this.basicInfo = {
        "eventId": 1212,
        "offenderIp": "112.2.2.3",
        "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": "critical",
          "securityType": "command and control",
          "offenderIp": "2.2.2.2",
          "victimIp": "112.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": 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>