refactor(docker/services): migrate service tasks to react [EE-4676] (#10328)

app/react/docker/services/ItemView/TasksDatatable/TasksDatatable.tsx

@@ -0,0 +1,37 @@
+import { List } from 'lucide-react';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { withMeta } from '@@/datatables/extend-options/withMeta';
+
+import { useColumns } from './columns';
+import { DecoratedTask } from './types';
+
+const storageKey = 'docker-service-tasks';
+const store = createPersistedStore(storageKey);
+
+export function TasksDatatable({
+  dataset,
+  isSlotColumnVisible,
+  serviceName,
+}: {
+  dataset: DecoratedTask[];
+  isSlotColumnVisible: boolean;
+  serviceName: string;
+}) {
+  const tableState = useTableState(store, storageKey);
+  const columns = useColumns(isSlotColumnVisible);
+
+  return (
+    <Datatable
+      title="Tasks"
+      titleIcon={List}
+      settingsManager={tableState}
+      columns={columns}
+      dataset={dataset}
+      emptyContentLabel="No task available."
+      extendTableOptions={withMeta({ table: 'tasks', serviceName })}
+    />
+  );
+}

app/react/docker/services/ItemView/TasksDatatable/columns/actions.tsx

@@ -0,0 +1,45 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { isAgentEnvironment } from '@/react/portainer/environments/utils';
+import { QuickActionsState } from '@/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions';
+import { TaskTableQuickActions } from '@/react/docker/services/common/TaskTableQuickActions';
+
+import { DecoratedTask } from '../types';
+
+import { columnHelper } from './helper';
+
+export const actions = columnHelper.display({
+  header: 'Actions',
+  cell: Cell,
+});
+
+function Cell({
+  row: { original: item },
+}: CellContext<DecoratedTask, unknown>) {
+  const environmentQuery = useCurrentEnvironment();
+
+  if (!environmentQuery.data) {
+    return null;
+  }
+  const state: QuickActionsState = {
+    showQuickActionAttach: false,
+    showQuickActionExec: true,
+    showQuickActionInspect: true,
+    showQuickActionLogs: true,
+    showQuickActionStats: true,
+  };
+  const isAgent = isAgentEnvironment(environmentQuery.data.Type);
+
+  return isAgent && item.Container ? (
+    <ContainerQuickActions
+      containerId={item.Container.Id}
+      nodeName={item.Container.NodeName}
+      status={item.Container.Status}
+      state={state}
+    />
+  ) : (
+    <TaskTableQuickActions taskId={item.Id} />
+  );
+}

app/react/docker/services/ItemView/TasksDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { DecoratedTask } from '../types';
+
+export const columnHelper = createColumnHelper<DecoratedTask>();

app/react/docker/services/ItemView/TasksDatatable/columns/index.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import _ from 'lodash';
+
+import { actions } from './actions';
+import { node } from './node';
+import { slot } from './slot';
+import { status } from './status';
+import { task } from './task';
+import { updated } from './updated';
+
+export function useColumns(isSlotColumnsVisible = true) {
+  return useMemo(
+    () =>
+      _.compact([
+        status,
+        task,
+        actions,
+        isSlotColumnsVisible && slot,
+        node,
+        updated,
+      ]),
+    [isSlotColumnsVisible]
+  );
+}

app/react/docker/services/ItemView/TasksDatatable/columns/node.tsx

@@ -0,0 +1,32 @@
+import { Node } from 'docker-types/generated/1.41';
+import { CellContext } from '@tanstack/react-table';
+
+import { useNodes } from '@/react/docker/proxy/queries/nodes/useNodes';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { DecoratedTask } from '../types';
+
+import { columnHelper } from './helper';
+
+export const node = columnHelper.accessor('NodeId', {
+  header: 'Node',
+  cell: Cell,
+});
+
+function Cell({ getValue }: CellContext<DecoratedTask, string>) {
+  const environmentId = useEnvironmentId();
+
+  const nodesQuery = useNodes(environmentId);
+
+  const nodes = nodesQuery.data || [];
+  return getNodeName(getValue(), nodes);
+}
+
+function getNodeName(nodeId: string, nodes: Array<Node>) {
+  const node = nodes.find((node) => node.ID === nodeId);
+  if (node?.Description?.Hostname) {
+    return node.Description.Hostname;
+  }
+
+  return '';
+}

app/react/docker/services/ItemView/TasksDatatable/columns/slot.tsx

@@ -0,0 +1,5 @@
+import { columnHelper } from './helper';
+
+export const slot = columnHelper.accessor((item) => item.Slot || '-', {
+  header: 'Slot',
+});

app/react/docker/services/ItemView/TasksDatatable/columns/status.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+
+import { taskStatusBadge } from '@/docker/filters/utils';
+
+import { multiple } from '@@/datatables/filter-types';
+import { filterHOC } from '@@/datatables/Filter';
+
+import { columnHelper } from './helper';
+
+export const status = columnHelper.accessor((item) => item.Status?.State, {
+  header: 'Status',
+  enableColumnFilter: true,
+  filterFn: multiple,
+  meta: {
+    filter: filterHOC('Filter by state'),
+    width: 100,
+  },
+  cell({ getValue }) {
+    const value = getValue();
+
+    return (
+      <span className={clsx('label', `label-${taskStatusBadge(value)}`)}>
+        {value}
+      </span>
+    );
+  },
+});

app/react/docker/services/ItemView/TasksDatatable/columns/task.tsx

@@ -0,0 +1,51 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { isAgentEnvironment } from '@/react/portainer/environments/utils';
+
+import { Link } from '@@/Link';
+
+import { DecoratedTask } from '../types';
+import { getTableMeta } from '../meta';
+
+import { columnHelper } from './helper';
+
+export const task = columnHelper.accessor('Id', {
+  header: 'Id',
+  cell: Cell,
+});
+
+function Cell({
+  getValue,
+  row: { original: item },
+  table: {
+    options: { meta },
+  },
+}: CellContext<DecoratedTask, string>) {
+  const environmentQuery = useCurrentEnvironment();
+
+  if (!environmentQuery.data) {
+    return null;
+  }
+
+  const { serviceName } = getTableMeta(meta);
+
+  const value = getValue();
+  const isAgent = isAgentEnvironment(environmentQuery.data.Type);
+
+  const name = `${serviceName}${item.Slot ? `.${item.Slot}` : ''}.${value}`;
+
+  return isAgent && item.Container ? (
+    <Link
+      to="docker.containers.container"
+      params={{ id: item.Container.Id, nodeName: item.Container.NodeName }}
+      className="monospaced"
+    >
+      {name}
+    </Link>
+  ) : (
+    <Link to="docker.tasks.task" params={{ id: value }} className="monospaced">
+      {name}
+    </Link>
+  );
+}

app/react/docker/services/ItemView/TasksDatatable/columns/updated.tsx

@@ -0,0 +1,8 @@
+import { isoDate } from '@/portainer/filters/filters';
+
+import { columnHelper } from './helper';
+
+export const updated = columnHelper.accessor('Updated', {
+  header: 'Last Update',
+  cell: ({ getValue }) => isoDate(getValue()),
+});

app/react/docker/services/ItemView/TasksDatatable/index.ts

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

app/react/docker/services/ItemView/TasksDatatable/meta.ts

@@ -0,0 +1,17 @@
+type TableMeta = {
+  serviceName: string;
+  table: 'tasks';
+};
+
+export function getTableMeta(meta: unknown): TableMeta {
+  return isTableMeta(meta) ? meta : { table: 'tasks', serviceName: '' };
+}
+
+function isTableMeta(meta: unknown): meta is TableMeta {
+  return (
+    !!meta &&
+    typeof meta === 'object' &&
+    'table' in meta &&
+    meta.table === 'tasks'
+  );
+}

app/react/docker/services/ItemView/TasksDatatable/types.ts

@@ -0,0 +1,6 @@
+import { TaskViewModel } from '@/docker/models/task';
+import { DockerContainer } from '@/react/docker/containers/types';
+
+export type DecoratedTask = TaskViewModel & {
+  Container?: DockerContainer;
+};