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

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