chore: enhance ApplicationStatusHero (#3000)

* chore: fix ApplicationStatusHero

* chore: add all up, all down and all unknown

* Removed unused imports

* fix tests for status check of 'some' instances

* WIP

* update icons and colors for unknown

* update texts

* update colors and remove old stuff

---------

Co-authored-by: ulrichschulte <[email protected]>
Co-authored-by: erik.petzold <[email protected]>

Author: 3 people

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

@@ -20,7 +20,7 @@ import { Observable, concat, from, ignoreElements } from 'rxjs';
 import axios, { redirectOn401 } from '../utils/axios';
 import waitForPolyfill from '../utils/eventsource-polyfill';
 import uri from '../utils/uri';
-import Instance from './instance';
+import Instance, { DOWN_STATES, UNKNOWN_STATES, UP_STATES } from './instance';
 
 const actuatorMimeTypes = [
   'application/vnd.spring-boot.actuator.v2+json',
@@ -46,6 +46,35 @@ export const convertBody = (responses) =>
     return res;
   });
 
+export const getStatusInfo = (applications: Application[]) => {
+  const instances = applications.flatMap(
+    (application) => application.instances,
+  );
+
+  const upCount = instances.filter((instance) =>
+    UP_STATES.includes(instance.statusInfo.status),
+  ).length;
+
+  const downCount = instances.filter((instance) =>
+    DOWN_STATES.includes(instance.statusInfo.status),
+  ).length;
+
+  const unknownCount = instances.filter((instance) =>
+    UNKNOWN_STATES.includes(instance.statusInfo.status),
+  ).length;
+
+  return {
+    upCount,
+    downCount,
+    unknownCount,
+    allUp: upCount === instances.length,
+    allDown: downCount === instances.length,
+    allUnknown: unknownCount === instances.length,
+    someUnknown: unknownCount > 0 && unknownCount < instances.length,
+    someDown: downCount > 0 && downCount < instances.length,
+  };
+};
+
 class Application {
   public readonly name: string;
   public readonly instances: Instance[];

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

@@ -438,6 +438,17 @@ export type Registration = {
 };
 
 type StatusInfo = {
-  status: string;
+  status:
+    | 'UNKNOWN'
+    | 'OUT_OF_SERVICE'
+    | 'UP'
+    | 'DOWN'
+    | 'OFFLINE'
+    | 'RESTRICTED'
+    | string;
   details: { [key: string]: string };
 };
+
+export const DOWN_STATES = ['OUT_OF_SERVICE', 'DOWN', 'OFFLINE', 'RESTRICTED'];
+export const UP_STATES = ['UP'];
+export const UNKNOWN_STATES = ['UNKNOWN'];

spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStatusHero.spec.ts

@@ -0,0 +1,66 @@
+import { screen } from '@testing-library/vue';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Ref, ref } from 'vue';
+
+import { useApplicationStore } from '@/composables/useApplicationStore';
+import Application from '@/services/application';
+import Instance from '@/services/instance';
+import { render } from '@/test-utils';
+import ApplicationStatusHero from '@/views/applications/ApplicationStatusHero.vue';
+
+vi.mock('@/composables/useApplicationStore', () => ({
+  useApplicationStore: vi.fn(),
+}));
+
+describe('ApplicationStatusHero', () => {
+  let applications: Ref<Application[]>;
+
+  beforeEach(async () => {
+    applications = ref([]);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    useApplicationStore.mockReturnValue({
+      applicationsInitialized: ref(true),
+      applications,
+      error: ref(null),
+    });
+  });
+
+  it.each`
+    instance1Status | instance2Status | expectedMessage
+    ${'UP'}         | ${'UP'}         | ${'all up'}
+    ${'OFFLINE'}    | ${'OFFLINE'}    | ${'all down'}
+    ${'UNKNOWN'}    | ${'UNKNOWN'}    | ${'all in unknown state'}
+    ${'UP'}         | ${'UNKNOWN'}    | ${'some instances are in unknown state'}
+    ${'UP'}         | ${'DOWN'}       | ${'some instances are down'}
+    ${'UP'}         | ${'OFFLINE'}    | ${'some instances are down'}
+    ${'DOWN'}       | ${'UNKNOWN'}    | ${'some instances are down'}
+    ${'DOWN'}       | ${'OFFLINE'}    | ${'all down'}
+    ${'OFFLINE'}    | ${'UP'}         | ${'some instances are down'}
+  `(
+    '`$expectedMessage` is shown when `$instance1Status` and `$instance2Status`',
+    ({ instance1Status, instance2Status, expectedMessage }) => {
+      applications.value = [
+        new Application({
+          name: 'Test Application',
+          statusTimestamp: Date.now(),
+          instances: [
+            new Instance({
+              id: '4711',
+              statusInfo: { status: instance1Status },
+            }),
+            new Instance({
+              id: '4712',
+              statusInfo: { status: instance2Status },
+            }),
+          ],
+        }),
+      ];
+
+      render(ApplicationStatusHero);
+
+      expect(screen.getByText(expectedMessage)).toBeVisible();
+    },
+  );
+});

spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStatusHero.vue

@@ -2,19 +2,56 @@
   <sba-panel>
     <template v-if="applicationsCount > 0">
       <div class="flex flex-row md:flex-col items-center justify-center">
-        <template v-if="downCount === 0">
+        <template v-if="statusInfo.allUp">
           <font-awesome-icon icon="check-circle" class="text-green-500 icon" />
           <div class="text-center">
             <h1 class="font-bold text-2xl" v-text="$t('applications.all_up')" />
             <p class="text-gray-400" v-text="lastUpdate" />
           </div>
         </template>
-        <template v-else>
+        <template v-else-if="statusInfo.allDown">
+          <font-awesome-icon icon="check-circle" class="text-green-500 icon" />
+          <div class="text-center">
+            <h1
+              class="font-bold text-2xl"
+              v-text="$t('applications.all_down')"
+            />
+            <p class="text-gray-400" v-text="lastUpdate" />
+          </div>
+        </template>
+        <template v-if="statusInfo.allUnknown">
+          <font-awesome-icon
+            icon="question-circle"
+            class="text-gray-300 icon"
+          />
+          <div class="text-center">
+            <h1
+              class="font-bold text-2xl"
+              v-text="$t('applications.all_unknown')"
+            />
+            <p class="text-gray-400" v-text="lastUpdate" />
+          </div>
+        </template>
+        <template v-else-if="someInstancesDown">
           <font-awesome-icon icon="minus-circle" class="text-red-500 icon" />
           <div class="text-center">
             <h1
               class="font-bold text-2xl"
-              v-text="$t('applications.instances_down')"
+              v-text="$t('applications.some_down')"
+            />
+            <p class="text-gray-400" v-text="lastUpdate" />
+          </div>
+        </template>
+
+        <template v-else-if="someInstancesUnknown">
+          <font-awesome-icon
+            icon="question-circle"
+            class="text-gray-300 icon"
+          />
+          <div class="text-center">
+            <h1
+              class="font-bold text-2xl"
+              v-text="$t('applications.some_unknown')"
             />
             <p class="text-gray-400" v-text="lastUpdate" />
           </div>
@@ -37,7 +74,10 @@
 </template>
 
 <script>
+import { computed } from 'vue';
+
 import { useApplicationStore } from '@/composables/useApplicationStore';
