Bring back process now button + tweak logic for processing captures

RolnickLab · Nov 7, 2023 · 180bcb3 · 180bcb3
1 parent c7af4ee
commit 180bcb3
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 38 deletions.
diff --git a/ui/src/data-services/hooks/jobs/useCancelJob.ts b/ui/src/data-services/hooks/jobs/useCancelJob.ts
@@ -18,6 +18,7 @@ export const useCancelJob = () => {
       ),
     onSuccess: () => {
       queryClient.invalidateQueries([API_ROUTES.JOBS])
+      queryClient.invalidateQueries([API_ROUTES.CAPTURES])
     },
   })
 

diff --git a/ui/src/data-services/hooks/jobs/useCreateJob.ts b/ui/src/data-services/hooks/jobs/useCreateJob.ts
@@ -31,7 +31,7 @@ export const useCreateJob = (onSuccess?: (id: string) => void) => {
 
   const { mutateAsync, isLoading, isSuccess, reset, error } = useMutation({
     mutationFn: (fieldValues: JobFieldValues) =>
-      axios.post<{ id: number }>(
+      axios.post<{ id: number; source_image_single?: { id: number } }>(
         `${API_URL}/${API_ROUTES.JOBS}/${
           fieldValues.startNow ? '?start_now' : ''
         }`,
@@ -42,6 +42,7 @@ export const useCreateJob = (onSuccess?: (id: string) => void) => {
       ),
     onSuccess: ({ data }) => {
       queryClient.invalidateQueries([API_ROUTES.JOBS])
+      queryClient.invalidateQueries([API_ROUTES.CAPTURES])
       onSuccess?.(`${data.id}`)
       setTimeout(reset, SUCCESS_TIMEOUT)
     },

diff --git a/ui/src/data-services/hooks/jobs/useDeleteJob.ts b/ui/src/data-services/hooks/jobs/useDeleteJob.ts
@@ -15,6 +15,7 @@ export const useDeleteJob = (onSuccess?: () => void) => {
       }),
     onSuccess: () => {
       queryClient.invalidateQueries([API_ROUTES.JOBS])
+      queryClient.invalidateQueries([API_ROUTES.CAPTURES])
       onSuccess?.()
     },
   })

diff --git a/ui/src/data-services/hooks/jobs/useQueueJob.ts b/ui/src/data-services/hooks/jobs/useQueueJob.ts
@@ -15,6 +15,7 @@ export const useQueueJob = () => {
       }),
     onSuccess: () => {
       queryClient.invalidateQueries([API_ROUTES.JOBS])
+      queryClient.invalidateQueries([API_ROUTES.CAPTURES])
     },
   })
 

diff --git a/ui/src/data-services/models/capture-details.ts b/ui/src/data-services/models/capture-details.ts
@@ -1,5 +1,5 @@
 import { Capture, ServerCapture } from './capture'
-import { Job } from './job'
+import { Job, JobStatus } from './job'
 
 export type ServerCaptureDetails = ServerCapture & any // TODO: Update this type
 
@@ -17,4 +17,13 @@ export class CaptureDetails extends Capture {
   get jobs(): Job[] {
     return this._jobs
   }
+
+  get hasJobInProgress(): boolean {
+    return this._jobs.some(
+      (job) =>
+        job.status === JobStatus.Created ||
+        job.status === JobStatus.Pending ||
+        job.status === JobStatus.Started
+    )
+  }
 }
diff --git a/ui/src/pages/job-details/job-details-form/job-details-form.tsx b/ui/src/pages/job-details/job-details-form/job-details-form.tsx
@@ -10,7 +10,7 @@ import { FormConfig } from 'components/form/types'
 import { Button, ButtonTheme } from 'design-system/components/button/button'
 import { Checkbox } from 'design-system/components/checkbox/checkbox'
 import { IconType } from 'design-system/components/icon/icon'
-import { InputContent, InputValue } from 'design-system/components/input/input'
+import { InputContent } from 'design-system/components/input/input'
 import { useForm } from 'react-hook-form'
 import { STRING, translate } from 'utils/language'
 import { useFormError } from 'utils/useFormError'
