From db6697433dbfda8e0e4a02b26f3293eb2f47aba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sat, 14 Mar 2026 14:53:50 +0100
Subject: [PATCH 1/3] fix: reinitialize metrics and fetch data on instance
 version changes

---
 .../src/main/frontend/services/instance.ts    |   2 +
 .../instances/details/details-cache.spec.ts   |  35 +++++
 .../views/instances/details/details-cache.vue |  16 +-
 .../details/details-datasource.spec.ts        |  33 +++++
 .../instances/details/details-datasource.vue  |  16 +-
 .../instances/details/details-health.spec.ts  | 104 ++++++++++++-
 .../instances/details/details-health.vue      |  24 ++-
 .../instances/details/details-info.spec.ts    | 120 ++++++++++++++-
 .../views/instances/details/details-info.vue  |  26 +++-
 .../instances/details/details-memory.spec.ts  | 140 ++++++++++++++++++
 .../instances/details/details-memory.vue      |  16 +-
 .../instances/details/details-metadata.vue    |   4 +-
 .../instances/details/details-threads.spec.ts |  35 +++++
 .../instances/details/details-threads.vue     |  16 +-
 .../views/instances/details/index.spec.ts     | 124 ++++++++++++++++
 .../views/instances/details/index.vue         |  57 +++++--
 16 files changed, 729 insertions(+), 39 deletions(-)

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 c67dada41ee..9bb551c5824 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
@@ -40,6 +40,7 @@ class Instance {
   public availableMetrics: string[] = [];
   public tags: { [key: string]: string }[];
   public statusTimestamp: string;
+  public version?: number;
   public buildVersion: string;
   public statusInfo: StatusInfo;
 
@@ -534,6 +535,7 @@ type StatusInfo = {
 
 type InstanceData = {
   id: string;
+  version?: number;
   registration: Registration;
   endpoints?: Endpoint[];
   availableMetrics?: string[];
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.spec.ts
index 43c64902cc9..36683f7e41b 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.spec.ts
@@ -229,4 +229,39 @@ describe('DetailsCache', () => {
       expect(queryByText(`${HITS[0]}`)).not.toBeInTheDocument();
     });
   });
+
+  it('should reinitialize metrics when instance version changes (SSE update)', async () => {
+    const application = new Application(applications[0]);
+    const instance1 = application.instances[0];
+
+    const { getByText, rerender, queryByText } = await render(DetailsCache, {
+      props: {
+        instance: instance1,
+        cacheName: CACHE_NAME,
+        index: 0,
+      },
+    });
+
+    // wait until initial fetch rendered a numeric value
+    await waitFor(() => {
+      expect(getByText(`${HITS[0]}`)).toBeTruthy();
+    });
+
+    const instance2 = new Application({
+      ...application,
+      instances: [
+        {
+          ...instance1,
+          id: instance1.id,
+          version: (instance1.version ?? 0) + 1,
+        },
+      ],
+    }).instances[0];
+
+    await rerender({ instance: instance2, cacheName: CACHE_NAME, index: 0 });
+
+    await waitFor(() => {
+      expect(queryByText(`${HITS[0]}`)).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
index 5c49b26ccba..8b668930e21 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
@@ -116,6 +116,7 @@ export default {
     shouldFetchCacheMisses: true,
     chartData: [],
     currentInstanceId: null,
+    currentInstanceUpdateKey: null,
   }),
   computed: {
     ratio() {
@@ -139,8 +140,15 @@ export default {
   },
   methods: {
     initCacheMetrics() {
-      if (this.instance.id !== this.currentInstanceId) {
+      const updateKey =
+        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+      const firstInit = this.currentInstanceId === null;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
         this.currentInstanceId = this.instance.id;
+        this.currentInstanceUpdateKey = updateKey;
         this.hasLoaded = false;
         this.error = null;
         this.current = null;
@@ -148,6 +156,12 @@ export default {
         this.shouldFetchCacheSize = true;
         this.shouldFetchCacheHits = true;
         this.shouldFetchCacheMisses = true;
+
+        // Restart polling immediately so SSE updates refresh the view.
+        if (!firstInit) {
+          this.unsubscribe();
+          this.subscribe();
+        }
       }
     },
     async fetchMetrics() {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.spec.ts
index a89a821a14a..b3c53d7f909 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.spec.ts
@@ -163,4 +163,37 @@ describe('DetailsDatasource', () => {
       expect(screen.queryByText(`${ACTIVE[0]}`)).not.toBeInTheDocument();
     });
   });
+
+  it('should reinitialize metrics when instance version changes (SSE update)', async () => {
+    const application = new Application(applications[0]);
+    const instance1 = application.instances[0];
+
+    const { rerender } = await render(DetailsDatasource, {
+      props: {
+        instance: instance1,
+        dataSource: DATA_SOURCE,
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(`${ACTIVE[0]}`)).toBeVisible();
+    });
+
+    const instance2 = new Application({
+      ...application,
+      instances: [
+        {
+          ...instance1,
+          id: instance1.id,
+          version: (instance1.version ?? 0) + 1,
+        },
+      ],
+    }).instances[0];
+
+    await rerender({ instance: instance2, dataSource: DATA_SOURCE });
+
+    await waitFor(() => {
+      expect(screen.queryByText(`${ACTIVE[0]}`)).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
index 58fc09f2e53..a84124b9810 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
@@ -96,6 +96,7 @@ export default {
     current: null,
     chartData: [],
     currentInstanceId: null,
+    currentInstanceUpdateKey: null,
   }),
   watch: {
     instance: {
@@ -105,12 +106,25 @@ export default {
   },
   methods: {
     initDatasourceMetrics() {
-      if (this.instance.id !== this.currentInstanceId) {
+      const updateKey =
+        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+      const firstInit = this.currentInstanceId === null;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
         this.currentInstanceId = this.instance.id;
+        this.currentInstanceUpdateKey = updateKey;
         this.hasLoaded = false;
         this.error = null;
         this.current = null;
         this.chartData = [];
+
+        // Restart polling immediately so SSE updates refresh the view.
+        if (!firstInit) {
+          this.unsubscribe();
+          this.subscribe();
+        }
       }
     },
     async fetchMetrics() {
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 6c1694fdaf8..dcd2f33e28b 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,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import { screen, waitFor } from '@testing-library/vue';
 import { HttpResponse, http } from 'msw';
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { applications } from '@/mocks/applications/data';
 import { server } from '@/mocks/server';
@@ -9,10 +9,24 @@ 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'],
@@ -112,6 +126,94 @@ describe('DetailsHealth', () => {
     );
   });
 
+  it('should refetch health when instance version changes (SSE update)', async () => {
+    const application = new Application(applications[0]);
+    const instance1 = application.instances[0];
+
+    const { rerender } = render(DetailsHealth, {
+      props: {
+        instance: instance1,
+      },
+    });
+
+    await waitFor(() => {
+      expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
+    });
+
+    const instance2 = new Application({
+      ...application,
+      instances: [
+        {
+          ...instance1,
+          id: instance1.id,
+          version: (instance1.version ?? 0) + 1,
+        },
+      ],
+    }).instances[0];
+
+    await rerender({ instance: instance2 });
+
+    await waitFor(() => {
+      expect(healthHandlerSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it('should ignore stale health response when instance updates quickly', 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
+      .fn()
+      .mockReturnValueOnce(p1.promise)
+      .mockReturnValueOnce(p2.promise);
+    instance1.fetchHealth = fetchHealthSpy;
+    instance1.fetchHealthGroup = vi.fn().mockResolvedValue({ data: {} });
+
+    const { rerender } = render(DetailsHealth, {
+      props: {
+        instance: instance1,
+      },
+    });
+
+    await waitFor(() => {
+      expect(fetchHealthSpy).toHaveBeenCalledTimes(1);
+    });
+
+    const instance2 = new Application({
+      ...application,
+      instances: [
+        {
+          ...instance1,
+          id: instance1.id,
+          version: (instance1.version ?? 0) + 1,
+        },
+      ],
+    }).instances[0];
+    instance2.fetchHealth = fetchHealthSpy;
+    instance2.fetchHealthGroup = instance1.fetchHealthGroup;
+
+    await rerender({ instance: instance2 });
+
+    await waitFor(() => {
+      expect(fetchHealthSpy).toHaveBeenCalledTimes(2);
+    });
+
+    // Resolve second (newer) response first.
+    p2.resolve({ data: { status: 'UP', groups: [] } });
+    await waitFor(() => {
+      expect(screen.getByText('UP')).toBeInTheDocument();
+    });
+
+    // Resolve first (older) response afterwards; UI must not regress.
+    p1.resolve({ data: { status: 'DOWN', groups: [] } });
+    await waitFor(() => {
+      expect(screen.queryByText('DOWN')).not.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', () => {
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 fbf6cfd7505..fc75353d107 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
@@ -116,6 +116,8 @@ export default {
       collapsible: boolean;
     },
     currentInstanceId: null,
+    currentInstanceUpdateKey: null,
+    fetchToken: 0,
   }),
   computed: {
     health() {
@@ -128,12 +130,14 @@ export default {
       immediate: true,
     },
   },
-  created() {
-    this.fetchHealth();
-  },
   methods: {
     reloadHealth() {
-      if (this.instance.id !== this.currentInstanceId) {
+      const updateKey =
+        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
         this.fetchHealth();
       }
     },
@@ -150,11 +154,17 @@ export default {
       }
     },
     async fetchHealth() {
+      const token = ++this.fetchToken;
       this.error = null;
       this.loading = true;
       try {
         const res = await this.instance.fetchHealth();
+        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)) {
@@ -188,9 +198,15 @@ export default {
             .reduce((acc, curr) => ({ ...acc, ...curr }), {});
         }
       } catch (error) {
+        if (token !== this.fetchToken) {
+          return;
+        }
         console.warn('Fetching live health failed:', error);
         this.error = error;
       } finally {
+        if (token !== this.fetchToken) {
+          return;
+        }
         this.loading = 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 26d847f9b58..10c132f8a80 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
@@ -10,6 +10,16 @@ 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(
@@ -103,12 +113,17 @@ describe('DetailsInfo', () => {
   it('should call fetchInfo when instance changes (watcher)', async () => {
     const application = new Application(applications[0]);
     const instance1 = application.instances[0];
-    const instance2 = {
-      ...instance1,
-      id: 'other-id',
-      hasEndpoint: () => true,
-      fetchInfo: async () => ({ data: { foo: 'bar' } }),
-    };
+    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()
@@ -130,4 +145,97 @@ describe('DetailsInfo', () => {
     expect(await screen.findByText('foo')).toBeVisible();
     expect(await screen.findByText('bar')).toBeVisible();
   });
+
+  it('should call fetchInfo when instance version changes (SSE update)', 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);
+    });
+
+    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 });
+
+    await waitFor(() => {
+      expect(fetchInfoSpy).toHaveBeenCalledTimes(2);
+    });
+
+    expect(await screen.findByText(/version: 2.0.0/)).toBeVisible();
+  });
+
+  it('should ignore stale info response when instance updates quickly', 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 });
+
+    await waitFor(() => {
+      expect(fetchInfoSpy).toHaveBeenCalledTimes(2);
+    });
+
+    // Resolve second (newer) response first.
+    p2.resolve({ data: { app: { version: '2.0.0' } } });
+    expect(await screen.findByText(/version: 2.0.0/)).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();
+    });
+    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 07dc42d7919..8f641020ec4 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
@@ -66,32 +66,45 @@ const error = ref(null);
 const loading = ref(false);
 const liveInfo = ref(null);
 const currentInstanceId = ref(null);
+const currentInstanceUpdateKey = ref(null);
+const fetchToken = ref(0);
 
 const info = computed(() => formatInfo(liveInfo.value || props.instance.info));
 const isEmptyInfo = computed(() => Object.keys(info.value).length <= 0);
 
 async function fetchInfo() {
   if (props.instance.hasEndpoint('info')) {
+    const token = ++fetchToken.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();
+      if (token !== fetchToken.value) {
+        return;
+      }
       liveInfo.value = res.data;
     } catch (err) {
+      if (token !== fetchToken.value) {
+        return;
+      }
       error.value = err;
 
       console.warn('Fetching info failed:', err);
     } finally {
+      if (token !== fetchToken.value) {
+        return;
+      }
       loading.value = false;
     }
   }
 }
 
 function reloadInfo() {
-  if (props.instance.id !== currentInstanceId.value) {
-    fetchInfo();
-  }
+  fetchInfo();
 }
 
 function formatInfo(info) {
@@ -109,12 +122,13 @@ function formatInfo(info) {
 }
 
 watch(
-  () => props.instance,
+  () => [
+    props.instance.id,
+    props.instance.version ?? props.instance.statusTimestamp,
+  ],
   () => reloadInfo(),
   { immediate: true },
 );
-
-fetchInfo();
 </script>
 
 <style lang="css">
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts
index bf8165dc0fc..75b32f9deb2 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts
@@ -1,10 +1,21 @@
 import { screen } from '@testing-library/vue';
 import rxjs from 'rxjs';
+import { Subject } from 'rxjs';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { render } from '@/test-utils';
 import DetailsMemory from '@/views/instances/details/details-memory.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 };
+}
+
 vi.mock('@/sba-config', async () => {
   const sbaConfig: any = await vi.importActual('@/sba-config');
   return {
@@ -130,4 +141,133 @@ describe('DetailsMemory', () => {
       ).toHaveTextContent('115 MB');
     });
   });
+
+  it('should reinitialize metrics when instance version changes (SSE update)', async () => {
+    const timer = vi.spyOn(rxjs, 'timer');
+    const Instance = (await import('@/services/instance')).default;
+
+    const { rerender } = render(DetailsMemory, {
+      stubs: {
+        MemChart: true,
+      },
+      props: {
+        instance: new Instance({
+          id: '1',
+          version: 1,
+          availableMetrics: [
+            'jvm.memory.used',
+            'jvm.memory.max',
+            'jvm.memory.committed',
+          ],
+        }),
+        type: 'heap',
+      },
+    });
+
+    expect(timer).toHaveBeenCalledTimes(1);
+
+    await rerender({
+      instance: new Instance({
+        id: '1',
+        version: 2,
+        availableMetrics: [
+          'jvm.memory.used',
+          'jvm.memory.max',
+          'jvm.memory.committed',
+        ],
+      }),
+      type: 'heap',
+    });
+
+    expect(timer).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not apply stale poll result after resubscribe on instance update', async () => {
+    const tick1$ = new Subject<number>();
+    const tick2$ = new Subject<number>();
+    const timerSpy = vi
+      .spyOn(rxjs, 'timer')
+      .mockReturnValueOnce(tick1$ as any)
+      .mockReturnValueOnce(tick2$ as any);
+
+    const Instance = (await import('@/services/instance')).default;
+
+    const pMax1 = deferred<{ data: any }>();
+    const pUsed1 = deferred<{ data: any }>();
+    const pCommitted1 = deferred<{ data: any }>();
+
+    const instance1 = new Instance({
+      id: '1',
+      version: 1,
+      availableMetrics: ['jvm.memory.used', 'jvm.memory.max', 'jvm.memory.committed'],
+    });
+    instance1.fetchMetric = vi.fn().mockImplementation((name: string) => {
+      if (name === 'jvm.memory.max') return pMax1.promise;
+      if (name === 'jvm.memory.used') return pUsed1.promise;
+      if (name === 'jvm.memory.committed') return pCommitted1.promise;
+      throw new Error('unexpected metric: ' + name);
+    });
+
+    const instance2 = new Instance({
+      id: '1',
+      version: 2,
+      availableMetrics: ['jvm.memory.used', 'jvm.memory.max', 'jvm.memory.committed'],
+    });
+    instance2.fetchMetric = vi.fn().mockImplementation((name: string) => {
+      const mk = (value: number) =>
+        Promise.resolve({
+          data: {
+            measurements: [{ value }],
+            availableTags: [],
+          },
+        });
+      if (name === 'jvm.memory.max') return mk(3000);
+      if (name === 'jvm.memory.used') return mk(2000);
+      if (name === 'jvm.memory.committed') return mk(1000);
+      throw new Error('unexpected metric: ' + name);
+    });
+
+    const { rerender } = render(DetailsMemory, {
+      stubs: {
+        MemChart: true,
+      },
+      props: {
+        instance: instance1,
+        type: 'heap',
+      },
+    });
+
+    // Start first polling run but keep its responses pending.
+    tick1$.next(0);
+
+    // Update instance: should unsubscribe old polling and subscribe again.
+    await rerender({ instance: instance2, type: 'heap' });
+    tick2$.next(0);
+
+    // New subscription result renders.
+    expect(
+      await screen.findByLabelText('instances.details.memory.used'),
+    ).toHaveTextContent('2 kB');
+
+    // Resolve the older (stale) in-flight responses; they must not override.
+    pMax1.resolve({
+      data: { measurements: [{ value: 6000 }], availableTags: [] },
+    });
+    pUsed1.resolve({
+      data: { measurements: [{ value: 5000 }], availableTags: [] },
+    });
+    pCommitted1.resolve({
+      data: { measurements: [{ value: 4000 }], availableTags: [] },
+    });
+
+    // Give pending promises a chance to settle.
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(
+      await screen.findByLabelText('instances.details.memory.used'),
+    ).toHaveTextContent('2 kB');
+
+    timerSpy.mockRestore();
+  });
 });
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 f204aa3e360..667164d500d 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
@@ -124,6 +124,7 @@ export default defineComponent({
     current: null,
     chartData: [],
     currentInstanceId: null,
+    currentInstanceUpdateKey: null,
   }),
   computed: {
     name() {
@@ -145,12 +146,25 @@ export default defineComponent({
   },
   methods: {
     initMetrics() {
-      if (this.instance.id !== this.currentInstanceId) {
+      const updateKey =
+        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+      const firstInit = this.currentInstanceId === null;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
         this.currentInstanceId = this.instance.id;
+        this.currentInstanceUpdateKey = updateKey;
         this.hasLoaded = false;
         this.error = null;
         this.current = null;
         this.chartData = [];
+
+        // Restart polling immediately so SSE updates refresh the view.
+        if (!firstInit) {
+          this.unsubscribe();
+          this.subscribe();
+        }
       }
     },
     prettyBytes,
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 c0133318261..09d0c2dc490 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
@@ -43,14 +43,14 @@ import SbaAccordion from '@/components/sba-accordion.vue';
 import Instance from '@/services/instance';
 import { sortObject } from '@/utils/sortObject';
 
-const { instance } = defineProps<{
+const props = defineProps<{
   instance: Instance;
 }>();
 
 const panelOpen = ref(true);
 
 const metadata = computed(() => {
-  return sortObject(instance.registration.metadata);
+  return sortObject(props.instance.registration.metadata);
 });
 
 const hasMetadata = computed(() => {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts
index 23e6818aad5..2ef82e22d3c 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts
@@ -120,4 +120,39 @@ describe('DetailsThreads', () => {
     expect(data[0].peak).toEqual(PEAK[0]);
     expect(data[0].daemon).toEqual(DAEMON[0]);
   });
+
+  it('should reinitialize metrics when instance version changes (SSE update)', async () => {
+    const stubChart = {
+      props: ['data'],
+      template: `<div data-testid="chart">{{ JSON.stringify($props.data) }}</div>`,
+    };
+
+    const application = new Application(applications[0]);
+    const instance1 = application.instances[0];
+
+    const { rerender } = render(DetailsThreads, {
+      global: { stubs: { threadsChart: stubChart } },
+      props: { instance: instance1 },
+    });
+
+    const instance2 = new Application({
+      ...application,
+      instances: [
+        {
+          ...instance1,
+          id: instance1.id,
+          version: (instance1.version ?? 0) + 1,
+        },
+      ],
+    }).instances[0];
+
+    await rerender({ instance: instance2 });
+
+    const text = (await screen.findByTestId('chart')).textContent;
+    const data = JSON.parse(text);
+
+    expect(data[0].live).toEqual(LIVE[0]);
+    expect(data[0].peak).toEqual(PEAK[0]);
+    expect(data[0].daemon).toEqual(DAEMON[0]);
+  });
 });
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 2e1b13f16e6..e8f3f50fc41 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
@@ -106,6 +106,7 @@ export default {
     current: null,
     chartData: [],
     currentInstanceId: null,
+    currentInstanceUpdateKey: null,
   }),
   watch: {
     instance: {
@@ -115,12 +116,25 @@ export default {
   },
   methods: {
     initMetrics() {
-      if (this.instance.id !== this.currentInstanceId) {
+      const updateKey =
+        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+      const firstInit = this.currentInstanceId === null;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
         this.currentInstanceId = this.instance.id;
+        this.currentInstanceUpdateKey = updateKey;
         this.error = null;
         this.hasLoaded = false;
         this.current = null;
         this.chartData = [];
+
+        // Restart polling immediately so SSE updates refresh the view.
+        if (!firstInit) {
+          this.unsubscribe();
+          this.subscribe();
+        }
       }
     },
     async fetchMetrics() {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.spec.ts
index abb915e8fc5..0bb27e67565 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.spec.ts
@@ -9,6 +9,16 @@ 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('InstanceDetails', () => {
   describe('Metrics', () => {
     it('should hide loading spinner, when network call fails', async () => {
@@ -56,5 +66,119 @@ describe('InstanceDetails', () => {
         ).not.toBeInTheDocument();
       });
     });
+
+    it('should refetch metric index when instance version changes (SSE update)', async () => {
+      const application = new Application(applications[0]);
+      const instance1 = application.instances[0];
+
+      const fetchMetricsSpy = vi
+        .fn()
+        .mockResolvedValue({ data: { names: ['jvm.memory.max'] } });
+      instance1.fetchMetrics = fetchMetricsSpy;
+      instance1.hasEndpoint = vi.fn().mockImplementation(() => true);
+
+      const { rerender } = render(DetailsView, {
+        props: {
+          instance: instance1,
+          application,
+        },
+      });
+
+      await waitFor(() => {
+        expect(fetchMetricsSpy).toHaveBeenCalledTimes(1);
+      });
+
+      const instance2 = new Application({
+        ...application,
+        instances: [
+          {
+            ...instance1,
+            id: instance1.id,
+            version: (instance1.version ?? 0) + 1,
+          },
+        ],
+      }).instances[0];
+
+      instance2.fetchMetrics = fetchMetricsSpy;
+      instance2.hasEndpoint = instance1.hasEndpoint;
+
+      await rerender({ instance: instance2, application });
+
+      await waitFor(() => {
+        expect(fetchMetricsSpy).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    it('should ignore stale metric index response when instance updates quickly', async () => {
+      const application = new Application(applications[0]);
+      const instance1 = application.instances[0];
+
+      const p1 = deferred<{ data: { names: string[] } }>();
+      const p2 = deferred<{ data: { names: string[] } }>();
+      const fetchMetricsSpy = vi
+        .fn()
+        .mockReturnValueOnce(p1.promise)
+        .mockReturnValueOnce(p2.promise);
+      instance1.fetchMetrics = fetchMetricsSpy;
+      instance1.hasEndpoint = vi.fn().mockImplementation(() => true);
+
+      const { rerender } = render(DetailsView, {
+        global: {
+          stubs: {
+            'details-memory': {
+              props: ['instance', 'type'],
+              template: '<div data-testid="details-memory" />',
+            },
+          },
+        },
+        props: {
+          instance: instance1,
+          application,
+        },
+      });
+
+      await waitFor(() => {
+        expect(fetchMetricsSpy).toHaveBeenCalledTimes(1);
+      });
+
+      const instance2 = new Application({
+        ...application,
+        instances: [
+          {
+            ...instance1,
+            id: instance1.id,
+            version: (instance1.version ?? 0) + 1,
+          },
+        ],
+      }).instances[0];
+
+      instance2.fetchMetrics = fetchMetricsSpy;
+      instance2.hasEndpoint = instance1.hasEndpoint;
+
+      await rerender({ instance: instance2, application });
+
+      await waitFor(() => {
+        expect(fetchMetricsSpy).toHaveBeenCalledTimes(2);
+      });
+
+      // Resolve second (newer) response first.
+      p2.resolve({ data: { names: ['jvm.memory.max'] } });
+      await waitFor(() => {
+        expect(
+          screen.queryByTestId('instance-section-loading-spinner'),
+        ).not.toBeInTheDocument();
+      });
+
+      // Memory sections should be present for the newer response.
+      await waitFor(() => {
+        expect(screen.getAllByTestId('details-memory')).toHaveLength(2);
+      });
+
+      // Resolve first (older) response afterwards; UI must not regress.
+      p1.resolve({ data: { names: [] } });
+      await waitFor(() => {
+        expect(screen.getAllByTestId('details-memory')).toHaveLength(2);
+      });
+    });
   });
 });
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue
index c5aaf107162..5ec26706690 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue
@@ -111,8 +111,16 @@ export default {
     hasLoaded: true,
     error: null,
     metrics: [],
+    metricFetchToken: 0,
   }),
   computed: {
+    instanceUpdateKey() {
+      return (
+        this.instance.version ??
+        this.instance.statusTimestamp ??
+        this.instance.id
+      );
+    },
     hasCaches() {
       return this.hasMetric('cache.gets');
     },
@@ -139,30 +147,47 @@ export default {
     },
   },
   watch: {
-    instance() {
-      this.fetchMetricIndex();
+    instanceUpdateKey: {
+      handler() {
+        this.fetchMetricIndex();
+      },
+      immediate: true,
     },
   },
-  created() {
-    this.fetchMetricIndex();
-  },
   methods: {
     hasMetric(metric) {
       return this.metrics && this.metrics.includes(metric);
     },
     async fetchMetricIndex() {
-      if (this.instance.hasEndpoint('metrics')) {
-        this.hasLoaded = false;
-        this.error = null;
-        try {
-          const res = await this.instance.fetchMetrics();
-          this.metrics = res.data.names;
-        } catch (error) {
-          console.warn('Fetching metric index failed:', error);
-          this.error = error;
-        } finally {
-          this.hasLoaded = true;
+      // Reset immediately so SSE updates can't leave stale gating behind.
+      this.metrics = [];
+      this.error = null;
+
+      if (!this.instance.hasEndpoint('metrics')) {
+        this.hasLoaded = true;
+        return;
+      }
+
+      const token = ++this.metricFetchToken;
+      this.hasLoaded = false;
+      this.error = null;
+      try {
+        const res = await this.instance.fetchMetrics();
+        if (token !== this.metricFetchToken) {
+          return;
+        }
+        this.metrics = res.data.names;
+      } catch (error) {
+        if (token !== this.metricFetchToken) {
+          return;
+        }
+        console.warn('Fetching metric index failed:', error);
+        this.error = error;
+      } finally {
+        if (token !== this.metricFetchToken) {
+          return;
         }
+        this.hasLoaded = true;
       }
     },
   },

From 284a2a4192f211bd3cf2c431531f8558dc508438 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Sat, 14 Mar 2026 15:14:14 +0100
Subject: [PATCH 2/3] fix: improve subscription management and prevent stale
 data in metrics fetching

---
 .../src/main/frontend/mixins/subscribing.ts   |  10 ++
 .../views/instances/details/details-cache.vue | 108 ++++++++++--------
 .../instances/details/details-datasource.vue  |  99 ++++++++--------
 .../instances/details/details-health.vue      |  56 ++++++---
 .../views/instances/details/details-info.vue  |  17 ++-
 .../instances/details/details-memory.vue      |  11 +-
 .../instances/details/details-threads.vue     |  94 ++++++++-------
 7 files changed, 235 insertions(+), 160 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts b/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts
index 024a54fcfff..57f6aacb22f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts
@@ -14,11 +14,21 @@
  * limitations under the License.
  */
 
+import { Subject } from 'rxjs';
+
 export default {
+  data() {
+    return {
+      destroy$: new Subject<void>(),
+    };
+  },
   created() {
     this.subscribe();
   },
   beforeUnmount() {
+    // Emit to signal all subscriptions to complete
+    this.destroy$.next();
+    this.destroy$.complete();
     this.unsubscribe();
   },
   methods: {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
index 8b668930e21..6d752b42941 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
@@ -79,7 +79,8 @@
 
 <script>
 import moment from 'moment';
-import { take } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
 
 import SbaAccordion from '@/components/sba-accordion.vue';
 import sbaAlert from '@/components/sba-alert.vue';
@@ -139,31 +140,36 @@ export default {
     },
   },
   methods: {
-    initCacheMetrics() {
-      const updateKey =
-        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
-      const firstInit = this.currentInstanceId === null;
-      if (
-        this.instance.id !== this.currentInstanceId ||
-        updateKey !== this.currentInstanceUpdateKey
-      ) {
-        this.currentInstanceId = this.instance.id;
-        this.currentInstanceUpdateKey = updateKey;
-        this.hasLoaded = false;
-        this.error = null;
-        this.current = null;
-        this.chartData = [];
-        this.shouldFetchCacheSize = true;
-        this.shouldFetchCacheHits = true;
-        this.shouldFetchCacheMisses = true;
+     initCacheMetrics() {
+       const updateKey =
+         this.instance.version ??
+         this.instance.statusTimestamp ??
+         this.instance.id;
+       const firstInit = this.currentInstanceId === null;
+       if (
+         this.instance.id !== this.currentInstanceId ||
+         updateKey !== this.currentInstanceUpdateKey
+       ) {
+         this.currentInstanceId = this.instance.id;
+         this.currentInstanceUpdateKey = updateKey;
+         this.hasLoaded = false;
+         this.error = null;
+         this.current = null;
+         this.chartData = [];
+         this.shouldFetchCacheSize = true;
+         this.shouldFetchCacheHits = true;
+         this.shouldFetchCacheMisses = true;
 
-        // Restart polling immediately so SSE updates refresh the view.
-        if (!firstInit) {
-          this.unsubscribe();
-          this.subscribe();
-        }
-      }
-    },
+         // Restart polling immediately so SSE updates refresh the view.
+         if (!firstInit) {
+           // Stop old subscription and start fresh
+           this.unsubscribe();
+           // Recreate destroy$ so new subscription can use takeUntil properly
+           this.destroy$ = new Subject();
+           this.subscribe();
+         }
+       }
+     },
     async fetchMetrics() {
       const [hit, miss, size] = await Promise.all([
         this.fetchCacheHits(),
@@ -244,31 +250,33 @@ export default {
 
       return { ...data, hitsPerInterval, missesPerInterval, totalPerInterval };
     },
-    createSubscription() {
-      return timer(0, sbaConfig.uiSettings.pollTimer.cache)
-        .pipe(
-          concatMap(this.fetchMetrics),
-          map(this.calculateMetricsPerInterval),
-          retryWhen((err) => {
-            return err.pipe(delay(1000), take(5));
-          }),
-        )
-        .subscribe({
-          next: (data) => {
-            this.hasLoaded = true;
-            this.current = data;
-            this.chartData.push({ ...data, timestamp: moment().valueOf() });
-          },
-          error: (error) => {
-            this.hasLoaded = true;
-            console.warn(
-              `Fetching cache ${this.cacheName} metrics failed:`,
-              error,
-            );
-            this.error = error;
-          },
-        });
-    },
+     createSubscription() {
+       return timer(0, sbaConfig.uiSettings.pollTimer.cache)
+         .pipe(
+           concatMap(this.fetchMetrics),
+           map(this.calculateMetricsPerInterval),
+           // Stop polling when destroy$ emits (on unmount or instance update)
+           takeUntil(this.destroy$),
+           retryWhen((err) => {
+             return err.pipe(delay(1000), take(5));
+           }),
+         )
+         .subscribe({
+           next: (data) => {
+             this.hasLoaded = true;
+             this.current = data;
+             this.chartData.push({ ...data, timestamp: moment().valueOf() });
+           },
+           error: (error) => {
+             this.hasLoaded = true;
+             console.warn(
+               `Fetching cache ${this.cacheName} metrics failed:`,
+               error,
+             );
+             this.error = error;
+           },
+         });
+     },
   },
 };
 </script>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
index a84124b9810..210716f6d2a 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
@@ -67,7 +67,7 @@
 
 <script>
 import moment from 'moment';
-import { concatMap, delay, retryWhen, timer } from 'rxjs';
+import { Subject, concatMap, delay, retryWhen, takeUntil, timer } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import SbaAccordion from '@/components/sba-accordion.vue';
@@ -105,28 +105,33 @@ export default {
     },
   },
   methods: {
-    initDatasourceMetrics() {
-      const updateKey =
-        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
-      const firstInit = this.currentInstanceId === null;
-      if (
-        this.instance.id !== this.currentInstanceId ||
-        updateKey !== this.currentInstanceUpdateKey
-      ) {
-        this.currentInstanceId = this.instance.id;
-        this.currentInstanceUpdateKey = updateKey;
-        this.hasLoaded = false;
-        this.error = null;
-        this.current = null;
-        this.chartData = [];
+     initDatasourceMetrics() {
+       const updateKey =
+         this.instance.version ??
+         this.instance.statusTimestamp ??
+         this.instance.id;
+       const firstInit = this.currentInstanceId === null;
+       if (
+         this.instance.id !== this.currentInstanceId ||
+         updateKey !== this.currentInstanceUpdateKey
+       ) {
+         this.currentInstanceId = this.instance.id;
+         this.currentInstanceUpdateKey = updateKey;
+         this.hasLoaded = false;
+         this.error = null;
+         this.current = null;
+         this.chartData = [];
 
-        // Restart polling immediately so SSE updates refresh the view.
-        if (!firstInit) {
-          this.unsubscribe();
-          this.subscribe();
-        }
-      }
-    },
+         // Restart polling immediately so SSE updates refresh the view.
+         if (!firstInit) {
+           // Stop old subscription and start fresh
+           this.unsubscribe();
+           // Recreate destroy$ so new subscription can use takeUntil properly
+           this.destroy$ = new Subject();
+           this.subscribe();
+         }
+       }
+     },
     async fetchMetrics() {
       const responseActive = this.instance.fetchMetric(
         'jdbc.connections.active',
@@ -145,30 +150,32 @@ export default {
         max: (await responseMax).data.measurements[0].value,
       };
     },
-    createSubscription() {
-      return timer(0, sbaConfig.uiSettings.pollTimer.datasource)
-        .pipe(
-          concatMap(this.fetchMetrics),
-          retryWhen((err) => {
-            return err.pipe(delay(1000), take(5));
-          }),
-        )
-        .subscribe({
-          next: (data) => {
-            this.hasLoaded = true;
-            this.current = data;
-            this.chartData.push({ ...data, timestamp: moment().valueOf() });
-          },
-          error: (error) => {
-            this.hasLoaded = true;
-            console.warn(
-              `Fetching datasource ${this.dataSource} metrics failed:`,
-              error,
-            );
-            this.error = error;
-          },
-        });
-    },
+     createSubscription() {
+       return timer(0, sbaConfig.uiSettings.pollTimer.datasource)
+         .pipe(
+           concatMap(this.fetchMetrics),
+           // Stop polling when destroy$ emits (on unmount or instance update)
+           takeUntil(this.destroy$),
+           retryWhen((err) => {
+             return err.pipe(delay(1000), take(5));
+           }),
+         )
+         .subscribe({
+           next: (data) => {
+             this.hasLoaded = true;
+             this.current = data;
+             this.chartData.push({ ...data, timestamp: moment().valueOf() });
+           },
+           error: (error) => {
+             this.hasLoaded = true;
+             console.warn(
+               `Fetching datasource ${this.dataSource} metrics failed:`,
+               error,
+             );
+             this.error = error;
+           },
+         });
+     },
   },
 };
 </script>
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 fc75353d107..4d8645a9059 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
@@ -126,7 +126,7 @@ export default {
   },
   watch: {
     instance: {
-      handler: 'reloadHealth',
+      handler: 'fetchHealth',
       immediate: true,
     },
   },
@@ -157,29 +157,58 @@ export default {
       const token = ++this.fetchToken;
       this.error = null;
       this.loading = true;
+
       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)) {
-          this.healthGroups = (
-            await Promise.allSettled(
-              res.data.groups.map(async (group: string) => {
-                return {
-                  name: group,
-                  data: (await this.instance.fetchHealthGroup(group)).data,
-                };
-              }),
-            )
-          ).map((group) =>
-            group.status === 'fulfilled' ? group.value : group.reason,
-          );
+          // 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(
@@ -198,6 +227,7 @@ export default {
             .reduce((acc, curr) => ({ ...acc, ...curr }), {});
         }
       } catch (error) {
+        // Stale error - ignore
         if (token !== this.fetchToken) {
           return;
         }
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 8f641020ec4..4143e4df7e2 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
@@ -67,35 +67,38 @@ const loading = ref(false);
 const liveInfo = ref(null);
 const currentInstanceId = ref(null);
 const currentInstanceUpdateKey = ref(null);
-const fetchToken = ref(0);
+const requestGen = ref(0);
 
 const info = computed(() => formatInfo(liveInfo.value || props.instance.info));
 const isEmptyInfo = computed(() => Object.keys(info.value).length <= 0);
 
 async function fetchInfo() {
   if (props.instance.hasEndpoint('info')) {
-    const token = ++fetchToken.value;
+    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();
-      if (token !== fetchToken.value) {
+      // Verify this is still the latest request generation
+      if (gen !== requestGen.value) {
         return;
       }
       liveInfo.value = res.data;
     } catch (err) {
-      if (token !== fetchToken.value) {
+      // Stale error - ignore if a newer request was initiated
+      if (gen !== requestGen.value) {
         return;
       }
       error.value = err;
-
       console.warn('Fetching info failed:', err);
     } finally {
-      if (token !== fetchToken.value) {
+      // Don't clear loading state if new request started
+      if (gen !== requestGen.value) {
         return;
       }
       loading.value = false;
@@ -104,6 +107,8 @@ async function fetchInfo() {
 }
 
 function reloadInfo() {
+  // Increment generation to invalidate any in-flight requests
+  requestGen.value++;
   fetchInfo();
 }
 
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 667164d500d..777bbf7c3a3 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
@@ -92,7 +92,7 @@
 <script lang="ts">
 import moment from 'moment';
 import prettyBytes from 'pretty-bytes';
-import { concatMap, delay, retryWhen, timer } from 'rxjs';
+import { Subject, concatMap, delay, retryWhen, takeUntil, timer } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { defineComponent } from 'vue';
 
@@ -147,7 +147,9 @@ export default defineComponent({
   methods: {
     initMetrics() {
       const updateKey =
-        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+        this.instance.version ??
+        this.instance.statusTimestamp ??
+        this.instance.id;
       const firstInit = this.currentInstanceId === null;
       if (
         this.instance.id !== this.currentInstanceId ||
@@ -162,7 +164,10 @@ export default defineComponent({
 
         // Restart polling immediately so SSE updates refresh the view.
         if (!firstInit) {
+          // Stop old subscription and start fresh
           this.unsubscribe();
+          // Recreate destroy$ so new subscription can use takeUntil properly
+          this.destroy$ = new Subject();
           this.subscribe();
         }
       }
@@ -202,6 +207,8 @@ export default defineComponent({
       return timer(0, sbaConfig.uiSettings.pollTimer.memory)
         .pipe(
           concatMap(this.fetchMetrics),
+          // Stop polling when destroy$ emits (on unmount or instance update)
+          takeUntil(this.destroy$),
           retryWhen((err) => {
             return err.pipe(delay(1000), take(5));
           }),
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 e8f3f50fc41..c19a9fd323c 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
@@ -80,7 +80,8 @@
 
 <script>
 import moment from 'moment';
-import { take } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
 
 import SbaAccordion from '@/components/sba-accordion.vue';
 
@@ -115,28 +116,33 @@ export default {
     },
   },
   methods: {
-    initMetrics() {
-      const updateKey =
-        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
-      const firstInit = this.currentInstanceId === null;
-      if (
-        this.instance.id !== this.currentInstanceId ||
-        updateKey !== this.currentInstanceUpdateKey
-      ) {
-        this.currentInstanceId = this.instance.id;
-        this.currentInstanceUpdateKey = updateKey;
-        this.error = null;
-        this.hasLoaded = false;
-        this.current = null;
-        this.chartData = [];
+     initMetrics() {
+       const updateKey =
+         this.instance.version ??
+         this.instance.statusTimestamp ??
+         this.instance.id;
+       const firstInit = this.currentInstanceId === null;
+       if (
+         this.instance.id !== this.currentInstanceId ||
+         updateKey !== this.currentInstanceUpdateKey
+       ) {
+         this.currentInstanceId = this.instance.id;
+         this.currentInstanceUpdateKey = updateKey;
+         this.error = null;
+         this.hasLoaded = false;
+         this.current = null;
+         this.chartData = [];
 
-        // Restart polling immediately so SSE updates refresh the view.
-        if (!firstInit) {
-          this.unsubscribe();
-          this.subscribe();
-        }
-      }
-    },
+         // Restart polling immediately so SSE updates refresh the view.
+         if (!firstInit) {
+           // Stop old subscription and start fresh
+           this.unsubscribe();
+           // Recreate destroy$ so new subscription can use takeUntil properly
+           this.destroy$ = new Subject();
+           this.subscribe();
+         }
+       }
+     },
     async fetchMetrics() {
       const responseLive = this.instance.fetchMetric('jvm.threads.live');
       const responsePeak = this.instance.fetchMetric('jvm.threads.peak');
@@ -148,27 +154,29 @@ export default {
         daemon: (await responseDaemon).data.measurements[0].value,
       };
     },
-    createSubscription() {
-      return timer(0, sbaConfig.uiSettings.pollTimer.threads)
-        .pipe(
-          concatMap(this.fetchMetrics),
-          retryWhen((err) => {
-            return err.pipe(delay(1000), take(5));
-          }),
-        )
-        .subscribe({
-          next: (data) => {
-            this.hasLoaded = true;
-            this.current = data;
-            this.chartData.push({ ...data, timestamp: moment().valueOf() });
-          },
-          error: (error) => {
-            this.hasLoaded = true;
-            console.warn('Fetching threads metrics failed:', error);
-            this.error = error;
-          },
-        });
-    },
+     createSubscription() {
+       return timer(0, sbaConfig.uiSettings.pollTimer.threads)
+         .pipe(
+           concatMap(this.fetchMetrics),
+           // Stop polling when destroy$ emits (on unmount or instance update)
+           takeUntil(this.destroy$),
+           retryWhen((err) => {
+             return err.pipe(delay(1000), take(5));
+           }),
+         )
+         .subscribe({
+           next: (data) => {
+             this.hasLoaded = true;
+             this.current = data;
+             this.chartData.push({ ...data, timestamp: moment().valueOf() });
+           },
+           error: (error) => {
+             this.hasLoaded = true;
+             console.warn('Fetching threads metrics failed:', error);
+             this.error = error;
+           },
+         });
+     },
   },
 };
 </script>

From 98719f6e0a096548a59cf6ce9e333a0287612286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Tue, 24 Mar 2026 21:23:18 +0100
Subject: [PATCH 3/3] fix: enhance details page information fetching and
 subscription management

---
 .../src/main/frontend/mixins/subscribing.ts   |   1 -
 .../views/instances/details/details-cache.vue | 112 +++++++++---------
 .../instances/details/details-datasource.vue  | 104 ++++++++--------
 .../instances/details/details-health.spec.ts  |  23 ++++
 .../instances/details/details-health.vue      |   8 +-
 .../views/instances/details/details-info.vue  |   4 +-
 .../instances/details/details-memory.spec.ts  |  12 +-
 .../instances/details/details-threads.spec.ts |   3 +-
 .../instances/details/details-threads.vue     |  98 +++++++--------
 9 files changed, 201 insertions(+), 164 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts b/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts
index 57f6aacb22f..fa9e488c35c 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { Subject } from 'rxjs';
 
 export default {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
index 6d752b42941..0a7a41ca5a6 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue
@@ -140,36 +140,36 @@ export default {
     },
   },
   methods: {
-     initCacheMetrics() {
-       const updateKey =
-         this.instance.version ??
-         this.instance.statusTimestamp ??
-         this.instance.id;
-       const firstInit = this.currentInstanceId === null;
-       if (
-         this.instance.id !== this.currentInstanceId ||
-         updateKey !== this.currentInstanceUpdateKey
-       ) {
-         this.currentInstanceId = this.instance.id;
-         this.currentInstanceUpdateKey = updateKey;
-         this.hasLoaded = false;
-         this.error = null;
-         this.current = null;
-         this.chartData = [];
-         this.shouldFetchCacheSize = true;
-         this.shouldFetchCacheHits = true;
-         this.shouldFetchCacheMisses = true;
+    initCacheMetrics() {
+      const updateKey =
+        this.instance.version ??
+        this.instance.statusTimestamp ??
+        this.instance.id;
+      const firstInit = this.currentInstanceId === null;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
+        this.currentInstanceId = this.instance.id;
+        this.currentInstanceUpdateKey = updateKey;
+        this.hasLoaded = false;
+        this.error = null;
+        this.current = null;
+        this.chartData = [];
+        this.shouldFetchCacheSize = true;
+        this.shouldFetchCacheHits = true;
+        this.shouldFetchCacheMisses = true;
 
-         // Restart polling immediately so SSE updates refresh the view.
-         if (!firstInit) {
-           // Stop old subscription and start fresh
-           this.unsubscribe();
-           // Recreate destroy$ so new subscription can use takeUntil properly
-           this.destroy$ = new Subject();
-           this.subscribe();
-         }
-       }
-     },
+        // Restart polling immediately so SSE updates refresh the view.
+        if (!firstInit) {
+          // Stop old subscription and start fresh
+          this.unsubscribe();
+          // Recreate destroy$ so new subscription can use takeUntil properly
+          this.destroy$ = new Subject();
+          this.subscribe();
+        }
+      }
+    },
     async fetchMetrics() {
       const [hit, miss, size] = await Promise.all([
         this.fetchCacheHits(),
@@ -250,33 +250,33 @@ export default {
 
       return { ...data, hitsPerInterval, missesPerInterval, totalPerInterval };
     },
-     createSubscription() {
-       return timer(0, sbaConfig.uiSettings.pollTimer.cache)
-         .pipe(
-           concatMap(this.fetchMetrics),
-           map(this.calculateMetricsPerInterval),
-           // Stop polling when destroy$ emits (on unmount or instance update)
-           takeUntil(this.destroy$),
-           retryWhen((err) => {
-             return err.pipe(delay(1000), take(5));
-           }),
-         )
-         .subscribe({
-           next: (data) => {
-             this.hasLoaded = true;
-             this.current = data;
-             this.chartData.push({ ...data, timestamp: moment().valueOf() });
-           },
-           error: (error) => {
-             this.hasLoaded = true;
-             console.warn(
-               `Fetching cache ${this.cacheName} metrics failed:`,
-               error,
-             );
-             this.error = error;
-           },
-         });
-     },
+    createSubscription() {
+      return timer(0, sbaConfig.uiSettings.pollTimer.cache)
+        .pipe(
+          concatMap(this.fetchMetrics),
+          map(this.calculateMetricsPerInterval),
+          // Stop polling when destroy$ emits (on unmount or instance update)
+          takeUntil(this.destroy$),
+          retryWhen((err) => {
+            return err.pipe(delay(1000), take(5));
+          }),
+        )
+        .subscribe({
+          next: (data) => {
+            this.hasLoaded = true;
+            this.current = data;
+            this.chartData.push({ ...data, timestamp: moment().valueOf() });
+          },
+          error: (error) => {
+            this.hasLoaded = true;
+            console.warn(
+              `Fetching cache ${this.cacheName} metrics failed:`,
+              error,
+            );
+            this.error = error;
+          },
+        });
+    },
   },
 };
 </script>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
index 210716f6d2a..52408a73a5d 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue
@@ -105,33 +105,33 @@ export default {
     },
   },
   methods: {
-     initDatasourceMetrics() {
-       const updateKey =
-         this.instance.version ??
-         this.instance.statusTimestamp ??
-         this.instance.id;
-       const firstInit = this.currentInstanceId === null;
-       if (
-         this.instance.id !== this.currentInstanceId ||
-         updateKey !== this.currentInstanceUpdateKey
-       ) {
-         this.currentInstanceId = this.instance.id;
-         this.currentInstanceUpdateKey = updateKey;
-         this.hasLoaded = false;
-         this.error = null;
-         this.current = null;
-         this.chartData = [];
+    initDatasourceMetrics() {
+      const updateKey =
+        this.instance.version ??
+        this.instance.statusTimestamp ??
+        this.instance.id;
+      const firstInit = this.currentInstanceId === null;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
+        this.currentInstanceId = this.instance.id;
+        this.currentInstanceUpdateKey = updateKey;
+        this.hasLoaded = false;
+        this.error = null;
+        this.current = null;
+        this.chartData = [];
 
-         // Restart polling immediately so SSE updates refresh the view.
-         if (!firstInit) {
-           // Stop old subscription and start fresh
-           this.unsubscribe();
-           // Recreate destroy$ so new subscription can use takeUntil properly
-           this.destroy$ = new Subject();
-           this.subscribe();
-         }
-       }
-     },
+        // Restart polling immediately so SSE updates refresh the view.
+        if (!firstInit) {
+          // Stop old subscription and start fresh
+          this.unsubscribe();
+          // Recreate destroy$ so new subscription can use takeUntil properly
+          this.destroy$ = new Subject();
+          this.subscribe();
+        }
+      }
+    },
     async fetchMetrics() {
       const responseActive = this.instance.fetchMetric(
         'jdbc.connections.active',
@@ -150,32 +150,32 @@ export default {
         max: (await responseMax).data.measurements[0].value,
       };
     },
-     createSubscription() {
-       return timer(0, sbaConfig.uiSettings.pollTimer.datasource)
-         .pipe(
-           concatMap(this.fetchMetrics),
-           // Stop polling when destroy$ emits (on unmount or instance update)
-           takeUntil(this.destroy$),
-           retryWhen((err) => {
-             return err.pipe(delay(1000), take(5));
-           }),
-         )
-         .subscribe({
-           next: (data) => {
-             this.hasLoaded = true;
-             this.current = data;
-             this.chartData.push({ ...data, timestamp: moment().valueOf() });
-           },
-           error: (error) => {
-             this.hasLoaded = true;
-             console.warn(
-               `Fetching datasource ${this.dataSource} metrics failed:`,
-               error,
-             );
-             this.error = error;
-           },
-         });
-     },
+    createSubscription() {
+      return timer(0, sbaConfig.uiSettings.pollTimer.datasource)
+        .pipe(
+          concatMap(this.fetchMetrics),
+          // Stop polling when destroy$ emits (on unmount or instance update)
+          takeUntil(this.destroy$),
+          retryWhen((err) => {
+            return err.pipe(delay(1000), take(5));
+          }),
+        )
+        .subscribe({
+          next: (data) => {
+            this.hasLoaded = true;
+            this.current = data;
+            this.chartData.push({ ...data, timestamp: moment().valueOf() });
+          },
+          error: (error) => {
+            this.hasLoaded = true;
+            console.warn(
+              `Fetching datasource ${this.dataSource} metrics failed:`,
+              error,
+            );
+            this.error = error;
+          },
+        });
+    },
   },
 };
 </script>
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 dcd2f33e28b..fbdf71e32f8 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
@@ -242,4 +242,27 @@ describe('DetailsHealth', () => {
       }),
     ).toBeNull();
   });
+
+  it('should fetch health details only once on startup', async () => {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+
+    render(DetailsHealth, {
+      props: {
+        instance,
+      },
+    });
+
+    await waitFor(() => {
+      expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // Verify that the handler is not called again after the initial fetch
+    await waitFor(
+      () => {
+        expect(healthHandlerSpy).toHaveBeenCalledTimes(1);
+      },
+      { timeout: 1000 },
+    );
+  });
 });
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 4d8645a9059..cbeb7f90c32 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
@@ -133,7 +133,9 @@ export default {
   methods: {
     reloadHealth() {
       const updateKey =
-        this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+        this.instance.version ??
+        this.instance.statusTimestamp ??
+        this.instance.id;
       if (
         this.instance.id !== this.currentInstanceId ||
         updateKey !== this.currentInstanceUpdateKey
@@ -167,7 +169,9 @@ export default {
 
         this.currentInstanceId = this.instance.id;
         this.currentInstanceUpdateKey =
-          this.instance.version ?? this.instance.statusTimestamp ?? this.instance.id;
+          this.instance.version ??
+          this.instance.statusTimestamp ??
+          this.instance.id;
         this.liveHealth = res.data;
 
         if (Array.isArray(res.data.groups)) {
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 4143e4df7e2..24021131969 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
@@ -78,7 +78,9 @@ async function fetchInfo() {
 
     currentInstanceId.value = props.instance.id;
     currentInstanceUpdateKey.value =
-      props.instance.version ?? props.instance.statusTimestamp ?? props.instance.id;
+      props.instance.version ??
+      props.instance.statusTimestamp ??
+      props.instance.id;
     loading.value = true;
     error.value = null;
 
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts
index 75b32f9deb2..3b41252dc9f 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts
@@ -199,7 +199,11 @@ describe('DetailsMemory', () => {
     const instance1 = new Instance({
       id: '1',
       version: 1,
-      availableMetrics: ['jvm.memory.used', 'jvm.memory.max', 'jvm.memory.committed'],
+      availableMetrics: [
+        'jvm.memory.used',
+        'jvm.memory.max',
+        'jvm.memory.committed',
+      ],
     });
     instance1.fetchMetric = vi.fn().mockImplementation((name: string) => {
       if (name === 'jvm.memory.max') return pMax1.promise;
@@ -211,7 +215,11 @@ describe('DetailsMemory', () => {
     const instance2 = new Instance({
       id: '1',
       version: 2,
-      availableMetrics: ['jvm.memory.used', 'jvm.memory.max', 'jvm.memory.committed'],
+      availableMetrics: [
+        'jvm.memory.used',
+        'jvm.memory.max',
+        'jvm.memory.committed',
+      ],
     });
     instance2.fetchMetric = vi.fn().mockImplementation((name: string) => {
       const mk = (value: number) =>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts
index 2ef82e22d3c..531b6f8de55 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts
@@ -124,7 +124,8 @@ describe('DetailsThreads', () => {
   it('should reinitialize metrics when instance version changes (SSE update)', async () => {
     const stubChart = {
       props: ['data'],
-      template: `<div data-testid="chart">{{ JSON.stringify($props.data) }}</div>`,
+      template:
+        '<div data-testid="chart">{{ JSON.stringify($props.data) }}</div>',
     };
 
     const application = new Application(applications[0]);
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 c19a9fd323c..bd0ce66e81a 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
@@ -116,33 +116,33 @@ export default {
     },
   },
   methods: {
-     initMetrics() {
-       const updateKey =
-         this.instance.version ??
-         this.instance.statusTimestamp ??
-         this.instance.id;
-       const firstInit = this.currentInstanceId === null;
-       if (
-         this.instance.id !== this.currentInstanceId ||
-         updateKey !== this.currentInstanceUpdateKey
-       ) {
-         this.currentInstanceId = this.instance.id;
-         this.currentInstanceUpdateKey = updateKey;
-         this.error = null;
-         this.hasLoaded = false;
-         this.current = null;
-         this.chartData = [];
+    initMetrics() {
+      const updateKey =
+        this.instance.version ??
+        this.instance.statusTimestamp ??
+        this.instance.id;
+      const firstInit = this.currentInstanceId === null;
+      if (
+        this.instance.id !== this.currentInstanceId ||
+        updateKey !== this.currentInstanceUpdateKey
+      ) {
+        this.currentInstanceId = this.instance.id;
+        this.currentInstanceUpdateKey = updateKey;
+        this.error = null;
+        this.hasLoaded = false;
+        this.current = null;
+        this.chartData = [];
 
-         // Restart polling immediately so SSE updates refresh the view.
-         if (!firstInit) {
-           // Stop old subscription and start fresh
-           this.unsubscribe();
-           // Recreate destroy$ so new subscription can use takeUntil properly
-           this.destroy$ = new Subject();
-           this.subscribe();
-         }
-       }
-     },
+        // Restart polling immediately so SSE updates refresh the view.
+        if (!firstInit) {
+          // Stop old subscription and start fresh
+          this.unsubscribe();
+          // Recreate destroy$ so new subscription can use takeUntil properly
+          this.destroy$ = new Subject();
+          this.subscribe();
+        }
+      }
+    },
     async fetchMetrics() {
       const responseLive = this.instance.fetchMetric('jvm.threads.live');
       const responsePeak = this.instance.fetchMetric('jvm.threads.peak');
@@ -154,29 +154,29 @@ export default {
         daemon: (await responseDaemon).data.measurements[0].value,
       };
     },
-     createSubscription() {
-       return timer(0, sbaConfig.uiSettings.pollTimer.threads)
-         .pipe(
-           concatMap(this.fetchMetrics),
-           // Stop polling when destroy$ emits (on unmount or instance update)
-           takeUntil(this.destroy$),
-           retryWhen((err) => {
-             return err.pipe(delay(1000), take(5));
-           }),
-         )
-         .subscribe({
-           next: (data) => {
-             this.hasLoaded = true;
-             this.current = data;
-             this.chartData.push({ ...data, timestamp: moment().valueOf() });
-           },
-           error: (error) => {
-             this.hasLoaded = true;
-             console.warn('Fetching threads metrics failed:', error);
-             this.error = error;
-           },
-         });
-     },
+    createSubscription() {
+      return timer(0, sbaConfig.uiSettings.pollTimer.threads)
+        .pipe(
+          concatMap(this.fetchMetrics),
+          // Stop polling when destroy$ emits (on unmount or instance update)
+          takeUntil(this.destroy$),
+          retryWhen((err) => {
+            return err.pipe(delay(1000), take(5));
+          }),
+        )
+        .subscribe({
+          next: (data) => {
+            this.hasLoaded = true;
+            this.current = data;
+            this.chartData.push({ ...data, timestamp: moment().valueOf() });
+          },
+          error: (error) => {
+            this.hasLoaded = true;
+            console.warn('Fetching threads metrics failed:', error);
+            this.error = error;
+          },
+        });
+    },
   },
 };
 </script>