Skip to content

Commit

Permalink
[ML] position in row
Browse files Browse the repository at this point in the history
  • Loading branch information
@darnautov
darnautov committed Jun 17, 2020
1 parent 72d28ed commit 7d3e4e1
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 16 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export const AddToDashboardControl: FC<AddToDashboardControlProps> = ({
title: (
<FormattedMessage
id="xpack.ml.explorer.dashboardsTable.savedSuccessfullyTitle"
defaultMessage='Dashboard "{dashboardTitle}" updated successfully!'
defaultMessage='Dashboard "{dashboardTitle}" updated successfully'
values={{ dashboardTitle: selectedDashboard.title }}
/>
),
Expand Down
98 changes: 93 additions & 5 deletions x-pack/plugins/ml/public/application/services/dashboard_service.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
import { dashboardServiceProvider } from './dashboard_service';
import { savedObjectsServiceMock } from '../../../../../../src/core/public/mocks';
import { SavedObjectDashboard } from '../../../../../../src/plugins/dashboard/public/saved_dashboards';
import { DashboardUrlGenerator } from '../../../../../../src/plugins/dashboard/public';
import {
DashboardUrlGenerator,
SavedDashboardPanel,
} from '../../../../../../src/plugins/dashboard/public';

jest.mock('@elastic/eui', () => {
return {
Expand Down Expand Up @@ -48,8 +51,40 @@ describe('DashboardService', () => {
title: 'ML Test',
hits: 0,
description: '',
panelsJSON:
'[{"version":"8.0.0","type":"ml_anomaly_swimlane","gridData":{"x":0,"y":0,"w":24,"h":15,"i":"i63c960b1-ab1b-11ea-809d-f5c60c43347f"},"panelIndex":"i63c960b1-ab1b-11ea-809d-f5c60c43347f","embeddableConfig":{"title":"Panel test!","jobIds":["cw_multi_1"],"swimlaneType":"overall"},"title":"Panel test!"},{"version":"8.0.0","type":"ml_anomaly_swimlane","gridData":{"x":24,"y":0,"w":24,"h":15,"i":"0aa334bd-8308-4ded-9462-80dbd37680ee"},"panelIndex":"0aa334bd-8308-4ded-9462-80dbd37680ee","embeddableConfig":{"title":"ML anomaly swimlane for fb_population_1","jobIds":["fb_population_1"],"limit":5,"swimlaneType":"overall"},"title":"ML anomaly swimlane for fb_population_1"},{"version":"8.0.0","gridData":{"x":0,"y":15,"w":24,"h":15,"i":"abd36eb7-4774-4216-891e-12100752b46d"},"panelIndex":"abd36eb7-4774-4216-891e-12100752b46d","embeddableConfig":{},"panelRefName":"panel_2"}]',
panelsJSON: JSON.stringify([
{
version: '8.0.0',
type: 'ml_anomaly_swimlane',
gridData: { x: 0, y: 0, w: 24, h: 15, i: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f' },
panelIndex: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f',
embeddableConfig: {
title: 'Panel test!',
jobIds: ['cw_multi_1'],
swimlaneType: 'overall',
},
title: 'Panel test!',
},
{
version: '8.0.0',
type: 'ml_anomaly_swimlane',
gridData: { x: 24, y: 0, w: 24, h: 15, i: '0aa334bd-8308-4ded-9462-80dbd37680ee' },
panelIndex: '0aa334bd-8308-4ded-9462-80dbd37680ee',
embeddableConfig: {
title: 'ML anomaly swimlane for fb_population_1',
jobIds: ['fb_population_1'],
limit: 5,
swimlaneType: 'overall',
},
title: 'ML anomaly swimlane for fb_population_1',
},
{
version: '8.0.0',
gridData: { x: 0, y: 15, w: 24, h: 15, i: 'abd36eb7-4774-4216-891e-12100752b46d' },
panelIndex: 'abd36eb7-4774-4216-891e-12100752b46d',
embeddableConfig: {},
panelRefName: 'panel_2',
},
]),
optionsJSON: '{"hidePanelTitles":false,"useMargins":true}',
version: 1,
timeRestore: false,
Expand All @@ -64,8 +99,48 @@ describe('DashboardService', () => {
title: 'ML Test',
hits: 0,
description: '',
panelsJSON:
'[{"version":"8.0.0","type":"ml_anomaly_swimlane","gridData":{"x":0,"y":0,"w":24,"h":15,"i":"i63c960b1-ab1b-11ea-809d-f5c60c43347f"},"panelIndex":"i63c960b1-ab1b-11ea-809d-f5c60c43347f","embeddableConfig":{"title":"Panel test!","jobIds":["cw_multi_1"],"swimlaneType":"overall"},"title":"Panel test!"},{"version":"8.0.0","type":"ml_anomaly_swimlane","gridData":{"x":24,"y":0,"w":24,"h":15,"i":"0aa334bd-8308-4ded-9462-80dbd37680ee"},"panelIndex":"0aa334bd-8308-4ded-9462-80dbd37680ee","embeddableConfig":{"title":"ML anomaly swimlane for fb_population_1","jobIds":["fb_population_1"],"limit":5,"swimlaneType":"overall"},"title":"ML anomaly swimlane for fb_population_1"},{"version":"8.0.0","gridData":{"x":0,"y":15,"w":24,"h":15,"i":"abd36eb7-4774-4216-891e-12100752b46d"},"panelIndex":"abd36eb7-4774-4216-891e-12100752b46d","embeddableConfig":{},"panelRefName":"panel_2"},{"panelIndex":"test-panel-id","embeddableConfig":{"testConfig":""},"title":"Test title","type":"test-panel","version":"8.0.0","gridData":{"h":15,"i":"test-panel-id","w":24,"x":0,"y":30}}]',
panelsJSON: JSON.stringify([
{
version: '8.0.0',
type: 'ml_anomaly_swimlane',
gridData: { x: 0, y: 0, w: 24, h: 15, i: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f' },
panelIndex: 'i63c960b1-ab1b-11ea-809d-f5c60c43347f',
embeddableConfig: {
title: 'Panel test!',
jobIds: ['cw_multi_1'],
swimlaneType: 'overall',
},
title: 'Panel test!',
},
{
version: '8.0.0',
type: 'ml_anomaly_swimlane',
gridData: { x: 24, y: 0, w: 24, h: 15, i: '0aa334bd-8308-4ded-9462-80dbd37680ee' },
panelIndex: '0aa334bd-8308-4ded-9462-80dbd37680ee',
embeddableConfig: {
title: 'ML anomaly swimlane for fb_population_1',
jobIds: ['fb_population_1'],
limit: 5,
swimlaneType: 'overall',
},
title: 'ML anomaly swimlane for fb_population_1',
},
{
version: '8.0.0',
gridData: { x: 0, y: 15, w: 24, h: 15, i: 'abd36eb7-4774-4216-891e-12100752b46d' },
panelIndex: 'abd36eb7-4774-4216-891e-12100752b46d',
embeddableConfig: {},
panelRefName: 'panel_2',
},
{
panelIndex: 'test-panel-id',
embeddableConfig: { testConfig: '' },
title: 'Test title',
type: 'test-panel',
version: '8.0.0',
gridData: { h: 15, i: 'test-panel-id', w: 24, x: 24, y: 15 },
},
]),
optionsJSON: '{"hidePanelTitles":false,"useMargins":true}',
version: 1,
timeRestore: false,
Expand All @@ -83,4 +158,17 @@ describe('DashboardService', () => {
viewMode: 'edit',
});
});

test('should find the panel positioned at the end', () => {
expect(
dashboardService.getLastPanel([
{ gridData: { y: 15, x: 7 } },
{ gridData: { y: 17, x: 9 } },
{ gridData: { y: 15, x: 1 } },
{ gridData: { y: 17, x: 10 } },
{ gridData: { y: 15, x: 22 } },
{ gridData: { y: 17, x: 9 } },
] as SavedDashboardPanel[])
).toEqual({ gridData: { y: 17, x: 10 } });
});
});
43 changes: 33 additions & 10 deletions x-pack/plugins/ml/public/application/services/dashboard_service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export function dashboardServiceProvider(
dashboardUrlGenerator: DashboardUrlGenerator
) {
const generateId = htmlIdGenerator();
const DEFAULT_PANEL_WIDTH = 24;
const DEFAULT_PANEL_HEIGHT = 15;

return {
/**
Expand All @@ -37,6 +39,22 @@ export function dashboardServiceProvider(
searchFields: ['title^3', 'description'],
});
},
/**
* Resolves the last positioned panel from the collection.
*/
getLastPanel(panels: SavedDashboardPanel[]): SavedDashboardPanel | null {
return panels.length > 0
? panels.reduce((prev, current) =>
prev.gridData.y >= current.gridData.y
? prev.gridData.y === current.gridData.y
? prev.gridData.x > current.gridData.x
? prev
: current
: prev
: current
)
: null;
},
/**
* Attaches embeddable panels to the dashboard
*/
Expand All @@ -47,27 +65,32 @@ export function dashboardServiceProvider(
) {
const panels = JSON.parse(dashboardAttributes.panelsJSON) as SavedDashboardPanel[];
const version = kibanaVersion;
const rowWidth = DEFAULT_PANEL_WIDTH * 2;

for (const panelData of panelsData) {
const panelIndex = generateId();
const maxPanel =
panels.length > 0
? panels.reduce((prev, current) =>
prev.gridData.y > current.gridData.y ? prev : current
)
: null;
const lastPanel = this.getLastPanel(panels);

const xOffset = lastPanel ? lastPanel.gridData.w + lastPanel.gridData.x : 0;
const availableRowSpace = rowWidth - xOffset;
const xPosition = availableRowSpace - DEFAULT_PANEL_WIDTH >= 0 ? xOffset : 0;

panels.push({
panelIndex,
embeddableConfig: panelData.embeddableConfig as { [key: string]: any },
title: panelData.title,
type: panelData.type,
version,
gridData: {
h: 15,
h: DEFAULT_PANEL_HEIGHT,
i: panelIndex,
w: 24,
x: 0,
y: maxPanel ? maxPanel.gridData.y + maxPanel.gridData.h : 0,
w: DEFAULT_PANEL_WIDTH,
x: xPosition,
y: lastPanel
? xPosition > 0
? lastPanel.gridData.y
: lastPanel.gridData.y + lastPanel.gridData.h
: 0,
},
});
}
Expand Down

0 comments on commit 7d3e4e1

Please sign in to comment.