Kibana React plugin

Hello. We are starting to develop some kibana plugin using react + redux for client side. We need to access elasticsearch for the data. In docs I had found 2 possible ways:

  1. using elasticsearch client api for JS.
  2. regesterring (and develop) api in plugin on the server side. React client side code will use this api.

Choose the second way. What can you recommend to use for accessing api? find some http-client module or we can use recommendation from docs (use something from angular)?

I would personally recommend the first option. The Elasticsearch.js client is waht Kibana itself uses and it's properly maintained and updated.

Thank you for response. For option #1 I will need to know the correct url for elasticsearch. Of course, we can hardcode it as localhost, but it is not the best solution. So, does kibana have some options to store configuration for plugins? May be in ".kibana" index?

You get the url for elastisearch from the kibana.yml file. That's where it's taken from in normal Kibana use.

I know, that in this file I can get url to elastic search, but I want to know if it possible to get url from code, from some JS object, that can exists in plugin... or may be link to documentation where I can read it. Thank you. In general case - name and path to config file can differ...

I find the solution. It will be helpful (maybe) for other developers.
On the server side we have 'server' object. This object has methods to get config params. In my issue it is - server.config().get('elasticsearch.url');
Then, I wrap this method by plugin API function and it make restful service to get config param on the client side. This service can be parameterized by config property name and thus we can read any properties on the client side.

Try to use elasticsearch.js on client side. Get the CORS error.
So, how I can configure the dev environment to enable cors supporting on elasticsearch side? As I see, the configuration is generated on the fly in some tmp folders. Or it is impossible to say dev environment - 'I want to enable cors :)'

Hi, new here - like brand new. I am wanting to also develop Kibana plugins in react. I don't know anything about accessing the ElasticSearch api yet, but I was wondering if there are any solid examples out there that use either approach. Can't find anything from directly googling. Appreciate it.

Hello. I can't find too any complete examples of using elasticsearch api. But it is not hard to implement them by self. In both cases you need to use elasticsearch client for javascript. Documentation id enough for implementing.
In first case, you also need to implement RESST API, which can be accessible from kibana server. And you plugin/application will need to use this API. Simple HTTP requests.
In the second case, you will need to get elasticsearch server url for creating connection to it. It can be implemented via one REST call to kibana server (so, you will need implement at least one API call on the server side of kibana plugin). And then, use elasticsearch js client invoke elasticsearch for any things you need. Also, you need to enable CORS on the elsticsearch server. I can't find any way to set it up. So, workaround - not start elasticsearch server as it mentioned in doc, but start it directrly. Since, starting via yarn reset any configuration in the server.

The plugin development documentation is not maintained and this is quite a problem for people who want to develop plugins for Kibana. Having somewhat of even a guideline available would make a huge difference in expanding the Kibana environment.
I have put together a small understanding of this subject that I seem to have gathered. Please feel free to pitch in or correct me if I am wrong in any of the points mentioned.

1 Like

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