feat(#1510): implement grouping of services

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

@@ -3,7 +3,7 @@
   "private": true,
   "description": "Spring Boot Admin UI",
   "scripts": {
-    "build": "vite build --emptyOutDir",
+    "build": "vite build --emptyOutDir --sourcemap",
     "build:dev": "NODE_ENV=development vite build --emptyOutDir --sourcemap --mode development",
     "build:watch": "NODE_ENV=development vite build --emptyOutDir --watch --mode development",
     "dev": "vite",

spring-boot-admin-server-ui/src/main/frontend/components/sba-nav/sba-nav-item.vue

@@ -1,23 +1,26 @@
 <template>
   <a
-    v-if="href"
-    :href="href"
-    :target="target"
-    class="sba-nav-item"
-    rel="noopener noreferrer"
+      v-if="href"
+      :href="href"
+      :target="target"
+      class="sba-nav-item"
+      rel="noopener noreferrer"
   >
-    <slot />
+    <slot/>
   </a>
   <router-link v-else-if="to" :to="to" class="sba-nav-item">
-    <slot />
+    <slot/>
   </router-link>
 
   <div v-else class="sba-nav-item">
-    <slot />
+    <slot/>
   </div>
 </template>
 
 <script lang="ts" setup>
+import {RouteLocationRaw} from "vue-router";
+import {PropType} from "vue";
+
 defineProps({
   href: {
     type: String,
@@ -28,7 +31,7 @@ defineProps({
     default: '_blank',
   },
   to: {
-    type: String,
+    type: Object as PropType<RouteLocationRaw>,
     default: null,
   },
 });

spring-boot-admin-server-ui/src/main/frontend/components/sba-panel.vue

@@ -23,9 +23,12 @@
       class="rounded-t flex justify-between px-4 pt-5 pb-5 border-b sm:px-6 items-center bg-white transition-all"
     >
       <h3 class="text-lg leading-6 font-medium text-gray-900">
-        <span v-text="title" />&nbsp;
-        <span v-if="subtitle" class="text-sm text-gray-500" v-text="subtitle" />
-        <slot v-if="'title' in $slots" name="title" />
+        <button @click="$emit('title-click')" class="flex items-center">
+          <slot v-if="'prefix' in $slots" name="prefix" />
+          <span v-text="title" />
+          <span v-if="subtitle" class="ml-2 text-sm text-gray-500 self-end" v-text="subtitle" />
+          <slot v-if="'title' in $slots" name="title" />
+        </button>
       </h3>
 
       <div>
@@ -95,7 +98,7 @@ export default {
       default: false,
     },
   },
-  emits: ['close'],
+  emits: ['close', 'title-click'],
   data() {
     return {
       headerTopValue: 0,

spring-boot-admin-server-ui/src/main/frontend/components/sba-status-badge.vue

@@ -12,12 +12,6 @@ export default {
     status: {
       type: [HealthStatus, String, Number],
       required: true,
-      validator(value) {
-        return Object.prototype.hasOwnProperty.call(
-          HealthStatus,
-          value.toUpperCase()
-        );
-      },
     },
   },
   computed: {

spring-boot-admin-server-ui/src/main/frontend/composables/useApplicationStore.ts

@@ -1,39 +1,47 @@
-import { ref } from 'vue';
+import {Ref, ref, UnwrapRef} from 'vue';
 
 import ApplicationStore from '../store.js';
+import Application from "@/services/application";
 
 let applicationStore: ApplicationStore | null = null;
-const applications = ref([]);
+const applications = ref([] as Application[]);
 const applicationsInitialized = ref(false);
 const error = ref(null);
 
 export function createApplicationStore() {
-  if (applicationStore) throw new Error('ApplicationStore already created!');
+    if (applicationStore) throw new Error('ApplicationStore already created!');
 
-  applicationStore = new ApplicationStore();
-  return applicationStore;
+    applicationStore = new ApplicationStore();
+    return applicationStore;
 }
 
-export function useApplicationStore() {
-  applicationStore.addEventListener('connected', () => {
-    applicationsInitialized.value = true;
-    error.value = null;
-  });
+type ApplicationStoreValue = {
+    applications: Ref<UnwrapRef<Application[]>>;
+    applicationsInitialized: Ref<boolean>;
+    error: Ref<any>;
+    applicationStore: ApplicationStore;
+}
+
+export function useApplicationStore(): ApplicationStoreValue {
+    applicationStore.addEventListener('connected', () => {
+        applicationsInitialized.value = true;
+        error.value = null;
+    });
 
-  applicationStore.addEventListener('changed', (newApplications) => {
-    applicationsInitialized.value = true;
-    applications.value = newApplications;
-    error.value = null;
-  });
+    applicationStore.addEventListener('changed', (newApplications) => {
+        applicationsInitialized.value = true;
+        applications.value = newApplications;
+        error.value = null;
+    });
 
-  applicationStore.addEventListener('error', (errorResponse) => {
-    applicationsInitialized.value = true;
-    error.value = errorResponse;
-  });
+    applicationStore.addEventListener('error', (errorResponse) => {
+        applicationsInitialized.value = true;
+        error.value = errorResponse;
+    });
 
-  applicationStore.addEventListener('removed', () => {
-    applicationsInitialized.value = false;
-  });
+    applicationStore.addEventListener('removed', () => {
+        applicationsInitialized.value = false;
+    });
 
-  return { applications, applicationsInitialized, error, applicationStore };
+    return {applications, applicationsInitialized, error, applicationStore};
 }

spring-boot-admin-server-ui/src/main/frontend/global.d.ts

@@ -1,4 +1,4 @@
-import { Component, Raw, RenderFunction } from 'vue';
+import Vue, { Component, Raw, RenderFunction } from 'vue';
 
 import ViewRegistry from '@/viewRegistry';
 

spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json

@@ -29,6 +29,7 @@
     "hours": "{count} Stunde | {count} Stunden",
     "instance": "Instanz",
     "instances": "Instanzen",
+    "instances_tc": "{count} Instanz | {count} Instanzen",
     "integer": "Integer",
     "menu": {
       "open": "Menü öffnen"

spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json

@@ -36,7 +36,7 @@
     "hours": "{count} hour | {count} hours",
     "instance": "Instance",
     "instances": "Instances",
-    "instances_tc": "{n} instance | {n} instances",
+    "instances_tc": "{count} instance | {count} instances",
     "integer": "Integer",
     "menu": {
       "open": "Open menu"

spring-boot-admin-server-ui/src/main/frontend/services/application.ts

@@ -47,8 +47,11 @@ export const convertBody = (responses) =>
   });
 
 class Application {
-  readonly name: string;
-  readonly instances: Instance[];
+  public readonly name: string;
+  public readonly instances: Instance[];
+  public readonly buildVersion? = {} as {value: string};
+  public readonly status: string;
+  public readonly statusTimestamp: string;
 
   private readonly axios: AxiosInstance;