[[customizing]]
== Customizing ==

[[customizing-notifiers]]
=== Custom Notifiers ===

You can add your own Notifiers by adding Spring Beans which implement the `Notifier` interface, at best by extending
`AbstractEventNotifier` or `AbstractStatusChangeNotifier`.

[source,java,indent=0]
----
include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/CustomNotifier.java[tags=customization-notifiers]
----

[[customizing-headers]]
=== Injecting Custom HTTP Headers ===

In case you need to inject custom HTTP headers into the requests made to the monitored application's actuator endpoints you can easily add a `HttpHeadersProvider`:

[source,java,indent=0]
----
include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/SpringBootAdminServletApplication.java[tags=customization-http-headers-providers]
----

[[customizing-instance-filter]]
=== Intercepting Requests And Responses ===

You can intercept and modify requests and responses made to the monitored application's actuator endpoints by implementing the `InstanceExchangeFilterFunction` interface.
This can be useful for auditing or adding some extra security checks.

[source,java,indent=0]
----
include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/java/de/codecentric/boot/admin/SpringBootAdminServletApplication.java[tags=customization-instance-exchange-filter-function]
----

[[customizing-external-views]]
=== Linking / Embedding External Pages ===

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

[source,yaml,indent=0]
----
include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/resources/application.yml[tags=customization-external-views]
----

[[customizing-custom-views]]
=== Custom Views ===

It is possible to add custom views to the ui. The views must be implemented as https://vuejs.org/[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 {github-src}/spring-boot-admin-samples/spring-boot-admin-sample-custom-ui/[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()` and need to expose a `install()` function, which is called by the ui when setting up the routes.
The `install()` function receives the following parameters in order to register views and/or callbacks:

* Object referencing the {github-src}/spring-boot-admin-server-ui/src/main/frontend/viewRegistry.js[viewRegistry]

* Object referencing the {github-src}/spring-boot-admin-server-ui/src/main/frontend/store.js[applicationStore]

* Object referencing the the global Vue[Vue]

* Object referencing the {github-src}/spring-boot-admin-server-ui/src/main/frontend/utils/axios.js[axios]

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).

[[customizing-custom-views-top-level]]
==== Adding a Top-Level View ====

Here is a simple top level view just listing all registered applications:
[source,html]
----
include::{samples-dir}/spring-boot-admin-sample-custom-ui/src/custom.vue[lines=17..-1]
----
<1> If you define a `applications` prop the component will receive all registered applications.

TIP: There are some helpful methods on the application and instances object available. Have a look at {github-src}/spring-boot-admin-server-ui/src/main/frontend/services/application.js[application.js] and {github-src}/spring-boot-admin-server-ui/src/main/frontend/services/instance.js[instance.js]

And this is how you register the top-level view.
[source,javascript]
----
include::{samples-dir}/spring-boot-admin-sample-custom-ui/src/index.js[tags=customization-ui-toplevel]
----
<1> Name of the view and the route to the view
<2> Path where the view will be accessible
<3> The imported custom component, which will be rendered on the route.
<4> The label for the custom view to be shown in the top navigation bar.
<5> Order for the view. Views in the top navigation bar are sorted by ascending order.

The `routes.txt` config with the added route:
[source,text]
----
include::{samples-dir}/spring-boot-admin-sample-custom-ui/src/routes.txt[]
----

[[customizing-custom-views-instance]]
==== Visualizing a Custom Endpoint ====
Here is a view to show a custom endpoint:
[source,html]
----
include::{samples-dir}/spring-boot-admin-sample-custom-ui/src/custom-endpoint.vue[lines=17..-1]
----
<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 https://github.com/axios/axios[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:
[source,javascript]
----
include::{samples-dir}/spring-boot-admin-sample-custom-ui/src/index.js[tags=customization-ui-endpoint]
----
<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.

NOTE: 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 Login Logo ===
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`)
