#1670 Update tag fields and display to include colour

frontend/app/index.html

@@ -247,6 +247,8 @@
     <script src="scripts/directives/responder-actions.js"></script>
     <script src="scripts/directives/search/search-item.js"></script>
     <script src="scripts/directives/severity.js"></script>
+    <script src="scripts/directives/tag-colour.js"></script>
+    <script src="scripts/directives/tag-item.js"></script>
     <script src="scripts/directives/tag-list.js"></script>
     <script src="scripts/directives/task-progress.js"></script>
     <script src="scripts/directives/tlp.js"></script>

frontend/app/scripts/app.js

@@ -116,6 +116,9 @@ angular.module('thehive', [
                     },
                     uiConfig: function($q, UiSettingsSrv) {
                         return UiSettingsSrv.all();
+                    },
+                    taxonomyCache: function(TaxonomyCacheSrv) {
+                        return TaxonomyCacheSrv.all();
                     }
                 }
             })

frontend/app/scripts/directives/tag-colour.js

@@ -0,0 +1,22 @@
+(function() {
+    'use strict';
+    angular.module('theHiveDirectives').directive('tagColour', function($timeout, TaxonomyCacheSrv) {
+        return {
+            restrict: 'A',
+            scope: {
+                tag: '='
+            },
+            link: function(scope, element/*, attrs*/) {
+                if(!scope.tag) {
+                    return;
+                }
+
+                scope.bgColour = TaxonomyCacheSrv.getColour(scope.tag) || '#3c8dbc';
+
+                $timeout(function() {
+                    angular.element(element[0]).attr('style', 'background-color:' + scope.bgColour);
+                });
+            }
+        };
+    });
+})();

frontend/app/scripts/directives/tag-item.js

