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

@@ -24,7 +24,7 @@ function Cell({
     return null;
   }
   const state: QuickActionsState = {
-    showQuickActionAttach: true,
+    showQuickActionAttach: false,
     showQuickActionExec: true,
     showQuickActionInspect: true,
     showQuickActionLogs: true,

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/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/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/ListView/ServicesDatatable/ServicesDatatable.tsx

@@ -19,6 +19,8 @@ import { getColumnVisibilityState } from '@@/datatables/ColumnVisibilityMenu';
 import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 import { withGlobalFilter } from '@@/datatables/extend-options/withGlobalFilter';
 
+import { DecoratedTask } from '../../ItemView/TasksDatatable/types';
+
 import { useColumns } from './columns';
 import { TasksDatatable } from './TasksDatatable';
 import { TableActions } from './TableActions';
@@ -72,7 +74,10 @@ export function ServicesDatatable({
         <tr>
           <td />
           <td colSpan={Number.MAX_SAFE_INTEGER}>
-            <TasksDatatable dataset={item.Tasks} search={tableState.search} />
+            <TasksDatatable
+              dataset={item.Tasks as Array<DecoratedTask>}
+              search={tableState.search}
+            />
           </td>
         </tr>
       )}

app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx

@@ -1,7 +1,15 @@
+import { DecoratedTask } from '@/react/docker/services/ItemView/TasksDatatable/types';
+import { status } from '@/react/docker/services/ItemView/TasksDatatable/columns/status';
+import { actions } from '@/react/docker/services/ItemView/TasksDatatable/columns/actions';
+import { slot } from '@/react/docker/services/ItemView/TasksDatatable/columns/slot';
+import { node } from '@/react/docker/services/ItemView/TasksDatatable/columns/node';
+import { updated } from '@/react/docker/services/ItemView/TasksDatatable/columns/updated';
+
 import { NestedDatatable } from '@@/datatables/NestedDatatable';
 
-import { columns } from './columns';
-import { DecoratedTask } from './types';
+import { task } from './task-column';
+
+const columns = [status, task, actions, slot, node, updated];
 
 export function TasksDatatable({
   dataset,

app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/columns/index.ts

@@ -1,19 +0,0 @@
-import { isoDate } from '@/portainer/filters/filters';
-
-import { actions } from './actions';
-import { columnHelper } from './helper';
-import { node } from './node';
-import { status } from './status';
-import { task } from './task';
-
-export const columns = [
-  status,
-  task,
-  actions,
-  columnHelper.accessor((item) => item.Slot || '-', { header: 'Slot' }),
-  node,
-  columnHelper.accessor('Updated', {
-    header: 'Last Update',
-    cell: ({ getValue }) => isoDate(getValue()),
-  }),
-];

app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/task-column.tsx

@@ -2,13 +2,11 @@ import { CellContext } from '@tanstack/react-table';
 
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
 import { isAgentEnvironment } from '@/react/portainer/environments/utils';
+import { DecoratedTask } from '@/react/docker/services/ItemView/TasksDatatable/types';
+import { columnHelper } from '@/react/docker/services/ItemView/TasksDatatable/columns/helper';
 
 import { Link } from '@@/Link';
 
-import { DecoratedTask } from '../types';
-
-import { columnHelper } from './helper';
-
 export const task = columnHelper.accessor('Id', {
   header: 'Task',
   cell: Cell,