#1611 Add tag autocomplete in filter forms

TheHive-Project · Nov 13, 2020 · 91aba8c · 91aba8c
1 parent 5b02550
commit 91aba8c
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 17 deletions.
diff --git a/frontend/app/scripts/directives/dashboard/filter-editor.js b/frontend/app/scripts/directives/dashboard/filter-editor.js
@@ -1,6 +1,6 @@
 (function() {
     'use strict';
-    angular.module('theHiveDirectives').directive('filterEditor', function($q, AuthenticationSrv, UserSrv, UtilsSrv) {
+    angular.module('theHiveDirectives').directive('filterEditor', function($q, AuthenticationSrv, UserSrv, TagSrv, UtilsSrv) {
         return {
             restrict: 'E',
             scope: {
@@ -50,6 +50,11 @@
                     if(!field) {
                         return;
                     }
+
+                    if(field.name === 'tags') {
+                        return field.name;
+                    }
+
                     var type = field.type;
 
                     if ((type === 'string' || type === 'number' || type === 'integer'  || type === 'float' ) && field.values.length > 0) {
@@ -64,7 +69,9 @@
 
                     var promise = null;
 
-                    if(field.type === 'user') {
+                    if(field.name === 'tags') {
+                        return TagSrv.getTagsFor(scope.entity, query);
+                    } else if(field.type === 'user') {
                         promise = AuthenticationSrv.current()
                             .then(function(user) {
                                 return UserSrv.autoComplete(user.organisation, query);

diff --git a/frontend/app/scripts/services/api/TagSrv.js b/frontend/app/scripts/services/api/TagSrv.js
@@ -3,27 +3,31 @@
     angular.module('theHiveServices')
         .service('TagSrv', function(QuerySrv, $q) {
 
+            var self = this;
+
             var getTags = function(objectType, term) {
                 var defer = $q.defer();
-
                 var operations = [
-                    { _name: 'listTag' },
-                    { _name: objectType },
-                    {
-                        _name: 'filter',
-                        _like: {
-                            _field: 'text',
-                            _value: '*' + term + '*'
-                        }
-                    },
-                    {
-                        _name: 'text'
-                    }
+                    { _name: 'listTag' }
                 ];
 
+                if(objectType) {
+                    operations.push({ _name: objectType });
+                }
+
+                operations.push({
+                    _name: 'filter',
+                    _like: {
+                        _field: 'text',
+                        _value: '*' + term + '*'
+                    }
+                });
+
+                operations.push({ _name: 'text' });
+
                 // Get the list
-                QuerySrv.call('v0', operations)
-                    .then(function(data) {                        
+                QuerySrv.call('v0', operations, {name: 'tags-auto-complete'})
+                    .then(function(data) {
                         defer.resolve(_.map(_.unique(data), function(tag) {
                             return {text: tag};
                         }));
@@ -32,6 +36,21 @@
                 return defer.promise;
             };
 
+            this.getTagsFor = function(entity, query) {
+
+                switch(entity) {
+                    case 'case':
+                        return self.fromCases(query);
+                    case 'case_artifact':
+                        return self.fromObservables(query);
+                    case 'alert':
+                        return self.fromAlerts(query);
+                    default:
+                        return self.getTags(undefined, query);
+                }
+
+            };
+
             this.fromCases = function(term) {
                 return getTags('fromCase', term);
             };
@@ -40,5 +59,9 @@
                 return getTags('fromObservable', term);
             };
 
+            this.fromAlerts = function(term) {
+                return getTags('fromAlert', term);
+            };
+
         });
 })();
diff --git a/frontend/app/views/directives/dashboard/filter-editor.html b/frontend/app/views/directives/dashboard/filter-editor.html
@@ -21,6 +21,27 @@
         </div>
     </div>
 
+    <div ng-switch-when="tags" class="row">
+        <div class="col-xs-2 ph-0" uib-dropdown>
+            <button type="button" class="btn btn-block btn-default dropdown-toggle" uib-dropdown-toggle>
+                {{filter.value.operator || 'any'}} of <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" uib-dropdown-menu>
+                <li><a href ng-click="filter.value.operator = 'any'">any of</a></li>
+                <li><a href ng-click="filter.value.operator = 'all'">all of</a></li>
+                <li><a href ng-click="filter.value.operator = 'none'">none of</a></li>
+            </ul>
+        </div>
+        <div class="col-xs-10 pl-xxxs clear">
+            <tags-input class="form-control-wrapper"
+                ng-model="filter.value.list"
+                placeholder="ex: Enter a tag"
+                replace-spaces-with-dashes="false">
+                    <auto-complete source="promiseFor(filter, $query)" min-length="3" debounce-delay="400"></auto-complete>
+                </tags-input>
+        </div>
+    </div>
+
     <div ng-switch-when="user" class="row">
         <div class="col-xs-2 ph-0" uib-dropdown>
             <button type="button" class="btn btn-block btn-default dropdown-toggle" uib-dropdown-toggle>