fix: custom-uis do not work as expected (#2311)

* fix: custom-uis do not work as expected

closes #2304, #2255, #2221, #2219

* add documentation

* copy routes.txt file to target directory to include custom routes in HomepageForwardingFilter

* remove console.log

Author: SteKoe

spring-boot-admin-docs/src/site/asciidoc/customize_http-headers.adoc

@@ -0,0 +1,9 @@
+[[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]
+----

spring-boot-admin-docs/src/site/asciidoc/customize_interceptors.adoc

@@ -0,0 +1,10 @@
+[[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]
+----

spring-boot-admin-docs/src/site/asciidoc/customize_notifiers.adoc

@@ -0,0 +1,10 @@
+[[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]
+----

spring-boot-admin-docs/src/site/asciidoc/_customizing.adoc renamed to spring-boot-admin-docs/src/site/asciidoc/customize_ui.adoc

@@ -1,40 +1,5 @@
-[[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 ===
+== Linking / Embedding External Pages ==
 
 You can very simply add a link to external pages via configuration or even embed them (adding the `iframe=true`):
 
@@ -44,107 +9,115 @@ include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/resources/appli
 ----
 
 [[customizing-custom-views]]
-=== 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.
+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]
+The custom extension registers itself by calling:
 
-* Object referencing the {github-src}/spring-boot-admin-server-ui/src/main/frontend/store.js[applicationStore]
+[source,javascript]
+----
+include::{samples-dir}/spring-boot-admin-sample-custom-ui/src/index.js[tags=customization-ui-toplevel]
+----
 
-* Object referencing the the global Vue[Vue]
+<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.
 
-* Object referencing the {github-src}/spring-boot-admin-server-ui/src/main/frontend/utils/axios.js[axios]
+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).
+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]
+<1> By destructuring `applications` of `SBA.useApplicationStore()`, you have reactive access to 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.
 
 ===== Example
+
 [source,javascript]
 ----
 include::{samples-dir}/spring-boot-admin-sample-custom-ui/src/index.js[tags=customization-ui-child]
 ----
+
 <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>`
+When set to `true`, the parent component has to implement `<router-view>`
 
 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 ====
+=== 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.
-<4> Register custom i18n translations
 
 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`)
+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 ===
+== Customizing Colors ==
+
 You can provide a custom color theme to the application by overwriting the following properties:
 
 [source,yaml,indent=0]
 ----
 include::{samples-dir}/spring-boot-admin-sample-servlet/src/main/resources/application-themed.yml[]
 ----
 
-
 |===
 | Property name | Default | Usage
 
@@ -180,32 +153,36 @@ stop: #9F2A2A
 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.)
+(e.g shade `600` of palette is used as text color and shade `50` as background color.)
 
 |===
 
-=== Customizing Login Logo ===
+== 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`)
+- **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.
+== 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`)
+- `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 ==
 
-=== 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`)
 
-=== Showing / Hiding views ===
+== Show / Hide views ==
 
 You can very simply hide views in the navbar:
 

spring-boot-admin-docs/src/site/asciidoc/templates/paragraph.html.slim

@@ -11,7 +11,7 @@ body::before {
     display: block;
     height: 200px;
     left: 0;
-    position: absolute;
+    position: fixed;
     width: 100%;
     z-index: -1;
 }
@@ -33,7 +33,7 @@ body::before {
 #main-section {
     display: flex;
     flex-direction: column;
-    margin-top: 60px;
+    margin-top: 80px;
 }
 
 #footer-info {
@@ -44,6 +44,11 @@ body::before {
     font-size: .8em;
 }
 
+.hljs {
+    background-color: rgba(240, 240, 240, .75);
+    backdrop-filter: blur(10px);
+}
+
 #footer-info a {
     color: #000;
 }

spring-boot-admin-docs/src/site/resources/css/custom.css

@@ -1,41 +1,48 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/DECORATION/1.8.0"
-         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xmlns="http://maven.apache.org/DECORATION/1.8.0"
          xsi:schemaLocation="http://maven.apache.org/DECORATION/1.8.0 http://maven.apache.org/xsd/decoration-1.8.0.xsd"
          name="Spring Boot Admin">
 
     <skin>
         <groupId>com.bernardomg.maven.skins</groupId>
         <artifactId>docs-maven-skin</artifactId>
-        <version>2.2.7</version>
+        <version>2.2.9</version>
     </skin>
 
     <custom>
         <skinConfig>
             <bootswatchStyle>litera</bootswatchStyle>
-            <customStyle>./css/custom.css</customStyle>
+            <customStyle>/css/custom.css</customStyle>
             <topNav>
                 <menu>Documentation</menu>
                 <menu>Server</menu>
                 <menu>Client</menu>
+                <menu>Customize</menu>
             </topNav>
         </skinConfig>
     </custom>
 
     <body>
         <menu name="Documentation" inherit="bottom">
-            <item name="Getting Started" href="./getting-started.html" />
-            <item name="Server" href="./server.html" />
-            <item name="Client" href="./client.html" />
-            <item name="Security" href="./security.html" />
-            <item name="FAQ" href="./faq.html" />
+            <item name="Getting Started" href="./getting-started.html"/>
+            <item name="Server" href="./server.html"/>
+            <item name="Client" href="./client.html"/>
+            <item name="Security" href="./security.html"/>
+            <item name="FAQ" href="./faq.html"/>
         </menu>
         <menu name="Server" inherit="top">
-            <item name="Usage" href="./server.html" />
-            <item name="Notifications" href="./server-notifications.html" />
+            <item name="Usage" href="./server.html"/>
+            <item name="Notifications" href="./server-notifications.html"/>
         </menu>
         <menu name="Client" inherit="top">
-            <item name="Usage" href="./client.html" />
+            <item name="Usage" href="./client.html"/>
+        </menu>
+        <menu name="Customize" inherit="top">
+            <item name="Notifiers" href="./customize_notifiers.html"/>
+            <item name="HTTP Headers" href="./customize_http-headers.html"/>
+            <item name="Interceptors" href="./customize_interceptors.html"/>
+            <item name="UI" href="./customize_ui.html"/>
         </menu>
     </body>
 </project>