#167 Save the flow open/close status on the browsers local storage

TheHive-Project · Apr 10, 2017 · 3aa3707 · 3aa3707
1 parent cba1f05
commit 3aa3707
Show file tree

Hide file tree

Showing 12 changed files with 157 additions and 74 deletions.
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -197,6 +197,7 @@
     <script src="scripts/services/AlertSrv.js"></script>
     <script src="scripts/services/AnalyzerInfoSrv.js"></script>
     <script src="scripts/services/AnalyzerSrv.js"></script>
+    <script src="scripts/services/AppLayoutSrv.js"></script>
     <script src="scripts/services/AuditSrv.js"></script>
     <script src="scripts/services/AuthenticationSrv.js"></script>
     <script src="scripts/services/CaseArtifactSrv.js"></script>

diff --git a/ui/app/scripts/app.js b/ui/app/scripts/app.js
@@ -50,6 +50,10 @@ angular.module('thehive', ['ngAnimate', 'ngMessages', 'ui.bootstrap', 'ui.router
                 resolve: {
                     appConfig: function(VersionSrv) {
                         return VersionSrv.get();
+                    },
+                    appLayout: function($q, $rootScope, AppLayoutSrv) {
+                        AppLayoutSrv.init();                        
+                        return $q.resolve();
                     }
                 }
             })

