fix(#5156): details page information fetching#5159
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Spring Boot Admin UI instance details views to better react to SSE-driven instance updates by refetching/reinitializing metric-based panels and guarding against stale async responses.
Changes:
- Add “update-key” based refresh triggers (using
instance.version/statusTimestamp) across multiple instance detail panels. - Add stale-response protection for fetches (token/generation patterns) and restart polling subscriptions on instance updates.
- Extend the UI
Instancemodel with an optionalversionfield and add tests for the new behaviors.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue | Refetch metric index on instance update-key changes; add stale-response guarding. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.spec.ts | Adds SSE update + stale-response tests for metric index fetching. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.vue | Reinitialize thread metrics/polling when instance update-key changes; adds takeUntil. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.spec.ts | Adds SSE update test for threads view. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue | Fixes <script setup> props usage by avoiding non-reactive destructuring. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.vue | Reinitialize memory metrics/polling when instance update-key changes; adds takeUntil. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.spec.ts | Adds SSE update + stale poll-result tests for memory view. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue | Refetch info on instance id/version changes; adds stale-response guarding. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts | Adds SSE update + stale-response tests for info view. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue | Adds token-based stale-response guarding and update-key tracking for health fetching. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.spec.ts | Adds SSE update + stale-response tests for health view. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue | Reinitialize datasource metrics/polling when instance update-key changes; adds takeUntil. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.spec.ts | Adds SSE update test for datasource view. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue | Reinitialize cache metrics/polling when instance update-key changes; adds takeUntil. |
| spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.spec.ts | Adds SSE update test for cache view. |
| spring-boot-admin-server-ui/src/main/frontend/services/instance.ts | Adds optional version field to the UI Instance type. |
| spring-boot-admin-server-ui/src/main/frontend/mixins/subscribing.ts | Introduces destroy$ subject and emits/completes it on unmount to help terminate streams. |
You can also share your feedback on Copilot code review. Take the survey.
| this.metrics = []; | ||
| this.error = null; | ||
|
|
||
| if (!this.instance.hasEndpoint('metrics')) { |
Comment on lines
68
to
+70
| const currentInstanceId = ref(null); | ||
| const currentInstanceUpdateKey = ref(null); | ||
| const requestGen = ref(0); |
| watch: { | ||
| instance: { | ||
| handler: 'reloadHealth', | ||
| handler: 'fetchHealth', |
Comment on lines
10
to
+21
| import { render } from '@/test-utils'; | ||
|
|
||
| function deferred<T>() { | ||
| let resolve!: (value: T) => void; | ||
| let reject!: (reason?: any) => void; | ||
| const promise = new Promise<T>((res, rej) => { | ||
| resolve = res; | ||
| reject = rej; | ||
| }); | ||
| return { promise, resolve, reject }; | ||
| } | ||
|
|
Comment on lines
11
to
+22
| import { render } from '@/test-utils'; | ||
|
|
||
| function deferred<T>() { | ||
| let resolve!: (value: T) => void; | ||
| let reject!: (reason?: any) => void; | ||
| const promise = new Promise<T>((res, rej) => { | ||
| resolve = res; | ||
| reject = rej; | ||
| }); | ||
| return { promise, resolve, reject }; | ||
| } | ||
|
|
Comment on lines
+9
to
+13
| function deferred<T>() { | ||
| let resolve!: (value: T) => void; | ||
| let reject!: (reason?: any) => void; | ||
| const promise = new Promise<T>((res, rej) => { | ||
| resolve = res; |
Comment on lines
+12
to
+21
| function deferred<T>() { | ||
| let resolve!: (value: T) => void; | ||
| let reject!: (reason?: any) => void; | ||
| const promise = new Promise<T>((res, rej) => { | ||
| resolve = res; | ||
| reject = rej; | ||
| }); | ||
| return { promise, resolve, reject }; | ||
| } | ||
|
|
Comment on lines
25
to
33
| created() { | ||
| this.subscribe(); | ||
| }, | ||
| beforeUnmount() { | ||
| // Emit to signal all subscriptions to complete | ||
| this.destroy$.next(); | ||
| this.destroy$.complete(); | ||
| this.unsubscribe(); | ||
| }, |
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
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 how the UI components for instance details (health, cache, and datasource) handle updates when an instance's version changes, especially in response to server-sent events (SSE). The main goal is to ensure that metrics and health data are reliably refreshed when the instance changes, and that stale responses do not overwrite newer data. The changes also add comprehensive tests to verify this behavior.
Instance Update Handling and Data Refresh:
versionproperty is added to theInstancemodel and related types, enabling more precise detection of instance updates. [1] [2]details-cache.vue,details-datasource.vue,details-health.vue) now track anupdateKey(based onversion,statusTimestamp, orid) to determine when to reinitialize or refetch data if the instance changes. [1] [2] [3] [4] [5] [6]takeUntilis used to clean up polling subscriptions when components unmount or when the instance updates, preventing memory leaks and stale data. [1] [2] [3]Stale Response Protection:
details-health.vue) uses afetchTokento ignore stale responses from previous requests if the instance updates quickly, ensuring only the latest data is displayed. [1] [2]Testing Enhancements:
Supporting Refactors:
Applicationclass for consistency and to support the newversionproperty.These changes collectively make the UI more robust and responsive to backend instance updates, especially in dynamic environments with frequent instance changes.
References: