refactor(edge/jobs): migrate view to react [EE-2236] (#10661)

app/react/edge/edge-jobs/ListView/EdgeJobsDatatable.tsx

@@ -0,0 +1,34 @@
+import { Clock } from 'lucide-react';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+
+import { useEdgeJobs } from '../queries/useEdgeJobs';
+
+import { TableActions } from './TableActions';
+import { columns } from './columns';
+
+const tableKey = 'edge-jobs';
+
+const settingsStore = createPersistedStore(tableKey);
+
+export function EdgeJobsDatatable() {
+  const jobsQuery = useEdgeJobs();
+  const tableState = useTableState(settingsStore, tableKey);
+
+  return (
+    <Datatable
+      columns={columns}
+      isLoading={jobsQuery.isLoading}
+      dataset={jobsQuery.data || []}
+      settingsManager={tableState}
+      emptyContentLabel="No Edge jobs available."
+      title="Edge Jobs"
+      titleIcon={Clock}
+      renderTableActions={(selectedItems) => (
+        <TableActions selectedItems={selectedItems} />
+      )}
+    />
+  );
+}

app/react/edge/edge-jobs/ListView/ListView.tsx

@@ -0,0 +1,21 @@
+import { InformationPanel } from '@@/InformationPanel';
+import { PageHeader } from '@@/PageHeader';
+
+import { EdgeJobsDatatable } from './EdgeJobsDatatable';
+
+export function ListView() {
+  return (
+    <>
+      <PageHeader title="Edge Jobs" breadcrumbs="Edge Jobs" reload />
+
+      <InformationPanel title="Information">
+        <p className="small text-muted">
+          Edge Jobs requires Docker Standalone and a cron implementation that
+          reads jobs from <code>/etc/cron.d</code>
+        </p>
+      </InformationPanel>
+
+      <EdgeJobsDatatable />
+    </>
+  );
+}

app/react/edge/edge-jobs/ListView/TableActions.tsx

@@ -0,0 +1,37 @@
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { AddButton } from '@@/buttons';
+import { DeleteButton } from '@@/buttons/DeleteButton';
+
+import { EdgeJob } from '../types';
+
+import { useDeleteEdgeJobsMutation } from './useDeleteEdgeJobsMutation';
+
+export function TableActions({
+  selectedItems,
+}: {
+  selectedItems: Array<EdgeJob>;
+}) {
+  const removeMutation = useDeleteEdgeJobsMutation();
+
+  return (
+    <div className="flex items-center gap-2">
+      <DeleteButton
+        confirmMessage="Do you want to remove the selected Edge Job(s)?"
+        disabled={selectedItems.length === 0}
+        onConfirmed={() => handleRemove(selectedItems)}
+      />
+
+      <AddButton>Add Edge job</AddButton>
+    </div>
+  );
+
+  async function handleRemove(selectedItems: Array<EdgeJob>) {
+    const ids = selectedItems.map((item) => item.Id);
+    removeMutation.mutate(ids, {
+      onSuccess: () => {
+        notifySuccess('Success', 'Edge Job(s) removed');
+      },
+    });
+  }
+}

app/react/edge/edge-jobs/ListView/columns.ts

@@ -0,0 +1,20 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { isoDateFromTimestamp } from '@/portainer/filters/filters';
+
+import { buildNameColumn } from '@@/datatables/buildNameColumn';
+
+import { EdgeJob } from '../types';
+
+const columnHelper = createColumnHelper<EdgeJob>();
+
+export const columns = [
+  buildNameColumn<EdgeJob>('Name', '.job'),
+  columnHelper.accessor('CronExpression', {
+    header: 'Cron Expression',
+  }),
+  columnHelper.accessor('Created', {
+    header: 'Created',
+    cell: ({ getValue }) => isoDateFromTimestamp(getValue()),
+  }),
+];

app/react/edge/edge-jobs/ListView/index.ts

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

app/react/edge/edge-jobs/ListView/useDeleteEdgeJobsMutation.ts

@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import {
+  mutationOptions,
+  withError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+
+import { EdgeJob } from '../types';
+import { buildUrl } from '../queries/build-url';
+import { queryKeys } from '../queries/query-keys';
+
+export function useDeleteEdgeJobsMutation() {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (edgeJobIds: Array<EdgeJob['Id']>) =>
+      promiseSequence(
+        edgeJobIds.map((edgeJobId) => () => deleteEdgeJob(edgeJobId))
+      ),
+    mutationOptions(
+      withError('Unable to delete Edge job(s)'),
+      withInvalidate(queryClient, [queryKeys.base()])
+    )
+  );
+}
+
+async function deleteEdgeJob(id: EdgeJob['Id']) {
+  try {
+    await axios.delete(buildUrl({ id }));
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to delete edge job');
+  }
+}

app/react/edge/edge-jobs/queries/build-url.ts

@@ -0,0 +1,10 @@
+import { EdgeJob } from '../types';
+
+export function buildUrl({
+  action,
+  id,
+}: { id?: EdgeJob['Id']; action?: string } = {}) {
+  const baseUrl = '/edge_jobs';
+  const url = id ? `${baseUrl}/${id}` : baseUrl;
+  return action ? `${url}/${action}` : url;
+}

app/react/edge/edge-jobs/queries/query-keys.ts

@@ -0,0 +1,3 @@
+export const queryKeys = {
+  base: () => ['edge', 'jobs'] as const,
+};

app/react/edge/edge-jobs/queries/useEdgeJobs.ts

@@ -0,0 +1,25 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { EdgeJob } from '../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+async function getEdgeJobs() {
+  try {
+    const { data } = await axios.get<EdgeJob[]>(buildUrl());
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Failed fetching edge jobs');
+  }
+}
+
+export function useEdgeJobs<T = EdgeJob[]>({
+  select,
+}: {
+  select?: (jobs: EdgeJob[]) => T;
+} = {}) {
+  return useQuery(queryKeys.base(), getEdgeJobs, { select });
+}

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

@@ -0,0 +1,26 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export interface EdgeJob {
+  Id: number;
+  Created: number;
+  CronExpression: string;
+  Endpoints: Record<EnvironmentId, EndpointMeta>;
+  EdgeGroups: number[];
+  Name: string;
+  ScriptPath: string;
+  Recurring: boolean;
+  Version: number;
+  /** Field used for log collection of Endpoints belonging to EdgeGroups */
+  GroupLogsCollection: Record<EnvironmentId, EndpointMeta>;
+}
+
+enum LogsStatus {
+  Idle = 1,
+  Pending = 2,
+  Collected = 3,
+}
+
+interface EndpointMeta {
+  LogsStatus: LogsStatus;
+  CollectLogs: boolean;
+}