[Lens] Improves error messages when in Dashboard #90668

dej611 · 2021-02-08T18:48:08Z

Summary

This PR addresses some issues when embedding a Lens visualisation into Dashboard panels.
In particular visualisation would either not show an explaining error message when failing ( #86268 ) or rendering despite not being "valid" for Lens rules ( #90594 ).

The validation logic used for Lens editor has been now integrated into the embeddable to propagate the same experience.

✨ Show nice error messages when in dashboard
✨ Hint to open Lens to see more errors when multiple
🔥 Remove unused Frame API
✅ Unit tests - Functional test

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

dej611 · 2021-02-09T09:30:26Z

@elasticmachine merge upstream

elasticmachine · 2021-02-09T11:50:26Z

Pinging @elastic/kibana-app (Team:KibanaApp)

ThomThomson

Changes LGTM! Code only review, mostly focused on Lens embeddable and expression wrapper.

ryankeairns · 2021-02-09T22:13:14Z

x-pack/plugins/lens/public/visualization_container.scss

@@ -15,3 +15,11 @@
    position: static; // Let the progress indicator position itself against the outer parent
  }
 }
+
+.lnsExpressionRendererEmbeddedError {


Following our BEM naming convention, perhaps this should be .lnsExpressionRenderer__embeddedError, similar to the class above (.lnsExpressionRenderer__component).

Presuming that to be the case, should it also be nested in the group above?

At the moment the component using this class is not nested within a lnsExpressionRenderer.

If the component using this class is not nested within lnsExpressionRenderer, would it be better to name the class lnsEmbeddedError in order to avoid confusion such as the above? Just helps further separate the two.

flash1293

Looks pretty good to me, left one typing nit.

While testing I noticed one error case we are not handling well at the moment - if the index pattern for a visualization is missing, an empty panel is rendered and the error message is logged to the console.

I will open a separate issue for this

flash1293 · 2021-02-10T13:22:39Z

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts

+      datasourceLayers,
+    }),
+    errors: validationResult,
+  };
 }

 export const validateDatasourceAndVisualization = (


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.

flash1293 · 2021-02-10T13:29:11Z

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts

-    datasourceStates,
-    datasourceLayers,
-  });
+    { datasourceLayers } as FramePublicAPI


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.

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.

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

MichaelMarcialis

Left a few comments/questions regarding these error messages. Nothing show-stopping, but just thought I'd bring them up. Let me know what you think.

MichaelMarcialis · 2021-02-10T16:14:40Z

x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx

+      <EuiFlexItem>
+        <FormattedMessage
+          id="xpack.lens.embeddable.moreErrors"
+          defaultMessage="(Edit in Lens editor to see more errors)"


Rather than having in parenthesis, can we treat this like a regular sentence?

Also, is it possible to make Edit in Lens editor a link that opens this visualization in Lens in a new tab? Offering the user a quick action to correct the problem would be nice.

Rather than having in parenthesis, can we treat this like a regular sentence?

Also, is it possible to make Edit in Lens editor a link that opens this visualization in Lens in a new tab? Offering the user a quick action to correct the problem would be nice.

Tried to implement the Edit in Lens button with the same logic of the Edit action (dropdown context menu) but it's not trivial. Perhaps it could be done as a follow up?

Sure! Let me know if you'd like me to open an issue for it.

MichaelMarcialis · 2021-02-10T16:18:35Z

x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx

+    <div className="lnsExpressionRenderer__embeddedError">
+      <EuiFlexGroup
+        direction="column"
+        justifyContent="center"
+        alignItems="center"
+        style={{ maxWidth: '100%' }}
+        data-test-subj="embeddable-lens-failure"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiIcon type="alert" size="xl" color="danger" />
+        </EuiFlexItem>
+        {customError || defaultMessage}
+        {moreErrors}
+      </EuiFlexGroup>
+    </div>


Is using an EuiFlexGroup as shown here the standard for displaying Dashboard error messages? I'd think it would be cleaner/easier to just use an EuiEmptyPrompt instead, since it already bakes in icon, text and action buttons. You could then also put your messages in a more semantic p elements, rather than the current EuiFlexItem wrappers. Thoughts?

Nice idea. I used the same structure as in the Lens workspace but this one looks nicer.

flash1293 · 2021-02-11T09:15:14Z

@elasticmachine merge upstream

flash1293

