Web Components in Kibana or Plugins

Elastic Stack Kibana
1

Hi, I was exploring the potential of using a web component, specifically a custom element written via Angular Elements, into Kibana, but am having a difficult time determining where to inject the produced javascript.

I'm currently looking at/using Kibana 5.6 and the only thing I've been able to come up with that even gets me remotely close is hacking up src/ui/views/ui_app.jade but.... well, yuck.

Can anyone provide a recommended approach for this?

Thanks for any help.

2

Kibana does support plugins that can do things like inject custom elements or visualization types, I recommend using a newer version of the stack though, and trying out the kibana plugin generator to get started.

3

Yeah, we're looking at upgrading into 6.x.x at some point, but unfortunately are stuck at 5.6 for now.

We have several plugins and visualization enhancements, but I'm struggling to get the custom element Javascript injected from within a plugin at this point. Maybe I'm just doing or missing something silly.

4

Hmm, how are you trying to register your custom element from your plugin? You should just be able to import the code from your custom element and register it with customElements.define() I would expect.

5

With the Angular Elements setup it actually just ends up spitting out a Javascript file that includes the registration of the element with the browser, with the idea being the file gets included as a script to be loaded in index.html.

So I guess I was looking for the best way to arbitrarily load a Javascript file in a script tag or something with Kibana, which eventually led me to ui_app.jade. That was after trying to load it with import or require in one of the plugin files but with no success there. I was suspecting it had something to do with the file not actually getting the element registered soon enough, but I'm not sure.

6

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