|
| 1 | +import { toString as CronToString } from 'cronstrue' |
| 2 | +import { List } from 'lucide-react' |
| 3 | +import Link from 'next/link' |
| 4 | +import { UIEvent, useCallback, useMemo } from 'react' |
| 5 | +import DataGrid, { Column, Row } from 'react-data-grid' |
| 6 | + |
| 7 | +import { useParams } from 'common' |
| 8 | +import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' |
| 9 | +import { useCronJobsQuery } from 'data/database-cron-jobs/database-cron-jobs-query' |
| 10 | +import { |
| 11 | + CronJobRun, |
| 12 | + useCronJobRunsInfiniteQuery, |
| 13 | +} from 'data/database-cron-jobs/database-cron-jobs-runs-infinite-query' |
| 14 | +import { |
| 15 | + Badge, |
| 16 | + Button, |
| 17 | + cn, |
| 18 | + LoadingLine, |
| 19 | + SimpleCodeBlock, |
| 20 | + Tooltip_Shadcn_, |
| 21 | + TooltipContent_Shadcn_, |
| 22 | + TooltipTrigger_Shadcn_, |
| 23 | +} from 'ui' |
| 24 | +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' |
| 25 | +import { calculateDuration, formatDate, isSecondsFormat } from './CronJobs.utils' |
| 26 | +import CronJobsEmptyState from './CronJobsEmptyState' |
| 27 | + |
| 28 | +const cronJobColumns = [ |
| 29 | + { |
| 30 | + id: 'runid', |
| 31 | + name: 'RunID', |
| 32 | + minWidth: 60, |
| 33 | + value: (row: CronJobRun) => ( |
| 34 | + <div className="flex items-center gap-1.5"> |
| 35 | + <h3 className="text-xs">{row.runid}</h3> |
| 36 | + </div> |
| 37 | + ), |
| 38 | + }, |
| 39 | + { |
| 40 | + id: 'message', |
| 41 | + name: 'Message', |
| 42 | + minWidth: 200, |
| 43 | + value: (row: CronJobRun) => ( |
| 44 | + <div className="flex items-center gap-1.5"> |
| 45 | + <Tooltip_Shadcn_> |
| 46 | + <TooltipTrigger_Shadcn_ asChild> |
| 47 | + <span className="text-xs cursor-pointer truncate max-w-[300px]"> |
| 48 | + {row.return_message} |
| 49 | + </span> |
| 50 | + </TooltipTrigger_Shadcn_> |
| 51 | + <TooltipContent_Shadcn_ side="bottom" align="center" className="max-w-[300px] text-wrap"> |
| 52 | + <SimpleCodeBlock |
| 53 | + showCopy={true} |
| 54 | + className="sql" |
| 55 | + parentClassName="!p-0 [&>div>span]:text-xs" |
| 56 | + > |
| 57 | + {row.return_message} |
| 58 | + </SimpleCodeBlock> |
| 59 | + </TooltipContent_Shadcn_> |
| 60 | + </Tooltip_Shadcn_> |
| 61 | + </div> |
| 62 | + ), |
| 63 | + }, |
| 64 | + |
| 65 | + { |
| 66 | + id: 'status', |
| 67 | + name: 'Status', |
| 68 | + minWidth: 75, |
| 69 | + value: (row: CronJobRun) => ( |
| 70 | + <Badge variant={row.status === 'succeeded' ? 'success' : 'warning'}>{row.status}</Badge> |
| 71 | + ), |
| 72 | + }, |
| 73 | + { |
| 74 | + id: 'start_time', |
| 75 | + name: 'Start Time', |
| 76 | + minWidth: 120, |
| 77 | + value: (row: CronJobRun) => <div className="text-xs">{formatDate(row.start_time)}</div>, |
| 78 | + }, |
| 79 | + { |
| 80 | + id: 'end_time', |
| 81 | + name: 'End Time', |
| 82 | + minWidth: 120, |
| 83 | + value: (row: CronJobRun) => <div className="text-xs">{formatDate(row.end_time)}</div>, |
| 84 | + }, |
| 85 | + |
| 86 | + { |
| 87 | + id: 'duration', |
| 88 | + name: 'Duration', |
| 89 | + minWidth: 100, |
| 90 | + value: (row: CronJobRun) => ( |
| 91 | + <div className="text-xs">{calculateDuration(row.start_time, row.end_time)}</div> |
| 92 | + ), |
| 93 | + }, |
| 94 | +] |
| 95 | + |
| 96 | +const columns = cronJobColumns.map((col) => { |
| 97 | + const result: Column<CronJobRun> = { |
| 98 | + key: col.id, |
| 99 | + name: col.name, |
| 100 | + resizable: true, |
| 101 | + minWidth: col.minWidth ?? 120, |
| 102 | + headerCellClass: 'first:pl-6 cursor-pointer', |
| 103 | + renderHeaderCell: () => { |
| 104 | + return ( |
| 105 | + <div className="flex items-center justify-between font-mono font-normal text-xs w-full"> |
| 106 | + <div className="flex items-center gap-x-2"> |
| 107 | + <p className="!text-foreground">{col.name}</p> |
| 108 | + </div> |
| 109 | + </div> |
| 110 | + ) |
| 111 | + }, |
| 112 | + renderCell: (props) => { |
| 113 | + const value = col.value(props.row) |
| 114 | + |
| 115 | + return ( |
| 116 | + <div |
| 117 | + className={cn( |
| 118 | + 'w-full flex flex-col justify-center font-mono text-xs', |
| 119 | + typeof value === 'number' ? 'text-right' : '' |
| 120 | + )} |
| 121 | + > |
| 122 | + <span>{value}</span> |
| 123 | + </div> |
| 124 | + ) |
| 125 | + }, |
| 126 | + } |
| 127 | + return result |
| 128 | +}) |
| 129 | + |
| 130 | +function isAtBottom({ currentTarget }: UIEvent<HTMLDivElement>): boolean { |
| 131 | + return currentTarget.scrollTop + 10 >= currentTarget.scrollHeight - currentTarget.clientHeight |
| 132 | +} |
| 133 | + |
| 134 | +export const PreviousRunsTab = () => { |
| 135 | + const { childId: jobName } = useParams() |
| 136 | + const { project } = useProjectContext() |
| 137 | + |
| 138 | + const { data: cronJobs, isLoading: isLoadingCronJobs } = useCronJobsQuery({ |
| 139 | + projectRef: project?.ref, |
| 140 | + connectionString: project?.connectionString, |
| 141 | + }) |
| 142 | + |
| 143 | + const currentJobState = cronJobs?.find((job) => job.jobname === jobName) |
| 144 | + |
| 145 | + const { |
| 146 | + data, |
| 147 | + isLoading: isLoadingCronJobRuns, |
| 148 | + fetchNextPage, |
| 149 | + isFetching, |
| 150 | + } = useCronJobRunsInfiniteQuery( |
| 151 | + { |
| 152 | + projectRef: project?.ref, |
| 153 | + connectionString: project?.connectionString, |
| 154 | + jobId: Number(currentJobState?.jobid), |
| 155 | + }, |
| 156 | + { enabled: !!currentJobState?.jobid, staleTime: 30 } |
| 157 | + ) |
| 158 | + |
| 159 | + const handleScroll = useCallback( |
| 160 | + (event: UIEvent<HTMLDivElement>) => { |
| 161 | + if (isLoadingCronJobRuns || !isAtBottom(event)) return |
| 162 | + // the cancelRefetch is to prevent the query from being refetched when the user scrolls back up and down again, |
| 163 | + // resulting in multiple fetchNextPage calls |
| 164 | + fetchNextPage({ cancelRefetch: false }) |
| 165 | + }, |
| 166 | + [fetchNextPage, isLoadingCronJobRuns] |
| 167 | + ) |
| 168 | + |
| 169 | + const cronJobRuns = useMemo(() => data?.pages.flatMap((p) => p) || [], [data?.pages]) |
| 170 | + |
| 171 | + return ( |
| 172 | + <div className="h-full flex flex-col"> |
| 173 | + <div className="mt-4 h-full"> |
| 174 | + <LoadingLine loading={isFetching} /> |
| 175 | + <DataGrid |
| 176 | + className="flex-grow h-full" |
| 177 | + rowHeight={44} |
| 178 | + headerRowHeight={36} |
| 179 | + onScroll={handleScroll} |
| 180 | + columns={columns} |
| 181 | + rows={cronJobRuns ?? []} |
| 182 | + rowClass={() => { |
| 183 | + const isSelected = false |
| 184 | + return cn([ |
| 185 | + `${isSelected ? 'bg-surface-300 dark:bg-surface-300' : 'bg-200'} `, |
| 186 | + `${isSelected ? '[&>div:first-child]:border-l-4 border-l-secondary [&>div]:border-l-foreground' : ''}`, |
| 187 | + '[&>.rdg-cell]:border-box [&>.rdg-cell]:outline-none [&>.rdg-cell]:shadow-none', |
| 188 | + '[&>.rdg-cell:first-child>div]:ml-4', |
| 189 | + ]) |
| 190 | + }} |
| 191 | + renderers={{ |
| 192 | + renderRow(_idx, props) { |
| 193 | + return <Row key={props.row.job_pid} {...props} /> |
| 194 | + }, |
| 195 | + noRowsFallback: isLoadingCronJobRuns ? ( |
| 196 | + <div className="absolute top-14 px-6 w-full"> |
| 197 | + <GenericSkeletonLoader /> |
| 198 | + </div> |
| 199 | + ) : ( |
| 200 | + <div className="flex items-center justify-center w-full col-span-6"> |
| 201 | + <CronJobsEmptyState page="runs" /> |
| 202 | + </div> |
| 203 | + ), |
| 204 | + }} |
| 205 | + /> |
| 206 | + </div> |
| 207 | + |
| 208 | + <div className="px-6 py-6 flex gap-12 border-t"> |
| 209 | + {isLoadingCronJobs ? ( |
| 210 | + <GenericSkeletonLoader /> |
| 211 | + ) : ( |
| 212 | + <> |
| 213 | + <div className="grid gap-2 w-56"> |
| 214 | + <h3 className="text-sm">Schedule</h3> |
| 215 | + <p className="text-xs text-foreground-light"> |
| 216 | + {currentJobState?.schedule ? ( |
| 217 | + <> |
| 218 | + <span className="font-mono text-lg">{currentJobState.schedule}</span> |
| 219 | + <p> |
| 220 | + {isSecondsFormat(currentJobState.schedule) |
| 221 | + ? '' |
| 222 | + : CronToString(currentJobState.schedule.toLowerCase())} |
| 223 | + </p> |
| 224 | + </> |
| 225 | + ) : ( |
| 226 | + <span>Loading schedule...</span> |
| 227 | + )} |
| 228 | + </p> |
| 229 | + </div> |
| 230 | + |
| 231 | + <div className="grid gap-2"> |
| 232 | + <h3 className="text-sm">Command</h3> |
| 233 | + <Tooltip_Shadcn_> |
| 234 | + <TooltipTrigger_Shadcn_ className=" text-left p-0! cursor-pointer truncate max-w-[300px] h-12 relative"> |
| 235 | + <SimpleCodeBlock |
| 236 | + showCopy={false} |
| 237 | + className="sql" |
| 238 | + parentClassName=" [&>div>span]:text-xs bg-alternative-200 !p-2 rounded-md" |
| 239 | + > |
| 240 | + {currentJobState?.command} |
| 241 | + </SimpleCodeBlock> |
| 242 | + <div className="bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background-200 to-transparent absolute " /> |
| 243 | + </TooltipTrigger_Shadcn_> |
| 244 | + <TooltipContent_Shadcn_ |
| 245 | + side="bottom" |
| 246 | + align="center" |
| 247 | + className="max-w-[400px] text-wrap" |
| 248 | + > |
| 249 | + <SimpleCodeBlock |
| 250 | + showCopy={false} |
| 251 | + className="sql" |
| 252 | + parentClassName=" [&>div>span]:text-xs bg-alternative-200 !p-2 rounded-md" |
| 253 | + > |
| 254 | + {currentJobState?.command} |
| 255 | + </SimpleCodeBlock> |
| 256 | + </TooltipContent_Shadcn_> |
| 257 | + </Tooltip_Shadcn_> |
| 258 | + {/* <div className="text-xs text-foreground-light"> |
| 259 | + <SimpleCodeBlock |
| 260 | + showCopy={false} |
| 261 | + className="sql" |
| 262 | + parentClassName=" [&>div>span]:text-xs bg-alternative-200 !p-2 rounded-md" |
| 263 | + > |
| 264 | + {currentJobState?.command} |
| 265 | + </SimpleCodeBlock> |
| 266 | + </div> */} |
| 267 | + </div> |
| 268 | + |
| 269 | + <div className="grid gap-2"> |
| 270 | + <h3 className="text-sm">Explore</h3> |
| 271 | + <Button asChild type="outline" icon={<List strokeWidth={1.5} size="14" />}> |
| 272 | + {/* [Terry] need to link to the exact jobid, but not currently supported */} |
| 273 | + <Link target="_blank" href={`/project/${project?.ref}/logs/pgcron-logs/`}> |
| 274 | + View logs |
| 275 | + </Link> |
| 276 | + </Button> |
| 277 | + </div> |
| 278 | + </> |
| 279 | + )} |
| 280 | + </div> |
| 281 | + </div> |
| 282 | + ) |
| 283 | +} |
0 commit comments