add API to embed visualizations by ppisljar · Pull Request #14292 · elastic/kibana

ppisljar · 2017-10-04T13:36:33Z

Release Note: visualize loader helps with inserting visualizations into DOM elements

use the time range provided to visualize with timeRange attribute
currently date_histogram would correctly use that range, but courier still defaults to timefilter getActiveBounds

also removing the ability to provide saved-id to visualize as it didn't work properly

also adding a helper function to inject visualize into DOM element

ppisljar · 2017-10-04T13:37:42Z

samples to play with:

plugins.zip

unzip to plugins folder to test, two new apps will appear in kibana

test visualize (uses <visualize> directive and the loader function)
test visualization (uses <visualization> directive) needs refactor tagcloud to use tabify responseHandler #14266 to work

thomasneirynck · 2017-10-05T04:54:26Z

The region maps and tile maps do not work, because they depend on two services that are injected with inject_vars.
https://github.com/thomasneirynck/kibana/blob/2270a6c24f5e68dcd03b3b510acbd92bd189fffd/src/core_plugins/kibana/inject_vars.js#L18-L19.

That is also what the error refers too: angular.js:14642 Error: [$injector:unpr] Unknown provider: regionmapsConfigProvider <- regionmapsConfig <- SavedVis <- visualizationDirective

I am not 100% how this works, how we can ensure these are loaded when there's a dependency from outside plugin. Perhaps @spalger, is this something that rings a bell?

thomasneirynck · 2017-10-05T05:30:15Z

I have some trouble getting the embedding working. I'm probably missing something obvious. I'll try more later. The module-API looks good though. fwiw, I'd make names a little more explicit: embedVisualizationWithId and embedVisualizationWithSavedObject.

ppisljar · 2017-10-05T13:39:46Z

thanks @thomasneirynck i updated the sample apps and renamed the loader methods, should work out of the box now.

…plete', ...)

nreese

LGTM

thomasneirynck

Nice!

I've removed the 6.0 label.

When merging, I'd also change the commit message to something more generic like "Add API to embed visualizations" or whatever

thomasneirynck · 2017-10-06T15:07:24Z

