Using Kibana Directives in Your Plugin

Elastic Stack Kibana
1

I'm attempting to use the kbnTopNav directive in my plugin but so far have come up empty.

In my index.js file of the plugin (root of the plugin), I have this:

require: ['kibana', 'elasticsearch'],

I'm not entirely sure what that does, but it doesn't seem to hurt. In my /public/app.js file (the file that the app.main is pointing to) I have this:

var app = uiModules.get('app/myapp', ['kibana']);

I then attach the controller to this app variable and have a template:

uiRoutes.enable();
uiRoutes
  .when('/', {
    template: template,
    reloadOnSearch: false
  });

The template has the very simple <kbn-top-nav> element:

<kbn-top-nav name="myappname" config="someconfig"></kbn-top-nav>

It's not rendering anything, is there something I'm missing with using directives from another module (kibana/kbnTopNav?). Has anyone had any luck reusing directives from the kibana module?

2

Gunna move this to the KB category, the Dev one is a little quiet :frowning:

3

Thank you, I'm still trying to figure out the hotspot of plugin support and resources. Mostly been trial and error-ing this whole time.

I'm currently walking through other plugins to see if they have used any built-in directives, but so far I've come up short. The only app plugin that's listed is one that I'm rewriting (and the existing one doesn't even use the built-in stylesheets of Kibana).

4

Solved it (mostly):
https://www.elastic.co/guide/en/kibana/current/development-modules.html

I just added import 'ui/autoload/all'; to my /public/app.js file and it appears to be working now. I'm going to continue working through it and see if I can narrow down what specific ones I need. ui/autoload/directives didn't work at least at first.

5

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