Display a visualization in an App Plugin

Elastic Stack Kibana
1

So I have an app plugin where I would like to show a visualization. After I type it, it seems very simple but I'm not even really sure where to start.

More detailed I'm trying to create a plugin that will have a filtered list of applications a user cares about. In that list I would like to show a visualization for that app. It could be a specific visualization ID or maybe a generic visualization with a custom search query applied to it. Either way I'd like the visualization to appear within the app and as "native" as possible (no iframes?)

Example: (go ascii art!)

-----------------------------------------------
App name       |  /\    |  Your app is Green!
               | /  \/\ |
-----------------------------------------------
2

Best way to start would be here:
https://www.elastic.co/guide/en/kibana/current/development-plugin-resources.html
https://www.elastic.co/elasticon/conf/2016/sf/how-to-build-your-own-kibana-plugins

There's a lot of reading material there and I really recommend Tim Roes series of blog posts about building a Kibana plugin(it's linked in the first page I've pasted here).

3

Thanks but the blog post is a starting point and is for version 4. I know how to create some app plugins, but I'm looking for a way to show a visualization within an app (not create a new visualization). I'll keep reading the blog to see if there's anything there to inspire, but it's hard to work through when it's talking v4 the whole time.

The "how to build your own kibana plugins" is another good starting point, again I'm asking about the next level. Also this video is super annoying since you basically watch his face while he points at a screen you can't see and says "this should be here, do this here, etc"

Right now I'm just using iFrame embedded things, it seems to work ok except maybe the slightly annoying loader screen within the frames.

4

The code isn't that different between the 4 and 5 from the plugin side. As for the iFrame, we are actually working on removing the loading screen.
I'll also ask around about your specific use case about showing a visualization directly in an app.

5

Awesome.
I ran into a critical issue when using an iFrame, I used the "embed" link style iframe url and then realized that when I attempted to go back to visualization link, it would think that the iframe I visited is the last place I visited and would show that.

So going from my plugin to the visualization plugin would show the embedded version of the visualization with no menu or anything at all to get back to "kibana" that people know. This might even be viable to raise as a bug:
"When a user last visits an embedded visualization, don't assume that's where they left off in Visualize"

6

I checked out how the dashboard handles rendering visualizations. It seems to use the <visualize> directive.
However when I attempted to use the visualize directive it refused to work:

index.js:

// Made sure to include "kibana" as a dependency in the index.js file (not sure exactly what this does)
  return new kibana.Plugin({
    require: ['kibana', 'elasticsearch'],
...

my routes.js for the frontend (the "main" described by the above index.js file):

// Tried to include the 'kibana/directive' module but this throws an error
uiModules
  .get('app/datahub_apps_plugin', [
    'kibana/courier',
    'kibana/index_patterns',
    'kibana/directive'
  ]);

template.html

// The template silently fails as a typical Angular directive would if it's not found
<visualize vis="getAppVis(app)">Loading Visualization...</visualize>

I also snagged the massive definition of the vis. I can keep reverse engineering it but it would be nice if there was some sort of documentation around this directive. Does anyone know of documentation around this pretty important directive?

7

After a full day of battling attempting to get the <visualize> directive to work, I finally gave up and attempted the iFrame bit again.
It seems the Visualize plugin works fine now as long as it's not the same session that I created the embedded version of the visualization.

For now I'll use iFrames, it's 100000% easier than the war I was having with all of these dependencies and such. In fact at one point I was tempted to just bring in D3 or some other library to draw the graph myself (ludicrous).

I think we need some solid documentation or training available for using the internal bits. I'd be game to attend "plugin training" :slight_smile:

8

hi Chris, I am very expected your sharings about what you do on kibana.

9

Here's a sample screenshot of what I'm attempting to do:

Screen Shot 2017-04-14 at 10.55.20 AM.png911×245 16.8 KB

It's an "apps" plugin that allows users to see only the apps that apply to them (via security/groups). They then get basic information immediately, like the health of the app (green/yellow/red). The graph here is just an example.

The real reason I made the plugin was to help people learn how to use Discover and other components. They can use the links on the right to get a start with the query language and even have dashboards displayed with their app name automatically applied.

There's some serious potential with this critter. I now have about 6 iFrames on the page however with this, since I'm able to view 6 applications. It really janks the crap out of the browser as it tries to load that much data at the same time. A "view details" button may be needed if people admin many apps (which is rare).

10

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.