feat(swarm-visualizer): save settings to local storage (#1777)

app/docker/views/swarm/visualizer/swarmVisualizerController.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker')
-.controller('SwarmVisualizerController', ['$q', '$scope', '$document', '$interval', 'NodeService', 'ServiceService', 'TaskService', 'Notifications',
+.controller('SwarmVisualizerController', ['$q', '$scope', '$document', '$interval', 'NodeService', 'ServiceService', 'TaskService', 'Notifications', 'LocalStorage',
-function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskService, Notifications) {
+function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskService, Notifications, LocalStorage) {
 
   $scope.state = {
     ShowInformationPanel: true,
@@ -12,11 +12,22 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
     stopRepeater();
   });
 
+  $scope.changeShowInformationPanel = function(value) {
+      $scope.state.ShowInformationPanel = value;
+      LocalStorage.storeSwarmVisualizerSettings('show_info_panel', value);
+  };
+
+  $scope.changeDisplayOnlyRunningTasks = function() {
+      var value = $scope.state.DisplayOnlyRunningTasks;
+      LocalStorage.storeSwarmVisualizerSettings('display_only_running_tasks', value);
+  };
+
   $scope.changeUpdateRepeater = function() {
     stopRepeater();
     setUpdateRepeater();
     $('#refreshRateChange').show();
     $('#refreshRateChange').fadeOut(1500);
+    LocalStorage.storeSwarmVisualizerSettings('refresh_rate', $scope.state.refreshRate);
   };
 
   function stopRepeater() {
@@ -51,7 +62,6 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
     }, refreshRate * 1000);
   }
 
-
   function assignServiceInfo(services, tasks) {
     for (var i = 0; i < services.length; i++) {
       var service = services[i];
@@ -91,6 +101,20 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
     $scope.visualizerData = visualizerData;
   }
 
+  function loadState() {
+    var showInfoPanel = LocalStorage.getSwarmVisualizerSettings('show_info_panel');
+    if (showInfoPanel !== undefined && showInfoPanel !== null)
+        $scope.state.ShowInformationPanel = showInfoPanel;
+
+    var displayOnlyRunningTasks = LocalStorage.getSwarmVisualizerSettings('display_only_running_tasks');
+    if (displayOnlyRunningTasks !== undefined && displayOnlyRunningTasks !== null)
+        $scope.state.DisplayOnlyRunningTasks = displayOnlyRunningTasks;
+
+    var refreshRate = LocalStorage.getSwarmVisualizerSettings('refresh_rate');
+    if (refreshRate !== undefined && refreshRate !== null)
+        $scope.state.refreshRate = refreshRate;
+  }
+
   function initView() {
     $q.all({
       nodes: NodeService.nodes(),
@@ -110,6 +134,8 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
     .catch(function error(err) {
       Notifications.error('Failure', err, 'Unable to initialize cluster visualizer');
     });
+
+    loadState();
   }
 
   initView();

app/docker/views/swarm/visualizer/swarmvisualizer.html

@@ -14,8 +14,8 @@
     <rd-widget>
       <rd-widget-header icon="fa-object-group" title="Cluster information">
         <div class="pull-right">
-          <button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = true;" ng-if="!state.ShowInformationPanel">Show</button>
+          <button type="button" class="btn btn-sm btn-primary" ng-click="changeShowInformationPanel(true)" ng-if="!state.ShowInformationPanel">Show</button>
-          <button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = false;" ng-if="state.ShowInformationPanel">Hide</button>
+          <button type="button" class="btn btn-sm btn-primary" ng-click="changeShowInformationPanel(false)" ng-if="state.ShowInformationPanel">Hide</button>
         </div>
       </rd-widget-header>
       <rd-widget-body ng-if="state.ShowInformationPanel">
@@ -45,7 +45,7 @@
                 Only display running tasks
               </label>
               <label class="switch" style="margin-left: 20px;">
-                <input type="checkbox" ng-model="state.DisplayOnlyRunningTasks"><i></i>
+                <input type="checkbox" ng-model="state.DisplayOnlyRunningTasks" ng-change="changeDisplayOnlyRunningTasks()"><i></i>
               </label>
             </div>
           </div>

app/portainer/services/localStorage.js

@@ -59,6 +59,12 @@ angular.module('portainer.app')
     storeDataTableSettings: function(key, data) {
       localStorageService.set('datatable_settings_' + key, data);
     },
+    storeSwarmVisualizerSettings: function(key, data) {
+      localStorageService.set('swarmvisualizer_' + key, data);
+    },
+    getSwarmVisualizerSettings: function(key) {
+      return localStorageService.get('swarmvisualizer_' + key);
+    },
     clean: function() {
       localStorageService.clearAll();
     }