[Canvas] Canvas embeddable #39839

crob611 · 2019-06-27T20:04:29Z

Summary

This adds the ability to embed anything that uses the Kibana Embeddable API into a Canvas Workpad by adding a new "embeddable" type to the interpreter, as well as an embeddable renderer.

We want to control specifically which embeddables are allowed, so each allowed embeddable will have it's own interpreter function. This PR adds functions savedSearch, savedMap and savedVisualization. All of these will accept a filter context, so changes to the filters in the workpad should immediately be reflected in the embedded object.

There will be a few followups to this.

Making an argument type component that will show in the right hand sidebar for changing the savedObject that is powering the embeddable.
The embeddables on the page reload as you go from page to page.

This is going to be failing CI until #42502 is merged

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

KOTungseth · 2019-08-01T16:23:25Z

For consistency, I'm wondering if we could rename the Embed object link to Add object, similar to the Add Element button?

elasticmachine · 2019-08-02T02:56:41Z

Pinging @elastic/kibana-canvas

stacey-gammon · 2019-08-15T21:16:36Z

This is so awesome to see @crob611!! Great job!

Noticed a few things. Happy to help try to work through them with you. We may want to prioritize some other embeddable features along for this to work better.

Filtering on a visualization doesn't work because of #43411

Filtering on a saved search throws a console error, but the UI should probably hide the magnifying glass. We should tackle #9220 to solve this for Canvas so you can just temporarily turn all that interaction off.

The title customization is lost when switching from view mode to edit mode. I think you'll need to somehow detect changes to the embeddables input and modify the expression so it's saved with the workpad. This will probably also be the case with per panel time range - I don't see that action but I"m not sure if you just didn't rebase bc that was only merged very recently.

Would having an expression that's like embedObject type="visualize" id="123" instead of savedVisualization id="123" not work because the input parameters are different? It'd be cool if someone in canvas could try to embed any registered embeddable. I know we talked about only a subset making sense in Canvas, but if they are modifying the expression directly, then maybe that could be a workaround if someone really wanted a third party embeddable plugin to load.

If you can figure out how to pass viewMode: view to the embeddable input when you switch out of edit mode, then you wont' get those dotted lines, you won't get the move cursor, and you'll also only see actions that are not editable actions.

streamich · 2019-08-16T01:33:29Z

x-pack/legacy/plugins/canvas/public/components/embeddable_flyout/flyout.tsx

+import {
+  SavedObjectFinder,
+  SavedObjectMetaData,
+} from 'ui/saved_objects/components/saved_object_finder';


FYI #43416 — these components are expected to live in src/plugins/kibana_react in 7.5

stacey-gammon · 2019-08-16T13:51:28Z

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/savedMap.ts

