From 8a57fa64fbf06db7b1933da774c8b3967a566ccb Mon Sep 17 00:00:00 2001 From: Nabil Adouani Date: Wed, 3 Feb 2021 05:52:39 +0100 Subject: [PATCH] #1670 Update tag fields and display to include colour --- frontend/app/index.html | 2 ++ frontend/app/scripts/app.js | 3 ++ frontend/app/scripts/directives/tag-colour.js | 22 +++++++++++++ frontend/app/scripts/directives/tag-item.js | 31 +++++++++++++++++++ .../scripts/services/api/TaxonomyCacheSrv.js | 23 +++++++++++++- frontend/app/styles/main.css | 25 +++++++++++++++ .../components/common/tag.component.html | 2 +- frontend/app/views/directives/flow/alert.html | 2 +- frontend/app/views/directives/flow/case.html | 4 +-- .../app/views/directives/flow/observable.html | 6 ++-- .../app/views/directives/tag-input-item.html | 3 ++ frontend/app/views/directives/tag-item.html | 3 ++ frontend/app/views/directives/tag-list.html | 2 +- .../views/directives/updatable-tag-list.html | 7 ++--- .../views/partials/alert/event.dialog.html | 2 +- frontend/app/views/partials/alert/list.html | 3 +- .../app/views/partials/case/case.list.html | 7 ++--- .../observables/list/observables.html | 7 ++--- 18 files changed, 130 insertions(+), 24 deletions(-) create mode 100644 frontend/app/scripts/directives/tag-colour.js create mode 100644 frontend/app/scripts/directives/tag-item.js create mode 100644 frontend/app/views/directives/tag-input-item.html create mode 100644 frontend/app/views/directives/tag-item.html diff --git a/frontend/app/index.html b/frontend/app/index.html index dfdb2865af..61bbbc08cb 100644 --- a/frontend/app/index.html +++ b/frontend/app/index.html @@ -247,6 +247,8 @@ + + diff --git a/frontend/app/scripts/app.js b/frontend/app/scripts/app.js index 9676fea0b4..581b5bf4bd 100644 --- a/frontend/app/scripts/app.js +++ b/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(); } } }) diff --git a/frontend/app/scripts/directives/tag-colour.js b/frontend/app/scripts/directives/tag-colour.js new file mode 100644 index 0000000000..10e62b5ad7 --- /dev/null +++ b/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); + }); + } + }; + }); +})(); diff --git a/frontend/app/scripts/directives/tag-item.js b/frontend/app/scripts/directives/tag-item.js new file mode 100644 index 0000000000..598bc7facc --- /dev/null +++ b/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'; + } + } + }; + }); + +})(); diff --git a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js b/frontend/app/scripts/services/api/TaxonomyCacheSrv.js index 8fc04297aa..d68a65ab70 100644 --- a/frontend/app/scripts/services/api/TaxonomyCacheSrv.js +++ b/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,12 +21,29 @@ 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(); @@ -33,9 +51,12 @@ 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); diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css index cacda48614..4f46e49eff 100644 --- a/frontend/app/styles/main.css +++ b/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; +} diff --git a/frontend/app/views/components/common/tag.component.html b/frontend/app/views/components/common/tag.component.html index a5da190b79..c52f5c9b2b 100644 --- a/frontend/app/views/components/common/tag.component.html +++ b/frontend/app/views/components/common/tag.component.html @@ -1 +1 @@ -{{$ctrl.tag}} +{{$ctrl.tag}} diff --git a/frontend/app/views/directives/flow/alert.html b/frontend/app/views/directives/flow/alert.html index 1941efcc91..c6cb860356 100644 --- a/frontend/app/views/directives/flow/alert.html +++ b/frontend/app/views/directives/flow/alert.html @@ -42,7 +42,7 @@
{{k}}: - {{tag}} + None diff --git a/frontend/app/views/directives/flow/case.html b/frontend/app/views/directives/flow/case.html index a74c9f0f35..51039d33be 100644 --- a/frontend/app/views/directives/flow/case.html +++ b/frontend/app/views/directives/flow/case.html @@ -28,7 +28,7 @@
{{k}}: - {{tag}} + None @@ -47,7 +47,7 @@ {{k}}:
- {{k}}: + {{k}}:
diff --git a/frontend/app/views/directives/flow/observable.html b/frontend/app/views/directives/flow/observable.html index 638736ac5a..5b1b6e5889 100644 --- a/frontend/app/views/directives/flow/observable.html +++ b/frontend/app/views/directives/flow/observable.html @@ -17,9 +17,9 @@
description: {{base.object.message| limitTo: 250}}
- Tags: + Tags: - {{tag}} +
@@ -32,7 +32,7 @@
{{k}}: - {{tag}} + None diff --git a/frontend/app/views/directives/tag-input-item.html b/frontend/app/views/directives/tag-input-item.html new file mode 100644 index 0000000000..c8493839d8 --- /dev/null +++ b/frontend/app/views/directives/tag-input-item.html @@ -0,0 +1,3 @@ +  + + diff --git a/frontend/app/views/directives/tag-item.html b/frontend/app/views/directives/tag-item.html new file mode 100644 index 0000000000..67beaf07df --- /dev/null +++ b/frontend/app/views/directives/tag-item.html @@ -0,0 +1,3 @@ +{{tag}} + diff --git a/frontend/app/views/directives/tag-list.html b/frontend/app/views/directives/tag-list.html index aaf6a2d7c8..86792dd24b 100644 --- a/frontend/app/views/directives/tag-list.html +++ b/frontend/app/views/directives/tag-list.html @@ -1,3 +1,3 @@
- {{tag}} +
diff --git a/frontend/app/views/directives/updatable-tag-list.html b/frontend/app/views/directives/updatable-tag-list.html index e3f094bf51..71d16cc082 100644 --- a/frontend/app/views/directives/updatable-tag-list.html +++ b/frontend/app/views/directives/updatable-tag-list.html @@ -3,9 +3,7 @@ ng-class="{'tags-list flexwrap': value.length > 0}"> Not Specified - - - + @@ -14,7 +12,8 @@
- +
diff --git a/frontend/app/views/partials/alert/event.dialog.html b/frontend/app/views/partials/alert/event.dialog.html index 465646c9cf..5d7e42b991 100644 --- a/frontend/app/views/partials/alert/event.dialog.html +++ b/frontend/app/views/partials/alert/event.dialog.html @@ -42,7 +42,7 @@

