From 95f94120cf94d5b9a858b42e500baba063869298 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Tue, 24 Feb 2026 14:33:39 +0100
Subject: [PATCH 1/5] fix: refactor accordion component to use consistent open
 state variable

---
 .../frontend/components/sba-accordion.vue     | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue
index 905692e9b23..b57e3c6e74f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue
@@ -17,11 +17,11 @@
 <template>
   <sba-panel
     v-bind="$attrs"
-    :aria-expanded="_open"
+    :aria-expanded="open"
     :class="
       classNames(
         {
-          '!p-0 !h-0 overflow-hidden': !_open,
+          '!p-0 !h-0 overflow-hidden': !open,
         },
         'transition-[height] h-auto',
       )
@@ -38,7 +38,7 @@
         :class="
           classNames(
             {
-              '-rotate-90': !_open,
+              '-rotate-90': !open,
             },
             'mr-2 transition-[transform]',
           )
@@ -58,7 +58,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import classNames from 'classnames';
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 
 const { id = null } = defineProps<{
   id?: string;
@@ -69,28 +69,26 @@ const emit = defineEmits<{
   (e: 'update:modelValue', payload: boolean): void;
 }>();
 
-const _open = ref(open.value);
-
 onMounted(() => {
   if (id) {
     const storedValue = localStorage.getItem(
       `de.codecentric.spring-boot-admin.accordion.${id}.open`,
     );
     if (storedValue !== null) {
-      _open.value = storedValue === 'true';
-      emit('update:modelValue', !_open.value);
+      open.value = storedValue === 'true';
+      emit('update:modelValue', !open.value);
     }
   }
 });
 
 const handleTitleClick = () => {
-  _open.value = !_open.value;
-  emit('update:modelValue', !_open.value);
+  open.value = !open.value;
+  emit('update:modelValue', !open.value);
 
   if (id) {
     localStorage.setItem(
       `de.codecentric.spring-boot-admin.accordion.${id}.open`,
-      _open.value.toString(),
+      open.value.toString(),
     );
   }
 };

From 25ad0611c1b62bc153e27f68404ca675300a46c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Tue, 24 Feb 2026 14:33:46 +0100
Subject: [PATCH 2/5] fix: update metadata type to use a single object instead
 of an array

---
 .../src/main/frontend/services/instance.ts                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 55612ecb62a..c67dada41ee 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
@@ -517,7 +517,7 @@ export type Registration = {
   healthUrl: string;
   serviceUrl?: string;
   source: string;
-  metadata?: { [key: string]: string }[];
+  metadata?: { [key: string]: string };
 };
 
 type StatusInfo = {

From 4513c973c3b34cc3317214a2fadaa52d57ae1b9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Tue, 24 Feb 2026 14:33:56 +0100
Subject: [PATCH 3/5] fix: correct metadata rendering logic and add unit tests
 for DetailsMetadata component

---
 .../details/details-metadata.spec.ts          | 96 +++++++++++++++++++
 .../instances/details/details-metadata.vue    |  4 +-
 2 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.spec.ts

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.spec.ts
new file mode 100644
index 00000000000..405c3f246f8
--- /dev/null
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.spec.ts
@@ -0,0 +1,96 @@
+import { screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+import DetailsMetadata from './details-metadata.vue';
+
+import { applications } from '@/mocks/applications/data';
+import Application from '@/services/application';
+import Instance from '@/services/instance';
+import { render } from '@/test-utils';
+
+describe('DetailsMetadata', () => {
+  it('should render metadata table with keys and values', () => {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+
+    render(DetailsMetadata, {
+      props: { instance },
+    });
+
+    expect(screen.getByText('startup')).toBeVisible();
+    expect(screen.getByText('2021-10-29T08:50:07.486289+02:00')).toBeVisible();
+    expect(screen.getByText('tags.environment')).toBeVisible();
+    expect(screen.getByText('test')).toBeVisible();
+  });
+
+  it('should show metadata count in title', () => {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+
+    render(DetailsMetadata, {
+      props: { instance },
+    });
+
+    expect(screen.getByText('(2)')).toBeVisible();
+  });
+
+  it('should show no metadata message if metadata is empty', () => {
+    const application = new Application(applications[0]);
+    const instance = new Instance({
+      ...application.instances[0],
+      registration: {
+        ...application.instances[0].registration,
+        metadata: {},
+      },
+    });
+
+    render(DetailsMetadata, {
+      props: { instance },
+    });
+
+    expect(
+      screen.getByText('instances.details.metadata.no_data_provided'),
+    ).toBeVisible();
+  });
+
+  it('should show count as (0) when metadata is empty', () => {
+    const application = new Application(applications[0]);
+    const instance = new Instance({
+      ...application.instances[0],
+      registration: {
+        ...application.instances[0].registration,
+        metadata: {},
+      },
+    });
+
+    render(DetailsMetadata, {
+      props: { instance },
+    });
+
+    expect(screen.getByText('(0)')).toBeVisible();
+  });
+
+  it('should sort metadata keys alphabetically', () => {
+    const application = new Application(applications[0]);
+    const instance = new Instance({
+      ...application.instances[0],
+      registration: {
+        ...application.instances[0].registration,
+        metadata: {
+          zebra: 'value1',
+          apple: 'value2',
+          banana: 'value3',
+        },
+      },
+    });
+
+    render(DetailsMetadata, {
+      props: { instance },
+    });
+
+    const keys = screen.getAllByRole('term');
+    expect(keys[0]).toHaveTextContent('apple');
+    expect(keys[1]).toHaveTextContent('banana');
+    expect(keys[2]).toHaveTextContent('zebra');
+  });
+});
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue
index 6de4c9c573b..fbe02fd8196 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue
@@ -26,7 +26,7 @@
         ({{ Object.keys(metadata).length }})
       </div>
     </template>
-    <sba-key-value-table v-if="isEmptyMetadata" :map="metadata" />
+    <sba-key-value-table v-if="!isEmptyMetadata" :map="metadata" />
     <p
       v-else
       class="mx-4 my-3"
@@ -54,6 +54,6 @@ const metadata = computed(() => {
 });
 
 const isEmptyMetadata = computed(() => {
-  return Object.keys(instance.registration.metadata).length <= 0;
+  return Object.keys(metadata.value).length <= 0;
 });
 </script>

From 9fca488f778dec5a0eee13426a861db05d4c96a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Fri, 27 Feb 2026 08:50:24 +0100
Subject: [PATCH 4/5] fix: update opacity logic for panel open state across
 multiple detail components

---
 .../main/frontend/views/instances/details/details-gc.vue  | 2 +-
 .../frontend/views/instances/details/details-health.vue   | 2 +-
 .../frontend/views/instances/details/details-info.vue     | 2 +-
 .../frontend/views/instances/details/details-memory.vue   | 2 +-
 .../frontend/views/instances/details/details-metadata.vue | 8 ++++----
 .../frontend/views/instances/details/details-process.vue  | 2 +-
 .../frontend/views/instances/details/details-threads.vue  | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-gc.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-gc.vue
index d4e462e240e..720bdea951a 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-gc.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-gc.vue
@@ -24,7 +24,7 @@
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelOpen }"
+        :class="{ 'opacity-0': panelOpen }"
       >
         <ul class="flex gap-4">
           <li>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
index 4acaccb5326..fbf6cfd7505 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
@@ -26,7 +26,7 @@
         v-if="health.status"
         :status="health.status"
         class="ml-2 transition-opacity"
-        :class="{ 'opacity-0': !panelOpen }"
+        :class="{ 'opacity-0': panelOpen }"
       />
     </template>
 
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue
index 2248568b9bc..07dc42d7919 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue
@@ -22,7 +22,7 @@
     :loading="loading"
   >
     <template #title>
-      <div class="ml-2 transition-opacity" :class="{ 'opacity-0': !panelOpen }">
+      <div class="ml-2 transition-opacity" :class="{ 'opacity-0': panelOpen }">
         ({{ Object.keys(info).length }})
       </div>
     </template>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.vue
index a2b5f3c5201..f204aa3e360 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.vue
@@ -24,7 +24,7 @@
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelOpen }"
+        :class="{ 'opacity-0': panelOpen }"
       >
         <div class="flex">
           {{ prettyBytes(current.used) }} /
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue
index fbe02fd8196..c0133318261 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue
@@ -22,11 +22,11 @@
     :seamless="true"
   >
     <template #title>
-      <div class="ml-2 transition-opacity" :class="{ 'opacity-0': !panelOpen }">
+      <div class="ml-2 transition-opacity" :class="{ 'opacity-0': panelOpen }">
         ({{ Object.keys(metadata).length }})
       </div>
     </template>
-    <sba-key-value-table v-if="!isEmptyMetadata" :map="metadata" />
+    <sba-key-value-table v-if="hasMetadata" :map="metadata" />
     <p
       v-else
       class="mx-4 my-3"
@@ -53,7 +53,7 @@ const metadata = computed(() => {
   return sortObject(instance.registration.metadata);
 });
 
-const isEmptyMetadata = computed(() => {
-  return Object.keys(metadata.value).length <= 0;
+const hasMetadata = computed(() => {
+  return Object.keys(metadata.value).length > 0;
 });
 </script>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-process.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-process.vue
index ec1fd6cc88f..80d035af350 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-process.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-process.vue
@@ -24,7 +24,7 @@
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelOpen }"
+        :class="{ 'opacity-0': panelOpen }"
       >
         <ul class="flex gap-4">
           <li>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.vue
index c776b293638..2e1b13f16e6 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.vue
@@ -24,7 +24,7 @@
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelOpen }"
+        :class="{ 'opacity-0': panelOpen }"
       >
         <ul class="flex gap-4">
           <li>

From a7ee9b0d8469b3e1af2e8a7ec74a55a73808c331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Fri, 27 Feb 2026 09:03:33 +0100
Subject: [PATCH 5/5] fix: refactor accordion component to use watch for open
 state changes

---
 .../main/frontend/components/sba-accordion.vue  | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue
index b57e3c6e74f..c51b8ba93d6 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue
@@ -58,16 +58,13 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import classNames from 'classnames';
-import { onMounted } from 'vue';
+import { onMounted, watch } from 'vue';
 
 const { id = null } = defineProps<{
   id?: string;
 }>();
 
 const open = defineModel({ default: true, type: Boolean });
-const emit = defineEmits<{
-  (e: 'update:modelValue', payload: boolean): void;
-}>();
 
 onMounted(() => {
   if (id) {
@@ -76,20 +73,20 @@ onMounted(() => {
     );
     if (storedValue !== null) {
       open.value = storedValue === 'true';
-      emit('update:modelValue', !open.value);
     }
   }
 });
 
-const handleTitleClick = () => {
-  open.value = !open.value;
-  emit('update:modelValue', !open.value);
-
+watch(open, (newValue) => {
   if (id) {
     localStorage.setItem(
       `de.codecentric.spring-boot-admin.accordion.${id}.open`,
-      open.value.toString(),
+      newValue.toString(),
     );
   }
+});
+
+const handleTitleClick = () => {
+  open.value = !open.value;
 };
 </script>