@@ -0,0 +1,68 @@
+/*


nit: I'd name all these files with snake case to be consistent with the rest of the code base (looks like a mix in this folder).

stacey-gammon · 2019-08-16T14:07:29Z

Actually, scratch the error about filtering not working on saved searches, it looks like this is a bug on master. Guess we have a gap in our test coverage! (see #43453)

stacey-gammon · 2019-08-16T14:19:06Z

So, there is some strangeness with per panel time ranges - one, because input changes happening from actions aren't preserved inside the expression, but also because time range is being passed down via filters and not the timeRange parameter.

I didn't actually test this out when implementing the feature, so I'd be interested to see if the latter thing causes weirdness on dashboard too. I'm actually not sure what ends up trumping what, if you pass a time range filter and another time range via timeRange input parameter.

elasticmachine · 2019-08-16T15:30:35Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

clintandrewhall

I'm going to approve to unblock you... but be sure to address @stacey-gammon feedback about file names and mine about non-relative imports before shipping.

clintandrewhall · 2019-08-20T17:05:39Z

x-pack/legacy/plugins/canvas/canvas_plugin_src/expression_types/embeddable.ts

+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ExpressionType } from '../../../../../../src/plugins/data/common/expressions';


Did changing this to src/plugins/data/common/expressions not work for you?

clintandrewhall · 2019-08-20T17:06:22Z

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/savedMap.ts

@@ -0,0 +1,68 @@
+/*


clintandrewhall · 2019-08-20T17:10:24Z

@stacey-gammon We chatted in today's review that this PR is getting large, but the functionality is there... we're going to merge this and track bugs (e.g. full-screen state, expression state, filters) in separate issues. It will make the code easier to review. I'm hoping to impose upon you a bit: can you help log issues so we can make sure the experience in Canvas is what we're expecting?

cc: @ryankeairns @shaunmcgough

elasticmachine · 2019-08-20T20:59:49Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

markov00 · 2019-08-21T08:10:56Z

@AlonaNadler

the existing visualization in kibana should have a transparent background, not sure if it is something that should be done in elastic charts @markov00 @nickofthyme or

all elastic-charts charts have a transparent background

stacey-gammon · 2019-08-22T18:38:14Z

Sorry, just got home from a trip so haven't been able to respond or file any bugs.

Would you feel comfortable releasing 7.4 with the bugs mentioned above? Are Embeddables in Canvas marked as Beta?

* Adds embeddable objects to canvas * Handle embeddable_api -> NewPlatform changes * Addressing PR feedback * Properly mock new platform * Snake case filenames{ * Switch relative paths to src/

* [Canvas] Canvas embeddable (#39839) * Adds embeddable objects to canvas * Handle embeddable_api -> NewPlatform changes * Addressing PR feedback * Properly mock new platform * Snake case filenames{ * Switch relative paths to src/ * Fix import paths for TimeRange * Adds i18n components file

AdrianSanchezLopez · 2019-12-13T17:21:59Z

Is this feature supposed to already in Kibana v 7.5.0? I'm using that version at the moment but can't find this option anywhere. If is not yet released, any ETA or expected version? Thanks

timductive · 2019-12-13T18:23:38Z

Hi @AdrianSanchezLopez, we have broken up the work here. Our goal is to release Maps as embeddables in 7.6 and other visualizations in 7.7. This isn't a guarantee, there is some rework to do with how Canvas filters elements but this is the rough goal.

AdrianSanchezLopez · 2019-12-13T18:55:24Z

Thank you very much for the answer, looking forward for both the Maps and visualizations Canvas embeddables.

crob611 force-pushed the canvas-embeddable branch from ca780ef to 4e24b00 Compare July 8, 2019 14:30

crob611 force-pushed the canvas-embeddable branch 2 times, most recently from 46aaa90 to 6a67cc7 Compare July 22, 2019 14:05

elastic deleted a comment from elasticmachine Jul 26, 2019

crob611 force-pushed the canvas-embeddable branch 2 times, most recently from aa4cd72 to b024db0 Compare July 30, 2019 12:16

Adds embeddable objects to canvas

740454a

crob611 force-pushed the canvas-embeddable branch from e188ea7 to 740454a Compare August 2, 2019 02:30

elastic deleted a comment from elasticmachine Aug 2, 2019

crob611 marked this pull request as ready for review August 2, 2019 02:54

crob611 requested a review from a team as a code owner August 2, 2019 02:55

crob611 assigned clintandrewhall, stacey-gammon, cqliu1 and ryankeairns Aug 2, 2019

crob611 added loe:x-large Extra Large Level of Effort v7.4.0 v8.0.0 Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas labels Aug 2, 2019

stacey-gammon assigned streamich Aug 15, 2019

streamich reviewed Aug 16, 2019

View reviewed changes

streamich added the Feature:Embedding Embedding content via iFrame label Aug 16, 2019

stacey-gammon reviewed Aug 16, 2019

View reviewed changes

clintandrewhall approved these changes Aug 20, 2019

View reviewed changes

Corey Robertson added 3 commits August 20, 2019 14:17

Merge branch 'master' into canvas-embeddable

03c2b82

Snake case filenames{

fb41eb4

Switch relative paths to src/

93668bf

crob611 merged commit 54e2edc into elastic:master Aug 21, 2019

crob611 mentioned this pull request Aug 21, 2019

[Canvas] Embeddable Expression should reflect embeddable state #43668

Closed

timductive mentioned this pull request Aug 22, 2019

Embed Kibana visualizations in Canvas #23035

Closed

crob611 added v7.5.0 and removed v7.4.0 labels Sep 3, 2019

crob611 mentioned this pull request Sep 11, 2019

[7.x] [Canvas] Canvas embeddable (#39839) #45377

Merged

shaunmcgough mentioned this pull request Dec 17, 2019

[Canvas][Meta] Element improvements #53312

Closed

25 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Canvas] Canvas embeddable #39839

[Canvas] Canvas embeddable #39839

crob611 commented Jun 27, 2019 •

edited

Loading

KOTungseth commented Aug 1, 2019

elasticmachine commented Aug 2, 2019

stacey-gammon commented Aug 15, 2019

streamich Aug 16, 2019 •

edited

Loading

stacey-gammon Aug 16, 2019

clintandrewhall Aug 20, 2019

stacey-gammon commented Aug 16, 2019 •

edited

Loading

stacey-gammon commented Aug 16, 2019

elasticmachine commented Aug 16, 2019

clintandrewhall left a comment

clintandrewhall Aug 20, 2019

clintandrewhall Aug 20, 2019

clintandrewhall commented Aug 20, 2019

elasticmachine commented Aug 20, 2019

markov00 commented Aug 21, 2019 •

edited

Loading

stacey-gammon commented Aug 22, 2019

AdrianSanchezLopez commented Dec 13, 2019

timductive commented Dec 13, 2019

AdrianSanchezLopez commented Dec 13, 2019

[Canvas] Canvas embeddable #39839

[Canvas] Canvas embeddable #39839

Conversation

crob611 commented Jun 27, 2019 • edited Loading

Summary

Checklist

For maintainers

KOTungseth commented Aug 1, 2019

elasticmachine commented Aug 2, 2019

stacey-gammon commented Aug 15, 2019

streamich Aug 16, 2019 • edited Loading

Choose a reason for hiding this comment

stacey-gammon Aug 16, 2019

Choose a reason for hiding this comment

clintandrewhall Aug 20, 2019

Choose a reason for hiding this comment

stacey-gammon commented Aug 16, 2019 • edited Loading

stacey-gammon commented Aug 16, 2019

elasticmachine commented Aug 16, 2019

💔 Build Failed

clintandrewhall left a comment

Choose a reason for hiding this comment

clintandrewhall Aug 20, 2019

Choose a reason for hiding this comment

clintandrewhall Aug 20, 2019

Choose a reason for hiding this comment

clintandrewhall commented Aug 20, 2019

elasticmachine commented Aug 20, 2019

💚 Build Succeeded

markov00 commented Aug 21, 2019 • edited Loading

stacey-gammon commented Aug 22, 2019

AdrianSanchezLopez commented Dec 13, 2019

timductive commented Dec 13, 2019

AdrianSanchezLopez commented Dec 13, 2019

crob611 commented Jun 27, 2019 •

edited

Loading

streamich Aug 16, 2019 •

edited

Loading

stacey-gammon commented Aug 16, 2019 •

edited

Loading

markov00 commented Aug 21, 2019 •

edited

Loading