+  };
+
+  return {
+    embedVisualizationWithId: (el, savedVisualizationId, params) => {


I'd add async tag.

thomasneirynck · 2017-10-06T15:09:03Z

+      'time-range="timeRange" editor-mode="editorMode" show-spy-panel="showSpyPanel"></visualize>');
+    const visHtml = $compile(visEl)(scope);
+    container.html(visHtml);
+    return visEl;


could we return undefined instead. What's the use-case of having client have access to the element?

we need to be able to listen to renderComplete event

havidarou · 2017-10-12T18:44:36Z

Hi, I tried to test the plugins provided in the zip but, in the visualization one, I get this in the browser's console:

Error: [$injector:unpr] Unknown provider: regionmapsConfigProvider <- regionmapsConfig <- SavedVis <- visualizationDirective
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=regionmapsConfigProvider%20%3C-%20regionmapsConfig%20%3C-%20SavedVis%20%3C-%20visualizationDirective
    at commons.bundle.js?v=8467:23186
    at commons.bundle.js?v=8467:27896
    at Object.getService [as get] (commons.bundle.js?v=8467:28051)
    at commons.bundle.js?v=8467:27901
    at getService (commons.bundle.js?v=8467:28051)
    at injectionArgs (commons.bundle.js?v=8467:28076)
    at Object.invoke (commons.bundle.js?v=8467:28102)
    at instantiate (commons.bundle.js?v=8467:94102)
    at get (commons.bundle.js?v=8467:94120)
    at Private (commons.bundle.js?v=8467:94140)
(anonymous) @ commons.bundle.js?v=8467:37712
(anonymous) @ commons.bundle.js?v=8467:34172
(anonymous) @ commons.bundle.js?v=8467:31282
forEach @ commons.bundle.js?v=8467:23480
(anonymous) @ commons.bundle.js?v=8467:31266
invoke @ commons.bundle.js?v=8467:28110
enforcedReturnValue @ commons.bundle.js?v=8467:27943
invoke @ commons.bundle.js?v=8467:28110
(anonymous) @ commons.bundle.js?v=8467:27902
getService @ commons.bundle.js?v=8467:28051
addDirective @ commons.bundle.js?v=8467:33138
collectDirectives @ commons.bundle.js?v=8467:32306
compileNodes @ commons.bundle.js?v=8467:32138
compileNodes @ commons.bundle.js?v=8467:32154
compileNodes @ commons.bundle.js?v=8467:32154
compile @ commons.bundle.js?v=8467:32023
link @ commons.bundle.js?v=8467:81958
(anonymous) @ commons.bundle.js?v=8467:24455
invokeLinkFn @ commons.bundle.js?v=8467:33590
nodeLinkFn @ commons.bundle.js?v=8467:32979
compositeLinkFn @ commons.bundle.js?v=8467:32219
publicLinkFn @ commons.bundle.js?v=8467:32084
lazyCompilation @ commons.bundle.js?v=8467:32475
boundTranscludeFn @ commons.bundle.js?v=8467:32262
controllersBoundTransclude @ commons.bundle.js?v=8467:33029
update @ commons.bundle.js?v=8467:81920
$broadcast @ commons.bundle.js?v=8467:41768
(anonymous) @ commons.bundle.js?v=8467:81604
processQueue @ commons.bundle.js?v=8467:40070
(anonymous) @ commons.bundle.js?v=8467:40114
$digest @ commons.bundle.js?v=8467:41252
$apply @ commons.bundle.js?v=8467:41550
bootstrapApply @ commons.bundle.js?v=8467:25022
invoke @ commons.bundle.js?v=8467:28110
doBootstrap @ commons.bundle.js?v=8467:25020
bootstrap @ commons.bundle.js?v=8467:25040
chrome.bootstrap @ commons.bundle.js?v=8467:355
(anonymous) @ test_visualization_app.bundle.js?v=8467:66
__webpack_require__ @ commons.bundle.js?v=8467:51
webpackJsonpCallback @ commons.bundle.js?v=8467:22
(anonymous) @ test_visualization_app.bundle.js?v=8467:1

Error: Circular reference to "VisProvider" found while resolving private deps: VisProvider -> registry -> RegionMapProvider
    at instantiate (commons.bundle.js?v=8467:94096)
    at get (commons.bundle.js?v=8467:94120)
    at Private (commons.bundle.js?v=8467:94140)
    at Object.<anonymous> (test_visualization_app.bundle.js?v=8467:293383)
    at Object.invoke (commons.bundle.js?v=8467:28110)
    at $controllerInit (commons.bundle.js?v=8467:34030)
    at nodeLinkFn (commons.bundle.js?v=8467:32910)
    at compositeLinkFn (commons.bundle.js?v=8467:32219)
    at publicLinkFn (commons.bundle.js?v=8467:32084)
    at Object.link (commons.bundle.js?v=8467:81970) "<div class="application ng-scope" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view="">"

The branch I'm using is the 6.0, pulled just two hours ago.

Regards.

thomasneirynck · 2017-10-12T20:14:34Z

@havidarou those plugins are stale, and were part of the work-in-progress for this PR, not really meant for consumption.

There's also a follow up to this issue here as well, so this component is still being added to here: #14404

When it comes to reusing visualizations, we are preparing a blog-post and additional documentation. We expect this to be out fairly soon, around the 6.0 release time frame.

havidarou · 2017-10-12T22:00:58Z

@thomasneirynck ok, thanks.

Where will you publish the blog-post?

Regards.

ppisljar added the WIP Work in progress label Oct 4, 2017

ppisljar requested review from spalger and thomasneirynck October 4, 2017 13:36

thomasneirynck self-assigned this Oct 4, 2017

thomasneirynck requested review from thomasneirynck and removed request for spalger and thomasneirynck October 4, 2017 13:51

thomasneirynck removed their assignment Oct 4, 2017

ppisljar added review and removed WIP Work in progress labels Oct 4, 2017

ppisljar requested a review from nreese October 4, 2017 15:28

ppisljar added the Feature:Visualizations Generic visualization features (in case no more specific feature label is available) label Oct 4, 2017

ppisljar force-pushed the fix/visualizeTimeRange branch from fdbc3e8 to 60c729d Compare October 4, 2017 17:57

ppisljar added 8 commits October 6, 2017 10:19

use the time range provided to visualize directive

3e3da0b

adding loader function

70e5c23

fixing for timelion and tsvb

50379ae

loader function should return the element so you can el.on('renderCom…

7914197

…plete', ...)

allow to pass appState and uiState to loader function

065c4eb

allowing loader function to work with id as well as saved object

655cd24

renaming methods on loader object

29d11aa

return a jquery object so we can catch the jquery renderComplete event

d188026

ppisljar force-pushed the fix/visualizeTimeRange branch from f406fdb to d188026 Compare October 6, 2017 08:25

ppisljar added v6.0.0 v6.1.0 v7.0.0 labels Oct 6, 2017

nreese approved these changes Oct 6, 2017

View reviewed changes

thomasneirynck removed the v6.0.0 label Oct 6, 2017

thomasneirynck approved these changes Oct 6, 2017

View reviewed changes

adding async

10212ea

ppisljar merged commit 5e2bee7 into elastic:master Oct 8, 2017

ppisljar added a commit to ppisljar/kibana that referenced this pull request Oct 8, 2017

Add API to embed visualizations (elastic#14292)

1cf8fc5

ppisljar added a commit to ppisljar/kibana that referenced this pull request Oct 8, 2017

Add API to embed visualizations (elastic#14292)

e1163be

ppisljar added a commit that referenced this pull request Oct 10, 2017

Add API to embed visualizations (#14292) (#14373)

75dcbf1

ppisljar added a commit that referenced this pull request Oct 10, 2017

Add API to embed visualizations (#14292) (#14372)

4a18f3c

ppisljar added release_note:enhancement and removed review labels Nov 22, 2017

ppisljar changed the title ~~use the time range provided to visualize directive~~ add API to embed visualizations Nov 22, 2017

patrykkopycinski pushed a commit to patrykkopycinski/kibana that referenced this pull request May 6, 2026

Add API to embed visualizations (elastic#14292)

d43086d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add API to embed visualizations#14292

add API to embed visualizations#14292
ppisljar merged 9 commits into
elastic:masterfrom
ppisljar:fix/visualizeTimeRange

ppisljar commented Oct 4, 2017 •

edited

Loading

Uh oh!

ppisljar commented Oct 4, 2017 •

edited

Loading

Uh oh!

thomasneirynck commented Oct 5, 2017 •

edited

Loading

Uh oh!

thomasneirynck commented Oct 5, 2017

Uh oh!

ppisljar commented Oct 5, 2017

Uh oh!

nreese left a comment

Uh oh!

thomasneirynck left a comment

Uh oh!

thomasneirynck Oct 6, 2017

Uh oh!

thomasneirynck Oct 6, 2017

Uh oh!

ppisljar Oct 8, 2017

Uh oh!

havidarou commented Oct 12, 2017

Uh oh!

thomasneirynck commented Oct 12, 2017

Uh oh!

havidarou commented Oct 12, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

ppisljar commented Oct 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ppisljar commented Oct 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thomasneirynck commented Oct 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thomasneirynck commented Oct 5, 2017

Uh oh!

ppisljar commented Oct 5, 2017

Uh oh!

nreese left a comment

Choose a reason for hiding this comment

Uh oh!

thomasneirynck left a comment

Choose a reason for hiding this comment

Uh oh!

thomasneirynck Oct 6, 2017

Choose a reason for hiding this comment

Uh oh!

thomasneirynck Oct 6, 2017

Choose a reason for hiding this comment

Uh oh!

ppisljar Oct 8, 2017

Choose a reason for hiding this comment

Uh oh!

havidarou commented Oct 12, 2017

Uh oh!

thomasneirynck commented Oct 12, 2017

Uh oh!

havidarou commented Oct 12, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ppisljar commented Oct 4, 2017 •

edited

Loading

ppisljar commented Oct 4, 2017 •

edited

Loading

thomasneirynck commented Oct 5, 2017 •

edited

Loading