Skip to content

feat(#5316): add collapsible health details with localStorage persistence #5364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SteKoe wants to merge 7 commits into
base: master
Choose a base branch
from
Open

feat(#5316): add collapsible health details with localStorage persistence #5364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
80c7542
feat(health-details): add collapsible health details with localStorag…
SteKoe May 15, 2026
7c68f41
feat(health-details): enhance accessibility and improve localStorage …
SteKoe May 16, 2026
9884601
fix(health-details): harden robustness and accessibility
SteKoe May 17, 2026
7550b67
fix(health-details): fix detail key collision, ?? for source selectio…
SteKoe May 17, 2026
54d7859
fix(details-health): pass explicit index to health-details for correc…
SteKoe May 17, 2026
0516088
fix(health-details): separate depth (recursion guard) from index (row…
SteKoe May 17, 2026
7e880bd
feat(health-details): improve layout and accessibility of health details
SteKoe May 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions spring-boot-admin-server-ui/src/main/frontend/components/sba-icon-button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,13 @@
</sba-button>
</template>

<script>
<script lang="ts">
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { PropType, defineComponent } from 'vue';

import SbaButton from '@/components/sba-button';

export default {
export default defineComponent({
components: { SbaButton },
props: {
title: {
Expand All @@ -38,7 +41,9 @@ export default {
default: null,
},
icon: {
type: [String, Array],
type: [Object, Array, String] as PropType<
Array<string> | string | IconDefinition
>,
required: true,
},
size: {
Expand All @@ -51,7 +56,7 @@ export default {
},
},
emits: ['click'],
};
});
</script>

<style></style>
3 changes: 2 additions & 1 deletion spring-boot-admin-server-ui/src/main/frontend/test-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ const modules: Record<string, any> = import.meta.glob('@/**/i18n.en.json', {
eager: true,
});
for (const modulesKey in modules) {
terms = { ...terms, ...modules[modulesKey] };
const moduleContent = modules[modulesKey].default || modules[modulesKey];
terms = { ...terms, ...moduleContent };
}
export let router;
createViewRegistry();
Expand Down
3 changes: 3 additions & 0 deletions ...er-ui/src/main/frontend/views/instances/details/__snapshots__/health-details.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@

exports[`HealthDetails > Health .details > should format object details correctly 1`] = `
<dd
aria-label="validChains"
aria-labelledby="health-detail-v-7__validChains"
class="col-span-4"
data-v-4727d85f=""
role="definition"
>
<pre
class="formatted overflow-auto whitespace-pre!"
Expand Down
28 changes: 22 additions & 6 deletions spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,14 @@
:title="$t('term.fetch_failed')"
/>
<div class="-mx-4 -my-3">
<health-details :health="health" name="Instance" />
<health-details
:instance="instance"
:health="health"
:index="0"
name="Instance"
/>

<template v-for="group in healthGroups" :key="group.name">
<template v-for="(group, groupIdx) in healthGroups" :key="group.name">
<div
class="px-4 py-2 border-t border-gray-200 sm:px-6"
:class="{ 'border-b': isHealthGroupOpen(group.name) }"
Expand All @@ -71,9 +76,15 @@
'rotate-90': isHealthGroupOpen(group.name),
}"
/>
<span v-text="$t('instances.details.health_group.title')"></span
>:&nbsp;
<span v-text="group.name"></span>
<span
v-text="$t('instances.details.health_group.title')"
/>:&nbsp; <span v-text="group.name"></span>
<sba-status-badge
v-if="group.data?.status"
class="ml-2 fade"
:status="group.data?.status"
/>

<font-awesome-icon
v-if="healthGroupLoadingMap[group.name]"
icon="sync-alt"
Expand All @@ -84,7 +95,12 @@
</h4>
</div>
<div v-if="isHealthGroupOpen(group.name) && group.data">
<health-details :health="group.data" :name="group.name" />
<health-details
:instance="instance"
:health="group.data"
:name="group.name"
:index="groupIdx + 1"
/>
</div>
</template>
</div>
Expand Down
Loading