[feature][Canvas] Share Workpads in other Websites #46278

clintandrewhall · 2019-09-20T19:09:19Z

Reconstitutes #42545 for 7.5. Tracks the feature branch (feature/canvas-snapshots), and changes will be merged to the feature branch by separate PR for a cleaner commit history.

Summary

This is a pull request for embedding workpads externally, without an iframe. It consists of a custom runtime that can render the transient, data-complete state of a given workpad.

Coverage

Test coverage currently stands at 92%. Most "uncovered" lines and statements require either an upgrade to react and react-dom to 16.9, or are webpack-related build files. See "Gathering Coverage" below to see the report.

Details about how to build and run this are in README.md.

Prerequisite

Before testing or running this PR locally, you must run node scripts/shareable_runtime from /canvas after yarn kbn bootstrap and before starting Kibana. It is only built automatically when Kibana is built for production.

Testing

Cloud Deployment

I've deployed this to a Cloud instance for testing by Elastic employees. If you'd like access, reach out to @clintandrewhall.

You can test this functionality in a number of ways. The easiest would be:

Download a ZIP from Canvas

Load a workpad in Canvas.
Click "Export" -> "Share on a website" -> "download a ZIP file"
Extract and change to the extracted directory.
Run python -m SimpleHTTPServer 9001
Open a web browser to http://localhost:9001

Test the Runtime Directly from Webpack

Load a workpad in Canvas.
Click "Export" -> "Share on a website" -> "Download Workpad"
Copy the workpad to canvas/shareable_runtime/test.
Edit canvas/shareable_runtime/index.html to include your workpad.
From /canvas, run node scripts/shareable_runtime --dev --run
Open a web browser to http://localhost:8080

Run the Storybook

From /canvas: node scripts/storybook

Run the Jest Tests and Gather Coverage

From /canvas: node scripts/jest --path shareable_runtime --coverage.

Checklist

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

elasticmachine · 2019-09-20T19:12:40Z

Pinging @elastic/kibana-canvas

elasticmachine · 2019-09-20T20:53:39Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

clintandrewhall

Some comments for @elastic/kibana-operations

.sass-lint.yml

package.json

src/dev/jest/mocks/css_module_mock.js

x-pack/dev-tools/jest/create_jest_config.js

clintandrewhall · 2019-09-20T22:01:38Z

x-pack/legacy/plugins/canvas/server/routes/workpad_snapshots.ts