@@ -0,0 +1,31 @@
+(function() {
+    'use strict';
+    angular.module('theHiveDirectives').directive('tagItem', function(TaxonomyCacheSrv) {
+        return {
+            restrict: 'E',
+            replace: true,
+            scope: {
+                value: '='
+            },
+            templateUrl: 'views/directives/tag-item.html',
+            link: function(scope/*, element, attrs*/) {
+                if(!scope.value) {
+                    return;
+                }
+                if(_.isString(scope.value)) {
+                    scope.tag = scope.value;
+                    scope.bgColor = TaxonomyCacheSrv.getColour(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';
+                }
+            }
+        };
+    });
+
+})();

frontend/app/scripts/services/api/TaxonomyCacheSrv.js

@@ -1,10 +1,11 @@
 (function() {
     'use strict';
     angular.module('theHiveServices')
-        .service('TaxonomyCacheSrv', function($http, $q, QuerySrv) {
+        .service('TaxonomyCacheSrv', function($http, $q, $filter, QuerySrv) {
             var self = this;
 
             this.cache = null;
+            this.tagsCache = null;
 
             this.list = function() {
                 return QuerySrv.call('v1', [
@@ -20,22 +21,42 @@
 
             this.clearCache = function() {
                 self.cache = null;
+                self.tagsCache = null;
             };
 
             this.getCache = function(name) {
                 return self.cache[name];
             };
 
+            this.getColour = function(tag) {
+                return self.tagsCache[tag];
+            };
+
+            this.cacheTagColors = function(tags) {
+                var fn = $filter('tagValue');
+
+                _.each(tags, function(tag) {
+                    var name = fn(tag);
+
+                    if(!_.isEmpty(name)) {
+                        self.tagsCache[name] =  tag.colour;
+                    }
+                });
+            };
+
             this.all = function(reload) {
                 var deferred = $q.defer();
 
                 if (self.cache === null || reload === true) {
                     self.list()
                         .then(function(response) {
                             self.cache = {};
+                            self.tagsCache = {};
 
                             _.each(response, function(taxonomy) {
                                 self.cache[taxonomy.namespace] = taxonomy;
+
+                                self.cacheTagColors(taxonomy.tags);
                             });
 
                             deferred.resolve(self.cache);

frontend/app/styles/main.css

@@ -779,3 +779,28 @@ table.tbody-stripped > tbody > tr > td {
     overflow: hidden;
 	text-overflow: ellipsis;
 }
+
+/* Customise tags input */
+
+tags-input.ti-tag-selector .tags .tag-item {
+    background-color: #d2d6de;
+    color: #444;
+    border: none;
+    padding: 0;
+    padding-right: 5px;
+    line-height: 22px;
+}
+
+tags-input.ti-tag-selector .tags .tag-item ti-tag-item{
+
+}
+
+tags-input.ti-tag-selector .tags .tag-item span.tag-item-border{
+    position: relative;
+    left:0;
+    width: 8px;
+    background-color: red;
+    display: inline-block;
+    border-top-left-radius: .25em;
+    border-bottom-left-radius: .25em;
+}

frontend/app/views/components/common/tag.component.html

@@ -1 +1 @@
-<span class="label label-tag label-default label-lg" style="">{{$ctrl.tag}}</span>
+<span class="label label-tag label-default label-lg" style="border-left-color:{{$ctrl.bgColor}};">{{$ctrl.tag}}</span>

frontend/app/views/directives/flow/alert.html

@@ -42,7 +42,7 @@
             <div ng-switch-when="tags">
                 {{k}}:
                 <span ng-repeat="tag in v">
-                    <span class="label label-primary">{{tag}}</span>
+                    <tag-item value="tag"></tag-item>
                 </span>
                 <span ng-if="v.length === 0">
                     <em>None</em>

frontend/app/views/directives/flow/case.html

@@ -28,7 +28,7 @@
             <div ng-switch-when="tags">
                 {{k}}:
                 <span ng-repeat="tag in v track by $index">
-                    <span class="label label-primary">{{tag}}</span>
+                    <tag-item value="tag"></tag-item>
                 </span>
                 <span ng-if="v.length === 0">
                     <em>None</em>
@@ -47,7 +47,7 @@
                 {{k}}: <tlp format="'static'" value="v" namespace="PAP"></tlp>
             </div>
             <div ng-switch-when="owner">
-                {{k}}:                
+                {{k}}:
                 <em><user-info value="v" field="name"></user-info></em>
             </div>
             <div ng-switch-default>

frontend/app/views/directives/flow/observable.html

@@ -17,9 +17,9 @@
     <div class="flow-item-updates wrap" ng-switch-when="Creation">
         <div ng-if="base.object.message">description: {{base.object.message| limitTo: 250}}</div>
         <div ng-if="base.object.tags.length > 0">
-            Tags: 
+            Tags:
             <span ng-repeat="tag in base.object.tags">
-                <span class="label label-primary">{{tag}}</span>
+                <tag-item value="tag"></tag-item>
             </span>
         </div>
     </div>
@@ -32,7 +32,7 @@
             <div ng-switch-when="tags">
                 {{k}}:
                 <span ng-repeat="tag in v">
-                    <span class="label label-primary">{{tag}}</span>
+                    <tag-item value="tag"></tag-item>
                 </span>
                 <span ng-if="v.length === 0">
                     <em>None</em>

frontend/app/views/directives/tag-input-item.html

@@ -0,0 +1,3 @@
+<span class="tag-item-border" tag-colour tag="$getDisplayText()">&nbsp;</span>
+<span ng-bind="$getDisplayText()"></span>
+<a class="remove-button" ng-click="$removeTag()" ng-bind="::$$removeTagSymbol"></a>

frontend/app/views/directives/tag-item.html

@@ -0,0 +1,3 @@
+<span class="label label-default label-tag mb-xxxs mr-xxxs"
+    style="border-left-color:{{bgColor}};">{{tag}}
+</span>

frontend/app/views/directives/tag-list.html

@@ -1,3 +1,3 @@
 <div class="tags-list flexwrap">
-    <span ng-repeat="tag in data track by $index" class="label label-primary mb-xxxs mr-xxxs">{{tag}}</span>
+    <tag-item ng-repeat="tag in data track by $index" value="tag"></tag-item>
 </div>

frontend/app/views/directives/updatable-tag-list.html

@@ -3,9 +3,7 @@
         ng-class="{'tags-list flexwrap': value.length > 0}">
         <span class="updatable-value text-warning" ng-show="!value || value.length === 0"><em>Not Specified</em></span>
 
-        <!-- <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span> -->
-        <!-- <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span> -->
-        <tag class=" mb-xxxs mr-xxxs" ng-repeat="tag in value" value="tag.text"></tag>
+        <tag-item ng-repeat="tag in value" value="tag.text"></tag-item>
 
         <small class="updatable-input-icon" ng-class="{'lg': value.length > 0}">
             <i class="glyphicon glyphicon-pencil"></i>
@@ -14,7 +12,8 @@
 
     <span ng-show="updatable.updating">
         <div class="form-group">
-            <tags-input class="ti-input-sm" min-length="2" ng-model="value" placeholder="Add labels" replace-spaces-with-dashes="false">
+            <tags-input class="ti-input-sm ti-tag-selector" min-length="2" ng-model="value" placeholder="Add labels" replace-spaces-with-dashes="false"
+                template="views/directives/tag-input-item.html" tag-class="label-primary">
                 <auto-complete ng-if="source" min-length="3" debounce-delay="400" source="source($query)"></auto-complete>
             </tags-input>
         </div>

frontend/app/views/partials/alert/event.dialog.html

@@ -42,7 +42,7 @@ <h4 class="text-primary">
                 <div class="case-tags flexwrap mt-xxs">
                     <strong><i class="fa fa-tags mr-xxxs"></i></strong>
                     <strong class="text-muted mr-xxxs" ng-if="!dialog.event.tags || dialog.event.tags.length === 0">None</strong>
-                    <span ng-repeat="tag in dialog.event.tags track by $index" class="label label-primary mb-xxxs mr-xxxs">{{tag}}</span>
+                    <tag-item ng-repeat="tag in dialog.event.tags track by $index" value="tag"></tag-item>
                 </div>
 
                 <div class="mt-xs" ng-if="dialog.event.description">

frontend/app/views/partials/alert/list.html

@@ -173,7 +173,8 @@ <h3 class="box-title">List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
                                         <div class="case-tags flexwrap">
                                             <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
                                             <strong class="text-muted mr-xxxs" ng-if="!event.tags || event.tags.length === 0">None</strong>
-                                            <span ng-repeat="tag in event.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer" ng-click="$vm.addFilterValue('tags', tag)">{{tag}}</span>
+                                            <tag-item ng-repeat="tag in event.tags track by $index" class="pointer" 
+                                                ng-click="$vm.addFilterValue('tags', tag)" value="tag"></tag-item>
                                         </div>
                                     </td>
                                     <td></td>

frontend/app/views/partials/case/case.list.html

@@ -71,13 +71,12 @@ <h3 class="box-title">List of cases ({{$vm.list.total || 0}} of {{$vm.caseCount}
                                         <div class="case-tags flexwrap mt-xxs">
                                             <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
                                             <strong class="text-muted mr-xxxs" ng-if="!currentCase.tags || currentCase.tags.length === 0">None</strong>
-                                            <span ng-repeat="tag in currentCase.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer" ng-click="$vm.addFilterValue('tags', tag)">{{tag}}
-
-                                            </span>
+                                            <tag-item ng-repeat="tag in currentCase.tags track by $index" class="pointer"
+                                                ng-click="$vm.addFilterValue('tags', tag)" value="tag"></tag-item>
                                         </div>
 
                                         <custom-field-labels ng-if="$vm.filtering.context.showAdvanced" custom-fields="currentCase.customFields" on-field-click="$vm.addFilterValue(name, value)"></custom-field-labels>
-                                        
+
                                         <div class="text-success" ng-show="currentCase.status !== 'Open'">
                                             <small>
                                                 (Closed at {{currentCase.endDate | showDate}} as <strong>{{$vm.CaseResolutionStatus[currentCase.resolutionStatus]}}</strong>)

frontend/app/views/partials/observables/list/observables.html

@@ -80,11 +80,8 @@ <h4>
                     <div class="case-tags flexwrap mt-xxs">
                         <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
                         <strong class="text-muted mr-xxxs" ng-if="!artifact.tags || artifact.tags.length === 0">None</strong>
-                        <span class="label label-primary mb-xxxs mr-xxxs pointer"
-                            ng-repeat="tag in artifact.tags track by $index"
-                            ng-click="addFilterValue('tags', tag)">
-                            {{tag}}
-                        </span>
+                        <tag-item class="pointer" ng-repeat="tag in artifact.tags track by $index"
+                            ng-click="addFilterValue('tags', tag)" value="tag"></tag-item>
                     </div>
 
                     <mini-report-list observable="artifact" reports="artifact.reports" on-item-clicked="showReport(observable, analyzerId)"></mini-report-list>