None - {{tag}} +
diff --git a/frontend/app/views/partials/alert/list.html b/frontend/app/views/partials/alert/list.html index 7ccef1b92e..e937f23c22 100644 --- a/frontend/app/views/partials/alert/list.html +++ b/frontend/app/views/partials/alert/list.html @@ -173,7 +173,8 @@

List of alerts ({{$vm.list.total || 0}} of {{$vm.alertList
None - {{tag}} +
diff --git a/frontend/app/views/partials/case/case.list.html b/frontend/app/views/partials/case/case.list.html index 5ed67ac4f8..e3bb023a28 100644 --- a/frontend/app/views/partials/case/case.list.html +++ b/frontend/app/views/partials/case/case.list.html @@ -71,13 +71,12 @@

List of cases ({{$vm.list.total || 0}} of {{$vm.caseCount}
None - {{tag}} - - +
- +
(Closed at {{currentCase.endDate | showDate}} as {{$vm.CaseResolutionStatus[currentCase.resolutionStatus]}}) diff --git a/frontend/app/views/partials/observables/list/observables.html b/frontend/app/views/partials/observables/list/observables.html index 7290b50631..afb5a5607e 100644 --- a/frontend/app/views/partials/observables/list/observables.html +++ b/frontend/app/views/partials/observables/list/observables.html @@ -80,11 +80,8 @@

None - - {{tag}} - +