DEV Community: Panos Sideris

Custom Health Aggregator in Spring Boot 2

Panos Sideris — Sat, 26 Jun 2021 23:35:37 +0000

In this article, we are going to explain how to set up and customise a health endpoint in a Spring Boot application via Spring Actuator.

Getting started with Spring Boot Actuator
Health Indicator vs Health Aggregator
Setting up Spring Actuator
Advanced Configuration
Additional Resources

The code for this demo could be found here:

psideris89 / spring-health-aggregator-demo

Spring boot application that uses Spring Actuator and demonstrates a custom health aggregator

To upgrade gradle version to 7.1

$ ./gradlew wrapper --gradle-version=7.1 --distribution-type=bin

View on GitHub

Getting started with Spring Boot Actuator

Spring Boot Actuator is part of the Spring ecosystem and provides a plethora of functionalities, including the ability to scan the health of your application. This is often called a health endpoint.

Health Indicator vs Health Aggregator

Health Indicator is a component that returns a health status (UP, DOWN, etc). This component could perform an action, like calling an API or querying a database or service.

Health Aggregator, as the name implies, processes the various Health Status (of the Health Indicators) and produces a general Health Status for the application.

Setting up Spring Actuator

Create a Spring Boot project

For the demo let's create a Spring Boot app with the following specs:

Project: Gradle
Language: Java 16
Spring Boot: 2.5.2 (or latest)
Packaging: jar
Dependencies: Spring Web, Spring Boot Actuator

Press Generate which will download a zip file and unzip the file in the directory of your preference.

Run the application

To run the application you can either use your IDE (if you use Intellij and Java 16 make sure to update to the latest version) or you can use your terminal and the Gradle Wrapper (gradlew).

Navigate to the directory you extracted the zip and run from the terminal



$ ./gradlew bootRun

Just by adding the Actuator in the project dependencies you enable the health auditing of your app which is accessible from /actuator/health.

As we are running the application locally we need to access http://localhost:8080/actuator/health and the status should be UP.

Create a Health Indicator

You have the option to either extent the AbstractHealthIndicator or implement the HealthIndicator. In our case we choose the former.

Make sure you annotate your Health Indicator with @Component (you could use other Stereotype annotations or @Configuration if you prefer) in order for Spring to create a bean.

The following Indicator is creating a random number and conditionally returns status UP or DOWN with the error details.



package com.psideris.springhealthaggregatordemo;

import org.springframework.boot.actuate.health.AbstractHealthIndicator;
import org.springframework.boot.actuate.health.Health;
import org.springframework.stereotype.Component;

import java.util.Random;

@Component
public class NumberAppHealthIndicator extends AbstractHealthIndicator {

    @Override
    protected void doHealthCheck(Health.Builder builder) {
        int number = getRandomNumber();

        if (number > 5) {
            builder.up().build();
        } else {
            builder.down().withDetail("error", "Number was less than 5").build();
        }
    }

    private int getRandomNumber() {
        return new Random().ints(1, 10).findFirst().orElseThrow(() -> new RuntimeException("Failed to generate random number"));
    }
}

Bear in mind that you can create as many Health Indicators as you want but Spring checks the health of natively supported services (e.g. SQL DBs, mongoDB, elasticsearch, etc) without requiring any customisation, just adding the Actuator dependency.

Create a Health Aggregator

For the heath aggregator we are going to implement the
StatusAggregator.

As we mentioned before the aggregator accumulates the health status from multiple Indicators, which means you can define the logic to indicate when the app is up or down.



package com.psideris.springhealthaggregatordemo;

import org.springframework.boot.actuate.health.Status;
import org.springframework.boot.actuate.health.StatusAggregator;
import org.springframework.stereotype.Component;

import java.util.Set;

@Component
public class AppHealthAggregator implements StatusAggregator {

    @Override
    public Status getAggregateStatus(Set<Status> statuses) {
        boolean statusUp = statuses.stream().allMatch(s -> s.equals(Status.UP));

        return statusUp ? Status.UP : Status.DOWN;
    }
}

