From cde7f95dbaa589569de1619a9667a2188491ff5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Fri, 6 Oct 2023 17:17:58 +0200
Subject: [PATCH] feat(#1510): implement grouping of services in wallboard

---
 .../main/frontend/components/sba-button.vue   |   2 +
 .../src/main/frontend/i18n/i18n.de.json       |   4 +
 .../src/main/frontend/i18n/i18n.en.json       |   4 +
 .../src/main/frontend/services/instance.ts    |   9 +-
 .../frontend/services/instanceGroupService.ts |  86 ++++---
 .../src/main/frontend/store.ts                |   2 +-
 .../ApplicationListItemAction.vue             |   5 +-
 .../frontend/views/applications/index.vue     |  41 +++-
 .../frontend/views/wallboard/hex-mesh.vue     |  84 ++++---
 .../main/frontend/views/wallboard/index.vue   | 225 +++++++++++-------
 10 files changed, 300 insertions(+), 162 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue
index 8b9d967c4e2..a019b1b49d8 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue
@@ -4,6 +4,8 @@
     :class="cssClasses"
     :disabled="disabled === true"
     @click="$emit('click', $event)"
+    :aria-label="$attrs.ariaLabel"
+    :title="$attrs.title"
   >
     <slot />
   </button>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json
index 403e8c06d1e..7157616a9e1 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json
+++ b/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",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json
index 3aa37595363..15dce5fc037 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json
+++ b/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",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
index 434ffe03bd6..b300db7ca2d 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/instance.ts
@@ -433,6 +433,13 @@ type Registration = {
 }
 
 type StatusInfo = {
-    status: string
+    status: Status
     details: { [key: string]: string }
 }
+
+export type Status = "UNKNOWN" |
+    "OUT_OF_SERVICE" |
+    "UP" |
+    "DOWN" |
+    "OFFLINE" |
+    "RESTRICTED";
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/instanceGroupService.ts b/spring-boot-admin-server-ui/src/main/frontend/services/instanceGroupService.ts
index 37bcab2ebeb..4af16ffdf45 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/services/instanceGroupService.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/services/instanceGroupService.ts
@@ -1,44 +1,76 @@
 import Instance from "@/services/instance";
 import {groupBy, sortBy, transform} from "lodash-es";
 import Application from "@/services/application";
+import {useApplicationStore} from "@/composables/useApplicationStore";
 
 const groupingFunctions = {
-  'application': (instance: Instance) => instance.registration.name,
-  'group': (instance: Instance) => instance.registration.metadata?.['group'] ?? "term.no_group",
+    'application': (instance: Instance) => instance.registration.name,
+    'group': (instance: Instance) => instance.registration.metadata?.['group'] ?? "term.no_group",
 }
 
 export type GroupingType = keyof typeof groupingFunctions;
+export const isGroupingType = (grouping: string = ""): grouping is GroupingType => {
+    return Object.keys(groupingFunctions).includes(grouping);
+}
 
-export type InstancesListType = {
-  name?: string;
-  statusKey?: string;
-  status?: string;
-  instances?: Instance[];
-  applications?: Application[];
+export type InstancesListItem = {
+    name: string;
+    statusKey?: string;
+    status?: string;
+    instances: Instance[];
 }
 
 export const groupApplicationsBy = (applications: Application[], groupingFunction: GroupingType) => {
-  const instances = applications.flatMap(application => application.instances);
-  return groupInstancesBy(instances, groupingFunction);
+    const {applicationStore} = useApplicationStore();
+    const instances = applications.flatMap(application => application.instances);
+    const groupedInstances = groupInstancesBy(instances, groupingFunction);
+
+    if (groupingFunction === 'application') {
+        return groupedInstances
+            .map(item => {
+                return {
+                    ...applicationStore.findApplicationByInstanceId(item.instances[0].id),
+                    ...item,
+                }
+            });
+    }
+
+    return groupedInstances
+        .map(item => {
+            return {
+                status: getStatus(item.instances),
+                ...item,
+            }
+        });
+}
+
+function getStatus(instances: Instance[]) {
+    if (instances.every(instance => instance.statusInfo.status === 'DOWN')) {
+        return 'DOWN';
+    }
+    if (instances.every(instance => instance.statusInfo.status === 'UP')) {
+        return 'UP';
+    }
+    return "RESTRICTED";
 }
 
 export const groupInstancesBy = (instances: Instance[], groupingFunction: GroupingType) => {
-  const grouped = groupBy<Instance>(
-    instances,
-    groupingFunctions[groupingFunction]
-  );
-
-  const list = transform<Instance[], InstancesListType[]>(
-    grouped,
-    (result, instances, name) => {
-      result.push({
-        name,
-        instances: sortBy(instances, [
-          (instance) => instance.registration.name,
-        ]),
-      });
-    }, []);
-
-  return sortBy(list, [(item) => item.status]);
+    const grouped = groupBy<Instance>(
+        instances,
+        groupingFunctions[groupingFunction]
+    );
+
+    const list = transform<Instance[], InstancesListItem[]>(
+        grouped,
+        (result, instances, name) => {
+            result.push({
+                name,
+                instances: sortBy(instances, [
+                    (instance) => instance.registration.name,
+                ]),
+            });
+        }, []);
+
+    return sortBy(list, [(item) => item.status]);
 }
 
diff --git a/spring-boot-admin-server-ui/src/main/frontend/store.ts b/spring-boot-admin-server-ui/src/main/frontend/store.ts
index 6d0df303cd4..7a26a206958 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/store.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/store.ts
@@ -144,7 +144,7 @@ export default class ApplicationStore {
     }
   }
 
-  findApplicationByInstanceId(instanceId: string) {
+  findApplicationByInstanceId(instanceId: string): Application | undefined {
     return findApplicationForInstance(this.applications, instanceId);
   }
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue
index 2049ddf34e0..a49ba496a8f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue
@@ -52,6 +52,7 @@ import {ActionHandler, ApplicationActionHandler, InstanceActionHandler} from "@/
 import {useI18n} from "vue-i18n";
 import {useNotificationCenter} from "@stekoe/vue-toast-notificationcenter";
 import {inject} from "@vue/runtime-core";
+import {PropType} from "vue";
 
 const $sbaModal = inject('$sbaModal');
 const {t} = useI18n();
@@ -59,7 +60,7 @@ const notificationCenter = useNotificationCenter({});
 
 const props = defineProps({
   item: {
-    type: [Application, Instance],
+    type: Object as PropType<Application | Instance>,
     required: true,
   },
   hasActiveNotificationFilter: {
@@ -80,7 +81,7 @@ if (props.item instanceof Application) {
     name: 'journal',
     query: {application: props.item.name},
   };
-} else if(props.item instanceof Instance) {
+} else if (props.item instanceof Instance) {
   actionHandler = new InstanceActionHandler($sbaModal, t, notificationCenter);
   journalLink = {name: 'journal', query: {instanceId: props.item.id}};
 }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue
index e4fa34636c3..f439f8dae0a 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue
@@ -69,10 +69,14 @@
           <template v-else>
             <div class="text-right mb-6" v-if="groupNames.length > 1">
               <sba-button-group>
-                <sba-button @click="() => groupingCriterion = 'application'">
+                <sba-button @click="() => groupingCriterion = 'application'"
+                            :aria-label="t('term.group_by.application')"
+                            :title="t('term.group_by.application')">
                   <font-awesome-icon icon="list"/>
                 </sba-button>
-                <sba-button @click="() => groupingCriterion = 'group'">
+                <sba-button @click="() => groupingCriterion = 'group'"
+                            :aria-label="t('term.group_by.group')"
+                            :title="t('term.group_by.group')">
                   <font-awesome-icon icon="expand"/>
                 </sba-button>
               </sba-button-group>
@@ -98,7 +102,7 @@
               <template #actions v-if="isGroupedByApplication">
                 <ApplicationListItemAction
                     :has-notification-filters-support="hasNotificationFiltersSupport"
-                    :item="applicationStore.findApplicationByInstanceId(group.instances[0].id)"
+                    :item="applicationStore.findApplicationByInstanceId(group.instances[0].id)!"
                     @filter-settings="toggleNotificationFilterSettings"
                 />
               </template>
@@ -150,7 +154,7 @@ import Application from '@/services/application';
 import NotificationFilter from '@/services/notification-filter';
 import {anyValueMatches} from '@/utils/collections';
 import {concatMap, mergeWith, Subject, timer} from '@/utils/rxjs';
-import {groupApplicationsBy, GroupingType} from "@/services/instanceGroupService";
+import {groupApplicationsBy, GroupingType, isGroupingType} from "@/services/instanceGroupService";
 import ApplicationStats from "@/views/applications/ApplicationStats.vue";
 import ApplicationNotificationCenter from "@/views/applications/ApplicationNotificationCenter.vue";
 import ApplicationStatusHero from "@/views/applications/ApplicationStatusHero.vue";
@@ -171,8 +175,10 @@ const route = useRoute();
 const {applications, applicationsInitialized, applicationStore} = useApplicationStore();
 const notificationCenter = useNotificationCenter({});
 const filter = ref(route.query.q?.toString());
-const expandedGroups = ref([]);
-const groupingCriterion = ref<GroupingType>('application');
+const expandedGroups = ref([route.params.selected]);
+
+const queryParamGroupBy = route.query?.groupBy?.toString();
+const groupingCriterion = ref<GroupingType>(isGroupingType(queryParamGroupBy) ? queryParamGroupBy as GroupingType : 'application');
 const notificationFilterSubject = new Subject();
 const notificationFilters = ref([]);
 const hasNotificationFiltersSupport = ref(NotificationFilter.isSupported());
@@ -220,16 +226,21 @@ watch(applicationsInitialized, (initialized) => {
   }
 })
 
+let to = {
+  name: 'applications',
+  params: {selected: props.selected},
+} as RouteLocationNamedRaw;
+
 watch(filter, (q) => {
   let to = {
-    name: 'applications',
+    name: 'wallboard',
     params: {selected: props.selected},
   } as RouteLocationNamedRaw;
-
   if (q && q.length > 0) {
     to = {
       ...to,
       query: {
+        ...route.query,
         q
       },
     } as RouteLocationNamedRaw;
@@ -238,6 +249,20 @@ watch(filter, (q) => {
   router.replace(to);
 });
 
+watch(groupingCriterion, (groupBy) => {
+  if (groupBy && groupBy.length > 0) {
+    to = {
+      ...to,
+      query: {
+        ...route.query,
+        groupBy
+      },
+    } as RouteLocationNamedRaw;
+  }
+
+  router.replace(to);
+});
+
 watch(groupNames, (newValue) => {
   if (newValue.length === 1) {
     groupingCriterion.value = 'application';
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/hex-mesh.vue b/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/hex-mesh.vue
index 981bb03a1ee..63efd162b48 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/hex-mesh.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/hex-mesh.vue
@@ -17,34 +17,29 @@
 <template>
   <div ref="root" v-on-resize="onResize" class="hex-mesh">
     <svg
-      :height="meshHeight"
-      :width="meshWidth"
-      xmlns="http://www.w3.org/2000/svg"
+        :height="meshHeight"
+        :width="meshWidth"
+        xmlns="http://www.w3.org/2000/svg"
     >
-      <defs>
-        <clipPath id="hex-clip">
-          <polygon :points="hexPath" />
-        </clipPath>
-      </defs>
       <template v-for="row in rows">
         <g
-          v-for="col in cols + (row % 2 ? 0 : -1)"
-          :key="`${col}-${row}`"
-          :class="classForItem(item(col, row))"
-          :transform="translate(col, row)"
-          class="hex"
-          @click="click($event, col, row)"
+            v-for="col in cols + (row % 2 ? 0 : -1)"
+            :key="`${col}-${row}`"
+            :class="classForItem(item(col, row))"
+            :transform="translate(col, row)"
+            class="hex"
+            @click="click($event, col, row)"
         >
-          <polygon :points="hexPath" />
+          <polygon :points="hexPath"/>
           <foreignObject
-            v-if="item(col, row)"
-            :height="hexHeight"
-            :width="hexWidth"
-            style="pointer-events: none"
-            x="0"
-            y="0"
+              v-if="item(col, row)"
+              :height="hexHeight"
+              :width="hexWidth"
+              style="pointer-events: none"
+              x="0"
+              y="0"
           >
-            <slot :item="item(col, row)" name="item" />
+            <slot :item="item(col, row)" name="item"/>
           </foreignObject>
         </g>
       </template>
@@ -52,27 +47,28 @@
   </div>
 </template>
 
-<script>
-import { ref } from 'vue';
+<script lang="ts">
+import {PropType, ref} from 'vue';
 
 import onResize from '@/directives/on-resize';
-import { calcLayout } from '@/views/wallboard/utils';
+import {calcLayout} from '@/views/wallboard/utils';
+import {InstancesListItem} from "@/services/instanceGroupService";
 
 export default {
-  directives: { onResize },
+  directives: {onResize},
   props: {
     items: {
-      type: Array,
+      type: Object as PropType<InstancesListItem[]>,
       default: () => [],
     },
     classForItem: {
-      type: Function,
-      default: () => void 0,
+      type: Object as PropType<Function>,
+      default: () => () => void 0,
     },
   },
   emits: ['click'],
   setup() {
-    const root = ref(null);
+    const root = ref<HTMLElement | null>(null);
 
     return {
       root,
@@ -89,7 +85,7 @@ export default {
     },
     hexPath() {
       return `${this.point(0)} ${this.point(1)} ${this.point(2)} ${this.point(
-        3
+          3
       )} ${this.point(4)} ${this.point(5)}`;
     },
     hexHeight() {
@@ -107,7 +103,9 @@ export default {
   },
   watch: {
     sideLength(newVal) {
-      this.root.style['font-size'] = `${newVal / 9.5}px`;
+      if (this.root) {
+        this.root.style.fontSize = `${newVal / 9.5}px`;
+      }
     },
     itemCount: {
       handler: 'updateLayout',
@@ -115,26 +113,26 @@ export default {
     },
   },
   methods: {
-    translate(col, row) {
+    translate(col: number, row: number) {
       const x = (col - 1) * this.hexWidth + (row % 2 ? 0 : this.hexWidth / 2);
       const y = (row - 1) * this.sideLength * 1.5;
       return `translate(${x},${y})`;
     },
-    item(col, row) {
+    item(col: number, row: number): InstancesListItem {
       const rowOffset =
-        (row - 1) * this.cols - Math.max(Math.floor((row - 1) / 2), 0);
+          (row - 1) * this.cols - Math.max(Math.floor((row - 1) / 2), 0);
       const index = rowOffset + col - 1;
       return this.items[index];
     },
-    point(i) {
+    point(i: number): string {
       const innerSideLength = this.sideLength * 0.95;
       const marginTop = this.hexHeight / 2;
       const marginLeft = this.hexWidth / 2;
       return `${
-        marginLeft + innerSideLength * Math.cos(((1 + i * 2) * Math.PI) / 6)
+          marginLeft + innerSideLength * Math.cos(((1 + i * 2) * Math.PI) / 6)
       },${marginTop + innerSideLength * Math.sin(((1 + i * 2) * Math.PI) / 6)}`;
     },
-    click(event, col, row) {
+    click(event: MouseEvent, col: number, row: number) {
       const item = this.item(col, row);
       if (item) {
         this.$emit('click', item, event);
@@ -144,18 +142,18 @@ export default {
       if (this.root) {
         const boundingClientRect = this.root.getBoundingClientRect();
         const layout = calcLayout(
-          this.itemCount,
-          boundingClientRect.width,
-          boundingClientRect.height
+            this.itemCount,
+            boundingClientRect.width,
+            boundingClientRect.height
         );
         this.cols = layout.cols;
         this.rows = layout.rows;
         this.sideLength = layout.sideLength;
       }
     },
-    onResize(entries) {
+    onResize(entries: Event[]) {
       for (let e of entries) {
-        if (e.target === this.root) {
+        if (e.target as HTMLElement === this.root) {
           this.updateLayout();
         }
       }
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
index d300d12230f..9991a16b3d3 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
@@ -17,82 +17,99 @@
 <template>
   <section class="wallboard section">
     <div
-      class="flex gap-2 justify-end absolute w-full md:w-[28rem] top-14 right-0 bg-black/20 py-3 px-4 rounded-bl"
+        class="flex gap-2 justify-end absolute w-full md:w-[28rem] items-stretch top-14 right-0 bg-black/20 py-3 px-4 rounded-bl"
     >
       <sba-input
-        v-model="termFilter"
-        class="flex-1"
-        :placeholder="$t('term.filter')"
-        name="filter"
-        type="search"
+          v-model="termFilter"
+          class="flex-1"
+          :placeholder="$t('term.filter')"
+          name="filter"
+          type="search"
       >
         <template #prepend>
-          <font-awesome-icon icon="filter" />
+          <font-awesome-icon icon="filter"/>
         </template>
       </sba-input>
 
       <select
-        aria-label="status-filter"
-        v-if="healthStatus.size > 1"
-        v-model="statusFilter"
-        class="relative focus:z-10 focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 rounded"
+          aria-label="status-filter"
+          v-if="healthStatus.size > 1"
+          v-model="statusFilter"
+          class="relative focus:z-10 focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 rounded"
       >
-        <option selected value="none" v-text="$t('term.all')" />
+        <option selected value="none" v-text="$t('term.all')"/>
         <optgroup :label="t('health.label')">
           <option
-            v-for="status in healthStatus"
-            :key="status"
-            :value="status"
-            v-text="t('health.status.' + status)"
+              v-for="status in healthStatus"
+              :key="status"
+              :value="status"
+              v-text="t('health.status.' + status)"
           />
         </optgroup>
       </select>
+
+      <div class="text-right rounded h-full" v-if="groupNames.length > 1">
+        <sba-button-group>
+          <sba-button size="base"
+                      @click="() => groupingCriterion = 'application'"
+                      :aria-label="t('term.group_by.application')"
+                      :title="t('term.group_by.application')">
+            <font-awesome-icon icon="list"/>
+          </sba-button>
+          <sba-button size="base"
+                      @click="() => groupingCriterion = 'group'"
+                      :aria-label="t('term.group_by.group')"
+                      :title="t('term.group_by.group')">
+            <font-awesome-icon icon="expand"/>
+          </sba-button>
+        </sba-button-group>
+      </div>
     </div>
 
     <sba-alert
-      v-if="error"
-      :error="error"
-      :title="t('applications.server_connection_failed')"
-      class="my-0 fixed w-full"
-      severity="WARN"
+        v-if="error"
+        :error="error"
+        :title="t('applications.server_connection_failed')"
+        class="my-0 fixed w-full"
+        severity="WARN"
     />
 
-    <sba-loading-spinner v-if="!applicationsInitialized" />
+    <sba-loading-spinner v-if="!applicationsInitialized"/>
 
     <template v-if="applicationsInitialized">
       <div
-        v-if="termFilter.length > 0 && applications.length === 0"
-        class="flex w-full h-full items-center text-center text-white text-xl"
-        v-text="
+          v-if="termFilter.length > 0 && applications.length === 0"
+          class="flex w-full h-full items-center text-center text-white text-xl"
+          v-text="
           t('term.no_results_for_term', {
             term: termFilter,
           })
         "
       />
       <hex-mesh
-        v-if="applicationsInitialized"
-        :class-for-item="classForApplication"
-        :items="applications"
-        @click="select"
+          v-if="applicationsInitialized"
+          :class-for-item="classForApplication"
+          :items="applications"
+          @click="select"
       >
-        <template #item="{ item: application }">
-          <div :key="application.name" class="hex__body application">
-            <div class="application__status-indicator" />
-            <div class="application__header application__time-ago is-muted">
-              <sba-time-ago :date="application.statusTimestamp" />
+        <template #item="{ item }">
+          <div :key="item.name" class="hex__body application">
+            <div class="application__status-indicator"/>
+            <div class="application__header application__time-ago is-muted" v-if="groupingCriterion === 'application'">
+              <sba-time-ago :date="item.statusTimestamp"/>
             </div>
             <div class="application__body">
-              <h1 class="application__name" v-text="application.name" />
+              <h1 class="application__name" v-text="t(item.name)"/>
               <p
-                class="application__instances is-muted"
-                v-text="
-                  t('wallboard.instances_count', application.instances.length)
+                  class="application__instances is-muted"
+                  v-text="
+                  t('wallboard.instances_count', item.instances.length)
                 "
               />
             </div>
             <h2
-              class="application__footer application__version"
-              v-text="application.buildVersion"
+                class="application__footer application__version"
+                v-text="item.buildVersion"
             />
           </div>
         </template>
@@ -103,34 +120,71 @@
 
 <script lang="ts">
 import Fuse from 'fuse.js';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import {computed, ref, watch} from 'vue';
+import {useI18n} from 'vue-i18n';
 
-import { HealthStatus } from '@/HealthStatus';
-import { useApplicationStore } from '@/composables/useApplicationStore';
+import {HealthStatus} from '@/HealthStatus';
+import {useApplicationStore} from '@/composables/useApplicationStore';
 import hexMesh from '@/views/wallboard/hex-mesh';
+import {groupApplicationsBy, GroupingType, InstancesListItem, isGroupingType} from "@/services/instanceGroupService";
+import {RouteLocationNamedRaw, useRoute, useRouter} from "vue-router";
 
 export default {
-  components: { hexMesh },
+  components: {hexMesh},
   setup() {
-    const { t } = useI18n();
+    const {t} = useI18n();
+    const route = useRoute();
+    const router = useRouter();
+    const {applications, applicationsInitialized, error} = useApplicationStore();
+
     const termFilter = ref('');
-    const statusFilter = ref('none');
+    const statusFilter = ref(route.query?.status?.toString() ?? 'none');
+
+
+    const queryParamGroupBy = route.query?.groupBy?.toString();
+    const groupingCriterion = ref<GroupingType>(isGroupingType(queryParamGroupBy) ? queryParamGroupBy as GroupingType : 'application');
+    const groupNames = computed(() => {
+      return [...new Set(applications.value.flatMap(application => application.instances)
+          .map(instance => instance.registration.metadata?.['group'] ?? "Ungrouped"))];
+    });
+
+    watch(groupingCriterion, (groupBy) => {
+      if (groupBy && groupBy.length > 0) {
+        const to = {
+          name: 'wallboard',
+          query: {
+            ...route.query,
+            groupBy
+          },
+        } as RouteLocationNamedRaw;
+        router.replace(to);
+      }
+    });
 
-    const { applications, applicationsInitialized, error } =
-      useApplicationStore();
+    watch(statusFilter, (_statusFilter) => {
+      if (_statusFilter && _statusFilter.length > 0) {
+        const to = {
+          name: 'wallboard',
+          query: {
+            ...route.query,
+            status: _statusFilter
+          },
+        } as RouteLocationNamedRaw;
+        router.replace(to);
+      }
+    });
 
     const fuse = computed(
-      () =>
-        new Fuse(applications.value, {
-          includeScore: true,
-          useExtendedSearch: true,
-          threshold: 0.25,
-          keys: ['name', 'buildVersion', 'instances.name', 'instances.id'],
-        }),
+        () =>
+            new Fuse(applications.value, {
+              includeScore: true,
+              useExtendedSearch: true,
+              threshold: 0.25,
+              keys: ['name', 'buildVersion', 'instances.name', 'instances.id'],
+            }),
     );
 
-    const filteredApplications = computed(() => {
+    const groupedApplications = computed(() => {
       function filterByTerm() {
         if (termFilter.value.length > 0) {
           return fuse.value.search(termFilter.value).map((sr) => sr.item);
@@ -142,7 +196,7 @@ export default {
       function filterByStatus(result) {
         if (statusFilter.value !== 'none') {
           return result.filter(
-            (application) => application.status === statusFilter.value,
+              (application) => application.status === statusFilter.value,
           );
         }
 
@@ -152,7 +206,7 @@ export default {
       let result = filterByTerm();
       result = filterByStatus(result);
 
-      return result;
+      return groupApplicationsBy(result, groupingCriterion.value);
     });
 
     const healthStatus = computed(() => {
@@ -160,7 +214,9 @@ export default {
     });
 
     return {
-      applications: filteredApplications,
+      applications: groupedApplications,
+      groupingCriterion,
+      groupNames,
       applicationsInitialized,
       error,
       t,
@@ -170,45 +226,49 @@ export default {
     };
   },
   methods: {
-    classForApplication(application) {
-      if (!application) {
+    classForApplication(instancesListItem: InstancesListItem) {
+      if (!instancesListItem) {
         return null;
       }
-      if (application.status === HealthStatus.UP) {
+
+      if (instancesListItem.status === HealthStatus.UP) {
         return 'up';
       }
-      if (application.status === HealthStatus.RESTRICTED) {
+      if (instancesListItem.status === HealthStatus.RESTRICTED) {
         return 'restricted';
       }
-      if (application.status === HealthStatus.DOWN) {
+      if (instancesListItem.status === HealthStatus.DOWN) {
         return 'down';
       }
-      if (application.status === HealthStatus.OUT_OF_SERVICE) {
+      if (instancesListItem.status === HealthStatus.OUT_OF_SERVICE) {
         return 'down';
       }
-      if (application.status === HealthStatus.OFFLINE) {
+      if (instancesListItem.status === HealthStatus.OFFLINE) {
         return 'down';
       }
-      if (application.status === HealthStatus.UNKNOWN) {
+      if (instancesListItem.status === HealthStatus.UNKNOWN) {
         return 'unknown';
       }
-      return '';
+      return 'unknown';
     },
-    select(application) {
-      if (application.instances.length === 1) {
-        this.$router.push({
+    select(instancesListItem: InstancesListItem) {
+      if (instancesListItem.instances.length === 1) {
+        return this.$router.push({
           name: 'instances/details',
-          params: { instanceId: application.instances[0].id },
+          params: {instanceId: instancesListItem.instances[0].id},
         });
       } else {
         this.$router.push({
           name: 'applications',
-          params: { selected: application.name },
+          params: {selected: instancesListItem.name},
+          query: {
+            groupBy: this.groupingCriterion
+          }
         });
       }
     },
   },
-  install({ viewRegistry }) {
+  install({viewRegistry}) {
     viewRegistry.addView({
       path: '/wallboard',
       name: 'wallboard',
@@ -276,6 +336,16 @@ export default {
   stroke-width: 2;
 }
 
+.unknown > polygon {
+  stroke: theme('colors.gray.400');
+  fill: theme('colors.gray.400');
+}
+
+.restricted > polygon {
+  stroke: theme('colors.yellow.400');
+  fill: theme('colors.yellow.400');
+}
+
 .hex .hex__body::after {
   display: flex;
   justify-content: center;
@@ -306,9 +376,4 @@ export default {
   content: '?';
   color: theme('colors.gray.500');
 }
-
-.restricted > polygon {
-  stroke: theme('colors.yellow.400');
-  fill: theme('colors.yellow.400');
-}
 </style>