#86 Add filtering capabilities to MISP events' list

Author: nadouani

ui/app/scripts/controllers/misp/MispListCtrl.js

@@ -9,6 +9,7 @@
             self.menu = {
                 follow: false,
                 unfollow: false,
+                markAsRead: false,
                 selectAll: false
             };
             self.filtering = new FilteringSrv('misp-section', {
@@ -218,6 +219,11 @@
 
                 self.menu.unfollow = temp.length === 1 && temp[0] === true;
                 self.menu.follow = temp.length === 1 && temp[0] === false;
+
+
+                temp = _.uniq(_.pluck(self.selection, 'eventStatus'));
+
+                self.menu.markAsRead = temp.indexOf('Ignore') === -1;
             };
 
             self.select = function(event) {
@@ -325,14 +331,21 @@
                 this.filter();
             };
 
+            this.filterByStatus = function(status) {
+                self.filtering.clearFilters()
+                    .then(function(){
+                        self.addFilterValue('eventStatus', status);
+                    });
+            };
+
             this.sortBy = function(sort) {
                 self.list.sort = sort;
                 self.list.update();
                 self.filtering.setSort(sort);
             };
 
             this.getStatuses = function(query) {
-                return MispSrv.statuses(query);                
+                return MispSrv.statuses(query);
             };
 
             this.getSources = function(query) {

ui/app/views/partials/misp/list.html

@@ -120,7 +120,7 @@ <h4>List of MISP events ({{misp.list.total || 0}} of {{mispEvents.count}})</h4>
                     <td class="text-center">{{::event.attributeCount}}</td>
                     <td><a href ng-click="misp.addFilterValue('publishDate', event.publishDate)">{{event.publishDate | showDate}}</a></td>
                     <td class="clearfix">
-                        <div class="pull-right">
+                        <div class="pull-left">
                             <a class="btn btn-xs btn-icon btn-clear" href ng-click="misp.import(event)" uib-tooltip="Preview and Import" ng-if="!event.case">
                                 <i class="text-info text-20 fa fa-file-text-o"></i>
                             </a>
@@ -130,7 +130,7 @@ <h4>List of MISP events ({{misp.list.total || 0}} of {{mispEvents.count}})</h4>
                             <a class="btn btn-xs btn-icon btn-clear" href ng-click="misp.follow(event)" uib-tooltip="{{event.follow ? 'Ignore new updates' : 'Track new updates'}}">
                                 <i class="text-info text-20 fa" ng-class="{'fa-eye': event.follow, 'fa-eye-slash': !event.follow}"></i>
                             </a>
-                            <a class="btn btn-xs btn-icon btn-clear" href ng-click="misp.ignore(event)" uib-tooltip="Mark as read">
+                            <a class="btn btn-xs btn-icon btn-clear" href ng-click="misp.ignore(event)" uib-tooltip="Mark as unread" ng-if="event.eventStatus !== 'Ignore' && !event.case">
                                 <i class="text-info text-20 fa fa-check"></i>
                             </a>
                         </div>

ui/app/views/partials/misp/list/toolbar.html

@@ -13,14 +13,30 @@
                             <a ng-click="misp.bulkImport()">Import</a>
                         </li>
                         -->
-                    <li ng-show="misp.menu.follow" ng-click="misp.bulkFollow(true)">
-                        <a>Track new updates</a>
+                    <li ng-show="misp.menu.follow">
+                        <a href ng-click="misp.bulkFollow(true)">Track new updates</a>
                     </li>
-                    <li ng-show="misp.menu.unfollow" ng-click="misp.bulkFollow(false)">
-                        <a>Ignore new updates</a>
+                    <li ng-show="misp.menu.unfollow">
+                        <a href ng-click="misp.bulkFollow(false)">Ignore new updates</a>
                     </li>
-                    <li class="text-danger">
-                        <a ng-click="misp.bulkIgnore()">Mark as read</a>
+                    <li ng-show="misp.menu.markAsRead">
+                        <a href ng-click="misp.bulkIgnore()">Mark as read</a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="btn-group" uib-dropdown>
+                <button class="btn btn-primary dropdown-toggle" uib-dropdown-toggle type="button">
+                    <i class="fa fa-filter"></i>
+                    Quick Filters
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" uib-dropdown-menu>
+                    <li>
+                        <a ng-click="misp.filterByStatus('New')">New events ({{mispEvents.New.count || 0}})</a>
+                    </li>
+                    <li>
+                        <a ng-click="misp.filterByStatus('Update')">Updated events({{mispEvents.Update.count || 0}})</a>
                     </li>
                 </ul>
             </div>

ui/bower.json

@@ -19,7 +19,7 @@
     "bootstrap": "~3.3.7",
     "bootstrap-sass-official": "~3.3.7",
     "dropzone": "~4.3.0",
-    "font-awesome": "fontawesome#~4.4.0",
+    "font-awesome": "fontawesome#^4.7.0",
     "jquery": "~3.1.0",
     "moment": "~2.14.1",
     "ng-csv": "~0.3.6",