#1257 Display case age in case list and details page.

TheHive-Project · May 3, 2020 · e721738 · e721738
1 parent 5187440
commit e721738
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 17 deletions.
diff --git a/frontend/app/index.html b/frontend/app/index.html
@@ -192,6 +192,7 @@
     <script src="scripts/controllers/SettingsCtrl.js"></script>
     <script src="scripts/directives/affixer.js"></script>
     <script src="scripts/directives/auto-focus.js"></script>
+    <script src="scripts/directives/case-duration.js"></script>
     <script src="scripts/directives/charts/c3Chart.js"></script>
     <script src="scripts/directives/compare-to.js"></script>
     <script src="scripts/directives/dashboard/bar.js"></script>

diff --git a/frontend/app/scripts/directives/case-duration.js b/frontend/app/scripts/directives/case-duration.js
@@ -0,0 +1,15 @@
+(function() {
+    'use strict';
+    angular.module('theHiveDirectives').directive('caseDuration', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                start: '=',
+                end: '=',
+                icon: '@',
+                indicator: '='
+            },
+            templateUrl: 'views/directives/case-duration.html'
+        };
+    });
+})();
diff --git a/frontend/app/views/directives/case-duration.html b/frontend/app/views/directives/case-duration.html
@@ -0,0 +1,8 @@
+<span>
+    <strong ng-if="end" class="text-success" uib-tooltip="Closed after">
+        <i class="fa" ng-class="icon"></i> {{indicator ? 'During ' : ''}}{{start | duration:end}}
+    </strong>
+    <strong ng-if="!end" class="text-danger" uib-tooltip="Open since">
+        <i class="fa" ng-class="icon"></i> {{start | duration}} {{indicator ? 'ago' : ''}}
+    </strong>
+</span>
diff --git a/frontend/app/views/partials/alert/list.html b/frontend/app/views/partials/alert/list.html
@@ -17,7 +17,7 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{alertEvents.c
                     <div class="col-md-12 clearfix">
                         <filters-preview filters="$vm.filtering.context.filters"
                             on-clear-item="$vm.removeFilter(field)"
-                            on-clear-all="$vm.clearFilters()"></filters-preview>                                                
+                            on-clear-all="$vm.clearFilters()"></filters-preview>
                     </div>
                 </div>
 
@@ -142,7 +142,9 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{alertEvents.c
                                         </div>
                                     </td>
                                     <td class="text-center">{{::event.artifacts.length || 0}}</td>
-                                    <td><a href ng-click="$vm.addFilterValue('date', event.date)">{{event.date | showDate}}</a></td>
+                                    <td>
+                                        <a href ng-click="$vm.addFilterValue('date', event.date)">{{event.date | shortDate}}</a>
+                                    </td>
                                     <td class="clearfix">
                                         <div class="pull-right" if-permission="manageAlert">
                                             <a class="btn btn-xs btn-icon btn-clear" href ng-click="$vm.follow(event)" uib-tooltip="{{event.follow ? 'Ignore new updates' : 'Track new updates'}}">

diff --git a/frontend/app/views/partials/case/case.links.html b/frontend/app/views/partials/case/case.links.html
@@ -83,7 +83,8 @@
             </div>
 
             <div class="case-date">
-                <span uib-tooltip="{{item.startDate | showDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{item.startDate | shortDate}}</span>
+                <span uib-tooltip="{{item.startDate | showDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{item.startDate | shortDate}}</span><br/>
+                <case-duration start="item.startDate" end="item.endDate" icon="fa-clock-o"></case-duration>
             </div>
 
             <div class="case-observables-count">

diff --git a/frontend/app/views/partials/case/case.list.html b/frontend/app/views/partials/case/case.list.html
@@ -105,8 +105,7 @@ <h3 class="box-title">List of cases ({{$vm.list.total || 0}} of {{$vm.caseStats.
                                             </a>
                                         </div>
                                         <div>
-                                            <strong ng-if="currentCase.endDate" class="text-success"><i class="fa fa-clock-o"></i> {{currentCase.startDate | duration:currentCase.endDate}}</strong>
-                                            <strong ng-if="!currentCase.endDate" class="text-danger"><i class="fa fa-clock-o"></i> {{currentCase.startDate | duration}}</strong>
+                                            <case-duration start="currentCase.startDate" end="currentCase.endDate" icon="fa-clock-o"></case-duration>
                                         </div>
                                     </td>
                                     <td if-permission="manageTask" allowed="{{userPermissions}}" ng-if="appConfig.connectors.cortex.enabled">

diff --git a/frontend/app/views/partials/case/case.panelinfo.html b/frontend/app/views/partials/case/case.panelinfo.html
@@ -23,28 +23,35 @@ <h3 class="box-title text-primary">
     </div>
 
     <div class="box-body">
-        <span>
+        <span uib-tooltip="Creation by">
             <i class="glyphicon glyphicon-user"></i>
-            Created by <user-info value="caze.createdBy" field="name"></user-info>
+            <user-info value="caze.createdBy" field="name"></user-info>
         </span>
-        <span class="ml-xxs">
-            <i class="glyphicon glyphicon-calendar"></i>
-            <span class="mr-xxxs">{{caze.createdAt | showDate}}</span>
-        <span ng-show="isCaseClosed()" class="text-success">(Closed at
-                {{caze.endDate | shortDate}}
-                as
-                <strong>{{CaseResolutionStatus[caze.resolutionStatus]}}</strong>
-                <span ng-show="isCaseTruePositive()"> with <strong>{{caze.impactStatus === 'NoImpact' ? 'No Impact' : 'Impact'}}</strong></span>)</span>
+
+        <span class="ml-xxs" uib-tooltip="Created at">
+            <i class="fa fa-calendar"></i>
+            <span class="mr-xxxs">{{caze.createdAt | shortDate}}</span>
+        </span>
+
+        <span class="text-success" uib-tooltip="Closed at" ng-show="isCaseClosed()">
+            <span><i class="fa fa-calendar-times-o"></i></span>
+            <span>{{caze.endDate | shortDate}} as </span>
+            <strong>{{CaseResolutionStatus[caze.resolutionStatus]}}</strong>
+            <span ng-show="isCaseTruePositive()"> with <strong>{{caze.impactStatus === 'NoImpact' ? 'No Impact' : 'Impact'}}</strong></span>
         </span>
-        <span class="ml-xxs text-danger" ng-show="links.length > 0">
+
+        <case-duration class="ml-xxs" start="caze.startDate" end="caze.endDate" icon="fa-clock-o"></case-duration>
+
+        <span class="ml-xxs text-danger" ng-show="links.length > 0" uib-tooltip="Related to">
             <i class="glyphicon glyphicon-link"></i>
             <strong>
                 <a class="text-danger" href ui-sref="app.case.links({caseId:caze.id})">
                   <ng-pluralize count="links.length" when="{'one': '1 case', 'other': '{} cases'}"></ng-pluralize>
                 </a>
             </strong>
         </span>
-        <span class="ml-xxs text-danger" ng-show="alerts.count > 0">
+
+        <span class="ml-xxs text-danger" ng-show="alerts.count > 0"uib-tooltip="Related to">
             <i class="glyphicon glyphicon-link"></i>
             <strong>
                 <a class="text-danger" href ui-sref="app.case.alerts({caseId:caze.id})">