Integrate your Kibana dashboard in your Spring Boot + AngularJS application

Summary

Let´s review the process to follow in order to:

•  Provide your Spring Boot application with a very basic AngularJS interface
•  Show an already defined Kibana dashboard and interact with it.

The application for which we are going to define the user interface is called Portfolio Manager, a really simple Spring Boot application with some JPA entities (stock, position, portfolio, etc.) exposed via REST.
In order to feed the Elastic Search node from which Kibana will read, we will use Stokker (application described in past articles).

See this high-level diagram for a clearer picture of the system:

Both of them can be checked in this Git Hub repository along with the instructions to run all the components.

Expose the information using HATEOAS

Instead of using plain REST, we will use HATEOAS, which is an approach to REST that greatly eases the development of user interfaces. Basically, all entities are represented in a one-dimensional structure while components are referenced by links (instead of being embedded), for instance:

However, with HATEOAS this payload gets highly reduced (at a cost of doing one extra request per linked resource):

As you can see, there is only one level of depth, so the structure is always the same. Note also the automatic paging system (this can be plugged with most paging components so is very easy to display lists with many items).

Spring-Boot support for WebJars

At this stage we are ready to start consuming the entities stored in our database and exposed in the REST endpoints. For the sake of brevity, and as I would like to focus in this article in the integration with the Kibana dashboard, I will point you to the two tutorial-articles (I and II) that I have followed. They have been written by Dave Syer, who posts often in the Spring Blog (a must read).

Integrate a Kibana dashboard

In a previous article, we discussed on how can we represent the information indexed in ElasticSearch by using Kibana. However, we needed to access Kibana as a completely separated application and that is not entirely comfortable. One possible workaround is to create an Iframe and interact with it.

Note: The dashboard with the corresponding visualizations and indexes should be created in Kibana beforehand. If this is a problem, you may use the _dashboard REST API in order to create it automatically from your application.

First you should export your Kibana dashboard. Kibana offers you an URL with all the parameters that define the dashboard:


We will use this URL to modify the Kibana dashboard from our AngularJS application. Basically, what we can change is:

• The time filter: As you can see the "quick mode" is enabled, allowing to choose easy relative time frames (last year, last month, etc.)
• The filter query: In this case '*' is selected, returning all values for all stocks. We can replace this by our desired stocks to see them more in detail.

In order to accomplish this, introduce in the HTML an iFrame and two combo boxes as shown here:

Then, in the controller code, modify the URL according to your needs (we will focus in the updateIFrame()) function:


Of course this is easier to see if you see the actual code running. To do so, access the application, log in using the default "user" and "password" (I´d like to add OAuth2 and log to some authentication service like GitHub later on) and browse the stocks managed by the system.

Then, click on the first column (showing the stock ticker) and you will access the detail screen:

Disclaimer: As you can see there is a lot of boilerplate JavaScript code to make this work properly.
Moreover, some basic functionality like specific date ranges or display of multiple stocks is missing, but that is because in incoming Kibana releases (4.2, which works only with ElasticSearch 2.0) automatic filters are added, effectively fixing this.
Also, we will have the possibility of having the query bar exported along with your dashboard, enabling you to perform even more complex queries at runtime.

As usual you can find the code in this GitHub repository. Feedback is always welcome!

Related articles

1. Integrate your Spring Boot application with ElasticSearch
2. Represent and search your data with Kibana