diff --git a/ui/app/scripts/controllers/RootCtrl.js b/ui/app/scripts/controllers/RootCtrl.js
@@ -2,9 +2,10 @@
  * Controller for main page
  */
 angular.module('theHiveControllers').controller('RootCtrl',
-    function($scope, $uibModal, $location, $state, $base64, AuthenticationSrv, MispSrv, StreamSrv, StreamStatSrv, TemplateSrv, MetricsCacheSrv, AlertSrv, appConfig) {
+    function($scope, $rootScope, $uibModal, $location, $state, $base64, AuthenticationSrv, MispSrv, StreamSrv, StreamStatSrv, TemplateSrv, MetricsCacheSrv, AlertSrv, AppLayoutSrv, appConfig) {
         'use strict';
 
+        $rootScope.layoutSrv = AppLayoutSrv;
         $scope.appConfig = appConfig;
         $scope.querystring = '';
         $scope.view = {

diff --git a/ui/app/scripts/controllers/case/CaseListCtrl.js b/ui/app/scripts/controllers/case/CaseListCtrl.js
@@ -6,7 +6,6 @@
     function CaseListCtrl($scope, $q, $state, $window, CasesUISrv, StreamStatSrv, PSearchSrv, EntitySrv, UserInfoSrv, TagSrv, UserSrv, AuthenticationSrv, CaseResolutionStatus, Severity, Tlp) {
         var self = this;
 
-        this.showFlow = true;
         this.openEntity = EntitySrv.open;
         this.getUserInfo = UserInfoSrv;
         this.CaseResolutionStatus = CaseResolutionStatus;
@@ -215,10 +214,5 @@
             this.uiSrv.setSort(sort);
         };
 
-        this.live = function() {
-            $window.open($state.href('live'), 'TheHiveLive',
-                'width=500,height=700,menubar=no,status=no,toolbar=no,location=no,scrollbars=yes');
-        };
-
     }
 })();
diff --git a/ui/app/scripts/services/AppLayoutSrv.js b/ui/app/scripts/services/AppLayoutSrv.js
@@ -0,0 +1,36 @@
+(function() {
+    'use strict';
+    angular.module('theHiveServices')
+        .service('AppLayoutSrv', function($state, $window, $rootScope, localStorageService) {
+            var key = 'app-layout';
+
+            this.layout = {};
+
+            this.init = function() {
+                this.layout = localStorageService.get(key) || {
+                    showFlow: true
+                };
+
+                this.saveLayout();
+            };
+
+            this.saveLayout = function() {
+                localStorageService.set(key, this.layout);
+                $rootScope.appLayout = this.layout;
+            };
+
+            this.getLayout = function() {
+                return this.layout;
+            };
+
+            this.showFlow = function(show) {
+                this.layout.showFlow = show;
+                this.saveLayout();
+            };
+
+            this.detachFlow = function(/*root*/) {
+                this.showFlow(false);
+                $window.open($state.href('live'), 'TheHiveLive', 'width=500,height=700,menubar=no,status=no,toolbar=no,location=no,scrollbars=yes');
+            };
+        });
+})();
diff --git a/ui/app/views/app.case.html b/ui/app/views/app.case.html
@@ -1,9 +1,8 @@
 <div class="row">
-    <div class="col-md-12" ng-include="'views/partials/case/case.panelinfo.html'"></div>
-</div>
-
-<div class="row">
-    <div class="col-md-9">
+    <div ng-Class="{ 'col-md-9': appLayout.showFlow, 'col-md-12': !appLayout.showFlow}">
+        <div class="row">
+            <div class="col-md-12" ng-include="'views/partials/case/case.panelinfo.html'"></div>
+        </div>
         <uib-tabset type="tabs" active="tabSrv.activeIndex" class="nav-tabs-custom">
             <uib-tab ng-click="openTab(name)" ng-init="tab = tabs[name];" ng-repeat="name in notSorted(tabs)">
                 <uib-tab-heading ng-switch on="name">
@@ -45,7 +44,27 @@
         </uib-tabset>
     </div>
 
-    <div class="col-md-3">
-        <flow ng-if="caze.id" root="{{caze.id}}"></flow>
+    <div ng-show="appLayout.showFlow" class="col-md-3">
+        <div class="box">
+            <div class="box-header">
+                <h3 class="box-title">&nbsp;</h3>
+                <div class="box-tools pull-right">
+                    <span class="ml-xs" tooltip="Open in new window">
+                        <a class="text-muted" href ng-click="layoutSrv.detachFlow()">
+                            <i class="fa fa-external-link"></i> Open in new window
+                        </a>
+                    </span>
+
+                    <span class="ml-xs" tooltip="Hide">
+                        <a class="text-muted" href ng-click="layoutSrv.showFlow(false)">
+                            <i class="fa fa-minus"></i> Hide
+                        </a>
+                    </span>
+                </div>
+            </div>
+            <div class="box-body no-padding">
+                <flow ng-if="caze.id" root="{{caze.id}}"></flow>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/ui/app/views/app.main.html b/ui/app/views/app.main.html
@@ -1,27 +1,30 @@
 <div class="row">
-    <div ng-Class="{ 'col-md-9': showFlow, 'col-md-12': !showFlow}">
+    <div ng-Class="{ 'col-md-9': appLayout.showFlow, 'col-md-12': !appLayout.showFlow}">
         <div class="box">
             <div class="box-header with-border">
                 <h3 class="box-title" ng-if="view.data == 'mytasks'">My tasks ({{list.total}})</h3>
                 <h3 class="box-title" ng-if="view.data == 'waitingtasks'">Waiting tasks ({{list.total}})</h3>
 
-                <div class="box-tools pull-right">
+                <div class="box-tools pull-right" ng-show="!appLayout.showFlow">
+                    <span class="ml-xs" tooltip="Open in new window">
+                        <a class="text-muted" href ng-click="layoutSrv.showFlow(true)">
+                            <i class="fa fa-plus"></i> Show live stream
+                        </a>
+                    </span>
+                </div>
+            </div>
+            <div class="box-body">
 
-                    <div class="form-inline">
+                <div class="clearfix">
+                    <div class="form-inline pull-right">
                         <div class="input-group">
                             <filter-box collection="list"></filter-box>
                         </div>
                         <div class="form-group">
                             <page-sizer collection="list"></page-sizer>
                         </div>
-                        <button type="button" class="btn btn-box-tool" tooltip="Hide" ng-click="showFlow = true" ng-show="!showFlow;">
-                            <i class="fa fa-plus"></i> Show live stream
-                        </button>
                     </div>
-
                 </div>
-            </div>
-            <div class="box-body">
 
                 <div ng-switch="view.data">
                     <div class="main-fadein" ng-switch-when="waitingtasks">
@@ -37,18 +40,22 @@ <h3 class="box-title" ng-if="view.data == 'waitingtasks'">Waiting tasks ({{list.
         </div>
     </div>
 
-    <div ng-show="showFlow" class="col-md-3">
+    <div ng-show="appLayout.showFlow" class="col-md-3">
         <div class=" box">
             <div class="box-header">
                 <h3 class="box-title">&nbsp;</h3>
                 <div class="box-tools pull-right">
-                    <button type="button" class="btn btn-box-tool" tooltip="Open in new window" ng-click="showFlow = false">
-                        <i class="fa fa-external-link"></i> Open in new window
-                    </button>
+                    <span class="ml-xs" tooltip="Open in new window">
+                        <a class="text-muted" href ng-click="layoutSrv.detachFlow()">
+                            <i class="fa fa-external-link"></i> Open in new window
+                        </a>
+                    </span>
 
-                    <button type="button" class="btn btn-box-tool" tooltip="Hide" ng-click="showFlow = false">
-                        <i class="fa fa-minus"></i> Hide
-                    </button>
+                    <span class="ml-xs" tooltip="Hide">
+                        <a class="text-muted" href ng-click="layoutSrv.showFlow(false)">
+                            <i class="fa fa-minus"></i> Hide
+                        </a>
+                    </span>
                 </div>
             </div>
             <div class="box-body no-padding">

diff --git a/ui/app/views/partials/case/case.list.html b/ui/app/views/partials/case/case.list.html
@@ -1,12 +1,14 @@
 <div class="row">
-    <div ng-Class="{ 'col-md-9': $vm.showFlow, 'col-md-12': !$vm.showFlow}">
+    <div ng-Class="{ 'col-md-9': appLayout.showFlow, 'col-md-12': !appLayout.showFlow}">
         <div class="box">
             <div class="box-header with-border">
                 <h3 class="box-title">List of cases ({{$vm.list.total || 0}} of {{$vm.caseStats.count}})</h3>
-                <div class="box-tools pull-right" ng-show="!$vm.showFlow;">
-                    <button type="button" class="btn btn-box-tool" tooltip="Hide" ng-click="$vm.showFlow = true">
-                        <i class="fa fa-plus"></i> Show live stream
-                    </button>
+                <div class="box-tools pull-right" ng-show="!appLayout.showFlow">
+                    <span class="ml-xs" tooltip="Open in new window">
+                        <a class="text-muted" href ng-click="layoutSrv.showFlow(true)">
+                            <i class="fa fa-plus"></i> Show live stream
+                        </a>
+                    </span>
                 </div>
             </div>
             <div class="box-body">
@@ -121,18 +123,22 @@ <h3 class="box-title">List of cases ({{$vm.list.total || 0}} of {{$vm.caseStats.
 
 
 
-    <div ng-show="$vm.showFlow" class="col-md-3">
+    <div ng-show="appLayout.showFlow" class="col-md-3">
         <div class=" box">
             <div class="box-header">
                 <h3 class="box-title">&nbsp;</h3>
                 <div class="box-tools pull-right">
-                    <button type="button" class="btn btn-box-tool" tooltip="Open in new window" ng-click="$vm.live(); $vm.showFlow = false">
-                        <i class="fa fa-external-link"></i> Open in new window
-                    </button>
-
-                    <button type="button" class="btn btn-box-tool" tooltip="Hide" ng-click="$vm.showFlow = false">
-                        <i class="fa fa-minus"></i> Hide
-                    </button>
+                    <span class="ml-xs" tooltip="Open in new window">
+                        <a class="text-muted" href ng-click="layoutSrv.detachFlow()">
+                            <i class="fa fa-external-link"></i> Open in new window
+                        </a>
+                    </span>
+
+                    <span class="ml-xs" tooltip="Hide">
+                        <a class="text-muted" href ng-click="layoutSrv.showFlow(false)">
+                            <i class="fa fa-minus"></i> Hide
+                        </a>
+                    </span>
                 </div>
             </div>
             <div class="box-body no-padding">

diff --git a/ui/app/views/partials/case/case.observables.html b/ui/app/views/partials/case/case.observables.html
@@ -2,7 +2,7 @@
     <div class="col-md-12">
         <div class="btn-toolbar" role="toolbar">
             <div class="btn-group" uib-dropdown is-open="status.isopen">
-                <button class="btn btn-default dropdown-toggle" uib-dropdown-toggle ng-disabled="selection.artifacts.length == 0" type="button">
+                <button class="btn btn-sm btn-default dropdown-toggle" uib-dropdown-toggle ng-disabled="selection.artifacts.length == 0" type="button">
                     {{uiSrv.actions[selection.Action]}}
                     <span class="caret"></span>
                 </button>
@@ -36,7 +36,7 @@
             </div>
 
             <div class="btn-group">
-                <button class="btn btn-primary" ng-click="addArtifact()">
+                <button class="btn btn-sm btn-primary" ng-click="addArtifact()">
                     <i class="glyphicon glyphicon-plus"></i>
                     Add observable(s)
                 </button>
@@ -54,13 +54,13 @@ <h5 ng-if="selection.artifacts.length > 0 ">
             </div>
 
             <div class="btn-group pull-right" role="group">
-                <button class="btn" ng-class="{true: 'btn-primary', false:'btn-default'}[uiSrv.context.showFilters]" type="button" ng-click="toggleFilters()">
+                <button class="btn btn-sm" ng-class="{true: 'btn-primary', false:'btn-default'}[uiSrv.context.showFilters]" type="button" ng-click="toggleFilters()">
                     <i class="fa fa-search"></i> Filters
                 </button>
             </div>
 
             <div class="btn-group pull-right" role="group">
-                <button class="btn" ng-class="{true: 'btn-primary', false:'btn-default'}[uiSrv.context.showStats]" type="button" ng-click="toggleStats()">
+                <button class="btn btn-sm" ng-class="{true: 'btn-primary', false:'btn-default'}[uiSrv.context.showStats]" type="button" ng-click="toggleStats()">
                     <i class="fa fa-bar-chart"></i> Stats
                 </button>
             </div>

diff --git a/ui/app/views/partials/case/case.panelinfo.html b/ui/app/views/partials/case/case.panelinfo.html
@@ -7,32 +7,13 @@ <h3 class="box-title">
                 -
                 {{caze.title}}</span>
         </h3>
-        <div class="box-tools pull-right">
-            <span class="pull-right">
-                <span class="ml-xs">
-                    <a href ng-click="mergeCase()" class="noline" uib-tooltip="Merge case">
-                        <i class="text-primary fa fa-2x fa-compress"></i>
-                    </a>
-                </span>
-            <span class="ml-xs">
-                    <a href ng-click="switchFlag()" class="noline" uib-tooltip="{{caze.flag ? 'Unflag case' :  'Flag case'}}">
-                        <i class="text-yellow fa fa-2x fa-flag" ng-show="caze.flag"></i>
-                        <i class="text-muted fa fa-2x fa-flag" ng-class="setFlag" ng-mouseout="setFlag='text-muted'" ng-mouseover="setFlag='text-yellow'" ng-show="!caze.flag || caze.flag == undefined"></i>
-                    </a>
-                </span>
-            <span class="ml-xs" ng-hide="isCaseClosed()">
-                    <a href ng-click="openCloseDialog()" class="noline" uib-tooltip="Close case">
-                        <i class="text-muted fa fa-2x fa-check-circle-o" ng-class="CloseCase" ng-mouseout="CloseCase='text-muted glyphicon-ok-circle'" ng-mouseover="CloseCase='text-success glyphicon-ok-sign'"></i>
-                    </a>
-                </span>
-            <span class="ml-xs" ng-show="isCaseClosed()">
-                    <a href ng-click="reopenCase()" class="noline" uib-tooltip="Reopen case">
-                        <i class="text-success fa fa-2x fa-check-circle"></i>
-                    </a>
-                </spnn>
+        <div class="box-tools pull-right" ng-show="!appLayout.showFlow">
+            <span class="ml-xs" tooltip="Open in new window">
+                <a class="text-muted" href ng-click="layoutSrv.showFlow(true)">
+                    <i class="fa fa-plus"></i> Show live stream
+                </a>
             </span>
         </div>
-
     </div>
 
     <div class="box-body">
@@ -54,6 +35,40 @@ <h3 class="box-title">
                 <ng-pluralize count="links.length" when="{'one': '1 Related case', 'other': '{} Related cases'}"></ng-pluralize>
             </strong>
         </span>
+
+        <!-- Right side -->
+        <span class="ml-xs pull-right">
+            <a href ng-click="mergeCase()" class="text-primary noline" uib-tooltip="Merge case">
+                <i class="text-primary fa fa-compress"></i>
+                Merge
+            </a>
+        </span>
+
+        <span class="ml-xs pull-right" ng-if="!caze.flag || caze.flag == undefined">
+            <a href ng-click="switchFlag()" class="text-muted noline" uib-tooltip="Flag case">
+                <i class="text-muted fa fa-flag" ng-class="setFlag" ng-mouseout="setFlag='text-muted'" ng-mouseover="setFlag='text-yellow'"></i>
+                Flag
+            </a>
+        </span>
+        <span class="ml-xs pull-right" ng-if="caze.flag">
+            <a href ng-click="switchFlag()" class="text-yellow noline" uib-tooltip="Unflag case">
+                <i class="text-yellow fa fa-flag" ng-show="caze.flag"></i>
+                Unflag
+            </a>
+        </span>
+        <span class="ml-xs pull-right" ng-hide="isCaseClosed()">
+            <a href ng-click="openCloseDialog()" class="text-muted noline" uib-tooltip="Close case">
+                <i class="text-muted fa fa-check-circle-o" ng-class="CloseCase" ng-mouseout="CloseCase='text-muted glyphicon-ok-circle'" ng-mouseover="CloseCase='text-success glyphicon-ok-sign'"></i>
+                Close
+            </a>
+        </span>
+        <span class="ml-xs pull-right" ng-show="isCaseClosed()">
+            <a href ng-click="reopenCase()" class="text-success noline" uib-tooltip="Reopen case">
+                <i class="text-success fa fa-check-circle"></i>
+                Reopen
+            </a>
+        </spnn>
+
     </div>
 </div>
 

diff --git a/ui/app/views/partials/observables/list/artifacts-list-filter.html b/ui/app/views/partials/observables/list/artifacts-list-filter.html
@@ -2,10 +2,10 @@
     <div class="input-group input-group-sm">
         <input type="text" class="form-control" ng-model="searchForm.searchQuery" placeholder="Filter" autofocus="autofocus">
         <span class="input-group-btn">
-            <button class="btn  btn-default" type="button" ng-click="clearSearch()">
+            <button class="btn btn-sm btn-default" type="button" ng-click="clearSearch()">
                 <i class="text-danger glyphicon glyphicon-remove"></i>
             </button>
-            <button class="btn  btn-default" type="button" ng-click="search()">
+            <button class="btn btn-sm btn-default" type="button" ng-click="search()">
                 <i class="text-default glyphicon glyphicon-search"></i>
             </button>
         </span>

diff --git a/ui/app/views/partials/observables/list/filters.html b/ui/app/views/partials/observables/list/filters.html
@@ -79,7 +79,7 @@ <h4>Filters</h4>
             </div>
 
             <div class="pull-right">
-                <button class="btn btn-primary" type="submit">Apply filters</button>
+                <button class="btn btn-sm btn-primary" type="submit">Apply filters</button>
             </div>
         </form>
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,7 @@ <h4>Filters</h4> @@
                 </div>
                 <div class="pull-right">
-                    <button class="btn btn-primary" type="submit">Apply filters</button>
+                    <button class="btn btn-sm btn-primary" type="submit">Apply filters</button>
                 </div>
             </form>
@@ Expand Down @@