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