fix: update panel state management in details components (#4652)

Author: SteKoe

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

@@ -18,13 +18,13 @@
   <sba-accordion
     v-if="hasLoaded"
     :id="`gc-details-panel__${instance.id}`"
-    v-model="panelCollapsed"
+    v-model="panelOpen"
     :title="$t('instances.details.gc.title')"
   >
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelCollapsed }"
+        :class="{ 'opacity-0': !panelOpen }"
       >
         <ul class="flex gap-4">
           <li>
@@ -95,7 +95,7 @@ export default {
     },
   },
   data: () => ({
-    panelCollapsed: false,
+    panelOpen: true,
     hasLoaded: false,
     error: null,
     current: null,

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

@@ -17,7 +17,7 @@
 <template>
   <sba-accordion
     :id="`health-details-panel__${instance.id}`"
-    v-model="panelCollapsed"
+    v-model="panelOpen"
     :title="$t('instances.details.health.title')"
     :loading="loading"
   >
@@ -26,7 +26,7 @@
         v-if="health.status"
         :status="health.status"
         class="ml-2 transition-opacity"
-        :class="{ 'opacity-0': !panelCollapsed }"
+        :class="{ 'opacity-0': !panelOpen }"
       />
     </template>
 
@@ -109,7 +109,7 @@ export default {
     loading: false,
     liveHealth: null,
     healthGroups: [],
-    panelCollapsed: false,
+    panelOpen: true,
     healthGroupOpenStatus: {} as {
       isOpen: boolean;
       collapsible: boolean;

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

@@ -17,15 +17,12 @@
 <template>
   <sba-accordion
     :id="`info-details-panel__${instance.id}`"
-    v-model="panelCollapsed"
+    v-model="panelOpen"
     :title="$t('instances.details.info.title')"
     :loading="loading"
   >
     <template #title>
-      <div
-        class="ml-2 transition-opacity"
-        :class="{ 'opacity-0': !panelCollapsed }"
-      >
+      <div class="ml-2 transition-opacity" :class="{ 'opacity-0': !panelOpen }">
         ({{ Object.keys(info).length }})
       </div>
     </template>
@@ -67,7 +64,7 @@ export default {
     },
   },
   data: () => ({
-    panelCollapsed: false,
+    panelOpen: true,
     error: null,
     loading: false,
     liveInfo: null,

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

@@ -18,13 +18,13 @@
   <sba-accordion
     v-if="hasLoaded"
     :id="`memory-details-panel__${type}__${instance.id}`"
-    v-model="panelCollapsed"
+    v-model="panelOpen"
     :title="$t('instances.details.memory.title') + `: ${name}`"
   >
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelCollapsed }"
+        :class="{ 'opacity-0': !panelOpen }"
       >
         <div class="flex">
           {{ prettyBytes(current.used) }} /
@@ -117,7 +117,7 @@ export default defineComponent({
     },
   },
   data: () => ({
-    panelCollapsed: true,
+    panelOpen: true,
     hasLoaded: false,
     error: null,
     current: null,

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

@@ -17,15 +17,12 @@
 <template>
   <sba-accordion
     :id="`metadata-details-panel__${instance.id}`"
-    v-model="panelCollapsed"
+    v-model="panelOpen"
     :title="$t('instances.details.metadata.title')"
     :seamless="true"
   >
     <template #title>
-      <div
-        class="ml-2 transition-opacity"
-        :class="{ 'opacity-0': !panelCollapsed }"
-      >
+      <div class="ml-2 transition-opacity" :class="{ 'opacity-0': !panelOpen }">
         ({{ Object.keys(metadata).length }})
       </div>
     </template>
@@ -43,7 +40,7 @@ const { instance } = defineProps<{
   instance: Instance;
 }>();
 
-const panelCollapsed = ref(false);
+const panelOpen = ref(true);
 
 const metadata = computed(() => {
   return instance.registration.metadata;

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

@@ -18,13 +18,13 @@
   <sba-accordion
     v-if="hasLoaded"
     :id="`process-details-panel__${instance.id}`"
-    v-model="panelCollapsed"
+    v-model="panelOpen"
     :title="$t('instances.details.process.title')"
   >
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelCollapsed }"
+        :class="{ 'opacity-0': !panelOpen }"
       >
         <ul class="flex gap-4">
           <li>
@@ -125,7 +125,7 @@ const uptime = ref<UptimeData>({ value: null, baseUnit: null });
 const systemCpuLoad = ref<number | null>(null);
 const processCpuLoad = ref<number | null>(null);
 const systemCpuCount = ref<number | null>(null);
-const panelCollapsed = ref<boolean>(false);
+const panelOpen = ref<boolean>(true);
 
 // Berechnete Eigenschaften
 const tableData = computed<TableDataMap>(() => {

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

@@ -18,13 +18,13 @@
   <sba-accordion
     v-if="hasLoaded"
     :id="`threads-details-panel__${instance.id}`"
-    v-model="panelCollapsed"
+    v-model="panelOpen"
     :title="$t('instances.details.threads.title')"
   >
     <template #title>
       <div
         class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
-        :class="{ 'opacity-0': !panelCollapsed }"
+        :class="{ 'opacity-0': !panelOpen }"
       >
         <ul class="flex gap-4">
           <li>
@@ -99,7 +99,7 @@ export default {
     },
   },
   data: () => ({
-    panelCollapsed: false,
+    panelOpen: true,
     hasLoaded: false,
     error: null,
     current: null,

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

@@ -21,17 +21,46 @@
       <details-hero :instance="instance" />
     </template>
 
-    <div class="grid grid-cols-2 gap-4 items-start">
-      <details-info v-if="hasInfo" :instance="instance" />
-      <details-health :instance="instance" />
-      <details-metadata v-if="hasMetadata" :instance="instance" />
-      <details-process v-if="hasProcess" :instance="instance" />
-      <details-gc v-if="hasGc" :instance="instance" />
-      <details-threads v-if="hasThreads" :instance="instance" />
-      <details-memory v-if="hasMemory" :instance="instance" type="heap" />
-      <details-memory v-if="hasMemory" :instance="instance" type="nonheap" />
-      <details-datasources v-if="hasDatasources" :instance="instance" />
-      <details-caches v-if="hasCaches" :instance="instance" />
+    <div class="flex gap-6 flex-col lg:flex-row">
+      <div class="flex-1">
+        <details-info v-if="hasInfo" :instance="instance" />
+        <details-metadata v-if="hasMetadata" :instance="instance" />
+      </div>
+      <div class="flex-1">
+        <details-health :instance="instance" />
+      </div>
+    </div>
+
+    <div class="flex gap-6 flex-col lg:flex-row">
+      <div class="flex-1">
+        <details-process
+          v-if="hasProcess"
+          :instance="instance"
+          class="break-inside-avoid"
+        />
+        <details-gc v-if="hasGc" :instance="instance" />
+      </div>
+      <div class="flex-1">
+        <details-threads v-if="hasThreads" :instance="instance" />
+      </div>
+    </div>
+
+    <div class="flex gap-6 flex-col lg:flex-row">
+      <div class="flex-1">
+        <details-memory v-if="hasMemory" :instance="instance" type="heap" />
+      </div>
+      <div class="flex-1">
+        <details-memory v-if="hasMemory" :instance="instance" type="nonheap" />
+      </div>
+    </div>
+
+    <div class="flex gap-6 flex-col lg:flex-row">
+      <div class="flex-1">
+        <details-datasources v-if="hasDatasources" :instance="instance" />
+      </div>
+      <div class="flex-1">
+        <details-caches v-if="hasCaches" :instance="instance" />
+      </div>
     </div>
   </sba-instance-section>
 </template>
@@ -79,7 +108,6 @@ export default {
     },
   },
   data: () => ({
-    masonryId: 'details-masonry',
     hasLoaded: true,
     error: null,
     metrics: [],