Cron Schedule
Scheduled jobs: when each next runs and how the last went. An overdue job — next run in the past with nothing running — is called out, since that is the failure a schedule list exists to catch.
src/components/ui/cron-schedule.tsxAbout
From the component's own source, where it was written.
Scheduled jobs: when each next runs, and how the last one went.
Both times are shown relative, because "in 4 hours" and "2 hours ago" are the questions people actually have about a cron. The absolute time is in the title attribute for when it matters.
An overdue job — next run in the past while nothing is running — is called out explicitly. That is the failure mode a schedule list exists to catch, and it is invisible if you only render the timestamp.
Install
npx astralyx-ui add cron-schedule
Usage
import { CronSchedule } from '@/components/ui/cron-schedule'
<CronSchedule jobs={jobs} />Composer
Change the props and the source below follows.
- Nightly backup
0 3 * * *Snapshot primary to cold storage
Next Last · succeededTook 6m 52s - RunningRefresh search index
*/15 * * * *Next Last · running - Expire stale sessions
0 * * * *OverdueNext Last · failedTook 3s - Weekly usage email
0 9 * * 1PausedLast · succeeded
<CronSchedule jobs={jobs} />Examples
Jobs
<CronSchedule jobs={jobs} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
CronSchedule
Scheduled jobs: when each next runs, and how the last one went.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| jobs | CronJob[] | required | { id, name, expression, description?, nextRun?, lastRun?, lastStatus?, lastDuration?, paused? }. |
| now | Date | — | — |
| locale | string | 'en-GB' | — |
| pausedLabel | ReactNode | 'Paused' | — |
| overdueLabel | ReactNode | 'Overdue' | Badge on a job whose next run is already in the past. |
| nextLabel | ReactNode | 'Next' | Precedes the next-run time. |
| lastLabel | ReactNode | 'Last' | Precedes the last-run time. |
| tookLabel | ReactNode | 'Took' | Precedes the last run's duration. |
Types
CronJob
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| expression | string | Standard cron expression, shown verbatim. |
| description? | ReactNode | — |
| nextRun? | Date | — |
| lastRun? | Date | — |
| lastStatus? | 'success' | 'failed' | 'running' | — |
| lastDuration? | number | Seconds. |
| paused? | boolean | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| overdue | derived | Next run in the past, not paused, nothing running. Invisible if you only render the timestamp. |
| times | relative | "in 4 hours" and "2 hours ago" are the actual questions; the absolute time is in the title attribute. |