Skip to content

Commit

Permalink
#1579 WIP: Add client side pagination in case similarity in alert dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@nadouani
nadouani committed Oct 21, 2020
1 parent 1011bb7 commit 58b2b9b
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 22 deletions.
22 changes: 20 additions & 2 deletions frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,21 @@
self.similarityFilters = {
fTitle: undefined,
fMatches: undefined

};

self.rateFilters = {
fObservables: undefined,
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',
Expand Down Expand Up @@ -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()}
Expand All @@ -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){
Expand Down Expand Up @@ -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',
Expand Down
67 changes: 48 additions & 19 deletions frontend/app/views/components/alert/similar-case-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand Down
8 changes: 7 additions & 1 deletion frontend/app/views/components/alert/similarity/toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit 58b2b9b

Please sign in to comment.