Advanced configuration

Show details in the health status

To display additional details you can add in the application.properties or application.yml file.



// application.yml

management:
  endpoint:
    health:
      show-details: always



// application.properties

management.endpoint.health.show-details=always

The health endpoint should now include the following details.

Configure the health URL

To configure the url which exposes the health status you can add the following properties in the application.properties or application.yml file.



// application.yml

management:
  endpoints:
    web:
      base-path: /api
      path-mapping:
        health: health-status



// application.properties

management.endpoints.web.base-path=/api
management.endpoints.web.path-mapping.health=health-status

Now the url that we need to access is /api/health-status.

Accessing the Status of individual Health Indicator

By default when creating a Health Indicator it is being exposed in the URL that matches its name (Spring removes the HealthIndicator suffix from the url).

If you provide a value inside the annotation then the URL changes to reflect that. In our case the new one is http://localhost:8080/actuator/health/numberService.



@Component("numberService")

public class NumberAppHealthIndicator extends AbstractHealthIndicator {

<span class="o">...</span>



}

Additional Resources

You can find more about Spring Boot Actuator in the official documentation

https://docs.spring.io/spring-boot/docs/current/reference/html/actuator.html

Java Records in Spring Boot Rest API

Panos Sideris — Fri, 17 Apr 2020 21:31:55 +0000

Introduction to Records

Java 14 was released in March 2020 and one of the features that drew our attention was Records. Let's start by explaining what a Record is and then proceed with the potential use cases.

Note: Java 17 is about to be released (September 2021) which is the first LTS version with records support.

From Openjdk JEP359:

Records provide a compact syntax for declaring classes which are transparent holders for shallowly immutable data.

This feature attempts to reduce the amount of boilerplate code in our applications as you only have to define the fields (equivalent to class fields). Records provide a public constructor (with all arguments), read methods for each field (equivalent to getters) and the implementation of hashCode, equals and toString methods.

This is how a Record and Class, for the same data structure, would look like.

Record



public record Person(String name, int age) {
}

Class



public class Person {
  private String name;
  private int age;

  public Person(String name, int age) {
    ...
  }

  public boolean equals(Object o) {
    ...
  }

  public int hashCode() {
    ...
  }

  public String toString() {
    ...
  }
}

As you will notice this is significantly less code given the class' utility.

Usages

So where could the Records be used then? One potential application is in rest controllers. Sometimes it can be quite frustrating having to create a class only to be used as a return type or a request body in a rest controller.

In the next section we are going to demonstrate how to build a spring boot rest api with Records.

Demo

The code for this demo could be found here:

psideris89 / java-records-demo

Demo spring boot rest api for java 14 records demonstration

Step 1: Create Spring Boot app