Tested and works as expected, LGTM. Thanks for the functional test, I think this is a thing that can break easily without anyone noticing.

This reverts commit 34ec35d.

dej611 · 2021-02-11T10:51:26Z

Latest version using EuiEmptyPrompt:

dej611 · 2021-02-11T16:09:13Z

@elasticmachine merge upstream

wylieconlon

Tested and LGTM, but probably needs one more pass

wylieconlon · 2021-02-11T16:54:55Z

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts

-    title,
-    description,
+  const datasourceId = getActiveDatasourceIdFromDoc(doc);
+  if (datasourceId == null) {


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

Suggested change

if (datasourceId == null) {

if (datasourceId === null) {

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.

wylieconlon · 2021-02-11T16:59:26Z

x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx

+    await embeddable.initializeSavedVis({} as LensEmbeddableInput);
+    embeddable.render(mountpoint);
+
+    expect(expressionRenderer).toHaveBeenCalledTimes(0);


This expect isn't really asserting what the title of the test says it does, can you align the two?

dej611 · 2021-02-15T09:08:42Z

@elasticmachine merge upstream

kibanamachine · 2021-02-15T11:26:57Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`lens`	892.3KB	894.6KB	+2.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`lens`	34.7KB	34.7KB	+22.0B

History

💚 Build #106091 succeeded 84e67e7
💛 Build #106021 was flaky a1aab98
💔 Build #105957 failed 673fe2a
💛 Build #105940 was flaky 926052f
💚 Build #105921 succeeded a971da9

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

mbondyra · 2021-02-15T11:58:58Z

I checked this PR last week and I forgot to confirm my comments 🤦 But all has been addressed in the meantime so approving!

Co-authored-by: Kibana Machine <[email protected]>

…ndition-for-hiding-recommded-allocation * 'master' of github.com:elastic/kibana: [Discover] Fix toggling multi fields from doc view table (elastic#91121) [ML] Data Frame Analytics: ROC Curve Chart (elastic#89991) skip flaky suite (elastic#86948) skip flaky suite (elastic#91191) Fix date histogram time zone for rollup index (elastic#90632) [Search Source] Fix retrieval of unmapped fields; Add field filters (elastic#89837) [Logs UI] Use useMlHref hook for ML links (elastic#90935) Fix values of `products.min_price` field in Kibana sample ecommerce data set (elastic#90428) [APM] Darker shade for Error group details labels (elastic#91349) [Lens] Adjust new copy for 7.12 (elastic#90413) [ML] Unskip test. Fix modelMemoryLimit value. (elastic#91280) [Lens] Fix empty display name issue in XY chart (elastic#91132) [Lens] Improves error messages when in Dashboard (elastic#90668) [Lens] Keyboard-selected items follow user traversal of drop zones (elastic#90546) [Lens] Improves ranking feature in Top values (elastic#90749) [ILM] Rollover min age tooltip and copy fixes (elastic#91110) # Conflicts: # x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

dej611 added 2 commits February 8, 2021 19:25

🔥 Remove unused frame API from signature

1f08396

✨ Show Lens validation errors in dashboard

c428ac9

dej611 added Feature:Dashboard Dashboard related features Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.0.0 Feature:Lens v7.12.0 labels Feb 8, 2021

Merge branch 'master' into fix/86278

fa208ea

dej611 linked an issue Feb 9, 2021 that may be closed by this pull request

[Lens] It is possible to skip Lens enforced esaggs limits via dashboard #90594

Closed

✅ Add functional test

6fa7501

dej611 changed the title ~~[Lens] Show Lens validation messages when in Dashboard~~ [Lens] Improve error messages when in Dashboard Feb 9, 2021

dej611 changed the title ~~[Lens] Improve error messages when in Dashboard~~ [Lens] Improves error messages when in Dashboard Feb 9, 2021

dej611 added the release_note:enhancement label Feb 9, 2021

dej611 requested a review from ThomThomson February 9, 2021 11:50

dej611 marked this pull request as ready for review February 9, 2021 11:50

dej611 requested a review from a team February 9, 2021 11:50

dej611 requested a review from a team as a code owner February 9, 2021 11:50

ThomThomson approved these changes Feb 9, 2021

View reviewed changes

ryankeairns requested changes Feb 9, 2021

View reviewed changes

💄 Integrate feedback

c0c78e3

dej611 requested a review from ryankeairns February 10, 2021 11:37

flash1293 reviewed Feb 10, 2021

View reviewed changes

🏷️ Narrow down the type to be used in embeddables

a4f0edf

ryankeairns approved these changes Feb 10, 2021

View reviewed changes

MichaelMarcialis reviewed Feb 10, 2021

View reviewed changes

🏷️ Add palettes to the minimal set of frameAPI to load

34ec35d

Merge branch 'master' into fix/86278

a971da9

flash1293 approved these changes Feb 11, 2021

View reviewed changes

dej611 added 6 commits February 11, 2021 10:31

🔥 Remove the palettes service from the embeddable dependencies

e901240

Merge branch 'fix/86278' of github.com:dej611/kibana into fix/86278

32426a0

Revert ":label: Add palettes to the minimal set of frameAPI to load"

fd7e430

This reverts commit 34ec35d.

🏷️ Fix types after removal

926052f

💄 Refactor embeddable layout for errors

18922cd

💄 Show the more message only for multiple errors

673fe2a

🐛 Fix functional test

a1aab98

Merge branch 'master' into fix/86278

84e67e7

wylieconlon approved these changes Feb 11, 2021

View reviewed changes

kibanamachine and others added 2 commits February 15, 2021 04:08

Merge branch 'master' into fix/86278

d140471

👌 Integrate feedback

2e84b4a

mbondyra approved these changes Feb 15, 2021

View reviewed changes

dej611 merged commit e9e7453 into elastic:master Feb 15, 2021

dej611 deleted the fix/86278 branch February 15, 2021 12:00

dej611 mentioned this pull request Feb 15, 2021

[7.x] [Lens] Improves error messages when in Dashboard (#90668) #91387

Merged

dej611 added a commit to dej611/kibana that referenced this pull request Feb 15, 2021

[Lens] Improves error messages when in Dashboard (elastic#90668)

6abe860

Co-authored-by: Kibana Machine <[email protected]>

dej611 added a commit that referenced this pull request Feb 15, 2021

[7.x] [Lens] Improves error messages when in Dashboard (#90668) (#91387)

5faeaf3

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

ThomThomson mentioned this pull request Mar 29, 2021

[Visualize] Allows editing broken visualizations caused by runtime fields changes #94798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Improves error messages when in Dashboard #90668

[Lens] Improves error messages when in Dashboard #90668

dej611 commented Feb 8, 2021 •

edited

Loading

dej611 commented Feb 9, 2021

elasticmachine commented Feb 9, 2021

ThomThomson left a comment

ryankeairns Feb 9, 2021

dej611 Feb 10, 2021 •

edited

Loading

MichaelMarcialis Feb 10, 2021

flash1293 left a comment

flash1293 Feb 10, 2021

flash1293 Feb 10, 2021

dej611 Feb 10, 2021

dej611 Feb 10, 2021

dej611 Feb 11, 2021

MichaelMarcialis left a comment

MichaelMarcialis Feb 10, 2021

dej611 Feb 11, 2021

MichaelMarcialis Feb 11, 2021

MichaelMarcialis Feb 10, 2021

dej611 Feb 10, 2021

flash1293 commented Feb 11, 2021

flash1293 left a comment

dej611 commented Feb 11, 2021

dej611 commented Feb 11, 2021

wylieconlon left a comment

wylieconlon Feb 11, 2021

dej611 Feb 11, 2021

wylieconlon Feb 11, 2021

dej611 commented Feb 15, 2021

kibanamachine commented Feb 15, 2021

mbondyra commented Feb 15, 2021

[Lens] Improves error messages when in Dashboard #90668

[Lens] Improves error messages when in Dashboard #90668

Conversation

dej611 commented Feb 8, 2021 • edited Loading

Summary

Checklist

dej611 commented Feb 9, 2021

elasticmachine commented Feb 9, 2021

ThomThomson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dej611 Feb 10, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flash1293 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flash1293 commented Feb 11, 2021

flash1293 left a comment

Choose a reason for hiding this comment

dej611 commented Feb 11, 2021

dej611 commented Feb 11, 2021

wylieconlon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dej611 commented Feb 15, 2021

kibanamachine commented Feb 15, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

mbondyra commented Feb 15, 2021

dej611 commented Feb 8, 2021 •

edited

Loading

dej611 Feb 10, 2021 •

edited

Loading