diff --git a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx index 620fb2f89b3..0cd4ec480aa 100644 --- a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx +++ b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx @@ -264,3 +264,15 @@ export const actionsCellProps = { hasLeftBorder: true, isActionCell: true, }; + +/** + * Returns the style prop for a Labels column so it can be shared across tables. + * @param width - Persisted or current width in pixels (e.g. from getWidth(columnId)) + * @param defaultWidth - Default width when no width is provided (default 200) + * @returns Style object for the column's props.style + */ +export const getLabelsColumnWidthStyleProp = (width: number | undefined, defaultWidth = 200) => ({ + style: { + width: `${width ?? defaultWidth}px`, + }, +}); diff --git a/frontend/public/components/daemon-set.tsx b/frontend/public/components/daemon-set.tsx index 30a334b92ed..5e48b13bff8 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 3f286fb6b88..0656190b5a3 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 6235fa45296..27e5b30aaf3 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/pod-list.tsx b/frontend/public/components/pod-list.tsx index ba68cc855e3..b95b61f5ff4 100644 --- a/frontend/public/components/pod-list.tsx +++ b/frontend/public/components/pod-list.tsx @@ -1,6 +1,7 @@ import { actionsCellProps, ConsoleDataView, + getLabelsColumnWidthStyleProp, getNameCellProps, initialFiltersDefault, nameCellProps, @@ -118,7 +119,7 @@ const usePodsColumns = ( showNodes: boolean, ): { columns: TableColumn[]; resetAllColumnWidths: () => void } => { const { t } = useTranslation(); - const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(PodModel); + const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(PodModel); const columns = useMemo(() => { return [ @@ -224,6 +225,7 @@ const usePodsColumns = ( resizableProps: getResizableProps(tableColumnInfo[10].id), props: { modifier: 'nowrap', + ...getLabelsColumnWidthStyleProp(getWidth(tableColumnInfo[3].id)), }, additional: true, }, @@ -254,7 +256,7 @@ const usePodsColumns = ( }, }, ]; - }, [t, showNodes, getResizableProps]); + }, [t, showNodes, getResizableProps, getWidth]); return { columns, resetAllColumnWidths }; }; diff --git a/frontend/public/components/stateful-set.tsx b/frontend/public/components/stateful-set.tsx index 8c220fd254e..371ade57698 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 2a6ce2531ec..34bc4bcf931 100644 --- a/frontend/public/components/workload-table.tsx +++ b/frontend/public/components/workload-table.tsx @@ -1,14 +1,16 @@ import type { FC } from 'react'; import { actionsCellProps, - cellIsStickyProps, + getLabelsColumnWidthStyleProp, 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 +161,21 @@ export const getWorkloadDataViewRows = ( }); }; -export const useWorkloadColumns = (): TableColumn[] => { +export const useWorkloadColumns = ( + model: K8sModel, +): { columns: TableColumn[]; resetAllColumnWidths: () => void } => { const { t } = useTranslation(); + const { getResizableProps, getWidth, 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 +183,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 +192,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 +201,32 @@ 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, + ...getLabelsColumnWidthStyleProp(getWidth(tableColumnInfo[3].id)), }, }, { 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, getWidth]); + + return { columns, resetAllColumnWidths }; }; type ReplicasCountProps = {