CONSOLE-4982: add resizable column feature to Compute tables

[vikram-raj]

Add the resize column feature to the following Compute tables

• Nodes
• Machines
• MachineAutoscalers
• MachineHealthChecks
• ControlPlaneMachineSets
• MachineSets
• MachineConfigs
• MachineConfigPools

Summary by CodeRabbit

Release Notes

• New Features
  • Table columns are now resizable across multiple views including Nodes, Machines, Machine Sets, Machine Health Checks, Machine Config, Machine Config Pools, Control Plane Machine Sets, and Machine Autoscalers. Users can dynamically adjust column widths and reset columns to their default widths as needed.

[openshift-ci-robot]

@vikram-raj: This pull request references CONSOLE-4988 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 spike to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Add the resize column feature to the following Compute tables

• Nodes
• Machines
• MachineAutoscalers
• MachineHealthChecks
• ControlPlaneMachineSets
• MachineSets
• MachineConfigs
• MachineConfigPools

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]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: vikram-raj

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [vikram-raj]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci-robot]

@vikram-raj: This pull request references CONSOLE-4988 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 spike to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Add the resize column feature to the following Compute tables

• Nodes
• Machines
• MachineAutoscalers
• MachineHealthChecks
• ControlPlaneMachineSets
• MachineSets
• MachineConfigs
• MachineConfigPools

Summary by CodeRabbit

Release Notes

• New Features
• Table columns are now resizable across multiple views including Nodes, Machines, Machine Sets, Machine Health Checks, Machine Config, Machine Config Pools, Control Plane Machine Sets, and Machine Autoscalers. Users can dynamically adjust column widths and reset columns to their default widths as needed.

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.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 1fbec6f6-0fb5-436b-9586-2953bbe9706d

📥 Commits

Reviewing files that changed from the base of the PR and between d499061 and 3e47a60.

📒 Files selected for processing (8)

• frontend/packages/console-app/src/components/nodes/NodesPage.tsx
• frontend/public/components/control-plane-machine-set.tsx
• frontend/public/components/machine-autoscaler.tsx
• frontend/public/components/machine-config-pool.tsx
• frontend/public/components/machine-config.tsx
• frontend/public/components/machine-health-check.tsx
• frontend/public/components/machine-set.tsx
• frontend/public/components/machine.tsx

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

• frontend/public/components/machine-config-pool.tsx
• frontend/public/components/control-plane-machine-set.tsx
• frontend/public/components/machine-autoscaler.tsx
• frontend/public/components/machine-config.tsx
• frontend/public/components/machine-set.tsx
• frontend/packages/console-app/src/components/nodes/NodesPage.tsx
• frontend/public/components/machine.tsx
• frontend/public/components/machine-health-check.tsx

🧬 Code graph analysis (8)

frontend/public/components/machine-config-pool.tsx (2)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/control-plane-machine-set.tsx (2)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/machine-autoscaler.tsx (2)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/machine-config.tsx (2)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/machine-set.tsx (2)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/packages/console-app/src/components/nodes/NodesPage.tsx (3)

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts (1)

• TableColumn (309-315)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/machine.tsx (3)

frontend/public/components/factory/table.tsx (1)

• TableColumn (663-670)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/machine-health-check.tsx (3)

frontend/public/components/factory/table.tsx (1)

• TableColumn (663-670)

frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)

• useColumnWidthSettings (30-97)

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx (2)

• nameCellProps (250-253)
• actionsCellProps (262-266)

🔇 Additional comments (9)

frontend/public/components/machine.tsx (1)

201-285: LGTM — clean integration of resizable columns.

The hook refactor to return { columns, resetAllColumnWidths } is consistent with the shared useColumnWidthSettings contract. Dependencies in useMemo are correctly declared, and the actions column is intentionally excluded from resizing. Solid pattern that matches the other Compute tables in this PR.

frontend/public/components/control-plane-machine-set.tsx (1)

206-274: LGTM — consistent with the resizable column pattern.

Same structure as machine.tsx: hook returns object with columns and reset function, getResizableProps wired into each data column, proper memoization. Actions column correctly excluded from resizing.

frontend/public/components/machine-config-pool.tsx (1)

307-364: LGTM — matches established pattern.

Implementation aligns with the other Compute table refactors. The MachineConfigPoolModel is correctly passed to useColumnWidthSettings for table-specific width persistence.

frontend/public/components/machine-config.tsx (1)

196-263: LGTM — correctly wires MachineConfig table for resizing.

Hook structure and ConsoleDataView integration follow the shared pattern. All five data columns get resizableProps, actions column excluded as expected.

frontend/public/components/machine-autoscaler.tsx (1)

104-172: LGTM — MachineAutoscaler table gets resizing support.

Consistent implementation. The five data columns (Name, Namespace, Scale target, Min, Max) all have resizableProps attached.

frontend/public/components/machine-set.tsx (1)

280-365: LGTM — MachineSet table correctly handles CapacityResolverContext.

Good that context remains in the useMemo dependency array alongside getResizableProps — the CPU/Memory sort functions depend on capacityResolver. Resizing props correctly wired to all six data columns.

frontend/public/components/machine-health-check.tsx (1)

70-120: LGTM — MachineHealthCheck table updated consistently.

Straightforward implementation for this smaller table (Name, Namespace, Created). Pattern matches all other Compute tables in the PR.

frontend/packages/console-app/src/components/nodes/NodesPage.tsx (2)

166-361: LGTM — comprehensive resizing support across all Node columns.

This is the most extensive table in the PR with 17 data columns. The conditional vmsEnabled column correctly receives resizableProps (Line 208), and vmsEnabled is properly included in the useMemo dependency array since it affects the columns shape. Clean implementation.

---

840-841: Consistent wiring to ConsoleDataView.

The isResizable and resetAllColumnWidths props are correctly passed, matching all other Compute tables in this PR.

---

📝 Walkthrough

Walkthrough

This pull request introduces resizable column width functionality across eight table/list components in the OpenShift Console. Each component's column hook is refactored to return an object containing { columns, resetAllColumnWidths } instead of just columns. Column definitions are augmented with resizableProps via a new useColumnWidthSettings() hook, and sticky cell prop utilities are replaced with named alternatives (nameCellProps, actionsCellProps). The ConsoleDataView component receives new props (isResizable, resetAllColumnWidths) to enable and control the resizing behavior. Affected components include Nodes, ControlPlaneMachineSet, MachineAutoscaler, MachineConfigPool, MachineConfig, MachineHealthCheck, MachineSet, and Machine.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can get early access to new features in CodeRabbit.

Enable the early_access setting to enable early access features such as new models, tools, and more.

[openshift-ci-robot]

@vikram-raj: This pull request references CONSOLE-4982 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 "4.22.0" version, but no target version was set.

Details

In response to this:

Add the resize column feature to the following Compute tables

• Nodes
• Machines
• MachineAutoscalers
• MachineHealthChecks
• ControlPlaneMachineSets
• MachineSets
• MachineConfigs
• MachineConfigPools

Summary by CodeRabbit

Release Notes

• New Features
• Table columns are now resizable across multiple views including Nodes, Machines, Machine Sets, Machine Health Checks, Machine Config, Machine Config Pools, Control Plane Machine Sets, and Machine Autoscalers. Users can dynamically adjust column widths and reset columns to their default widths as needed.

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]

@vikram-raj: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	3e47a60	link	true	/test e2e-gcp-console

Full PR test history. Your PR dashboard.

Details

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 kubernetes-sigs/prow repository. I understand the commands that are listed here.