Replace gridster with react-grid-layout (#13853)

* Initial check-in to replace gridster with react-grid-layout and reactify panels

* # This is a combination of 3 commits.
# This is the 1st commit message:
Add margin of error to test determining panel widths

# This is the commit message #2:

use real kibana version when creating panel data. Will make future conversions easier.

# This is the commit message #3:

Fix lint errors

* Add margin of error to test determining panel widths

use real kibana version when creating panel data. Will make future conversions easier.

Move default height and width to dashboard_constants so those that need it don't end up including extra stuff like ui/chrome

* Remove unnecessary _.once when creating react directives in dashboard.js

* Remove unnecessary constructors

* Use componentDidMount instead of componentWillMount bc of async calls, and handle case where destroyEmbeddable is not defined.

* Remove unnecessary null in classNames

* Use loads defaultsDeep instead of Object.assign

* use render* instead of get* for functions returning an element

* use relative css paths

* Use local import path

* Switch to local imports and remove need for plugins path in jest tests

* Improve accessibility of max/min panel toggle icon

* remove unused css

Had to implement this via code

* disable eslint rule for setState in componentDidMount

Am not aware of a better way to handle this, aside from switching to
redux, since it’s recommended not to put async calls in
componentWillMount.  Since I plan to investigate redux next, disabling
for now. Open to other’s opinions on the matter.

* Use native map instead of lodash

* Have the grid handle setting the z-indexes of the right reactgriditem

* Make the draggable handle the title, not the whole heading

Otherwise the drag event often takes over click events when trying to
open the panel options menu and it gets really annoying.

* Change from click to mouse down detector in KuiOutsideClickDector so drags also close pop ups.

* Fix mistaken commit

Code from the redux PR snuck into this one.

* Run getEditPath and getTitle async calls in parallel - no need to wait on the return value of one before starting the others.

* Fix tests: update snapshots, add promise returns.

* version being added to panelData in the wrong spot caused isDirty flag to be true when it shouldn't be

* Fix unmounting/mounting problem with panels due to view/edit mode switch

* Fix bug where panels get squashed to one side when view mode is changed while a panel is expanded.

* Update snapshots to match wrong view mode comparison

* Improve naming of a variable

* Fix issue with pop over hiding behind tile maps

* Previous panel.js included ui/doc_table and ui/visualize - needed to include them in the chain for Dash only mode but not in that file.

* Fix bad merge: remove baseline screenshots

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,13 +170,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-test-renderer": "15.6.1",
     "react-toggle": "3.0.1",

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) {