@@ -52,13 +52,11 @@ const config: FormConfig = {
 }
 
 export const JobDetailsForm = ({
-  captureId,
   error,
   isLoading,
   isSuccess,
   onSubmit,
 }: {
-  captureId?: string
   error?: unknown
   isLoading?: boolean
   isSuccess?: boolean
@@ -70,9 +68,8 @@ export const JobDetailsForm = ({
     setError: setFieldError,
   } = useForm<JobFormValues>({
     defaultValues: {
-      name: captureId ? `Capture #${captureId}` : '',
+      name: '',
       delay: 0,
-      sourceImage: captureId,
     },
     mode: 'onChange',
   })
@@ -104,30 +101,23 @@ export const JobDetailsForm = ({
           />
         </FormRow>
         <FormRow>
-          {captureId ? (
-            <InputValue
-              label={translate(STRING.FIELD_LABEL_SOURCE_IMAGE)}
-              value={`Capture #${captureId}`}
-            />
-          ) : (
-            <FormController
-              name="sourceImages"
-              control={control}
-              config={config.sourceImages}
-              render={({ field, fieldState }) => (
-                <InputContent
-                  description={config[field.name].description}
-                  label={config[field.name].label}
-                  error={fieldState.error?.message}
-                >
-                  <CollectionsPicker
-                    value={field.value}
-                    onValueChange={field.onChange}
-                  />
-                </InputContent>
-              )}
-            />
-          )}
+          <FormController
+            name="sourceImages"
+            control={control}
+            config={config.sourceImages}
+            render={({ field, fieldState }) => (
+              <InputContent
+                description={config[field.name].description}
+                label={config[field.name].label}
+                error={fieldState.error?.message}
+              >
+                <CollectionsPicker
+                  value={field.value}
+                  onValueChange={field.onChange}
+                />
+              </InputContent>
+            )}
+          />
           <FormController
             name="pipeline"
             control={control}

diff --git a/ui/src/pages/job-details/new-job-dialog.tsx b/ui/src/pages/job-details/new-job-dialog.tsx
@@ -10,7 +10,7 @@ import styles from './job-details.module.scss'
 
 const CLOSE_TIMEOUT = 1000
 
-export const NewJobDialog = ({ captureId }: { captureId?: string }) => {
+export const NewJobDialog = () => {
   const { projectId } = useParams()
   const [isOpen, setIsOpen] = useState(false)
   const { createJob, isLoading, isSuccess, error } = useCreateJob(() =>
@@ -29,14 +29,13 @@ export const NewJobDialog = ({ captureId }: { captureId?: string }) => {
         <Button
           label={label}
           icon={IconType.Plus}
-          theme={captureId ? ButtonTheme.Neutral : ButtonTheme.Default}
+          theme={ButtonTheme.Default}
         />
       </Dialog.Trigger>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)}>
         <Dialog.Header title={label} />
         <div className={styles.content}>
           <JobDetailsForm
-            captureId={captureId}
             error={error}
             isLoading={isLoading}
             isSuccess={isSuccess}

diff --git a/ui/src/pages/session-details/playback/capture-job/capture-job.tsx b/ui/src/pages/session-details/playback/capture-job/capture-job.tsx
@@ -1,13 +1,13 @@
 import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
-import { NewJobDialog } from 'pages/job-details/new-job-dialog'
 import { CaptureJobDialog } from './capture-job-dialog'
+import { ProcessNow } from './process-now'
 
 export const CaptureJob = ({ captureId }: { captureId: string }) => {
   const { capture } = useCaptureDetails(captureId)
 
   return (
     <>
-      <NewJobDialog captureId={captureId} />
+      <ProcessNow capture={capture} captureId={captureId} />
       {capture?.jobs.length ? (
         <CaptureJobDialog id={capture.jobs[0].id} />
       ) : null}

diff --git a/ui/src/pages/session-details/playback/capture-job/process-now.tsx b/ui/src/pages/session-details/playback/capture-job/process-now.tsx
@@ -0,0 +1,36 @@
+import { useCreateJob } from 'data-services/hooks/jobs/useCreateJob'
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { Button, ButtonTheme } from 'design-system/components/button/button'
+import { IconType } from 'design-system/components/icon/icon'
+import { useParams } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
+
+export const ProcessNow = ({
+  capture,
+  captureId,
+}: {
+  capture?: CaptureDetails
+  captureId: string
+}) => {
+  const { projectId } = useParams()
+  const { createJob, isLoading, isSuccess } = useCreateJob()
+
+  return (
+    <Button
+      icon={isSuccess ? IconType.RadixCheck : IconType.BatchId}
+      disabled={!capture || capture.hasJobInProgress}
+      label={translate(STRING.PROCESS_NOW)}
+      loading={isLoading}
+      theme={ButtonTheme.Neutral}
+      onClick={() => {
+        createJob({
+          delay: 1,
+          name: `Capture #${captureId}`,
+          sourceImage: captureId,
+          projectId: projectId as string,
+          startNow: true,
+        })
+      }}
+    />
+  )
+}
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
@@ -11,9 +11,11 @@ export enum STRING {
   DELETE,
   DELETED,
   EDIT,
-  NEXT,
+
   LOGIN,
   LOGOUT,
+  NEXT,
+  PROCESS_NOW,
   REFRESH,
   RESET,
   RETRY,
@@ -166,6 +168,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.LOGIN]: 'Login',
   [STRING.LOGOUT]: 'Logout',
   [STRING.NEXT]: 'Next',
+  [STRING.PROCESS_NOW]: 'Process now',
   [STRING.REFRESH]: 'Refresh',
   [STRING.RESET]: 'Reset',
   [STRING.RETRY]: 'Retry',
@@ -176,7 +179,6 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.START]: 'Start',
   [STRING.SUBMIT]: 'Submit',
   [STRING.SUGGEST_ID]: 'Suggest ID',
-
   [STRING.VIEW_PUBLIC_PROJECTS]: 'View public projects',
 
   /* FIELD_LABEL */
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ export const useCancelJob = () => { @@
           ),
         onSuccess: () => {
           queryClient.invalidateQueries([API_ROUTES.JOBS])
+          queryClient.invalidateQueries([API_ROUTES.CAPTURES])
         },
       })
@@ Expand Down @@