CONSOLE-4982: add resizable column feature to Compute tables

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,23 +163,29 @@ const nodeColumnInfo = Object.freeze({
 
 const kind = 'Node';
 
-const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
+const useNodesColumns = (
+  vmsEnabled: boolean,
+): { columns: TableColumn<NodeRowItem>[]; 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',
         },
       },
       {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
               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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         title: t('console-app~MachineConfigPool'),
         id: nodeColumnInfo.machineConfigPool.id,
         sort: 'machineConfigPool.metadata.name',
+        resizableProps: getResizableProps(nodeColumnInfo.machineConfigPool.id),
         props: {
           modifier: 'nowrap',
         },
@@ -302,16 +321,17 @@ const useNodesColumns = (vmsEnabled: boolean): TableColumn<NodeRowItem>[] => {
         title: t('console-app~Labels'),
         id: nodeColumnInfo.labels.id,
         sort: 'metadata.labels',
+        resizableProps: getResizableProps(nodeColumnInfo.labels.id),
         props: {
           modifier: 'nowrap',
-          width: 15,
         },
         additional: true,
       },
       {
         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<NodeRowItem>[] => {
         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<NodeRowItem>[] => {
         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<NodeListProps> = ({
   selectedColumns,
 }) => {
   const { t } = useTranslation();
-  const columns = useNodesColumns(vmsEnabled);
+  const { columns, resetAllColumnWidths } = useNodesColumns(vmsEnabled);
   const nodeMetrics = useConsoleSelector<NodeMetrics>(({ UI }) => {
     return UI.getIn(['metrics', 'node']);
   });
@@ -815,6 +837,8 @@ const NodeList: FC<NodeListProps> = ({
         hideNameLabelFilters={hideNameLabelFilters}
         hideLabelFilter={hideLabelFilter}
         hideColumnManagement={hideColumnManagement}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );

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,23 +203,32 @@ const tableColumnInfo = [
   { id: '' },
 ];
 
-const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetKind>[] => {
+const useControlPlaneMachineSetColumns = (): {
+  columns: TableColumn<ControlPlaneMachineSetKind>[];
+  resetAllColumnWidths: () => void;
+} => {
   const { t } = useTranslation();
+  const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(
+    ControlPlaneMachineSetModel,
+  );
+
   const columns: TableColumn<ControlPlaneMachineSetKind>[] = 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',
         },
@@ -227,6 +237,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: t('public~Machines'),
         id: tableColumnInfo[2].id,
         sort: 'status.readyReplicas',
+        resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
           modifier: 'nowrap',
         },
@@ -235,6 +246,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: t('public~Strategy'),
         id: tableColumnInfo[3].id,
         sort: 'spec.strategy.type',
+        resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
           modifier: 'nowrap',
         },
@@ -243,6 +255,7 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: t('public~State'),
         id: tableColumnInfo[4].id,
         sort: 'spec.state',
+        resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
           modifier: 'nowrap',
         },
@@ -251,12 +264,13 @@ const useControlPlaneMachineSetColumns = (): TableColumn<ControlPlaneMachineSetK
         title: '',
         id: tableColumnInfo[5].id,
         props: {
-          ...cellIsStickyProps,
+          ...actionsCellProps,
         },
       },
     ];
-  }, [t]);
-  return columns;
+  }, [t, getResizableProps]);
+
+  return { columns, resetAllColumnWidths };
 };
 
 export const MachinesCell: FC<MachinesCellProps> = ({ desiredReplicas, readyReplicas, path }) => {
@@ -325,7 +339,7 @@ const ControlPlaneMachineSetList: FC<ControlPlaneMachineSetListProps> = ({
   loadError,
   ...props
 }) => {
-  const columns = useControlPlaneMachineSetColumns();
+  const { columns, resetAllColumnWidths } = useControlPlaneMachineSetColumns();
 
   return (
     <Suspense fallback={<LoadingBox />}>
@@ -338,6 +352,8 @@ const ControlPlaneMachineSetList: FC<ControlPlaneMachineSetListProps> = ({
         columns={columns}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
+        isResizable
+        resetAllColumnWidths={resetAllColumnWidths}
       />
     </Suspense>
   );