PreviousRunsTab() — supabase Function Reference

Architecture documentation for the PreviousRunsTab() function in PreviousRunsTab.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ PreviousRunsTab() — supabase Function Reference

Dependency Diagram

graph TD
  91fd2c8d_c503_b6af_d928_0747dfc52c04["PreviousRunsTab()"]
  3bba786d_5fee_f2c6_f751_588dd6e2823e["isAtBottom()"]
  91fd2c8d_c503_b6af_d928_0747dfc52c04 -->|calls| 3bba786d_5fee_f2c6_f751_588dd6e2823e
  style 91fd2c8d_c503_b6af_d928_0747dfc52c04 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx lines 153–219

export const PreviousRunsTab = () => {
  const { childId } = useParams()
  const { data: project } = useSelectedProjectQuery()

  const jobId = Number(childId)

  const {
    data,
    isPending: isLoadingCronJobRuns,
    isFetching,
    fetchNextPage,
  } = useCronJobRunsInfiniteQuery(
    {
      projectRef: project?.ref,
      connectionString: project?.connectionString,
      jobId: jobId,
    },
    { enabled: !!jobId, staleTime: 30000 }
  )

  const cronJobRuns = useMemo(() => data?.pages.flatMap((p) => p) || [], [data?.pages])

  const handleScroll = useCallback(
    (event: UIEvent<HTMLDivElement>) => {
      if (isLoadingCronJobRuns || !isAtBottom(event)) return
      // the cancelRefetch is to prevent the query from being refetched when the user scrolls back up and down again,
      // resulting in multiple fetchNextPage calls
      fetchNextPage({ cancelRefetch: false })
    },
    [fetchNextPage, isLoadingCronJobRuns]
  )

  return (
    <div className="h-full flex flex-col">
      <LoadingLine loading={isFetching} />
      <DataGrid
        className="flex-grow border-t-0"
        rowHeight={44}
        headerRowHeight={36}
        onScroll={handleScroll}
        columns={columns}
        rows={cronJobRuns ?? []}
        rowClass={() => {
          return cn(
            'cursor-pointer',
            '[&>.rdg-cell]:border-box [&>.rdg-cell]:outline-none [&>.rdg-cell]:shadow-none',
            '[&>.rdg-cell:first-child>div]:ml-8'
          )
        }}
        renderers={{
          renderRow(_idx, props) {
            return <Row key={props.row.job_pid} {...props} />
          },
          noRowsFallback: isLoadingCronJobRuns ? (
            <div className="absolute top-14 px-6 w-full">
              <GenericSkeletonLoader />
            </div>
          ) : (
            <div className="flex items-center justify-center w-full col-span-6">
              <CronJobsEmptyState page="runs" />
            </div>
          ),
        }}
      />
    </div>
  )
}