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

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/column-helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+export const columnHelper = createColumnHelper<NodeViewModel>();

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/name.tsx

@@ -0,0 +1,38 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+import { Link } from '@@/Link';
+
+import { isTableMeta } from '../types';
+
+import { columnHelper } from './column-helper';
+
+export const name = columnHelper.accessor('Hostname', {
+  header: 'Name',
+  cell: Cell,
+});
+
+function Cell({
+  getValue,
+  row: { original: item },
+  table: {
+    options: { meta },
+  },
+}: CellContext<NodeViewModel, NodeViewModel['Hostname']>) {
+  if (!isTableMeta(meta)) {
+    throw new Error('Invalid table meta');
+  }
+
+  const value = getValue();
+
+  if (!meta.haveAccessToNode) {
+    return <>{value}</>;
+  }
+
+  return (
+    <Link to="docker.nodes.node" params={{ id: item.Id }}>
+      {value}
+    </Link>
+  );
+}

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

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