feat(edge/jobs): migrate item view to react [EE-2220] (#11887)

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

@@ -0,0 +1,22 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { EdgeJob } from '../../types';
+import { buildUrl as buildEdgeJobUrl } from '../build-url';
+
+export function buildUrl({
+  action,
+  id,
+  taskId,
+}: {
+  id: EdgeJob['Id'];
+  action?: 'logs';
+  taskId?: EnvironmentId;
+}) {
+  const baseUrl = buildEdgeJobUrl({ id, action: 'tasks' });
+
+  if (taskId) {
+    return `${baseUrl}/${taskId}/${action}`;
+  }
+
+  return baseUrl;
+}

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

@@ -0,0 +1,7 @@
+import { EdgeJob } from '../../types';
+import { queryKeys as edgeJobQueryKeys } from '../query-keys';
+
+export const queryKeys = {
+  base: (id: EdgeJob['Id']) =>
+    [...edgeJobQueryKeys.item(id), 'results'] as const,
+};

app/react/edge/edge-jobs/queries/jobResults/useClearLogsMutation.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { withInvalidate } from '@/react-tools/react-query';
+
+import { EdgeJob } from '../../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+export function useClearLogsMutation(id: EdgeJob['Id']) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (environmentId: EnvironmentId) =>
+      clearLogsMutation(id, environmentId),
+    ...withInvalidate(queryClient, [queryKeys.base(id)]),
+  });
+}
+
+async function clearLogsMutation(
+  id: EdgeJob['Id'],
+  environmentId: EnvironmentId
+) {
+  try {
+    await axios.delete(buildUrl({ id, action: 'logs', taskId: environmentId }));
+  } catch (err) {
+    throw parseAxiosError(err, 'Failed clearing edge job result logs');
+  }
+}

app/react/edge/edge-jobs/queries/jobResults/useCollectLogsMutation.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { withInvalidate } from '@/react-tools/react-query';
+
+import { EdgeJob } from '../../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+export function useCollectLogsMutation(id: EdgeJob['Id']) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (environmentId: EnvironmentId) =>
+      collectLogsMutation(id, environmentId),
+    ...withInvalidate(queryClient, [queryKeys.base(id)]),
+  });
+}
+
+async function collectLogsMutation(
+  id: EdgeJob['Id'],
+  environmentId: EnvironmentId
+) {
+  try {
+    await axios.post(buildUrl({ id, action: 'logs', taskId: environmentId }));
+  } catch (err) {
+    throw parseAxiosError(err, 'Unable to collect logs');
+  }
+}

app/react/edge/edge-jobs/queries/jobResults/useDownloadLogsMutation.ts

@@ -0,0 +1,39 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { saveAs } from 'file-saver';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { withInvalidate } from '@/react-tools/react-query';
+
+import { EdgeJob } from '../../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+export function useDownloadLogsMutation(id: EdgeJob['Id']) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (environmentId: EnvironmentId) =>
+      downloadLogsMutation(id, environmentId),
+    ...withInvalidate(queryClient, [queryKeys.base(id)]),
+  });
+}
+
+async function downloadLogsMutation(
+  id: EdgeJob['Id'],
+  environmentId: EnvironmentId
+) {
+  try {
+    const { data } = await axios.get<{ FileContent: string }>(
+      buildUrl({ id, action: 'logs', taskId: environmentId })
+    );
+    const downloadData = new Blob([data.FileContent], {
+      type: 'text/plain;charset=utf-8',
+    });
+    const logFileName = `job_${id}_task_${environmentId}.log`;
+    saveAs(downloadData, logFileName);
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'Unable to download file');
+  }
+}

app/react/edge/edge-jobs/queries/jobResults/useJobResults.ts

