#1816 Add the possibility to update the value of a freetag

TheHive-Project · Mar 8, 2021 · 5f6ce0a · 5f6ce0a
1 parent 7c8515a
commit 5f6ce0a
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 4 deletions.
diff --git a/frontend/app/index.html b/frontend/app/index.html
@@ -266,6 +266,7 @@
     <script src="scripts/directives/updatableDate.js"></script>
     <script src="scripts/directives/updatableSelect.js"></script>
     <script src="scripts/directives/updatableSimpleText.js"></script>
+    <script src="scripts/directives/updatableTag.js"></script>
     <script src="scripts/directives/updatableTagList.js"></script>
     <script src="scripts/directives/updatableTags.js"></script>
     <script src="scripts/directives/updatableText.js"></script>

diff --git a/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js b/frontend/app/scripts/components/organisation/OrgCustomTagsListCmp.js
@@ -87,6 +87,16 @@
                         })
                 }
 
+                self.updateTag = function(id, value) {
+                    TagSrv.updateTag(id, {predicate: value})
+                        .then(function(/*response*/) {
+                            NotificationSrv.success('Tag value 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
@@ -18,15 +18,15 @@
                     scope.bgColor = scope.colour ||
                         TaxonomyCacheSrv.getColour(scope.value) ||
                         TaxonomyCacheSrv.getColour('_freetags_:' + scope.value) ||
-                        '#3c8dbc';
+                        '#000000';
                 } else {
                     scope.tag = _.without([
                         scope.value.namespace,
                         ':',
                         scope.value.predicate,
                         scope.value.value ? ("=\"" + scope.value.value + "\"") : null
                     ], null).join('');
-                    scope.bgColor = scope.value.colour || scope.colour || '#3c8dbc';
+                    scope.bgColor = scope.value.colour || scope.colour || '#000000';
                 }
 
                 scope.$watch('colour', function(value) {
@@ -35,6 +35,23 @@
                     }
                     scope.bgColor = value;
                 });
+
+                scope.$watch('value', function(value) {
+                    if(!value) {
+                        return;
+                    }
+
+                    if(_.isString(value)) {
+                        scope.tag = value;
+                    } else {
+                        scope.tag = _.without([
+                            value.namespace,
+                            ':',
+                            value.predicate,
+                            value.value ? ("=\"" + value.value + "\"") : null
+                        ], null).join('');
+                    }
+                });
             }
         };
     });

diff --git a/frontend/app/scripts/directives/updatableTag.js b/frontend/app/scripts/directives/updatableTag.js
@@ -0,0 +1,16 @@
+(function() {
+    'use strict';
+    angular.module('theHiveDirectives')
+        .directive('updatableTag', function(UtilsSrv) {
+            return {
+                'restrict': 'E',
+                'link': UtilsSrv.updatableLink,
+                'templateUrl': 'views/directives/updatable-tag.html',
+                'scope': {
+                    'value': '=?',
+                    'colour': '<?',
+                    'onUpdate': '&'
+                }
+            };
+        });
+})();
diff --git a/frontend/app/views/components/org/custom-tags/tag-list.html b/frontend/app/views/components/org/custom-tags/tag-list.html
@@ -26,7 +26,7 @@ <h4>
     <div class="col-md-12" ng-show="$vm.list.total > 0">
         <psearch control="$vm.list"></psearch>
 
-        <table class="table table-striped">
+        <table class="table table-striped case-tags">
             <thead>
                 <tr>
                     <th>
@@ -43,6 +43,7 @@ <h4>
                     <th width="100px">Cases</th>
                     <th width="100px">Alerts</th>
                     <th width="100px">Observables</th>
+                    <th width="100px">Templates</th>
                     <th style="width: 60px;">By</th>
                     <th style="width: 150px">
                         Dates
@@ -67,14 +68,16 @@ <h4>
             <tbody>
                 <tr ng-repeat="tag in $vm.list.values">
                     <td>
-                        <tag-item class="label-lg" value="tag.predicate" colour="tag.colour"></tag-item>
+                        <!-- <tag-item class="label-lg" value="tag.predicate" colour="tag.colour"></tag-item> -->
+                        <updatable-tag value="tag.predicate" colour="tag.colour" on-update="$vm.updateTag(tag._id, newValue)"></updatable-tag>
                     </td>
                     <td>
                         <updatable-colour value="tag.colour" on-update="$vm.updateColour(tag._id, newValue)"></updatable-colour>
                     </td>
                     <td>{{tag.extraData.usage.case}}</td>
                     <td>{{tag.extraData.usage.alert}}</td>
                     <td>{{tag.extraData.usage.observable}}</td>
+                    <td>{{tag.extraData.usage.templates}}</td>
                     <td class="nowrap">
                         <user user-id="tag._createdBy" icon-only="true" icon-size="m"></user>
                     </td>

diff --git a/frontend/app/views/directives/updatable-tag.html b/frontend/app/views/directives/updatable-tag.html
@@ -0,0 +1,26 @@
+<div class="updatable-input updatable-input-text">
+	<span class="updatable-input-value-wrapper pb-xxxs" ng-hide="updatable.updating" ng-click="edit()">
+		<span ng-if="value!==null && value !==''" class="updatable-value"><tag-item value="value" colour="colour"></tag-item></span>
+		<span ng-if="value===null || 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 input-sm" ng-model="value" autofocus="autofocus" required>
+
+			<span class="input-group-btn">
+				<button class="btn btn-sm btn-default" type="submit" ng-disabled="!value">
+					<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>
+	        </span>
+		</div>
+	</form>
+</div>