#1625 Redesign the observable flag info in the list view

frontend/app/index.html

@@ -133,6 +133,7 @@
     <script src="scripts/components/alert/AlertSimilarCaseListCmp.js"></script>
     <script src="scripts/components/app-container.component.js"></script>
     <script src="scripts/components/common/custom-field-input.component.js"></script>
+    <script src="scripts/components/common/observable-flags.component.js"></script>
     <script src="scripts/components/control-sidebar.component.js"></script>
     <script src="scripts/components/header.component.js"></script>
     <script src="scripts/components/main-sidebar.component.js"></script>

frontend/app/scripts/components/common/observable-flags.component.js

@@ -0,0 +1,21 @@
+(function() {
+    'use strict';
+
+    angular.module('theHiveComponents')
+        .component('observableFlags', {
+            controller: function() {
+                this.filterBy = function(fieldName, newValue) {
+                    this.onFilter({
+                        fieldName: fieldName,
+                        value: newValue
+                    });
+                };
+            },
+            controllerAs: '$ctrl',
+            templateUrl: 'views/components/common/observable-flags.component.html',
+            bindings: {
+                observable: '<',
+                onFilter: '&'
+            }
+        });
+})();

frontend/app/styles/main.css

@@ -380,6 +380,10 @@ ul.observable-reports-summary li {
     background: #f5f5f5;
 }
 
+.text-disabled {
+    color: #dfdfdf;
+}
+
 .text-yellow {
     color: rgb(231, 147, 0);
 }

frontend/app/views/components/common/observable-flags.component.html

@@ -0,0 +1,49 @@
+<div class="observable-flags">
+    <!-- IOC flag -->
+    <div ng-if="!!$ctrl.observable.ioc" class="observable-ioc clickable" uib-tooltip="is an IOC" tooltip-popup-delay="500" tooltip-placement="bottom"
+        ng-click="$ctrl.filterBy('ioc', true)">
+        <i class="fa fa-star"></i>
+    </div>
+    <div ng-if="!!!$ctrl.observable.ioc" class="observable-ioc clickable"
+        ng-click="$ctrl.filterBy('ioc', false)">
+        <i class="fa fa-star text-disabled"></i>
+    </div>
+
+    <!-- Sighted flag -->
+    <div ng-if="!!$ctrl.observable.sighted" class="observable-ioc clickable" uib-tooltip="has been sighted" tooltip-popup-delay="500" tooltip-placement="bottom"
+        ng-click="$ctrl.filterBy('sighted', true)">
+        <i class="fa fa-toggle-on"></i>
+    </div>
+    <div ng-if="!!!$ctrl.observable.sighted" class="observable-ioc clickable"
+        ng-click="$ctrl.filterBy('sighted', false)">
+        <i class="fa fa-toggle-on text-disabled"></i>
+    </div>
+
+    <!-- Seen flag -->
+    <div ng-if="$ctrl.observable.extraData.seen.seen > 0" class="observable-seen" uib-tooltip="{{$ctrl.observable.extraData.seen.seen}} related artifact(s)" tooltip-popup-delay="500" tooltip-placement="bottom">
+        <i ng-class="{'text-danger': $ctrl.observable.extraData.seen.ioc}" class="fa fa-eye"></i>
+    </div>
+    <div ng-if="!($ctrl.observable.extraData.seen.seen > 0)" class="observable-seen">
+        <i class="fa fa-eye-slash text-disabled"></i>
+    </div>
+
+    <!-- Ignore Similarity flag -->
+    <div ng-if="!!$ctrl.observable.ignoreSimilarity" class="observable-ioc clickable" uib-tooltip="ignored for similarity" tooltip-popup-delay="500" tooltip-placement="bottom"
+        ng-click="$ctrl.filterBy('ignoreSimilarity', true)">
+        <i class="fa fa-chain-broken"></i>
+    </div>
+    <div ng-if="!!!$ctrl.observable.ignoreSimilarity" class="observable-ioc clickable"
+        ng-click="$ctrl.filterBy('ignoreSimilarity', false)">
+        <i class="fa fa-chain-broken text-disabled"></i>
+    </div>
+
+
+
+    <!-- <span
+      uib-tooltip="{{artifact.extraData.seen.seen}} related artifact(s)"
+      tooltip-placement="bottom"
+      ng-if="artifact.extraData.seen.seen > 0"
+      class="glyphicon glyphicon-eye-open"
+      ></span> -->
+
+</div>

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

@@ -29,9 +29,6 @@ <h4>
                     <input type="checkbox" ng-change="selectAll()" ng-model="menu.selectAll" ng-disabled="switchTEList"></input>
                 </th>
                 <th style="width: 15px"></th>
-                <th style="width: 15px"></th>
-                <th style="width: 15px"></th>
-                <th style="width: 15px"></th>
                 <th style="width: 100px">
                   <a href class="text-default" ng-click="sortByField('dataType')">
                     Type
@@ -67,32 +64,14 @@ <h4>
                     <input type="checkbox" ng-model="artifact.selected" ng-change="selectArtifact(artifact)" if-permission="manageObservable" allowed="{{artifact.extraData.permissions.join(',')}}">
                 </td>
                 <td>
-                    <span ng-click="addFilterValue('ioc', artifact.ioc)" ng-if="artifact.ioc" class="clickable fa fa-star" uib-tooltip="is an IOC" tooltip-popup-delay="500" tooltip-placement="bottom"></span>
-                </td>
-                <td>
-                    <span ng-click="addFilterValue('sighted', artifact.sighted)" ng-if="artifact.sighted" class="clickable fa fa-toggle-on" uib-tooltip="has been sighted" tooltip-popup-delay="500" tooltip-placement="bottom"></span>
-                </td>
-                <td>
-                    <span ng-click="addFilterValue('ignoreSimilarity', artifact.ignoreSimilarity)" ng-if="artifact.ignoreSimilarity" class="clickable fa fa-chain-broken" uib-tooltip="ignored from similarity" tooltip-popup-delay="500" tooltip-placement="bottom"></span>
-                </td>
-                <td>
-                    <span
-                      uib-tooltip="{{artifact.extraData.seen.seen}} related artifact(s)"
-                      tooltip-placement="bottom"
-                      ng-if="artifact.extraData.seen.seen > 0"
-                      class="glyphicon glyphicon-eye-open"
-                      ng-class="{'text-danger': artifact.extraData.seen.ioc}"></span>
+                    <observable-flags observable="artifact" on-filter="addFilterValue(fieldName, value)"></observable-flags>
                 </td>
                 <td>
                     <a href ng-click="addFilterValue('dataType', artifact.dataType)"><span ng-bind="artifact.dataType"></span></a>
                 </td>
                 <td class="wrap">
                     <!-- FIXME -->
                     <div class="wrap clickable" ng-click="openArtifact(artifact)">
-                        <!-- <span class="mr-xxs text-primary clickable" ng-if="!!!artifact.extraData.isOwner"><i class="fa fa-share-square"
-                            uib-tooltip="Shared from another organisation" tooltip-placement="right"></i></span>
-                        <span class="mr-xxs text-primary clickable" ng-if="!!artifact.extraData.isOwner"><i class="fa fa-building-o"
-                            uib-tooltip="Created by my organisation" tooltip-placement="right"></i></span> -->
                         <span class="wrap clickable" uib-tooltip="{{artifact.message}}" tooltip-placement="top-left">
                             {{(artifact.data | fang) || (artifact.attachment.name | fang)}}
                         </span>