Linking / Embedding External Pages

You can very simply add a link to external pages via configuration or even embed them (adding the iframe=true):

spring:
  boot:
    admin:
      ui:
        external-views:
          - label: "🚀"
            url: https://codecentric.de
            order: 2000

Custom Views

It is possible to add custom views to the ui. The views must be implemented as Vue.js components.

The JavaScript-Bundle and CSS-Stylesheet must be placed on the classpath at /META-INF/spring-boot-admin-server-ui/extensions/{name}/ so the server can pick them up. The spring-boot-admin-sample-custom-ui module contains a sample which has the necessary maven setup to build such a module.

The custom extension registers itself by calling:

SBA.use({
  install({ viewRegistry, i18n }) {
    viewRegistry.addView({
      name: "custom", (1)
      path: "/custom", (2)
      component: custom, (3)
      handle, (4)
      order: 1000, (5)
    });
    i18n.mergeLocaleMessage("en", {
      custom: {
        label: "My Extensions", (6)
      },
    });
    i18n.mergeLocaleMessage("de", {
      custom: {
        label: "Meine Erweiterung",
      },
    });
  },
});
1 Name of the view and the route.
2 Path in Vue router.
3 The imported custom component, which will be rendered on the route.
4 The handle for the custom view to be shown in the top navigation bar.
5 Order for the view.
6 Using i18n.mergeLocaleMessage allows to add custom translations.

Views in the top navigation bar are sorted by ascending order.

If new top level routes are added to the frontend, they also must be known to the backend. Add a /META-INF/spring-boot-admin-server-ui/extensions/{name}/routes.txt with all your new toplevel routes (one route per line).

Adding a Top-Level View

Here is a simple top level view just listing all registered applications:

<template>
  <pre v-text="stringify(applications, null, 4)" />
</template>

<script>
/* global SBA */

export default {
  setup() {
    const { applications } = SBA.useApplicationStore(); (1)
    return {
      applications,
    };
  },
  methods: {
    stringify: JSON.stringify,
  },
};
</script>
1 By destructuring applications of SBA.useApplicationStore(), you have reactive access to registered applications.
There are some helpful methods on the application and instances object available. Have a look at application.js and instance.js

And this is how you register the top-level view.

Example
SBA.viewRegistry.addView({
  name: "customSub",
  parent: "custom", (1)
  path: "/customSub", (2)
  isChildRoute: false, (3)
  component: customSubitem,
  label: "Custom Sub",
  order: 1000,
});
1 References the name of the parent view.
2 Router path used to navigate to.
3 Define whether the path should be registered as child route in parent’s route. When set to true, the parent component has to implement <router-view>

The routes.txt config with the added route:

/custom/**
/customSub/**

Visualizing a Custom Endpoint

Here is a view to show a custom endpoint:

<template>
  <div class="custom">
    <p>Instance: <span v-text="instance.id" /></p>
    <p>Output: <span v-text="text" /></p>
  </div>
</template>

<script>
  export default {
    props: {
      instance: { (1)
        type: Object,
        required: true
      }
    },
    data: () => ({
      text: ''
    }),
    async created() {
      const response = await this.instance.axios.get('actuator/custom'); (2)
      this.text = response.data;
    }
  };
</script>

<style lang="css" scoped>
.custom {
  font-size: 20px;
  width: 80%;
}
</style>
1 If you define a instance prop the component will receive the instance the view should be rendered for.
2 Each instance has a preconfigured axios instance to access the endpoints with the correct path and headers.

Registering the instance view works like for the top-level view with some additional properties:

SBA.viewRegistry.addView({
  name: "instances/custom",
  parent: "instances", (1)
  path: "custom",
  component: customEndpoint,
  label: "Custom",
  group: "custom", (2)
  order: 1000,
  isEnabled: ({ instance }) => instance.hasEndpoint("custom"), (3)
});
1 The parent must be 'instances' in order to render the new custom view for a single instance.
2 You can group views by assigning them to a group.
3 If you add a isEnabled callback you can figure out dynamically if the view should be show for the particular instance.
You can override default views by putting the same group and name as the one you want to override.

Customizing Header Logo and Title

You can set custom information in the header (i.e. displaying staging information or company name) by using following configuration properties:

  • spring.boot.admin.ui.brand: This HTML snippet is rendered in navigation header and defaults to <img src="assets/img/icon-spring-boot-admin.svg"><span>Spring Boot Admin</span>. By default it shows the SBA logo followed by it’s name. If you want to show a custom logo you can set: spring.boot.admin.ui.brand=<img src="custom/custom-icon.png">. Either you just add the image to your jar-file in /META-INF/spring-boot-admin-server-ui/ (SBA registers a ResourceHandler for this location by default), or you must ensure yourself that the image gets served correctly (e.g. by registering your own ResourceHandler)

  • spring.boot.admin.ui.title: Use this option to customize the browsers window title.

Customizing Colors

You can provide a custom color theme to the application by overwriting the following properties:

spring:
  boot:
    admin:
      ui:
        theme:
          color: "#4A1420"
          palette:
            50: "#F8EBE4"
            100: "#F2D7CC"
            200: "#E5AC9C"
            300: "#D87B6C"
            400: "#CB463B"
            500: "#9F2A2A"
            600: "#83232A"
            700: "#661B26"
            800: "#4A1420"
            900: "#2E0C16"
Property name Default Usage

spring.boot.admin.ui.theme.color

#42d3a5

Used in meta tag for setting theme color for user agents. Used to customize the display of the page or of the surrounding user interface.

spring.boot.admin.ui.theme.background.enable

true

Disable background image in UI

spring.boot.admin.ui.theme.background.start spring.boot.admin.ui.theme.background.stop

start: #E5AC9C stop: #9F2A2A

Start and stop colors of the background image.

spring.boot.admin.ui.theme.palette.[50,100,200,300,400,500,600,700,800,900]

50: #E8FBEF 100: #D0F7DF 200: #A1EFBD 300: #71E69C 400: #41DE7B 500: #22C55E 600: #1A9547 700: #116530 800: #09351A 900: #010603

Define a color palette that affects the colors in sidebar view (e.g shade 600 of palette is used as text color and shade 50 as background color.)

You can set a custom image to be displayed on the login page.

  1. Put the image in a resource location which is served via http (e.g. /META-INF/spring-boot-admin-server-ui/assets/img/).

  2. Configure the icons to use using the following property:

    • spring.boot.admin.ui.login-icon: Used as icon on login page. (e.g assets/img/custom-login-icon.svg)

Customizing Favicon

It is possible to use a custom favicon, which is also used for desktop notifications. Spring Boot Admin uses a different icon when one or more application is down.

  1. Put the favicon (.png with at least 192x192 pixels) in a resource location which is served via http (e.g. /META-INF/spring-boot-admin-server-ui/assets/img/).

  2. Configure the icons to use using the following properties:

    • spring.boot.admin.ui.favicon: Used as default icon. (e.g assets/img/custom-favicon.png

    • spring.boot.admin.ui.favicon-danger: Used when one or more service is down. (e.g assets/img/custom-favicon-danger.png)

Customizing Available Languages

To filter languages to a subset of all supported languages:

  • spring.boot.admin.ui.available-languages: Used as a filter of existing languages. (e.g en,de out of existing de,en,fr,ko,pt-BR,ru,zh)

Show / Hide views

You can very simply hide views in the navbar:

spring:
  boot:
    admin:
      ui:
        view-settings:
          - name: "journal"
            enabled: false