Skip to content

CONSOLE-4988: add resizable column feature to workload table #16144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vikram-raj wants to merge 1 commit into
base: main
Choose a base branch
from
+32 −13
Open

CONSOLE-4988: add resizable column feature to workload table #16144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion frontend/public/components/daemon-set.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const EnvironmentTab: FC<EnvironmentTabProps> = (props) => (
);

export const DaemonSetsList: FC<DaemonSetsListProps> = ({ data, loaded, ...props }) => {
const columns = useWorkloadColumns<DaemonSetKind>();
const { columns, resetAllColumnWidths } = useWorkloadColumns<DaemonSetKind>(DaemonSetModel);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -126,6 +126,8 @@ export const DaemonSetsList: FC<DaemonSetsListProps> = ({ data, loaded, ...props
columns={columns}
getDataViewRows={getDataViewRows}
hideColumnManagement={true}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
6 changes: 5 additions & 1 deletion frontend/public/components/deployment-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,9 @@ export const DeploymentConfigsList: FC<DeploymentConfigsListProps> = ({
loaded,
...props
}) => {
const columns = useWorkloadColumns<DeploymentConfigKind>();
const { columns, resetAllColumnWidths } = useWorkloadColumns<DeploymentConfigKind>(
DeploymentConfigModel,
);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -318,6 +320,8 @@ export const DeploymentConfigsList: FC<DeploymentConfigsListProps> = ({
columns={columns}
getDataViewRows={getDataViewRows}
hideColumnManagement={true}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
4 changes: 3 additions & 1 deletion frontend/public/components/deployment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ const getDataViewRows: GetDataViewRows<DeploymentKind> = (data, columns) => {
};

export const DeploymentsList: FC<DeploymentsListProps> = ({ data, loaded, ...props }) => {
const columns = useWorkloadColumns<DeploymentKind>();
const { columns, resetAllColumnWidths } = useWorkloadColumns<DeploymentKind>(DeploymentModel);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -237,6 +237,8 @@ export const DeploymentsList: FC<DeploymentsListProps> = ({ data, loaded, ...pro
loaded={loaded}
columns={columns}
getDataViewRows={getDataViewRows}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
4 changes: 3 additions & 1 deletion frontend/public/components/stateful-set.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const EnvironmentTab: FC<EnvironmentTabProps> = (props) => (
);

const StatefulSetsList: FC<StatefulSetsListProps> = ({ data, loaded, ...props }) => {
const columns = useWorkloadColumns();
const { columns, resetAllColumnWidths } = useWorkloadColumns<K8sResourceKind>(StatefulSetModel);

return (
<Suspense fallback={<LoadingBox />}>
Expand All @@ -88,6 +88,8 @@ const StatefulSetsList: FC<StatefulSetsListProps> = ({ data, loaded, ...props })
getWorkloadDataViewRows(dvData, dvColumns, StatefulSetModel)
}
hideColumnManagement={true}
isResizable
resetAllColumnWidths={resetAllColumnWidths}
/>
</Suspense>
);
Expand Down
27 changes: 18 additions & 9 deletions frontend/public/components/workload-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, {
Expand Down Expand Up @@ -159,23 +160,29 @@ export const getWorkloadDataViewRows = <T extends K8sResourceKind>(
});
};

export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[] => {
export const useWorkloadColumns = <T extends K8sResourceKind>(
model: K8sModel,
): { columns: TableColumn<T>[]; 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',
},
},
{
title: t('public~Namespace'),
id: tableColumnInfo[1].id,
sort: 'metadata.namespace',
resizableProps: getResizableProps(tableColumnInfo[1].id),
props: {
modifier: 'nowrap',
},
Expand All @@ -184,6 +191,7 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
title: t('public~Status'),
id: tableColumnInfo[2].id,
sort: 'status.replicas',
resizableProps: getResizableProps(tableColumnInfo[2].id),
props: {
modifier: 'nowrap',
},
Expand All @@ -192,30 +200,31 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
title: t('public~Labels'),
id: tableColumnInfo[3].id,
sort: 'metadata.labels',
resizableProps: getResizableProps(tableColumnInfo[3].id),
props: {
modifier: 'nowrap',
width: 20,
Copy link
Member

@rhamilto rhamilto Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this value means the labels take up as much space as possible (which is what the value was solving for) and resizing the labels column is nearly impossible.

Screen.Recording.2026-03-13.at.1.25.21.PM.mov

@nicolethoen, any ideas?

},
},
{
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 = {
Expand Down