#1816 Allow free tag color update

TheHive-Project · Mar 5, 2021 · 4b4909b · 4b4909b
1 parent e7cb588
commit 4b4909b
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 21 deletions.
diff --git a/frontend/app/index.html b/frontend/app/index.html
@@ -261,6 +261,7 @@
     <script src="scripts/directives/tlp.js"></script>
     <script src="scripts/directives/updatable.js"></script>
     <script src="scripts/directives/updatableBoolean.js"></script>
+    <script src="scripts/directives/updatableColour.js"></script>
     <script src="scripts/directives/updatableDataDropdown.js"></script>
     <script src="scripts/directives/updatableDate.js"></script>
     <script src="scripts/directives/updatableSelect.js"></script>

diff --git a/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js b/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js
@@ -3,15 +3,15 @@
 
     angular.module('theHiveComponents')
         .component('orgCustomTagsList', {
-            controller: function($uibModal, $scope, PaginatedQuerySrv, FilteringSrv, UserSrv, NotificationSrv, ModalUtilsSrv) {
+            controller: function($scope, PaginatedQuerySrv, FilteringSrv, TagSrv, UserSrv, NotificationSrv) {
                 var self = this;
 
                 self.tags = [];
                 self.getUserInfo = UserSrv.getCache;
 
                 this.$onInit = function() {
                     // TODO: FIXME
-                    self.filtering = new FilteringSrv('taxonomy', 'custom-tags.list', {
+                    self.filtering = new FilteringSrv('tag', 'custom-tags.list', {
                         version: 'v1',
                         defaults: {
                             showFilters: true,
@@ -59,6 +59,16 @@
                     });
                 };
 
+                self.updateColour = function(id, colour) {
+                    TagSrv.updateTag(id, {colour: colour})
+                        .then(function(/*response*/) {
+                            NotificationSrv.success('Tag list', 'Tag colour updated successfully');
+                        })
+                        .catch(function(err) {
+                            NotificationSrv.error('Tag list', err.data, err.status);
+                        })
+                }
+
                 // Filtering
                 this.toggleFilters = function () {
                     this.filtering.toggleFilters();

diff --git a/frontend/app/scripts/directives/tag-item.js b/frontend/app/scripts/directives/tag-item.js
@@ -5,7 +5,8 @@
             restrict: 'E',
             replace: true,
             scope: {
-                value: '='
+                value: '=',
+                colour: '='
             },
             templateUrl: 'views/directives/tag-item.html',
             link: function(scope/*, element, attrs*/) {
@@ -14,16 +15,26 @@
                 }
                 if(_.isString(scope.value)) {
                     scope.tag = scope.value;
-                    scope.bgColor = TaxonomyCacheSrv.getColour(scope.value) || '#3c8dbc';
+                    scope.bgColor = scope.colour ||
+                        TaxonomyCacheSrv.getColour(scope.value) ||
+                        TaxonomyCacheSrv.getColour('_freetags_:' + scope.value) ||
+                        '#3c8dbc';
                 } else {
                     scope.tag = _.without([
                         scope.value.namespace,
                         ':',
                         scope.value.predicate,
                         scope.value.value ? ("=\"" + scope.value.value + "\"") : null
                     ], null).join('');
-                    scope.bgColor = scope.value.colour || '#3c8dbc';
+                    scope.bgColor = scope.value.colour || scope.colour || '#3c8dbc';
                 }
+
+                scope.$watch('colour', function(value) {
+                    if(!value) {
+                        return;
+                    }
+                    scope.bgColor = value;
+                });
             }
         };
     });

diff --git a/frontend/app/scripts/directives/updatableColour.js b/frontend/app/scripts/directives/updatableColour.js
@@ -0,0 +1,18 @@
+(function() {
+    'use strict';
+    angular.module('theHiveDirectives')
+        .directive('updatableColour', function(UtilsSrv) {
+            return {
+                'restrict': 'E',
+                'link': UtilsSrv.updatableLink,
+                'templateUrl': 'views/directives/updatable-colour.html',
+                'scope': {
+                    'value': '=?',
+                    'onUpdate': '&',
+                    'active': '=?',
+                    'placeholder': '@',
+                    'clearable': '<?'
+                }
+            };
+        });
+})();
diff --git a/frontend/app/scripts/services/api/TagSrv.js b/frontend/app/scripts/services/api/TagSrv.js
@@ -1,36 +1,31 @@
 (function() {
     'use strict';
     angular.module('theHiveServices')
-        .service('TagSrv', function(QuerySrv, $q) {
+        .service('TagSrv', function(QuerySrv, $q, $http) {
 
-            var self = this;
-
-            this.getTags = function(term) {
+            this.getFreeTags = function() {
                 var defer = $q.defer();
 
                 var operations = [
                     { _name: 'listTag'},
                     { _name: 'freetags'},
-                    { _name: 'filter', _like: {_field: 'predicate', _value: term+'*'}},
-                    { _name: 'sort', _fields: [{'predicate': 'asc'}]},
-                    { _name: 'text'},
-                    // { _name: 'page', from: 0, to: 20},
-                    // { _name: 'text'}
                 ]
 
                 QuerySrv.query('v1', operations, {
                     params: {
                         name: 'list-tags'
                     }
                 }).then(function(response) {
-                    defer.resolve(_.map(response.data, function(tag) {
-                        return {text: tag};
-                    }));
+                    defer.resolve(response.data);
                 });
 
                 return defer.promise;
             };
 
+            this.updateTag = function(id, patch) {
+                return $http.patch('./api/v1/tag/' + id, patch);
+            }
+
             this.autoComplete = function(term) {
                 var defer = $q.defer();
 

diff --git a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js
@@ -1,7 +1,7 @@
 (function() {
     'use strict';
     angular.module('theHiveServices')
-        .service('TaxonomyCacheSrv', function($http, $q, $filter, $uibModal, QuerySrv) {
+        .service('TaxonomyCacheSrv', function($http, $q, $filter, $uibModal, TagSrv, QuerySrv) {
             var self = this;
 
             this.cache = null;
@@ -58,6 +58,14 @@
 
                                 self.cacheTagColors(taxonomy.tags);
                             });
+                        })
+                        .then(function() {
+                            return TagSrv.getFreeTags();
+                        })
+                        .then(function(freeTags) {
+                            self.cacheTagColors(freeTags);
+
+                            console.log(self.cache);
 
                             deferred.resolve(self.cache);
                         });

diff --git a/frontend/app/views/components/org/custom-tags/tag-list.html b/frontend/app/views/components/org/custom-tags/tag-list.html
@@ -38,7 +38,7 @@ <h4>
                         <i ng-show="$vm.filtering.context.sort.indexOf('-predicate') !== -1" class="fa fa-caret-down"></i>
                       </a>
                     </th>
-                    <th width="150px">
+                    <th width="250px">
                         Colour
                     </th>
                     <th style="width: 60px;">By</th>
@@ -66,10 +66,10 @@ <h4>
                 <tr ng-repeat="tag in $vm.list.values">
                     <td>{{tag._id}}</td>
                     <td>
-                        <tag value="tag.predicate"></tag>
+                        <tag-item class="label-lg" value="tag.predicate" colour="tag.colour"></tag-item>
                     </td>
                     <td>
-                        <span>{{tag.colour}}</span>
+                        <updatable-colour value="tag.colour" on-update="$vm.updateColour(tag._id, newValue)"></updatable-colour>
                     </td>
 
                     <td class="nowrap">

diff --git a/frontend/app/views/directives/updatable-colour.html b/frontend/app/views/directives/updatable-colour.html
@@ -0,0 +1,31 @@
+<div class="updatable-input updatable-input-select">
+	<span class="updatable-input-value-wrapper" ng-hide="updatable.updating" ng-click="edit()">
+		<span ng-if="value!==null && value !==''" class="updatable-value"><i class="fa fa-stop" style="color: {{value}};"></i> {{value}}</span>
+		<span ng-if="value === null || value === undefined || value === ''" class="updatable-value text-warning"><em>Not Specified</em></span>
+
+		<small class="updatable-input-icon">
+			<i class="glyphicon glyphicon-pencil"></i>
+		</small>
+	</span>
+
+	<form ng-submit="update()" ng-show="updatable.updating">
+		<div class="input-group input-group-sm">
+            <input type="text" class="form-control" ng-model="value" placeholder="Colour" size="8">
+
+			<span class="input-group-btn">
+                <button colorpicker colorpicker-close-on-select class="btn btn-default" ng-model="value" type="button">
+                    <i class="fa fa-stop" style="color: {{value}};" ng-class="{'fa-stop': value, 'fa-ellipsis-h': !value}"></i>
+                </button>
+				<button class="btn btn-sm btn-default" type="submit">
+					<i class="text-success glyphicon glyphicon-ok"></i>
+				</button>
+				<button class="btn btn-sm btn-default" type="button" ng-click="cancel()">
+					<i class="text-danger glyphicon glyphicon-remove"></i>
+				</button>
+				<button class="btn btn-sm btn-default" type="button" ng-click="clear()" ng-if="clearable === true">
+					<i class="text-danger glyphicon glyphicon-erase"></i>
+				</button>
+	        </span>
+		</div>
+	</form>
+</div>