Fix/4511 init metrics data on instance switch (#4634)

Author: ulischulte

spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/resources/application.yml

@@ -34,8 +34,6 @@ management:
         enabled: true
     health:
       show-details: ALWAYS
-  server:
-    port: 9999
 
 
 spring:

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.spec.ts

@@ -1,5 +1,5 @@
 import { screen, waitFor } from '@testing-library/vue';
-import { enableAutoUnmount, shallowMount } from '@vue/test-utils';
+import { enableAutoUnmount } from '@vue/test-utils';
 import { HttpResponse, http } from 'msw';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -34,6 +34,30 @@ describe('DetailsCache', () => {
   const MISSES_PER_INTERVAL = [0, 0, 8];
   const TOTAL_PER_INTERVAL = [0, 8, 24];
 
+  const stubChart = {
+    props: ['data'],
+    template: `
+        <div data-test="chart">
+          {{ JSON.stringify($props.data) }}
+        </div>
+      `,
+  };
+
+  const renderComponent = async (stubs = {}) => {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+    return render(DetailsCache, {
+      global: {
+        stubs,
+      },
+      props: {
+        instance,
+        cacheName: CACHE_NAME,
+        index: 0,
+      },
+    });
+  };
+
   beforeEach(() => {
     const hitsGenerator = (function* () {
       yield* HITS;
@@ -68,21 +92,6 @@ describe('DetailsCache', () => {
     );
   });
 
-  async function renderComponent(stubs = {}) {
-    const application = new Application(applications[0]);
-    const instance = application.instances[0];
-    return render(DetailsCache, {
-      global: {
-        stubs,
-      },
-      props: {
-        instance,
-        cacheName: CACHE_NAME,
-        index: 0,
-      },
-    });
-  }
-
   it('should render cache name', async () => {
     await renderComponent();
 
@@ -114,49 +123,110 @@ describe('DetailsCache', () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
 
-    const vueWrapper = shallowMount(DetailsCache, {
+    const { container } = await render(DetailsCache, {
+      global: { stubs: { cacheChart: stubChart } },
       props: {
         instance,
         cacheName: CACHE_NAME,
         index: 0,
       },
     });
 
-    await waitFor(() => {
-      expect(vueWrapper.vm.chartData).toHaveLength(3);
-    });
+    // wait until chart stub receives at least 3 data points
+    await waitFor(
+      () => {
+        const el = container.querySelector('[data-test="chart"]');
+        expect(el).toBeTruthy();
+        const text = (el?.textContent as string) || '[]';
+        const parsed = JSON.parse(text);
+        expect(parsed).toHaveLength(3);
+      },
+      { timeout: 2000 },
+    );
+
+    const chartText =
+      (container.querySelector('[data-test="chart"]')?.textContent as string) ||
+      '[]';
+    const chartData = JSON.parse(chartText);
 
-    for (let index = 0; index < vueWrapper.vm.chartData.length; index++) {
-      expect(vueWrapper.vm.chartData[index].total).toEqual(TOTAL[index]);
+    for (let index = 0; index < chartData.length; index++) {
+      expect(chartData[index].total).toEqual(TOTAL[index]);
     }
   });
 
   it('should calculate hits, misses and total per interval', async () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
 
-    const vueWrapper = shallowMount(DetailsCache, {
+    const { container } = await render(DetailsCache, {
+      global: { stubs: { cacheChart: stubChart } },
       props: {
         instance,
         cacheName: CACHE_NAME,
         index: 0,
       },
     });
 
-    await waitFor(() => {
-      expect(vueWrapper.vm.chartData).toHaveLength(3);
-    });
+    // wait until chart stub receives at least 3 data points
+    await waitFor(
+      () => {
+        const el = container.querySelector('[data-test="chart"]');
+        expect(el).toBeTruthy();
+        const text = (el?.textContent as string) || '[]';
+        const parsed = JSON.parse(text);
+        expect(parsed).toHaveLength(3);
+      },
+      { timeout: 2000 },
+    );
 
-    for (let index = 0; index < vueWrapper.vm.chartData.length; index++) {
-      expect(vueWrapper.vm.chartData[index].hitsPerInterval).toEqual(
+    const chartText2 =
+      (container.querySelector('[data-test="chart"]')?.textContent as string) ||
+      '[]';
+    const chartData = JSON.parse(chartText2);
+
+    for (let index = 0; index < chartData.length; index++) {
+      expect(chartData[index].hitsPerInterval).toEqual(
         HITS_PER_INTERVAL[index],
       );
-      expect(vueWrapper.vm.chartData[index].missesPerInterval).toEqual(
+      expect(chartData[index].missesPerInterval).toEqual(
         MISSES_PER_INTERVAL[index],
       );
-      expect(vueWrapper.vm.chartData[index].totalPerInterval).toEqual(
+      expect(chartData[index].totalPerInterval).toEqual(
         TOTAL_PER_INTERVAL[index],
       );
     }
   });
+
+  it('should reinitialize metrics when instance changes', async () => {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+
+    const { getByText, rerender, queryByText } = await render(DetailsCache, {
+      props: {
+        instance,
+        cacheName: CACHE_NAME,
+        index: 0,
+      },
+    });
+
+    // wait until initial fetch rendered a numeric value
+    await waitFor(() => {
+      expect(getByText(`${HITS[0]}`)).toBeTruthy();
+    });
+
+    // simulate switching to a different instance
+    const newApp = new Application({
+      name: 'Other',
+      statusTimestamp: Date.now(),
+      instances: [{ id: 'other-1', statusInfo: { status: 'UP' } }],
+    });
+    const newInstance = newApp.instances[0];
+
+    await rerender({ instance: newInstance, cacheName: CACHE_NAME, index: 0 });
+
+    // component should have reset its rendered data
+    await waitFor(() => {
+      expect(queryByText(`${HITS[0]}`)).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -111,6 +111,7 @@ export default {
     shouldFetchCacheHits: true,
     shouldFetchCacheMisses: true,
     chartData: [],
+    currentInstanceId: null,
   }),
   computed: {
     ratio() {
@@ -126,7 +127,25 @@ export default {
       return undefined;
     },
   },
+  watch: {
+    instance: {
+      handler: 'initCacheMetrics',
+      immediate: true,
+    },
+  },
   methods: {
+    initCacheMetrics() {
+      if (this.instance.id !== this.currentInstanceId) {
+        this.currentInstanceId = this.instance.id;
+        this.hasLoaded = false;
+        this.error = null;
+        this.current = null;
+        this.chartData = [];
+        this.shouldFetchCacheSize = true;
+        this.shouldFetchCacheHits = true;
+        this.shouldFetchCacheMisses = true;
+      }
+    },
     async fetchMetrics() {
       const [hit, miss, size] = await Promise.all([
         this.fetchCacheHits(),

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.spec.ts

@@ -0,0 +1,157 @@
+import { screen, waitFor } from '@testing-library/vue';
+import { enableAutoUnmount } from '@vue/test-utils';
+import { HttpResponse, http } from 'msw';
+import { afterEach, beforeEach, 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 DetailsDatasource from '@/views/instances/details/details-datasource.vue';
+
+vi.mock('@/sba-config', async () => {
+  const sbaConfig: any = await vi.importActual('@/sba-config');
+  return {
+    default: {
+      ...sbaConfig.default,
+      uiSettings: {
+        pollTimer: {
+          datasource: 100,
+        },
+      },
+    },
+  };
+});
+
+describe('DetailsDatasource', () => {
+  enableAutoUnmount(afterEach);
+
+  const DATA_SOURCE = 'my-ds';
+  const ACTIVE = [2.0, 3.0, 4.0];
+  const MIN = [1.0, 1.0, 1.0];
+  const MAX = [5.0, -1.0, 10.0]; // include unlimited (-1) case
+
+  beforeEach(() => {
+    const activeGenerator = (function* () {
+      yield* ACTIVE;
+    })();
+    const minGenerator = (function* () {
+      yield* MIN;
+    })();
+    const maxGenerator = (function* () {
+      yield* MAX;
+    })();
+
+    server.use(
+      http.get(
+        '/instances/:instanceId/actuator/metrics/jdbc.connections.active',
+        () => {
+          return HttpResponse.json({
+            measurements: [{ value: activeGenerator.next()?.value }],
+          });
+        },
+      ),
+      http.get(
+        '/instances/:instanceId/actuator/metrics/jdbc.connections.min',
+        () => {
+          return HttpResponse.json({
+            measurements: [{ value: minGenerator.next()?.value }],
+          });
+        },
+      ),
+      http.get(
+        '/instances/:instanceId/actuator/metrics/jdbc.connections.max',
+        () => {
+          return HttpResponse.json({
+            measurements: [{ value: maxGenerator.next()?.value }],
+          });
+        },
+      ),
+    );
+  });
+
+  async function renderComponent(stubs = {}) {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+    return render(DetailsDatasource, {
+      global: {
+        stubs,
+      },
+      props: {
+        instance,
+        dataSource: DATA_SOURCE,
+      },
+    });
+  }
+
+  it('renders panel title with datasource name', async () => {
+    await renderComponent();
+
+    // title uses i18n keys in the test environment; ensure heading is present
+    const heading = await screen.findByRole('heading');
+    expect(heading).toBeVisible();
+  });
+
+  it('renders active, min and max values', async () => {
+    await renderComponent();
+
+    // labels use i18n keys; assert numeric values are rendered
+    expect(await screen.findByText(`${ACTIVE[0]}`)).toBeVisible();
+    expect(await screen.findByText(`${MIN[0]}`)).toBeVisible();
+    expect(await screen.findByText(`${MAX[0]}`)).toBeVisible();
+  });
+
+  it('handles unlimited max (-1) and pushes chartData points', async () => {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+
+    await render(DetailsDatasource, {
+      props: {
+        instance,
+        dataSource: DATA_SOURCE,
+      },
+    });
+
+    // wait until initial metric value is visible
+    await waitFor(() => {
+      expect(screen.getByText(`${ACTIVE[0]}`)).toBeVisible();
+    });
+
+    // second measurement MAX[1] === -1 should be displayed as 'unlimited' in rendered markup
+    expect(
+      await screen.findByText('instances.details.datasource.unlimited'),
+    ).toBeVisible();
+  });
+
+  it('should reinitialize metrics when instance changes', async () => {
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+
+    const { rerender } = await render(DetailsDatasource, {
+      props: {
+        instance,
+        dataSource: DATA_SOURCE,
+      },
+    });
+
+    // Wait for the component to poll and populate chartData (3 samples)
+    await waitFor(() => {
+      // find any of the numeric texts to ensure initial fetch happened
+      expect(screen.getByText(`${ACTIVE[0]}`)).toBeVisible();
+    });
+
+    const newApp = new Application({
+      name: 'Other',
+      statusTimestamp: Date.now(),
+      instances: [{ id: 'other-1', statusInfo: { status: 'UP' } }],
+    });
+    const newInstance = newApp.instances[0];
+
+    await rerender({ instance: newInstance, dataSource: DATA_SOURCE });
+
+    // After rerender with a different instance, the component should reset
+    await waitFor(() => {
+      expect(screen.queryByText(`${ACTIVE[0]}`)).not.toBeInTheDocument();
+    });
+  });
+});