feat(#2032): allow to add sub views to top-level views (#2033)

* feat(#2032): allow to add sub views to top-level views

* feat(#2032): allow to add sub views to top-level views

* no parent for external view

* do not set empty path

* allow to add sub menu items to user menu by using "user" as parent

Author: SteKoe

spring-boot-admin-docs/src/main/asciidoc/customizing.adoc

@@ -81,12 +81,22 @@ And this is how you register the top-level view.
 ----
 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
+<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>`
+
 The `routes.txt` config with the added route:
 [source,text]
 ----

spring-boot-admin-samples/spring-boot-admin-sample-custom-ui/src/custom-subitem.vue

@@ -0,0 +1,24 @@
+<!--
+  - Copyright 2014-2018 the original author or authors.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <h1>Custom Subitem</h1>
+</template>
+
+<script>
+export default {
+};
+</script>

spring-boot-admin-samples/spring-boot-admin-sample-custom-ui/src/index.js

@@ -16,6 +16,7 @@
 
 /* global SBA */
 import custom from './custom';
+import customSubitem from './custom-subitem';
 import customEndpoint from './custom-endpoint';
 
 // tag::customization-ui-toplevel[]
@@ -32,6 +33,22 @@ SBA.use({
 });
 // end::customization-ui-toplevel[]
 
+// tag::customization-ui-child[]
+SBA.use({
+  install({viewRegistry}) {
+    viewRegistry.addView({
+      name: 'customSub',
+      parent: 'custom', // <1>
+      path: 'custom-sub', // <2>
+      isChildRoute: false, // <3>
+      component: customSubitem,
+      label: 'Custom Sub',
+      order: 1000,
+    });
+  }
+});
+// end::customization-ui-child[]
+
 // tag::customization-ui-endpoint[]
 SBA.use({
   install({viewRegistry, vueI18n}) {
@@ -48,8 +65,8 @@ SBA.use({
 
     vueI18n.mergeLocaleMessage('en', { // <4>
       sidebar: {
-        custom : {
-          title : "My Custom Extensions"
+        custom: {
+          title: "My Custom Extensions"
         }
       }
     });

spring-boot-admin-server-ui/package.json

@@ -4,6 +4,7 @@
   "description": "Spring Boot Admin UI",
   "scripts": {
     "build": "vue-cli-service build",
+    "build:dev": "vue-cli-service build --mode development",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "lint:fix": "vue-cli-service lint --fix",

spring-boot-admin-server-ui/src/main/frontend/index.js

@@ -50,7 +50,8 @@ installables.forEach(view => view.install({
 }));
 
 const routesKnownToBackend = sbaConfig.uiSettings.routes.map(r => new RegExp(`^${r.replace('/**', '(/.*)?')}$`));
-const unknownRoutes = viewRegistry.routes.filter(vr => vr.path !== '/' && !routesKnownToBackend.some(br => br.test(vr.path)));
+const routes = viewRegistry.routes;
+const unknownRoutes = routes.filter(vr => vr.path !== '/' && !routesKnownToBackend.some(br => br.test(vr.path)));
 if (unknownRoutes.length > 0) {
   console.warn(`The routes ${JSON.stringify(unknownRoutes.map(r => r.path))} aren't known to the backend and may be not properly routed!`)
 }
@@ -60,7 +61,7 @@ new Vue({
   router: new VueRouter({
     mode: 'history',
     linkActiveClass: 'is-active',
-    routes: viewRegistry.routes
+    routes
   }),
   el: '#app',
   render(h) {

spring-boot-admin-server-ui/src/main/frontend/shell/NavbarLink.vue

@@ -0,0 +1,51 @@
+<template>
+  <a
+    v-if="view.href"
+    @click="onClick"
+    :href="view.href"
+    :class="{'navbar-item is-arrowless': !hasSubitems, 'navbar-link': hasSubitems}"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <component :is="view.handle" />
+  </a>
+  <router-link
+    @click.native="onClick"
+    v-else
+    :data-sba-to="view.name"
+    :to="{name: view.name}"
+    active-class=""
+    exact-active-class=""
+    :class="{'navbar-item is-arrowless': !hasSubitems, 'navbar-link': hasSubitems}"
+  >
+    <component :is="view.handle" :applications="applications" :error="error" />
+  </router-link>
+</template>
+<script>
+export default {
+  name: 'NavbarLink',
+  props: {
+    applications: {
+      type: Array,
+      default: () => [],
+    },
+    error: {
+      type: Error,
+      default: null
+    },
+    hasSubitems: {
+      type: Boolean,
+      default: false
+    },
+    view: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    onClick($event) {
+      $event?.target?.blur()
+    }
+  }
+}
+</script>

spring-boot-admin-server-ui/src/main/frontend/shell/index.vue

@@ -46,7 +46,7 @@
     components: {sbaNavbar},
     computed: {
       mainViews() {
-        return this.views.filter(view => !view.parent);
+        return this.views.filter(view => !['instances'].includes(view.parent));
       },
       activeMainViewName() {
         const currentView = this.$route.meta.view;

spring-boot-admin-server-ui/src/main/frontend/shell/navbar.vue

@@ -18,49 +18,47 @@
   <nav id="navigation" class="navbar is-fixed-top">
     <div class="container">
       <div class="navbar-brand">
-        <router-link class="navbar-item logo" to="/" v-html="brand" />
+        <router-link class="navbar-item logo" to="/" v-html="brand"/>
 
         <div class="navbar-burger burger" @click.stop="showMenu = !showMenu">
-          <span />
-          <span />
-          <span />
+          <span/>
+          <span/>
+          <span/>
         </div>
       </div>
       <div class="navbar-menu" :class="{'is-active' : showMenu}">
         <div class="navbar-end">
-          <template v-for="view in enabledViews">
-            <a
-              v-if="view.href"
-              :key="view.name"
-              :href="view.href"
-              class="navbar-item"
-              target="_blank"
-              rel="noopener noreferrer"
+          <template v-for="view in mainViews">
+            <div class="navbar-item "
+                 :key="view.name"
+                 :class="{'has-dropdown is-hoverable': hasSubitems(view.name)}"
             >
-              <component :is="view.handle" />
-            </a>
-            <router-link
-              v-else
-              :key="view.name"
-              :to="{name: view.name}"
-              class="navbar-item"
-            >
-              <component :is="view.handle" :applications="applications" :error="error" />
-            </router-link>
+              <navbar-link :applications="applications" :error="error" :has-subitems="hasSubitems(view.name)"
+                           :view="view"/>
+
+              <div v-if="hasSubitems(view.name)" class="navbar-dropdown">
+                <template v-for="subitem in getSubitems(view.name)">
+                  <navbar-link :key="subitem.name" :applications="applications" :error="error" :view="subitem"/>
+                </template>
+              </div>
+            </div>
           </template>
+
           <div class="navbar-item has-dropdown is-hoverable" v-if="userName">
             <a class="navbar-link">
-              <font-awesome-icon icon="user-circle" size="lg" />&nbsp;<span v-text="userName" />
+              <font-awesome-icon icon="user-circle" size="lg"/>&nbsp;<span v-text="userName"/>
             </a>
             <div class="navbar-dropdown">
-              <a class="navbar-item">
-                <form action="logout" method="post">
-                  <input v-if="csrfToken" type="hidden" :name="csrfParameterName" :value="csrfToken">
-                  <button class="button is-icon" type="submit" value="logout">
-                    <font-awesome-icon icon="sign-out-alt" />&nbsp;<span v-text="$t('navbar.logout')" />
-                  </button>
-                </form>
-              </a>
+              <navbar-link v-for="userSubMenuItem in userSubMenuItems" :key="userSubMenuItem.name"
+                           :applications="applications" :error="error" :view="userSubMenuItem"/>
+
+              <form action="logout" method="post">
+                <input v-if="csrfToken" type="hidden" :name="csrfParameterName" :value="csrfToken">
+                <button class="button is-icon" type="submit" value="logout">
+                  <font-awesome-icon icon="sign-out-alt"/>&nbsp;<span v-text="$t('navbar.logout')"/>
+                </button>
+              </form>
+
             </div>
           </div>
           <navbar-item-language-selector v-if="availableLocales.length > 1" :current-locale="$i18n.locale"
@@ -79,14 +77,15 @@ import {compareBy} from '@/utils/collections';
 import {getAvailableLocales} from '@/i18n';
 import moment from 'moment';
 import NavbarItemLanguageSelector from '@/shell/navbar-item-language-selector';
+import NavbarLink from '@/shell/NavbarLink.vue';
 
 const readCookie = (name) => {
   const match = document.cookie.match(new RegExp('(^|;\\s*)(' + name + ')=([^;]*)'));
   return (match ? decodeURIComponent(match[3]) : null);
 };
 
 export default {
-  components: {NavbarItemLanguageSelector},
+  components: {NavbarLink, NavbarItemLanguageSelector},
   data: () => ({
     showMenu: false,
     brand: '<img src="assets/img/icon-spring-boot-admin.svg"><span>Spring Boot Admin</span>',
@@ -115,12 +114,24 @@ export default {
         view => view.handle && (typeof view.isEnabled === 'undefined' || view.isEnabled())
       ).sort(compareBy(v => v.order));
     },
+    mainViews() {
+      return this.enabledViews.filter(v => !v.parent);
+    },
+    userSubMenuItems() {
+      return this.enabledViews.filter(v => v.parent === 'user');
+    }
   },
   methods: {
     changeLocale(locale) {
       this.$i18n.locale = locale;
       moment.locale(this.$i18n.locale);
-    }
+    },
+    getSubitems(parent) {
+      return this.enabledViews.filter(v => v.parent === parent);
+    },
+    hasSubitems(parent) {
+      return this.getSubitems(parent).length > 0;
+    },
   },
   created() {
     this.brand = sbaConfig.uiSettings.brand;
@@ -155,3 +166,19 @@ export default {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+.button {
+  padding: 0.375rem 3rem 0.375rem 1rem;
+  font-size: inherit;
+  color: inherit;
+  text-align: left;
+  width: 100%;
+  display: block;
+
+  &:hover {
+    background-color: hsl(0deg, 0%, 96%);
+    color: hsl(0deg, 0%, 4%);
+  }
+}
+</style>

spring-boot-admin-server-ui/src/main/frontend/viewRegistry.js

@@ -38,8 +38,9 @@ export default class ViewRegistry {
   }
 
   get routes() {
+    const parentViews = this._views;
     return [
-      ...this._toRoutes(this._views, v => v.path && !v.parent),
+      ...this._toRoutes(parentViews, v => v.path && (!v.parent || !v.isChildRoute)),
       ...this._redirects
     ]
   }
@@ -67,6 +68,9 @@ export default class ViewRegistry {
     if (!view.group) {
       view.group = VIEW_GROUP.NONE;
     }
+    if (view.isChildRoute === undefined) {
+      view.isChildRoute = true;
+    }
 
     if (!view.isEnabled) {
       view.isEnabled = () => {
@@ -87,7 +91,7 @@ export default class ViewRegistry {
   _toRoutes(views, filter) {
     return views.filter(filter).map(
       p => {
-        const children = this._toRoutes(views, v => v.parent === p.name);
+        const children = this._toRoutes(views, v => v.parent === p.name && v.isChildRoute);
         return ({
           path: p.path,
           name: p.name,