[WIP] Add redux to dashboard state management

package.json

@@ -127,7 +127,6 @@
     "glob": "5.0.13",
     "glob-all": "3.0.1",
     "good-squeeze": "2.1.0",
-    "gridster": "0.5.6",
     "h2o2": "5.1.1",
     "handlebars": "4.0.5",
     "hapi": "14.2.0",
@@ -171,19 +170,21 @@
     "react-anything-sortable": "1.6.1",
     "react-color": "2.11.7",
     "react-dom": "15.6.1",
+    "react-grid-layout": "0.14.7",
     "react-input-autosize": "1.1.0",
     "react-input-range": "1.2.1",
     "react-markdown": "2.4.2",
     "react-redux": "4.4.5",
     "react-router": "2.0.0",
     "react-router-redux": "4.0.4",
     "react-select": "1.0.0-rc.5",
+    "react-sizeme": "2.3.4",
     "react-sortable": "1.1.0",
     "react-test-renderer": "15.6.1",
     "react-toggle": "3.0.1",
     "reactcss": "1.0.7",
-    "redux": "3.0.0",
-    "redux-thunk": "0.1.0",
+    "redux": "3.7.2",
+    "redux-thunk": "2.2.0",
     "request": "2.61.0",
     "resize-observer-polyfill": "1.2.1",
     "rimraf": "2.4.3",

src/core_plugins/kibana/public/dashboard/action_types.js

@@ -0,0 +1,10 @@
+export const EMBEDDABLE_RENDER_REQUESTED = 'EMBEDDABLE_RENDER_REQUESTED';
+export const EMBEDDABLE_RENDER_FINISHED = 'EMBEDDABLE_RENDER_FINISHED';
+export const UPDATE_PANELS = 'UPDATE_PANELS';
+export const UPDATE_PANEL = 'UPDATE_PANEL';
+export const ADD_NEW_PANEl = 'ADD_NEW_PANEl';
+export const EMBEDDABLE_RENDER_ERROR = 'EMBEDDABLE_RENDER_ERROR';
+export const UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+export const UPDATE_MAXIMIZED_PANEl_ID = 'UPDATE_MAXIMIZED_PANEl_ID';
+export const DELETE_PANEL = 'DELETE_PANEL';
+export const UPDATE_IS_FULL_SCREEN_MODE = 'UPDATE_IS_FULL_SCREEN_MODE';

src/core_plugins/kibana/public/dashboard/dashboard_actions.js

@@ -0,0 +1,111 @@
+import {
+  EMBEDDABLE_RENDER_FINISHED,
+  EMBEDDABLE_RENDER_REQUESTED,
+  EMBEDDABLE_RENDER_ERROR,
+  UPDATE_PANELS,
+  UPDATE_VIEW_MODE,
+  UPDATE_MAXIMIZED_PANEl_ID,
+  DELETE_PANEL,
+  UPDATE_PANEL,
+  ADD_NEW_PANEl,
+  UPDATE_IS_FULL_SCREEN_MODE,
+} from './action_types';
+
+function embeddableRenderRequested(panelId) {
+  return {
+    type: EMBEDDABLE_RENDER_REQUESTED,
+    panelId: panelId
+  }
+}
+
+function embeddableRenderFinished(panelId, embeddable) {
+  return {
+    type: EMBEDDABLE_RENDER_FINISHED,
+    embeddable,
+    panelId,
+  }
+}
+
+function embeddableRenderError(panelId, error) {
+  return {
+    type: EMBEDDABLE_RENDER_ERROR,
+    panelId,
+    error
+  }
+}
+
+export function deletePanel(panelId) {
+  return {
+    type: DELETE_PANEL,
+    panelId
+  }
+}
+
+export function updateViewMode(viewMode) {
+  return {
+    type: UPDATE_VIEW_MODE,
+    viewMode
+  }
+}
+
+export function maximizePanel(panelId) {
+  return {
+    type: UPDATE_MAXIMIZED_PANEl_ID,
+    maximizedPanelId: panelId
+  }
+}
+
+export function minimizePanel() {
+  return {
+    type: UPDATE_MAXIMIZED_PANEl_ID,
+    maximizedPanelId: undefined
+  }
+}
+
+export function updatePanel(panel) {
+  return {
+    type: UPDATE_PANEL,
+    panel
+  }
+}
+
+export function addNewPanel(panel) {
+  return {
+    type: ADD_NEW_PANEl,
+    panel
+  }
+}
+
+export function updateIsFullScreenMode(isFullScreenMode) {
+  return {
+    type: UPDATE_IS_FULL_SCREEN_MODE,
+    isFullScreenMode
+  }
+}
+
+export function renderEmbeddable(embeddableHandler, panelElement, panelId, containerApi) {
+  return (dispatch, getState) => {
+   dispatch(embeddableRenderRequested(panelId));
+   const { dashboardState } = getState();
+    const panelState = dashboardState.panels[panelId];
+    return embeddableHandler.render(panelElement, panelState, containerApi)
+      .then(embeddable => {
+        return dispatch(embeddableRenderFinished(panelId, embeddable));
+      })
+      .catch(error => {
+        dispatch(embeddableRenderError(panelId, error));
+        console.log('err: ', error);
+      })
+  }
+}
+
+export function updatePanels(panels) {
+  const panelsMap = {};
+  panels.forEach(panel => {
+    panelsMap[panel.panelIndex] = panel;
+  });
+  return {
+    type: UPDATE_PANELS,
+    panels: panelsMap,
+  }
+}

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

@@ -77,25 +77,10 @@ <h2 class="kuiTitle kuiVerticalRhythm">
     </p>
   </div>
 
-  <dashboard-grid
-    ng-show="!hasExpandedPanel()"
-    on-panel-removed="onPanelRemoved"
-    dashboard-view-mode="dashboardViewMode"
-    panels="panels"
-    save-state="saveState"
-    toggle-expand="toggleExpandPanel"
-    data-shared-items-count="{{panels.length}}"
-    container-api="containerApi"
-  ></dashboard-grid>
-
-  <dashboard-panel
-    ng-if="hasExpandedPanel()"
-    panel="expandedPanel"
-    is-full-screen-mode="!chrome.getVisible()"
-    is-expanded="true"
-    dashboard-view-mode="dashboardViewMode"
-    container-api="containerApi"
-    toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)"
-  ></dashboard-panel>
+  <dashboard-viewport
+    get-container-api="getContainerApi"
+    get-embeddable-handler="getEmbeddableHandler"
+  >
+  </dashboard-viewport>
 
 </dashboard-app>