Cron Job UI Design
A clean, intuitive interface for scheduling and managing recurring tasks. Built for clarity at a glance — every cron expression maps to a human-readable summary so operators never decode raw syntax.
Core patterns
Natural language preview
As the user builds a schedule, show a live sentence: “Runs every Monday at 03:00 UTC.” Parse the five-field expression client-side and render it in the user's locale. Never expose raw 0 3 * * 1 as the primary label.
Preset picker + custom
Offer one-tap presets (every hour, daily at midnight, weekly Sunday) that populate the expression. A “Custom” toggle reveals minute/hour/day/month/weekday dropdowns. Keep the advanced surface hidden until requested.
Next run timeline
Compute the next 3–5 execution times and display them as a vertical timeline. Each entry shows the absolute UTC timestamp and relative time (“in 4 hours”). This is the fastest way to validate a schedule.
Status + last result
Every cron entry shows a colored dot (green/yellow/red) for the last run outcome, the duration, and a link to the full log. Hovering the dot reveals the exit code and a snippet of stderr.
Layout structure
List view (default): A table with columns for name, schedule summary, next run, last status, and a kebab menu for edit/pause/delete. Rows are expandable inline to show the timeline and recent logs without navigating away.
Create/edit drawer: A slide-over panel from the right. Top section: name + description. Middle: preset buttons and the custom builder. Bottom: live preview, next-run timeline, and save/cancel actions. Keep the drawer under 480px wide on desktop.
Empty state: When no cron jobs exist, show an illustration and a single “Create your first schedule” button. Below it, list two suggested presets with one-click creation.
Edge cases
- •Overlapping runs: if a job takes longer than its interval, surface a warning badge and offer a “skip if still running” toggle.
- •Timezone display: always show the configured timezone next to the schedule. Convert UTC timestamps to that zone in the UI.
- •Paused state: dim the entire row, show a “Paused” chip, and hide the next-run column. One click to resume.
- •Bulk actions: select multiple rows via checkboxes to pause, resume, or delete in one operation. Show a sticky bottom bar with the action buttons and a count of selected items.