Skip to content

Commit

Permalink
Replace gridster with react-grid-layout (#13853)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
stacey-gammon authored Sep 26, 2017
1 parent 014dee0 commit e35d7b0
Show file tree
Hide file tree
Showing 38 changed files with 1,272 additions and 833 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
126 changes: 0 additions & 126 deletions src/core_plugins/kibana/public/dashboard/__tests__/dashboard_panels.js

This file was deleted.

79 changes: 0 additions & 79 deletions src/core_plugins/kibana/public/dashboard/__tests__/panel.js

This file was deleted.

17 changes: 9 additions & 8 deletions src/core_plugins/kibana/public/dashboard/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
35 changes: 27 additions & 8 deletions src/core_plugins/kibana/public/dashboard/dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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) {
Expand All @@ -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.
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
Expand Down
4 changes: 2 additions & 2 deletions src/core_plugins/kibana/public/dashboard/dashboard_state.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down
Loading

0 comments on commit e35d7b0

Please sign in to comment.