[6.x] Replace gridster with react-grid-layout (#13853)

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",
@@ -172,13 +171,15 @@
     "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-toggle": "3.0.1",
     "reactcss": "1.0.7",

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

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

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

@@ -4,8 +4,6 @@ import { uiModules } from 'ui/modules';
 import uiRoutes from 'ui/routes';
 import chrome from 'ui/chrome';
 
-import 'plugins/kibana/dashboard/grid';
-import 'plugins/kibana/dashboard/panel/panel';
 import 'ui/query_bar';
 
 import { SavedObjectNotFound } from 'ui/errors';
@@ -28,16 +26,34 @@ import { keyCodes } from 'ui_framework/services';
 import { DashboardContainerAPI } from './dashboard_container_api';
 import * as filterActions from 'ui/doc_table/actions/filter';
 import { FilterManagerProvider } from 'ui/filter_manager';
+import { EmbeddableHandlersRegistryProvider } from 'ui/embeddable/embeddable_handlers_registry';
+
+import {
+  DashboardGrid
+} from './grid/dashboard_grid';
+
+import {
+  DashboardPanel
+} from './panel';
 
 const app = uiModules.get('app/dashboard', [
   'elasticsearch',
   'ngRoute',
+  'react',
   'kibana/courier',
   'kibana/config',
   'kibana/notify',
   'kibana/typeahead',
 ]);
 
+app.directive('dashboardGrid', function (reactDirective) {
+  return reactDirective(DashboardGrid);
+});
+
+app.directive('dashboardPanel', function (reactDirective) {
+  return reactDirective(DashboardPanel);
+});
+
 uiRoutes
   .when(DashboardConstants.CREATE_NEW_DASHBOARD_URL, {
     template: dashboardTemplate,
@@ -95,6 +111,8 @@ app.directive('dashboardApp', function ($injector) {
       const docTitle = Private(DocTitleProvider);
       const notify = new Notifier({ location: 'Dashboard' });
       $scope.queryDocLinks = documentationLinks.query;
+      const embeddableHandlers = Private(EmbeddableHandlersRegistryProvider);
+      $scope.getEmbeddableHandler = panelType => embeddableHandlers.byName[panelType];
 
       const dash = $scope.dash = $route.current.locals.dash;
       if (dash.id) {
@@ -110,6 +128,7 @@ app.directive('dashboardApp', function ($injector) {
           dashboardState.saveState();
         }
       );
+      $scope.getContainerApi = () => $scope.containerApi;
 
       // The 'previouslyStored' check is so we only update the time filter on dashboard open, not during
       // normal cross app navigation.
@@ -181,13 +200,13 @@ app.directive('dashboardApp', function ($injector) {
         !dashboardConfig.getHideWriteControls()
       );
 
-      $scope.toggleExpandPanel = (panelIndex) => {
-        if ($scope.expandedPanel && $scope.expandedPanel.panelIndex === panelIndex) {
-          $scope.expandedPanel = null;
-        } else {
-          $scope.expandedPanel =
+      $scope.minimizeExpandedPanel = () => {
+        $scope.expandedPanel = null;
+      };
+
+      $scope.expandPanel = (panelIndex) => {
+        $scope.expandedPanel =
             dashboardState.getPanels().find((panel) => panel.panelIndex === panelIndex);
-        }
       };
 
       $scope.updateQueryAndFetch = function (query) {

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

@@ -4,6 +4,9 @@ export const DashboardConstants = {
   LANDING_PAGE_PATH: '/dashboards',
   CREATE_NEW_DASHBOARD_URL: '/dashboard',
 };
+export const DEFAULT_PANEL_WIDTH = 6;
+export const DEFAULT_PANEL_HEIGHT = 3;
+export const DASHBOARD_GRID_COLUMN_COUNT = 12;
 
 export function createDashboardEditUrl(id) {
   return `/dashboard/${id}`;

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

@@ -6,7 +6,7 @@ import { PanelUtils } from './panel/panel_utils';
 import moment from 'moment';
 
 import { stateMonitorFactory } from 'ui/state_management/state_monitor_factory';
-import { createPanelState, getPersistedStateId } from 'plugins/kibana/dashboard/panel/panel_state';
+import { createPanelState, getPersistedStateId } from './panel';
 
 function getStateDefaults(dashboard, hideWriteControls) {
   return {
@@ -298,7 +298,7 @@ export class DashboardState {
    */
   addNewPanel(id, type) {
     const maxPanelIndex = PanelUtils.getMaxPanelIndex(this.getPanels());
-    this.getPanels().push(createPanelState(id, type, maxPanelIndex));
+    this.getPanels().push(createPanelState(id, type, maxPanelIndex, this.getPanels()));
   }
 
   removePanel(panelIndex) {