From f934df43cff0d3bdc833d3a7cd2b44433924be78 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 20:40:32 +0530 Subject: [PATCH 1/9] add resizable column feature to secrets list --- frontend/public/components/secret.tsx | 28 ++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/secret.tsx b/frontend/public/components/secret.tsx index 57807bafcec..8a43ca819e6 100644 --- a/frontend/public/components/secret.tsx +++ b/frontend/public/components/secret.tsx @@ -28,10 +28,11 @@ import { DescriptionList, Grid, GridItem } from '@patternfly/react-core'; import { Timestamp } from '@console/shared/src/components/datetime/Timestamp'; 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 { GetDataViewRows } from '@console/app/src/components/data-view/types'; import { LoadingBox } from './utils/status-box'; import { sortResourceByValue } from './factory/Table/sort'; @@ -123,16 +124,22 @@ const SecretDetails: FC<{ obj: SecretKind }> = ({ obj }) => { ); }; -const useSecretsColumns = (): TableColumn[] => { +const useSecretsColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(SecretModel); + const columns = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -140,6 +147,7 @@ const useSecretsColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -148,6 +156,7 @@ const useSecretsColumns = (): TableColumn[] => { title: t('public~Type'), id: tableColumnInfo[2].id, sort: 'type', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -156,6 +165,7 @@ const useSecretsColumns = (): TableColumn[] => { title: t('public~Size'), id: tableColumnInfo[3].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.dataSize)), + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -164,6 +174,7 @@ const useSecretsColumns = (): TableColumn[] => { title: t('public~Created'), id: tableColumnInfo[4].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -172,16 +183,17 @@ const useSecretsColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[5].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const SecretsList: FC = ({ data, loaded, ...props }) => { - const columns = useSecretsColumns(); + const { columns, resetAllColumnWidths } = useSecretsColumns(); return ( }> @@ -193,6 +205,8 @@ const SecretsList: FC = ({ data, loaded, ...props }) => { columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 5f4d0709c285454ca6d3ea2a0e57222313e978a7 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 21:02:49 +0530 Subject: [PATCH 2/9] add resizable column feature to configMaps list --- frontend/public/components/configmap.tsx | 28 ++++++++++++++++++------ 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/configmap.tsx b/frontend/public/components/configmap.tsx index b6946480b6f..99220341d1e 100644 --- a/frontend/public/components/configmap.tsx +++ b/frontend/public/components/configmap.tsx @@ -18,10 +18,11 @@ import { ConfigMapKind, referenceForModel, TableColumn } from '../module/k8s'; import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; 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 { GetDataViewRows } from '@console/app/src/components/data-view/types'; import { LoadingBox } from '@console/shared/src/components/loading'; import { sortResourceByValue } from './factory/Table/sort'; @@ -78,16 +79,22 @@ const getDataViewRows: GetDataViewRows = (data, columns) => { }); }; -const useConfigMapsColumns = (): TableColumn[] => { +const useConfigMapsColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - return useMemo( + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(ConfigMapModel); + + const columns = useMemo( () => [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -95,6 +102,7 @@ const useConfigMapsColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -103,6 +111,7 @@ const useConfigMapsColumns = (): TableColumn[] => { title: t('public~Size'), id: tableColumnInfo[2].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.dataSize)), + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -111,6 +120,7 @@ const useConfigMapsColumns = (): TableColumn[] => { title: t('public~Created'), id: tableColumnInfo[3].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -119,16 +129,18 @@ const useConfigMapsColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[4].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ], - [t], + [t, getResizableProps], ); + + return { columns, resetAllColumnWidths }; }; export const ConfigMaps: FC = ({ data, loaded, ...props }) => { - const columns = useConfigMapsColumns(); + const { columns, resetAllColumnWidths } = useConfigMapsColumns(); return ( }> @@ -140,6 +152,8 @@ export const ConfigMaps: FC = ({ data, loaded, ...props }) => { columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 0945dc00c48acb6f46b4bd747dfd3abfb31de2e9 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 21:08:24 +0530 Subject: [PATCH 3/9] add resizable column feature to CronJobs list --- frontend/public/components/cron-job.tsx | 31 ++++++++++++++++++------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/frontend/public/components/cron-job.tsx b/frontend/public/components/cron-job.tsx index fce012c7971..41e22f0abfa 100644 --- a/frontend/public/components/cron-job.tsx +++ b/frontend/public/components/cron-job.tsx @@ -39,10 +39,11 @@ import { PodDisruptionBudgetField } from '@console/app/src/components/pdb/PodDis import { DescriptionList, Grid, GridItem } from '@patternfly/react-core'; 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 { GetDataViewRows } from '@console/app/src/components/data-view/types'; import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; import { LoadingBox } from './utils/status-box'; @@ -302,16 +303,22 @@ export const CronJobJobsComponent: FC = ({ obj }) => ); -const useCronJobsColumns = (): TableColumn[] => { +const useCronJobsColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - const columns: TableColumn[] = useMemo(() => { + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(CronJobModel); + + const columns = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -319,6 +326,7 @@ const useCronJobsColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -327,6 +335,7 @@ const useCronJobsColumns = (): TableColumn[] => { title: t('public~Schedule'), id: tableColumnInfo[2].id, sort: 'spec.schedule', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -335,6 +344,7 @@ const useCronJobsColumns = (): TableColumn[] => { title: t('public~Suspend'), id: tableColumnInfo[3].id, sort: 'spec.suspend', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -343,6 +353,7 @@ const useCronJobsColumns = (): TableColumn[] => { title: t('public~Concurrency policy'), id: tableColumnInfo[4].id, sort: 'spec.concurrencyPolicy', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -351,6 +362,7 @@ const useCronJobsColumns = (): TableColumn[] => { title: t('public~Starting deadline seconds'), id: tableColumnInfo[5].id, sort: 'spec.startingDeadlineSeconds', + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -359,16 +371,17 @@ const useCronJobsColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[6].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; export const CronJobsList: FC = ({ data, loaded, ...props }) => { - const columns = useCronJobsColumns(); + const { columns, resetAllColumnWidths } = useCronJobsColumns(); return ( }> @@ -380,6 +393,8 @@ export const CronJobsList: FC = ({ data, loaded, ...props }) columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From b2f3b47cb858678e13be78387a141f64d6f88f23 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 21:13:29 +0530 Subject: [PATCH 4/9] add resizable column feature to Jobs list --- frontend/public/components/job.tsx | 32 +++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/frontend/public/components/job.tsx b/frontend/public/components/job.tsx index 9291fe2b594..f3282163138 100644 --- a/frontend/public/components/job.tsx +++ b/frontend/public/components/job.tsx @@ -43,10 +43,11 @@ import { } from '@patternfly/react-core'; 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 { GetDataViewRows } from '@console/app/src/components/data-view/types'; import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; import { sortResourceByValue } from './factory/Table/sort'; @@ -238,16 +239,22 @@ const JobsDetailsPage: FC = (props) => { /> ); }; -const useJobsColumns = (): TableColumn[] => { +const useJobsColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); - const columns: TableColumn[] = useMemo(() => { + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(JobModel); + + const columns = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -255,6 +262,7 @@ const useJobsColumns = (): TableColumn[] => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -263,9 +271,9 @@ const useJobsColumns = (): TableColumn[] => { title: t('public~Labels'), id: tableColumnInfo[2].id, sort: 'metadata.labels', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', - width: 20, }, }, { @@ -273,6 +281,7 @@ const useJobsColumns = (): TableColumn[] => { id: tableColumnInfo[3].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.jobCompletionsSucceeded)), + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -282,6 +291,7 @@ const useJobsColumns = (): TableColumn[] => { id: tableColumnInfo[4].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.jobType)), + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -290,6 +300,7 @@ const useJobsColumns = (): TableColumn[] => { title: t('public~Created'), id: tableColumnInfo[5].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -298,16 +309,17 @@ const useJobsColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[6].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const JobsList: FC = ({ data, loaded, ...props }) => { - const columns = useJobsColumns(); + const { columns, resetAllColumnWidths } = useJobsColumns(); return ( }> @@ -319,6 +331,8 @@ const JobsList: FC = ({ data, loaded, ...props }) => { columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From da6737531670b78d7bfb2119071cd44c54994c0e Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 21:21:24 +0530 Subject: [PATCH 5/9] add resizable column feature to ReplicaSets list --- frontend/public/components/replicaset.jsx | 25 ++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/replicaset.jsx b/frontend/public/components/replicaset.jsx index 7aa6b2deb10..29249c70a6f 100644 --- a/frontend/public/components/replicaset.jsx +++ b/frontend/public/components/replicaset.jsx @@ -37,10 +37,11 @@ import { } from '@patternfly/react-core'; 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 { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; import { ReplicaSetModel } from '../models'; import { sortResourceByValue } from './factory/Table/sort'; @@ -200,14 +201,17 @@ const getDataViewRows = (data, columns) => { const useReplicaSetsColumns = () => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(ReplicaSetModel); + const columns = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -215,6 +219,7 @@ const useReplicaSetsColumns = () => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -223,6 +228,7 @@ const useReplicaSetsColumns = () => { title: t('public~Status'), id: tableColumnInfo[2].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.numReplicas)), + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -231,15 +237,16 @@ const useReplicaSetsColumns = () => { title: t('public~Labels'), id: tableColumnInfo[3].id, sort: 'metadata.labels', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Owner'), id: tableColumnInfo[4].id, sort: 'metadata.ownerReferences[0].name', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -248,6 +255,7 @@ const useReplicaSetsColumns = () => { title: t('public~Created'), id: tableColumnInfo[5].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -256,16 +264,17 @@ const useReplicaSetsColumns = () => { title: '', id: tableColumnInfo[6].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const ReplicaSetsList = ({ data, loaded, ...props }) => { - const columns = useReplicaSetsColumns(); + const { columns, resetAllColumnWidths } = useReplicaSetsColumns(); return ( }> @@ -277,6 +286,8 @@ const ReplicaSetsList = ({ data, loaded, ...props }) => { columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From eced72e433f4fa447fa4638e6ba4cbbdee4c44e4 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 22:33:19 +0530 Subject: [PATCH 6/9] add resizable column feature to PodDisruptionBudgets list --- .../src/components/pdb/PDBList.tsx | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/frontend/packages/console-app/src/components/pdb/PDBList.tsx b/frontend/packages/console-app/src/components/pdb/PDBList.tsx index b694b6d0af6..795a71aa61e 100644 --- a/frontend/packages/console-app/src/components/pdb/PDBList.tsx +++ b/frontend/packages/console-app/src/components/pdb/PDBList.tsx @@ -3,11 +3,12 @@ import { useMemo, Suspense } from 'react'; import { useTranslation } from 'react-i18next'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, ConsoleDataView, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import type { GetDataViewRows } from '@console/app/src/components/data-view/types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; import type { TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types'; import { ResourceLink } from '@console/internal/components/utils/resource-link'; import { Selector } from '@console/internal/components/utils/selector'; @@ -74,16 +75,24 @@ const getDataViewRows: GetDataViewRows = (data, columns }); }; -const usePDBColumns = (): TableColumn[] => { +const usePDBColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + PodDisruptionBudgetModel, + ); + const columns = useMemo(() => { return [ { title: t('console-app~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -91,6 +100,7 @@ const usePDBColumns = (): TableColumn[] => { title: t('console-app~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -99,15 +109,16 @@ const usePDBColumns = (): TableColumn[] => { title: t('console-app~Selector'), id: tableColumnInfo[2].id, sort: 'spec.selector', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('console-app~Availability'), id: tableColumnInfo[3].id, sort: 'spec.minAvailable', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -116,6 +127,7 @@ const usePDBColumns = (): TableColumn[] => { title: t('console-app~Allowed disruptions'), id: tableColumnInfo[4].id, sort: 'status.disruptionsAllowed', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -124,6 +136,7 @@ const usePDBColumns = (): TableColumn[] => { title: t('console-app~Created'), id: tableColumnInfo[5].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -132,16 +145,17 @@ const usePDBColumns = (): TableColumn[] => { title: '', id: tableColumnInfo[6].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const PodDisruptionBudgetList: FC = ({ data, loaded, ...props }) => { - const columns = usePDBColumns(); + const { columns, resetAllColumnWidths } = usePDBColumns(); return ( }> @@ -153,6 +167,8 @@ const PodDisruptionBudgetList: FC = ({ data, load columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From ad5cfa6ec4bb30b2e708e18dd5c76948db7c5a64 Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 22:37:24 +0530 Subject: [PATCH 7/9] add resizable column feature to HorizontalPodAutoscalers list --- frontend/public/components/hpa.tsx | 31 +++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/frontend/public/components/hpa.tsx b/frontend/public/components/hpa.tsx index 8a5b60c914b..10aadfd7c74 100644 --- a/frontend/public/components/hpa.tsx +++ b/frontend/public/components/hpa.tsx @@ -27,11 +27,12 @@ import { ResourceEventStream } from './events'; import { DescriptionList, Grid, GridItem } from '@patternfly/react-core'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, + nameCellProps, ConsoleDataView, } 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 { DASH } from '@console/shared/src/constants/ui'; import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu'; @@ -320,16 +321,24 @@ const getDataViewRows: GetDataViewRows = (data, col }); }; -const useHorizontalPodAutoscalersColumns = (): TableColumn[] => { +const useHorizontalPodAutoscalersColumns = (): { + columns: TableColumn[]; + resetAllColumnWidths: () => void; +} => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + HorizontalPodAutoscalerModel, + ); + 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', }, }, @@ -337,6 +346,7 @@ const useHorizontalPodAutoscalersColumns = (): TableColumn = ({ @@ -390,7 +405,7 @@ export const HorizontalPodAutoscalersList: FC loaded, ...props }) => { - const columns = useHorizontalPodAutoscalersColumns(); + const { columns, resetAllColumnWidths } = useHorizontalPodAutoscalersColumns(); return ( }> @@ -402,6 +417,8 @@ export const HorizontalPodAutoscalersList: FC columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From d3cb9c5b256996b1df75ce5801201138f9135b1e Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Mon, 16 Mar 2026 22:41:52 +0530 Subject: [PATCH 8/9] add resizable column feature to ReplicationControllers list --- .../components/replication-controller.jsx | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/frontend/public/components/replication-controller.jsx b/frontend/public/components/replication-controller.jsx index bc04f280e6c..f47327cdb9d 100644 --- a/frontend/public/components/replication-controller.jsx +++ b/frontend/public/components/replication-controller.jsx @@ -32,10 +32,11 @@ import { } from '@patternfly/react-core'; 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 { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; import { ReplicationControllerModel } from '../models'; import { sortResourceByValue } from './factory/Table/sort'; @@ -216,14 +217,19 @@ const getDataViewRows = (data, columns) => { const useReplicationControllersColumns = () => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + ReplicationControllerModel, + ); + const columns = useMemo(() => { return [ { title: t('public~Name'), id: tableColumnInfo[0].id, sort: 'metadata.name', + resizableProps: getResizableProps(tableColumnInfo[0].id), props: { - ...cellIsStickyProps, + ...nameCellProps, modifier: 'nowrap', }, }, @@ -231,6 +237,7 @@ const useReplicationControllersColumns = () => { title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -239,6 +246,7 @@ const useReplicationControllersColumns = () => { title: t('public~Status'), id: tableColumnInfo[2].id, sort: (data, direction) => data.sort(sortResourceByValue(direction, sorts.numReplicas)), + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -247,6 +255,7 @@ const useReplicationControllersColumns = () => { title: t('public~Phase'), id: tableColumnInfo[3].id, sort: 'metadata.annotations["openshift.io/deployment.phase"]', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', }, @@ -255,6 +264,7 @@ const useReplicationControllersColumns = () => { title: t('public~Owner'), id: tableColumnInfo[4].id, sort: 'metadata.ownerReferences[0].name', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', }, @@ -263,6 +273,7 @@ const useReplicationControllersColumns = () => { title: t('public~Created'), id: tableColumnInfo[5].id, sort: 'metadata.creationTimestamp', + resizableProps: getResizableProps(tableColumnInfo[5].id), props: { modifier: 'nowrap', }, @@ -271,16 +282,17 @@ const useReplicationControllersColumns = () => { title: '', id: tableColumnInfo[6].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; const ReplicationControllersList = ({ data, loaded, ...props }) => { - const columns = useReplicationControllersColumns(); + const { columns, resetAllColumnWidths } = useReplicationControllersColumns(); return ( }> @@ -292,6 +304,8 @@ const ReplicationControllersList = ({ data, loaded, ...props }) => { columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); From 04d3ca03cf7e81e874eed5c6dfdeda8b90ac163b Mon Sep 17 00:00:00 2001 From: Vikram Raj Date: Wed, 18 Mar 2026 20:20:58 +0530 Subject: [PATCH 9/9] Fix labels column width --- frontend/public/components/hpa.tsx | 5 +++-- frontend/public/components/job.tsx | 5 +++-- frontend/public/components/replicaset.jsx | 7 +++++-- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/public/components/hpa.tsx b/frontend/public/components/hpa.tsx index 10aadfd7c74..7d321bb483b 100644 --- a/frontend/public/components/hpa.tsx +++ b/frontend/public/components/hpa.tsx @@ -326,7 +326,7 @@ const useHorizontalPodAutoscalersColumns = (): { resetAllColumnWidths: () => void; } => { const { t } = useTranslation(); - const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings( + const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings( HorizontalPodAutoscalerModel, ); @@ -358,6 +358,7 @@ const useHorizontalPodAutoscalersColumns = (): { resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', + style: { width: `${getWidth(tableColumnInfo[2].id) ?? 200}px` }, }, }, { @@ -395,7 +396,7 @@ const useHorizontalPodAutoscalersColumns = (): { }, }, ]; - }, [t, getResizableProps]); + }, [t, getResizableProps, getWidth]); return { columns, resetAllColumnWidths }; }; diff --git a/frontend/public/components/job.tsx b/frontend/public/components/job.tsx index f3282163138..05297027dcf 100644 --- a/frontend/public/components/job.tsx +++ b/frontend/public/components/job.tsx @@ -244,7 +244,7 @@ const useJobsColumns = (): { resetAllColumnWidths: () => void; } => { const { t } = useTranslation(); - const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(JobModel); + const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(JobModel); const columns = useMemo(() => { return [ @@ -274,6 +274,7 @@ const useJobsColumns = (): { resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', + style: { width: `${getWidth(tableColumnInfo[2].id) ?? 200}px` }, }, }, { @@ -313,7 +314,7 @@ const useJobsColumns = (): { }, }, ]; - }, [t, getResizableProps]); + }, [t, getResizableProps, getWidth]); return { columns, resetAllColumnWidths }; }; diff --git a/frontend/public/components/replicaset.jsx b/frontend/public/components/replicaset.jsx index 29249c70a6f..03433524e0d 100644 --- a/frontend/public/components/replicaset.jsx +++ b/frontend/public/components/replicaset.jsx @@ -201,7 +201,9 @@ const getDataViewRows = (data, columns) => { const useReplicaSetsColumns = () => { const { t } = useTranslation(); - const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(ReplicaSetModel); + const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings( + ReplicaSetModel, + ); const columns = useMemo(() => { return [ @@ -240,6 +242,7 @@ const useReplicaSetsColumns = () => { resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', + style: { width: `${getWidth(tableColumnInfo[3].id) ?? 200}px` }, }, }, { @@ -268,7 +271,7 @@ const useReplicaSetsColumns = () => { }, }, ]; - }, [t, getResizableProps]); + }, [t, getResizableProps, getWidth]); return { columns, resetAllColumnWidths }; };