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

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>
+  );
+}