fix(#2621): do not show loading spinner, when metrics actuator is not exposed

* state should be loaded by default

if it is not loaded and /actuator/metrics is not exposed then loading overlay covers view forever.

* chore: add tests

---------

Co-authored-by: Stephan Köninger <[email protected]>

Author: ydubrouka

spring-boot-admin-server-ui/src/main/frontend/mocks/instance/health/index.ts

@@ -0,0 +1,58 @@
+import { rest } from 'msw';
+
+const healthEndpoint = [
+  rest.get('/instances/:instanceId/actuator/health', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        status: 'UP',
+        details: {
+          clientConfigServer: {
+            status: 'UNKNOWN',
+            details: { error: 'no property sources located' },
+          },
+          db: {
+            status: 'UP',
+            details: {
+              database: 'HSQL Database Engine',
+              validationQuery: 'isValid()',
+            },
+          },
+          discoveryComposite: {
+            description: 'Discovery Client not initialized',
+            status: 'UNKNOWN',
+            details: {
+              discoveryClient: {
+                description: 'Discovery Client not initialized',
+                status: 'UNKNOWN',
+              },
+            },
+          },
+          diskSpace: {
+            status: 'UP',
+            details: {
+              total: 994662584320,
+              free: 300063879168,
+              threshold: 10485760,
+              exists: true,
+            },
+          },
+          ping: { status: 'UP' },
+          reactiveDiscoveryClients: {
+            description: 'Discovery Client not initialized',
+            status: 'UNKNOWN',
+            details: {
+              'Simple Reactive Discovery Client': {
+                description: 'Discovery Client not initialized',
+                status: 'UNKNOWN',
+              },
+            },
+          },
+          refreshScope: { status: 'UP' },
+        },
+      })
+    );
+  }),
+];
+
+export default healthEndpoint;

spring-boot-admin-server-ui/src/main/frontend/mocks/instance/info/index.ts

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+const infoEndpoint = [
+  rest.get('/instances/:instanceId/actuator/info', (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({}));
+  }),
+];
+
+export default infoEndpoint;

spring-boot-admin-server-ui/src/main/frontend/mocks/server.ts

@@ -2,11 +2,15 @@ import { setupServer } from 'msw/node';
 
 import auditEventsEndpoint from '@/mocks/instance/auditevents';
 import flywayEndpoints from '@/mocks/instance/flyway';
+import healthEndpoint from '@/mocks/instance/health';
+import infoEndpoint from '@/mocks/instance/info';
 import jolokiaEndpoint from '@/mocks/instance/jolokia';
 import liquibaseEndpoints from '@/mocks/instance/liquibase';
