Skip to content

Commit

Permalink
Initial check-in to replace gridster with react-grid-layout and react…
Browse files Browse the repository at this point in the history 
…ify panels
  • Loading branch information
@stacey-gammon
stacey-gammon committed Sep 8, 2017
1 parent 52cee7d commit 98f72bc
Show file tree
Hide file tree
Showing 27 changed files with 843 additions and 743 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
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,6 +170,7 @@
"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-markdown": "2.4.2",
"react-redux": "4.4.5",
Expand Down
280 changes: 154 additions & 126 deletions src/core_plugins/kibana/public/dashboard/__tests__/dashboard_panels.js
View file
@@ -1,126 +1,154 @@
import angular from 'angular';
import expect from 'expect.js';
import ngMock from 'ng_mock';
import 'plugins/kibana/dashboard/saved_dashboard/saved_dashboard';
import { DashboardContainerAPI } from '../dashboard_container_api';
import { DashboardState } from '../dashboard_state';
import { DEFAULT_PANEL_WIDTH, DEFAULT_PANEL_HEIGHT } from 'plugins/kibana/dashboard/panel/panel_state';

describe('dashboard panels', function () {
let $scope;
let $el;
let AppState;

function compile(dashboard) {
ngMock.inject(($injector, $rootScope, $controller, $compile, $route) => {
AppState = $injector.get('AppState');
$scope = $rootScope.$new();
$route.current = {
locals: {
dash: dashboard
},
params: {}
};

const dashboardState = new DashboardState(dashboard, AppState, false);
$scope.containerApi = new DashboardContainerAPI(dashboardState);
$el = angular.element(`
<dashboard-app>
<dashboard-grid
style="width: 600px; height: 600px;"
ng-if="!hasExpandedPanel()"
on-panel-removed="onPanelRemoved"
panels="panels"
save-state="saveState"
toggle-expand="toggleExpandPanel"
container-api="containerApi"
></dashboard-grid>
</dashboard-app>`);
$compile($el)($scope);
$scope.$digest();
});
}

function findPanelWithVisualizationId(id) {
return $scope.panels.find((panel) => { return panel.id === id; });
}

beforeEach(() => {
ngMock.module('kibana');
});

afterEach(() => {
$scope.$destroy();
$el.remove();
});

it('loads with no vizualizations', function () {
ngMock.inject((SavedDashboard) => {
const dash = new SavedDashboard();
dash.init();
compile(dash);
});
expect($scope.panels.length).to.be(0);
});

it('loads one vizualization', function () {
ngMock.inject((SavedDashboard) => {
const dash = new SavedDashboard();
dash.init();
dash.panelsJSON = `[{"col":3,"id":"foo1","row":1,"size_x":2,"size_y":2,"type":"visualization"}]`;
compile(dash);
});
expect($scope.panels.length).to.be(1);
});

it('loads vizualizations in correct order', function () {
ngMock.inject((SavedDashboard) => {
const dash = new SavedDashboard();
dash.init();
dash.panelsJSON = `[
{"col":3,"id":"foo1","row":1,"size_x":2,"size_y":2,"type":"visualization"},
{"col":5,"id":"foo2","row":1,"size_x":2,"size_y":2,"type":"visualization"},
{"col":9,"id":"foo3","row":1,"size_x":2,"size_y":2,"type":"visualization"},
{"col":11,"id":"foo4","row":1,"size_x":2,"size_y":2,"type":"visualization"},
{"col":1,"id":"foo5","row":1,"size_x":2,"size_y":2,"type":"visualization"},
{"col":7,"id":"foo6","row":1,"size_x":2,"size_y":2,"type":"visualization"},
{"col":4,"id":"foo7","row":6,"size_x":3,"size_y":2,"type":"visualization"},
{"col":1,"id":"foo8","row":8,"size_x":3,"size_y":2,"type":"visualization"},
{"col":10,"id":"foo9","row":8,"size_x":3,"size_y":2,"type":"visualization"},
{"col":10,"id":"foo10","row":6,"size_x":3,"size_y":2,"type":"visualization"},
{"col":4,"id":"foo11","row":8,"size_x":3,"size_y":2,"type":"visualization"},
{"col":7,"id":"foo12","row":8,"size_x":3,"size_y":2,"type":"visualization"},
{"col":1,"id":"foo13","row":6,"size_x":3,"size_y":2,"type":"visualization"},
{"col":7,"id":"foo14","row":6,"size_x":3,"size_y":2,"type":"visualization"},
{"col":5,"id":"foo15","row":3,"size_x":6,"size_y":3,"type":"visualization"},
{"col":1,"id":"foo17","row":3,"size_x":4,"size_y":3,"type":"visualization"}]`;
compile(dash);
});
expect($scope.panels.length).to.be(16);
const foo8Panel = findPanelWithVisualizationId('foo8');
expect(foo8Panel).to.not.be(null);
expect(foo8Panel.row).to.be(8);
expect(foo8Panel.col).to.be(1);
});

it('initializes visualizations with the default size', function () {
ngMock.inject((SavedDashboard) => {
const dash = new SavedDashboard();
dash.init();
dash.panelsJSON = `[
{"col":3,"id":"foo1","row":1,"type":"visualization"},
{"col":5,"id":"foo2","row":1,"size_x":5,"size_y":9,"type":"visualization"}]`;
compile(dash);
});
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);
expect(foo1Panel.size_y).to.be(DEFAULT_PANEL_HEIGHT);

const foo2Panel = findPanelWithVisualizationId('foo2');
expect(foo2Panel).to.not.be(null);
expect(foo2Panel.size_x).to.be(5);
expect(foo2Panel.size_y).to.be(9);
});
});
// import angular from 'angular';
// import expect from 'expect.js';
// import ngMock from 'ng_mock';
// import 'plugins/kibana/dashboard/saved_dashboard/saved_dashboard';
// import { DashboardContainerAPI } from '../dashboard_container_api';
// import { DashboardState } from '../dashboard_state';
// import { DEFAULT_PANEL_WIDTH, DEFAULT_PANEL_HEIGHT } from 'plugins/kibana/dashboard/panel/panel_state';
//
// 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',
// ]);
//
// _.once(() => {
// app.directive('dashboardGrid', function (reactDirective) {
// return reactDirective(DashboardGrid);
// });
//
// app.directive('dashboardPanel', function (reactDirective) {
// return reactDirective(DashboardPanel);
// });
// })();
//
// describe('dashboard panels', function () {
// let $scope;
// let $el;
// let AppState;
//
// function compile(dashboard) {
// ngMock.inject(($injector, $rootScope, $controller, $compile, $route) => {
// AppState = $injector.get('AppState');
// $scope = $rootScope.$new();
// $route.current = {
// locals: {
// dash: dashboard
// },
// params: {}
// };
//
// const dashboardState = new DashboardState(dashboard, AppState, false);
// $scope.containerApi = new DashboardContainerAPI(dashboardState);
// $el = angular.element(`
// <dashboard-app>
// <dashboard-grid
// style="width: 600px; height: 600px;"
// ng-if="!hasExpandedPanel()"
// on-panel-removed="onPanelRemoved"
// panels="panels"
// save-state="saveState"
// toggle-expand="toggleExpandPanel"
// container-api="containerApi"
// ></dashboard-grid>
// </dashboard-app>`);
// $compile($el)($scope);
// $scope.$digest();
// });
// }
//
// function findPanelWithVisualizationId(id) {
// return $scope.panels.find((panel) => { return panel.id === id; });
// }
//
// beforeEach(() => {
// ngMock.module('kibana');
// });
//
// afterEach(() => {
// $scope.$destroy();
// $el.remove();
// });
//
// it('loads with no vizualizations', function () {
// ngMock.inject((SavedDashboard) => {
// const dash = new SavedDashboard();
// dash.init();
// compile(dash);
// });
// expect($scope.panels.length).to.be(0);
// });
//
// it('loads one vizualization', function () {
// ngMock.inject((SavedDashboard) => {
// const dash = new SavedDashboard();
// dash.init();
// dash.panelsJSON = `[{"col":3,"id":"foo1","row":1,"size_x":2,"size_y":2,"type":"visualization"}]`;
// compile(dash);
// });
// expect($scope.panels.length).to.be(1);
// });
//
// it('loads vizualizations in correct order', function () {
// ngMock.inject((SavedDashboard) => {
// const dash = new SavedDashboard();
// dash.init();
// dash.panelsJSON = `[
// {"col":3,"id":"foo1","row":1,"size_x":2,"size_y":2,"type":"visualization"},
// {"col":5,"id":"foo2","row":1,"size_x":2,"size_y":2,"type":"visualization"},
// {"col":9,"id":"foo3","row":1,"size_x":2,"size_y":2,"type":"visualization"},
// {"col":11,"id":"foo4","row":1,"size_x":2,"size_y":2,"type":"visualization"},
// {"col":1,"id":"foo5","row":1,"size_x":2,"size_y":2,"type":"visualization"},
// {"col":7,"id":"foo6","row":1,"size_x":2,"size_y":2,"type":"visualization"},
// {"col":4,"id":"foo7","row":6,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":1,"id":"foo8","row":8,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":10,"id":"foo9","row":8,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":10,"id":"foo10","row":6,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":4,"id":"foo11","row":8,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":7,"id":"foo12","row":8,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":1,"id":"foo13","row":6,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":7,"id":"foo14","row":6,"size_x":3,"size_y":2,"type":"visualization"},
// {"col":5,"id":"foo15","row":3,"size_x":6,"size_y":3,"type":"visualization"},
// {"col":1,"id":"foo17","row":3,"size_x":4,"size_y":3,"type":"visualization"}]`;
// compile(dash);
// });
// expect($scope.panels.length).to.be(16);
// const foo8Panel = findPanelWithVisualizationId('foo8');
// expect(foo8Panel).to.not.be(null);
// expect(foo8Panel.row).to.be(8);
// expect(foo8Panel.col).to.be(1);
// });
//
// it('initializes visualizations with the default size', function () {
// ngMock.inject((SavedDashboard) => {
// const dash = new SavedDashboard();
// dash.init();
// dash.panelsJSON = `[
// {"col":3,"id":"foo1","row":1,"type":"visualization"},
// {"col":5,"id":"foo2","row":1,"size_x":5,"size_y":9,"type":"visualization"}]`;
// compile(dash);
// });
// 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);
// expect(foo1Panel.size_y).to.be(DEFAULT_PANEL_HEIGHT);
//
// const foo2Panel = findPanelWithVisualizationId('foo2');
// expect(foo2Panel).to.not.be(null);
// expect(foo2Panel.size_x).to.be(5);
// expect(foo2Panel.size_y).to.be(9);
// });
// });

0 comments on commit 98f72bc

Please sign in to comment.