You can use spring initialiser (https://start.spring.io/) to create a spring boot project. The configuration for our demo is:

Project: Gradle
Language: Java 16
Spring Boot: 2.5.4
Name: movies-demo
Dependencies: Spring Web

Everything else could be left with the default value.

Step 2: Project configuration

If you are using an IDE you need to use jdk 16. For Intellij set the project sdk to 16 and the project language level to 16.

Legacy configuration (java 14)

If you are using java 16 you can skip this section.

To use Records with jdk 14 you have to enable the preview features. You might be prompted to accept some terms if you want to use the preview features, so click accept and proceed.

In addition add the following configuration in build.gradle. There is similar configuration for maven.



compileJava {
    options.compilerArgs += ["--enable-preview"]
}

test {
    jvmArgs(['--enable-preview'])
}

Step 3: Create Rest Controller

Before we create the rest controller we need to define the Records.

Director



public record Director(String name, String surname) {
}

Movie



public record Movie(String id, Director director, Boolean released) {
}

Next create a rest controller with 3 endpoints, one to retrieve all the movies, another to retrieve a movie by id and the last one to add a movie (we don't actually save anything as this is to demonstrate deserialisation).



@RestController
public class MoviesController {

    private List<Movie> movies = List.of(
            new Movie("1", new Director("John", "Wick"), true),
            new Movie("2", new Director("Mary", "Poppins"), false),
            new Movie("3", new Director("Jack", "Sparrow"), true),
            new Movie("4", null, false));

    @GetMapping("/movies")
    public List<Movie> getMovies() {
        return movies;
    }

    @GetMapping("/movies/{id}")
    public Movie getMovie(@PathVariable String id) {
        return movies
                .stream()
                .filter(s -> s.id().equals(id))
                .findFirst()
                .orElseThrow(() -> new RuntimeException("Not found"));
    }

    @PostMapping("/movies")
    public Movie addMovie(@RequestBody Movie movie) {
        // Save the movie, be careful as List.of() is immutable
        return movie;
    }
}

Step 4: Configure Jackson for Serialisation / Deserialisation

Start the application and call the first endpoint, localhost:8080/movies. The following error is produced as the objects cannot be serialised.

The solution to that is to use Jackson annotations and in specific JsonProperty annotation.



public record Director(@JsonProperty("name")String name, @JsonProperty("surname")String surname) {
}

public record Movie(@JsonProperty("id") String id, @JsonProperty("director") Director director, @JsonProperty("released") Boolean released) {
}

Restart the application and you will be able to retrieve the list of movies.

The getMovie endpoint (localhost:8080/movies/1) uses the id() method which is provided by the Record. That way we can compare the id of each movie with the id provided in the api call.

Finally the addMovie endpoint is just a mock endpoint but it proves that deserialisation is also working. To test that you need to do a POST request to localhost:8080/movies with a valid body.



{

    "id": "10",

    "director": {

        "name": "Jim",

        "surname": "White"

    },

    "released": false

}

Conclusion

What could Records mean for the future of java? Maybe they are not meant to be used that way, but in general that feature is something that a lot of java developers anticipated. The fact that Records are immutable is adding a massive value. All the above in combination with the reduction of the boilerplate code make Records a promising feature.

Internationalisation in React

Panos Sideris — Sun, 01 Mar 2020 20:18:10 +0000

Internationalisation, also referred as i18n, allows you to translate your website in multiple languages. In this demo we persist the language through the local storage. Some other popular options are, the session storage and the cookies.

Template Project
Integrate with i18next
Serve Dynamic Content
Multi-page Experience with Routing
Bonus: Tricks for Boosting the App

The code for this demo could be found here:

psideris89 / react-i18n-demo

React demo project for internationalisation (i18n)

Internationlisation in React

This is a demo application that demonstrates how to implement internationalisation (i18n) in React.

To run the application

$ npm install
$ npm start

The documentation for this demo could be found here: https://dev.to/psideris89/internationalisation-in-react-2ahl

Author Panagiotis Sideris

Twitter: @Psideris_

View on GitHub

Template Project

Let's start by creating a react application with create-react-app and navigate to the project directory.

$ npx create-react-app react-i18n-demo
$ cd react-i18n-demo

The idea is to build 4 components:

App the main component
Language drop-down for language selection
Intro displays text
Flag displays an image.

Language

For the Language component we are going to use the material-ui library and more specifically the select component which creates a drop-down.

Install material-ui/core.

$ npm install --save @material-ui/core

Create a components folder and inside it a Language folder to host the Lanugage.js

src -> components -> Language -> Language.js

import { FormControl, MenuItem, Select } from '@material-ui/core';
import React, { useState } from 'react';

const Language = () => {
  const [dropdownLang, setDropdownLang] = useState('en');

  const languageHandler = event => {
    const newLanguage = event.target.value;
    if (dropdownLang !== newLanguage) {
      setDropdownLang(newLanguage);
    }
  };

  return (
    <FormControl style={{ minWidth: 120 }}>
      <Select value={dropdownLang} onChange={languageHandler}>
        <MenuItem value="en">English</MenuItem>
        <MenuItem value="el">Ελληνικά</MenuItem>
        <MenuItem value="es">Español</MenuItem>
        <MenuItem value="it">Italiano</MenuItem>
      </Select>
    </FormControl>
  );
};

export default Language;

The selection is persisted in the state through the useState hook and the languageHandler allows us to update our selection.

Intro

Same as before create an Intro folder and inside that the Intro.js.

src -> components -> Intro -> Intro.js

import React from 'react';

const Intro = () => {
  return <h1>Welcome to React!</h1>;
};

export default Intro;

Flag

Similarly create a Flag folder and inside that the Flag.js. We also added the en.svg, which is a flag, in the same directory. Bear in mind that the name of the svg matters so please try to use the same one.

src -> components -> Flag -> Flag.js
src -> components -> Flag -> en.svg

import React from 'react';
import flagSvg from './en.svg';

const Flag = () => {
  return <img style={{ maxWidth: '50%' }} src={flagSvg} alt="flag" />;
};

export default Flag;

App

Finally we have the App which hosts all the above components.

import React from 'react';
import Intro from './components/Intro/Intro';
import Flag from './components/Flag/Flag';
import Language from './components/Language/Language';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <nav style={{ height: '60px', backgroundColor: 'rgb(253, 117, 19)' }}>
        <div
          style={{ float: 'right', marginTop: '20px', marginRight: '20px' }}
        >
          <Language />
        </div>
      </nav>
      <div style={{ marginTop: '50px' }}>
        <Intro />
      </div>
      <div style={{ display: 'inline-block', width: '500px' }}>
        <Flag />
      </div>
    </div>
  );
};

