refactor(docker/swarm): migrate nodes table to react [EE-4672] (#10184)

app/react/docker/networks/CreateView/MacvlanNodesSelector/MacvlanNodesSelector.tsx

@@ -9,7 +9,7 @@ import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
 import { withControlledSelected } from '@@/datatables/extend-options/withControlledSelected';
 
-import { useColumns } from './columns';
+import { useColumns } from './useColumns';
 
 const tableKey = 'macvlan-nodes-selector';
 const store = createPersistedStore(tableKey);
@@ -41,7 +41,7 @@ export function MacvlanNodesSelector({
       settingsManager={tableState}
       extendTableOptions={mergeOptions(
         withMeta({
-          table: 'macvlan-nodes',
+          table: 'nodes',
           haveAccessToNode,
         }),
         withControlledSelected(

app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/index.ts

@@ -1,20 +0,0 @@
-import _ from 'lodash';
-
-import { columnHelper } from './column-helper';
-import { name } from './name';
-import { status } from './status';
-
-export function useColumns(isIpColumnVisible: boolean) {
-  return _.compact([
-    name,
-    columnHelper.accessor('Role', {}),
-    columnHelper.accessor('EngineVersion', {
-      header: 'Engine',
-    }),
-    isIpColumnVisible &&
-      columnHelper.accessor('Addr', {
-        header: 'IP Address',
-      }),
-    status,
-  ]);
-}

app/react/docker/networks/CreateView/MacvlanNodesSelector/useColumns.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import _ from 'lodash';
+
+import {
+  engine,
+  ip,
+  role,
+  name,
+  status,
+} from '@/react/docker/swarm/SwarmView/NodesDatatable/columns';
+
+export function useColumns(isIpColumnVisible: boolean) {
+  return useMemo(
+    () => _.compact([name, role, engine, isIpColumnVisible && ip, status]),
+    [isIpColumnVisible]
+  );
+}

app/react/docker/swarm/SwarmView/NodesDatatable/NodesDatatable.tsx

@@ -0,0 +1,70 @@
+import { Trello } from 'lucide-react';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import {
+  BasicTableSettings,
+  RefreshableTableSettings,
+  createPersistedStore,
+  refreshableSettings,
+} from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { useRepeater } from '@@/datatables/useRepeater';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { withMeta } from '@@/datatables/extend-options/withMeta';
+
+import { useColumns } from './columns';
+
+const tableKey = 'nodes';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+const store = createPersistedStore<TableSettings>(
+  tableKey,
+  undefined,
+  (set) => ({
+    ...refreshableSettings(set),
+  })
+);
+
+export function NodesDatatable({
+  dataset,
+  isIpColumnVisible,
+  haveAccessToNode,
+  onRefresh,
+}: {
+  dataset?: Array<NodeViewModel>;
+  isIpColumnVisible: boolean;
+  haveAccessToNode: boolean;
+  onRefresh(): Promise<void>;
+}) {
+  const columns = useColumns(isIpColumnVisible);
+  const tableState = useTableState(store, tableKey);
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  return (
+    <Datatable<NodeViewModel>
+      disableSelect
+      title="Nodes"
+      titleIcon={Trello}
+      columns={columns}
+      dataset={dataset || []}
+      isLoading={!dataset}
+      emptyContentLabel="No node available"
+      settingsManager={tableState}
+      extendTableOptions={withMeta({
+        table: 'nodes',
+        haveAccessToNode,
+      })}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <TableSettingsMenuAutoRefresh
+            value={tableState.autoRefreshRate}
+            onChange={(value) => tableState.setAutoRefreshRate(value)}
+          />
+        </TableSettingsMenu>
+      )}
+    />
+  );
+}

app/react/docker/swarm/SwarmView/NodesDatatable/columns/availability.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+import { columnHelper } from './column-helper';
+
+export const availability = columnHelper.accessor('Availability', {
+  header: 'Availability',
+  cell({ getValue }) {
+    const value = getValue();
+    return (
+      <span className={clsx('label', `label-${badgeClass(value)}`)}>
+        {value}
+      </span>
+    );
+  },
+});
+
+export function badgeClass(text: NodeViewModel['Availability']) {
+  if (text === 'pause') {
+    return 'warning';
+  }
+
+  if (text === 'drain') {
+    return 'danger';
+  }
+
+  return 'success';
+}

app/react/docker/swarm/SwarmView/NodesDatatable/columns/index.ts

@@ -0,0 +1,53 @@
+import _ from 'lodash';
+import { useMemo } from 'react';
+
+import { humanize } from '@/portainer/filters/filters';
+
+import { columnHelper } from './column-helper';
+import { name } from './name';
+import { status } from './status';
+import { availability } from './availability';
+
+export { name, status };
+
+export const role = columnHelper.accessor('Role', {});
+
+export const engine = columnHelper.accessor('EngineVersion', {
+  header: 'Engine',
+});
+
+export const ip = columnHelper.accessor('Addr', {
+  header: 'IP Address',
+});
+
+export const cpu = columnHelper.accessor(
+  (item) => (item.CPUs ? item.CPUs / 1000000000 : 0),
+  {
+    header: 'CPU',
+  }
+);
+
+export const memory = columnHelper.accessor('Memory', {
+  header: 'Memory',
+  cell({ getValue }) {
+    const value = getValue();
+    return humanize(value);
+  },
+});
+
+export function useColumns(isIpColumnVisible: boolean) {
+  return useMemo(
+    () =>
+      _.compact([
+        name,
+        role,
+        cpu,
+        memory,
+        engine,
+        isIpColumnVisible && ip,
+        status,
+        availability,
+      ]),
+    [isIpColumnVisible]
+  );
+}

app/react/docker/swarm/SwarmView/NodesDatatable/columns/status.tsx

@@ -5,7 +5,7 @@ import { nodeStatusBadge } from '@/docker/filters/utils';
 import { columnHelper } from './column-helper';
 
 export const status = columnHelper.accessor('Status', {
-  cell: ({ getValue }) => {
+  cell({ getValue }) {
     const value = getValue();
     return (
       <span className={clsx('label', `label-${nodeStatusBadge(value)}`)}>

app/react/docker/swarm/SwarmView/NodesDatatable/index.ts

@@ -0,0 +1 @@
+export { NodesDatatable } from './NodesDatatable';

app/react/docker/swarm/SwarmView/NodesDatatable/types.ts

@@ -3,12 +3,12 @@ import { TableMeta as BaseTableMeta } from '@tanstack/react-table';
 import { NodeViewModel } from '@/docker/models/node';
 
 export type TableMeta = BaseTableMeta<NodeViewModel> & {
-  table: 'macvlan-nodes';
+  table: 'nodes';
   haveAccessToNode: boolean;
 };
 
 export function isTableMeta(
   meta?: BaseTableMeta<NodeViewModel>
 ): meta is TableMeta {
-  return !!meta && meta.table === 'macvlan-nodes';
+  return !!meta && meta.table === 'nodes';
 }