View/edit modes for dashboard

src/core_plugins/kibana/public/dashboard/__tests__/dashboard_panels.js

@@ -14,7 +14,8 @@ describe('dashboard panels', function () {
       $route.current = {
         locals: {
           dash: dashboard
-        }
+        },
+        params: {}
       };
 
       $el = angular.element(`

src/core_plugins/kibana/public/dashboard/__tests__/dashboard_state.js

@@ -5,13 +5,14 @@ import { DashboardState } from '../dashboard_state';
 
 describe('DashboardState', function () {
   let AppState;
+  let dashboardState;
   let savedDashboard;
   let SavedDashboard;
   let timefilter;
   let quickTimeRanges;
 
   function initDashboardState() {
-    new DashboardState(savedDashboard, timefilter, true, quickTimeRanges, AppState);
+    dashboardState = new DashboardState(savedDashboard, AppState);
   }
 
   beforeEach(ngMock.module('kibana'));
@@ -23,72 +24,56 @@ describe('DashboardState', function () {
     savedDashboard = new SavedDashboard();
   }));
 
-  describe('timefilter', function () {
-
-    describe('when timeRestore is true', function () {
-      it('syncs quick time', function () {
-        savedDashboard.timeRestore = true;
-        savedDashboard.timeFrom = 'now/w';
-        savedDashboard.timeTo = 'now/w';
-
-        timefilter.time.from = '2015-09-19 06:31:44.000';
-        timefilter.time.to = '2015-09-29 06:31:44.000';
-        timefilter.time.mode = 'absolute';
-
-        initDashboardState();
-
-        expect(timefilter.time.mode).to.equal('quick');
-        expect(timefilter.time.to).to.equal('now/w');
-        expect(timefilter.time.from).to.equal('now/w');
-      });
-
-      it('syncs relative time', function () {
-        savedDashboard.timeRestore = true;
-        savedDashboard.timeFrom = 'now-13d';
-        savedDashboard.timeTo = 'now';
+  describe('syncTimefilterWithDashboard', function () {
+    it('syncs quick time', function () {
+      savedDashboard.timeRestore = true;
+      savedDashboard.timeFrom = 'now/w';
+      savedDashboard.timeTo = 'now/w';
 
-        timefilter.time.from = '2015-09-19 06:31:44.000';
-        timefilter.time.to = '2015-09-29 06:31:44.000';
-        timefilter.time.mode = 'absolute';
+      timefilter.time.from = '2015-09-19 06:31:44.000';
+      timefilter.time.to = '2015-09-29 06:31:44.000';
+      timefilter.time.mode = 'absolute';
 
-        initDashboardState();
+      initDashboardState();
+      dashboardState.syncTimefilterWithDashboard(timefilter, quickTimeRanges);
 
-        expect(timefilter.time.mode).to.equal('relative');
-        expect(timefilter.time.to).to.equal('now');
-        expect(timefilter.time.from).to.equal('now-13d');
-      });
+      expect(timefilter.time.mode).to.equal('quick');
+      expect(timefilter.time.to).to.equal('now/w');
+      expect(timefilter.time.from).to.equal('now/w');
+    });
 
-      it('syncs absolute time', function () {
-        savedDashboard.timeRestore = true;
-        savedDashboard.timeFrom = '2015-09-19 06:31:44.000';
-        savedDashboard.timeTo = '2015-09-29 06:31:44.000';
+    it('syncs relative time', function () {
+      savedDashboard.timeRestore = true;
+      savedDashboard.timeFrom = 'now-13d';
+      savedDashboard.timeTo = 'now';
 
-        timefilter.time.from = 'now/w';
-        timefilter.time.to = 'now/w';
-        timefilter.time.mode = 'quick';
+      timefilter.time.from = '2015-09-19 06:31:44.000';
+      timefilter.time.to = '2015-09-29 06:31:44.000';
+      timefilter.time.mode = 'absolute';
 
-        initDashboardState();
+      initDashboardState();
+      dashboardState.syncTimefilterWithDashboard(timefilter, quickTimeRanges);
 
-        expect(timefilter.time.mode).to.equal('absolute');
-        expect(timefilter.time.to).to.equal(savedDashboard.timeTo);
-        expect(timefilter.time.from).to.equal(savedDashboard.timeFrom);
-      });
+      expect(timefilter.time.mode).to.equal('relative');
+      expect(timefilter.time.to).to.equal('now');
+      expect(timefilter.time.from).to.equal('now-13d');
     });
 
-    it('is not synced when timeRestore is false', function () {
-      savedDashboard.timeRestore = false;
-      savedDashboard.timeFrom = 'now/w';
-      savedDashboard.timeTo = 'now/w';
+    it('syncs absolute time', function () {
+      savedDashboard.timeRestore = true;
+      savedDashboard.timeFrom = '2015-09-19 06:31:44.000';
+      savedDashboard.timeTo = '2015-09-29 06:31:44.000';
 
-      timefilter.time.timeFrom = '2015-09-19 06:31:44.000';
-      timefilter.time.timeTo = '2015-09-29 06:31:44.000';
-      timefilter.time.mode = 'absolute';
+      timefilter.time.from = 'now/w';
+      timefilter.time.to = 'now/w';
+      timefilter.time.mode = 'quick';
 
       initDashboardState();
+      dashboardState.syncTimefilterWithDashboard(timefilter, quickTimeRanges);
 
       expect(timefilter.time.mode).to.equal('absolute');
-      expect(timefilter.time.timeFrom).to.equal('2015-09-19 06:31:44.000');
-      expect(timefilter.time.timeTo).to.equal('2015-09-29 06:31:44.000');
+      expect(timefilter.time.to).to.equal(savedDashboard.timeTo);
+      expect(timefilter.time.from).to.equal(savedDashboard.timeFrom);
     });
   });
 });

src/core_plugins/kibana/public/dashboard/dashboard.html

@@ -33,6 +33,7 @@
               ng-model="model.query"
               placeholder="Filter..."
               aria-label="Filter input"
+              data-test-subj="dashboardQuery"
               type="text"
               class="kuiLocalSearchInput"
               ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
@@ -41,6 +42,7 @@
               type="submit"
               aria-label="Filter Dashboards"
               class="kuiLocalSearchButton"
+              data-test-subj="dashboardQueryFilterButton"
               ng-disabled="queryInput.$invalid"
             >
               <span class="fa fa-search" aria-hidden="true"></span>
@@ -55,14 +57,20 @@
   <!-- Filters. -->
   <filter-bar state="state"></filter-bar>
 
-  <div ng-show="showEditHelpText()" class="text-center start-screen">
+  <div ng-show="getShouldShowEditHelp()" class="text-center start-screen">
     <h2>This dashboard is empty. Let's fill it up!</h2>
     <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit <a href="#/visualize" title="Visualize">"Visualize"</a> to create your first visualization.</p>
   </div>
 
+  <div ng-show="getShouldShowViewHelp()" class="text-center start-screen">
+    <h2>This dashboard is empty. Let's fill it up!</h2>
+    <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('edit');" aria-label="Edit">Edit</a> button in the menu bar above to start working on your new dashboard.
+  </div>
+
   <dashboard-grid
     ng-show="!hasExpandedPanel()"
     on-panel-removed="onPanelRemoved"
+    dashboard-view-mode="dashboardViewMode"
     panels="panels"
     get-vis-click-handler="getFilterBarClickHandler"
     get-vis-brush-handler="getBrushEvent"
@@ -77,6 +85,7 @@ <h2>This dashboard is empty. Let's fill it up!</h2>
                    panel="expandedPanel"
                    is-full-screen-mode="!chrome.getVisible()"
                    is-expanded="true"
+                   dashboard-view-mode="dashboardViewMode"
                    get-vis-click-handler="getFilterBarClickHandler"
                    get-vis-brush-handler="getBrushEvent"
                    save-state="saveState"