export default App;

At this point the template project is completed and you will be able to update the language from the drop-down. However, neither the message or the flag are updated, as they are hardcoded. The next step will be to integrate with i18next in order to render the content dynamically. Let's go ahead and run the application.

$ npm start

Integrate with i18next

Step 1: Create the configuration for i18next

In order to implement i18n (internationalisation) in our application we need the following libraries:

i18next
react-i18next
i18next-http-backend
i18next-browser-languagedetector

$ npm install --save i18next react-i18next i18next-http-backend i18next-browser-languagedetector

Initially we need to configure/initialise i18next. The i18next-http-backend is responsible for loading the properties from the translation files. The i18next-browser-languagedetector, as the name implies, detects the language. We will come back to this library later on, as there are some interesting features we are going to use. Finally react-18next will be used widely in our project as it allows to read and update the i18next language.

In the root directory of the application create the file i18n.js. This is the configuration of react-i18next.

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    preload: ['en'],
    load: 'languageOnly',
    fallbackLng: 'en',
    debug: true,
    lowerCaseLng: true,
    detection: {
      order: ['localStorage']
    }
  });

export default i18n;

We chose to initialise with English which is also the fallback language but you could specify another, as well as, pre-load multiple languages. Additionally we want to save the language in the local storage, hence we gave priority to that detector which is supported from the library. Bear in mind that you can have multiple detectors (even custom) and the order is descending (first will take precedence).

Note: Regarding the Backend, when a new language is set in i18next the relevant properties will be loaded. It's up to you if you want to preload more that one languages, or even not preload any. If you don't preload a language, then only if it's requested the properties will be loaded. You can view the relevant logs in the console, given that you have debug enabled.

Next import i18n.js in the index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import './i18n';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

At this point you will be able see the i18next being initialised in the console.

But how can you verify that the language is persisted with i18next? In your browser's developer console navigate to the Application (Storage if using Firefox) tab and then select Local Storage. You will see that the property i18nextLng is added there (the name can be overwritten in i18next configuration).

Step 2: Create json files to host the translation messages.

By default i18next will attempt to parse the translation.json files under the public/locales/{language}/ directories but you can overwrite that in the 18next configuration.

