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

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

@@ -0,0 +1,75 @@
+import { ListIcon, WrenchIcon } from 'lucide-react';
+
+import { useIdParam } from '@/react/hooks/useIdParam';
+import { useParamState } from '@/react/hooks/useParamState';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+import { NavTabs } from '@@/NavTabs';
+
+import { useEdgeJob } from '../queries/useEdgeJob';
+
+import { UpdateEdgeJobForm } from './UpdateEdgeJobForm/UpdateEdgeJobForm';
+import { ResultsDatatable } from './ResultsDatatable/ResultsDatatable';
+
+const tabs = [
+  {
+    id: 0,
+    label: 'Configuration',
+    icon: WrenchIcon,
+  },
+  {
+    id: 1,
+    label: 'Results',
+    icon: ListIcon,
+  },
+] as const;
+
+export function ItemView() {
+  const id = useIdParam();
+
+  const [tabId = 0, setTabId] = useParamState('tab', (param) =>
+    param ? parseInt(param, 10) : 0
+  );
+
+  const edgeJobQuery = useEdgeJob(id);
+
+  if (!edgeJobQuery.data) {
+    return null;
+  }
+
+  const edgeJob = edgeJobQuery.data;
+
+  return (
+    <>
+      <PageHeader
+        title="Edge job details"
+        breadcrumbs={[{ label: 'Edge jobs', link: 'edge.jobs' }, edgeJob.Name]}
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <NavTabs
+                selectedId={tabId}
+                onSelect={(id) => {
+                  setTabId(id);
+                }}
+                options={tabs}
+              />
+
+              {tabId === tabs[0].id && <UpdateEdgeJobForm edgeJob={edgeJob} />}
+
+              {tabId === tabs[1].id && (
+                <div className="mt-4">
+                  <ResultsDatatable jobId={edgeJob.Id} />
+                </div>
+              )}
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -1,67 +1,93 @@
 import { List } from 'lucide-react';
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 
-import { EnvironmentId } from '@/react/portainer/environments/types';
+import { Environment } from '@/react/portainer/environments/types';
+import { useEnvironmentList } from '@/react/portainer/environments/queries';
 
 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 { EdgeJob, JobResult, LogsStatus } from '../../types';
+import { useJobResults } from '../../queries/jobResults/useJobResults';
 
-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
-  );
+export function ResultsDatatable({ jobId }: { jobId: EdgeJob['Id'] }) {
   const tableState = useTableState(store, tableKey);
 
-  const { setAutoRefreshRate } = tableState;
+  const jobResultsQuery = useJobResults(jobId, {
+    refetchInterval(dataset) {
+      const anyCollecting = dataset?.some(
+        (r) => r.LogsStatus === LogsStatus.Pending
+      );
 
-  useEffect(() => {
-    setAutoRefreshRate(anyCollecting ? 5 : 0);
-  }, [anyCollecting, setAutoRefreshRate]);
+      if (anyCollecting) {
+        return 5000;
+      }
+
+      return tableState.autoRefreshRate * 1000;
+    },
+  });
+
+  const environmentIds = jobResultsQuery.data?.map(
+    (result) => result.EndpointId
+  );
+
+  const environmentsQuery = useEnvironmentList(
+    { endpointIds: environmentIds },
+    { enabled: !!environmentIds && !jobResultsQuery.isLoading }
+  );
+
+  const dataset = useMemo(
+    () =>
+      jobResultsQuery.isLoading || environmentsQuery.isLoading
+        ? []
+        : associateEndpointsToResults(
+            jobResultsQuery.data || [],
+            environmentsQuery.environments
+          ),
+    [
+      environmentsQuery.environments,
+      environmentsQuery.isLoading,
+      jobResultsQuery.data,
+      jobResultsQuery.isLoading,
+    ]
+  );
 
-  useRepeater(tableState.autoRefreshRate, onRefresh);
   return (
     <Datatable
       disableSelect
       columns={columns}
       dataset={dataset}
+      isLoading={jobResultsQuery.isLoading || environmentsQuery.isLoading}
       title="Results"
       titleIcon={List}
       settingsManager={tableState}
       extendTableOptions={withMeta({
         table: 'edge-job-results',
-        collectLogs: handleCollectLogs,
-        downloadLogs: onDownloadLogs,
-        clearLogs: onClearLogs,
+        jobId,
       })}
       data-cy="edge-job-results-datatable"
     />
   );
-
-  function handleCollectLogs(envId: EnvironmentId) {
-    onCollectLogs(envId);
-  }
+}
+
+function associateEndpointsToResults(
+  results: Array<JobResult>,
+  environments: Array<Environment>
+) {
+  return results.map((result) => {
+    const environment = environments.find(
+      (environment) => environment.Id === result.EndpointId
+    );
+    return {
+      ...result,
+      Endpoint: environment,
+    };
+  });
 }

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

@@ -3,6 +3,9 @@ import { CellContext, createColumnHelper } from '@tanstack/react-table';
 import { Button } from '@@/buttons';
 
 import { LogsStatus } from '../../types';
+import { useDownloadLogsMutation } from '../../queries/jobResults/useDownloadLogsMutation';
+import { useClearLogsMutation } from '../../queries/jobResults/useClearLogsMutation';
+import { useCollectLogsMutation } from '../../queries/jobResults/useCollectLogsMutation';
 
 import { DecoratedJobResult, getTableMeta } from './types';
 
@@ -29,6 +32,11 @@ function ActionsCell({
   table,
 }: CellContext<DecoratedJobResult, unknown>) {
   const tableMeta = getTableMeta(table.options.meta);
+  const id = tableMeta.jobId;
+
+  const downloadLogsMutation = useDownloadLogsMutation(id);
+  const clearLogsMutations = useClearLogsMutation(id);
+  const collectLogsMutation = useCollectLogsMutation(id);
 
   switch (item.LogsStatus) {
     case LogsStatus.Pending:
@@ -42,14 +50,14 @@ function ActionsCell({
       return (
         <>
           <Button
-            onClick={() => tableMeta.downloadLogs(item.EndpointId)}
-            data-cy={`edge-job-download-logs-${item.Endpoint.Name}`}
+            onClick={() => downloadLogsMutation.mutate(item.EndpointId)}
+            data-cy={`edge-job-download-logs-${item.Endpoint?.Name}`}
           >
             Download logs
           </Button>
           <Button
-            onClick={() => tableMeta.clearLogs(item.EndpointId)}
-            data-cy={`edge-job-clear-logs-${item.Endpoint.Name}`}
+            onClick={() => clearLogsMutations.mutate(item.EndpointId)}
+            data-cy={`edge-job-clear-logs-${item.Endpoint?.Name}`}
           >
             Clear logs
           </Button>
@@ -59,8 +67,8 @@ function ActionsCell({
     default:
       return (
         <Button
-          onClick={() => tableMeta.collectLogs(item.EndpointId)}
-          data-cy={`edge-job-retrieve-logs-${item.Endpoint.Name}`}
+          onClick={() => collectLogsMutation.mutate(item.EndpointId)}
+          data-cy={`edge-job-retrieve-logs-${item.Endpoint?.Name}`}
         >
           Retrieve logs
         </Button>

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

@@ -1,19 +1,14 @@
-import {
-  Environment,
-  EnvironmentId,
-} from '@/react/portainer/environments/types';
+import { Environment } from '@/react/portainer/environments/types';
 
-import { JobResult } from '../../types';
+import { EdgeJob, JobResult } from '../../types';
 
 export interface DecoratedJobResult extends JobResult {
-  Endpoint: Environment;
+  Endpoint?: Environment;
 }
 
 interface TableMeta {
   table: 'edge-job-results';
-  collectLogs(envId: EnvironmentId): void;
-  downloadLogs(envId: EnvironmentId): void;
-  clearLogs(envId: EnvironmentId): void;
+  jobId: EdgeJob['Id'];
 }
 
 function isTableMeta(meta: unknown): meta is TableMeta {

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

@@ -0,0 +1,123 @@
+import { Form, Formik, useFormikContext } from 'formik';
+import { useRouter } from '@uirouter/react';
+
+import { EdgeGroupsSelector } from '@/react/edge/edge-stacks/components/EdgeGroupsSelector';
+import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { FormActions } from '@@/form-components/FormActions';
+import { FormSection } from '@@/form-components/FormSection';
+import { WebEditorForm } from '@@/WebEditorForm';
+
+import { NameField } from '../../components/EdgeJobForm/NameField';
+import { JobConfigurationFieldset } from '../../components/EdgeJobForm/JobConfigurationFieldset';
+import {
+  UpdatePayload,
+  useUpdateEdgeJobMutation,
+} from '../../queries/useUpdateEdgeJobMutation';
+import {
+  toRecurringRequest,
+  toRecurringViewModel,
+} from '../../components/EdgeJobForm/parseRecurringValues';
+import { EdgeJobResponse } from '../../queries/useEdgeJob';
+import { useEdgeJobFile } from '../../queries/useEdgeJobFile';
+import { useValidation } from '../useValidation';
+
+import { FormValues } from './types';
+
+export function UpdateEdgeJobForm({ edgeJob }: { edgeJob: EdgeJobResponse }) {
+  const fileQuery = useEdgeJobFile(edgeJob.Id);
+  const mutation = useUpdateEdgeJobMutation();
+  const validation = useValidation({ id: edgeJob.Id });
+  const router = useRouter();
+
+  if (!fileQuery.isSuccess) {
+    return null;
+  }
+
+  return (
+    <Formik<FormValues>
+      validationSchema={validation}
+      validateOnMount
+      initialValues={{
+        name: edgeJob.Name,
+
+        edgeGroupIds: edgeJob.EdgeGroups || [],
+        environmentIds: edgeJob.Endpoints || [],
+        fileContent: fileQuery.data,
+        ...toRecurringViewModel({
+          cronExpression: edgeJob.CronExpression,
+          recurring: edgeJob.Recurring,
+        }),
+      }}
+      onSubmit={(values) => {
+        mutation.mutate(
+          { id: edgeJob.Id, payload: getPayload(values) },
+          {
+            onSuccess: () => {
+              notifySuccess('Success', 'Edge job successfully updated');
+              router.stateService.go('^');
+            },
+          }
+        );
+      }}
+    >
+      <InnerForm isLoading={mutation.isLoading} />
+    </Formik>
+  );
+}
+
+function InnerForm({ isLoading }: { isLoading: boolean }) {
+  const { values, setFieldValue, isValid, errors } =
+    useFormikContext<FormValues>();
+
+  return (
+    <Form className="form-horizontal">
+      <NameField errors={errors.name} />
+
+      <JobConfigurationFieldset />
+
+      <WebEditorForm
+        data-cy="edge-job-editor"
+        id="edge-job-editor"
+        onChange={(value) => setFieldValue('fileContent', value)}
+        value={values.fileContent}
+        placeholder="Define or paste the content of your script file here"
+        shell
+        error={errors.fileContent}
+      />
+
+      <EdgeGroupsSelector
+        onChange={(value) => setFieldValue('edgeGroupIds', value)}
+        value={values.edgeGroupIds}
+        error={errors.edgeGroupIds}
+      />
+
+      <FormSection title="Target environments">
+        <AssociatedEdgeEnvironmentsSelector
+          onChange={(value) => setFieldValue('environmentIds', value)}
+          value={values.environmentIds}
+        />
+      </FormSection>
+
+      <FormActions
+        submitLabel="Update edge job"
+        isLoading={isLoading}
+        isValid={isValid}
+        data-cy="updateJobButton"
+        loadingText="In progress..."
+        errors={errors}
+      />
+    </Form>
+  );
+}
+
+function getPayload(values: FormValues): UpdatePayload {
+  return {
+    name: values.name,
+    edgeGroups: values.edgeGroupIds,
+    endpoints: values.environmentIds,
+    fileContent: values.fileContent,
+    ...toRecurringRequest(values),
+  };
+}

app/react/edge/edge-jobs/ItemView/UpdateEdgeJobForm/getPayload.tsx

@@ -0,0 +1,14 @@
+import { UpdatePayload } from '../../queries/useUpdateEdgeJobMutation';
+import { toRecurringRequest } from '../../components/EdgeJobForm/parseRecurringValues';
+
+import { FormValues } from './types';
+
+export function getPayload(values: FormValues): UpdatePayload {
+  return {
+    name: values.name,
+    edgeGroups: values.edgeGroupIds,
+    endpoints: values.environmentIds,
+    fileContent: values.fileContent,
+    ...toRecurringRequest(values),
+  };
+}

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

@@ -0,0 +1,18 @@
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { timeOptions } from '../../components/EdgeJobForm/RecurringFieldset';
+
+export interface FormValues {
+  name: string;
+  recurring: boolean;
+  edgeGroupIds: Array<EdgeGroup['Id']>;
+  environmentIds: Array<EnvironmentId>;
+
+  fileContent: string;
+
+  cronMethod: 'basic' | 'advanced';
+  dateTime: Date; // basic !recurring
+  recurringOption: (typeof timeOptions)[number]['value']; // basic recurring
+  cronExpression: string; // advanced
+}

app/react/edge/edge-jobs/ItemView/useValidation.ts

@@ -0,0 +1,60 @@
+import {
+  SchemaOf,
+  array,
+  boolean,
+  date,
+  mixed,
+  number,
+  object,
+  string,
+} from 'yup';
+import { useMemo } from 'react';
+
+import { EdgeJob } from '../types';
+import { useNameValidation } from '../components/EdgeJobForm/NameField';
+import { cronValidation } from '../components/EdgeJobForm/AdvancedCronFieldset';
+import { timeOptions } from '../components/EdgeJobForm/RecurringFieldset';
+
+import { FormValues } from './UpdateEdgeJobForm/types';
+
+export function useValidation({
+  id,
+}: {
+  id: EdgeJob['Id'];
+}): SchemaOf<FormValues> {
+  const nameValidation = useNameValidation(id);
+  return useMemo(
+    () =>
+      object({
+        name: nameValidation,
+        recurring: boolean().default(false),
+        cronExpression: string().default('').when('cronMethod', {
+          is: 'advanced',
+          then: cronValidation().required(),
+        }),
+        edgeGroupIds: array(number().required()),
+        environmentIds: array(number().required()),
+
+        fileContent: string().required('This field is required.'),
+
+        cronMethod: mixed<'basic' | 'advanced'>()
+          .oneOf(['basic', 'advanced'])
+          .default('basic'),
+        dateTime: date()
+          .default(new Date())
+          .when(['recurring', 'cronMethod'], {
+            is: (recurring: boolean, cronMethod: 'basic' | 'advanced') =>
+              !recurring && cronMethod === 'basic',
+            then: (schema) => schema.required('This field is required.'),
+          }),
+        recurringOption: mixed()
+          .oneOf(timeOptions.map((o) => o.value))
+          .when(['recurring', 'cronMethod'], {
+            is: (recurring: boolean, cronMethod: 'basic' | 'advanced') =>
+              recurring && cronMethod === 'basic',
+            then: (schema) => schema.required('This field is required.'),
+          }),
+      }),
+    [nameValidation]
+  );
+}