Mia.Wu/scheduler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show completion in frontend

Browse Source
This commit is contained in:
Mia Wu
2026-07-15 11:18:38 -04:00
parent 425d418426
commit b3116f60e2
11 changed files with 265 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+45 -2
View File
@@ -170,6 +170,7 @@ export default function App() {
const [startDateOverride, setStartDateOverride] = useState('')
const [failedTests, setFailedTests] = useState([])
const [scheduleData, setScheduleData] = useState({})
const [previousScheduleData, setPreviousScheduleData] = useState({})
const [scheduleWindows, setScheduleWindows] = useState([])
const [selectedWindowId, setSelectedWindowId] = useState(null)
const [completionDate, setCompletionDate] = useState(null)
@@ -202,13 +203,54 @@ export default function App() {
// Fetch schedule for the given weekStart (Monday)
const fetchSchedule = useCallback(async (start) => {
try {
const data = await api.getScheduleWeek(toKey(start))
const key = toKey(start)
const loadLegacyWeek = async () => {
const data = await api.getScheduleWeek(key)
setScheduleData(groupScheduleItems(data.items))
setPreviousScheduleData({})
setScheduleWindows(data.windows ?? [])
setCompletionDate(data.completion_date ?? null)
}
try {
let versionsData = null
try {
versionsData = await api.getScheduleVersions()
} catch (_versionErr) {
// Fallback for older backend builds that do not expose /schedule/versions yet.
await loadLegacyWeek()
return
}
const versions = versionsData.versions ?? []
const latestVersion = versions[0]?.schedule_version ?? null
const previousVersion = versions[1]?.schedule_version ?? null
if (latestVersion === null) {
await loadLegacyWeek()
return
}
const latestData = await api.getScheduleWeek(key, latestVersion)
setScheduleData(groupScheduleItems(latestData.items))
setScheduleWindows(latestData.windows ?? [])
setCompletionDate(latestData.completion_date ?? null)
if (previousVersion !== null) {
const previousData = await api.getScheduleWeek(key, previousVersion)
setPreviousScheduleData(groupScheduleItems(previousData.items))
} else {
setPreviousScheduleData({})
}
} catch (e) {
console.error('Failed to fetch schedule:', e)
try {
await loadLegacyWeek()
} catch (fallbackErr) {
console.error('Fallback schedule fetch also failed:', fallbackErr)
}
}
}, [])
@@ -371,6 +413,7 @@ export default function App() {
<div className="flex-1 min-w-0 flex flex-col">
<Calendar
scheduleData={scheduleData}
previousScheduleData={previousScheduleData}
daytimeDateKey={null}
weekStart={weekStart}
onWeekChange={setWeekStart}
frontend/src/api.js
+8 -1
View File
@@ -30,7 +30,14 @@ export const api = {
// Schedule
compileSchedule: (opts) => request('POST', '/schedule/compile', opts),
getScheduleWeek: (start) => request('GET', `/schedule/week?start=${start}`),
getScheduleVersions: () => request('GET', '/schedule/versions'),
getScheduleWeek: (start, version = null) => {
const params = new URLSearchParams({ start })
if (version !== null && version !== undefined) {
params.set('version', String(version))
}
return request('GET', `/schedule/week?${params.toString()}`)
},
getRerunTests: () => request('GET', '/tests/rerun'),
}
frontend/src/components/Calendar.jsx
+51 -6
View File
@@ -23,6 +23,14 @@ function toDateKey(date) {
return date.toISOString().slice(0, 10)
}
function emptyDayShifts() {
return { shift1: [], shift2: [], shift3: [] }
}
function dayHasTests(shifts = {}) {
return (shifts.shift1?.length ?? 0) > 0 || (shifts.shift2?.length ?? 0) > 0 || (shifts.shift3?.length ?? 0) > 0
}
function getMondayOfWeek(date) {
const d = new Date(date)
const day = d.getDay()
@@ -51,6 +59,7 @@ function getNextTestWindow() {
// scheduleData: { "YYYY-MM-DD": { shift1: [...], shift2: [...], shift3: [...] }, ... }
export default function Calendar({
scheduleData = {},
previousScheduleData = {},
daytimeDateKey = null,
weekStart,
onWeekChange,
@@ -75,6 +84,34 @@ export default function Calendar({
// Reorder columns: Sun Mon Tue Wed Thu Fri Sat
// weekStart is Monday, so days[0]=Mon ... days[6]=Sun → put Sunday first
const orderedDays = [ ...days.slice(0, 7)]
const daySourceByKey = useMemo(() => {
const out = {}
for (const date of orderedDays) {
const key = toDateKey(date)
const latestDay = scheduleData[key] ?? emptyDayShifts()
const previousDay = previousScheduleData[key] ?? emptyDayShifts()
if (dayHasTests(latestDay)) {
out[key] = 'current'
} else if (dayHasTests(previousDay)) {
out[key] = 'previous'
} else {
out[key] = 'current'
}
}
return out
}, [orderedDays, scheduleData, previousScheduleData])
const mergedScheduleData = useMemo(() => {
const out = {}
for (const date of orderedDays) {
const key = toDateKey(date)
const source = daySourceByKey[key]
out[key] = source === 'previous'
? (previousScheduleData[key] ?? emptyDayShifts())
: (scheduleData[key] ?? emptyDayShifts())
}
return out
}, [orderedDays, daySourceByKey, scheduleData, previousScheduleData])
const shiftMinRows = useMemo(() => {
const minima = {
shift2: DEFAULT_SHIFT_MIN_ROWS,
@@ -84,9 +121,9 @@ export default function Calendar({
for (const date of orderedDays) {
const key = toDateKey(date)
const shifts = scheduleData[key] ?? { shift1: [], shift2: [], shift3: [] }
const shifts = mergedScheduleData[key] ?? emptyDayShifts()
const nextKey = toDateKey(addDays(date, 1))
const nextDayShift1 = scheduleData[nextKey]?.shift1 ?? []
const nextDayShift1 = mergedScheduleData[nextKey]?.shift1 ?? []
minima.shift2 = Math.max(minima.shift2, shifts.shift2.length || DEFAULT_SHIFT_MIN_ROWS)
minima.shift3 = Math.max(minima.shift3, shifts.shift3.length || DEFAULT_SHIFT_MIN_ROWS)
@@ -94,7 +131,7 @@ export default function Calendar({
}
return minima
}, [orderedDays, scheduleData])
}, [orderedDays, mergedScheduleData])
const slotHeights = useMemo(() => {
const calcSlotHeight = (rows) => {
const safeRows = Math.max(DEFAULT_SHIFT_MIN_ROWS, rows || DEFAULT_SHIFT_MIN_ROWS)
@@ -111,7 +148,7 @@ export default function Calendar({
const totalShiftHeightPx = slotHeights.shift2 + slotHeights.shift3 + slotHeights.nextDayShift1
const deviceLegendItems = Array.from(
new Set(
Object.values(scheduleData)
Object.values(mergedScheduleData)
.flatMap((day) => [
...(day?.shift1 ?? []),
...(day?.shift2 ?? []),
@@ -200,13 +237,15 @@ export default function Calendar({
<div className="flex gap-1.5 flex-1 overflow-x-auto">
{orderedDays.map((date) => {
const key = toDateKey(date)
const shifts = scheduleData[key] ?? { shift1: [], shift2: [], shift3: [] }
const shifts = mergedScheduleData[key] ?? emptyDayShifts()
const isToday = date.getTime() === today.getTime()
const isWeekend = date.getDay() === 0 || date.getDay() === 6
// Get next day's shift1 for display
const nextDate = addDays(date, 1)
const nextKey = toDateKey(nextDate)
const nextDayShift1 = scheduleData[nextKey]?.shift1 ?? []
const nextDayShift1 = mergedScheduleData[nextKey]?.shift1 ?? []
const shiftVariant = daySourceByKey[key] === 'previous' ? 'previous' : 'current'
const nextDayShift1Variant = daySourceByKey[nextKey] === 'previous' ? 'previous' : 'current'
// Which shifts on this date are part of the active test window?
const activeShifts = new Set()
if (key === activeWindow.shift3Date) activeShifts.add(3)
@@ -222,6 +261,11 @@ export default function Calendar({
shifts={shifts}
nextDayShift1={nextDayShift1}
nextDayShift1Active={nextDayShift1Active}
shiftVariants={{
shift2: shiftVariant,
shift3: shiftVariant,
nextDayShift1: nextDayShift1Variant,
}}
shiftMinRows={shiftMinRows}
slotHeights={slotHeights}
showShift2={isWeekend || (daytimeDateKey !== null && key === daytimeDateKey)}
@@ -238,6 +282,7 @@ export default function Calendar({
<span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-gray-500 inline-block" />Pending</span>
<span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-green-700 inline-block" />Completed</span>
<span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-red-700 inline-block" />Rerun Required</span>
<span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-gray-400/70 inline-block" />Previous Schedule (faded)</span>
{deviceLegendItems.map((device) => (
<span key={device} className="flex items-center gap-1.5">
<span className={`w-2.5 h-2.5 rounded-sm inline-block ${getDeviceAccentClass(device)}`} />
frontend/src/components/DayColumn.jsx
+4
View File
@@ -9,6 +9,7 @@ export default function DayColumn({
shifts = {},
nextDayShift1 = [],
nextDayShift1Active = false,
shiftVariants = { shift2: 'current', shift3: 'current', nextDayShift1: 'current' },
showShift2 = false,
shiftMinRows = { shift2: 1, shift3: 1, nextDayShift1: 1 },
slotHeights = { shift2: 0, shift3: 0, nextDayShift1: 0 },
@@ -52,6 +53,7 @@ export default function DayColumn({
tests={shifts.shift2}
visible={true}
active={activeShifts.has(2)}
variant={shiftVariants.shift2}
windowDetails={getWindowForShift(2)}
minContentRows={shiftMinRows.shift2}
slotHeightPx={slotHeights.shift2}
@@ -61,6 +63,7 @@ export default function DayColumn({
tests={shifts.shift3}
visible={true}
active={activeShifts.has(3)}
variant={shiftVariants.shift3}
windowDetails={getWindowForShift(3)}
minContentRows={shiftMinRows.shift3}
slotHeightPx={slotHeights.shift3}
@@ -70,6 +73,7 @@ export default function DayColumn({
tests={nextDayShift1}
visible={true}
active={nextDayShift1Active}
variant={shiftVariants.nextDayShift1}
windowDetails={getNextDayShift1Window()}
minContentRows={shiftMinRows.nextDayShift1}
slotHeightPx={slotHeights.nextDayShift1}
frontend/src/components/ShiftSlot.jsx
+4 -1
View File
@@ -7,6 +7,7 @@ export default function ShiftSlot({
tests = [],
visible = true,
active = false,
variant = 'current',
windowDetails = null,
minContentRows = 3,
slotHeightPx = null,
@@ -15,6 +16,7 @@ export default function ShiftSlot({
if (!visible) return null
const clickable = Boolean(windowDetails && onWindowSelect)
const isPrevious = variant === 'previous'
const targetRows = Math.max(1, minContentRows)
const minContentHeightPx = (targetRows * TEST_CARD_ROW_HEIGHT_PX) + ((targetRows - 1) * TEST_CARD_ROW_GAP_PX)
const outerMinHeightPx = Number.isFinite(slotHeightPx) && slotHeightPx > 0
@@ -35,7 +37,7 @@ export default function ShiftSlot({
style={{ minHeight: `${outerMinHeightPx}px` }}
className={`border-t pt-1 pb-1.5 transition-colors ${
active ? 'border-blue-500/50 bg-blue-950/20 rounded' : 'border-gray-700/60'
} ${clickable ? 'cursor-pointer hover:bg-gray-700/25 focus:outline-none focus:ring-1 focus:ring-cyan-400/70' : ''}`}
} ${isPrevious ? 'bg-gray-700/15' : ''} ${clickable ? 'cursor-pointer hover:bg-gray-700/25 focus:outline-none focus:ring-1 focus:ring-cyan-400/70' : ''}`}
>
<div
className="flex flex-col gap-0.5 px-1 min-h-4"
@@ -46,6 +48,7 @@ export default function ShiftSlot({
<TestCard
key={`${test.test_id}-${test.device}-${test.scheduled_date ?? 'na'}-${test.shift_index ?? 'na'}-${test.sequence_in_shift ?? index}`}
test={test}
isPrevious={isPrevious}
/>
))
)}
frontend/src/components/TestCard.jsx
+2 -2
View File
@@ -46,7 +46,7 @@ function formatConfig(config) {
return formattedEntries.length > 0 ? formattedEntries.join('; ') : '—'
}
export default function TestCard({ test }) {
export default function TestCard({ test, isPrevious = false }) {
const style = STATUS_STYLES[test.status] ?? STATUS_STYLES.pending
const deviceAccentClass = getDeviceAccentClass(test.device)
const cardRef = useRef(null)
@@ -90,7 +90,7 @@ export default function TestCard({ test }) {
return (
<div ref={cardRef} className="relative">
<div
className={`relative px-1.5 py-0.5 pl-3 rounded border text-xs font-mono truncate cursor-default select-none ${style}`}
className={`relative px-1.5 py-0.5 pl-3 rounded border text-xs font-mono truncate cursor-default select-none ${style} ${isPrevious ? 'opacity-60' : ''}`}
style={{ maxWidth: '100%' }}
>
<span className={`absolute inset-y-0 left-0 w-1 rounded-l ${deviceAccentClass}`} aria-hidden="true" />