public/locale/en/translation.json

{
  "intro-title": "Welcome to React!"
}

Go ahead and create the files for the remaining languages.

public/locale/el/translation.json
public/locale/es/translation.json
public/locale/it/translation.json

Serve Dynamic Content

At this point we are going to modify the Language component to update the i18next language based on selection. Then we will remove the hardcoded values for the message in Input.js and the image in Flag.js.

Let's start with Language.js. In order to update the i18next language we can use the useTranslation hook from react-i18next library, which provides the i18n interface. In case that you are using classes instead of functional components the equivalent will be the withTranslation higher order component.

changeLanguage function updates the i18next language, whereas language function returns the i18next language.

import { FormControl, MenuItem, Select } from '@material-ui/core';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';

const Language = () => {
  const { i18n } = useTranslation();
  const [dropdownLang, setDropdownLang] = useState(i18n.language || 'en');

  const languageHandler = event => {
    const newLanguage = event.target.value;
    if (dropdownLang !== newLanguage) {
      setDropdownLang(newLanguage);
      i18n.changeLanguage(newLanguage);
    }
  };

  return (
    <FormControl style={{ minWidth: 120 }}>
      <Select value={dropdownLang} onChange={languageHandler}>
        <MenuItem value="en">English</MenuItem>
        <MenuItem value="el">Ελληνικά</MenuItem>
        <MenuItem value="es">Español</MenuItem>
        <MenuItem value="it">Italiano</MenuItem>
      </Select>
    </FormControl>
  );
};

export default Language;

Notice that we also updated the dropdownLang to be initialised from i18next language if defined. If you skip that configuration whenever you refresh the page the drop-down will display English even if the i18next language is different.

After implementing the previous step the application should throw an error. This is due to i18next requiring Suspense in order to work. The Suspense should be added one level higher than the component using it, so we are going to add it in App.js.

import React, { Suspense } from 'react';
import Intro from './components/Intro/Intro';
import Flag from './components/Flag/Flag';
import Language from './components/Language/Language';
import './App.css';

const App = () => {
  return (
    <Suspense fallback={<p>Loading Translations ...</p>}>
      <div className="App">
        <nav style={{ height: '60px', backgroundColor: 'rgb(253, 117, 19)' }}>
          <div
            style={{ float: 'right', marginTop: '20px', marginRight: '20px' }}
          >
            <Language />
          </div>
        </nav>
        <div style={{ marginTop: '50px' }}>
          <Intro />
        </div>
        <div style={{ display: 'inline-block', width: '500px' }}>
          <Flag />
        </div>
      </div>
    </Suspense>
  );
};

export default App;

Now the application should be back up and running but how do you test that the language is actually updated? For that you can check the local storage in your browser!

Let's move on and remove the hardcoded content from Intro.js. Similarly we are going to use the useTranslation hook and invoke the t function which allows you to map to a property instead of specifying a value directly.

import React from 'react';
import { useTranslation } from 'react-i18next';

const Intro = () => {
  const { t } = useTranslation();

  return <h1>{t('intro-title')}</h1>;
};

export default Intro;

In the Flag.js we are going to use the language function to retrieve the i18next language and display the relevant image.

import React from 'react';
import { useTranslation } from 'react-i18next';

const Flag = () => {
  const { i18n } = useTranslation();

  const flagSvg = require(`./${i18n.language}.svg`);

  return <img style={{ maxWidth: '50%' }} src={flagSvg} alt="flag" />;
};

export default Flag;

At this point the application should allow you to update the language from the drop-down and the relevant message and image should be displayed.

In case the message is being replaced by intro-title, this is an indication that the i18next failed to read the value of this property or load that language. If a fallback language is specified, i18next will display the message from that language.

Multi-page Experience with Routing

For that we will use the react-router-dom library.

$ npm install --save react-router-dom

The first step is to use the BrowserRouter component from react-router-dom and create a Route for the App component. This gives us access to the history object which will be used to manipulate the url when we select a language from the drop-down.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter, Route } from 'react-router-dom';

