#232 Add case similarity details in alert preview dialog

TheHive-Project · Jun 7, 2017 · a62298a · a62298a
1 parent 5a58a2d
commit a62298a
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 5 deletions.
diff --git a/thehive-backend/app/services/JsonFormat.scala b/thehive-backend/app/services/JsonFormat.scala
@@ -8,6 +8,7 @@ object JsonFormat {
       Json.obj(
         "id" → caze.id,
         "_id" → caze.id,
+        "caseId" → caze.caseId(),
         "title" → caze.title(),
         "tags" → caze.tags(),
         "status" → caze.status(),

diff --git a/ui/app/index.html b/ui/app/index.html
@@ -197,6 +197,7 @@
     <script src="scripts/filters/getField.js"></script>
     <script src="scripts/filters/hash-type.js"></script>
     <script src="scripts/filters/order-object-by.js"></script>
+    <script src="scripts/filters/percent.js"></script>
     <script src="scripts/filters/sha256.js"></script>
     <script src="scripts/filters/shortDate.js"></script>
     <script src="scripts/filters/showDate.js"></script>

diff --git a/ui/app/scripts/controllers/alert/AlertEventCtrl.js b/ui/app/scripts/controllers/alert/AlertEventCtrl.js
@@ -1,10 +1,11 @@
 (function() {
     'use strict';
     angular.module('theHiveControllers')
-        .controller('AlertEventCtrl', function($scope, $rootScope, $state, $uibModalInstance, AlertingSrv, NotificationSrv, event) {
+        .controller('AlertEventCtrl', function($scope, $rootScope, $state, $uibModalInstance, CaseResolutionStatus, AlertingSrv, NotificationSrv, event) {
             var self = this;
             var eventId = event.id;
 
+            self.CaseResolutionStatus = CaseResolutionStatus;
             self.event = event;
 
             self.loading = true;

diff --git a/ui/app/scripts/controllers/alert/AlertListCtrl.js b/ui/app/scripts/controllers/alert/AlertListCtrl.js
@@ -188,7 +188,7 @@
                     templateUrl: 'views/partials/alert/event.dialog.html',
                     controller: 'AlertEventCtrl',
                     controllerAs: 'dialog',
-                    size: 'lg',
+                    size: 'max',
                     resolve: {
                         event: event
                     }

diff --git a/ui/app/scripts/filters/percent.js b/ui/app/scripts/filters/percent.js
@@ -0,0 +1,8 @@
+(function() {
+    'use strict';
+    angular.module('theHiveFilters').filter('percentage', function($filter) {
+        return function(input, decimals) {
+            return $filter('number')(input * 100, decimals) + '%';
+        };
+    });
+})();
diff --git a/ui/app/scripts/services/AlertingSrv.js b/ui/app/scripts/services/AlertingSrv.js
@@ -19,7 +19,11 @@
                 },
 
                 get: function(alertId) {
-                    return $http.get(baseUrl + '/' + alertId);
+                    return $http.get(baseUrl + '/' + alertId, {
+                        params: {
+                            similarity: 1
+                        }
+                    });
                 },
 
                 create: function(alertId) {

diff --git a/ui/app/styles/case-item.css b/ui/app/styles/case-item.css
@@ -40,3 +40,6 @@ div.case-item>div.case-observables-count {
 div.case-item>div.case-observables-list {
     width: 450px;
 }
+div.case-item>div.case-similarity {
+    width: 200px;
+}
diff --git a/ui/app/views/partials/alert/event.dialog.html b/ui/app/views/partials/alert/event.dialog.html
@@ -2,7 +2,6 @@
     <h3 class="modal-title">Alert Preview <span class="label label-default" ng-class="{'label-danger': dialog.event.status==='New', 'label-warning': dialog.event.status === 'Updated'}">{{dialog.event.status}}</span></h3>
 </div>
 <div class="modal-body">
-
     <div class="row text-center" ng-show="dialog.loading">
         <div class="m-s">
             <i class="fa fa-3x fa-spinner fa-spin"></i>
@@ -50,9 +49,21 @@ <h4 class="vpad10 text-primary">
                 </div>
             </div>
 
+            <div class="alert-similarity" ng-if="dialog.event.similarCases.length > 0">
+                <div class="mt-xs">
+                    <h4 class="vpad10 text-primary">
+                        Similar cases ({{dialog.event.similarCases.length}})
+                    </h4>
+                    <!-- <div>
+                        <pre>{{dialog.event.similarCases | json}}</pre>
+                    </div> -->
+                    <div ng-include="'/views/partials/alert/event.similarity.html'"></div>
+                </div>
+            </div>
+
             <div class="alert-artifacts" ng-if="dialog.event.artifacts.length > 0">
                 <h4 class="vpad10 text-primary">
-                    Artifacts ({{dialog.event.artifacts.length || 0}})
+                    Observables ({{dialog.event.artifacts.length || 0}})
                 </h4>
                 <div class="mb-xs" ng-if="dialog.dataTypes">
                     <span class="label label-lg label-default mr-xxs clickable"

diff --git a/ui/app/views/partials/alert/event.similarity.html b/ui/app/views/partials/alert/event.similarity.html
@@ -0,0 +1,66 @@
+<div class="case-item">
+    <div class="case-details text-bold">Title</div>
+    <div class="case-date text-bold">Date</div>
+    <div class="case-similarity text-bold">Observables</div>
+    <div class="case-similarity text-bold">IOCs</div>
+</div>
+
+<div class="case-collection" ng-repeat="item in dialog.event.similarCases | orderBy:['-similarIocCount','-similarArtifactCount', '-iocCount', '-startDate']">
+    <div class="case-item" >
+        <!-- case severity -->
+        <div class="case-tlp bg-tlp-{{item.tlp}}"></div>
+
+        <!-- case title and main details -->
+        <div class="case-details">
+            <div class="case-title">
+                <a ui-sref="app.case.details({caseId: item.id})">#{{item.caseId}} - {{item.title}}</a>
+            </div>
+            <div class="case-tags flexwrap mt-xxs">
+                <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
+                <strong class="text-muted mr-xxxs" ng-if="!item.tags || item.tags.length === 0">None</strong>
+                <span ng-repeat="tag in item.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer">{{tag}}</span>
+            </div>
+            <div class="text-success" ng-show="item.status !== 'Open'">
+                <small>
+                    (Closed at {{item.endDate | showDate}} as <strong>{{dialog.CaseResolutionStatus[item.resolutionStatus]}}</strong>)
+                </small>
+            </div>
+            <div class="text-danger" ng-if="item.mergeFrom">
+                <small>
+                    Merged from <a href ui-sref="app.case.details({caseId: item.mergeFrom[0]})"> Case #{{item.stats.mergeFrom[0].caseId}}</a> and
+                    <a href ui-sref="app.case.details({caseId: item.mergeFrom[1]})"> Case #{{utem.stats.mergeFrom[1].caseId}}</a>
+                </small>
+            </div>
+        </div>
+
+        <div class="case-severity">
+            <div class="clickable">
+                <severity active="false" value="item.severity"></severity>
+            </div>
+        </div>
+
+        <div class="case-date">
+            <span uib-tooltip="{{item.startDate | showDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{item.startDate | shortDate}}</span>
+        </div>
+
+        <div class="case-similarity">
+            <div>
+                <strong>{{item.similarArtifactCount}} / {{item.artifactCount}}</strong>
+                <uib-progressbar class="progress" max="item.artifactCount" value="item.similarArtifactCount" type="primary">
+                    <i>{{(item.similarArtifactCount / item.artifactCount) | percentage:0}}</i>
+                </uib-progressbar>
+            </div>
+        </div>
+        <div class="case-similarity">
+            <div ng-if="item.iocCount > 0">
+                <strong>{{item.similarIocCount}} / {{item.iocCount}}</strong>
+                <uib-progressbar class="progress" max="item.iocCount" value="item.similarIocCount" type="danger">
+                    <i>{{(item.similarIocCount / item.iocCount) | percentage:0}}</i>
+                </uib-progressbar>
+            </div>
+            <div ng-if="item.iocCount === 0">
+                <em>N/A</em>
+            </div>
+        </div>
+    </div>
+</div>