From e72173894c3e1c8da71954b1a2ca4c1152d8a393 Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Sun, 3 May 2020 16:08:54 +0200
Subject: [PATCH] #1257 Display case age in case list and details page.

---
 frontend/app/index.html                       |  1 +
 .../app/scripts/directives/case-duration.js   | 15 +++++++++
 .../app/views/directives/case-duration.html   |  8 +++++
 frontend/app/views/partials/alert/list.html   |  6 ++--
 .../app/views/partials/case/case.links.html   |  3 +-
 .../app/views/partials/case/case.list.html    |  3 +-
 .../views/partials/case/case.panelinfo.html   | 31 ++++++++++++-------
 7 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 frontend/app/scripts/directives/case-duration.js
 create mode 100644 frontend/app/views/directives/case-duration.html

diff --git a/frontend/app/index.html b/frontend/app/index.html
index 2020ac526b..f6b081c997 100644
--- 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
new file mode 100644
index 0000000000..c20adc4e82
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..940c83691a
--- /dev/null
+++ 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
index bc976639dc..539a0d2b75 100644
--- 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
index d440c42b46..e3bccb7aa3 100644
--- 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
index 386420dc95..c78828d174 100644
--- 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
index cef7d788cf..a4720d4702 100644
--- a/frontend/app/views/partials/case/case.panelinfo.html
+++ b/frontend/app/views/partials/case/case.panelinfo.html
@@ -23,20 +23,26 @@ <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})">
@@ -44,7 +50,8 @@ <h3 class="box-title text-primary">
                 </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})">