From b47945906923825a4ad83317334754fe8c26affe Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Tue, 16 Feb 2021 07:17:29 +0100
Subject: [PATCH] #1766 WIP: Add TTP occur date update + quick sort menu

---
 .../controllers/case/CaseProceduresCtrl.js    |  27 ++-
 .../views/partials/case/case.procedures.html  | 215 +++---------------
 .../partials/case/procedures/toolbar.html     |   8 +-
 3 files changed, 54 insertions(+), 196 deletions(-)

diff --git a/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js b/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js
index 2c5d91aae8..eb8882dc05 100644
--- a/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js
+++ b/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js
@@ -10,6 +10,7 @@
 
         this.caseId = $stateParams.caseId;
         this.tactics = AttackPatternSrv.tactics.values;
+        this.expanded = {};
 
         this.$onInit = function() {
             self.filtering = new FilteringSrv('procedure', 'procedure.list', {
@@ -33,7 +34,7 @@
                 });
         };
 
-        this.addProcedure = function() {
+        this.showProcedure = function(procedure) {
             var modalInstance = $uibModal.open({
                 animation: true,
                 templateUrl: 'views/partials/case/procedures/add-procedure.modal.html',
@@ -43,6 +44,9 @@
                 resolve: {
                     caseId: function() {
                         return self.caseId;
+                    },
+                    procedure: function() {
+                        return angular.copy(procedure);
                     }
                 }
             });
@@ -58,14 +62,19 @@
                 });
         };
 
