Converting React JS website to Kibana plugin

Elastic Stack Kibana
1

I have developed a small dashboard and website in React JS.
I want to insert it as a plugin into Kibana. I have some queries regarding the same. They are:

  1. Can I convert a website to a plugin? Or should I start coding in Kibana plugin from scratch and implement the functionalities in my website?
  2. How do I proceed?
  3. Does Kibana plugin support React JS or should I re-write the code in Angular JS?
  4. Can I convert a website into a plugin? If yes, how?
  5. Do I need to clone the Kibana source code and modify the same to add in plugin?
2

Hi

Can anyone provide insight on this topic?

I am completely new to ELK.

3

Hello! You can definitely use React in Kibana - we use it heavily and have migrated away from Angular.

I'd recommend reading this page in the docs:

One of the things to notice is that a 3rd party plugin (which you want to build) must be made against a specific stack version and if you want it to work on a newer one it may have to updated.

A 3rd party plugin that was updated recently is GitHub - pjhampton/kibana-prometheus-exporter: Prometheus metrics for Kibana

You'd develop this inside the Kibana code base so that you can leverage the types.

1 Like
4

Hi Jean,

Thanks for the reply

So I need to clone the Kibana repo and make changes in the same right?
And should I also have Elasticsearch and Logstash configured on the same system, and then run Kibana locally?

5

I think most of the steps are outlined here: External plugin development | Kibana Guide [8.3] | Elastic

You'll place your plugin inside of plugins top level directory then run Kibana as a developer to iteratively build out your plugin.

You'll need Elasticsearch running, but this is done easily once you have the Kibana repo with yarn es snapshot. See kibana/CONTRIBUTING.md at a0cb2608fbc5bed92b290559146c787f158aee7d · elastic/kibana · GitHub.

1 Like
6
  1. I cloned the kibana git hub repo
  2. yarn kbn bootstrap ----> was succesfull

The next step as per the documentation, (Getting started | Kibana Guide [master] | Elastic)
3. yarn es snapshot ---- > error

[2022-08-15T09:42:45,344][ERROR][o.e.b.Elasticsearch      ] [localhost.localdomain] fatal exception while booting Elasticsearch
java.lang.RuntimeException: can not run elasticsearch as root
	at org.elasticsearch.bootstrap.Elasticsearch.initializeNatives(Elasticsearch.java:260) ~[elasticsearch-8.5.0-SNAPSHOT.jar:?]
	at org.elasticsearch.bootstrap.Elasticsearch.initPhase2(Elasticsearch.java:166) ~[elasticsearch-8.5.0-SNAPSHOT.jar:?]
	at org.elasticsearch.bootstrap.Elasticsearch.main(Elasticsearch.java:66) ~[elasticsearch-8.5.0-SNAPSHOT.jar:?]

I also have another instance of ES service running.
So rather than using yarn es snapshot, I tried connect my kibana to that running instance of ES by making necessary changes in kibana.yml (server.port, server.host, elasticsearch.host).

Then did yarn start --allow-root in kibana folder.

It doesnt give any error... but takes a loooooooot of time and then seeems to get stuck or fetch somethings sometimes. It has never showed that the service is running in :

7

Hi @Sheereen I'm sorry to hear you're running into issues.

Is it possible for you to open a terminal as a non-root user and then run yarn es snapshot and yarn start? Elasticsearch restricts itself from being able to run as the root user.

Building Kibana for the first time can take a while! It has to build bundles of all the plugins. One option, if you are not using or depending on x-pack plugins (like security) you can run yarn start --oss which only builds OSS plugins.

1 Like
8

Hi,

Thanks for the reply.

I am trying as a non-root user now... after giving permissions to the folder in /root

But the commands are taking quite some time... doing yarn kbn bootstrap now.... it has been going on for almost 30 mins now

Is there any workaround to speed it up?

9

And... rather than using yarn es snapshot,

can I connect kibana to ES service which I already have running?... by making corresponding changes in kibana.yml file

10

Hi

I just created a demo HelloWorld plugin to know how things work. Thanks to that I can now understand your comment better :smile:

So... I have to develop the plugin inside the kibana code itself right... inside plugins directory

Because while developing the helloworld plugin... I found that it differs from writing a normal HelloWorld application in ReactJS.
The binding of functions to this keyword, css , etc...

So... I think the solution is to code my website from scratch inside the kibana code repo. Please correct me if I'm wrong.

Thanks

11

Kibana Plugin API | Kibana Guide [master] | Elastic.

12

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