CN-297 feat: detections

2022-02-22 22:22:15 +08:00
parent 2640e8fd2c
commit 8975ff904a
11 changed files with 106 additions and 52 deletions
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -44,9 +44,14 @@
          display: flex;
          align-items: center;
          padding: 5px 0;
+          margin-right: 5px;
+          .el-checkbox__label {
+            width: 100%;
+          }

          .filter__checkbox-label {
            display: flex;
+            justify-content: space-between;
            align-items: center;

            .severity-color-block {
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -169,3 +169,10 @@
    }
  }
 }
+.row__tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 4px;
+  color: white;
+}
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -280,7 +280,7 @@ export default {
        const newColumn = this.columnList.find(column => {
          return column.name === param.newParam.column
        })
-        const meta = this.metaList.find(m => m.column.name === oldColumn.name && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
+        const meta = this.metaList.find(m => m.column && m.column.name === oldColumn.name && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
        if (meta) {
          meta.column.name = newColumn.name
          meta.column.type = newColumn.type
@@ -296,8 +296,15 @@ export default {
        const column = this.columnList.find(c => {
          return c.name === param.column
        })
-        const metaIndex = this.metaList.findIndex(m => m.column.name === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
-        this.metaList.splice(metaIndex, 1)
+        const metaIndex = this.metaList.findIndex(m => m.column && m.column.name === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
+        // 不是在首位，则删除时顺带删除前一个index（and或or），否则顺带删除后一个index
+        if (metaIndex > 0) {
+          this.metaList.splice(metaIndex - 1, 2)
+        } else if (this.metaList.length === 1) {
+          this.metaList.splice(metaIndex, 1)
+        } else {
+          this.metaList.splice(metaIndex, 2)
+        }
      })
    }
  },
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -110,7 +110,10 @@ export default {
        const column = this.columnList.find(c => c.name === param.column)
        // 将对应内容替换为空串
        const sqlPiece = `${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`.trim()
-        current = current.replace(sqlPiece, '')
+        const sqlPieceWithConnection = [` AND ${sqlPiece}`, ` OR ${sqlPiece}`, `${sqlPiece} AND `, `${sqlPiece} OR `, sqlPiece]
+        sqlPieceWithConnection.forEach(piece => {
+          current = current.replace(piece, '')
+        })
      })
      toRaw(this.codeMirror).setValue(current)
    },
--- a/src/components/advancedSearch/meta/meta.js
+++ b/src/components/advancedSearch/meta/meta.js
@@ -71,9 +71,14 @@ export default class Meta {

  // 是否是完整的condition
  isCompleteCondition () {
-    return (this.column.type === columnType.fullText)
-      ? !_.isEmpty(this.column.name)
-      : !_.isEmpty(this.column.name) && !_.isEmpty(this.operator.value) && !_.isEmpty(this.value.value)
+    if (this.meta === condition) {
+      return (this.column.type === columnType.fullText)
+        ? !_.isEmpty(this.column.name)
+        : !_.isEmpty(this.column.name) && !_.isEmpty(this.operator.value) && !_.isEmpty(this.value.value)
+    } else if (this.meta === connection) {
+      return !!this.value
+    }
+    return false
  }

  // 取消editing状态
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -143,6 +143,28 @@ export const riskLevelMapping = [
  { name: 'Suspicious', value: 4 },
  { name: 'High Risk', value: 5 }
 ]
+export const eventSeverity = {
+  critical: 'critical',
+  high: 'high',
+  medium: 'medium',
+  low: 'low',
+  info: 'info'
+}
+export const eventSeverityColor = {
+  critical: '#D84C4C',
+  high: '#FE845D',
+  medium: '#FFB65A',
+  low: '#FFD82D',
+  info: '#D1BD50'
+}
+export const securityType = {
+  commandAndControl: 'common and control',
+  payloadDelivery: 'payload delivery',
+  cryptomining: 'cryptomining',
+  phishing: 'phishing',
+  dga: 'dga',
+  ddos: 'ddos'
+}
 export const iso36112 = {
  [storageKey.iso36112Capital]: 'data/countriesWithCapital',
  [storageKey.iso36112WorldLow]: 'worldChinaLow',
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -12,8 +12,11 @@
              <template v-for="(d, i) in filter.data" :key="i">
                <el-checkbox :label="d.value" v-if="!filter.showIndex || filter.showIndex >= i">
                  <div class="filter__checkbox-label">
-                    <span class="severity-color-block" v-if="filter.column === 'eventSeverity'" :style="`background-color: ${eventSeverityColor[d.value]}`"></span>
-                    <span :style="filter.column === 'eventSeverity' ? 'padding-left: 10px' : ''">{{d.label}}</span>
+                    <div style="display: flex">
+                      <span class="severity-color-block" v-if="filter.column === 'eventSeverity'" :style="`background-color: ${eventSeverityColor[d.value]}`"></span>
+                      <span :style="filter.column === 'eventSeverity' ? 'padding-left: 10px' : ''">{{d.label}}</span>
+                    </div>
+                    <div v-if="d.count || d.count === 0">{{d.count}}</div>
                  </div>
                </el-checkbox>
              </template>
@@ -27,6 +30,7 @@
 </template>

 <script>
+import { eventSeverityColor } from '@/utils/constants'
 export default {
  name: 'DetectionFilter',
  props: {
@@ -36,13 +40,7 @@ export default {
  },
  data () {
    return {
-      eventSeverityColor: {
-        critical: '#D84C4C',
-        high: '#FE845D',
-        medium: '#FFB65A',
-        low: '#FFD82D',
-        info: '#D1BD50'
-      }
+      eventSeverityColor
    }
  },
  methods: {
--- a/src/views/detections/DetectionOverview.vue
+++ b/src/views/detections/DetectionOverview.vue
@@ -48,7 +48,9 @@
      </div>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.reputationLevel')}}</div>
-        <div class="row__content">{{basicInfo.domainReputationLevel || '-'}}</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>
@@ -62,6 +64,12 @@
        <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>
@@ -119,7 +127,7 @@
          <div class="row-timeline__card">
            <div>
              <div class="timeline__severity timeline__severity--high">
-                <i class="cn-icon cn-icon-alert-level"></i>
+                <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>
@@ -146,6 +154,7 @@
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getMillisecond } from '@/utils/date-util'
+import { eventSeverityColor } from '@/utils/constants'
 export default {
  name: 'DetectionOverview',
  props: {
@@ -153,6 +162,7 @@ export default {
  },
  data () {
    return {
+      eventSeverityColor,
      basicInfo: {},
      events: [],
      reference: 'https://attack.mitre.org'
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -41,7 +41,7 @@
              <div class="basic-info__item">
                <i class="cn-icon cn-icon-time2"></i>
                <span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{ dayJs.tz(detection.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+                <span>{{dayJs.tz(getMillisecond(detection.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
            </div>
          </div>
@@ -61,6 +61,8 @@
 </template>

 <script>
+import { eventSeverityColor } from '@/utils/constants'
+import { getMillisecond } from '@/utils/date-util'
 import DetectionOverview from '@/views/detections/DetectionOverview'
 export default {
  name: 'DetectionRow',
@@ -75,16 +77,11 @@ export default {
  data () {
    return {
      isCollapse: true, // 是否是折叠状态
-      eventSeverityColor: {
-        critical: '#D84C4C',
-        high: '#FE845D',
-        medium: '#FFB65A',
-        low: '#FFD82D',
-        info: '#D1BD50'
-      }
+      eventSeverityColor
    }
  },
  methods: {
+    getMillisecond,
    /* 切换折叠状态 */
    switchCollapse () {
      this.isCollapse = !this.isCollapse
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -210,20 +210,20 @@ export default {
            resultType: 'matrix',
            result: [
              {
-                legend: "Critical",
+                legend: "critical",
                values: [[1435781430781, "5"], [1435781431781, "3"],[1435781432781, "5"], [1435781433781, "3"]]
              },
              {
-                legend: "High",
+                legend: "high",
                values: [[1435781430781, "2"], [1435781431781, "3"],[1435781432781, "6"], [1435781433781, "4"]]
              }, {
-                legend: "Medium",
+                legend: "medium",
                values: [[1435781430781, "4"], [1435781431781, "1"],[1435781432781, "5"], [1435781433781, "3"]]
              }, {
-                legend: "Low",
+                legend: "low",
                values: [[1435781430781, "1"], [1435781431781, "4"],[1435781432781, "1"], [1435781433781, "3"]]
              }, {
-                legend: "Info",
+                legend: "info",
                values: [[1435781430781, "5"], [1435781431781, "7"],[1435781432781, "5"], [1435781433781, "8"]]
              }
            ]
@@ -262,19 +262,19 @@ export default {
            resultType: 'table',
            result: [
              {
-                eventSeverity: 'Critical',
+                eventSeverity: 'critical',
                count: 1048
              }, {
-                eventSeverity: 'High',
+                eventSeverity: 'high',
                count: 735
              }, {
-                eventSeverity: 'Medium',
+                eventSeverity: 'medium',
                count: 580
              }, {
-                eventSeverity: 'Low',
+                eventSeverity: 'low',
                count: 484
              }, {
-                eventSeverity: 'Info',
+                eventSeverity: 'info',
                count: 300
              }
            ]
@@ -312,13 +312,13 @@ export default {
            resultType: 'table',
            result: [
              {
-                attackType: 'Command and control',
+                attackType: 'command and control',
                count: 1048
              }, {
-                attackType: 'Payload_delivery',
+                attackType: 'payload delivery',
                count: 735
              }, {
-                attackType: 'Cryptomining',
+                attackType: 'cryptomining',
                count: 580
              }, {
                attackType: 'phishing',
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -19,9 +19,9 @@ export function getSeriesIndex (type) {
 }

 const activeAttackColorMappings = [
-  { value: 'Command and control', color: '#51a9ee' },
-  { value: 'Payload_delivery', color: '#49bcf2' },
-  { value: 'Cryptomining', color: '#4ad7eb' },
+  { value: 'command and control', color: '#51a9ee' },
+  { value: 'payload delivery', color: '#49bcf2' },
+  { value: 'cryptomining', color: '#4ad7eb' },
  { value: 'phishing', color: '#4cd4c8' },
  { value: 'dga', color: '#7acc7e' },
  { value: 'ddos', color: '#a7db69' }
@@ -33,11 +33,11 @@ export function getAttackColor (type) {
 }

 const severityColorMappings = [
-  { value: 'Critical', color: '#d84c4c' },
-  { value: 'High', color: '#ff9a79' },
-  { value: 'Medium', color: '#ffb65a' },
-  { value: 'Low', color: '#ffdd4a' },
-  { value: 'Info', color: '#d7c668' }
+  { value: 'critical', color: '#d84c4c' },
+  { value: 'high', color: '#ff9a79' },
+  { value: 'medium', color: '#ffb65a' },
+  { value: 'low', color: '#ffdd4a' },
+  { value: 'info', color: '#d7c668' }
 ]

 export function getSeverityColor (type) {
@@ -100,7 +100,7 @@ export const multipleBarOption = {
  },
  series: [
    {
-      name: 'Critical',
+      name: 'critical',
      type: 'bar',
      barWidth: 15,
      seriesLayoutBy: 'row',
@@ -109,7 +109,7 @@ export const multipleBarOption = {
      }
    },
    {
-      name: 'High',
+      name: 'high',
      type: 'bar',
      barWidth: 15,
      seriesLayoutBy: 'row',
@@ -118,7 +118,7 @@ export const multipleBarOption = {
      }
    },
    {
-      name: 'Medium',
+      name: 'medium',
      type: 'bar',
      barWidth: 15,
      seriesLayoutBy: 'row',
@@ -127,7 +127,7 @@ export const multipleBarOption = {
      }
    },
    {
-      name: 'Low',
+      name: 'low',
      type: 'bar',
      barWidth: 15,
      seriesLayoutBy: 'row',
@@ -136,7 +136,7 @@ export const multipleBarOption = {
      }
    },
    {
-      name: 'Info',
+      name: 'info',
      type: 'bar',
      barWidth: 15,
      seriesLayoutBy: 'row',