cluster-api: enhance UI and v1beta1/v1beta2 compatibility#563
Open
ChayanDass wants to merge 37 commits intoheadlamp-k8s:mainfrom
Open
cluster-api: enhance UI and v1beta1/v1beta2 compatibility#563ChayanDass wants to merge 37 commits intoheadlamp-k8s:mainfrom
ChayanDass wants to merge 37 commits intoheadlamp-k8s:mainfrom
Conversation
Contributor
Author
|
@illume , could you please review this , whenever get time |
Contributor
Author
|
Added a new section to the Machine details page (addresses and node info) and improved support for multi-version handling in the Machine resource. 
|
ChayanDass
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
This PR modernizes the Cluster API plugin’s UI (especially MachineSet/MachineDeployment/KCP/Cluster/ClusterClass pages) to align with the Machine UX pattern, while improving v1beta1/v1beta2 compatibility by detecting CRD versions and normalizing versioned spec/status fields.
Changes:
- Added CRD-based API version detection and used it to instantiate versioned resource classes at runtime.
- Refactored several CAPI resource models (Machine, MachineSet, MachineDeployment, Cluster, KubeadmControlPlane, ClusterClass) to normalize v1beta1/v1beta2 status/spec differences (conditions, failure, deletion strategy/timeouts, etc.).
- Updated list/detail pages to use consistent sections (owned machines, template display, richer status columns, and improved loading/error handling).
Reviewed changes
Copilot reviewed 26 out of 27 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| cluster-api/src/utils/capiVersion.tsx | Improves CRD version detection logic and simplifies the useCapiApiVersion hook behavior. |
| cluster-api/src/resources/machineset.ts | Introduces v1beta1/v1beta2-aware MachineSet typings, helpers (conditions/failure), and versioned class support. |
| cluster-api/src/resources/machinedeployment.ts | Adds multi-version typings/helpers and versioned class support for MachineDeployments. |
| cluster-api/src/resources/machine.ts | Adds multi-version condition/failure normalization plus additional typed status fields (addresses/nodeInfo). |
| cluster-api/src/resources/kubeadmcontrolplane.ts | Adds extensive v1beta1/v1beta2 normalization helpers, versioned class support, and deletion timeout extraction. |
| cluster-api/src/resources/kubeadmconfig.ts | Updates KubeadmConfig spec typing (mounts) for improved accuracy. |
| cluster-api/src/resources/common.ts | Adds explicit metav1/cluster.x-k8s.io condition typings plus reference utilities and a shared getCondition. |
| cluster-api/src/resources/clusterclass.ts | Refactors ClusterClass typings for v1beta1/v1beta2 differences and adds helpers to extract template references. |
| cluster-api/src/resources/cluster.ts | Normalizes v1beta1/v1beta2 status fields (conditions/failure/replicas/initialization) and adds versioned class support. |
| cluster-api/src/components/machinesets/List.tsx | Updates MachineSet list columns (ready/available/up-to-date/paused) and uses runtime versioning. |
| cluster-api/src/components/machinesets/Detail.tsx | Refactors MachineSet detail page to match the Machine detail pattern with template + owned machines + normalized conditions. |
| cluster-api/src/components/machines/List.tsx | Uses normalized machine.conditions for readiness and adds a Version column. |
| cluster-api/src/components/machines/Detail.tsx | Adds Addresses/Node Info sections and normalizes conditions rendering across versions. |
| cluster-api/src/components/machinedeployments/List.tsx | Updates MachineDeployment list columns (ready/available/up-to-date/paused/phase) and uses runtime versioning. |
| cluster-api/src/components/machinedeployments/Detail.tsx | Refactors MachineDeployment detail page to match the Machine detail pattern with template + owned machines + normalized conditions. |
| cluster-api/src/components/kubeadmcontrolplanes/List.tsx | Enhances KCP list columns (initialized/ready/available/up-to-date/failure) using normalized helpers. |
| cluster-api/src/components/kubeadmcontrolplanes/Detail.tsx | Refactors KCP detail page with new sections (machines/template/remediation/kubeadm config) and normalized conditions. |
| cluster-api/src/components/common/util.tsx | Adds shared UI utilities (phase status mapping, ref rendering, condition rendering, name/value conversions). |
| cluster-api/src/components/common/Resource.tsx | Enhances OwnedMachines resolution (incl. MachineDeployment → MachineSet → Machine) and adds Template/KubeadmConfig sections. |
| cluster-api/src/components/common/ReplicaHelpers.tsx | Improves replica/strategy rendering and adds support for v1beta2 rollout strategy detection. |
| cluster-api/src/components/common/index.tsx | Re-exports new helpers/sections to simplify imports. |
| cluster-api/src/components/clusters/List.tsx | Enhances Cluster list columns (phase status, classRef fallback) and uses runtime versioning. |
| cluster-api/src/components/clusters/Detail.tsx | Refactors Cluster detail page to show normalized status/spec details and adds owned machines + structured spec tables. |
| cluster-api/src/components/clusterclasses/List.tsx | Enhances ClusterClass list columns (workers/variables/patches/paused/variables ready) and uses runtime versioning. |
| cluster-api/src/components/clusterclasses/Detail.tsx | Refactors ClusterClass detail page with richer spec/status rendering and v1beta1/v1beta2 template-ref extraction. |
| cluster-api/package.json | Adds an i18n script and bumps @kinvolk/headlamp-plugin devDependency. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
….12.0 to ^0.13.1 Signed-off-by: Chayan Das <01chayandas@gmail.com>
…oved type handling and logic - Introduced new types for better type safety in ReplicaHelpers. - Enhanced the renderUpdateStrategy function to handle different update strategies more robustly. - Updated showReplicas and renderReplicas functions to support a wider range of input types. - Refactored OwnedMachinesSection to include MachineSet handling and improved error management. - Added utility functions for rendering references and conditions in util.tsx. - Improved getStoredVersionFromCrd function to handle CRD versioning more effectively. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…handling - Updated MachineSpec to include new deletion options for v1beta2. - Introduced new interfaces for MachineAddress, MachineNodeInfo, and MachineStatusCommon. - Refactored getMachineStatus and getMachineConditions functions for improved type handling. - Enhanced failure handling with getMachineFailure function to support both v1beta1 and v1beta2 statuses. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…tatus display and refactor logic - Refactored getMachineRole function for clarity and efficiency. - Updated MachineDetailContent to utilize new SimpleTable and SectionBox components for better presentation of machine addresses and node info. - Improved handling of optional namespace parameters using nullish coalescing. - Enhanced extraSections to dynamically render machine conditions and additional information based on machine status. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…omponent - Added support for rendering unknown condition statuses in the renderConditionStatus function. - Refactored MachineList to utilize the updated renderConditionStatus for better clarity and consistency in displaying machine readiness. - Removed redundant phase status logic and integrated condition checks for improved maintainability. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…tatus management - Introduced new interfaces for MachineSetSpec and MachineSetStatus to support v1beta1 and v1beta2 specifications. - Enhanced the MachineSet class with methods for retrieving status, conditions, and failure information. - Improved type handling for MachineSet status and conditions, ensuring compatibility with both API versions. - Refactored the spec and status getters for better clarity and maintainability. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…data handling and UI - Introduced a new MachineSetDetailContent component to separate data fetching logic from presentation. - Enhanced error handling and loading states for better user experience. - Improved type safety and clarity by utilizing TypeScript interfaces for props. - Added support for displaying additional MachineSet details, including failure reasons and observed generation. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…ctionality and clarity - Introduced a new MachineSetsListWithData component to separate data handling from presentation logic. - Improved rendering of cluster names, desired replicas, and readiness status with better fallback values. - Added support for displaying additional status information, including up-to-date and paused conditions. - Utilized TypeScript interfaces for improved type safety and maintainability. - Integrated a loading state while detecting the Cluster API version. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…s management - Introduced new interfaces for MachineDeploymentSpec, MachineDeploymentStatus, and their v1beta1 and v1beta2 variants to support improved type safety and clarity. - Enhanced the MachineDeployment class with methods for retrieving status, conditions, and failure information, ensuring compatibility with both API versions. - Refactored spec and status getters for better maintainability and clarity. - Added support for new rollout strategies and deletion policies in the MachineDeploymentSpec. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…ced functionality and clarity - Introduced a new MachineDeploymentsListWithData component to separate data handling from presentation logic. - Improved rendering of cluster names, readiness status, and phase with better fallback values and status labels. - Added support for displaying paused conditions and enhanced the handling of replicas and version information. - Utilized TypeScript interfaces for improved type safety and maintainability. - Integrated a loading state while detecting the Cluster API version. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…mproved data handling and UI - Introduced a new MachineDeploymentDetailContent component to separate data fetching logic from presentation. - Enhanced error handling and loading states for better user experience. - Improved type safety and clarity by utilizing TypeScript interfaces for props. - Added support for displaying additional MachineDeployment details, including failure reasons, observed generation, and enhanced status management. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…e status management - Added KCPSpec and KCPStatus interfaces to improve type safety and clarity for KubeadmControlPlane specifications and statuses. - Implemented normalization functions for KCP status to streamline data handling and retrieval. - Enhanced the KubeadmControlPlane class with static methods for accessing various KCP attributes, including conditions, failure states, and remediation details. - Updated API versioning and CRD name constants for better maintainability. Signed-off-by: Chayan Das <01chayandas@gmail.com>
… for enhanced functionality - Introduced KubeadmControlPlaneDetailContent and KubeadmControlPlanesListWithData components to separate data fetching from presentation logic. - Improved error handling and loading states for better user experience. - Enhanced rendering of KubeadmControlPlane details, including initialization status, available replicas, and failure reasons. - Utilized TypeScript interfaces for improved type safety and maintainability. - Integrated loading state while detecting the Cluster API version. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…nagement - Updated KubeadmConfig and related interfaces to improve type safety and clarity, introducing new status management structures for v1beta1 and v1beta2. - Implemented normalization functions for KubeadmConfig status to streamline data handling and retrieval. - Enhanced the KubeadmConfig class with methods for accessing conditions and failure states, ensuring compatibility with both API versions. - Refactored spec and status getters for better maintainability and clarity. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…mproved functionality - Enhanced KubeadmConfigDetail and KubeadmConfigsList components to separate data fetching from presentation logic. - Introduced loading states and error handling for better user experience while fetching KubeadmConfig details. - Improved type safety and clarity by utilizing TypeScript interfaces for props and state management. - Updated rendering of KubeadmConfig details, including additional information such as cluster and machine names, readiness status, and NTP configuration. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…management - Introduced constants for API group and CRD name to improve maintainability. - Refactored the Cluster class to support dynamic API versioning through a static method. - Enhanced status management by implementing new getters for conditions, failure states, and initialization status. - Updated interfaces for ClusterSpec and ClusterStatus to improve type safety and clarity, accommodating both v1beta1 and v1beta2 specifications. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…d functionality and API versioning - Refactored ClusterDetail and ClustersList components to improve data handling and presentation logic. - Introduced loading states and error handling for better user experience while fetching cluster details. - Enhanced type safety by utilizing TypeScript interfaces and improved clarity in rendering cluster information. - Implemented dynamic API versioning support for Cluster resources, ensuring compatibility with both v1beta1 and v1beta2 specifications. Signed-off-by: Chayan Das <01chayandas@gmail.com>
… accessibility - Added `showUpdateStrategy` to the exports from `ReplicaHelpers` for improved functionality. - Included `TemplateSection` and `KubeadmConfigSection` in the exports from `Resource` to enhance component accessibility. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…rsioning - Updated ClusterClass and related interfaces to support both v1beta1 and v1beta2 specifications, improving type safety and clarity. - Introduced new types and functions for handling template references and unhealthy conditions, enhancing the overall structure and maintainability. - Refactored existing interfaces to accommodate changes in API design, including the introduction of new properties and the deprecation of outdated ones. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…led health checks and improved list rendering - Refactored ClusterClassDetail to include comprehensive health check displays, enhancing visibility into node and machine conditions. - Introduced a new ClusterClassesListWithData component to dynamically handle API versioning and improve data presentation. - Enhanced the rendering of control plane and worker statuses in the ClusterClassesList, providing clearer insights into resource definitions. - Improved type safety and maintainability by utilizing TypeScript interfaces throughout the components. Signed-off-by: Chayan Das <01chayandas@gmail.com>
- Introduced a new ScaleButton component to facilitate scaling of KubeadmControlPlane, MachineDeployment, MachineSet, and MachinePool resources. - Updated relevant detail and list components to include the ScaleButton, enhancing user interaction for scaling operations. - Ensured that the ScaleButton is conditionally rendered based on the scalability of the resource. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…h API versioning and loading states - Updated MachineDrainRuleDetail and MachineDrainRulesList components to support dynamic API versioning, improving compatibility with different versions. - Introduced loading states to enhance user experience while detecting the MachineDrainRule version. - Refactored the MachineDrainRule class to include a static method for creating versioned instances, improving maintainability and clarity. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…display of Data Secret - Removed unused columns and improved the rendering of the Data Secret field to display a link when available. - Updated the rendering logic for the Format field to enhance clarity and user experience. - Cleaned up the component by eliminating unnecessary code, improving maintainability. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…ts for enhanced API versioning and data handling - Refactored KubeadmConfigTemplateDetail and KubeadmConfigTemplatesList components to support dynamic API versioning, improving compatibility with different versions. - Introduced loading states and error handling to enhance user experience while fetching KubeadmConfigTemplate details. - Improved data rendering by separating data fetching logic and enhancing the display of additional information such as cluster name, format, and status. - Updated interfaces and added new methods for better type safety and maintainability. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…ponents with dynamic API versioning and loading states - Refactored KubeadmControlPlaneTemplateDetail and KubeadmControlPlaneTemplatesList components to support dynamic API versioning, improving compatibility with different versions. - Introduced loading states to enhance user experience while detecting KCP Template version. - Updated resource handling to ensure proper data rendering and improved type safety with TypeScript interfaces. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…versioning and improved loading states - Enhanced MachineHealthCheckDetail and MachineHealthChecksList components to support dynamic API versioning, improving compatibility with different versions. - Introduced loading states to enhance user experience while detecting MachineHealthCheck version. - Refactored the MachineHealthCheck class to include a static method for creating versioned instances, improving maintainability and clarity. - Updated data handling to ensure proper rendering of conditions and other resource details. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…API versioning and improved data handling - Updated MachinePoolDetail to support dynamic API versioning, enhancing compatibility with different versions. - Introduced loading states to improve user experience while detecting MachinePool version. - Enhanced data rendering by updating the resource handling and integrating conditions into the display logic. - Refactored the MachinePool class to include methods for managing API versions and conditions, improving maintainability. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…anced status display - Introduced new columns for Control Plane and Worker Replicas in the ClustersList component, displaying the count of ready and desired replicas. - Implemented conditional rendering of status labels to indicate the readiness of replicas, improving visibility into cluster health. Signed-off-by: Chayan Das <01chayandas@gmail.com>
… conditions display - Introduced a new Machine Template section in the MachineDetail component to enhance visibility of machine configurations. - Refactored the conditions display logic to streamline rendering and improve maintainability by removing redundant code. - Updated the component structure to support better organization of machine-related information. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…anced clarity and functionality - Updated the Resource component to include additional imports and improve type handling for machine templates. - Refactored the TemplateSection component to streamline template resolution logic and enhance the display of machine specifications. - Introduced a new utility function, formatDeletionTimeout, to standardize the formatting of deletion timeouts across different API versions. - Removed console logs from the ScaleButton component to clean up the codebase. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…ic and clarity - Introduced a new utility function, getOwnedMachines, to streamline the logic for filtering owned machines based on resource type. - Simplified the OwnedMachinesSectionWithData component by utilizing the new utility function, enhancing readability and maintainability. - Removed unnecessary dependencies on MachineSetClass, focusing on direct ownership relationships for better clarity. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…mproved error handling - Added CapiRouteWrapper to manage loading and error states for Cluster API resources. - Implemented a new Dashboard component to display a user-friendly message when the required Custom Resource Definitions (CRDs) are not detected. - Updated resource registration to utilize CapiRouteWrapper for both detail and list components, enhancing user experience during resource loading. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…nents for improved type handling and code clarity - Updated the ReplicaHelpers component to handle undefined replica values more gracefully, enhancing display logic. - Refactored the getOwnedMachines function in the Resource component to improve type safety by using NonNullable for owner references. - Cleaned up the ScaleButton component by removing unnecessary comments and simplifying the update function, improving readability and maintainability. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…nts for enhanced data handling and display - Updated MachinePoolDetail to improve error handling and loading states, ensuring a better user experience when fetching resource details. - Introduced a new MachinePoolDetailContent component to streamline the rendering logic and support dynamic API versioning. - Enhanced the MachinePoolsList component by adding new columns for 'Ready' and 'Up-to-date' replicas, improving the visibility of machine pool status. - Refactored the data handling logic in the MachinePool class to support additional status fields and improve type safety. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…roved status normalization and type safety - Introduced a private method in both Cluster and KubeadmControlPlane classes to normalize status data, enhancing data handling consistency. - Updated getter methods to utilize the normalized status, improving clarity and maintainability. - Refactored type guards for version status checks in MachineSet and KubeadmControlPlane, ensuring better type safety across different API versions. - Consolidated utility functions for health checks in ClusterClass, streamlining the logic for retrieving health check data. Signed-off-by: Chayan Das <01chayandas@gmail.com>
…I Plugin Signed-off-by: Chayan Das <01chayandas@gmail.com>
Contributor
Author
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 47 out of 48 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…nrecognized phases Signed-off-by: Chayan Das <01chayandas@gmail.com>
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 PR primarily refactors the Cluster API MachineSet list and detail views to align with the existing Machine UX pattern. It also introduces improvements to multi-version handling (v1beta1 vs v1beta2) and fixes rendering issues related to status, selector, and template data.
Additionally, minor enhancements have been made to the Machine resource, including updates to the details page and improved handling of versioned fields.
Key Changes
MachineSet UI Refactor
Refactored MachineSetDetail to follow the same structure as MachineDetail
Introduced stable useMemo for versioned resources
Improved loading and error states
Multi-version Handling (v1beta1 vs v1beta2)
Proper handling of:
deletePolicy (v1beta1) vs deletion.order (v1beta2)
Extended v1beta1 status typing to include:
deprecated.v1beta1.conditions
Template Section Improvements
Introduced a dedicated Machine Template section
Displays:
template labels
template spec (version, naming strategy, bootstrap/infrastructure refs, deletion timeouts)
Uses consistent name/value table grid layout
Machine Resource Enhancements (Secondary)
Added new sections to the Machine details page (addresses and node info)
Improved handling of versioned status fields