fix(#5108): show correct metadata details

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,40 +58,35 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import classNames from 'classnames';
-import { onMounted, ref } 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;
-}>();
-
-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';
     }
   }
 });
 
-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>

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 = {

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>

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>
 

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>

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) }} /

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');
+  });
+});

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(instance.registration.metadata).length <= 0;
+const hasMetadata = computed(() => {
+  return Object.keys(metadata.value).length > 0;
 });
 </script>

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>

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>