-        this.updateDescription = function(procedure) {
-            ProcedureSrv.update(procedure._id, {
-                description: procedure.description
-            }).then(function(response) {
-                console.log(response);
-            }).catch(function(err) {
-                NotificationSrv.error('ProcedureCtrl', err.data, err.status);
-            });
+        this.updateField = function(procedure, field, reload) {
+            var data = {};
+            data[field] = procedure[field];
+
+            ProcedureSrv.update(procedure._id, data)
+                .then(function(response) {
+                    if(reload) {
+                        self.load();
+                    }
+                    console.log(response);
+                }).catch(function(err) {
+                    NotificationSrv.error('ProcedureCtrl', err.data, err.status);
+                });
         };
 
         this.load = function() {
diff --git a/frontend/app/views/partials/case/case.procedures.html b/frontend/app/views/partials/case/case.procedures.html
index 916cc089d7..9546bee7b9 100644
--- a/frontend/app/views/partials/case/case.procedures.html
+++ b/frontend/app/views/partials/case/case.procedures.html
@@ -55,10 +55,10 @@ <h4>
 
         <div class="ttp-item" ng-repeat="proc in $vm.list.values">
             <div class="ttp-header">
-                <div class="ttp-tactic clickable" ng-click="proc.expanded = !proc.expanded">
+                <div class="ttp-tactic clickable" ng-click="$vm.expanded[proc._id] = !$vm.expanded[proc._id]">
                     <div>
                         <a class="mr-xxs">
-                            <i class="fa" ng-class="{true: 'fa-chevron-up', false: 'fa-chevron-down'}[!!proc.expanded]"></i>
+                            <i class="fa" ng-class="{true: 'fa-chevron-up', false: 'fa-chevron-down'}[!!$vm.expanded[proc._id]]"></i>
                         </a>
 
                         {{$vm.tactics[proc.tactic].label}}
@@ -90,200 +90,49 @@ <h4>
                     </a>
                 </div>
                 <div class="ttp-action">
-                    <!-- <span if-permission="manageCase" allowed="{{userPermissions}}">
-                        <a href ng-click="$vm.deleteProcedure()" uib-tooltip="Delete" class="text-danger">
-                            <i class="fa fa-trash"></i> Delete
-                        </a>
-                    </span> -->
-
-
-
                     <a class="btn btn-icon btn-clear" href ng-click="$vm.edit(proc)" uib-tooltip="Edit TTP" if-permission="manageCase" allowed="{{userPermissions}}">
                         <i class="text-info fa fa-edit"></i>
                     </a>
                     <a class="btn btn-icon btn-clear text-danger" href ng-click="$vm.remove(proc)" uib-tooltip="Delete TTP" if-permission="manageCase" allowed="{{userPermissions}}">
                         <i class="fa fa-trash"></i>
                     </a>
-
-                </div>
-            </div>
-            <div class="ttp-body" ng-show="proc.expanded">
-                <label>Procedure</label>
-                <div class="description-pane" if-permission="manageCase" allowed="{{userPermissions}}">
-                    <updatable-text on-update="$vm.updateDescription(proc)" value="proc.description"></updatable-text>
-                </div>
-                <div class="description-pane" if-not-permission="manageCase" allowed="{{userPermissions}}">
-                    <div marked="proc.description" class="markdown"></div>
                 </div>
             </div>
-        </div>
-
-
-        <!-- <div ng-repeat="proc in $vm.list.values" class="box box-default">
-            <div class="box-header with-border">
-                <h3 class="box-title">
-                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
-                    </button>
-                    <span class="label label-primary">{{proc.tactic}}</span> {{proc.patternId}}: {{proc.extraData.pattern.name}}
-                </h3>
-
-                <div class="box-tools pull-right">
-                    <span class="text-muted mr-xs">
-                        <i class="glyphicon glyphicon-user"></i>
-                        <user-info value="proc._createdBy" field="organisation"></user-info>/<user-info value="proc._createdBy" field="name"></user-info>
-                    </span>
-
-                    <span class="text-muted mr-xs">
-                        <i class="fa fa-calendar"></i>
-                        {{proc.occurDate | shortDate}}
-                    </span>
-
-                    <span if-permission="manageCase" allowed="{{userPermissions}}">
-                        <a href ng-click="$vm.deleteProcedure()" uib-tooltip="Delete" class="text-danger">
-                            <i class="fa fa-trash"></i> Delete
-                        </a>
-                    </span>
-                </div>
-            </div>
-            <div class="box-body">
-                <div>
-                    <h4 class="text-primary">Procedure</h4>
-                    <div class="description-pane" if-permission="manageCase" allowed="{{userPermissions}}">
-                        <updatable-text on-update="$vm.updateDescription(proc)" value="proc.description"></updatable-text>
-                    </div>
-                    <div class="description-pane" if-not-permission="manageCase" allowed="{{userPermissions}}">
-                        <div marked="proc.description" class="markdown"></div>
-                    </div>
-                </div>
-
-            </div>
-        </div> -->
-
-        <psearch control="$vm.list"></psearch>
-    </div>
-
-    <!-- <div class="col-md-12" ng-show="$vm.list.total > 0">
-        <psearch control="$vm.list"></psearch>
-
-        <table class="table tbody-stripped case-list">
-            <thead>
-                <tr>
-                    <th width="20px" if-permission="manageAlert">
-                        <input type="checkbox" ng-model="$vm.menu.selectAll" ng-change="$vm.selectAll()">
-                    </th>
-                    <th width="150px">
-                        <a href class="text-default" ng-click="$vm.sortByField('id')">
-                            ID
-                            <i ng-show="$vm.filtering.context.sort.indexOf('+id') === -1 && $vm.filtering.context.sort.indexOf('-id') === -1" class="fa fa-sort"></i>
-                            <i ng-show="$vm.filtering.context.sort.indexOf('+id') !== -1" class="fa fa-caret-up"></i>
-                            <i ng-show="$vm.filtering.context.sort.indexOf('-id') !== -1" class="fa fa-caret-down"></i>
-                        </a>
-                    </th>
-                    <th width="80px">
-                        Name
-                    </th>
-                    <th style="width: 120px">
-                        <a href class="text-default" ng-click="$vm.sortByField('occurence')">
-                            Occur Date
-                            <i ng-show="$vm.filtering.context.sort.indexOf('+occurence') === -1 && $vm.filtering.context.sort.indexOf('-occurence') === -1" class="fa fa-sort"></i>
-                            <i ng-show="$vm.filtering.context.sort.indexOf('+occurence') !== -1" class="fa fa-caret-up"></i>
-                            <i ng-show="$vm.filtering.context.sort.indexOf('-occurence') !== -1" class="fa fa-caret-down"></i>
-                        </a>
-                    </th>
-                    <th style="width: 160px"></th>
-                </tr>
-            </thead>
-
-            <tbody ng-repeat="event in $vm.list.values">
-                <tr>
-                    <td if-permission="manageAlert">
-                        <input type="checkbox" ng-model="event.selected" ng-change="$vm.select(event)">
-                    </td>
-                    <td>
-                        <span>
-                            <a href ng-click="$vm.addFilterValue('type', event.type)">{{::event.type}}</a>
-                        </span>
-                    </td>
-
-                    <td align="center">
-                        <span class="clickable label label-default" ng-class="{'label-danger': !event.caseId}" ng-click="$vm.addFilterValue('imported', !!event.caseId)">{{event.caseId ? 'Imported' : 'New'}}</span>
-                    </td>
-
-                    <td align="center">
-                        <span class="clickable label label-default" ng-click="$vm.addFilterValue('read', !!event.read)">{{event.read ? 'Read' : 'Unread'}}</span>
-                    </td>
-
-                    <td class="wrap">
-                        <div class="case-title">
-                            <span>
-                                <span ng-if="!event.caseId">{{::event.title}}</span>
-                                <span ng-if="event.caseId" ui-sref="app.case.details({caseId: event.caseId})">
-                                    <a href>{{::event.title}}</a>
-                                </span>
-                            </span>
+            <div class="ttp-body" ng-show="$vm.expanded[proc._id]">
+                <div class="row mb-xs">
+                    <div class="col-sm-4">
+                        <label>Created At</label>
+                        <div>
+                            <span uib-tooltip="{{proc._createdAt | shortDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{proc._createdAt | shortDate}}</span>
                         </div>
-                    </td>
-                    <td><a href ng-click="$vm.addFilterValue('source', event.source)">{{event.source}}</a></td>
-                    <td class="text-center">
-                        <div class="clickable" ng-click="$vm.addFilterValue('severity', event.severity)">
-                            <severity active="false" value="event.severity"></severity>
-                        </div>
-                    </td>
-                    <td class="text-center">{{::event.observableCount || 0}}</td>
-                    <td>
-                        <a href ng-click="$vm.addFilterValue('date', event.date)">{{event.date | shortDate}}</a>
-                        <div ng-if="!!event.caseId">
-                            <alert-duration start="event._createdAt" end="event.extraData.importDate" icon="fa-clock-o"></alert-duration>
+                    </div>
+                    <div class="col-sm-4">
+                        <label>Updated At</label>
+                        <div>
+                            <span uib-tooltip="{{proc._updatedAt | shortDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{proc._updatedAt | shortDate}}</span>
                         </div>
-                    </td>
-                    <td class="clearfix">
-                        <div class="pull-right" if-permission="manageAlert">
-                            <a class="btn btn-icon btn-clear" href ng-click="$vm.follow(event)" uib-tooltip="{{event.follow ? 'Ignore new updates' : 'Track new updates'}}">
-                                <i class="text-info fa" ng-class="{'fa-eye': event.follow, 'fa-eye-slash': !event.follow}"></i>
-                            </a>
-                            <a class="btn btn-icon btn-clear" href ng-click="$vm.markAsRead(event)" uib-tooltip="Mark as read" ng-if="$vm.canMarkAsRead(event)">
-                                <i class="text-info fa fa-envelope"></i>
-                            </a>
-                            <a class="btn btn-icon btn-clear" href ng-click="$vm.markAsRead(event)" uib-tooltip="Mark as unread" ng-if="$vm.canMarkAsUnread(event)">
-                                <i class="text-info fa fa-envelope-open-o"></i>
-                            </a>
-                            <a class="btn btn-icon btn-clear" href ng-click="$vm.getResponders(event, true)" uib-tooltip="Run responders" ng-if="appConfig.connectors.cortex.enabled" if-permission="manageAction">
-                                <i class="text-info fa fa-cog"></i>
-                            </a>
+                    </div>
+                    <div class="col-sm-4">
+                        <label>Occured At</label>
+                        <div>
+                            <updatable-date on-update="$vm.updateField(proc, 'occurDate', true)" value="proc.occurDate" clearable="false"></updatable-date>
                         </div>
-
-                        <div class="pull-right">
-                            <a class="btn btn-icon btn-clear" href ng-click="$vm.import(event)" uib-tooltip="Preview and Import" ng-if="!event.caseId">
-                                <i class="text-info fa fa-file-text-o"></i>
-                            </a>
-                            <a class="btn btn-icon btn-clear" href ui-sref="app.case.details({caseId: event.caseId})" uib-tooltip="View case" ng-if="event.caseId">
-                                <i class="text-info fa fa-search"></i>
-                            </a>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-sm-12">
+                        <label>Procedure</label>
+                        <div class="description-pane" if-permission="manageCase" allowed="{{userPermissions}}">
+                            <updatable-text on-update="$vm.updateField(proc, 'description')" value="proc.description"></updatable-text>
                         </div>
-                    </td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td colspan="9">
-                        <div class="case-tags flexwrap">
-                            <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
-                            <strong class="text-muted mr-xxxs" ng-if="!event.tags || event.tags.length === 0">None</strong>
-                            <tag-item ng-repeat="tag in event.tags track by $index" class="pointer" ng-click="$vm.addFilterValue('tags', tag)" value="tag"></tag-item>
+                        <div class="description-pane" if-not-permission="manageCase" allowed="{{userPermissions}}">
+                            <div marked="proc.description" class="markdown"></div>
                         </div>
-                    </td>
-                    <td></td>
-                </tr>
-                <tr ng-if="$vm.filtering.context.showAdvanced">
-                    <td></td>
-                    <td colspan="9">
-                        <custom-field-labels custom-fields="event.customFields" on-field-click="$vm.addFilterValue(name, value)">
-                            <custom-field-labels>
-                    </td>
-                    <td></td>
-                </tr>
-            </tbody>
-        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <psearch control="$vm.list"></psearch>
-    </div> -->
+    </div>
 </div>
diff --git a/frontend/app/views/partials/case/procedures/toolbar.html b/frontend/app/views/partials/case/procedures/toolbar.html
index 795fc78509..5cf4cdb69c 100644
--- a/frontend/app/views/partials/case/procedures/toolbar.html
+++ b/frontend/app/views/partials/case/procedures/toolbar.html
@@ -17,16 +17,16 @@
                 </button>
                 <ul class="dropdown-menu" uib-dropdown-menu>
                     <li>
-                        <a ng-click="$vm.sortBy(['-created_at'])">Newest first</a>
+                        <a ng-click="$vm.sortBy(['-_createdAt'])">Newest first</a>
                     </li>
                     <li>
-                        <a ng-click="$vm.sortBy(['+created_at'])">Oldest first</a>
+                        <a ng-click="$vm.sortBy(['+_createdAt'])">Oldest first</a>
                     </li>
                     <li>
-                        <a ng-click="$vm.sortBy(['-updated_at'])">Recently updated</a>
+                        <a ng-click="$vm.sortBy(['-_updatedAt'])">Recently updated</a>
                     </li>
                     <li>
-                        <a ng-click="$vm.sortBy(['+updated_at'])">Least recently updated</a>
+                        <a ng-click="$vm.sortBy(['+_updatedAt'])">Least recently updated</a>
                     </li>
                 </ul>
             </div>