From d9e0e139b17d5825d0890e3fc1f2847b56a6a68f Mon Sep 17 00:00:00 2001
From: ulrichschulte <ulrich.schulte@codecentric.de>
Date: Thu, 23 Apr 2026 21:32:00 +0200
Subject: [PATCH] Removed calls to client actuator endpoints in the health and
 info detail views. Instead, these views now reactively consume the health and
 info data that are already kept up-to-date via SSE events from the backend's
 StatusUpdater and InfoUpdater. Health groups are fetched once per instance
 (not on every SSE update) and group details are loaded lazily on click. This
 preserves the #5286 fix (no 1+N requests on SSE status changes) while
 restoring health group functionality.

---
 .../instances/details/details-health.spec.ts  | 457 +++++++++++-------
 .../instances/details/details-health.vue      | 227 ++++-----
 .../instances/details/details-info.spec.ts    | 295 +++++------
 .../views/instances/details/details-info.vue  |  69 +--
 4 files changed, 483 insertions(+), 565 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts
index fbdf71e32f8..1bd3faa6ee7 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts
@@ -1,74 +1,40 @@
 import userEvent from '@testing-library/user-event';
 import { screen, waitFor } from '@testing-library/vue';
-import { HttpResponse, http } from 'msw';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { AxiosResponse } from 'axios';
+import { describe, expect, it, vi } from 'vitest';
 
 import { applications } from '@/mocks/applications/data';
-import { server } from '@/mocks/server';
 import Application from '@/services/application';
 import { render } from '@/test-utils';
 import DetailsHealth from '@/views/instances/details/details-health.vue';
 
