diff --git a/frontend/public/components/daemon-set.tsx b/frontend/public/components/daemon-set.tsx index 30a334b92e..5e48b13bff 100644 --- a/frontend/public/components/daemon-set.tsx +++ b/frontend/public/components/daemon-set.tsx @@ -114,7 +114,7 @@ const EnvironmentTab: FC = (props) => ( ); export const DaemonSetsList: FC = ({ data, loaded, ...props }) => { - const columns = useWorkloadColumns(); + const { columns, resetAllColumnWidths } = useWorkloadColumns(DaemonSetModel); return ( }> @@ -126,6 +126,8 @@ export const DaemonSetsList: FC = ({ data, loaded, ...props columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); diff --git a/frontend/public/components/deployment-config.tsx b/frontend/public/components/deployment-config.tsx index 3f286fb6b8..0656190b5a 100644 --- a/frontend/public/components/deployment-config.tsx +++ b/frontend/public/components/deployment-config.tsx @@ -306,7 +306,9 @@ export const DeploymentConfigsList: FC = ({ loaded, ...props }) => { - const columns = useWorkloadColumns(); + const { columns, resetAllColumnWidths } = useWorkloadColumns( + DeploymentConfigModel, + ); return ( }> @@ -318,6 +320,8 @@ export const DeploymentConfigsList: FC = ({ columns={columns} getDataViewRows={getDataViewRows} hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); diff --git a/frontend/public/components/deployment.tsx b/frontend/public/components/deployment.tsx index 6235fa4529..27e5b30aaf 100644 --- a/frontend/public/components/deployment.tsx +++ b/frontend/public/components/deployment.tsx @@ -226,7 +226,7 @@ const getDataViewRows: GetDataViewRows = (data, columns) => { }; export const DeploymentsList: FC = ({ data, loaded, ...props }) => { - const columns = useWorkloadColumns(); + const { columns, resetAllColumnWidths } = useWorkloadColumns(DeploymentModel); return ( }> @@ -237,6 +237,8 @@ export const DeploymentsList: FC = ({ data, loaded, ...pro loaded={loaded} columns={columns} getDataViewRows={getDataViewRows} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); diff --git a/frontend/public/components/stateful-set.tsx b/frontend/public/components/stateful-set.tsx index 8c220fd254..371ade5769 100644 --- a/frontend/public/components/stateful-set.tsx +++ b/frontend/public/components/stateful-set.tsx @@ -74,7 +74,7 @@ const EnvironmentTab: FC = (props) => ( ); const StatefulSetsList: FC = ({ data, loaded, ...props }) => { - const columns = useWorkloadColumns(); + const { columns, resetAllColumnWidths } = useWorkloadColumns(StatefulSetModel); return ( }> @@ -88,6 +88,8 @@ const StatefulSetsList: FC = ({ data, loaded, ...props }) getWorkloadDataViewRows(dvData, dvColumns, StatefulSetModel) } hideColumnManagement={true} + isResizable + resetAllColumnWidths={resetAllColumnWidths} /> ); diff --git a/frontend/public/components/workload-table.tsx b/frontend/public/components/workload-table.tsx index 2a6ce2531e..c0096f3a10 100644 --- a/frontend/public/components/workload-table.tsx +++ b/frontend/public/components/workload-table.tsx @@ -1,14 +1,15 @@ import type { FC } from 'react'; import { actionsCellProps, - cellIsStickyProps, getNameCellProps, + nameCellProps, } from '@console/app/src/components/data-view/ConsoleDataView'; import { ConsoleDataViewColumn, ConsoleDataViewRow, } from '@console/app/src/components/data-view/types'; -import { K8sModel } from '@console/dynamic-plugin-sdk/src/api/common-types'; +import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps'; +import type { K8sModel } from '@console/dynamic-plugin-sdk/src/api/common-types'; import { RowProps, TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types'; import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; import LazyActionMenu, { @@ -159,16 +160,21 @@ export const getWorkloadDataViewRows = ( }); }; -export const useWorkloadColumns = (): TableColumn[] => { +export const useWorkloadColumns = ( + model: K8sModel, +): { columns: TableColumn[]; resetAllColumnWidths: () => void } => { const { t } = useTranslation(); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(model); + 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', }, }, @@ -176,6 +182,7 @@ export const useWorkloadColumns = (): TableColumn[ title: t('public~Namespace'), id: tableColumnInfo[1].id, sort: 'metadata.namespace', + resizableProps: getResizableProps(tableColumnInfo[1].id), props: { modifier: 'nowrap', }, @@ -184,6 +191,7 @@ export const useWorkloadColumns = (): TableColumn[ title: t('public~Status'), id: tableColumnInfo[2].id, sort: 'status.replicas', + resizableProps: getResizableProps(tableColumnInfo[2].id), props: { modifier: 'nowrap', }, @@ -192,30 +200,31 @@ export const useWorkloadColumns = (): TableColumn[ title: t('public~Labels'), id: tableColumnInfo[3].id, sort: 'metadata.labels', + resizableProps: getResizableProps(tableColumnInfo[3].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: t('public~Pod selector'), id: tableColumnInfo[4].id, sort: 'spec.selector', + resizableProps: getResizableProps(tableColumnInfo[4].id), props: { modifier: 'nowrap', - width: 20, }, }, { title: '', id: tableColumnInfo[5].id, props: { - ...cellIsStickyProps, + ...actionsCellProps, }, }, ]; - }, [t]); - return columns; + }, [t, getResizableProps]); + + return { columns, resetAllColumnWidths }; }; type ReplicasCountProps = {