CN-297 feat: detections

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 {

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;
+}

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))
+        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))
-        this.metaList.splice(metaIndex, 1)
+        // 不是在首位，则删除时顺带删除前一个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)
+        }
       })
     }
   },

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)
     },

src/components/advancedSearch/meta/meta.js

@@ -71,9 +71,14 @@ export default class Meta {
 
   // 是否是完整的condition
   isCompleteCondition () {
-    return (this.column.type === columnType.fullText)
+    if (this.meta === condition) {
-      ? !_.isEmpty(this.column.name)
+      return (this.column.type === columnType.fullText)
-      : !_.isEmpty(this.column.name) && !_.isEmpty(this.operator.value) && !_.isEmpty(this.value.value)
+        ? !_.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状态

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',

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>
+                    <div style="display: flex">
-                    <span :style="filter.column === 'eventSeverity' ? 'padding-left: 10px' : ''">{{d.label}}</span>
+                      <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: {
+      eventSeverityColor
-        critical: '#D84C4C',
-        high: '#FE845D',
-        medium: '#FFB65A',
-        low: '#FFD82D',
-        info: '#D1BD50'
-      }
     }
   },
   methods: {

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'

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: {
+      eventSeverityColor
-        critical: '#D84C4C',
-        high: '#FE845D',
-        medium: '#FFB65A',
-        low: '#FFD82D',
-        info: '#D1BD50'
-      }
     }
   },
   methods: {
+    getMillisecond,
     /* 切换折叠状态 */
     switchCollapse () {
       this.isCollapse = !this.isCollapse

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',

src/views/detections/options/detectionOptions.js

@@ -19,9 +19,9 @@ export function getSeriesIndex (type) {
 }
 
 const activeAttackColorMappings = [
-  { value: 'Command and control', color: '#51a9ee' },
+  { value: 'command and control', color: '#51a9ee' },
-  { value: 'Payload_delivery', color: '#49bcf2' },
+  { value: 'payload delivery', color: '#49bcf2' },
-  { value: 'Cryptomining', color: '#4ad7eb' },
+  { 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: 'critical', color: '#d84c4c' },
-  { value: 'High', color: '#ff9a79' },
+  { value: 'high', color: '#ff9a79' },
-  { value: 'Medium', color: '#ffb65a' },
+  { value: 'medium', color: '#ffb65a' },
-  { value: 'Low', color: '#ffdd4a' },
+  { value: 'low', color: '#ffdd4a' },
-  { value: 'Info', color: '#d7c668' }
+  { 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',