Inject front end code into Discover from custom plugin

It is possible to add custom functionality to kibana 5 discover within a custom plugin?
I want to add new buttons in the table view and add logic for that button.

Hi Cosmin,

Currently, what you could do via a custom plugin, is to add a new tab for each of the rows in the Discover table. So, in addition to the Table and JSON tabs, you would be able to introduce a third tab where you could put in whatever UI you want.

I know that may not be ideal UX but if it's something you want to explore, take a look at the code in this core plugin that adds the Table and JSON tabs, as an example: https://github.com/elastic/kibana/tree/master/src/core_plugins/kbn_doc_views

Cheers,

Shaunak

Hello Shaunak,

I've been trying to do what you said and it worked fine, until I needed an external module packed with useful services for my plugin. Is there any way to inject custom NPM modules in a docView plugin (e.g.: angular-cookies)?

Thank you,
Alin

Hi @algheorghe,

I haven't tried this myself but have you tried npm installing your dependencies as part of your plugin's package.json, and then importing any modules from those dependencies in your plugin code? I think Kibana will bundle those and make those available to your plugin.

Shaunak

Yes, I did but it doesn't work. I will give you more context:

I am trying to write a docView plugin and I have successfully made my own dummy plugin based on your indications above. The problem I encountered was when I tried to import my own NPM modules which are actually Angular modules. For example, I have a NPM module which contains an Angular module which contains a service that makes http requests to some third-party. Until now, I wrote visTypes plugins and it worked fine since I used uiModules and added the Angular modules to my module dependency, but now it seems I don't have this possibility anymore. I tried to create a module with uiModules and create my docView directive there, but I received an Angular error that states "Unknown provider: $tooltipProvider".

I hope everything is clear now,
Alin

I'm thinking about doing a similar type of injection into the Discover plugin. Looking at this code you linked to, it seems to just export a docViews into the uiExports. I'm not familiar with that type https://www.elastic.co/guide/en/kibana/current/development-uiexports.html says that it registers with the doc_views registry.

I can wrap my head around hacks, visTypes, and app, but the others are somewhat unclear. If this doc viewer registers with doc_views registry, would we have to mess with the Discover code directly to add this view as a new tab?

I'm trying to have little to no change within that codebase as much as possible. I was initially planning on doing a hack that would search out the specific selectors within Discover and inject a bit of HTML. That way no direct change to Discover is needed.

Could you direct me to some more documentation or a bit of source code around how you would use this doc_views thing?

Thanks

Hello Chris,

As Shaunak pointed out, the link for the source code of where this type of plugin is used is: https://github.com/elastic/kibana/tree/master/src/core_plugins/kbn_doc_views

There you can see how the Table and JSON docViews are registered. For start, you can copy-paste the code from one of them into a separate plugin folder and see how it works. From there on, you can make any change you want. It doesn't involve changing anything in the Kibana code and is good to be like that. The directive you register have access to the hole document/event/object and you can make any type of visualisation you would like.

I hope this helps,
Alin

Ah so what I gather is that by having registered a "document view" type of plugin, it'll automatically appear as a tab in Discover.

I assume other plugins also use those types as well. Pretty awesome!

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