CronJobRunDetailsOverflowDialog() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx lines 48–195

const CronJobRunDetailsOverflowDialog = ({
  refetchJobs,
}: CronJobRunDetailsOverflowNoticeV2Props) => {
  const { data: project } = useSelectedProjectQuery()

  const {
    cleanupInterval,
    cleanupState,
    isScheduling,
    isScheduleSuccess,
    setCleanupInterval,
    runBatchedDeletion,
    scheduleCleanup,
    cancelDeletion,
  } = useCronJobsCleanupActions({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })

  const isDeleting = cleanupState.status === 'deleting'
  const isDeleteSuccess = cleanupState.status === 'delete-success'
  const isDeleteError = cleanupState.status === 'delete-error'
  const isBusy = isDeleting || isScheduling
  const canSchedule = isDeleteSuccess || isScheduleSuccess

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button type="default">Learn more</Button>
      </DialogTrigger>
      <DialogContent aria-describedby={undefined}>
        <DialogHeader>
          <DialogTitle>Last run for cron jobs omitted for overview</DialogTitle>
        </DialogHeader>
        <DialogSectionSeparator />
        <DialogSection className="flex flex-col gap-y-2">
          <p className="text-sm">
            The dashboard fetches data for the cron jobs overview by running a join between the{' '}
            <code className="text-code-inline">cron.job</code> and{' '}
            <code className="text-code-inline !break-keep">cron.job_run_details</code> tables to
            show each cron job's latest run.
          </p>

          <p className="text-sm">
            However, the join was skipped as the estimated query cost exceeds safety thresholds,
            likely due to the size of{' '}
            <code className="text-code-inline !break-keep">cron.job_run_details</code> table.
          </p>
        </DialogSection>

        <DialogSectionSeparator />

        <DialogSection className="flex flex-col gap-y-4">
          <p className="font-mono text-foreground-lighter uppercase tracking-tight text-sm">
            Suggested steps
          </p>

          <p className="text-sm">
            We recommend removing the old run history now, then scheduling a cron job that keeps
            trimming the <code className="text-code-inline">cron.job_run_details</code> table
            automatically. This also prevents unnecessary bloat on the database.
          </p>

          <div className="flex flex-col gap-y-2 text-sm">
            <p className="text-foreground">Step 1: Delete older entries</p>

            {isDeleting ? (
              <DeletionProgress progress={cleanupState.progress} onCancel={cancelDeletion} />
            ) : isDeleteSuccess ? (
              <DeletionSuccess totalRowsDeleted={cleanupState.totalRowsDeleted} />
            ) : isDeleteError ? (
              <DeletionError
                error={cleanupState.error}
                onRetry={() => runBatchedDeletion(cleanupInterval)}
              />
            ) : (
              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
                <div className="sm:w-64">
                  <Select_Shadcn_
                    disabled={isBusy}
                    value={cleanupInterval}
                    onValueChange={setCleanupInterval}
                  >
                    <SelectTrigger_Shadcn_ className="w-full">
                      <SelectValue_Shadcn_ placeholder="Select an interval" />
                    </SelectTrigger_Shadcn_>
                    <SelectContent_Shadcn_>
                      {CLEANUP_INTERVALS.map((option) => (
                        <SelectItem_Shadcn_ key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem_Shadcn_>
                      ))}
                    </SelectContent_Shadcn_>
                  </Select_Shadcn_>
                </div>
                <Button
                  type="default"
                  disabled={isBusy}
                  onClick={() => runBatchedDeletion(cleanupInterval)}
                >
                  Delete rows now
                </Button>
              </div>
            )}
          </div>

          <div className="flex flex-col gap-y-2 text-sm">
            <p className="text-foreground">Step 2: Schedule an automated cleanup</p>

            {!canSchedule ? (
              <p className="text-foreground-lighter text-xs">
                Complete step 1 to enable scheduling a daily cleanup job.
              </p>
            ) : isScheduleSuccess ? (
              <ScheduleSuccess />
            ) : (
              <>
                <CodeBlock
                  hideLineNumbers
                  language="sql"
                  value={getScheduleDeleteCronJobRunDetailsSql(cleanupInterval)}
                  className="py-3 px-4 text-xs"
                  wrapperClassName="max-w-full"
                />
                <Button
                  block
                  size="small"
                  type="default"
                  className="mt-1"
                  loading={isScheduling}
                  disabled={isScheduling}
                  onClick={async () => {
                    await scheduleCleanup({
                      interval: cleanupInterval,
                      onSuccess: () => refetchJobs(),
                    })
                  }}
                >
                  Schedule cleanup job
                </Button>
              </>
            )}
          </div>
        </DialogSection>
      </DialogContent>
    </Dialog>
  )
}