feat(KB-045): add scheduled tasks automation system
- Add AutomationStore and core automation types for cron-based scheduling - Implement CronRunner engine for executing scheduled automations - Add REST API routes for CRUD operations on automations - Create UI components: ScheduleCard, ScheduleForm, and ScheduledTasksModal - Integrate scheduled tasks into dashboard App.tsx and CLI dashboard command - Add comprehensive tests for store, runner, API, and UI components - Include changeset for the new scheduled tasks feature
This commit is contained in:
gsxdsm
249
packages/dashboard/app/components/ScheduleForm.tsx
Normal file
249
packages/dashboard/app/components/ScheduleForm.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import type { ScheduledTask, ScheduledTaskCreateInput, ScheduleType } from "@kb/core";
|
||||
|
||||
/** Mapping from preset schedule types to their cron expressions. Mirrored from @kb/core. */
|
||||
const PRESET_CRON: Record<Exclude<ScheduleType, "custom">, string> = {
|
||||
hourly: "0 * * * *",
|
||||
daily: "0 0 * * *",
|
||||
weekly: "0 0 * * 1",
|
||||
monthly: "0 0 1 * *",
|
||||
};
|
||||
|
||||
const SCHEDULE_TYPE_LABELS: Record<ScheduleType, string> = {
|
||||
hourly: "Every hour",
|
||||
daily: "Every day (midnight)",
|
||||
weekly: "Every week (Monday)",
|
||||
monthly: "Every month (1st)",
|
||||
custom: "Custom cron expression",
|
||||
};
|
||||
|
||||
/**
|
||||
* Simple cron expression validator (5-field format).
|
||||
* Checks basic structure — authoritative validation happens server-side.
|
||||
*/
|
||||
function isLikelyCron(expr: string): boolean {
|
||||
const parts = expr.trim().split(/\s+/);
|
||||
if (parts.length !== 5) return false;
|
||||
// Each field should contain digits, *, /, -, or ,
|
||||
return parts.every((p) => /^[\d*,/\-]+$/.test(p));
|
||||
}
|
||||
|
||||
interface ScheduleFormProps {
|
||||
/** Existing schedule for editing. Omit for create mode. */
|
||||
schedule?: ScheduledTask;
|
||||
/** Called with form data on submit. */
|
||||
onSubmit: (input: ScheduledTaskCreateInput) => Promise<void>;
|
||||
/** Called when the user cancels. */
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function ScheduleForm({ schedule, onSubmit, onCancel }: ScheduleFormProps) {
|
||||
const isEditing = !!schedule;
|
||||
|
||||
const [name, setName] = useState(schedule?.name ?? "");
|
||||
const [description, setDescription] = useState(schedule?.description ?? "");
|
||||
const [scheduleType, setScheduleType] = useState<ScheduleType>(schedule?.scheduleType ?? "daily");
|
||||
const [cronExpression, setCronExpression] = useState(schedule?.cronExpression ?? "");
|
||||
const [command, setCommand] = useState(schedule?.command ?? "");
|
||||
const [enabled, setEnabled] = useState(schedule?.enabled ?? true);
|
||||
const [timeoutMs, setTimeoutMs] = useState<number>(schedule?.timeoutMs ?? 300000);
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
// Auto-fill cron expression when preset is selected
|
||||
useEffect(() => {
|
||||
if (scheduleType !== "custom") {
|
||||
setCronExpression(PRESET_CRON[scheduleType]);
|
||||
}
|
||||
}, [scheduleType]);
|
||||
|
||||
const validate = useCallback((): boolean => {
|
||||
const e: Record<string, string> = {};
|
||||
if (!name.trim()) e.name = "Name is required";
|
||||
if (!command.trim()) e.command = "Command is required";
|
||||
if (scheduleType === "custom") {
|
||||
if (!cronExpression.trim()) {
|
||||
e.cronExpression = "Cron expression is required for custom schedules";
|
||||
} else if (!isLikelyCron(cronExpression)) {
|
||||
e.cronExpression = "Invalid cron format — expected 5 fields (e.g. '0 */6 * * *')";
|
||||
}
|
||||
}
|
||||
if (timeoutMs < 1000) {
|
||||
e.timeoutMs = "Timeout must be at least 1 second (1000ms)";
|
||||
}
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
}, [name, command, scheduleType, cronExpression, timeoutMs]);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await onSubmit({
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
scheduleType,
|
||||
cronExpression: scheduleType === "custom" ? cronExpression.trim() : undefined,
|
||||
command: command.trim(),
|
||||
enabled,
|
||||
timeoutMs,
|
||||
});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
},
|
||||
[validate, onSubmit, name, description, scheduleType, cronExpression, command, enabled, timeoutMs],
|
||||
);
|
||||
|
||||
const cronFieldId = "schedule-cron";
|
||||
const cronErrorId = "schedule-cron-error";
|
||||
const nameErrorId = "schedule-name-error";
|
||||
const commandErrorId = "schedule-command-error";
|
||||
const timeoutErrorId = "schedule-timeout-error";
|
||||
|
||||
return (
|
||||
<form className="schedule-form" onSubmit={handleSubmit} noValidate>
|
||||
<h4 className="settings-section-heading">
|
||||
{isEditing ? "Edit Schedule" : "New Schedule"}
|
||||
</h4>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="schedule-name">Name</label>
|
||||
<input
|
||||
id="schedule-name"
|
||||
type="text"
|
||||
placeholder="e.g. Update dependencies"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
aria-invalid={!!errors.name}
|
||||
aria-describedby={errors.name ? nameErrorId : undefined}
|
||||
/>
|
||||
{errors.name && (
|
||||
<small id={nameErrorId} className="field-error">{errors.name}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="schedule-description">Description (optional)</label>
|
||||
<textarea
|
||||
id="schedule-description"
|
||||
placeholder="What does this schedule do?"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="schedule-type">Schedule</label>
|
||||
<select
|
||||
id="schedule-type"
|
||||
value={scheduleType}
|
||||
onChange={(e) => setScheduleType(e.target.value as ScheduleType)}
|
||||
>
|
||||
{Object.entries(SCHEDULE_TYPE_LABELS).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor={cronFieldId}>
|
||||
Cron Expression
|
||||
</label>
|
||||
<input
|
||||
id={cronFieldId}
|
||||
type="text"
|
||||
placeholder="* * * * *"
|
||||
value={cronExpression}
|
||||
onChange={(e) => setCronExpression(e.target.value)}
|
||||
disabled={scheduleType !== "custom"}
|
||||
aria-invalid={!!errors.cronExpression}
|
||||
aria-describedby={errors.cronExpression ? cronErrorId : undefined}
|
||||
/>
|
||||
{errors.cronExpression ? (
|
||||
<small id={cronErrorId} className="field-error">{errors.cronExpression}</small>
|
||||
) : (
|
||||
<small>
|
||||
{scheduleType === "custom" ? (
|
||||
<>min hour day month weekday — <a href="https://crontab.guru" target="_blank" rel="noopener noreferrer">crontab.guru</a></>
|
||||
) : (
|
||||
`Auto-filled from preset: ${cronExpression}`
|
||||
)}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="schedule-command">Command</label>
|
||||
<input
|
||||
id="schedule-command"
|
||||
type="text"
|
||||
placeholder="e.g. npm run update-deps"
|
||||
value={command}
|
||||
onChange={(e) => setCommand(e.target.value)}
|
||||
aria-invalid={!!errors.command}
|
||||
aria-describedby={errors.command ? commandErrorId : undefined}
|
||||
/>
|
||||
{errors.command ? (
|
||||
<small id={commandErrorId} className="field-error">{errors.command}</small>
|
||||
) : (
|
||||
<small>Shell command to execute. Runs with your user permissions.</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="schedule-timeout">Timeout (ms)</label>
|
||||
<input
|
||||
id="schedule-timeout"
|
||||
type="number"
|
||||
min={1000}
|
||||
step={1000}
|
||||
value={timeoutMs}
|
||||
onChange={(e) => setTimeoutMs(Number(e.target.value))}
|
||||
aria-invalid={!!errors.timeoutMs}
|
||||
aria-describedby={errors.timeoutMs ? timeoutErrorId : undefined}
|
||||
/>
|
||||
{errors.timeoutMs ? (
|
||||
<small id={timeoutErrorId} className="field-error">{errors.timeoutMs}</small>
|
||||
) : (
|
||||
<small>Maximum execution time in milliseconds (default 300000 = 5 min)</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="schedule-enabled" className="checkbox-label">
|
||||
<input
|
||||
id="schedule-enabled"
|
||||
type="checkbox"
|
||||
checked={enabled}
|
||||
onChange={(e) => setEnabled(e.target.checked)}
|
||||
/>
|
||||
Enabled
|
||||
</label>
|
||||
<small>When disabled, the schedule will not run automatically</small>
|
||||
</div>
|
||||
|
||||
<div className="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm"
|
||||
onClick={onCancel}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? "Saving…" : isEditing ? "Save Changes" : "Create Schedule"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user