cyber-narrator-cn-ui/src/views/detections/overview/DetectionSecurityEventOverview.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">
          <template v-if="detection.securityType === 'command and control'">
            <span
              class="row__content--link"
              @click="goDetail('ip', detection.victimIp)"
              >{{ detection.victimIp }}</span>&nbsp;
            <span>
              {{$t('detection.commandAndControl')}}
            </span>
            <span class="row__content--link" @click="goDetail('ip', basicInfo.iocValue)">{{basicInfo.iocValue || '-'}}</span></template
          >
          <template v-else>
            <span
              class="row__content--link"
              @click="goDetail('ip', detection.victimIp)"
              >{{ detection.victimIp }}</span
            >&nbsp;
            <span>
              {{$t('detection.payloadAndDelivery')}}
            </span>
            <span class="row__content--link"
                  @click="goDetail('ip', basicInfo.iocValue)"
            >{{
                basicInfo.iocValue
            }}</span></template>
        </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
              ? dateFormatByAppearance(basicInfo.startTime)
              : '-'
          }}
        </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">
          <div
            class="row__tag"
            :style="`background-color:${eventSeverityColor[basicInfo.domainReputationLevel]}`"
          >
            {{ basicInfo.domainReputationLevel || '-' }}
          </div>
        </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('overall.appRisk') }}</div>
        <div class="row__content">
          <div
            class="row__tag"
            :style="`background-color:${eventSeverityColor[basicInfo.appRisk]}`"
          >
            {{ basicInfo.appRisk || '-' }}
          </div>
        </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">
          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
          <span
            class="row__content--link"
            @click="goDetail('ip', basicInfo.victimIp)">{{ basicInfo.victimIp }}</span>
        </div>
      </div>
      <div class="overview__title">{{ $t('detections.goToOffender') }}</div>
      <div class="overview__row">
        <div class="row__content">
          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
          <span
            class="row__content--link"
            @click="goDetail('ip', basicInfo.offenderIp)"
            >{{ basicInfo.offenderIp }}</span
          >&nbsp;&nbsp;
          <span
            class="row__content--link"
            @click="goDetail('domain', basicInfo.domain)"
            >{{ basicInfo.domain }}</span
          >
        </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) }}
          </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" style="height: 122px">
            <div>
              <div class="timeline__severity timeline__severity--high">
                <i
                  class="cn-icon cn-icon-alert-level"
                  :style="`color:${eventSeverityColor[event.eventSeverity]}`"
                ></i>
                <span>{{ event.eventSeverity }}</span>
              </div>
              <div class="timeline__security-type">
                {{ event.securityType }}
              </div>
              <div class="timeline__start-time">
                {{
                  dateFormatByAppearance(event.startTime)
                }}
              </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'
import { eventSeverityColor, unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import _ from 'lodash'
export default {
  name: 'DetectionOverview',
  props: {
    detection: Object
  },
  data () {
    return {
      eventSeverityColor,
      basicInfo: {},
      events: [],
      reference: 'https://attack.mitre.org'
    }
  },
  computed: {
    formatT0 () {
      const vm = this
      return function (event) {
        const diffSeconds = event.diffSeconds
        if (diffSeconds === 0) {
          return 'T0'
        }
        const eventStartTime = event.startTime
        const entityStartTime = vm.detection.startTime

        if (
          _.isNumber(diffSeconds) &&
          _.isNumber(eventStartTime) &&
          _.isNumber(entityStartTime)
        ) {
          const suffix = unitConvert(
            diffSeconds,
            unitTypes.time,
            's',
            null,
            0
          ).join('')
          if (eventStartTime > entityStartTime) {
            return `T0+${suffix}`
          } else if (eventStartTime < entityStartTime) {
            return `T0-${suffix}`
          }
        }
        return ''
      }
    }
  },
  methods: {
    getMillisecond,
    query () {
      Promise.all([this.queryBasic(), this.queryEvent()]).then((responses) => {
        responses[0] && (this.basicInfo = responses[0])
        responses[1] &&
          (this.events = responses[1].sort(
            (e1, e2) => e1.startTime - e2.startTime
          ))
      })
    },
    queryBasic () {
      return new Promise((resolve, reject) => {
        try {
          get(api.detection.securityEvent.overviewBasic, {
            eventId: this.detection.eventId,
            startTime: this.detection.startTime,
            endTime: this.detection.endTime
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result[0])
            } else {
              reject(response)
            }
          })
        } catch (e) {
          reject(e)
        }
      })
    },
    queryEvent () {
      return new Promise((resolve, reject) => {
        try {
          get(api.detection.securityEvent.overviewEvent, {
            startTime: this.detection.startTime,
            offenderIp: this.detection.offenderIp,
            victimIp: this.detection.victimIp
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result)
            } else {
              reject(response)
            }
          })
        } catch (e) {
          reject(e)
        }
      })
    },
    goDetail (type, name) {
      if (name) {
        const { href } = this.$router.resolve({
          path: '/entityDetail',
          query: {
            entityType: type,
            name: name
          }
        })
        window.open(href, '_blank')
      }
    }
  },
  mounted () {
    this.query()
  }
}
</script>