CN-302 Detection-列表

src/assets/css/components/index.scss

@@ -21,6 +21,8 @@
 @import 'views/entityExplorer/entityList/detail-overview';
 @import './views/detections/detections';
 @import './views/detections/detection-filter';
+@import './views/detections/detection-list/detection-list';
+@import './views/detections/detection-list/row';
 @import './views/charts/panel';
 @import 'views/charts/chartIpOpenPortBar';
 @import './views/charts/chartTable';

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

@@ -0,0 +1,62 @@
+.detection-list {
+  width: 100%;
+  height: calc(100% - 42px);
+  flex: 1;
+  position: relative;
+
+  .detection__loading {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+
+    i {
+      position: absolute;
+      left: calc(50% - 15px);
+      top: calc(50% - 15px);
+      font-size: 30px;
+      color: #aaa;
+    }
+  }
+
+  .detection-list__content {
+    height: 100%;
+    width: 100%;
+    overflow: inherit;
+
+    .detection-list--block {
+      display: flex;
+      flex-wrap: wrap;
+      display: -webkit-flex;
+      justify-content: flex-start;
+      border-radius: 2px;
+      width: calc(100% - 10px);
+      height: 100%;
+      overflow: auto;
+    }
+    .detection-list--list {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: auto;
+
+      .cn-detection__shadow {
+        position: fixed;
+        height: 100vh;
+        width: 100vw;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        background-color: rgba(0, 0, 0, .2);
+      }
+    }
+  }
+
+
+  .detection__pagination{
+    position: absolute;
+    bottom: 9px;
+    height: 40px;
+    width: calc(100% - 538px);
+  }
+}

src/assets/css/components/views/detections/detection-list/row.scss

