From 32868fbcb841e12a054a676616caacfad46389d3 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:41:24 +0530 Subject: [PATCH 1/8] add resizable column feature to Nodes list --- .../src/components/nodes/NodesPage.tsx | 40 +++++++++++++++---- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx index df5c9ec6bb3..5a5eb99b5b0 100644 --- a/frontend/packages/console-app/src/components/nodes/NodesPage.tsx +++ b/frontend/packages/console-app/src/components/nodes/NodesPage.tsx @@ -6,16 +6,17 @@ import * as _ from 'lodash'; import { useTranslation } from 'react-i18next'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, initialFiltersDefault, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import type { ConsoleDataViewColumn, ConsoleDataViewRow, ResourceFilters, } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { filterVirtualMachineInstancesByNode, useIsKubevirtPluginActive, @@ -162,16 +163,21 @@ const nodeColumnInfo = Object.freeze({ const kind = 'Node'; -const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { +const useNodesColumns = ( + vmsEnabled: boolean, +): { columns: TableColumn[]; resetAllColumnWidths: () => void } => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(NodeModel); + const columns = useMemo(() => { return [ { title: t('console-app~Name'), id: nodeColumnInfo.name.id, sort: 'metadata.name', + resizableProps: getResizableProps(nodeColumnInfo.name.id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -179,6 +185,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Status'), id: nodeColumnInfo.status.id, sort: sortWithCSRResource(nodeReadiness, 'False'), + resizableProps: getResizableProps(nodeColumnInfo.status.id), props: { modifier: 'nowrap', }, @@ -187,6 +194,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Machine set'), id: nodeColumnInfo.machineOwner.id, sort: 'machineOwner.name', + resizableProps: getResizableProps(nodeColumnInfo.machineOwner.id), props: { modifier: 'nowrap', }, @@ -197,6 +205,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Virtual machines'), id: nodeColumnInfo.vms.id, sort: 'virtualMachines', + resizableProps: getResizableProps(nodeColumnInfo.vms.id), props: { modifier: 'nowrap', info: { @@ -215,6 +224,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Pods'), id: nodeColumnInfo.pods.id, sort: sortWithCSRResource(nodePods, 0), + resizableProps: getResizableProps(nodeColumnInfo.pods.id), props: { modifier: 'nowrap', }, @@ -223,6 +233,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Memory'), id: nodeColumnInfo.memory.id, sort: sortWithCSRResource(nodeMemory, 0), + resizableProps: getResizableProps(nodeColumnInfo.memory.id), props: { modifier: 'nowrap', }, @@ -231,6 +242,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~CPU'), id: nodeColumnInfo.cpu.id, sort: sortWithCSRResource(nodeCPU, 0), + resizableProps: getResizableProps(nodeColumnInfo.cpu.id), props: { modifier: 'nowrap', }, @@ -239,6 +251,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Roles'), id: nodeColumnInfo.role.id, sort: sortWithCSRResource(nodeRolesSort, ''), + resizableProps: getResizableProps(nodeColumnInfo.role.id), props: { modifier: 'nowrap', }, @@ -248,6 +261,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Architecture'), id: nodeColumnInfo.architecture.id, sort: sortWithCSRResource(nodeArch, ''), + resizableProps: getResizableProps(nodeColumnInfo.architecture.id), props: { modifier: 'nowrap', }, @@ -257,6 +271,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Filesystem'), id: nodeColumnInfo.filesystem.id, sort: sortWithCSRResource(nodeFS, 0), + resizableProps: getResizableProps(nodeColumnInfo.filesystem.id), props: { modifier: 'nowrap', }, @@ -266,6 +281,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Created'), id: nodeColumnInfo.created.id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(nodeColumnInfo.created.id), props: { modifier: 'nowrap', }, @@ -275,6 +291,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Instance type'), id: nodeColumnInfo.instanceType.id, sort: sortWithCSRResource(nodeInstanceType, ''), + resizableProps: getResizableProps(nodeColumnInfo.instanceType.id), props: { modifier: 'nowrap', }, @@ -284,6 +301,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Machine'), id: nodeColumnInfo.machine.id, sort: sortWithCSRResource(nodeMachine, ''), + resizableProps: getResizableProps(nodeColumnInfo.machine.id), props: { modifier: 'nowrap', }, @@ -293,6 +311,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~MachineConfigPool'), id: nodeColumnInfo.machineConfigPool.id, sort: 'machineConfigPool.metadata.name', + resizableProps: getResizableProps(nodeColumnInfo.machineConfigPool.id), props: { modifier: 'nowrap', }, @@ -302,9 +321,9 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Labels'), id: nodeColumnInfo.labels.id, sort: 'metadata.labels', + resizableProps: getResizableProps(nodeColumnInfo.labels.id), props: { modifier: 'nowrap', - width: 15, }, additional: true, }, @@ -312,6 +331,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Zone'), id: nodeColumnInfo.zone.id, sort: sortWithCSRResource(nodeZone, ''), + resizableProps: getResizableProps(nodeColumnInfo.zone.id), props: { modifier: 'nowrap', }, @@ -321,6 +341,7 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: t('console-app~Uptime'), id: nodeColumnInfo.uptime.id, sort: sortWithCSRResource(nodeUptime, ''), + resizableProps: getResizableProps(nodeColumnInfo.uptime.id), props: { modifier: 'nowrap', }, @@ -330,12 +351,13 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn[] => { title: '', id: nodeColumnInfo.actions.id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t, vmsEnabled]); - return columns; + }, [t, vmsEnabled, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const CPUCell: FC<{ cores: number; totalCores: number }> = ({ cores, totalCores }) => { @@ -587,7 +609,7 @@ const NodeList: FC = ({ selectedColumns, }) => { const { t } = useTranslation(); - const columns = useNodesColumns(vmsEnabled); + const { columns, resetAllColumnWidths } = useNodesColumns(vmsEnabled); const nodeMetrics = useConsoleSelector(({ UI }) => { return UI.getIn(['metrics', 'node']); }); @@ -815,6 +837,8 @@ const NodeList: FC = ({ hideNameLabelFilters={hideNameLabelFilters} hideLabelFilter={hideLabelFilter} hideColumnManagement={hideColumnManagement} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From b1eb699ddfde8483b4e63d7fe6ef6e9b0957dc65 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:43:36 +0530 Subject: [PATCH 2/8] add resizable column feature to Machines list --- frontend/public/components/machine.tsx | 29 +++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/machine.tsx b/frontend/public/components/machine.tsx index 080acc61152..e6b066724e2 100644 --- a/frontend/public/components/machine.tsx +++ b/frontend/public/components/machine.tsx @@ -32,10 +32,11 @@ import { useK8sWatchResource } from './utils/k8s-watch-hook'; import { sortResourceByValue } from './factory/Table/sort'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { DescriptionList, DescriptionListDescription, @@ -197,8 +198,12 @@ type MachineListProps = { hideColumnManagement?: boolean; }; -const useMachineColumns = (): TableColumn[] => { +const useMachineColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(MachineModel); const columns: TableColumn[] = useMemo(() => { return [ @@ -206,8 +211,9 @@ const useMachineColumns = (): TableColumn[] => { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -215,6 +221,7 @@ const useMachineColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -223,6 +230,7 @@ const useMachineColumns = (): TableColumn[] => { title: t('public~Node'), id: tableColumnInfo[2].id, sort: 'status.nodeRef.name', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -231,6 +239,7 @@ const useMachineColumns = (): TableColumn[] => { title: t('public~Phase'), id: tableColumnInfo[3].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, getMachinePhase)), + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -239,6 +248,7 @@ const useMachineColumns = (): TableColumn[] => { title: t('public~Provider state'), id: tableColumnInfo[4].id, sort: 'status.providerStatus.instanceState', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -247,6 +257,7 @@ const useMachineColumns = (): TableColumn[] => { title: t('public~Region'), id: tableColumnInfo[5].id, sort: "metadata.labels['machine.openshift.io/region']", + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -255,6 +266,7 @@ const useMachineColumns = (): TableColumn[] => { title: t('public~Availability zone'), id: tableColumnInfo[6].id, sort: "metadata.labels['machine.openshift.io/zone']", + resizableProps: getResizableProps(tableColumnInfo[6].id), props: { modifier: 'nowrap', }, @@ -263,16 +275,17 @@ const useMachineColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[7].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; export const MachineList: FC = ({ data, loaded, loadError, ...props }) => { - const columns = useMachineColumns(); + const { columns, resetAllColumnWidths } = useMachineColumns(); return ( }> @@ -285,6 +298,8 @@ export const MachineList: FC = ({ data, loaded, loadError, ... columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From d36c4a5373f055f0c53408b712f08b52343ca47d Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:45:28 +0530 Subject: [PATCH 3/8] add resizable column feature to MachineAutoscalers list --- .../public/components/machine-autoscaler.tsx | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/machine-autoscaler.tsx b/frontend/public/components/machine-autoscaler.tsx index 8dca6c2c0bd..6ef7935d0d7 100644 --- a/frontend/public/components/machine-autoscaler.tsx +++ b/frontend/public/components/machine-autoscaler.tsx @@ -8,11 +8,12 @@ import { DASH } from '@console/shared/src/constants'; import { TableColumn } from '@console/dynamic-plugin-sdk'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { MachineAutoscalerModel } from '../models'; import { groupVersionFor, @@ -100,16 +101,24 @@ const getDataViewRows: GetDataViewRows = (data, columns) => { }); }; -const useMachineAutoscalerColumns = (): TableColumn[] => { +const useMachineAutoscalerColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + MachineAutoscalerModel, + ); + const columns: TableColumn[] = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -117,6 +126,7 @@ const useMachineAutoscalerColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -125,6 +135,7 @@ const useMachineAutoscalerColumns = (): TableColumn[] => { title: t('public~Scale target'), id: tableColumnInfo[2].id, sort: 'spec.scaleTargetRef.name', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -133,6 +144,7 @@ const useMachineAutoscalerColumns = (): TableColumn[] => { title: t('public~Min'), id: tableColumnInfo[3].id, sort: 'spec.minReplicas', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -141,6 +153,7 @@ const useMachineAutoscalerColumns = (): TableColumn[] => { title: t('public~Max'), id: tableColumnInfo[4].id, sort: 'spec.maxReplicas', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -149,12 +162,13 @@ const useMachineAutoscalerColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[5].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const MachineAutoscalerList: FC = ({ @@ -163,7 +177,7 @@ const MachineAutoscalerList: FC = ({ loadError, ...props }) => { - const columns = useMachineAutoscalerColumns(); + const { columns, resetAllColumnWidths } = useMachineAutoscalerColumns(); return ( }> @@ -176,6 +190,8 @@ const MachineAutoscalerList: FC = ({ columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 1f53df01e5c8fad99701cf0a5e59b8eaf42e81e3 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:46:23 +0530 Subject: [PATCH 4/8] add resizable column feature to MachineHealthChecks list --- .../components/machine-health-check.tsx | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/machine-health-check.tsx b/frontend/public/components/machine-health-check.tsx index d61d8550fd4..d46907c31da 100644 --- a/frontend/public/components/machine-health-check.tsx +++ b/frontend/public/components/machine-health-check.tsx @@ -23,11 +23,12 @@ import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; import { TableColumn } from '@console/dynamic-plugin-sdk'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu'; const machineHealthCheckReference = referenceForModel(MachineHealthCheckModel); @@ -66,16 +67,24 @@ const getDataViewRows: GetDataViewRows = (data, columns) }); }; -const useMachineHealthCheckColumns = (): TableColumn[] => { +const useMachineHealthCheckColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + MachineHealthCheckModel, + ); + const columns: TableColumn[] = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -83,6 +92,7 @@ const useMachineHealthCheckColumns = (): TableColumn[] = title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -91,6 +101,7 @@ const useMachineHealthCheckColumns = (): TableColumn[] = title: t('public~Created'), id: tableColumnInfo[2].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -99,12 +110,13 @@ const useMachineHealthCheckColumns = (): TableColumn[] = title: '', id: tableColumnInfo[3].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const MachineHealthCheckList: FC = ({ @@ -113,7 +125,7 @@ const MachineHealthCheckList: FC = ({ loadError, ...props }) => { - const columns = useMachineHealthCheckColumns(); + const { columns, resetAllColumnWidths } = useMachineHealthCheckColumns(); return ( }> @@ -126,6 +138,8 @@ const MachineHealthCheckList: FC = ({ columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 74277c648f0a23f4711ddbc6d8eb37d38187d8f1 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:47:43 +0530 Subject: [PATCH 5/8] add resizable column feature to ControlPlaneMachineSets list --- .../components/control-plane-machine-set.tsx | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/control-plane-machine-set.tsx b/frontend/public/components/control-plane-machine-set.tsx index cda6a32f342..d3a32844e59 100644 --- a/frontend/public/components/control-plane-machine-set.tsx +++ b/frontend/public/components/control-plane-machine-set.tsx @@ -19,11 +19,12 @@ import { DASH } from '@console/shared/src/constants'; import { TableColumn } from '@console/dynamic-plugin-sdk'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { Conditions } from './conditions'; import { ControlPlaneMachineSetModel } from '../models'; import { ControlPlaneMachineSetKind, referenceForModel } from '../module/k8s'; @@ -202,16 +203,24 @@ const tableColumnInfo = [ { id: '' }, ]; -const useControlPlaneMachineSetColumns = (): TableColumn[] => { +const useControlPlaneMachineSetColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + ControlPlaneMachineSetModel, + ); + const columns: TableColumn[] = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -219,6 +228,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn = ({ desiredReplicas, readyReplicas, path }) => { @@ -325,7 +339,7 @@ const ControlPlaneMachineSetList: FC = ({ loadError, ...props }) => { - const columns = useControlPlaneMachineSetColumns(); + const { columns, resetAllColumnWidths } = useControlPlaneMachineSetColumns(); return ( }> @@ -338,6 +352,8 @@ const ControlPlaneMachineSetList: FC = ({ columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 5e6173f79443f82e9625788de0fa8aa39506ed60 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:48:43 +0530 Subject: [PATCH 6/8] add resizable column feature to MachineSets list --- frontend/public/components/machine-set.tsx | 28 ++++++++++++++++------ 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/machine-set.tsx b/frontend/public/components/machine-set.tsx index 9898b6f5c99..8e244318c05 100644 --- a/frontend/public/components/machine-set.tsx +++ b/frontend/public/components/machine-set.tsx @@ -7,10 +7,11 @@ import { ListPageBody, TableColumn } from '@console/dynamic-plugin-sdk'; import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, + nameCellProps, ConsoleDataView, } from '@console/app/src/components/data-view/ConsoleDataView'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { Tooltip, Button, @@ -276,9 +277,13 @@ const MachineSetDetails: FC = ({ obj }) => { ); }; -const useMachineSetColumns = (): TableColumn[] => { +const useMachineSetColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); const context = useContext(CapacityResolverContext); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(MachineSetModel); const columns: TableColumn[] = useMemo(() => { return [ @@ -286,8 +291,9 @@ const useMachineSetColumns = (): TableColumn[] => { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -295,6 +301,7 @@ const useMachineSetColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -303,6 +310,7 @@ const useMachineSetColumns = (): TableColumn[] => { title: t('public~Machines'), id: tableColumnInfo[2].id, sort: 'status.readyReplicas', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -312,6 +320,7 @@ const useMachineSetColumns = (): TableColumn[] => { id: tableColumnInfo[3].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, getMachineSetInstanceType)), + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -323,6 +332,7 @@ const useMachineSetColumns = (): TableColumn[] => { ? (data, direction) => data.sort(sortResourceByValue(direction, (obj) => context.capacityResolver(obj).cpu)) : undefined, + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -336,6 +346,7 @@ const useMachineSetColumns = (): TableColumn[] => { sortResourceByValue(direction, (obj) => context.capacityResolver(obj).memory), ) : undefined, + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -344,12 +355,13 @@ const useMachineSetColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[6].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t, context]); - return columns; + }, [t, context, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const getDataViewRows = ( @@ -406,7 +418,7 @@ const getDataViewRows = ( }; const MachineSetListContent: FC = ({ data, loaded, loadError, ...props }) => { - const columns = useMachineSetColumns(); + const { columns, resetAllColumnWidths } = useMachineSetColumns(); return ( }> @@ -419,6 +431,8 @@ const MachineSetListContent: FC = ({ data, loaded, loadErro columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 06d4055ccdda231f9d67ce70f5ef25b3aa1e3fde Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:49:14 +0530 Subject: [PATCH 7/8] add resizable column feature to MachineConfigs list --- frontend/public/components/machine-config.tsx | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/frontend/public/components/machine-config.tsx b/frontend/public/components/machine-config.tsx index 21c9f892440..c671f772814 100644 --- a/frontend/public/components/machine-config.tsx +++ b/frontend/public/components/machine-config.tsx @@ -21,11 +21,12 @@ import PaneBody from '@console/shared/src/components/layout/PaneBody'; import { DASH } from '@console/shared/src/constants'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { MachineConfigKind, referenceForModel } from '../module/k8s'; import { MachineConfigModel } from '../models'; @@ -192,16 +193,22 @@ const getDataViewRows: GetDataViewRows = (data, columns) => { }); }; -const useMachineConfigColumns = (): TableColumn[] => { +const useMachineConfigColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(MachineConfigModel); + const columns: TableColumn[] = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -210,15 +217,16 @@ const useMachineConfigColumns = (): TableColumn[] => { id: tableColumnInfo[1].id, sort: "metadata.annotations['machineconfiguration.openshift.io/generated-by-controller-version']", + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Ignition version'), id: tableColumnInfo[2].id, sort: 'spec.config.ignition.version', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -227,15 +235,16 @@ const useMachineConfigColumns = (): TableColumn[] => { title: t('public~OS image URL'), id: tableColumnInfo[3].id, sort: 'spec.osImageURL', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Created'), id: tableColumnInfo[4].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -244,16 +253,17 @@ const useMachineConfigColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[5].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const MachineConfigList: FC = ({ data, loaded, loadError, ...props }) => { - const columns = useMachineConfigColumns(); + const { columns, resetAllColumnWidths } = useMachineConfigColumns(); return ( }> @@ -266,6 +276,8 @@ const MachineConfigList: FC = ({ data, loaded, loadError columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 3e47a609a9654dad5446959b8708aaafe2909cb3 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Thu, 19 Mar 2026 16:49:41 +0530 Subject: [PATCH 8/8] add resizable column feature to MachineConfigPools list --- .../public/components/machine-config-pool.tsx | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/machine-config-pool.tsx b/frontend/public/components/machine-config-pool.tsx index b04374a982e..5eda68570e6 100644 --- a/frontend/public/components/machine-config-pool.tsx +++ b/frontend/public/components/machine-config-pool.tsx @@ -20,11 +20,12 @@ import PaneBody from '@console/shared/src/components/layout/PaneBody'; import PaneBodyGroup from '@console/shared/src/components/layout/PaneBodyGroup'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import { Conditions } from './conditions'; import { MachineConfigPoolModel } from '../models'; import { machineConfigReference, MachineConfigPage } from './machine-config'; @@ -303,16 +304,24 @@ const tableColumnInfo = [ { id: '' }, ]; -const useMachineConfigPoolColumns = (): TableColumn[] => { +const useMachineConfigPoolColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + MachineConfigPoolModel, + ); + const columns: TableColumn[] = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -320,6 +329,7 @@ const useMachineConfigPoolColumns = (): TableColumn[] => title: t('public~Configuration'), id: tableColumnInfo[1].id, sort: 'status.configuration.name', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -327,6 +337,7 @@ const useMachineConfigPoolColumns = (): TableColumn[] => { title: t('public~Degraded'), id: tableColumnInfo[2].id, + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -334,6 +345,7 @@ const useMachineConfigPoolColumns = (): TableColumn[] => { title: t('public~Update status'), id: tableColumnInfo[3].id, + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -342,12 +354,13 @@ const useMachineConfigPoolColumns = (): TableColumn[] => title: '', id: tableColumnInfo[4].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const getDataViewRows: GetDataViewRows = (data, columns) => { @@ -399,7 +412,7 @@ const MachineConfigPoolList: FC = ({ loadError, ...props }) => { - const columns = useMachineConfigPoolColumns(); + const { columns, resetAllColumnWidths } = useMachineConfigPoolColumns(); return ( <> @@ -414,6 +427,8 @@ const MachineConfigPoolList: FC = ({ columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} />