Add customization for navbar and title

Using spring.boot.admin.ui.title/spring.boot.admin.ui.brand you can customise the page title and logo/title shown in the navbar closes #212
codecentric · Jun 13, 2018 · b247a82 · b247a82
1 parent d7712b2
commit b247a82
Show file tree

Hide file tree

Showing 24 changed files with 85 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -98,9 +98,6 @@ Spring, Spring Boot and Spring Cloud are trademarks of [Pivotal Software, Inc.](
 ![Screenshot traces](/images/screenshot-trace.png)
 *View http request traces*
 
-![Screenshot hystrix](/images/screenshot-hystrix.png)
-*View Hystrix dashboard*
-
 ![Screenshot journal](/images/screenshot-journal.png)
 *View history of registered applications*
 

diff --git a/images/screenshot-details.png b/images/screenshot-details.png
diff --git a/images/screenshot-environment.png b/images/screenshot-environment.png
diff --git a/images/screenshot-hystrix.png b/images/screenshot-hystrix.png
diff --git a/images/screenshot-jmx.png b/images/screenshot-jmx.png
diff --git a/images/screenshot-journal.png b/images/screenshot-journal.png
diff --git a/images/screenshot-logfile.png b/images/screenshot-logfile.png
diff --git a/images/screenshot-logging.png b/images/screenshot-logging.png
diff --git a/images/screenshot-metrics.png b/images/screenshot-metrics.png
diff --git a/images/screenshot-threads.png b/images/screenshot-threads.png
diff --git a/images/screenshot-trace.png b/images/screenshot-trace.png
diff --git a/images/screenshot.png b/images/screenshot.png
diff --git a/spring-boot-admin-docs/src/main/asciidoc/server.adoc b/spring-boot-admin-docs/src/main/asciidoc/server.adoc
@@ -38,6 +38,14 @@
 |  Headers not to be forwarded when making requests to clients.
 | `"Cookie", "Set-Cookie", "Authorization"
 
+| spring.boot.admin.ui.brand
+| Brand to be shown in then navbar.
+| `"<img src="assets/img/icon-spring-boot-admin.svg"><span>Spring Boot Admin</span>"`
+
+| spring.boot.admin.ui.title
+| Page-Title to be shown.
+| `"Spring Boot Admin"`
+
 |===
 
 include::server-discovery.adoc[]

diff --git a/spring-boot-admin-server-ui/package-lock.json b/spring-boot-admin-server-ui/package-lock.json
diff --git a/spring-boot-admin-server-ui/package.json b/spring-boot-admin-server-ui/package.json
@@ -45,7 +45,7 @@
     "babel-eslint": "^8.2.3",
     "babel-jest": "^23.0.1",
     "babel-loader": "^7.1.4",
-    "babel-plugin-lodash": "^3.3.3",
+    "babel-plugin-lodash": "^3.3.4",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.24.1",

diff --git a/spring-boot-admin-server-ui/src/main/frontend/index.html b/spring-boot-admin-server-ui/src/main/frontend/index.html
@@ -24,12 +24,17 @@
     <meta name="theme-color" content="#42d3a5">
     <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
     <link href="assets/css/sba-core.css" rel="stylesheet">
-    <title>Spring Boot Admin</title>
+    <title th:text="${uiSettings.title}">Spring Boot Admin</title>
 </head>
 <body>
 
 <div id="app"></div>
 
+<script th:inline="javascript">
+    var SBA = {
+        uiSettings: /*[[${uiSettings}]]*/ {}
+    }
+</script>
 <script lang="javascript" src="assets/js/vendors.js" defer></script>
 <script lang="javascript" src="assets/js/sba-core.js" defer></script>
 </body>

diff --git a/spring-boot-admin-server-ui/src/main/frontend/index.js b/spring-boot-admin-server-ui/src/main/frontend/index.js
@@ -61,6 +61,7 @@ new Vue({
   render(h) {
     return h(sbaShell, {
       props: {
+        views: this.views,
         applications: this.applications,
         error: this.error
       }

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/index.vue
@@ -17,7 +17,7 @@
 <template>
   <div class="instances">
     <sba-instance-header :instance="instance" :application="application" :class="headerClass"/>
-    <sba-instance-tabs :views="instanceViews" :instance="instance" :application="application" :class="headerClass"/>
+    <sba-instance-tabs :views="views" :instance="instance" :application="application" :class="headerClass"/>
     <router-view v-if="instance" :instance="instance"/>
   </div>
 </template>
@@ -33,6 +33,10 @@
         type: String,
         required: true
       },
+      views: {
+        type: Array,
+        default: () => []
+      },
       applications: {
         type: Array,
         default: () => [],
@@ -49,9 +53,6 @@
       application() {
         return this.applications.findApplicationForInstance(this.instanceId);
       },
-      instanceViews() {
-        return this.$root.views.filter(view => view.name.lastIndexOf('instance/') === 0);
-      },
       headerClass() {
         if (!this.instance) {
           return '';

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/shell/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/shell/index.vue
@@ -17,7 +17,7 @@
 <template>
   <div id="app">
     <sba-navbar :views="mainViews" :applications="applications" :error="error"/>
-    <router-view :applications="applications" :error="error"/>
+    <router-view :views="subViews" :applications="applications" :error="error"/>
   </div>
 </template>
 
@@ -26,6 +26,10 @@
 
   export default {
     props: {
+      views: {
+        type: Array,
+        default: () => []
+      },
       applications: {
         type: Array,
         default: () => [],
@@ -38,7 +42,14 @@
     components: {sbaNavbar},
     computed: {
       mainViews() {
-        return this.$root.views.filter(view => view.name.lastIndexOf('/') < 0);
+        return this.views.filter(view => !view.name.includes('/'))
+      },
+      activeMainViewName() {
+        const idx = this.$route.name.indexOf('/');
+        return idx < 0 ? this.$route.name : this.$route.name.substr(0, idx);
+      },
+      subViews() {
+        return this.views.filter(view => view.name.includes(this.activeMainViewName))
       }
     }
   }

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/shell/navbar.vue b/spring-boot-admin-server-ui/src/main/frontend/views/shell/navbar.vue
@@ -18,10 +18,7 @@
   <nav id="navigation" class="navbar is-fixed-top">
     <div class="container">
       <div class="navbar-brand">
-        <router-link class="navbar-item logo" to="/">
-          <img src="assets/img/icon-spring-boot-admin.svg">
-          <span>Spring Boot Admin</span>
-        </router-link>
+        <router-link class="navbar-item logo" to="/" v-html="brand"/>
 
         <div class="navbar-burger burger" @click.stop="showMenu = !showMenu">
           <span/>
@@ -52,7 +49,8 @@
 <script>
   export default {
     data: () => ({
-      showMenu: false
+      showMenu: false,
+      brand: '<img src="assets/img/icon-spring-boot-admin.svg"><span>Spring Boot Admin</span>'
     }),
     props: {
       views: {
@@ -68,6 +66,12 @@
         default: null
       }
     },
+    created() {
+      /* global SBA */
+      if (SBA && SBA.uiSettings) {
+        this.brand = SBA.uiSettings.brand || this.brand;
+      }
+    },
     mounted() {
       document.documentElement.classList.add('has-navbar-fixed-top');
     },

diff --git a/.../main/java/de/codecentric/boot/admin/server/ui/config/AdminServerUiAutoConfiguration.java b/.../main/java/de/codecentric/boot/admin/server/ui/config/AdminServerUiAutoConfiguration.java
@@ -56,7 +56,9 @@ public AdminServerUiAutoConfiguration(AdminServerUiProperties uiProperties,
     @Bean
     @ConditionalOnMissingBean
     public UiController homeUiController() {
-        return new UiController(adminServerProperties.getContextPath());
+        return new UiController(adminServerProperties.getContextPath(),
+            uiProperties.getTitle(),
+            uiProperties.getBrand());
     }
 
     @Bean

diff --git a/...-ui/src/main/java/de/codecentric/boot/admin/server/ui/config/AdminServerUiProperties.java b/...-ui/src/main/java/de/codecentric/boot/admin/server/ui/config/AdminServerUiProperties.java
@@ -38,6 +38,16 @@ public class AdminServerUiProperties {
      */
     private String templateLocation = CLASSPATH_RESOURCE_LOCATIONS[0];
 
+    /**
+     * Page-Title to be shown.
+     */
+    private String title = "Spring Boot Admin";
+
+    /**
+     * Brand to be shown in then navbar.
+     */
+    private String brand = "<img src=\"assets/img/icon-spring-boot-admin.svg\"><span>Spring Boot Admin</span>";
+
     private boolean cacheTemplates = true;
 
     private final Cache cache = new Cache();
@@ -55,6 +65,7 @@ public static class Cache {
          * include "no-cache" directive in Cache-Control http header.
          */
         private Boolean noCache = false;
+
         /**
          * include "no-store" directive in Cache-Control http header.
          */
@@ -74,5 +85,4 @@ public CacheControl toCacheControl() {
         }
     }
 
-
 }
diff --git a/...t-admin-server-ui/src/main/java/de/codecentric/boot/admin/server/ui/web/UiController.java b/...t-admin-server-ui/src/main/java/de/codecentric/boot/admin/server/ui/web/UiController.java
@@ -18,23 +18,34 @@
 
 import de.codecentric.boot.admin.server.web.AdminController;
 
+import java.util.HashMap;
+import java.util.Map;
 import org.springframework.http.MediaType;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
 
 @AdminController
 public class UiController {
     private final String adminContextPath;
+    private final Map<String, Object> uiSettings;
 
-    public UiController(String adminContextPath) {
+    public UiController(String adminContextPath, String title, String brand) {
         this.adminContextPath = adminContextPath;
+        this.uiSettings = new HashMap<>();
+        this.uiSettings.put("title", title);
+        this.uiSettings.put("brand", brand);
     }
 
     @ModelAttribute(value = "adminContextPath", binding = false)
     public String getAdminContextPath() {
         return adminContextPath;
     }
 
+    @ModelAttribute(value = "uiSettings", binding = false)
+    public Map<String, Object> getUiSettings() {
+        return uiSettings;
+    }
+
     @GetMapping(path = "/", produces = MediaType.TEXT_HTML_VALUE)
     public String index() {
         return "index";
@@ -44,5 +55,4 @@ public String index() {
     public String login() {
         return "login";
     }
-
 }
diff --git a/...min-server/src/test/java/de/codecentric/boot/admin/server/services/StatusUpdaterTest.java b/...min-server/src/test/java/de/codecentric/boot/admin/server/services/StatusUpdaterTest.java
@@ -171,7 +171,6 @@ public void test_update_down_noBody() {
                     .thenCancel()
                     .verify();
 
-
         StepVerifier.create(repository.find(instance.getId())).assertNext(app -> {
             assertThat(app.getStatusInfo().getStatus()).isEqualTo("DOWN");
             assertThat(app.getStatusInfo().getDetails()).containsEntry("status", 503)