feat(#5316): add collapsible health details with localStorage persistence#5364
Open
SteKoe wants to merge 7 commits into
Open
feat(#5316): add collapsible health details with localStorage persistence#5364SteKoe wants to merge 7 commits into
SteKoe wants to merge 7 commits into
Conversation
SteKoe
force-pushed
the
feat/5316-allow-to-collapse-health-details
branch
3 times, most recently
from
736495f to
4d4f64a
Compare
…handling for health details
- Remove redundant onMounted (isCollapsed already initialised synchronously) - Guard toggleCollapsed: skip localStorage write when instance.id is absent - Introduce safeNameId for HTML id attributes and aria-controls (names with spaces/colons/slashes produced invalid ids) - Guard encodeURIComponent(name ?? '') against null/undefined name - Fix duplicate child :key to include loop index, preventing wrong instance reuse - Guard v-else-if object branch with !== null to handle null detail values - Fix sba-icon-button PropType to [Object, Array, String] so string icon names pass Vue runtime validation
…n, extract safeDetailId - details v-for :key now includes loop index to handle duplicate detail names - health.details || health.components replaced with ?? and validated as plain object, eliminating false fallthrough on falsy health.details values and both sources being shared via a single healthEntries computed - Inline detail.name.replace() repeated three times replaced with safeDetailId(name, idx) helper that also falls back to 'detail_N' when all characters are special
…t row alternation The Instance node always received index=0, and each health group node also defaulted to index=0, so all top-level rows rendered with the same bg-white background. Now the Instance node is explicitly :index="0" and each group node receives :index="groupIdx + 1", producing correct even/odd alternation across all sibling health-details rows.
… alternation) index + 1 was passed to all siblings, giving every child the same index and therefore the same background colour. Introduced a separate 'depth' prop for the recursion guard (depth < 10) and pass ':index="idx"' to children so each sibling gets its own position-based index, producing correct even/odd alternation at every level of the health component tree.
SteKoe
force-pushed
the
feat/5316-allow-to-collapse-health-details
branch
from
4d4f64a to
7e880bd
Compare
Contributor
|
Nice @SteKoe. Just one question: is there a reason why the icon is green when the details are expanded? Will its color reflect that status (even if, then, it's clearly visible it's not the same green) or what's the idea behind its coloring scheme? I find that green a bit confusing without additional context. |
cdprete
reviewed
May 18, 2026
| :name="child.name" | ||
| :health="child.value" | ||
| /> | ||
| <template v-if="depth < 10"> |
Contributor
There was a problem hiding this comment.
I wouldn't really do this as it may prevent consumers of SBA to have a look at the details completely, unless there is a way for the consumers to configure such a limit (i.e.: sort of a settings page).
cdprete
reviewed
May 18, 2026
|
|
||
| const COLLAPSED_KEY = computed( | ||
| () => | ||
| `de.codecentric.spring-boot-admin.health-details.${encodeURIComponent(name ?? '')}.${encodeURIComponent(instance?.id ?? '')}.collapsed`, |
Contributor
There was a problem hiding this comment.
The name property is not declared as optional, so is this '' default really necessary?
cdprete
reviewed
May 18, 2026
| `de.codecentric.spring-boot-admin.health-details.${encodeURIComponent(name ?? '')}.${encodeURIComponent(instance?.id ?? '')}.collapsed`, | ||
| ); | ||
|
|
||
| function readCollapsedFromStorage(): boolean { |
Contributor
There was a problem hiding this comment.
For backwards compatibility, the default value should be false here.
Otherwise, at least in terms of UX, you're introducing a breaking change here :)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request improves the
HealthDetailscomponent by adding a collapsible details section for health information, enhancing accessibility, and ensuring the collapsed state is persisted per instance. It also updates tests to cover the new behavior and adds internationalized strings for the toggle button in multiple languages.HealthDetails Component Enhancements:
localStorageper instance and health group. [1] [2]instanceprop to childhealth-detailscomponents. [1] [2] [3] [4]Testing Improvements:
localStorage, and correct handling of child health components. [1] [2] [3] [4]Internationalization:
toggle_detailsstring for the health details toggle button in all supported languages. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]Bildschirmaufnahme.2026-05-15.um.21.37.36.mov