chore: show error in wallboard, too, when server connection is lost

spring-boot-admin-server-ui/src/main/frontend/test-utils.js

@@ -17,8 +17,8 @@ export const render = (testComponent, options) => {
             en: terms,
           },
           legacy: false,
-          silentFallbackWarn: true,
-          silentTranslationWarn: true,
+          fallbackWarn: false,
+          missingWarn: false,
         }),
         NotificationcenterPlugin,
         SbaModalPlugin,

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

@@ -16,9 +16,19 @@
 
 <template>
   <section class="wallboard section">
-    <p v-if="!applicationsInitialized" class="is-muted is-loading">
-      Loading applications...
-    </p>
+    <sba-alert
+      v-if="error"
+      :error="error"
+      :title="t('applications.server_connection_failed')"
+      class="my-0 fixed w-full"
+      severity="WARN"
+    />
+
+    <p
+      v-if="!applicationsInitialized"
+      class="is-muted is-loading"
+      v-text="t('applications.loading_applications')"
+    ></p>
     <hex-mesh
       v-if="applicationsInitialized"
       :class-for-item="classForApplication"
@@ -51,21 +61,20 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
+
 import { HealthStatus } from '@/HealthStatus';
 import { useApplicationStore } from '@/composables/useApplicationStore';
 import hexMesh from '@/views/wallboard/hex-mesh';
 
 export default {
   components: { hexMesh },
-  props: {
-    error: {
-      type: Error,
-      default: null,
-    },
-  },
   setup() {
-    const { applications, applicationsInitialized } = useApplicationStore();
-    return { applications, applicationsInitialized };
+    const { t } = useI18n();
+
+    const { applications, applicationsInitialized, error } =
+      useApplicationStore();
+    return { applications, applicationsInitialized, error, t };
   },
   methods: {
     classForApplication(application) {

spring-boot-admin-server-ui/src/main/frontend/views/wallboard/wallboard.spec.js

@@ -0,0 +1,61 @@
+import { screen, waitFor } from '@testing-library/vue';
+import { ref } from 'vue';
+
+import { useApplicationStore } from '@/composables/useApplicationStore';
+import Application from '@/services/application';
+import Instance from '@/services/instance';
+import { render } from '@/test-utils';
+import Wallboard from '@/views/wallboard/index.vue';
+
+jest.mock('@/composables/useApplicationStore', () => ({
+  useApplicationStore: jest.fn(),
+}));
+
+describe('Wallboard', () => {
+  let applicationsInitialized;
+  let applications;
+  let error;
+
+  beforeEach(async () => {
+    applicationsInitialized = ref(false);
+    applications = ref([]);
+    error = ref(null);
+
+    useApplicationStore.mockReturnValue({
+      applicationsInitialized,
+      applications,
+      error,
+    });
+
+    await render(Wallboard);
+  });
+
+  it('shows message when applications list is loaded', async () => {
+    screen.findByText('applications.loading_applications');
+  });
+
+  it('shows application', async () => {
+    applicationsInitialized.value = true;
+    applications.value = [
+      new Application({
+        name: 'Test Application',
+        statusTimestamp: Date.now(),
+        instances: [new Instance({ id: '4711' })],
+      }),
+    ];
+    await waitFor(() => {
+      expect(screen.getByText('Test Application')).toBeVisible();
+    });
+  });
+
+  it('shows error, when connection is lost', async () => {
+    applicationsInitialized.value = true;
+    applications.value = [];
+    error.value = new Error('Connection lost');
+    await waitFor(() => {
+      expect(
+        screen.getByText('applications.server_connection_failed')
+      ).toBeVisible();
+    });
+  });
+});