@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { EdgeJob, JobResult } from '../../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export function useJobResults(
+  id: EdgeJob['Id'],
+  {
+    refetchInterval,
+  }: {
+    refetchInterval?:
+      | number
+      | false
+      | ((data: Array<JobResult> | undefined) => number | false);
+  } = {}
+) {
+  return useQuery({
+    queryKey: queryKeys.base(id),
+    queryFn: () => getJobResults(id),
+    refetchInterval,
+  });
+}
+
+async function getJobResults(id: EdgeJob['Id']) {
+  try {
+    const { data } = await axios.get<Array<JobResult>>(buildUrl({ id }));
+
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'Failed fetching edge job results');
+  }
+}

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

@@ -1,3 +1,7 @@
+import { EdgeJob } from '../types';
+
 export const queryKeys = {
   base: () => ['edge', 'jobs'] as const,
+  item: (id: EdgeJob['Id']) => [...queryKeys.base(), id] as const,
+  file: (id: EdgeJob['Id']) => [...queryKeys.item(id), 'file'] as const,
 };

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

@@ -1,13 +1,20 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EdgeGroup } from '@/react/edge/edge-groups/types';
 import { EnvironmentId } from '@/react/portainer/environments/types';
+import { withInvalidate } from '@/react-tools/react-query';
+
+import { queryKeys } from '../query-keys';
 
 import { createJobFromFile } from './createJobFromFile';
 import { createJobFromFileContent } from './createJobFromFileContent';
 
 export function useCreateEdgeJobMutation() {
-  return useMutation(createEdgeJob);
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createEdgeJob,
+    ...withInvalidate(queryClient, [queryKeys.base()]),
+  });
 }
 
 export type BasePayload = {

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

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { EdgeJob } from '../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+export interface EdgeJobResponse extends Omit<EdgeJob, 'Endpoints'> {
+  Endpoints: Array<EnvironmentId> | null;
+}
+
+async function getEdgeJob(id: EdgeJobResponse['Id']) {
+  try {
+    const { data } = await axios.get<EdgeJobResponse>(buildUrl({ id }));
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'Failed fetching edge job');
+  }
+}
+
+export function useEdgeJob<T = EdgeJobResponse>(
+  id: EdgeJobResponse['Id'],
+  {
+    select,
+  }: {
+    select?: (job: EdgeJobResponse) => T;
+  } = {}
+) {
+  return useQuery(queryKeys.item(id), () => getEdgeJob(id), { select });
+}

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

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { EdgeJob } from '../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+export interface EdgeJobResponse extends Omit<EdgeJob, 'Endpoints'> {
+  Endpoints: Array<EnvironmentId>;
+}
+
+async function getEdgeJobFile(id: EdgeJobResponse['Id']) {
+  try {
+    const { data } = await axios.get<{ FileContent: string }>(
+      buildUrl({ id, action: 'file' })
+    );
+    return data.FileContent;
+  } catch (err) {
+    throw parseAxiosError(err, 'Failed fetching edge job file');
+  }
+}
+
+export function useEdgeJobFile(id: EdgeJobResponse['Id']) {
+  return useQuery(queryKeys.file(id), () => getEdgeJobFile(id));
+}

app/react/edge/edge-jobs/queries/useUpdateEdgeJobMutation.tsx

@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withInvalidate } from '@/react-tools/react-query';
+
+import { EdgeGroup } from '../../edge-groups/types';
+
+import { queryKeys } from './query-keys';
+
+export interface UpdatePayload {
+  name?: string;
+  cronExpression?: string;
+  recurring?: boolean;
+  endpoints?: Array<EnvironmentId>;
+  edgeGroups?: Array<EdgeGroup['Id']>;
+  fileContent?: string;
+}
+
+export function useUpdateEdgeJobMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateEdgeJob,
+    ...withInvalidate(queryClient, [queryKeys.base()]),
+  });
+}
+
+async function updateEdgeJob({
+  id,
+  payload,
+}: {
+  id: number;
+  payload: UpdatePayload;
+}) {
+  try {
+    await axios.put(`/edge_jobs/${id}`, payload);
+  } catch (error) {
+    throw parseAxiosError(error);
+  }
+}