From 1011bb7d5d688bf379ea727053ce3e9aa5558518 Mon Sep 17 00:00:00 2001 From: Nabil Adouani Date: Tue, 20 Oct 2020 16:53:54 +0200 Subject: [PATCH] #1579 WIP: Improve filter capabilities in alert similarity panel --- .../alert/AlertSimilarCaseListCmp.js | 89 ++++++++++++++++++- .../services/common/data/PaginatedQuerySrv.js | 2 +- frontend/app/styles/case-item.css | 5 +- frontend/app/styles/filters.css | 20 +++++ .../alert/similar-case-list.component.html | 62 ++++++++++++- .../components/alert/similarity/filters.html | 38 ++++++++ .../components/alert/similarity/toolbar.html | 39 ++++++++ 7 files changed, 246 insertions(+), 9 deletions(-) create mode 100644 frontend/app/views/components/alert/similarity/filters.html create mode 100644 frontend/app/views/components/alert/similarity/toolbar.html diff --git a/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js b/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js index 1762426556..0b5dc6fb81 100644 --- a/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js +++ b/frontend/app/scripts/components/alert/AlertSimilarCaseListCmp.js @@ -8,13 +8,26 @@ self.CaseResolutionStatus = CaseResolutionStatus; + self.similarityFilters = { + fTitle: undefined, + fMatches: undefined + + }; + + self.rateFilters = { + fObservables: undefined, + fIoc: undefined + }; + + self.matches = []; + self.$onInit = function() { this.filtering = new FilteringSrv('case', 'alert.dialog.similar-cases', { version: 'v1', defaults: { showFilters: true, showStats: false, - pageSize: 15, + pageSize: 2, sort: ['-startDate'] }, defaultFilter: [] @@ -40,12 +53,23 @@ skipStream: true, version: 'v1', loadAll: true, - pageSize: 15, + pageSize: self.filtering.context.pageSize, operations: [ {'_name': 'getAlert', 'idOrName': this.alertId}, - {'_name': 'similarCases'} + {'_name': 'similarCases', 'caseFilter': this.filtering.buildQuery()} ], - onUpdate: function() {} + onUpdate: function(data) { + _.each(data, function(item) { + item.fTitle = item.case.title; + item.fMatches = _.keys(item.observableTypes); + item.fObservables = Math.floor((item.similarObservableCount / item.observableCount) * 100); + item.fIocs = Math.floor((item.similarIocCount / item.iocCount) * 100); + }); + + self.matches = _.uniq(_.flatten(_.map(data, function(item){ + return _.keys(item.observableTypes); + }))).sort(); + } }); }; @@ -55,6 +79,63 @@ }); }; + // Frontend filter methods + this.clearLocalFilters = function() { + self.similarityFilters = { + fTitle: undefined, + fMatches: undefined + }; + + self.rateFilters = { + fObservables: undefined, + fIoc: undefined + }; + }; + + this.greaterThan = function(prop){ + return function(item){ + return !self.rateFilters[prop] || item[prop] >= self.rateFilters[prop]; + }; + }; + + // Filtering methods + this.toggleFilters = function () { + this.filtering.toggleFilters(); + }; + + this.search = function () { + self.load(); + self.filtering.storeContext(); + }; + + this.addFilterValue = function (field, value) { + self.filtering.addFilterValue(field, value); + self.search(); + }; + + /// Clear all filters + this.clearFilters = function () { + self.filtering.clearFilters() + .then(self.search); + }; + + // Remove a filter + this.removeFilter = function (index) { + self.filtering.removeFilter(index) + .then(self.search); + }; + + this.filterBy = function(field, value) { + self.filtering.clearFilters() + .then(function(){ + self.addFilterValue(field, value); + }); + }; + + this.filterSimilarities = function(data) { + return data; + }; + }, controllerAs: '$cmp', diff --git a/frontend/app/scripts/services/common/data/PaginatedQuerySrv.js b/frontend/app/scripts/services/common/data/PaginatedQuerySrv.js index e15ec0e52b..29f077b1e7 100644 --- a/frontend/app/scripts/services/common/data/PaginatedQuerySrv.js +++ b/frontend/app/scripts/services/common/data/PaginatedQuerySrv.js @@ -65,7 +65,7 @@ }); if (angular.isFunction(this.onUpdate)) { - this.onUpdate(); + this.onUpdate(this.allValues); } } else { this.update(); diff --git a/frontend/app/styles/case-item.css b/frontend/app/styles/case-item.css index eba8ea9552..bd8a1cc64b 100644 --- a/frontend/app/styles/case-item.css +++ b/frontend/app/styles/case-item.css @@ -41,7 +41,10 @@ div.case-item>div.case-observables-list { width: 450px; } div.case-item>div.case-similarity { - width: 200px; + width: 140px; +} +div.case-item>div.case-similarity-match { + width: 150px; } div.case-item>div.case-similarity-merge { width: 150px; diff --git a/frontend/app/styles/filters.css b/frontend/app/styles/filters.css index e00b6885e4..070a52dcb2 100644 --- a/frontend/app/styles/filters.css +++ b/frontend/app/styles/filters.css @@ -51,3 +51,23 @@ background: #f5f5f5; } */ + + +.similar-case-list .progress { + height: 2px; + opacity: 1; +} + +.similar-case-list .has-feedback .form-control { + padding-right: 25px; +} + +.similar-case-list .case-item.filter-panel { + padding: 5px 0; + margin-bottom: 5px !important; + border: none !important; +} + +.similar-case-list .case-item.filter-panel .form-group { + margin-bottom: 0 !important; +} 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 431d99ddcf..9a9ee89b99 100644 --- a/frontend/app/views/components/alert/similar-case-list.component.html +++ b/frontend/app/views/components/alert/similar-case-list.component.html @@ -1,4 +1,18 @@
+ +
+ +
+ +
+
+ + +
+
+
@@ -6,11 +20,11 @@
- +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ Clear Filters +
+
+
+ -
+ +
@@ -76,6 +127,11 @@ N/A
+
+
+
{{match}} ({{count}})
+
+
diff --git a/frontend/app/views/components/alert/similarity/filters.html b/frontend/app/views/components/alert/similarity/filters.html new file mode 100644 index 0000000000..5b47d4771b --- /dev/null +++ b/frontend/app/views/components/alert/similarity/filters.html @@ -0,0 +1,38 @@ +
+
+

Filters

+
+
+
+
+ + + + +
+
+
+ +
+
+
+
+ + Add a filter + + + Clear + + +
+
+
+ +
+
diff --git a/frontend/app/views/components/alert/similarity/toolbar.html b/frontend/app/views/components/alert/similarity/toolbar.html new file mode 100644 index 0000000000..3e1b0db377 --- /dev/null +++ b/frontend/app/views/components/alert/similarity/toolbar.html @@ -0,0 +1,39 @@ +
+
+ +
+