plum-e2e 1.1.0 → 1.2.0

package/frontend/src/routes/scheduled-tests/+page.svelte

@@ -18,17 +18,27 @@
 <script>
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
-	import { fetchSchedules, fetchCronJobs, saveCronJob, deleteCronJob } from '$lib/api/schedules';
+	import { fetchCronJobs, saveCronJob, deleteCronJob } from '$lib/api/schedules';
+	import { activeCronJobs } from '$lib/stores/runner';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import Modal from '$lib/components/ui/Modal.svelte';
 
 	const CRON_REGEX =
-		/^(\*|([0-5]?[0-9])) (\*|([01]?[0-9]|2[0-3])) (\*|([01]?[0-9]|3[01])) (\*|([1-9]|1[0-2])) (\*|[0-6])$/;
+		/^(\*|([0-5]?[0-9])|\*\/[0-9]+) (\*|([01]?[0-9]|2[0-3])) (\*|([01]?[0-9]|3[01])) (\*|([1-9]|1[0-2])) (\*|[0-6](-[0-6])?)$/;
+
+	const CUSTOM_SENTINEL = '__custom__';
+	const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+	const scheduleOptions = [
+		{ label: 'Every minute', value: '* * * * *' },
+		{ label: 'Every hour', value: '0 * * * *' },
+		{ label: 'Every midnight', value: '0 0 * * *' },
+		{ label: 'Every Sunday', value: '0 0 * * 0' }
+	];
 
 	let cronJobs = [];
-	let scheduleOptions = [];
-	let toast = null; // { type: 'success' | 'error', message }
+	let toast = null;
 
 	let modalOpen = false;
 	let deleteModalOpen = false;
@@ -36,18 +46,68 @@
 	let editTaskName = '';
 	let taskToDelete = '';
 
-	let form = { taskName: '', cronExpression: '', tags: '' };
+	const WORKER_OPTIONS = [1, 2, 4, 8];
+
+	let form = { taskName: '', cronExpression: '', tags: '', workers: 1 };
+	let selectedSchedule = '';
+	let useCustomCron = false;
 	let formError = '';
 
+	function describeCron(expr) {
+		if (!expr) return '';
+		const parts = expr.trim().split(/\s+/);
+		if (parts.length !== 5) return '';
+		const [min, hour, dom, month, dow] = parts;
+
+		const fmt = (h, m) => {
+			const ap = h >= 12 ? 'PM' : 'AM';
+			return `${h % 12 || 12}:${String(m).padStart(2, '0')} ${ap}`;
+		};
+		const isNum = (s) => /^\d+$/.test(s);
+		const h = isNum(hour) ? +hour : null;
+		const m = isNum(min) ? +min : null;
+
+		if (expr === '* * * * *') return 'Every minute';
+		const everyN = min.match(/^\*\/(\d+)$/);
+		if (everyN && hour === '*' && dom === '*' && month === '*' && dow === '*')
+			return `Every ${everyN[1]} minutes`;
+		if (m !== null && hour === '*' && dom === '*' && month === '*' && dow === '*')
+			return `Every hour at :${String(m).padStart(2, '0')}`;
+		if (m !== null && h !== null && dom === '*' && month === '*' && dow === '1-5')
+			return `Weekdays at ${fmt(h, m)}`;
+		if (m !== null && h !== null && dom === '*' && month === '*' && dow === '*')
+			return `Daily at ${fmt(h, m)}`;
+		if (m !== null && h !== null && dom === '*' && month === '*' && /^\d$/.test(dow))
+			return `Every ${DAYS[+dow]} at ${fmt(h, m)}`;
+		const d = isNum(dom) ? +dom : null;
+		if (m !== null && h !== null && d !== null && month === '*' && dow === '*') {
+			const sfx = d === 1 ? 'st' : d === 2 ? 'nd' : d === 3 ? 'rd' : 'th';
+			return `Monthly on the ${d}${sfx} at ${fmt(h, m)}`;
+		}
+		return '';
+	}
+
 	function showToast(type, message) {
 		toast = { type, message };
 		setTimeout(() => (toast = null), 4000);
 	}
 
+	function handleScheduleChange(e) {
+		if (e.target.value === CUSTOM_SENTINEL) {
+			useCustomCron = true;
+			form.cronExpression = '';
+		} else {
+			useCustomCron = false;
+			form.cronExpression = e.target.value;
+		}
+	}
+
 	function openAddModal() {
 		isEditing = false;
 		editTaskName = '';
-		form = { taskName: '', cronExpression: '', tags: '' };
+		form = { taskName: '', cronExpression: '', tags: '', workers: 1 };
+		selectedSchedule = '';
+		useCustomCron = false;
 		formError = '';
 		modalOpen = true;
 	}
@@ -55,7 +115,15 @@
 	function openEditModal(job) {
 		isEditing = true;
 		editTaskName = job.taskName;
-		form = { taskName: job.taskName, cronExpression: job.cronExpression, tags: job.tags };
+		form = {
+			taskName: job.taskName,
+			cronExpression: job.cronExpression,
+			tags: job.tags,
+			workers: job.workers ?? 1
+		};
+		const isPreset = scheduleOptions.some((o) => o.value === job.cronExpression);
+		useCustomCron = !isPreset;
+		selectedSchedule = isPreset ? job.cronExpression : CUSTOM_SENTINEL;
 		formError = '';
 		modalOpen = true;
 	}
@@ -110,10 +178,12 @@
 	}
 
 	onMount(async () => {
-		[cronJobs, scheduleOptions] = await Promise.all([fetchCronJobs(), fetchSchedules()]);
+		cronJobs = await fetchCronJobs();
 	});
 </script>
 
