CN-381 feat : Detection 安全事件界面列表增加域名信息

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

@@ -1,5 +1,6 @@
 .cn-detection--list {
   display: flex;
+
   .cn-detection__collapse {
     margin-bottom: 1px;
     padding-top: 18px;
@@ -19,6 +20,7 @@
         transform: rotate(90deg);
       }
     }
+
     span:hover {
       cursor: pointer;
     }
@@ -28,6 +30,7 @@
       font-size: 12px;
     }
   }
+
   .cn-detection__case {
     flex: 1;
     display: flex;
@@ -48,6 +51,7 @@
       height: 20px;
       border-radius: 12px;
     }
+
     .cn-detection__row {
       display: flex;
       flex-direction: column;
@@ -63,26 +67,41 @@
         padding-bottom: 3px;
         color: #333333;
         align-items: center;
+
         i {
-          color:#7b8fa2;
+          color: #7b8fa2;
           margin-right: 5px;
-          font-size:18px;
+          font-size: 18px;
         }
+
         .line {
-          color:#da5656;
+          color: #da5656;
-          margin-left:12px;
+          margin-left: 12px;
           font-size: xx-small;
           font-weight: bold;
         }
+
         .circle {
-          width:10px;
+          width: 10px;
-          height:10px;
+          height: 10px;
-          border:2px solid #da5656;
+          border: 2px solid #da5656;
           border-radius: 10px;
           margin-top: 4px;
-          margin-right:12px;
+          margin-right: 12px;
+        }
+
+        .domain {
+          background: #EFF2F5;
+          border-radius: 2px;
+          font-family: Roboto-Italic;
+          font-size: 14px;
+          color: #333333;
+          letter-spacing: 0;
+          line-height: 14px;
+          font-weight: 400;
         }
       }
+
       .cn-detection__body {
         display: flex;
         flex-direction: column;
@@ -101,22 +120,27 @@
               padding-right: 40px;
               display: flex;
               align-items: center;
+
               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;
@@ -130,6 +154,7 @@
         }
       }
     }
+
     .cn-detection__detail-overview {
       flex-basis: 100%;
       padding: 0 10px;
@@ -139,4 +164,4 @@
       }
     }
   }
-}
+}

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

@@ -36,13 +36,23 @@
       .row__content {
         display: flex;
         color: #3976CB;
-
+        
         &.row__content--link {
           font-style: italic;
           text-decoration: underline;
           color: #1890FF;
           cursor: pointer;
         }
+        .row__content--link{
+          font-style: italic;
+          text-decoration: underline;
+          color: #1890FF;
+          cursor: pointer;
+        }
+        span{
+          font-style: italic;
+          color: #1890FF;
+        }
       }
     }
   }

src/views/detections/DetectionRow.vue

@@ -11,6 +11,7 @@
           <i class="cn-icon cn-icon-attacker" ></i>{{detection.offenderIp || '-'}}
           <span class="line">-------</span>
           <span class="circle"></span>
+          <span class="domain">{{detection.domain }}</span>
           <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp || '-'}}
         </div>
         <div class="cn-detection__header" v-else-if="pageType === detectionPageType.performanceEvent">

src/views/detections/overview/DetectionSecurityEventOverview.vue

@@ -104,11 +104,18 @@
     <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 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 row__content--link">{{$t('detections.viewDetailOf', {ip: basicInfo.offenderIp})}}</div>
+        <div class="row__content ">
+          <span>{{$t('detections.viewDetailOf')}}</span> &nbsp;
+          <span class="row__content--link" @click="goDetail('ip',basicInfo.offenderIp)">{{basicInfo.offenderIp}}</span>
+          <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">
@@ -230,6 +237,16 @@ export default {
           reject(e)
         }
       })
+    },
+    goDetail(type,name){
+      const { href } = this.$router.resolve({
+        path: '/entityDetail',
+        query: {
+          entityType: type,
+          name: name
+        }
+      })
+      window.open(href, '_blank')
     }
   },
   mounted () {