Angular 2 based Kibana Plugin

[ranjeet8082]

Hi
Currently, I am developing kibana plugins and we have a angular2 based application that i am asked to develop as plugin. Is it possible to use angular 2 based kibana plugin or would i have to downgrade existing angular 2 application to angular 1.x ?

Note : I am currently using Es version 2.3 & kibana version 4.3.0.

Best Regards
Ranjeet

[Kikketer (Chris Weed)]

I haven't checked but there may be a way to transpile Angular 2 into Angular 1.4 (what Kibana lives in). And if such a thing exists, then you would want to alter a build process in your plugin to transpile the Angular 2 into Angular 1.4 THEN run through the typical Kibana build procedures.

The other way would be to create a secondary build procedure within Kibana itself to compile and optimize your Angular 2 plugin separate from Kibana. In the end it's all vanilla JS anyway.

I would recommend just writing the plugin in Angular 1.4, it'll save you a ton of headaches. And in the case of option 2 it'll actually save the size of the plugin (imagine having all of the bloat of Angular 2 just for one plugin).

[spalger (Spencer Alger)]

You should be able to use any framework to build isolated apps in Kibana. We use React to build parts of the monitoring application for instance. That said, it's not always a smooth process and you probably won't be able to integrate with other Kibana applications unless you use angular 1.4.

[tarun_kumar]

Hi @spalger and @Kikketer , have you came across such kibana visualization plugin that is done is angular 2 and does things like transpiling or other way around?

[spalger (Spencer Alger)]

I have not

[Kikketer (Chris Weed)]

No, and I wouldn't waste the time. It's not any different than asking "Can I write a ReactJS plugin for use in your Angular 1.x application". It's just not viable or worthwhile.

Angular 2 is far too different from Angular 1 to believe that they could be cross used. I'd stick with the language that Elastic is using even if you like others better

[tarun_kumar]

Yes @Kikketer
Thanks for your reply. That's what we did as well.
Currently, would you mind helping me further on my below queries as I need to workout below problems :-

How to acess search bar query string in kibana custom plugin

Hi @tarun_kumar, About the search bar, may I ask why you are unable to simply use the filter bar itself? It is also capable of doing text searches. Providing two search/filter bars on the same page might be a confusing UX for the user. To extract the date range filter applied to the dashboard, look into using the timefilter Angular service provided by Kibana. Once injected, you can call its getBounds method to get an object with min and max properties. You can see an example usage here.

Gridster resize listener

Thanks a lot @thomasneirynck. I am not able to use resize_checker lib and it returns me a function as - var ResizeChecker = Private(require('ui/vislib/lib/resize_checker')); console.log(ResizeChecker) prints me a function which contains verious functions. I am bit new to javascripting , so how do invoke function like read() from this ResizeChecker instance? I tried console.log(ResizeChecker.prototype.read()); which returns TypeError: Cannot read property '0' of undefined