Refactor out state logic from dashboard directive (and a bugfix) (#10152

)

* New state and tests and time fixes

* Code review comments

* Remove saving filters if "enter" hasn't been pressed

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

@@ -23,9 +23,9 @@ describe('dashboard panels', function () {
             style="width: 600px; height: 600px;"
             ng-if="!hasExpandedPanel()"
             on-panel-removed="onPanelRemoved"
-            panels="state.panels"
-            get-vis-click-handler="filterBarClickHandler(state)"
-            get-vis-brush-handler="brushEvent(state)"
+            panels="panels"
+            get-vis-click-handler="filterBarClickHandler"
+            get-vis-brush-handler="brushEvent"
             save-state="saveState"
             toggle-expand="toggleExpandPanel"
             create-child-ui-state="createChildUiState"
@@ -38,7 +38,7 @@ describe('dashboard panels', function () {
   }
 
   function findPanelWithVisualizationId(id) {
-    return $scope.state.panels.find((panel) => { return panel.id === id; });
+    return $scope.panels.find((panel) => { return panel.id === id; });
   }
 
   beforeEach(() => {
@@ -56,7 +56,7 @@ describe('dashboard panels', function () {
       dash.init();
       compile(dash);
     });
-    expect($scope.state.panels.length).to.be(0);
+    expect($scope.panels.length).to.be(0);
   });
 
   it('loads one vizualization', function () {
@@ -66,7 +66,7 @@ describe('dashboard panels', function () {
       dash.panelsJSON = `[{"col":3,"id":"foo1","row":1,"size_x":2,"size_y":2,"type":"visualization"}]`;
       compile(dash);
     });
-    expect($scope.state.panels.length).to.be(1);
+    expect($scope.panels.length).to.be(1);
   });
 
   it('loads vizualizations in correct order', function () {
@@ -92,7 +92,7 @@ describe('dashboard panels', function () {
         {"col":1,"id":"foo17","row":3,"size_x":4,"size_y":3,"type":"visualization"}]`;
       compile(dash);
     });
-    expect($scope.state.panels.length).to.be(16);
+    expect($scope.panels.length).to.be(16);
     const foo8Panel = findPanelWithVisualizationId('foo8');
     expect(foo8Panel).to.not.be(null);
     expect(foo8Panel.row).to.be(8);
@@ -108,7 +108,7 @@ describe('dashboard panels', function () {
         {"col":5,"id":"foo2","row":1,"size_x":5,"size_y":9,"type":"visualization"}]`;
       compile(dash);
     });
-    expect($scope.state.panels.length).to.be(2);
+    expect($scope.panels.length).to.be(2);
     const foo1Panel = findPanelWithVisualizationId('foo1');
     expect(foo1Panel).to.not.be(null);
     expect(foo1Panel.size_x).to.be(DEFAULT_PANEL_WIDTH);

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

@@ -0,0 +1,95 @@
+import ngMock from 'ng_mock';
+import expect from 'expect.js';
+
+import { DashboardState } from '../dashboard_state';
+
+describe('DashboardState', function () {
+  let AppState;
+  let dashboardState;
+  let savedDashboard;
+  let SavedDashboard;
+  let timefilter;
+  let quickTimeRanges;
+
+  function initDashboardState() {
+    dashboardState = new DashboardState(savedDashboard, timefilter, true, quickTimeRanges, AppState);
+  }
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function ($injector) {
+    timefilter = $injector.get('timefilter');
+    quickTimeRanges = $injector.get('quickRanges');
+    AppState = $injector.get('AppState');
+    SavedDashboard = $injector.get('SavedDashboard');
+    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';
+
+        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('relative');
+        expect(timefilter.time.to).to.equal('now');
+        expect(timefilter.time.from).to.equal('now-13d');
+      });
+
+      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.from = 'now/w';
+        timefilter.time.to = 'now/w';
+        timefilter.time.mode = 'quick';
+
+        initDashboardState();
+
+        expect(timefilter.time.mode).to.equal('absolute');
+        expect(timefilter.time.to).to.equal(savedDashboard.timeTo);
+        expect(timefilter.time.from).to.equal(savedDashboard.timeFrom);
+      });
+    });
+
+    it('is not synced when timeRestore is false', function () {
+      savedDashboard.timeRestore = false;
+      savedDashboard.timeFrom = 'now/w';
+      savedDashboard.timeTo = 'now/w';
+
+      timefilter.time.timeFrom = '2015-09-19 06:31:44.000';
+      timefilter.time.timeTo = '2015-09-29 06:31:44.000';
+      timefilter.time.mode = 'absolute';
+
+      initDashboardState();
+
+      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');
+    });
+  });
+});

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

@@ -30,7 +30,7 @@
               parse-query
               input-focus
               kbn-typeahead-input
-              ng-model="state.query"
+              ng-model="model.query"
               placeholder="Filter..."
               aria-label="Filter input"
               type="text"
@@ -63,9 +63,9 @@ <h2>This dashboard is empty. Let's fill it up!</h2>
   <dashboard-grid
     ng-show="!hasExpandedPanel()"
     on-panel-removed="onPanelRemoved"
-    panels="state.panels"
-    get-vis-click-handler="filterBarClickHandler(state)"
-    get-vis-brush-handler="brushEvent(state)"
+    panels="panels"
+    get-vis-click-handler="getFilterBarClickHandler"
+    get-vis-brush-handler="getBrushEvent"
     save-state="saveState"
     toggle-expand="toggleExpandPanel"
     create-child-ui-state="createChildUiState"
@@ -76,8 +76,8 @@ <h2>This dashboard is empty. Let's fill it up!</h2>
                    panel="expandedPanel"
                    is-full-screen-mode="!chrome.getVisible()"
                    is-expanded="true"
-                   get-vis-click-handler="filterBarClickHandler(state)"
-                   get-vis-brush-handler="brushEvent(state)"
+                   get-vis-click-handler="getFilterBarClickHandler"
+                   get-vis-brush-handler="getBrushEvent"
                    save-state="saveState"
                    create-child-ui-state="createChildUiState"
                    toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)">