refactor(edge/jobs): migrate results table to react [EE-4679] (#10663)

app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx

@@ -0,0 +1,66 @@
+import { List } from 'lucide-react';
+import { useEffect } from 'react';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { Datatable } from '@@/datatables';
+import { useTableState } from '@@/datatables/useTableState';
+import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { useRepeater } from '@@/datatables/useRepeater';
+
+import { LogsStatus } from '../../types';
+
+import { DecoratedJobResult } from './types';
+import { columns } from './columns';
+import { createStore } from './datatable-store';
+
+const tableKey = 'edge-job-results';
+const store = createStore(tableKey);
+
+export function ResultsDatatable({
+  dataset,
+  onCollectLogs,
+  onClearLogs,
+  onDownloadLogs,
+  onRefresh,
+}: {
+  dataset: Array<DecoratedJobResult>;
+
+  onCollectLogs(envId: EnvironmentId): void;
+  onDownloadLogs(envId: EnvironmentId): void;
+  onClearLogs(envId: EnvironmentId): void;
+  onRefresh(): void;
+}) {
+  const anyCollecting = dataset.some(
+    (r) => r.LogsStatus === LogsStatus.Pending
+  );
+  const tableState = useTableState(store, tableKey);
+
+  const { setAutoRefreshRate } = tableState;
+
+  useEffect(() => {
+    setAutoRefreshRate(anyCollecting ? 5 : 0);
+  }, [anyCollecting, setAutoRefreshRate]);
+
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+  return (
+    <Datatable
+      disableSelect
+      columns={columns}
+      dataset={dataset}
+      title="Results"
+      titleIcon={List}
+      settingsManager={tableState}
+      extendTableOptions={withMeta({
+        table: 'edge-job-results',
+        collectLogs: handleCollectLogs,
+        downloadLogs: onDownloadLogs,
+        clearLogs: onClearLogs,
+      })}
+    />
+  );
+
+  function handleCollectLogs(envId: EnvironmentId) {
+    onCollectLogs(envId);
+  }
+}

app/react/edge/edge-jobs/ItemView/ResultsDatatable/columns.tsx

@@ -0,0 +1,60 @@
+import { CellContext, createColumnHelper } from '@tanstack/react-table';
+
+import { Button } from '@@/buttons';
+
+import { LogsStatus } from '../../types';
+
+import { DecoratedJobResult, getTableMeta } from './types';
+
+const columnHelper = createColumnHelper<DecoratedJobResult>();
+
+export const columns = [
+  columnHelper.accessor('Endpoint.Name', {
+    header: 'Environment',
+    meta: {
+      className: 'w-1/2',
+    },
+  }),
+  columnHelper.display({
+    header: 'Actions',
+    cell: ActionsCell,
+    meta: {
+      className: 'w-1/2',
+    },
+  }),
+];
+
+function ActionsCell({
+  row: { original: item },
+  table,
+}: CellContext<DecoratedJobResult, unknown>) {
+  const tableMeta = getTableMeta(table.options.meta);
+
+  switch (item.LogsStatus) {
+    case LogsStatus.Pending:
+      return (
+        <>
+          Logs marked for collection, please wait until the logs are available.
+        </>
+      );
+
+    case LogsStatus.Collected:
+      return (
+        <>
+          <Button onClick={() => tableMeta.downloadLogs(item.EndpointId)}>
+            Download logs
+          </Button>
+          <Button onClick={() => tableMeta.clearLogs(item.EndpointId)}>
+            Clear logs
+          </Button>
+        </>
+      );
+    case LogsStatus.Idle:
+    default:
+      return (
+        <Button onClick={() => tableMeta.collectLogs(item.EndpointId)}>
+          Retrieve logs
+        </Button>
+      );
+  }
+}

app/react/edge/edge-jobs/ItemView/ResultsDatatable/datatable-store.ts

@@ -0,0 +1,14 @@
+import {
+  refreshableSettings,
+  createPersistedStore,
+  BasicTableSettings,
+  RefreshableTableSettings,
+} from '@@/datatables/types';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+export function createStore(storageKey: string) {
+  return createPersistedStore<TableSettings>(storageKey, undefined, (set) => ({
+    ...refreshableSettings(set),
+  }));
+}

app/react/edge/edge-jobs/ItemView/ResultsDatatable/types.ts

@@ -0,0 +1,34 @@
+import {
+  Environment,
+  EnvironmentId,
+} from '@/react/portainer/environments/types';
+
+import { JobResult } from '../../types';
+
+export interface DecoratedJobResult extends JobResult {
+  Endpoint: Environment;
+}
+
+interface TableMeta {
+  table: 'edge-job-results';
+  collectLogs(envId: EnvironmentId): void;
+  downloadLogs(envId: EnvironmentId): void;
+  clearLogs(envId: EnvironmentId): void;
+}
+
+function isTableMeta(meta: unknown): meta is TableMeta {
+  return (
+    !!meta &&
+    typeof meta === 'object' &&
+    'table' in meta &&
+    meta.table === 'edge-job-results'
+  );
+}
+
+export function getTableMeta(meta: unknown): TableMeta {
+  if (!isTableMeta(meta)) {
+    throw new Error('missing correct table meta');
+  }
+
+  return meta;
+}

app/react/edge/edge-jobs/types.ts

@@ -14,7 +14,7 @@ export interface EdgeJob {
   GroupLogsCollection: Record<EnvironmentId, EndpointMeta>;
 }
 
-enum LogsStatus {
+export enum LogsStatus {
   Idle = 1,
   Pending = 2,
   Collected = 3,
@@ -24,3 +24,9 @@ interface EndpointMeta {
   LogsStatus: LogsStatus;
   CollectLogs: boolean;
 }
+
+export interface JobResult {
+  Id: string;
+  EndpointId: EnvironmentId;
+  LogsStatus: LogsStatus;
+}