+import { getStatusInfo } from '@/services/application';
 
 const options = {
   year: 'numeric',
@@ -51,7 +91,10 @@ const options = {
 export default {
   setup() {
     const { applications } = useApplicationStore();
-    return { applications };
+
+    const statusInfo = computed(() => getStatusInfo(applications.value));
+
+    return { applications, statusInfo };
   },
   data() {
     return {
@@ -60,7 +103,13 @@ export default {
     };
   },
   computed: {
-    downCount() {
+    someInstancesDown() {
+      return this.statusInfo.someDown;
+    },
+    someInstancesUnknown() {
+      return this.statusInfo.someUnknown;
+    },
+    notUpCount() {
       return this.applications.reduce((current, next) => {
         return (
           current +
@@ -80,11 +129,6 @@ export default {
       );
     },
   },
-  watch: {
-    downCount() {
-      this.updateLastUpdateTime();
-    },
-  },
   beforeMount() {
     this.updateLastUpdateTime();
   },

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.de.json

@@ -8,14 +8,17 @@
       "restart": "Neu starten"
     },
     "all_up": "Alle verfügbar",
+    "all_down": "Alle Instanzen sind ausgefallen",
+    "all_unknown": "Alle Instanzen haben unbekannten Status",
+    "some_unknown": "Einige Instanzen haben unbekannten Status",
+    "some_down": "Einige Instanzen sind ausgefallen",
     "applications": "Anwendungen",
     "fetching_notification_filters_failed": "Der Abruf der Benachrichtigungseinstellungen ist fehlgeschlagen.",
     "notification_filter": {
       "none": "Keine Benachrichtigungseinstellungen gesetzt.",
       "removed": "Benachrichtigungseinstellungen wurden geändert."
     },
     "instances": "Instanzen",
-    "instances_down": "Einige Instanzen sind ausgefallen",
     "loading_applications": "Anwendungen werden geladen...",
     "no_applications_registered": "Keine Anwendungen registriert.",
     "notifications_suppressed_for": "Benachrichtigungen für <code>{name}</code> werden unterdrückt für",

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.en.json

@@ -8,14 +8,17 @@
       "restart": "Restart"
     },
     "all_up": "all up",
+    "all_down": "all down",
+    "all_unknown": "all in unknown state",
+    "some_unknown": "some instances are in unknown state",
+    "some_down": "some instances are down",
     "applications": "Applications",
     "fetching_notification_filters_failed": "Fetching notification filters failed.",
     "notification_filter": {
       "none": "No notification filters set.",
       "removed": "Notification filter removed."
     },
     "instances": "Instances",
-    "instances_down": "Some instances are down",
     "loading_applications": "Loading applications...",
     "no_applications_registered": "No applications registered.",
     "notifications_suppressed_for": "Notifications on <code>{name}</code> are suppressed for",

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.es.json

@@ -3,7 +3,7 @@
     "all_up": "Todo arriba",
     "applications": "Aplicaciones",
     "instances": "Instancias",
-    "instances_down": "instancias caídas",
+    "some_down": "instancias caídas",
     "loading_applications": "Cargando aplicaciones...",
     "no_applications_registered": "No hay aplicaciones registradas.",
     "notifications_suppressed_for": "Notificaciones para <code>{name}</code> estás suspendidas por",

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.fr.json

@@ -3,7 +3,7 @@
     "all_up": "tout est disponible",
     "applications": "Applications",
     "instances": "Instances",
-    "instances_down": "instances inaccessibles",
+    "some_down": "instances inaccessibles",
     "loading_applications": "Chargement des applications...",
     "no_applications_registered": "Aucune application enregistrée.",
     "notifications_suppressed_for": "Les notifications sur <code>{name}</code> sont supprimées",

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.is.json

@@ -3,7 +3,7 @@
     "all_up": "Öll fáanleg",
     "applications": "Forrit",
     "instances": "Eintök",
-    "instances_down": "Eintök ekki fáanleg",
+    "some_down": "Eintök ekki fáanleg",
     "loading_applications": "Forrit eru að ræsa…",
     "no_applications_registered": "Engin forrit skráð.",
     "notifications_suppressed_for": "Tilkynningar fyrir <code>{name}</code> eru hunsuð fyrir",

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.ko.json

@@ -3,7 +3,7 @@
     "all_up": "전체 정상",
     "applications": "애플리케이션",
     "instances": "인스턴스",
-    "instances_down": "인스턴스 종료",
+    "some_down": "인스턴스 종료",
     "loading_applications": "애플리케이션 로딩..",
     "no_applications_registered": "등록된 애플리케이션이 없습니다.",
     "notifications_suppressed_for": "<code>{name}</code>에 대한 알림이 억제됩니다.",