+<svelte:head><title>Scheduled Tests — Plum</title></svelte:head>
+
 <!-- Add/Edit modal -->
 <Modal bind:open={modalOpen} title={isEditing ? 'Edit Cron Job' : 'New Cron Job'}>
 	<form on:submit|preventDefault={handleSave} class="modal-form">
@@ -138,12 +208,35 @@
 			<div class="field-label">
 				<span>Schedule</span>
 			</div>
-			<select class="field-input" bind:value={form.cronExpression} required>
-				<option value="" disabled selected>Select a schedule</option>
+			<select
+				class="field-input"
+				bind:value={selectedSchedule}
+				on:change={handleScheduleChange}
+				required
+			>
+				<option value="" disabled>Select a schedule</option>
 				{#each scheduleOptions as opt}
 					<option value={opt.value}>{opt.label}</option>
 				{/each}
+				<option value={CUSTOM_SENTINEL}>Custom…</option>
 			</select>
+
+			{#if useCustomCron}
+				<input
+					type="text"
+					class="field-input cron-input"
+					bind:value={form.cronExpression}
+					placeholder="0 9 * * 1-5"
+					spellcheck="false"
+				/>
+				{#if form.cronExpression}
+					<p class="cron-desc" class:cron-invalid={!CRON_REGEX.test(form.cronExpression)}>
+						{CRON_REGEX.test(form.cronExpression)
+							? describeCron(form.cronExpression) || form.cronExpression
+							: 'Invalid cron expression'}
+					</p>
+				{/if}
+			{/if}
 		</div>
 
 		<div class="field">
@@ -160,6 +253,26 @@
 			/>
 		</div>
 
+		<div class="field">
+			<div class="field-label">
+				<span>Runners</span>
+				<span class="field-hint">Parallel workers for this job</span>
+			</div>
+			<div class="seg-control">
+				{#each WORKER_OPTIONS as n}
+					<button
+						type="button"
+						class="seg-btn"
+						class:active={form.workers === n}
+						on:click={() => (form.workers = n)}
+					>
+						<span class="seg-num">{n}</span>
+						<span class="seg-label">{n === 1 ? 'runner' : 'runners'}</span>
+					</button>
+				{/each}
+			</div>
+		</div>
+
 		{#if formError}
 			<p class="form-error">{formError}</p>
 		{/if}
@@ -209,19 +322,30 @@
 						<th>Name</th>
 						<th>Schedule</th>
 						<th>Tags</th>
+						<th>Runners</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
 				<tbody>
 					{#each cronJobs as job, i}
 						<tr style="animation-delay: {i * 45}ms" class="job-row">
-							<td class="job-name">{job.taskName}</td>
+							<td class="job-name">
+								{#if $activeCronJobs[job.taskName]}
+									<span class="running-dot" title="Running now"></span>
+								{/if}
+								{job.taskName}
+							</td>
 							<td>
 								<Badge variant="schedule">{cronLabel(job.cronExpression)}</Badge>
 							</td>
 							<td>
 								<span class="tag-text">{job.tags}</span>
 							</td>
+							<td>
+								<span class="workers-badge" class:multi={job.workers > 1}>
+									×{job.workers}
+								</span>
+							</td>
 							<td class="actions-cell">
 								<Button variant="ghost" size="sm" on:click={() => openEditModal(job)}>Edit</Button>
 								<Button variant="danger" size="sm" on:click={() => openDeleteModal(job.taskName)}
@@ -276,6 +400,31 @@
 	.job-name {
 		font-weight: 400;
 		font-size: 0.875rem;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.running-dot {
+		display: inline-block;
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--pass);
+		flex-shrink: 0;
+		animation: statusPulse 1.6s ease-in-out infinite;
+	}
+
+	@keyframes statusPulse {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.4;
+			transform: scale(0.65);
+		}
 	}
 
 	.tag-text {
@@ -324,4 +473,91 @@
 		gap: 0.625rem;
 		padding-top: 0.25rem;
 	}
+
+	/* Custom cron input */
+	.cron-input {
+		margin-top: 0.5rem;
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.875rem;
+		letter-spacing: 0.03em;
+	}
+
+	.cron-desc {
+		margin-top: 0.375rem;
+		font-size: 0.8rem;
+		color: var(--pass);
+	}
+
+	.cron-desc.cron-invalid {
+		color: var(--fail);
+	}
+
+	/* Segmented control */
+	.seg-control {
+		display: flex;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		width: fit-content;
+	}
+
+	.seg-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 0.375rem 0.875rem;
+		font-family: inherit;
+		background: var(--bg-elevated);
+		color: var(--text-muted);
+		border: none;
+		border-right: 1px solid var(--border);
+		cursor: pointer;
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast);
+	}
+
+	.seg-num {
+		font-size: 0.875rem;
+		font-weight: 600;
+		line-height: 1.2;
+	}
+
+	.seg-label {
+		font-size: 0.625rem;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		opacity: 0.75;
+		line-height: 1.2;
+	}
+
+	.seg-btn:last-child {
+		border-right: none;
+	}
+
+	.seg-btn:hover {
+		background: var(--bg-subtle);
+		color: var(--text);
+	}
+
+	.seg-btn.active {
+		background: var(--accent);
+		color: #fff;
+	}
+
+	.seg-btn.active .seg-label {
+		opacity: 0.85;
+	}
+
+	/* Workers badge in table */
+	.workers-badge {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.75rem;
+		color: var(--text-muted);
+	}
+
+	.workers-badge.multi {
+		color: var(--accent);
+		font-weight: 500;
+	}
 </style>