+    handler(request, handler) {
+      const workpad = request.payload;
+
+      const archive = archiver('zip');


operations: using archiver to create a zip file.

clintandrewhall · 2019-09-20T22:02:09Z

x-pack/tasks/build.js

+    execa.sync(process.execPath, ['legacy/plugins/canvas/scripts/external_runtime'], {
+      cwd: resolve(__dirname, '..'),
+      stdio: ['ignore', 'inherit', 'inherit'],
+      buffer: false,


operations: added the external runtime build step to the task list.

elasticmachine · 2019-09-20T23:25:24Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-23T20:59:13Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-23T23:46:58Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-24T03:14:39Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-25T03:30:07Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* Add localization + tweak naming * Fix duplicate key * Update storyshots

elasticmachine · 2019-09-26T03:20:27Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* [perf] Fix perf issue with unsupported renderers * Fixing snapshots

elasticmachine · 2019-10-10T03:14:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: c647a73

elasticmachine · 2019-10-10T05:43:43Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: a37fe85

crob611

Looked through the code and played around with it a bit. It looks great to me. Very nice work on this.

ryankeairns

Works well, just a couple of very small items:

For me, the script run at /canvas initially failed as I needed to install webpack first. It would be helpful to note that as I'm sure others will encounter this is future testing/local work.
The buttons in the flyouts have periods in the text label

clintandrewhall · 2019-10-10T16:05:20Z

@ryankeairns It's in the PR under Prerequisites, and it's in the README... is there somewhere else I should put it?

ryankeairns · 2019-10-10T16:18:29Z

@clintandrewhall my point was that the command/script fails if you don't have webpack installed. I am proposing adding a note to check that you have webpack installed first. Unfortunately, the error was not clear in this regard, it was a lucky guess to try installing webpack :)

clintandrewhall · 2019-10-10T16:39:12Z

@ryankeairns Webpack shouldn't need to be installed... it should be using the version bundled with x-pack... let me review the script.

ryankeairns

Fix for button text looks good and we've sorted out my issues with running the script.

elasticmachine · 2019-10-10T18:01:25Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: aace4b4

elasticmachine · 2019-10-10T21:57:12Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: dafa93d

src/dev/build/tasks/clean_tasks.js

spalger

LGTM

* Branding Changes * Update snapshots

elasticmachine · 2019-10-11T04:43:08Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 6faca42

* [Canvas] Embedding Workpads in other Websites (elastic#42545) * Testing for Workpad Snapshots * Rename Snapshots to Shareables; update documentation. (elastic#46513) * [canvas][shareables] Add Localization + Tweaks (elastic#46632) * Add localization + tweak naming * Fix duplicate key * Update storyshots * [shareables] Unsupported Renderer Warning (elastic#46862) * [shareables] Unsupported Renderer Warning * Update snapshots; add test * Addressing Feedback * [canvas][shareables] Simplify and complete testing (elastic#47328) * Simplify * Updates * Finishing up * A few tweaks * Fix eslint errors; how would those happen?? * Fix CI build of runtime; assorted visual tweaks * Update x-pack/legacy/plugins/canvas/shareable_runtime/test/index.ts Co-Authored-By: Spencer <[email protected]> * Addressing feedback * Remove null-loader from root package * re-add null-loader until mitigation is found * [perf] Fix unsupported renderers performance issue (elastic#47769) * [perf] Fix perf issue with unsupported renderers * Fixing snapshots * Addressing review feedback (elastic#47775) * Addressing feedback * Addressing feedback (elastic#47883) * Branding Changes (elastic#47913) * Branding Changes * Update snapshots

[Canvas] Embedding Workpads in other Websites (#42545)

bb60377

clintandrewhall mentioned this pull request Sep 20, 2019

[Feature][Canvas] Embed Workpad Snapshots in other Websites #44435

Closed

clintandrewhall changed the title ~~Feature/canvas snapshots~~ [feature][Canvas] Embed Workpad Snapshots in other Websites Sep 20, 2019

clintandrewhall force-pushed the feature/canvas-snapshots branch 2 times, most recently from 6f11a80 to 8a4902b Compare September 20, 2019 21:27

clintandrewhall commented Sep 20, 2019

View reviewed changes

clintandrewhall force-pushed the feature/canvas-snapshots branch from 8a4902b to 8981d59 Compare September 23, 2019 19:01

clintandrewhall force-pushed the feature/canvas-snapshots branch from 8981d59 to a5e2181 Compare September 23, 2019 21:55

Testing for Workpad Snapshots

a240a25

clintandrewhall force-pushed the feature/canvas-snapshots branch from a5e2181 to a240a25 Compare September 24, 2019 01:11

Merge remote-tracking branch 'elastic' into feature/canvas-snapshots

99ceaf3

Rename Snapshots to Shareables; update documentation. (#46513)

73a9b77

[canvas][shareables] Add Localization + Tweaks (#46632)

6fa5257

* Add localization + tweak naming * Fix duplicate key * Update storyshots

[perf] Fix unsupported renderers performance issue (#47769)

c647a73

* [perf] Fix perf issue with unsupported renderers * Fixing snapshots

Addressing review feedback (#47775)

a37fe85

crob611 approved these changes Oct 10, 2019

View reviewed changes

ryankeairns requested changes Oct 10, 2019

View reviewed changes

clintandrewhall added 2 commits October 10, 2019 11:26

Addressing feedback

247da14

Merge remote-tracking branch 'elastic' into feature/canvas-snapshots

aace4b4

ryankeairns self-requested a review October 10, 2019 17:17

ryankeairns approved these changes Oct 10, 2019

View reviewed changes

clintandrewhall requested a review from a team October 10, 2019 18:07

Addressing feedback (#47883)

dafa93d

spalger reviewed Oct 10, 2019

View reviewed changes

src/dev/build/tasks/clean_tasks.js Show resolved Hide resolved

spalger approved these changes Oct 10, 2019

View reviewed changes

Branding Changes (#47913)

6faca42

* Branding Changes * Update snapshots

clintandrewhall merged commit 27cbdf5 into master Oct 11, 2019

clintandrewhall deleted the feature/canvas-snapshots branch October 11, 2019 17:15

clintandrewhall mentioned this pull request Oct 11, 2019

[7.x] [feature][Canvas] Share Workpads in other Websites (#46278) #48010

Merged

This was referenced Oct 17, 2019

[Canvas] Share workpad without Kibana Chrome #32684

Closed

Canvas in embed mode without - control side bar #26249

Closed

nickpeihl mentioned this pull request Oct 23, 2023

[Canvas] Fix sharable runtime styles and remove color="ghost" where unnecessary #169313

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feature][Canvas] Share Workpads in other Websites #46278

[feature][Canvas] Share Workpads in other Websites #46278

clintandrewhall commented Sep 20, 2019 •

edited

Loading

elasticmachine commented Sep 20, 2019

elasticmachine commented Sep 20, 2019

clintandrewhall left a comment

clintandrewhall Sep 20, 2019

clintandrewhall Sep 20, 2019

elasticmachine commented Sep 20, 2019

elasticmachine commented Sep 23, 2019

elasticmachine commented Sep 23, 2019

elasticmachine commented Sep 24, 2019

elasticmachine commented Sep 25, 2019

elasticmachine commented Sep 26, 2019

elasticmachine commented Oct 10, 2019

elasticmachine commented Oct 10, 2019

crob611 left a comment

ryankeairns left a comment •

edited

Loading

clintandrewhall commented Oct 10, 2019 •

edited

Loading

ryankeairns commented Oct 10, 2019

clintandrewhall commented Oct 10, 2019

ryankeairns left a comment

elasticmachine commented Oct 10, 2019

elasticmachine commented Oct 10, 2019

spalger left a comment

elasticmachine commented Oct 11, 2019

[feature][Canvas] Share Workpads in other Websites #46278

[feature][Canvas] Share Workpads in other Websites #46278

Conversation

clintandrewhall commented Sep 20, 2019 • edited Loading

Summary

Coverage

Prerequisite

Testing

Cloud Deployment

Download a ZIP from Canvas

Test the Runtime Directly from Webpack

Run the Storybook

Run the Jest Tests and Gather Coverage

Checklist

For maintainers

elasticmachine commented Sep 20, 2019

elasticmachine commented Sep 20, 2019

💔 Build Failed

clintandrewhall left a comment

Choose a reason for hiding this comment

clintandrewhall Sep 20, 2019

Choose a reason for hiding this comment

clintandrewhall Sep 20, 2019

Choose a reason for hiding this comment

elasticmachine commented Sep 20, 2019

💔 Build Failed

elasticmachine commented Sep 23, 2019

💔 Build Failed

elasticmachine commented Sep 23, 2019

💚 Build Succeeded

elasticmachine commented Sep 24, 2019

💚 Build Succeeded

elasticmachine commented Sep 25, 2019

💚 Build Succeeded

elasticmachine commented Sep 26, 2019

💚 Build Succeeded

elasticmachine commented Oct 10, 2019

💔 Build Failed

elasticmachine commented Oct 10, 2019

💚 Build Succeeded

crob611 left a comment

Choose a reason for hiding this comment

ryankeairns left a comment • edited Loading

Choose a reason for hiding this comment

clintandrewhall commented Oct 10, 2019 • edited Loading

ryankeairns commented Oct 10, 2019

clintandrewhall commented Oct 10, 2019

ryankeairns left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 10, 2019

💚 Build Succeeded

elasticmachine commented Oct 10, 2019

💚 Build Succeeded

spalger left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 11, 2019

💚 Build Succeeded

clintandrewhall commented Sep 20, 2019 •

edited

Loading

ryankeairns left a comment •

edited

Loading

clintandrewhall commented Oct 10, 2019 •

edited

Loading