OCPNETUI-58: Add Health and Backend health columns to Services and Routes list pages - #457
OCPNETUI-58: Add Health and Backend health columns to Services and Routes list pages#457sjd78 wants to merge 1 commit into
Conversation
|
Pipeline controller notification For optional jobs, comment This repository is configured in: LGTM mode |
|
@sjd78: This pull request references OCPNETUI-58 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "5.0.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
openshift-ci-robot
added
the
jira/valid-reference
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: sjd78 The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
openshift-ci
Bot
added
the
approved
|
Warning Review limit reached
Next review available in: 41 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository: openshift/coderabbit/.coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (22)
WalkthroughEndpointSlice readiness is aggregated per service and joined into route and service list data. New health columns render status, readiness counts, tooltips, sorting, and localized messages for Healthy, Degraded, Down, Unknown, and ExternalName states. ChangesEndpoint health UI
Estimated code review effort: 4 (Complex) | ~45 minutes Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant EndpointSliceAPI
participant useEndpointHealth
participant useRouteListViewData
participant useServiceListViewData
participant RoutesList
participant ServiceList
EndpointSliceAPI->>useEndpointHealth: EndpointSliceKind[] readiness data
useEndpointHealth-->>useRouteListViewData: healthMap
useEndpointHealth-->>useServiceListViewData: healthMap
useRouteListViewData-->>RoutesList: RouteWithHealth[]
useServiceListViewData-->>ServiceList: ServiceWithHealth[]
RoutesList-->>RoutesList: Render backend health column
ServiceList-->>ServiceList: Render health column
🚥 Pre-merge checks | ✅ 15✅ Passed checks (15 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@locales/es/plugin__networking-console-plugin.json`:
- Line 70: Translate the new endpoint-health labels and tooltips from English
into appropriate Spanish, French, and Japanese values. Update all listed entries
in locales/es/plugin__networking-console-plugin.json at lines 70, 123, 138,
174-175, and 423-425; locales/fr/plugin__networking-console-plugin.json at lines
70, 123, 138, 174-175, and 423-425; and
locales/ja/plugin__networking-console-plugin.json at lines 68, 121, 136,
172-173, and 421-423. Preserve the {{ready}} and {{total}} interpolation
placeholders exactly.
In `@locales/ko/plugin__networking-console-plugin.json`:
- Line 68: Translate every newly added health label and status in both locale
files: locales/ko/plugin__networking-console-plugin.json at lines 68, 121, 136,
172-173, and 421-423, and locales/zh/plugin__networking-console-plugin.json at
the same ranges. Replace English values with the appropriate Korean or Chinese
translations while preserving the {{ready}} and {{total}} placeholders exactly.
In `@src/utils/components/Icons/UnknownStatusIcon.tsx`:
- Around line 7-9: Replace the inline style in UnknownStatusIcon with a
stylesheet-backed class containing the existing gray color. Also update
RouteBackendHealthCell at
src/views/routes/list/components/RouteBackendHealthCell.tsx:87 to move its flex
layout declarations into a stylesheet-backed class, preserving the current
layout behavior and CSP compliance.
In `@src/utils/hooks/useEndpointHealth.ts`:
- Around line 31-35: Update the endpoint readiness check in useEndpointHealth so
an omitted endpoint.conditions.ready is treated as true, while explicitly false
remains not-ready. Preserve the existing total and ready counter updates for
each endpoint.
In `@src/views/routes/list/hooks/useRouteColumns.ts`:
- Around line 37-41: Update the backend-health column definition in
useRouteColumns to add a sortable transform that maps status values to the
required order: Healthy, Degraded, Down, then Unknown. Use the transformed
ranking for sorting instead of the raw _backendHealth.status string while
preserving the existing column metadata.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: f7e61a5e-0390-4b12-96af-70213127567d
📒 Files selected for processing (19)
locales/en/plugin__networking-console-plugin.jsonlocales/es/plugin__networking-console-plugin.jsonlocales/fr/plugin__networking-console-plugin.jsonlocales/ja/plugin__networking-console-plugin.jsonlocales/ko/plugin__networking-console-plugin.jsonlocales/zh/plugin__networking-console-plugin.jsonsrc/utils/components/Icons/UnknownStatusIcon.tsxsrc/utils/hooks/useEndpointHealth.tssrc/utils/types.tssrc/views/routes/list/RoutesList.tsxsrc/views/routes/list/components/RouteBackendHealthCell.tsxsrc/views/routes/list/components/RouteRow.tsxsrc/views/routes/list/hooks/useRouteColumns.tssrc/views/routes/list/hooks/useRouteListViewData.tssrc/views/services/list/ServiceList.tsxsrc/views/services/list/components/ServiceHealthCell.tsxsrc/views/services/list/components/ServiceRow.tsxsrc/views/services/list/hooks/useServiceColumn.tsxsrc/views/services/list/hooks/useServiceListViewData.ts
77adc0a to
541ee10
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@locales/fr/plugin__networking-console-plugin.json`:
- Line 70: Translate the newly added networking health-related values in the
French locale, including “Backend health” and the entries at the referenced
locations for the health column, tooltips, and accessible labels. Replace
English duplicates with accurate French translations while preserving the
existing JSON keys and structure.
In `@src/views/routes/list/hooks/useRouteListViewData.ts`:
- Around line 41-42: Update the returned state in useRouteListViewData so
healthError does not populate error; only routesError should block the Routes
list. Preserve health loading/unknown handling through the existing health data
and loaded state without treating endpoint-health watch failures as route-list
failures.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: a7163d5c-a262-4936-b428-5e1ef76ae41b
📒 Files selected for processing (18)
locales/en/plugin__networking-console-plugin.jsonlocales/es/plugin__networking-console-plugin.jsonlocales/fr/plugin__networking-console-plugin.jsonlocales/ja/plugin__networking-console-plugin.jsonlocales/ko/plugin__networking-console-plugin.jsonlocales/zh/plugin__networking-console-plugin.jsonsrc/utils/hooks/useEndpointHealth.tssrc/utils/types.tssrc/views/routes/list/RoutesList.tsxsrc/views/routes/list/components/RouteBackendHealthCell.tsxsrc/views/routes/list/components/RouteRow.tsxsrc/views/routes/list/hooks/useRouteColumns.tssrc/views/routes/list/hooks/useRouteListViewData.tssrc/views/services/list/ServiceList.tsxsrc/views/services/list/components/ServiceHealthCell.tsxsrc/views/services/list/components/ServiceRow.tsxsrc/views/services/list/hooks/useServiceColumn.tsxsrc/views/services/list/hooks/useServiceListViewData.ts
🚧 Files skipped from review as they are similar to previous changes (5)
- locales/ja/plugin__networking-console-plugin.json
- locales/zh/plugin__networking-console-plugin.json
- locales/ko/plugin__networking-console-plugin.json
- locales/en/plugin__networking-console-plugin.json
- locales/es/plugin__networking-console-plugin.json
541ee10 to
0e7f447
Compare
pcbailey
left a comment
pcbailey
left a comment
There was a problem hiding this comment.
Thank you for your help!
| * -> endpoints[].conditions.ready | ||
| * -> aggregate ready/total per service name | ||
| */ | ||
| const aggregateEndpointHealth = ( |
There was a problem hiding this comment.
Utility functions should go in a utils file.
| * -> endpoints[].conditions.ready -> aggregate ready/total | ||
| */ | ||
|
|
||
| type HealthIconConfig = { |
There was a problem hiding this comment.
Types other than the props type for a component should go in a types file and utility functions should go in a utils file. Those files should be inside a utils directory in the component directory.
There was a problem hiding this comment.
I'm refactoring the Cells to use a new "ServiceEndpointStatusIcon". Should look better.
|
|
||
| type HealthIconConfig = { | ||
| ariaLabel: string; | ||
| icon: React.ReactElement; |
There was a problem hiding this comment.
Please import ReactElement directly.
|
|
||
| const getHealthIconConfig = ( | ||
| health: ServiceEndpointHealth | undefined, | ||
| t: ReturnType<typeof useNetworkingTranslation>['t'], |
There was a problem hiding this comment.
Is there a benefit to using this return type instead of TFunction?
There was a problem hiding this comment.
Not really. It ends up being the same type anyway.
| import { useEndpointHealth } from '@utils/hooks/useEndpointHealth'; | ||
| import { RouteKind, ServiceEndpointHealth } from '@utils/types'; | ||
|
|
||
| export type RouteWithHealth = { |
There was a problem hiding this comment.
Please move to a types file.
| * -> endpoints[].conditions.ready -> aggregate ready/total | ||
| */ | ||
|
|
||
| type HealthIconConfig = { |
There was a problem hiding this comment.
If these are the same as the type and function in RouteBackendHealthCell please move them to centralized types and utils files. If not, move them to types and utils files for this component.
| const ServiceHealthCell: FC<ServiceHealthCellProps> = ({ obj }) => { | ||
| const { t } = useNetworkingTranslation(); | ||
|
|
||
| const health = obj.spec?.type === 'ExternalName' ? 'ExternalName' : obj._health; |
There was a problem hiding this comment.
Please extract 'ExternalName' to a constant. I would create a services.ts file under src/utils/constants.
There was a problem hiding this comment.
Sorting doesn't need to know about ExternalName
The Cell is supposed to display an 'ExternalName' type service as "Unknown".
Updated to handle both.
|
|
||
| import { ServiceWithHealth } from './useServiceListViewData'; | ||
|
|
||
| const HEALTH_SORT_ORDER: Record<EndpointHealthStatus, number> = { |
There was a problem hiding this comment.
This should go in a constants file for this hook.
There was a problem hiding this comment.
Moved to src/utils/utils/sorting.ts
| [EndpointHealthStatus.Unknown]: 3, | ||
| }; | ||
|
|
||
| const getHealthSortValue = (svc: ServiceWithHealth): number => |
There was a problem hiding this comment.
These should go in a utils file for this hook.
There was a problem hiding this comment.
Moved to src/utils/utils/sorting.ts and am now sharing the status sort function between the service and route columns
| import { getName } from '@utils/resources/shared'; | ||
| import { ServiceEndpointHealth } from '@utils/types'; | ||
|
|
||
| export type ServiceWithHealth = { |
There was a problem hiding this comment.
This should go in a types file.
0e7f447 to
a62f879
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/utils/utils/serviceEndpointStatus.tsx`:
- Line 20: Export the getHealthIconConfig helper so ServiceEndpointStatusIcon
can import and use it, resolving the module-private and unused-helper issue
without changing its existing behavior.
In `@src/views/routes/list/components/RouteRow.tsx`:
- Line 16: Import RouteWithHealth from `@utils/types` in RouteRow.tsx and
RoutesList.tsx instead of the hook module, and update useRouteListViewData.ts to
export only useRouteListViewData.
In `@src/views/services/list/hooks/useServiceListViewData.ts`:
- Around line 48-54: Update the returned loaded state in useServiceListViewData
so Services readiness depends only on servicesLoaded, not healthLoaded. Keep
healthError and healthLoaded available for display handling, while ensuring
EndpointSlice health failures cannot leave the Services list loading
indefinitely.
In `@src/views/services/list/ServiceList.tsx`:
- Line 36: Update the useServiceListViewData destructuring in ServiceList to
retain healthError, then combine it with loadError when passing the error prop
to ListEmptyState so either service-watch or EndpointSlice watch failures are
surfaced.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: c777bfd5-8271-4b1f-b426-7348f58292c2
📒 Files selected for processing (23)
locales/en/plugin__networking-console-plugin.jsonlocales/es/plugin__networking-console-plugin.jsonlocales/fr/plugin__networking-console-plugin.jsonlocales/ja/plugin__networking-console-plugin.jsonlocales/ko/plugin__networking-console-plugin.jsonlocales/zh/plugin__networking-console-plugin.jsonsrc/utils/components/Icons/ServiceEndpointStatusIcon.tsxsrc/utils/constants/services.tssrc/utils/hooks/useEndpointHealth.tssrc/utils/types.tssrc/utils/utils/endpointSlices.tssrc/utils/utils/serviceEndpointStatus.tsxsrc/utils/utils/sorting.tssrc/views/routes/list/RoutesList.tsxsrc/views/routes/list/components/RouteBackendHealthCell.tsxsrc/views/routes/list/components/RouteRow.tsxsrc/views/routes/list/hooks/useRouteColumns.tssrc/views/routes/list/hooks/useRouteListViewData.tssrc/views/services/list/ServiceList.tsxsrc/views/services/list/components/ServiceHealthCell.tsxsrc/views/services/list/components/ServiceRow.tsxsrc/views/services/list/hooks/useServiceColumn.tsxsrc/views/services/list/hooks/useServiceListViewData.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- locales/en/plugin__networking-console-plugin.json
- src/utils/types.ts
- locales/zh/plugin__networking-console-plugin.json
- locales/fr/plugin__networking-console-plugin.json
- locales/es/plugin__networking-console-plugin.json
- locales/ja/plugin__networking-console-plugin.json
a62f879 to
9943ce3
Compare
…utes list pages Summary of changes: - Update the `Service` list page to show the health of the service endpoints based on `EndpointSlices` (discovery.k8s.io/v1). - Update the `Route` list page to show the health of the backend service endpoints based on the `EndpointSlices` (discovery.k8s.io/v1) of the `Service` the `Route` is targeting. - The `useEndpointHealth` hook watches `EndpointSlices` (discovery.k8s.io/v1) and aggregates endpoint readiness into a per-service health map. - Watch hooks that create an aggregated view object to include health status along with the base entity data are used to simplify the component code. - Specialized row cell components are used to display the health status in the list pages based on the aggregated view object. - Sorting on the health columns ascending is Healthy -> Degraded -> Down -> Unknown. Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
9943ce3 to
aac371a
Compare
|
/lgtm |
|
Scheduling required tests: |
|
@sjd78: all tests passed! Full PR test history. Your PR dashboard. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
openshift-ci
Bot
added
the
needs-rebase
|
PR needs rebase. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
3 participants
Summary of changes
Update the
Servicelist page to show the health of the service endpoints based onEndpointSlices(discovery.k8s.io/v1).Update the
Routelist page to show the health of the backend service endpoints based on theEndpointSlices(discovery.k8s.io/v1) of theServicetheRouteis targeting.The
useEndpointHealthhook watchesEndpointSlices(discovery.k8s.io/v1) and aggregates endpoint readiness into a per-service health map.Watch hooks that create an aggregated view object to include health status along with the base entity data are used to simplify the component code.
Specialized row cell components are used to display the health status in the list pages based on the aggregated view object.
Sorting on the health columns ascending is Healthy -> Degraded -> Down -> Unknown.
Demo Video
Screencast.From.2026-07-30.17-37-16.mp4
Screenshots
Service list with health:
Routes list with health:
Summary by CodeRabbit