feat(#1510): implement grouping of services in wallboard

spring-boot-admin-samples/spring-boot-admin-sample-servlet/pom.xml

@@ -111,6 +111,23 @@
                     <outputName>classes/bom</outputName>
                 </configuration>
             </plugin>
+            <plugin>
+                <groupId>org.cyclonedx</groupId>
+                <artifactId>cyclonedx-maven-plugin</artifactId>
+                <version>2.8.1</version>
+                <executions>
+                    <execution>
+                        <phase>validate</phase>
+                        <goals>
+                            <goal>makeAggregateBom</goal>
+                        </goals>
+                    </execution>
+                </executions>
+                <configuration>
+                    <outputFormat>json</outputFormat>
+                    <outputName>classes/bom</outputName>
+                </configuration>
+            </plugin>
             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>

spring-boot-admin-server-ui/pom.xml

@@ -121,7 +121,7 @@
                         <goals>
                             <goal>npm</goal>
                         </goals>
-                        <phase>test</phase>
+                        <phase>verify</phase>
                         <configuration>
                             <arguments>run test</arguments>
                         </configuration>

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

@@ -26,6 +26,10 @@
     "fetching_data": "Lade Daten...",
     "fetch_failed": "Abruf der Daten fehlgeschlagen.",
     "float": "Float",
+    "group_by": {
+      "group": "Nach Gruppen gruppieren",
+      "application": "Nach Applikationen gruppieren"
+    },
     "hours": "{count} Stunde | {count} Stunden",
     "instance": "Instanz",
     "instances": "Instanzen",

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

@@ -33,6 +33,10 @@
     "fetch_failed": "Fetching of data failed.",
     "float": "Float",
     "filter": "Filter",
+    "group_by": {
+      "group": "Group by group",
+      "application": "Group by application"
+    },
     "hours": "{count} hour | {count} hours",
     "instance": "Instance",
     "instances": "Instances",

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

@@ -77,6 +77,7 @@ export const getStatusInfo = (applications: Application[]) => {
 
 class Application {
   public readonly name: string;
+  public readonly group: string;
   public readonly instances: Instance[];
   public readonly buildVersion? = {} as { value: string };
   public readonly status: string;

spring-boot-admin-server-ui/src/main/frontend/views/applications/InstancesList.vue

@@ -31,25 +31,25 @@
       </div>
       <div class="flex-auto xl:flex-1 xl:w-1/4 truncate">
         <template v-if="instance.showUrl()">
-          <a
-            :href="
+        <a
+          :href="
               instance.registration.serviceUrl ||
               instance.registration.healthUrl
-            "
-            @click.stop
-            v-text="
+          "
+          @click.stop
+          v-text="
               instance.registration.serviceUrl ||
               instance.registration.healthUrl
-            "
-          />
-          <sba-tag
-            v-if="instance.registration.metadata?.['group']"
-            class="ml-2"
-            :value="instance.registration.metadata?.['group']"
-            small
-          />
-          <br />
-          <span class="text-sm italic" v-text="instance.id" />
+          "
+        />
+        <sba-tag
+          v-if="instance.registration.metadata?.['group']"
+          class="ml-2"
+          :value="instance.registration.metadata?.['group']"
+          small
+        />
+        <br />
+        <span class="text-sm italic" v-text="instance.id" />
         </template>
         <template v-else>
           <span v-text="instance.id"></span>
@@ -62,8 +62,7 @@
         </template>
       </div>
       <div
-        v-if="Array.isArray(instance.tags)"
-        class="hidden xl:block w-1/4"
+       v-if="Array.isArray(instance.tags)" class="hidden xl:block w-1/4"
         :class="{
           'overflow-x-scroll': Object.keys(instance.tags ?? {}).length > 0,
         }"

spring-boot-admin-server-ui/src/main/frontend/views/instances/loggers/loggers.vue

@@ -200,7 +200,9 @@ const filteredLoggers = computed(() => {
   const filteredLoggers = filterFn
     ? loggerConfig.value.loggers.filter(filterFn)
     : loggerConfig.value.loggers;
-  addLoggerCreationEntryIfLoggerNotPresent(filter.name, filteredLoggers);
+  addLoggerCreationEntryIfLoggerNotPresent(filter.name,
+        filteredLoggers,
+      );
   return filteredLoggers;
 });
 
@@ -255,14 +257,14 @@ function getFilterFn() {
 
   if (filter.configuredOnly) {
     filterFn = addToFilter(filterFn, (logger) =>
-      logger.level.some((l) => Boolean(l.configuredLevel)),
+          logger.level.some((l) => Boolean(l.configuredLevel)),
     );
   }
 
   if (filter.name) {
     const normalizedFilter = filter.name.toLowerCase();
     filterFn = addToFilter(filterFn, (logger) =>
-      logger.name.toLowerCase().includes(normalizedFilter),
+          logger.name.toLowerCase().includes(normalizedFilter),
     );
   }
 

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

@@ -47,6 +47,25 @@
           />
         </optgroup>
       </select>
+
+      <div v-if="groupNames.length > 1" class="text-right rounded h-full">
+        <sba-button-group>
+          <sba-button
+            size="base"
+            :title="t('term.group_by.application')"
+            @click="() => (routerState.sortBy = 'name')"
+          >
+            <font-awesome-icon icon="list" />
+          </sba-button>
+          <sba-button
+            size="base"
+            :title="t('term.group_by.group')"
+            @click="() => (routerState.sortBy = 'group')"
+          >
+            <font-awesome-icon icon="expand" />
+          </sba-button>
+        </sba-button-group>
+      </div>
     </div>
 
     <sba-alert
@@ -77,13 +96,15 @@
       >
         <template #item="{ item: application }">
           <div :key="application.name" class="hex__body application">
+            <div class="application__group" v-text="application.group" />
             <div class="application__status-indicator" />
             <div class="application__header application__time-ago is-muted">
               <sba-time-ago :date="application.statusTimestamp" />
             </div>
             <div class="application__body">
               <h1 class="application__name" v-text="application.name" />
               <p
+                v-if="application.instances"
                 class="application__instances is-muted"
                 v-text="
                   t('wallboard.instances_count', application.instances.length)
@@ -121,12 +142,26 @@ export default {
     const routerState = useRouterState({
       termFilter: '',
       wordWrap: true,
+      sortBy: 'name',
       statusFilter: 'none',
     });
 
     const { applications, applicationsInitialized, error } =
       useApplicationStore();
 
+    const groupNames = computed(() => {
+      return [
+        ...new Set<string>(
+          applications.value
+            .flatMap((application) => application.instances)
+            .map(
+              (instance) =>
+                instance.registration?.metadata?.['group'] ?? 'Ungrouped',
+            ),
+        ),
+      ];
+    });
+
     const fuse = computed(
       () =>
         new Fuse<Application>(applications.value, {
@@ -160,7 +195,7 @@ export default {
       let result = filterByTerm();
       result = filterByStatus(result);
 
-      return result;
+      return sortApplicationsBy(result, routerState.sortBy);
     });
 
     const healthStatus = computed(() => {
@@ -176,6 +211,7 @@ export default {
       t,
       healthStatus,
       routerState,
+      groupNames,
     };
   },
   methods: {
@@ -184,6 +220,7 @@ export default {
       if (!application) {
         return null;
       }
+
       if (application.status === HealthStatus.UP) {
         return 'up';
       }
@@ -199,13 +236,11 @@ export default {
       if (application.status === HealthStatus.OFFLINE) {
         return 'down';
       }
-      if (application.status === HealthStatus.UNKNOWN) {
-        return 'unknown';
-      }
-      return '';
+
+      return 'unknown';
     },
     select(application: Application) {
-      if (application.instances.length === 1) {
+      if (application.instances?.length === 1) {
         this.$router.push({
           name: 'instances/details',
           params: { instanceId: application.instances[0].id },
@@ -228,6 +263,31 @@ export default {
     });
   },
 };
+
+function sortApplicationsBy(
+  applications: Application[],
+  sortingCriterion: string,
+) {
+  const items = applications.flatMap((application: Application) => {
+    if (sortingCriterion === 'group') {
+      return application.instances.map((instance) => ({
+        ...instance,
+        status: application.status,
+        name: application.name,
+        group: instance.registration?.metadata?.['group'] ?? 'Ungrouped',
+      }));
+    } else {
+      return [application];
+    }
+  });
+  return items.sort((a: Application, b: Application) => {
+    if (sortingCriterion === 'group') {
+      return a.group.localeCompare(b.group);
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  });
+}
 </script>
 
 <style lang="postcss">
@@ -273,6 +333,18 @@ export default {
   margin-top: 0.5em;
 }
 
+.wallboard .application__group {
+  position: absolute;
+  top: 15%;
+  left: 0;
+  font-size: 40%;
+  transform: rotate(-30deg);
+  text-align: center;
+  width: 55%;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
 .up > polygon {
   stroke: theme('colors.green.400');
   fill: theme('colors.green.400');