-import mappingsEndpoint from '@/mocks/instance/mappings/index.js';
+import mappingsEndpoint from '@/mocks/instance/mappings';
 
 const handler = [
+  ...infoEndpoint,
+  ...healthEndpoint,
   ...mappingsEndpoint,
   ...liquibaseEndpoints,
   ...flywayEndpoints,

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

@@ -0,0 +1,60 @@
+import { screen, waitFor } from '@testing-library/vue';
+import { rest } from 'msw';
+import { describe, expect, it, vi } from 'vitest';
+
+import DetailsView from './index.vue';
+
+import { applications } from '@/mocks/applications/data';
+import { server } from '@/mocks/server';
+import Application from '@/services/application';
+import { render } from '@/test-utils';
+
+describe('InstanceDetails', () => {
+  describe('Metrics', () => {
+    it('should hide loading spinner, when network call fails', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+
+      server.use(
+        rest.get('/instances/:instanceId/actuator/metrics', (req, res, ctx) => {
+          return res(ctx.status(404), ctx.json({}));
+        })
+      );
+
+      render(DetailsView, {
+        props: {
+          instance,
+          application,
+        },
+      });
+
+      await waitFor(async () => {
+        expect(
+          await screen.queryByTestId('instance-section-loading-spinner')
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    it('should hide loading spinner, when metrics endpoint is not exposed', async () => {
+      const application = new Application(applications[0]);
+      const instance = application.instances[0];
+
+      instance.hasEndpoint = vi.fn().mockImplementation((endpoint) => {
+        return endpoint !== 'metrics';
+      });
+
+      render(DetailsView, {
+        props: {
+          instance,
+          application,
+        },
+      });
+
+      await waitFor(async () => {
+        expect(
+          await screen.queryByTestId('instance-section-loading-spinner')
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
+});

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

@@ -17,17 +17,17 @@
 <template>
   <sba-instance-section :error="error" :loading="!hasLoaded">
     <template #before>
-      <details-nav :application="application" :instance="instance" />
-      <details-hero :instance="instance" />
+      <details-nav :application="application" :instance="instance"/>
+      <details-hero :instance="instance"/>
     </template>
 
     <div class="flex gap-6 flex-col lg:flex-row">
       <div class="flex-1">
-        <details-info v-if="hasInfo" :instance="instance" />
-        <details-metadata v-if="hasMetadata" :instance="instance" />
+        <details-info v-if="hasInfo" :instance="instance"/>
+        <details-metadata v-if="hasMetadata" :instance="instance"/>
       </div>
       <div class="flex-1">
-        <details-health :instance="instance" />
+        <details-health :instance="instance"/>
       </div>
     </div>
 
@@ -38,28 +38,28 @@
           :instance="instance"
           class="break-inside-avoid"
         />
-        <details-gc v-if="hasGc" :instance="instance" />
+        <details-gc v-if="hasGc" :instance="instance"/>
       </div>
       <div class="flex-1">
-        <details-threads v-if="hasThreads" :instance="instance" />
+        <details-threads v-if="hasThreads" :instance="instance"/>
       </div>
     </div>
 
     <div class="flex gap-6 flex-col lg:flex-row">
       <div class="flex-1">
-        <details-memory v-if="hasMemory" :instance="instance" type="heap" />
+        <details-memory v-if="hasMemory" :instance="instance" type="heap"/>
       </div>
       <div class="flex-1">
-        <details-memory v-if="hasMemory" :instance="instance" type="nonheap" />
+        <details-memory v-if="hasMemory" :instance="instance" type="nonheap"/>
       </div>
     </div>
 
     <div class="flex gap-6 flex-col lg:flex-row">
       <div class="flex-1">
-        <details-datasources v-if="hasDatasources" :instance="instance" />
+        <details-datasources v-if="hasDatasources" :instance="instance"/>
       </div>
       <div class="flex-1">
-        <details-caches v-if="hasCaches" :instance="instance" />
+        <details-caches v-if="hasCaches" :instance="instance"/>
       </div>
     </div>
   </sba-instance-section>
@@ -68,7 +68,7 @@
 <script>
 import Application from '@/services/application';
 import Instance from '@/services/instance';
-import { VIEW_GROUP } from '@/views/ViewGroup';
+import {VIEW_GROUP} from '@/views/ViewGroup';
 import detailsCaches from '@/views/instances/details/details-caches';
 import detailsDatasources from '@/views/instances/details/details-datasources';
 import detailsGc from '@/views/instances/details/details-gc';
@@ -108,7 +108,7 @@ export default {
     },
   },
   data: () => ({
-    hasLoaded: false,
+    hasLoaded: true,
     error: null,
     metrics: [],
   }),
@@ -166,7 +166,7 @@ export default {
       }
     },
   },
-  install({ viewRegistry }) {
+  install({viewRegistry}) {
     viewRegistry.addView({
       name: 'instances/details',
       parent: 'instances',

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/sba-instance-section.vue

@@ -23,7 +23,11 @@
         class="mb-6 w-full"
       />
 
-      <div v-if="loading" class="loading-spinner-wrapper">
+      <div
+        v-if="loading"
+        class="loading-spinner-wrapper"
+        data-testid="instance-section-loading-spinner"
+      >
         <div class="loading-spinner-wrapper-container">
           <sba-loading-spinner size="sm" />
           {{ $t('term.fetching_data') }}