-function deferred<T>() {
-  let resolve!: (value: T) => void;
-  let reject!: (reason?: any) => void;
-  const promise = new Promise<T>((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-}
-
 describe('DetailsHealth', () => {
-  const healthHandlerSpy = vi.fn();
-
-  beforeEach(() => {
-    healthHandlerSpy.mockReset();
-    server.use(
-      http.get('/instances/:instanceId/actuator/health', () => {
-        healthHandlerSpy();
-        return HttpResponse.json({
-          instance: 'UP',
-          groups: ['liveness'],
-        });
-      }),
-      http.get('/instances/:instanceId/actuator/health/liveness', () => {
-        return HttpResponse.json({
-          status: 'UP',
-          details: {
-            disk: { status: 'UNKNOWN' },
-            database: { status: 'UNKNOWN' },
-          },
-        });
-      }),
-    );
-  });
-
-  it('should display groups as part of health section', async () => {
+  it('should display health status from instance.statusInfo', async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
 
+    // Mock fetchHealth for groups (will be called once on mount)
+    instance.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
+
     render(DetailsHealth, {
       props: {
         instance,
       },
     });
 
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
-
-    expect(
-      await screen.findByRole('button', {
-        name: /instances.details.health_group.title: liveness/,
-      }),
-    ).toBeVisible();
+    const statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('UP');
   });
 
-  it('health groups are toggleable, when details are available', async () => {
+  it('should display health details from instance.statusInfo', async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
-    instance.statusInfo = { status: 'UP', details: {} };
+
+    instance.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
 
     render(DetailsHealth, {
       props: {
@@ -76,59 +42,17 @@ describe('DetailsHealth', () => {
       },
     });
 
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
-
-    const button = screen.queryByRole('button', {
-      name: /instances.details.health_group.title: liveness/,
-    });
-    expect(button).toBeVisible();
-
-    expect(screen.queryByLabelText('disk')).toBeNull();
-    expect(screen.queryByLabelText('database')).toBeNull();
-
-    await userEvent.click(button);
-
-    expect(screen.queryByLabelText('disk')).toBeDefined();
-    expect(screen.queryByLabelText('database')).toBeDefined();
+    expect(await screen.findByLabelText('db')).toBeInTheDocument();
+    expect(await screen.findByLabelText('diskSpace')).toBeInTheDocument();
+    expect(await screen.findByLabelText('ping')).toBeInTheDocument();
   });
 
-  it('should update health details when instance prop changes (watch)', async () => {
-    const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-    const instance2 = {
-      ...instance1,
-      id: 'other-id',
-      statusInfo: { status: 'DOWN', details: {} },
-    };
-
-    const { rerender } = render(DetailsHealth, {
-      props: {
-        instance: instance1,
-      },
-    });
-
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
-
-    // Simulate prop change
-    await rerender({ instance: instance2 });
-
-    // Wait for the component to react to the prop change
-    await waitFor(() =>
-      expect(
-        screen.queryByRole('button', {
-          name: /instances.details.health_group.title: liveness/,
-        }),
-      ).toBeVisible(),
-    );
-  });
-
-  it('should refetch health when instance version changes (SSE update)', async () => {
+  it('should update when instance prop changes', async () => {
     const application = new Application(applications[0]);
     const instance1 = application.instances[0];
+    instance1.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
 
     const { rerender } = render(DetailsHealth, {
       props: {
@@ -136,133 +60,290 @@ describe('DetailsHealth', () => {
       },
     });
 
-    await waitFor(() => {
-      expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
-    });
+    let statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('UP');
 
     const instance2 = new Application({
-      ...application,
+      ...applications[0],
       instances: [
         {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
+          ...applications[0].instances[0],
+          statusInfo: { status: 'DOWN', details: {} },
         },
       ],
     }).instances[0];
+    instance2.fetchHealth = vi
+      .fn()
+      .mockResolvedValue({ data: { status: 'DOWN', groups: [] } });
 
     await rerender({ instance: instance2 });
 
-    await waitFor(() => {
-      expect(healthHandlerSpy).toHaveBeenCalledTimes(2);
-    });
+    statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('DOWN');
   });
 
-  it('should ignore stale health response when instance updates quickly', async () => {
+  it('should handle empty/missing details gracefully', async () => {
     const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-
-    const p1 = deferred<{ data: any }>();
-    const p2 = deferred<{ data: any }>();
-    const fetchHealthSpy = vi
+    const instance = application.instances[0];
+    instance.statusInfo = { status: 'UP', details: {} };
+    instance.fetchHealth = vi
       .fn()
-      .mockReturnValueOnce(p1.promise)
-      .mockReturnValueOnce(p2.promise);
-    instance1.fetchHealth = fetchHealthSpy;
-    instance1.fetchHealthGroup = vi.fn().mockResolvedValue({ data: {} });
+      .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
 
-    const { rerender } = render(DetailsHealth, {
+    render(DetailsHealth, {
       props: {
-        instance: instance1,
+        instance,
       },
     });
 
-    await waitFor(() => {
-      expect(fetchHealthSpy).toHaveBeenCalledTimes(1);
-    });
+    const statusBadges = await screen.findAllByRole('status');
+    expect(statusBadges[0]).toHaveTextContent('UP');
+  });
 
-    const instance2 = new Application({
-      ...application,
-      instances: [
-        {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
-        },
-      ],
-    }).instances[0];
-    instance2.fetchHealth = fetchHealthSpy;
-    instance2.fetchHealthGroup = instance1.fetchHealthGroup;
+  describe('SSE reactive updates', () => {
+    it('should call fetchHealth once on mount, not on SSE version changes', async () => {
+      const baseApp = applications[0];
+      const instance1 = new Application(baseApp).instances[0];
+      const fetchHealthSpy1 = vi.spyOn(instance1, 'fetchHealth');
+      fetchHealthSpy1.mockResolvedValue({
+        data: { status: 'UP', groups: ['liveness'] },
+      } as AxiosResponse);
+
+      const { rerender } = render(DetailsHealth, {
+        props: { instance: instance1 },
+      });
+
+      await screen.findAllByRole('status');
+      expect(fetchHealthSpy1).toHaveBeenCalledTimes(1);
+
+      // Same instance, different version (SSE update) — should NOT call fetchHealth again
+      const instance2 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: (baseApp.instances[0].version || 1) + 1,
+            statusInfo: { status: 'DOWN', details: {} },
+          },
+        ],
+      }).instances[0];
+      const fetchHealthSpy2 = vi.spyOn(instance2, 'fetchHealth');
+      fetchHealthSpy2.mockResolvedValue({
+        data: { status: 'DOWN', groups: [] },
+      } as AxiosResponse);
 
-    await rerender({ instance: instance2 });
+      await rerender({ instance: instance2 });
 
-    await waitFor(() => {
-      expect(fetchHealthSpy).toHaveBeenCalledTimes(2);
+      // Original instance's spy should still be 1 (no additional calls)
+      expect(fetchHealthSpy1).toHaveBeenCalledTimes(1);
     });
 
-    // Resolve second (newer) response first.
-    p2.resolve({ data: { status: 'UP', groups: [] } });
-    await waitFor(() => {
-      expect(screen.getByText('UP')).toBeInTheDocument();
-    });
+    it('should reactively update through multiple SSE status changes without extra HTTP calls', async () => {
+      const baseApp = applications[0];
+
+      const instance1 = new Application(baseApp).instances[0];
+      instance1.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
+
+      const { rerender } = render(DetailsHealth, {
+        props: { instance: instance1 },
+      });
+
+      let statusBadges = await screen.findAllByRole('status');
+      expect(statusBadges[0]).toHaveTextContent('UP');
+
+      // SSE update: same id, different version
+      const instance2 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: 4,
+            statusInfo: {
+              status: 'DOWN',
+              details: {
+                db: {
+                  status: 'DOWN',
+                  details: { error: 'Connection refused' },
+                },
+              },
+            },
+          },
+        ],
+      }).instances[0];
+      instance2.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'DOWN', groups: [] } });
+
+      await rerender({ instance: instance2 });
 
-    // Resolve first (older) response afterwards; UI must not regress.
-    p1.resolve({ data: { status: 'DOWN', groups: [] } });
-    await waitFor(() => {
-      expect(screen.queryByText('DOWN')).not.toBeInTheDocument();
+      statusBadges = await screen.findAllByRole('status');
+      expect(statusBadges[0]).toHaveTextContent('DOWN');
+      expect(await screen.findByLabelText('db')).toBeInTheDocument();
     });
-    expect(screen.getByText('UP')).toBeInTheDocument();
   });
 
-  it('should not display health group button if no groups are present', async () => {
-    server.use(
-      http.get('/instances/:instanceId/actuator/health', () => {
-        return HttpResponse.json({
-          instance: 'UP',
-          groups: [],
-        });
-      }),
-    );
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
+  describe('lazy health groups', () => {
+    it('should display health group buttons after mount', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: ['liveness', 'readiness'] },
+      });
+      const fetchGroupSpy = vi.spyOn(instance, 'fetchHealthGroup');
 
-    render(DetailsHealth, {
-      props: {
-        instance,
-      },
+      render(DetailsHealth, {
+        props: { instance },
+      });
+
+      await screen.findAllByRole('status');
+
+      expect(
+        await screen.findByRole('button', { name: /liveness/ }),
+      ).toBeInTheDocument();
+      expect(
+        await screen.findByRole('button', { name: /readiness/ }),
+      ).toBeInTheDocument();
+      expect(fetchGroupSpy).not.toHaveBeenCalled();
     });
 
-    await waitFor(() =>
-      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
-    );
+    it('should fetch group details on first click', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: ['custom-group'] },
+      });
+      const fetchGroupSpy = vi.spyOn(instance, 'fetchHealthGroup');
+      fetchGroupSpy.mockResolvedValue({
+        data: {
+          status: 'UP',
+          details: {
+            customDetails: {
+              status: 'UP',
+              details: { error: 'no property sources located' },
+            },
+            evenMoreDiskSpace: {
+              status: 'UP',
+              details: {
+                total: 994662584320,
+                free: 300063879168,
+                threshold: 10485760,
+                exists: true,
+              },
+            },
+          },
+        },
+      } as AxiosResponse);
+
+      render(DetailsHealth, {
+        props: { instance },
+      });
 
-    expect(
-      screen.queryByRole('button', {
-        name: /instances.details.health_group.title: liveness/,
-      }),
-    ).toBeNull();
-  });
+      const button = await screen.findByRole('button', {
+        name: /custom-group/,
+      });
+      await userEvent.click(button);
 
-  it('should fetch health details only once on startup', async () => {
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
+      await waitFor(() => {
+        expect(fetchGroupSpy).toHaveBeenCalledWith('custom-group');
+      });
 
-    render(DetailsHealth, {
-      props: {
-        instance,
-      },
+      // custom-group has service component
+      expect(await screen.findByLabelText('customDetails')).toBeInTheDocument();
+      expect(
+        await screen.findByLabelText('evenMoreDiskSpace'),
+      ).toBeInTheDocument();
     });
 
-    await waitFor(() => {
-      expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
+    it('should toggle group visibility after data is loaded', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: ['custom-group'] },
+      });
+      const fetchGroupSpy = vi.spyOn(instance, 'fetchHealthGroup');
+      fetchGroupSpy.mockResolvedValue({
+        data: { status: 'UP', details: { service: { status: 'UP' } } },
+      } as AxiosResponse);
+
+      render(DetailsHealth, {
+        props: { instance },
+      });
+
+      const button = await screen.findByRole('button', {
+        name: /custom-group/,
+      });
+
+      // First click — fetch & show
+      await userEvent.click(button);
+      await screen.findByLabelText('service');
+
+      // Second click — hide
+      await userEvent.click(button);
+      expect(screen.queryByLabelText('service')).not.toBeInTheDocument();
+
+      // Third click — show again
+      await userEvent.click(button);
+      expect(await screen.findByLabelText('service')).toBeInTheDocument();
+
+      // fetchHealthGroup should only be called once (first click)
+      expect(fetchGroupSpy).toHaveBeenCalledTimes(1);
     });
 
-    // Verify that the handler is not called again after the initial fetch
-    await waitFor(
-      () => {
-        expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
-      },
-      { timeout: 1000 },
-    );
+    it('should not show groups when none exist', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+      instance.fetchHealth = vi.fn().mockResolvedValue({
+        data: { status: 'UP', groups: [] },
+      });
+
+      render(DetailsHealth, {
+        props: { instance },
+      });
+
+      await screen.findAllByRole('status');
+
+      expect(
+        screen.queryByRole('button', { name: /Health Group/ }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('should re-fetch groups when instance id changes', async () => {
+      const app1 = new Application(applications[0]).instances[0];
+      app1.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'UP', groups: ['liveness'] } });
+
+      const { rerender } = render(DetailsHealth, {
+        props: { instance: app1 },
+      });
+
+      await waitFor(() => {
+        expect(app1.fetchHealth).toHaveBeenCalledTimes(1);
+      });
+
+      const app2 = new Application({
+        ...applications[0],
+        instances: [
+          {
+            ...applications[0].instances[0],
+            id: 'different-id',
+          },
+        ],
+      }).instances[0];
+      app2.fetchHealth = vi
+        .fn()
+        .mockResolvedValue({ data: { status: 'UP', groups: ['readiness'] } });
+
+      await rerender({ instance: app2 });
+
+      await waitFor(() => {
+        expect(app2.fetchHealth).toHaveBeenCalledTimes(1);
+      });
+
+      // Original instance should still have only 1 call
+      expect(app1.fetchHealth).toHaveBeenCalledTimes(1);
+    });
   });
 });
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 e5b03911c85..4b219a03c6f 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
@@ -19,7 +19,6 @@
     :id="`health-details-panel__${instance.id}`"
     v-model="panelOpen"
     :title="$t('instances.details.health.title')"
-    :loading="loading"
   >
     <template #title>
       <sba-status-badge
@@ -32,6 +31,7 @@
 
     <template #actions>
       <router-link
+        v-if="hasHealthUrl"
         :to="{ name: 'journal', query: { instanceId: instance.id } }"
         class="text-sm inline-flex items-center leading-sm border border-gray-400 bg-white text-gray-700 rounded overflow-hidden px-3 py-1 hover:bg-gray-200 ml-1"
       >
@@ -41,47 +41,46 @@
 
     <template #default>
       <sba-alert
-        :error="error"
+        v-if="healthGroupsError"
+        :error="healthGroupsError"
         class="border-l-4"
         :title="$t('term.fetch_failed')"
       />
       <div class="-mx-4 -my-3">
         <health-details :health="health" name="Instance" />
 
-        <template v-for="healthGroup in healthGroups" :key="healthGroup.name">
+        <template v-for="group in healthGroups" :key="group.name">
           <div
             class="px-4 py-2 border-t border-gray-200 sm:px-6"
-            :class="{ 'border-b': isHealthGroupOpen(healthGroup.name) }"
+            :class="{ 'border-b': isHealthGroupOpen(group.name) }"
           >
             <h4 class="leading-6 font-medium text-gray-900">
               <button
                 class="flex items-center"
                 :aria-label="
-                  $t('instances.details.health_group.title') +
-                  ': ' +
-                  healthGroup.name
+                  $t('instances.details.health_group.title') + ': ' + group.name
                 "
-                @click="toggleHealthGroup(healthGroup.name)"
+                @click="toggleHealthGroup(group.name)"
               >
                 <font-awesome-icon
-                  v-if="isHealthGroupCollapsible(healthGroup.name)"
                   icon="chevron-down"
                   class="transition-[transform] mr-2 h-4"
-                  :class="{
-                    '-rotate-90': !isHealthGroupOpen(healthGroup.name),
-                  }"
+                  :class="{ '-rotate-90': !isHealthGroupOpen(group.name) }"
                 />
                 <span v-text="$t('instances.details.health_group.title')"></span
                 >:&nbsp;
-                <span v-text="healthGroup.name"></span>
+                <span v-text="group.name"></span>
+                <font-awesome-icon
+                  v-if="healthGroupLoadingMap[group.name]"
+                  icon="sync-alt"
+                  spin
+                  class="ml-2 h-3"
+                />
               </button>
             </h4>
           </div>
-          <div v-if="isHealthGroupOpen(healthGroup.name)">
-            <health-details
-              :health="healthGroup.data"
-              :name="healthGroup.name"
-            />
+          <div v-if="isHealthGroupOpen(group.name) && group.data">
+            <health-details :health="group.data" :name="group.name" />
           </div>
         </template>
       </div>
@@ -95,10 +94,10 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import SbaAccordion from '@/components/sba-accordion.vue';
 
 import Instance from '@/services/instance';
-import healthDetails from '@/views/instances/details/health-details';
+import HealthDetails from '@/views/instances/details/health-details.vue';
 
 export default {
-  components: { SbaAccordion, FontAwesomeIcon, healthDetails },
+  components: { SbaAccordion, FontAwesomeIcon, HealthDetails },
   props: {
     instance: {
       type: Instance,
@@ -106,142 +105,122 @@ export default {
     },
   },
   data: () => ({
-    error: null,
-    loading: false,
-    liveHealth: null,
-    healthGroups: [],
     panelOpen: true,
-    healthGroupOpenStatus: {} as {
-      isOpen: boolean;
-      collapsible: boolean;
-    },
-    currentInstanceId: null,
-    currentInstanceUpdateKey: null,
-    fetchToken: 0,
+    healthGroups: [] as Array<{
+      name: string;
+      data: Record<string, any> | null;
+    }>,
+    healthGroupsError: null as Error | null,
+    healthGroupOpenStatus: {} as Record<
+      string,
+      { isOpen: boolean; collapsible: boolean }
+    >,
+    healthGroupLoadingMap: {} as Record<string, boolean>,
+    currentInstanceId: null as string | null,
   }),
   computed: {
     health() {
-      return this.liveHealth || this.instance.statusInfo;
+      return this.instance.statusInfo;
+    },
+    hasHealthUrl() {
+      if (this.instance.endpoints) {
+        return (
+          this.instance.endpoints.findIndex(
+            (endpoint: { id: string }) => endpoint.id === 'health',
+          ) >= 0
+        );
+      }
+      return false;
     },
   },
   watch: {
     instance: {
-      handler: 'fetchHealth',
+      handler: 'onInstanceChanged',
       immediate: true,
     },
   },
   methods: {
-    reloadHealth() {
-      const updateKey =
-        this.instance.version ??
-        this.instance.statusTimestamp ??
-        this.instance.id;
-      if (
-        this.instance.id !== this.currentInstanceId ||
-        updateKey !== this.currentInstanceUpdateKey
-      ) {
-        this.fetchHealth();
+    onInstanceChanged() {
+      if (this.instance.id !== this.currentInstanceId) {
+        this.currentInstanceId = this.instance.id;
+        this.healthGroups = [];
+        this.healthGroupOpenStatus = {};
+        this.healthGroupLoadingMap = {};
+        this.healthGroupsError = null;
+        this.fetchHealthGroups();
+      } else {
+        // Same instance, SSE update (e.g. status change) — collapse groups and clear stale data
+        for (const group of this.healthGroups) {
+          group.data = null;
+        }
+        this.healthGroupOpenStatus = {};
+        this.healthGroupLoadingMap = {};
       }
     },
     isHealthGroupOpen(groupName: string) {
-      return this.healthGroupOpenStatus[groupName].isOpen === true;
+      return this.healthGroupOpenStatus[groupName]?.isOpen ?? false;
     },
     isHealthGroupCollapsible(groupName: string) {
-      return this.healthGroupOpenStatus[groupName].collapsible;
+      return this.healthGroupOpenStatus[groupName]?.collapsible ?? true;
     },
     toggleHealthGroup(groupName: string) {
-      if (this.isHealthGroupCollapsible(groupName)) {
+      const group = this.healthGroups.find((g) => g.name === groupName);
+
+      if (group == undefined) {
+        return;
+      }
+
+      if (group.data === null) {
+        // First click — fetch group details
+        this.fetchGroupDetails(groupName);
+      } else if (this.isHealthGroupCollapsible(groupName)) {
         this.healthGroupOpenStatus[groupName].isOpen =
           !this.healthGroupOpenStatus[groupName].isOpen;
       }
     },
-    async fetchHealth() {
-      const token = ++this.fetchToken;
-      this.error = null;
-      this.loading = true;
+    async fetchHealthGroups() {
+      if (!this.hasHealthUrl) {
+        return;
+      }
+
+      this.healthGroupsError = null;
 
       try {
         const res = await this.instance.fetchHealth();
-        // Stale response - another fetch was initiated
-        if (token !== this.fetchToken) {
-          return;
-        }
-
-        this.currentInstanceId = this.instance.id;
-        this.currentInstanceUpdateKey =
-          this.instance.version ??
-          this.instance.statusTimestamp ??
-          this.instance.id;
-        this.liveHealth = res.data;
 
         if (Array.isArray(res.data.groups)) {
-          // Capture token for group fetches to detect staleness
-          const groupToken = token;
-          const groupPromises = res.data.groups.map(async (group: string) => {
-            // Check if stale before starting fetch
-            if (groupToken !== this.fetchToken) {
-              throw new Error('Stale request');
-            }
-
-            try {
-              return {
-                name: group,
-                data: (await this.instance.fetchHealthGroup(group)).data,
-              };
-            } catch (e) {
-              // Only suppress error if this request became stale
-              if (groupToken !== this.fetchToken) {
-                throw e;
-              }
-              return null;
-            }
-          });
-
-          const groupResults = await Promise.allSettled(groupPromises);
-
-          // Final staleness check after all promises settle
-          if (groupToken !== this.fetchToken) {
-            return;
-          }
-
-          this.healthGroups = groupResults
-            .map((result) => {
-              // Verify still not stale after settlement
-              if (groupToken !== this.fetchToken) {
-                return null;
-              }
-              return result.status === 'fulfilled' ? result.value : null;
-            })
-            .filter((g) => g !== null);
-
-          this.healthGroupOpenStatus = this.healthGroups
-            .map(
-              (group: {
-                name: string;
-                data: { details: string } | undefined;
-              }) => {
-                return {
-                  [group.name]: {
-                    isOpen: group.data?.details === undefined,
-                    collapsible: group.data?.details !== undefined,
-                  },
-                };
-              },
-            )
-            .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+          this.healthGroups = res.data.groups.map((name: string) => ({
+            name,
+            data: null,
+          }));
+          this.healthGroupOpenStatus = {};
+          this.healthGroupLoadingMap = {};
+        } else {
+          this.healthGroups = [];
         }
       } catch (error) {
-        // Stale error - ignore
-        if (token !== this.fetchToken) {
-          return;
+        console.warn('Fetching health groups failed:', error);
+        this.healthGroupsError = error as Error;
+      }
+    },
+    async fetchGroupDetails(groupName: string) {
+      this.healthGroupLoadingMap[groupName] = true;
+
+      try {
+        const res = await this.instance.fetchHealthGroup(groupName);
+        const group = this.healthGroups.find((g) => g.name === groupName);
+
+        if (group) {
+          group.data = res.data;
+          this.healthGroupOpenStatus[groupName] = {
+            isOpen: true,
+            collapsible: res.data !== undefined,
+          };
         }
-        console.warn('Fetching live health failed:', error);
-        this.error = error;
+      } catch (error) {
+        console.warn(`Fetching health group '${groupName}' failed:`, error);
       } finally {
-        if (token !== this.fetchToken) {
-          return;
-        }
-        this.loading = false;
+        this.healthGroupLoadingMap[groupName] = false;
       }
     },
   },
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts
index 10c132f8a80..263da2857c5 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts
@@ -1,241 +1,164 @@
-import { screen, waitFor } from '@testing-library/vue';
-import { AxiosHeaders } from 'axios';
-import { HttpResponse, http } from 'msw';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { screen } from '@testing-library/vue';
+import { describe, expect, it, vi } from 'vitest';
 
 import DetailsInfo from './details-info.vue';
 
 import { applications } from '@/mocks/applications/data';
-import { server } from '@/mocks/server';
 import Application from '@/services/application';
 import { render } from '@/test-utils';
 
-function deferred<T>() {
-  let resolve!: (value: T) => void;
-  let reject!: (reason?: any) => void;
-  const promise = new Promise<T>((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-}
-
 describe('DetailsInfo', () => {
-  beforeEach(() => {
-    server.use(
-      http.get('/instances/:instanceId/actuator/info', () => {
-        return HttpResponse.json({
-          app: { version: '1.0.0', name: 'TestApp' },
-          java: { version: '17' },
-        });
-      }),
-    );
-  });
-
-  it('should render info table with keys and values', async () => {
+  it('should render info from instance.info', async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
-    instance.hasEndpoint = () => true;
-
-    instance.fetchInfo = async () => ({
-      data: {
-        app: { version: '1.0.0', name: 'TestApp' },
-        java: { version: '17' },
-      },
-      status: 200,
-      statusText: 'OK',
-      headers: new AxiosHeaders(),
-      config: { headers: new AxiosHeaders() },
-    });
 
     render(DetailsInfo, {
       props: { instance },
     });
 
-    await waitFor(() => {
-      expect(screen.queryByRole('status')).not.toBeInTheDocument();
-    });
-
-    expect(await screen.findByText('app')).toBeVisible();
-    expect(await screen.findByText('java')).toBeVisible();
-    // YAML-formatted output is rendered in a <pre> block, so match the full string
-    expect(
-      await screen.findByText(/version: 1.0.0[\s\S]*name: TestApp/),
-    ).toBeVisible();
-    expect(await screen.findByText(/version: '17'/)).toBeVisible();
+    // The mock instance has info with 'tags', 'scm-url', 'build-url', 'build' keys
+    expect(await screen.findByText('tags')).toBeVisible();
+    expect(await screen.findByText('build')).toBeVisible();
   });
 
-  it('should show no info message if info is empty', async () => {
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
-    instance.hasEndpoint = () => true;
-    instance.fetchInfo = async () => ({
-      data: {},
-      status: 200,
-      statusText: 'OK',
-      headers: new AxiosHeaders(),
-      config: { headers: new AxiosHeaders() },
+  it('should show empty message when info is empty', async () => {
+    const application = new Application({
+      ...applications[0],
+      instances: [
+        {
+          ...applications[0].instances[0],
+          info: {},
+        },
+      ],
     });
+    const instance = application.instances[0];
 
     render(DetailsInfo, {
       props: { instance },
     });
 
-    await waitFor(() => {
-      expect(screen.queryByRole('status')).not.toBeInTheDocument();
-    });
-
     expect(
       await screen.findByText('instances.details.info.no_info_provided'),
     ).toBeVisible();
   });
 
-  it('should show error alert if fetch fails', async () => {
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
-    instance.hasEndpoint = () => true;
-    instance.fetchInfo = async () => {
-      throw new Error('fail');
-    };
-
-    render(DetailsInfo, {
-      props: { instance },
-    });
-
-    await waitFor(() => {
-      expect(screen.getByRole('alert')).toBeVisible();
-    });
-    expect(screen.getByRole('alert')).toHaveTextContent(
-      'Fetching of data failed.',
-    );
-  });
-
-  it('should call fetchInfo when instance changes (watcher)', async () => {
-    const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-    const instance2 = new Application({
-      ...application,
-      instances: [
-        {
-          ...instance1,
-          id: 'other-id',
-        },
-      ],
-    }).instances[0];
-    instance2.hasEndpoint = () => true;
-    instance2.fetchInfo = async () => ({ data: { foo: 'bar' } });
-    instance1.hasEndpoint = () => true;
-    const fetchInfoSpy = vi
-      .fn()
-      .mockResolvedValue({ data: { app: { version: '1.0.0' } } });
-    instance1.fetchInfo = fetchInfoSpy;
-
-    const { rerender } = render(DetailsInfo, {
-      props: { instance: instance1 },
-    });
-
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalled();
-    });
-
-    // Now rerender with a new instance (different id)
-    await rerender({ instance: instance2 });
-
-    // Should show the new info from instance2
-    expect(await screen.findByText('foo')).toBeVisible();
-    expect(await screen.findByText('bar')).toBeVisible();
-  });
-
-  it('should call fetchInfo when instance version changes (SSE update)', async () => {
+  it('should update when instance prop changes', async () => {
     const application = new Application(applications[0]);
     const instance1 = application.instances[0];
-    instance1.hasEndpoint = () => true;
-
-    const fetchInfoSpy = vi
-      .fn()
-      .mockResolvedValueOnce({ data: { app: { version: '1.0.0' } } })
-      .mockResolvedValueOnce({ data: { app: { version: '2.0.0' } } });
-    instance1.fetchInfo = fetchInfoSpy;
 
     const { rerender } = render(DetailsInfo, {
       props: { instance: instance1 },
     });
 
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(1);
-    });
+    // Initial render shows info from mock data
+    expect(await screen.findByText('tags')).toBeVisible();
 
+    // Create new instance with different info
     const instance2 = new Application({
-      ...application,
+      ...applications[0],
       instances: [
         {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
+          ...applications[0].instances[0],
+          info: { foo: 'bar' },
         },
       ],
     }).instances[0];
-    instance2.hasEndpoint = () => true;
-    instance2.fetchInfo = fetchInfoSpy;
 
     await rerender({ instance: instance2 });
 
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(2);
-    });
-
-    expect(await screen.findByText(/version: 2.0.0/)).toBeVisible();
+    expect(await screen.findByText('foo')).toBeVisible();
+    expect(await screen.findByText('bar')).toBeVisible();
   });
 
-  it('should ignore stale info response when instance updates quickly', async () => {
+  it('should show count of info entries', async () => {
     const application = new Application(applications[0]);
-    const instance1 = application.instances[0];
-    instance1.hasEndpoint = () => true;
-
-    const p1 = deferred<{ data: any }>();
-    const p2 = deferred<{ data: any }>();
-    const fetchInfoSpy = vi
-      .fn()
-      .mockReturnValueOnce(p1.promise)
-      .mockReturnValueOnce(p2.promise);
-    instance1.fetchInfo = fetchInfoSpy;
-
-    const { rerender } = render(DetailsInfo, {
-      props: { instance: instance1 },
-    });
-
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(1);
-    });
-
-    const instance2 = new Application({
-      ...application,
-      instances: [
-        {
-          ...instance1,
-          id: instance1.id,
-          version: (instance1.version ?? 0) + 1,
-        },
-      ],
-    }).instances[0];
-    instance2.hasEndpoint = () => true;
-    instance2.fetchInfo = fetchInfoSpy;
-
-    await rerender({ instance: instance2 });
+    const instance = application.instances[0];
 
-    await waitFor(() => {
-      expect(fetchInfoSpy).toHaveBeenCalledTimes(2);
+    render(DetailsInfo, {
+      props: { instance },
     });
 
-    // Resolve second (newer) response first.
-    p2.resolve({ data: { app: { version: '2.0.0' } } });
-    expect(await screen.findByText(/version: 2.0.0/)).toBeVisible();
+    // The mock has 4 info keys: tags, scm-url, build-url, build
+    // The count appears in the accordion title slot
+    expect(await screen.findByText('(4)')).toBeVisible();
+  });
 
-    // Resolve first (older) response afterwards; UI must not regress.
-    p1.resolve({ data: { app: { version: '1.0.0' } } });
-    await waitFor(() => {
-      expect(screen.queryByText(/version: 1.0.0/)).not.toBeInTheDocument();
+  describe('SSE reactive updates', () => {
+    it('should never call instance.fetchInfo (no direct actuator calls)', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+
+      // Spy on fetchInfo to prove it's never called
+      const fetchInfoSpy = vi.spyOn(instance, 'fetchInfo');
+
+      render(DetailsInfo, {
+        props: { instance },
+      });
+
+      // Wait for component to fully render
+      await screen.findByText('tags');
+
+      // Assert fetchInfo was NEVER called - this proves the bug fix
+      expect(fetchInfoSpy).not.toHaveBeenCalled();
+    });
+
+    it('should reactively update through multiple SSE info changes without HTTP calls', async () => {
+      const baseApp = applications[0];
+
+      // 1. Initial SSE event with full info
+      const instance1 = new Application(baseApp).instances[0];
+      const fetchInfoSpy1 = vi.spyOn(instance1, 'fetchInfo');
+
+      const { rerender } = render(DetailsInfo, {
+        props: { instance: instance1 },
+      });
+
+      expect(await screen.findByText('tags')).toBeVisible();
+      expect(await screen.findByText('build')).toBeVisible();
+      expect(fetchInfoSpy1).not.toHaveBeenCalled();
+
+      // 2. SSE event: info changes (simulates INFO_CHANGED event)
+      const instance2 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: 4,
+            info: {
+              app: { name: 'my-service', version: '2.0.0' },
+              'git.branch': 'main',
+            },
+          },
+        ],
+      }).instances[0];
+      const fetchInfoSpy2 = vi.spyOn(instance2, 'fetchInfo');
+
+      await rerender({ instance: instance2 });
+
+      expect(await screen.findByText('app')).toBeVisible();
+      expect(await screen.findByText('git.branch')).toBeVisible();
+      expect(screen.queryByText('tags')).not.toBeInTheDocument();
+      expect(fetchInfoSpy2).not.toHaveBeenCalled();
+
+      // 3. SSE event: info becomes empty
+      const instance3 = new Application({
+        ...baseApp,
+        instances: [
+          {
+            ...baseApp.instances[0],
+            version: 5,
+            info: {},
+          },
+        ],
+      }).instances[0];
+      const fetchInfoSpy3 = vi.spyOn(instance3, 'fetchInfo');
+
+      await rerender({ instance: instance3 });
+
+      expect(
+        await screen.findByText('instances.details.info.no_info_provided'),
+      ).toBeVisible();
+      expect(fetchInfoSpy3).not.toHaveBeenCalled();
     });
-    expect(await screen.findByText(/version: 2.0.0/)).toBeVisible();
   });
 });
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 4d0aa31d344..b0f58cf9e63 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
@@ -19,7 +19,6 @@
     :id="`info-details-panel__${instance.id}`"
     v-model="panelOpen"
     :title="$t('instances.details.info.title')"
-    :loading="loading"
   >
     <template #title>
       <div class="ml-2 transition-opacity" :class="{ 'opacity-0': panelOpen }">
@@ -27,13 +26,6 @@
       </div>
     </template>
 
-    <sba-alert
-      v-if="error"
-      :error="error"
-      class="border-l-4"
-      :title="$t('term.fetch_failed')"
-    />
-
     <div class="content info -mx-4 -my-3">
       <sba-key-value-table v-if="!isEmptyInfo" :map="info" />
       <p
@@ -46,7 +38,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 
 import SbaAccordion from '@/components/sba-accordion.vue';
 import SbaKeyValueTable from '@/components/sba-key-value-table.vue';
@@ -62,58 +54,10 @@ const props = defineProps({
 });
 
 const panelOpen = ref(true);
-const error = ref(null);
-const loading = ref(false);
-const liveInfo = ref(null);
-const currentInstanceId = ref(null);
-const currentInstanceUpdateKey = ref(null);
-const requestGen = ref(0);
 
-const info = computed(() => formatInfo(liveInfo.value || props.instance.info));
+const info = computed(() => formatInfo(props.instance.info));
 const isEmptyInfo = computed(() => Object.keys(info.value).length <= 0);
 
-async function fetchInfo() {
-  if (props.instance.hasEndpoint('info')) {
-    const gen = ++requestGen.value;
-
-    currentInstanceId.value = props.instance.id;
-    currentInstanceUpdateKey.value =
-      props.instance.version ??
-      props.instance.statusTimestamp ??
-      props.instance.id;
-    loading.value = true;
-    error.value = null;
-
-    try {
-      const res = await props.instance.fetchInfo();
-      // Verify this is still the latest request generation
-      if (gen !== requestGen.value) {
-        return;
-      }
-      liveInfo.value = res.data;
-    } catch (err) {
-      // Stale error - ignore if a newer request was initiated
-      if (gen !== requestGen.value) {
-        return;
-      }
-      error.value = err;
-      console.warn('Fetching info failed:', err);
-    } finally {
-      // Don't clear loading state if new request started
-      if (gen !== requestGen.value) {
-        return;
-      }
-      loading.value = false;
-    }
-  }
-}
-
-function reloadInfo() {
-  // Increment generation to invalidate any in-flight requests
-  requestGen.value++;
-  fetchInfo();
-}
-
 function formatInfo(info) {
   return formatWithDataTypes(info, {
     'build.time': 'date',
@@ -127,15 +71,6 @@ function formatInfo(info) {
     'process.memory.nonHeap.used': 'bytes',
   });
 }
-
-watch(
-  () => [
-    props.instance.id,
-    props.instance.version ?? props.instance.statusTimestamp,
-  ],
-  () => reloadInfo(),
-  { immediate: true },
-);
 </script>
 
 <style lang="css">