Merge pull request #5011 from w33ble/persist-dark-theme

Persist dark theme in appState

src/plugins/kibana/public/dashboard/index.js

@@ -81,11 +81,16 @@ define(function (require) {
         var stateDefaults = {
           title: dash.title,
           panels: dash.panelsJSON ? JSON.parse(dash.panelsJSON) : [],
+          options: dash.optionsJSON ? JSON.parse(dash.optionsJSON) : {},
           query: extractQueryFromFilters(dash.searchSource.getOwn('filter')) || {query_string: {query: '*'}},
-          filters: _.reject(dash.searchSource.getOwn('filter'), matchQueryFilter)
+          filters: _.reject(dash.searchSource.getOwn('filter'), matchQueryFilter),
         };
 
         var $state = $scope.state = new AppState(stateDefaults);
+        $scope.$watchCollection('state.options', function (newVal, oldVal) {
+          if (!angular.equals(newVal, oldVal)) $state.save();
+        });
+        $scope.$watch('state.options.darkTheme', setDarkTheme);
 
         $scope.configTemplate = new ConfigTemplate({
           save: require('plugins/kibana/dashboard/partials/save_dashboard.html'),
@@ -103,11 +108,6 @@ define(function (require) {
 
         courier.setRootSearchSource(dash.searchSource);
 
-        setDarkTheme(dash.darkTheme);
-        $scope.$watch('dash.darkTheme', function (value) {
-          setDarkTheme(value);
-        });
-
         function init() {
           updateQueryOnRootSource();
 
@@ -131,7 +131,7 @@ define(function (require) {
         }
 
         function setDarkTheme(enabled) {
-          var theme = !!enabled ? 'theme-dark' : 'theme-light';
+          var theme = Boolean(enabled) ? 'theme-dark' : 'theme-light';
           chrome.removeApplicationClass(['theme-dark', 'theme-light']);
           chrome.addApplicationClass(theme);
         }
@@ -161,6 +161,7 @@ define(function (require) {
           dash.panelsJSON = angular.toJson($state.panels);
           dash.timeFrom = dash.timeRestore ? timefilter.time.from : undefined;
           dash.timeTo = dash.timeRestore ? timefilter.time.to : undefined;
+          dash.optionsJSON = angular.toJson($state.options);
 
           dash.save()
           .then(function (id) {
@@ -204,6 +205,7 @@ define(function (require) {
         // Setup configurable values for config directive, after objects are initialized
         $scope.opts = {
           dashboard: dash,
+          ui: $state.options,
           save: $scope.save,
           addVis: $scope.addVis,
           addSearch: $scope.addSearch,

src/plugins/kibana/public/dashboard/partials/options.html

@@ -2,7 +2,7 @@
   <p>
     <div class="input-group">
       <label>
-        <input type="checkbox" ng-model="opts.dashboard.darkTheme" ng-checked="opts.dashboard.darkTheme">
+        <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
         Use dark theme
       </label>
     </div>

src/plugins/kibana/public/dashboard/services/_saved_dashboard.js

@@ -1,5 +1,6 @@
 define(function (require) {
   var module = require('ui/modules').get('app/dashboard');
+  var angular = require('angular');
   var _ = require('lodash');
   var moment = require('moment');
 
@@ -24,11 +25,13 @@ define(function (require) {
           hits: 0,
           description: '',
           panelsJSON: '[]',
+          optionsJSON: angular.toJson({
+            darkTheme: config.get('dashboard:defaultDarkTheme')
+          }),
           version: 1,
           timeRestore: false,
           timeTo: undefined,
           timeFrom: undefined,
-          darkTheme: config.get('dashboard:defaultDarkTheme')
         },
 
         // if an indexPattern was saved with the searchsource of a SavedDashboard
@@ -46,11 +49,11 @@ define(function (require) {
       hits: 'integer',
       description: 'string',
       panelsJSON: 'string',
+      optionsJSON: 'string',
       version: 'integer',
       timeRestore: 'boolean',
       timeTo: 'string',
       timeFrom: 'string',
-      darkTheme: 'boolean'
     };
 
     SavedDashboard.searchsource = true;