From 58b2b9b1d95b53d5539a35e2669e31ce11c3313c Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Wed, 21 Oct 2020 11:24:56 +0200
Subject: [PATCH] #1579 WIP: Add client side pagination in case similarity in
 alert dialog

---
 .../alert/AlertSimilarCaseListCmp.js          | 22 +++++-
 .../alert/similar-case-list.component.html    | 67 +++++++++++++------
 .../components/alert/similarity/toolbar.html  |  8 ++-
 3 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js b/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js
index 0b5dc6fb81..12805b6df4 100644
--- a/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js
+++ b/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js
@@ -11,7 +11,6 @@
                 self.similarityFilters = {
                     fTitle: undefined,
                     fMatches: undefined
-
                 };
 
                 self.rateFilters = {
@@ -19,8 +18,14 @@
                     fIoc: undefined
                 };
 
+                self.sortField = '-sCreatedAt';
                 self.matches = [];
 
+                self.pagination = {
+                    pageSize: 10,
+                    currentPage: 1
+                };
+
                 self.$onInit = function() {
                     this.filtering = new FilteringSrv('case', 'alert.dialog.similar-cases', {
                         version: 'v1',
@@ -53,7 +58,7 @@
                         skipStream: true,
                         version: 'v1',
                         loadAll: true,
-                        pageSize: self.filtering.context.pageSize,
+                        //pageSize: self.filtering.context.pageSize,
                         operations: [
                             {'_name': 'getAlert', 'idOrName': this.alertId},
                             {'_name': 'similarCases', 'caseFilter': this.filtering.buildQuery()}
@@ -64,6 +69,7 @@
                                 item.fMatches = _.keys(item.observableTypes);
                                 item.fObservables = Math.floor((item.similarObservableCount / item.observableCount) * 100);
                                 item.fIocs = Math.floor((item.similarIocCount / item.iocCount) * 100);
+                                item.sCreatedAt = item.case._createdAt;
                             });
 
                             self.matches = _.uniq(_.flatten(_.map(data, function(item){
@@ -136,6 +142,18 @@
                     return data;
                 };
 
+                this.sortByField = function(field) {
+                    var sort = null;
+
+                    if(this.sortField.substr(1) !== field) {
+                        sort = '+' + field;
+                    } else {
+                        sort = (this.sortField === '+' + field) ? '-'+field : '+'+field;
+                    }
+
+                    this.sortField = sort;
+                };
+
 
             },
             controllerAs: '$cmp',
diff --git a/frontend/app/views/components/alert/similar-case-list.component.html b/frontend/app/views/components/alert/similar-case-list.component.html
index 9a9ee89b99..0bad641daf 100644
--- a/frontend/app/views/components/alert/similar-case-list.component.html
+++ b/frontend/app/views/components/alert/similar-case-list.component.html
@@ -20,23 +20,53 @@
         </div>
 
         <div class="col-md-12" ng-show="$cmp.list.total > 0">
-            <!-- <div class="btn-toolbar" role="toolbar">
-                <div class="btn-group pull-right" role="group">
-                    <page-sizer collection="$cmp.list" sizes="[10, 15, 30, 100]"></page-sizer>
-                </div>
-            </div> -->
-
-            <psearch control="$cmp.list"></psearch>
+            <!-- Client side pagination -->
+            <div class="text-center" ng-show="$cmp.list.allValues.length > $cmp.pagination.pageSize">
+                <ul uib-pagination class="pagination-sm" boundary-links="true"  max-size="5" rotate="false"
+                    total-items="$cmp.list.allValues.length"
+                    items-per-page="$cmp.pagination.pageSize"
+                    ng-model="$cmp.pagination.currentPage"></ul>
+            </div>
 
+            <!-- Table header -->
             <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 class="case-details text-bold">
+                    <a href class="text-default" ng-click="$cmp.sortByField('fTitle')">
+                        Title
+                        <i ng-show="$cmp.sortField !== '+fTitle' && $cmp.sortField !== '-fTitle'" class="fa fa-sort"></i>
+                        <i ng-show="$cmp.sortField === '+fTitle'" class="fa fa-caret-up"></i>
+                        <i ng-show="$cmp.sortField === '-fTitle'" class="fa fa-caret-down"></i>
+                    </a>
+                </div>
+                <div class="case-date text-bold">
+                    <a href class="text-default" ng-click="$cmp.sortByField('sCreatedAt')">
+                        Created At
+                        <i ng-show="$cmp.sortField !== '+sCreatedAt' && $cmp.sortField !== '-sCreatedAt'" class="fa fa-sort"></i>
+                        <i ng-show="$cmp.sortField === '+sCreatedAt'" class="fa fa-caret-up"></i>
+                        <i ng-show="$cmp.sortField === '-sCreatedAt'" class="fa fa-caret-down"></i>
+                    </a>
+                </div>
+                <div class="case-similarity text-bold">
+                    <a href class="text-default" ng-click="$cmp.sortByField('fObservables')">
+                        Observables
+                        <i ng-show="$cmp.sortField !== '+fObservables' && $cmp.sortField !== '-fObservables'" class="fa fa-sort"></i>
+                        <i ng-show="$cmp.sortField === '+fObservables'" class="fa fa-caret-up"></i>
+                        <i ng-show="$cmp.sortField === '-fObservables'" class="fa fa-caret-down"></i>
+                    </a>
+                </div>
+                <div class="case-similarity text-bold">
+                    <a href class="text-default" ng-click="$cmp.sortByField('fIocs')">
+                        IOCs
+                        <i ng-show="$cmp.sortField !== '+fIocs' && $cmp.sortField !== '-fIocs'" class="fa fa-sort"></i>
+                        <i ng-show="$cmp.sortField === '+fIocs'" class="fa fa-caret-up"></i>
+                        <i ng-show="$cmp.sortField === '-fIocs'" class="fa fa-caret-down"></i>
+                    </a>
+                </div>
                 <div class="case-similarity-match text-bold">Matches</div>
                 <div class="case-similarity-merge text-bold">Action</div>
             </div>
 
+            <!-- Table filter -->
             <div class="case-item filter-panel">
                 <div class="case-details text-bold">
                     <div class="form-group has-feedback has-clear">
@@ -72,12 +102,11 @@
                 </div>
             </div>
 
-
-            <!-- <div class="case-collection" ng-repeat="item in filteredLinks = ($cmp.list.allValues | filter:$cmp.filterSimilarities)"> -->
-            <div class="case-collection" ng-repeat="item in filteredLinks = ($cmp.list.allValues | filter:$cmp.similarityFilters | filter:$cmp.greaterThan('fObservables') | filter:$cmp.greaterThan('fIocs'))">
+            <!-- Table data -->
+            <div class="case-collection" ng-repeat="item in filteredLinks = ($cmp.list.allValues | filter:$cmp.similarityFilters | filter:$cmp.greaterThan('fObservables') | filter:$cmp.greaterThan('fIocs') | orderBy:$cmp.sortField | limitTo:$cmp.pagination.pageSize:($cmp.pagination.currentPage-1)*$cmp.pagination.pageSize)">
                 <div class="case-item" >
-                    <!-- case severity -->
-                    <div class="case-tlp bg-tlp-{{item.case.tlp}}"></div>
+                    <!-- case tlp -->
+                    <div class="case-tlp bg-tlp-{{item.case.tlp}} clickable" ng-click="$cmp.addFilterValue('tlp', item.case.tlp)"></div>
 
                     <!-- case title and main details -->
                     <div class="case-details">
@@ -87,7 +116,7 @@
                         <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.case.tags || item.case.tags.length === 0">None</strong>
-                            <span ng-repeat="tag in item.case.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer">{{tag}}</span>
+                            <span ng-repeat="tag in item.case.tags track by $index" ng-click="$cmp.addFilterValue('tags', tag)" class="label label-primary mb-xxxs mr-xxxs pointer">{{tag}}</span>
                         </div>
                         <div class="text-success" ng-show="item.case.status !== 'Open'">
                             <small>
@@ -103,13 +132,13 @@
                     </div>
 
                     <div class="case-severity">
-                        <div class="clickable">
+                        <div class="clickable" ng-click="$cmp.addFilterValue('severity', item.case.severity)">
                             <severity active="false" value="item.case.severity"></severity>
                         </div>
                     </div>
 
                     <div class="case-date">
-                        <span uib-tooltip="{{item.case.startDate | showDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{item.case.startDate | shortDate}}</span>
+                        <span uib-tooltip="{{item.case._createdAt | showDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{item.case._createdAt | shortDate}}</span>
                     </div>
 
                     <div class="case-similarity">
diff --git a/frontend/app/views/components/alert/similarity/toolbar.html b/frontend/app/views/components/alert/similarity/toolbar.html
index 3e1b0db377..85713bdb94 100644
--- a/frontend/app/views/components/alert/similarity/toolbar.html
+++ b/frontend/app/views/components/alert/similarity/toolbar.html
@@ -26,7 +26,13 @@
             </div>
 
             <div class="btn-group pull-right" role="group">
-                <page-sizer collection="$cmp.list" sizes="[1, 2, 3, 10, 15, 30, 100]"></page-sizer>
+                <!-- <page-sizer collection="$cmp.list" sizes="[1, 2, 3, 10, 15, 30, 100]"></page-sizer> -->
+                <div class="page-sizer">
+                    <select class="form-control input-sm"
+                        ng-model="$cmp.pagination.pageSize"
+                        ng-options="v for v in [1,2,5,10,15,30,50]"></select>
+                    <span class="page-sizer-label nowrap ml-xxs">per page</span>
+                </div>
             </div>
 
             <div class="btn-group pull-right" role="group">