Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Improves error messages when in Dashboard #90668

Merged
merged 18 commits into from
Feb 15, 2021
Merged

[Lens] Improves error messages when in Dashboard #90668

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
1f08396
:fire: Remove unused frame API from signature
dej611 Feb 8, 2021
c428ac9
:sparkles: Show Lens validation errors in dashboard
dej611 Feb 8, 2021
fa208ea
Merge branch 'master' into fix/86278
kibanamachine Feb 9, 2021
6fa7501
:white_check_mark: Add functional test
dej611 Feb 9, 2021
c0c78e3
:lipstick: Integrate feedback
dej611 Feb 10, 2021
a4f0edf
:label: Narrow down the type to be used in embeddables
dej611 Feb 10, 2021
34ec35d
:label: Add palettes to the minimal set of frameAPI to load
dej611 Feb 10, 2021
a971da9
Merge branch 'master' into fix/86278
kibanamachine Feb 11, 2021
e901240
:fire: Remove the palettes service from the embeddable dependencies
dej611 Feb 11, 2021
32426a0
Merge branch 'fix/86278' of github.com:dej611/kibana into fix/86278
dej611 Feb 11, 2021
fd7e430
Revert ":label: Add palettes to the minimal set of frameAPI to load"
dej611 Feb 11, 2021
926052f
:label: Fix types after removal
dej611 Feb 11, 2021
18922cd
:lipstick: Refactor embeddable layout for errors
dej611 Feb 11, 2021
673fe2a
:lipstick: Show the more message only for multiple errors
dej611 Feb 11, 2021
a1aab98
:bug: Fix functional test
dej611 Feb 11, 2021
84e67e7
Merge branch 'master' into fix/86278
kibanamachine Feb 11, 2021
d140471
Merge branch 'master' into fix/86278
kibanamachine Feb 15, 2021
2e84b4a
:ok_hand: Integrate feedback
dej611 Feb 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,10 +459,10 @@ describe('Datatable Visualization', () => {
label: 'label',
});

const error = datatableVisualization.getErrorMessages(
{ layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] },
frame
);
const error = datatableVisualization.getErrorMessages({
layerId: 'a',
columns: [{ columnId: 'b' }, { columnId: 'c' }],
});

expect(error).toBeUndefined();
});
Expand All @@ -478,10 +478,10 @@ describe('Datatable Visualization', () => {
label: 'label',
});

const error = datatableVisualization.getErrorMessages(
{ layerId: 'a', columns: [{ columnId: 'b' }, { columnId: 'c' }] },
frame
);
const error = datatableVisualization.getErrorMessages({
layerId: 'a',
columns: [{ columnId: 'b' }, { columnId: 'c' }],
});

expect(error).toBeUndefined();
});
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
};
},

getErrorMessages(state, frame) {
getErrorMessages(state) {
return undefined;
},

Expand Down
53 changes: 37 additions & 16 deletions x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ import {
import { buildExpression } from './expression_helpers';
import { Document } from '../../persistence/saved_object_store';
import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
import { getActiveDatasourceIdFromDoc } from './state_management';
import { ErrorMessage } from '../types';
import { getMissingCurrentDatasource, getMissingVisualizationTypeError } from '../error_helper';

export async function initializeDatasources(
datasourceMap: Record<string, Datasource>,
Expand Down Expand Up @@ -72,15 +75,20 @@ export async function persistedStateToExpression(
datasources: Record<string, Datasource>,
visualizations: Record<string, Visualization>,
doc: Document
): Promise<Ast | null> {
): Promise<{ ast: Ast | null; errors: ErrorMessage[] | undefined }> {
const {
state: { visualization: visualizationState, datasourceStates: persistedDatasourceStates },
visualizationType,
references,
title,
description,
} = doc;
if (!visualizationType) return null;
if (!visualizationType) {
return {
ast: null,
errors: [{ shortMessage: '', longMessage: getMissingVisualizationTypeError() }],
};
}
const visualization = visualizations[visualizationType!];
const datasourceStates = await initializeDatasources(
datasources,
Expand All @@ -97,15 +105,33 @@ export async function persistedStateToExpression(

const datasourceLayers = createDatasourceLayers(datasources, datasourceStates);

return buildExpression({
title,
description,
const datasourceId = getActiveDatasourceIdFromDoc(doc);
if (datasourceId == null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strict equality works here, I'm surprised the linter allows ==

Suggested change
if (datasourceId == null) {
if (datasourceId === null) {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any particular meaning for null and undefined here, or do they have the same meaning?

eslint has a special option for null or undefined case in the rule eqeqeq, which is usually enabled.
As in steps 2 and 3 of the ECMA262 Abstract Equality spec the == operator treat them the same exact way. So unless specific distinct meaning of the two there's no difference.

return {
ast: null,
errors: [{ shortMessage: '', longMessage: getMissingCurrentDatasource() }],
};
}
const validationResult = validateDatasourceAndVisualization(
datasources[datasourceId],
datasourceStates[datasourceId].state,
visualization,
visualizationState,
datasourceMap: datasources,
datasourceStates,
datasourceLayers,
});
{ datasourceLayers } as FramePublicAPI
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a little scary - can be tighten the types here a bit? I went through our current consumers and there's one place using something besides datasourceLayers - the xy visualization will check out activeData.

Can we change the type of the second parameter of getConfiguration to Pick<FramePublicAPI, 'datasourceLayers' | 'activeData'>? This should fix the type cast and we want to move away from the kitchen sink api anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's also availablePalettes which is required somewhere. I couldn't find a way to drop it for the embeddable so for now I'm loading them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Managed to isolate it and remove availablePalettes as dependency as it was unused

);

return {
ast: buildExpression({
title,
description,
visualization,
visualizationState,
datasourceMap: datasources,
datasourceStates,
datasourceLayers,
}),
errors: validationResult,
};
}

export const validateDatasourceAndVisualization = (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just realizing this function is only operating on a single datasource - I guess this is something we have to revisit once we introduce additional datasource that can be active at the same time (like SQL). Nothing for this PR though.

Expand All @@ -114,12 +140,7 @@ export const validateDatasourceAndVisualization = (
currentVisualization: Visualization | null,
currentVisualizationState: unknown | undefined,
frameAPI: FramePublicAPI
):
| Array<{
shortMessage: string;
longMessage: string;
}>
| undefined => {
): ErrorMessage[] | undefined => {
const layersGroups = currentVisualizationState
? currentVisualization
?.getLayerIds(currentVisualizationState)
Expand All @@ -141,7 +162,7 @@ export const validateDatasourceAndVisualization = (
: undefined;

const visualizationValidationErrors = currentVisualizationState
? currentVisualization?.getErrorMessages(currentVisualizationState, frameAPI)
? currentVisualization?.getErrorMessages(currentVisualizationState)
: undefined;

if (datasourceValidationErrors?.length || visualizationValidationErrors?.length) {
Expand Down
5 changes: 1 addition & 4 deletions ...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,10 +155,7 @@ export const WorkspacePanel = React.memo(function WorkspacePanel({
datasourceLayers: framePublicAPI.datasourceLayers,
});
} catch (e) {
const buildMessages = activeVisualization?.getErrorMessages(
visualizationState,
framePublicAPI
);
const buildMessages = activeVisualization?.getErrorMessages(visualizationState);
const defaultMessage = {
shortMessage: i18n.translate('xpack.lens.editorFrame.buildExpressionError', {
defaultMessage: 'An unexpected error occurred while preparing the chart',
Expand Down
Loading