import * as serviceWorker from './serviceWorker';

import './i18n';

ReactDOM.render(
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>,
  document.getElementById('root')
);

serviceWorker.unregister();

Next step is to update the Language component to modify the url on language switching. For that we need to use the useHistory hook from react-router-dom that allows us to access the history object. Then we update the handler to push the new url in history.

import { FormControl, MenuItem, Select } from '@material-ui/core';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';

const Language = () => {
  const history = useHistory();
  const { i18n } = useTranslation();
  const [dropdownLang, setDropdownLang] = useState(i18n.language || 'en');

  const languageHandler = event => {
    const newLanguage = event.target.value;
    if (dropdownLang !== newLanguage) {
      setDropdownLang(newLanguage);
      i18n.changeLanguage(newLanguage);
      history.push("/" + newLanguage);
    }
  };

  return (
    <FormControl style={{ minWidth: 120 }}>
      <Select value= {dropdownLang} onChange={languageHandler}>
        <MenuItem value="en">English</MenuItem>
        <MenuItem value="el">Ελληνικά</MenuItem>
        <MenuItem value="es">Español</MenuItem>
        <MenuItem value="it">Italiano</MenuItem>
      </Select>
    </FormControl>
  );
};

export default Language;

Let's go back to our browser to test the application. You will notice that whenever you switch the drop-down language you get a new url! This is great but what if we want to prioritise the url language over the local storage. That means, whenever you use a url containing a language, i18next will be initialised accordingly. We can achieve that by adding another detector in the i18next configuration. The name of the detector is path and is responsible for extracting the language from the url (from path - not from query parameters).

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    preload: ['en'],
    load: 'languageOnly',
    fallbackLng: 'en',
    debug: true,
    lowerCaseLng: true,
    detection: {
      order: ['path', 'localStorage']
    }
  });

export default i18n;

Now if you try the previous scenario you will notice that the language is updated!

Note: You might want to refactor the way you retrieve the svg in the Flag component, otherwise you will get an error for non supported language urls (e.g. localhost:3000/pt).

Bonus: Tricks to boost your application

For root url (/), check if the local storage contains a value and if yes add a Redirect inside the BrowserRouter to reconcile the url. That covers the case where you previously visited the website (local storage contains a language) but you have bookmarked the root url of the application.
Create your own custom detector and add it in the i18next configuration. The i18next-browser-languagedetector supports a vast majority of detectors but in case you need additional customisation you can have it.

DEV Community: Panos Sideris

Custom Health Aggregator in Spring Boot 2

Table Of Contents

psideris89 / spring-health-aggregator-demo

Spring boot application that uses Spring Actuator and demonstrates a custom health aggregator

To upgrade gradle version to 7.1

Getting started with Spring Boot Actuator

Health Indicator vs Health Aggregator

Setting up Spring Actuator

Create a Spring Boot project

Run the application

Create a Health Indicator

Create a Health Aggregator

Advanced configuration

Show details in the health status

Configure the health URL

Accessing the Status of individual Health Indicator

Additional Resources

Java Records in Spring Boot Rest API

Introduction to Records

Record

Class

Usages

Demo

psideris89 / java-records-demo

Demo spring boot rest api for java 14 records demonstration

Step 1: Create Spring Boot app

Step 2: Project configuration

Legacy configuration (java 14)

Step 3: Create Rest Controller

Director

Movie

Step 4: Configure Jackson for Serialisation / Deserialisation

Conclusion

Internationalisation in React

Table Of Contents

psideris89 / react-i18n-demo

React demo project for internationalisation (i18n)

Internationlisation in React

Template Project

Language

Intro

Flag

App

Integrate with i18next

Step 1: Create the configuration for i18next

Step 2: Create json files to host the translation messages.

Serve Dynamic Content

Multi-page Experience with Routing

Bonus: Tricks to boost your application