Skip to content

Commit

Permalink
chore: enhance ApplicationStatusHero (#3000)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
3 people authored Jan 5, 2024
1 parent 200f3eb commit 77df9d8
Show file tree
Hide file tree
Showing 14 changed files with 178 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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[];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Original file line number Diff line number Diff line change
@@ -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();
},
);
});
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -37,7 +74,10 @@
</template>

<script>
import { computed } from 'vue';
import { useApplicationStore } from '@/composables/useApplicationStore';
import { getStatusInfo } from '@/services/application';
const options = {
year: 'numeric',
Expand All @@ -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 {
Expand All @@ -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 +
Expand All @@ -80,11 +129,6 @@ export default {
);
},
},
watch: {
downCount() {
this.updateLastUpdateTime();
},
},
beforeMount() {
this.updateLastUpdateTime();
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"all_up": "전체 정상",
"applications": "애플리케이션",
"instances": "인스턴스",
"instances_down": "인스턴스 종료",
"some_down": "인스턴스 종료",
"loading_applications": "애플리케이션 로딩..",
"no_applications_registered": "등록된 애플리케이션이 없습니다.",
"notifications_suppressed_for": "<code>{name}</code>에 대한 알림이 억제됩니다.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"all_up": "Todas up",
"applications": "Aplicações",
"instances": "Instâncias",
"instances_down": "Instâncias down",
"some_down": "Instâncias down",
"loading_applications": "Carregando aplicações...",
"no_applications_registered": "Nenhuma aplicação registrada.",
"notifications_suppressed_for": "As notificações de <code>{name}</code> estão suspensas por",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"all_up": "все доступны",
"applications": "Приложения",
"instances": "Экземпляры",
"instances_down": "экземпляры недоступны",
"some_down": "экземпляры недоступны",
"loading_applications": "Загрузка приложений...",
"no_applications_registered": "Нет зарегистрированных приложений.",
"notifications_suppressed_for": "Уведомления для <code>{name}</code> отключены на",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"all_up": "全部在线",
"applications": "应用数",
"instances": "实例数",
"instances_down": "离线实例",
"some_down": "离线实例",
"loading_applications": "应用加载中...",
"no_applications_registered": "暂无应用注册。",
"notifications_suppressed_for": "Notifications on <code>{name}</code> are suppressed for",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"all_up": "全部正常",
"applications": "應用數",
"instances": "實例數",
"instances_down": "離線實例",
"some_down": "離線實例",
"loading_applications": "應用下載中...",
"no_applications_registered": "暫無應用註冊。",
"notifications_suppressed_for": "Notifications on <code>{name}</code> are suppressed for",
Expand Down

0 comments on commit 77df9d8

Please sign in to comment.