ui: Improve label name and values UI#5989
Conversation
Introduces new user preferences for 'Color by' and 'Align function names' in the flamegraph visualization. Updates state management and toolbar components to support these preferences/
Introduces a refetch method to label value hooks and context, allowing manual refresh of label values. Reduces staleTime from 5 minutes to 30 seconds and enables keepPreviousData for smoother UI updates. Refactors ViewMatchers label value fetching for better performance and maintainability. Adds cacheTime option to useGrpcQuery for more flexible caching.
Introduces a 'Refresh results' button to manually refetch label values in both SuggestionsList and Select components, improving user experience when label values may be stale or missing. Reduces label names and values cache time to 2 minutes and ensures UI state resets appropriately after search. Also improves handling of label name/value options to ensure selected values are always visible, and disables 'Show more/less' while editing.
|
✅ Meticulous spotted visual differences in 69 of 551 screens tested, but all differences have already been approved: view differences detected. Meticulous evaluated ~4 hours of user flows against your PR. Last updated for commit 55dcede. This comment will update as new commits are pushed. |
| labelName !== undefined && | ||
| labelName !== '', | ||
| staleTime: 1000 * 60 * 5, // 5 minutes | ||
| staleTime: 1000 * 60 * 2, // 2 minutes |
There was a problem hiding this comment.
Why do we need staleness at all? Shouldn’t the timeframe and a success already be sufficient?
note the important thing is that we fetch label names and values based on the selected time (even before hitting search)
There was a problem hiding this comment.
note the important thing is that we fetch label names and values based on the selected time (even before hitting search)
Can confirm we do this already.
Agree about the staleness too. We just might not need it after all for these type of requests.
This PR contains improvements to how the
SimpleMatchersandMatchersInputcomponents work with label values. It also contains logic to persist the "Color by" and "Left/Right align function names" user preferences.For the
SimpleMatchersandMatchersInputcomponents:SimpleMatchercomponent. Now when editing the label rows and you're working with a lot, you see all the label rows without having to always click onShow more/Show lessall the time.