Dashboard: Load a default rather than starting new - Closing #5820

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

@@ -1,8 +1,8 @@
 define(function (require) {
   const _ = require('lodash');
-  const $ = require('jquery');
   const angular = require('angular');
   const ConfigTemplate = require('ui/ConfigTemplate');
+  const dashboardTemplate = require('plugins/kibana/dashboard/index.html');
   const chrome = require('ui/chrome');
 
   require('ui/directives/config');
@@ -19,7 +19,6 @@ define(function (require) {
 
   require('ui/saved_objects/saved_object_registry').register(require('plugins/kibana/dashboard/services/saved_dashboard_register'));
 
-
   const app = require('ui/modules').get('app/dashboard', [
     'elasticsearch',
     'ngRoute',
@@ -31,17 +30,56 @@ define(function (require) {
 
   require('ui/routes')
   .when('/dashboard', {
-    template: require('plugins/kibana/dashboard/index.html'),
+    template: function ($location) {
+      if ($location.new === true) {
+        return dashboardTemplate;
+      }
+
+      return false;
+    },
     resolve: {
-      dash: function (savedDashboards, config) {
-        return savedDashboards.get();
+      dash: function (savedDashboards, config, kbnUrl, Notifier, $location, $route) {
+        let defaultDashboard = config.get('dashboard:defaultDashboard', '');
+
+        let notify = new Notifier({
+          location: 'Dashboard'
+        });
+
+        if ($location.search().new === true) {
+          return savedDashboards.get();
+        }
+
+        function forceNew() {
+          $location.search('new', true);
+          $route.reload();
+        }
+
+        if (defaultDashboard !== '') {
+          return savedDashboards.get(defaultDashboard)
+            .then(function (result) {
+              let dashboardUrl = savedDashboards.urlFor(result.id).substring(1);
+              kbnUrl.change(dashboardUrl);
+            })
+            .catch(function (error) {
+              notify.error(error);
+
+              forceNew();
+            });
+        }
+
+        forceNew();
       }
     }
   })
   .when('/dashboard/:id', {
-    template: require('plugins/kibana/dashboard/index.html'),
+    template: dashboardTemplate,
     resolve: {
-      dash: function (savedDashboards, Notifier, $route, $location, courier) {
+      dash: function (savedDashboards, Notifier, $route, $location, courier, kbnUrl) {
+        if ($location.search().new === true) {
+          kbnUrl.change('/dashboard');
+          $location.search('new', true);
+        }
+
         return savedDashboards.get($route.current.params.id)
         .catch(courier.redirectWhenMissing({
           'dashboard' : '/dashboard'
@@ -52,9 +90,10 @@ define(function (require) {
 
   app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter, kbnUrl) {
     return {
-      controller: function ($scope, $rootScope, $route, $routeParams, $location, Private, getAppState) {
+      controller: function ($scope, $rootScope, $route, $routeParams, $location, Private, getAppState, config) {
 
         const queryFilter = Private(require('ui/filter_bar/query_filter'));
+        const configDefaults = Private(require('ui/config/defaults'));
 
         const notify = new Notifier({
           location: 'Dashboard'
@@ -69,6 +108,8 @@ define(function (require) {
 
         $scope.$on('$destroy', dash.destroy);
 
+        const configDefaultDashboard = config.get('dashboard:defaultDashboard', '');
+
         const matchQueryFilter = function (filter) {
           return filter.query && filter.query.query_string && !filter.meta;
         };
@@ -94,6 +135,7 @@ define(function (require) {
           if (!angular.equals(newVal, oldVal)) $state.save();
         });
         $scope.$watch('state.options.darkTheme', setDarkTheme);
+        $scope.$watch('opts.isDefaultDashboard', toggleDefaultDashboard);
 
         $scope.configTemplate = new ConfigTemplate({
           save: require('plugins/kibana/dashboard/partials/save_dashboard.html'),
@@ -160,6 +202,28 @@ define(function (require) {
           chrome.addApplicationClass(theme);
         }
 
+        // Returns whether this dashboard is now default
+        function toggleDefaultDashboard(isChecked) {
+          if (isChecked) {
+            setDefaultDashboard(dash.id);
+            return true;
+          }
+
+          if (dash.id === configDefaultDashboard) {
+            /* If the default option is turned off and the previous default
+             dashboard was this dashboard set no default dashboard */
+            setDefaultDashboard(configDefaults['dashboard:defaultDashboard'].value);
+            return false;
+          }
+
+          setDefaultDashboard(configDefaultDashboard);
+          return false;
+        }
+
+        function setDefaultDashboard(id) {
+          config.set('dashboard:defaultDashboard', id);
+        }
+
         // update root source when filters update
         $scope.$listen(queryFilter, 'update', function () {
           updateQueryOnRootSource();
@@ -170,7 +234,8 @@ define(function (require) {
         $scope.$listen(queryFilter, 'fetch', $scope.refresh);
 
         $scope.newDashboard = function () {
-          kbnUrl.change('/dashboard', {});
+          $location.search('new', true);
+          $route.reload();
         };
 
         $scope.filterResults = function () {
@@ -231,6 +296,8 @@ define(function (require) {
         // Setup configurable values for config directive, after objects are initialized
         $scope.opts = {
           dashboard: dash,
+          isDefaultDashboard: configDefaultDashboard === dash.id,
+          isNewDashboard: $location.search().new === true,
           ui: $state.options,
           save: $scope.save,
           addVis: $scope.addVis,

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

@@ -1,10 +1,23 @@
 <form role="form" class="options">
-  <p>
-    <div class="input-group">
+  <ul class="input-list">
+    <li>
       <label>
-        <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
-        Use dark theme
+        <input class="hidden" type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
+        <i class="fa fa-fw"
+           ng-class="{ 'fa-square': !opts.ui.darkTheme,
+                       'fa-check-square': opts.ui.darkTheme }"></i>
+        <span>Use dark theme for this dashboard</span>
       </label>
-    </div>
-  </p>
+    </li>
+    <li>
+      <label ng-class="{ 'text-muted': opts.isNewDashboard }">
+        <input class="hidden" type="checkbox" ng-model="opts.isDefaultDashboard" ng-checked="opts.isDefaultDashboard" ng-disabled="opts.isNewDashboard">
+        <i class="fa fa-fw"
+           ng-class="{ 'fa-square': !opts.isDefaultDashboard,
+                       'fa-check-square': opts.isDefaultDashboard }"></i>
+        <span>Set this dashboard as default dashboard to load<br>
+        <small ng-if="opts.isNewDashboard" class="text-danger">You have to save the dashboard first to be able to set it as default.</small></span>
+      </label>
+    </li>
+  </ul>
 </form>

src/plugins/kibana/public/dashboard/styles/main.less

@@ -126,3 +126,21 @@ dashboard-grid {
 .dashboard-load {
   margin: 10px;
 }
+
+.dashboard-container {
+  config {
+    .options {
+      padding: 10px 0;
+
+      ul.input-list {
+        list-style-type: none;
+        margin-bottom: 0;
+
+        label span {
+          display: inline-block;
+          vertical-align: top;
+        }
+      }
+    }
+  }
+}

src/ui/public/config/defaults.js

@@ -206,6 +206,10 @@ define(function (require) {
       'dashboard:defaultDarkTheme': {
         value: false,
         description: 'New dashboards use dark theme by default',
+      },
+      'dashboard:defaultDashboard': {
+        value: '',
+        description: 'The default dashboard to load. ID can be found in the URL when the dashboard is loaded.'
       }
     };
   };