Enable resource cards on workload detail pages#17737
Conversation
| * @param {string} opt.namespaced - Namespace to scope the query to | ||
| * @returns {{ count: number, summary: Array<{ property: string, counts: Record<string, number> }> }} | ||
| */ | ||
| async fetchSummary({ getters, dispatch }, { type, opt = {} }) { |
There was a problem hiding this comment.
we should sync with @marcelofukumoto and make sure we're not duplicating methods of calling the summary endpoint.
think we should also make use of the typing PaginationParamFilter and to construct the url steve-pagination-utils.ts createParamsForPagination (convertPaginationParams)
this would also only work if the vai feature is enabled. in theory this will always be on from 2.16 so can choose to omit check?
There was a problem hiding this comment.
Yeah, all fair points.
@marcelofukumoto it does look like you're fetching the summaries on the specific page .
By any chance is there any changes I could make to this action to make it useful for the workload pages? If you already have something more generic in the works I'd be happy to use that as well.
There was a problem hiding this comment.
That is great. I think we can just use your function! Mine is just on the composable of my page.
Not sure who will merge first, but as soon as you get yours merged I will update to use your function.
905b0be to
d575548
Compare
| @@ -221,6 +223,23 @@ export default { | |||
| } | |||
| }, | |||
|
|
|||
| async fetchSummary({ getters, dispatch, rootGetters }, { type, opt = {} }) { | |||
There was a problem hiding this comment.
I am debating whether or not to have this fetch locally as a fallback.
If we want to have a non-performant fallback I think it's better to have it here so that when we're in a vai always on world we won't have to update all of the call sites.
However, at least in the scenario I'm using it in it would be perfectly acceptable to just not show the cards if vai isn't on.
7b5b4d0 to
0afe672
Compare
Use the Steve summary API (?summary=metadata.state.name) to fetch per-state counts for pods, services, and ingresses without loading full resource collections. Relationship rows (Referred to by / Refers to) read state directly from metadata.relationships. Fixes rancher#16375
…omposable Add a reactive composable that watches store generation for a resource type and refetches summary data on changes. Cleans up automatically via onScopeDispose when the component unmounts.
Cover initial fetch, undefined handling, reactive updates on generation change, and automatic cleanup on scope disposal.
| * | ||
| * Must be called during component setup. | ||
| */ | ||
| export function useResourceSummary(type: string, opt: ResourceSummaryOpt) { |
There was a problem hiding this comment.
This is primarily here to facilitate live updates. It appears that the summary api doesn't work with the existing watching mechanism and this allows us to fairly performantly watch the summary counts.
- Fix broken reactivity in useDefaultResources (toValue inside computed) - Fix division by zero in StatusCard percent function - Fix race condition in useResourceSummary with fetchId staleness guard - Fix inconsistent color assignment in StatusCard rowAccumulator - Fix inconsistent sort comparator in useResourceCardRowFromRelationships - Add color fallback for missing stateSimpleColor in StatusCard - Add error handling for fire-and-forget async in useResourceSummary - Parallelize service/ingress summary fetches with Promise.all - Rename opt.namespaced to opt.namespace for clarity - Replace hardcoded 'Resources' with i18n key - Extract duplicated 'metadata.state.name' to constant - Use nullish coalescing for res.count - Fix JSDoc example to include required summaryField
- Use ?? instead of || for count/length in StatusCard computed - Add .filter((c) => c) to workload cards getter for null safety - Initialize summaries.pods = null explicitly when no pod selector - Use normalizedType in useResourceSummary dispatch for consistency
- Gate Services/Ingresses rows to only Deployments, DaemonSets, and StatefulSets (not Jobs or CronJobs which lack those tabs) - Remove namespace-wide summary fallback that showed incorrect counts - Filter relationship rows to require specific resource IDs, preventing phantom "missing" entries from generic type references - Add Containers row and Insights card to Pod detail page - Extract simpleColorForState helper for consistent state color usage Fixes rancher#16375
Fixes TS2554 build error where callers passed only the state argument. Fixes rancher#16375
Summary
Fixes #16375
Occurred changes and/or fixed issues
Workload detail pages now show resource cards (Pods, Services, Ingresses, relationships) without fetching full resource collections. State breakdowns come from the Steve summary API (
?summary=metadata.state.name), and relationship rows read state directly frommetadata.relationships.Each workload type's Resources card only shows rows that correspond to its actual tabs:
Pod detail pages now show a Containers row with state colors and an Insights card.
Technical notes summary
fetchResourceSummary- VAI-only store action. Returnsundefinedwith a warning when VAI is disabled so callers degrade gracefully.useResourceSummary- Reactive wrapper that refetches ongeneration(type)changes and cleans up viaonScopeDispose, so consumers stay current without manual teardown.useResourceCardRowFromSummary/FromRelationships- Reuse the samecolorForState/stateDisplaymapping as resource models so summary-driven rows look identical to locally-computed ones.StatusCardgains asummaryDataprop; when present it takes precedence overresources._resourcesCardRows/resourcesCardon the base Resource class so all resource types get relationship cards for free.matchingIngressesmoved from the detail page component to the workload model so it is reactive and testable.simpleColorForStateextracted as a helper inresource-class.jsfor consistent state color handling without thetext-prefix._resourcesCardRows) now requirefromId/toId, filtering out generic type-only references that produced phantom "missing" entries.Areas or cases that should be tested
Areas which could experience regressions
resourcesCardRowsScreenshot/Video
Demo (live update of resource counts)
demo.webm
Deployment
DaemonSet (with Services and Ingresses)
StatefulSet
CronJob (with Jobs)
Job
Pod
Checklist