@@ -0,0 +1,140 @@
+.cn-detection--list {
+  display: flex;
+  .cn-detection__collapse {
+    margin-bottom: 1px;
+    padding-top: 30px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: #F3F7FA;
+
+    span {
+      transform: rotate(0);
+      transition: all linear .2s;
+      padding-top: 0;
+
+      &.reg-down {
+        padding-top: 2px;
+        transform: rotate(90deg);
+      }
+    }
+    span:hover {
+      cursor: pointer;
+    }
+
+    .cn-icon-arrow-right {
+      color: #ADBCCA;
+      font-size: 12px;
+    }
+  }
+  .cn-detection__case {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 9px 0;
+    margin-bottom: 1px;
+    background-color: white;
+
+    .cn-detection__icon {
+      margin-left: 13px;
+      margin-right: 13px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 5px;
+      height: 20px;
+      border-radius: 12px;
+    }
+    .cn-detection__row {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      justify-content: center;
+      flex-wrap: wrap;
+
+      .cn-detection__header {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        font-size: 16px;
+        padding-bottom: 3px;
+        color: #333333;
+        align-items: center;
+        i {
+          color:#7b8fa2;
+          margin-right: 5px;
+          font-size:18px;
+        }
+        .line {
+          color:#da5656;
+          margin-left:12px;
+          font-size: xx-small;
+          font-weight: bold;
+        }
+        .circle {
+          width:10px;
+          height:10px;
+          border:2px solid #da5656;
+          border-radius: 10px;
+          margin-top: 4px;
+          margin-right:12px;
+        }
+      }
+      .cn-detection__body {
+        display: flex;
+        flex-direction: column;
+
+        .body__basic-info {
+          display: flex;
+          flex-direction: row;
+
+          .basic-info {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            .basic-info__item {
+              padding-right: 40px;
+              i {
+                padding-right: 6px;
+                color: #8FA1BE;
+                font-size: 14px;
+              }
+              span {
+                font-size: 14px;
+              }
+              span:first-of-type {
+                color: #999;
+              }
+              span:last-of-type {
+                color: #666;
+              }
+            }
+          }
+          .show-detail {
+            flex-shrink: 0;
+            padding: 0 30px;
+            font-size: 12px;
+            color: #3976CB;
+
+            &:hover {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+    .cn-detection__detail-overview {
+      flex-basis: 100%;
+      padding: 0 10px;
+
+      .el-divider {
+        background-color: #EFF2F5;
+      }
+    }
+  }
+}

src/utils/api.js

@@ -78,6 +78,7 @@ export const api = {
   detectionAttackType:'/interface/detection/filter/attackType',
   detectionOffenderIp:'/interface/detection/filter/offenderIp',
   detectionSeverity:'/interface/detection/filter/severity',
+  detectionListBasic:'/interface/detection/list/basic'
 }
 
 /* panel */

src/views/detections/DetectionList.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="entity-list" id="detectionList">
+  <div class="detection-list" id="detectionList">
-    <div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
+    <div class="detection__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
-    <div class="entity-list__content">
+    <div class="detection-list__content">
-      <div class="entity-list--list">
+      <div class="detection-list--list">
         <div class="no-data" v-if="noData">No data</div>
-        <div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div>
+        <div v-if="!isCollapse" @click="collapse" class="cn-detection__shadow"></div>
         <detection-row
             v-for="(data, index) in listData"
             :detection="data"

src/views/detections/DetectionRow.vue

@@ -1,37 +1,54 @@
 <template>
-  <div class="cn-entity--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
+  <div class="cn-detection--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
     <!-- 左侧下拉按钮 -->
-    <div class="cn-entity__collapse">
+    <div class="cn-detection__collapse">
       <span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
     </div>
-    <div class="cn-entity__case">
+    <div class="cn-detection__case">
-      <div class="cn-entity__icon"><i class="el-icon-search"></i></div>
+      <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`">
-      <div class="cn-entity__row">
+
-        <div class="cn-entity__header">3.4.5.6</div>
+      </div>
-        <div class="cn-entity__body">
+      <div class="cn-detection__row">
+        <div class="cn-detection__header">
+          <i class="cn-icon cn-icon-attacker" ></i>{{detection.offenderIp}}
+          <span class="line">-------</span>
+          <span class="circle"></span>
+          <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp}}
+        </div>
+          <div class="cn-detection__body">
           <div class="body__basic-info">
             <div class="basic-info">
               <div class="basic-info__item">
-                <i class="cn-icon cn-icon-country"></i>
+                <i class="cn-icon cn-icon-severity-level"></i>
-                <span>{{$t('overall.country')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{$t('detection.list.eventSecurity')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>hehe</span>
+                <span>{{detection.eventSecurity}}</span>
               </div>
               <div class="basic-info__item">
-                <i class="cn-icon cn-icon-position"></i>
+                <i class="cn-icon cn-icon-event-type"></i>
-                <span>{{$t('overall.region')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{$t('detection.list.securityType')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>xixi</span>
+                <span>{{detection.securityType}}</span>
+              </div>
+              <div class="basic-info__item" v-if="detection.malwareName && detection.malwareName.length > 0 ">
+                <i class="cn-icon cn-icon-trojan"></i>
+                <span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{detection.malwareName}}</span>
+              </div>
+              <div class="basic-info__item" v-if="detection.cryptominingPool && detection.cryptominingPool.length > 0 ">
+                <i class="cn-icon cn-icon-mining-pool"></i>
+                <span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{detection.cryptominingPool}}</span>
               </div>
               <div class="basic-info__item">
-                <i class="cn-icon cn-icon-cloud"></i>
+                <i class="cn-icon cn-icon-time2"></i>
-                <span>{{$t('entities.asn')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>heihei</span>
+                <span>{{ dayJs.tz(detection.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
               </div>
             </div>
           </div>
         </div>
       </div>
       <el-collapse-transition>
-        <div class="cn-entity__detail-overview" v-if="!isCollapse">
+        <div class="cn-detection__detail-overview" v-if="!isCollapse">
           <el-divider></el-divider>
           <detection-overview
               :entity="entityData"
@@ -52,12 +69,20 @@ export default {
   },
   props: {
     index: Number,
-    timeFilter: Object
+    timeFilter: Object,
+    detection: Object
   },
   data () {
     return {
       entityData: [],
-      isCollapse: true // 是否是折叠状态
+      isCollapse: true, // 是否是折叠状态
+      eventSeverityColor: {
+        critical: '#D84C4C',
+        high: '#FE845D',
+        medium: '#FFB65A',
+        low: '#FFD82D',
+        info: '#D1BD50'
+      }
     }
   },
   methods: {

src/views/detections/Index.vue

@@ -43,7 +43,7 @@
               <div class="chart-header" >
                 <div class="chart-header__title">{{$t('detection.activeAttacker')}}</div>
               </div>
-              <div class="chart-content" id="detectionActiveAttacker">
+              <div class="chart-content" style="" id="detectionActiveAttacker">
               </div>
             </div>
           </div>
@@ -57,7 +57,7 @@
           ></detection-list>
         </div>
       </div>
-      <div class="entity__pagination" style="position: absolute; bottom: 0; width: 100%;">
+      <div class="entity__pagination" >
         <Pagination
             ref="pagination"
             :page-obj="pageObj"
@@ -526,6 +526,76 @@ export default {
         })
       })
     },
+    initListData(){
+      const queryParams = {
+        ...this.timeFilter,
+        q:this.q,
+      }
+      get(api.detectionListBasic, queryParams).then(response => {
+        response = {
+          "code": 200,
+          "success": true,
+          "msg": "OK",
+          "data": {
+            "resultType": "table",
+            "result": [
+              {
+                "eventId": 1212,
+                "securityType": "ddos",
+                "offenderIp": "1.1.1.1",
+                "victimIp": "2.2.2.2",
+                "eventSecurity": "critical",
+                "malwareName": "the great wall",
+                "cryptominingPool": "a",
+                "startTime": 978456923589
+              },
+              {
+                "eventId": 1212,
+                "securityType": "ddos",
+                "offenderIp": "1.1.1.1",
+                "victimIp": "2.2.2.2",
+                "eventSecurity": "high",
+                "cryptominingPool": "a",
+                "startTime": 1111111111
+              },
+              {
+                "eventId": 1212,
+                "securityType": "ddos",
+                "offenderIp": "1.1.1.1",
+                "victimIp": "2.2.2.2",
+                "eventSecurity": "low",
+                "malwareName": "the great wall",
+                "startTime": 1111111111
+              },
+              {
+                "eventId": 1212,
+                "securityType": "ddos",
+                "offenderIp": "1.1.1.1",
+                "victimIp": "2.2.2.2",
+                "eventSecurity": "medium",
+                "malwareName": "the great wall",
+                "cryptominingPool": "a",
+                "startTime": 1111111111
+              },
+              {
+                "eventId": 1212,
+                "securityType": "ddos",
+                "offenderIp": "1.1.1.1",
+                "victimIp": "2.2.2.2",
+                "eventSecurity": "info",
+                "malwareName": "the great wall",
+                "cryptominingPool": "a",
+                "startTime": 1111111111
+              }
+            ]
+          }
+        }
+
+        if (response.code === 200) {
+          this.listData = response.data.result
+        }
+      })
+    },
     timeRefreshChange () {
       if (!this.$refs.dateTimeRange.isCustom) {
         const value = this.timeFilter.dateRangeValue
@@ -582,6 +652,7 @@ export default {
     this.initSeverityPerData()
     this.initCategoryPerData()
     this.initActiveAttackData()
+    this.initListData()
   },
   watch: {
     timeFilter (n) {

src/views/detections/options/detectionOptions.js

@@ -209,9 +209,8 @@ export const activeAttackBar = {
   grid: {
     top: 20,
     left: 10,
-    right: 25,
+    right: 70,
-    bottom: 20,
+    bottom: 20
-    containLabel: true
   },
   yAxis: {
     type: 'category',
@@ -226,6 +225,7 @@ export const activeAttackBar = {
   },
   series: [{
     barWidth: 5,
+    barMaxHeight:20,
     itemStyle: {
       normal: {
         color: function(params) {