273 lines
11 KiB
TypeScript
273 lines
11 KiB
TypeScript
import { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { api } from '../api/client';
|
|
import { useAction, useQuery } from '../lib/hooks';
|
|
import { useToast } from '../lib/toast';
|
|
import { ago, duration, interval, num, until, when } from '../lib/format';
|
|
import { compareTasks, retimed, runTone, statusDot, taskStatus } from '../lib/tasks';
|
|
import {
|
|
Banner,
|
|
Button,
|
|
Card,
|
|
EmptyRow,
|
|
Loading,
|
|
Note,
|
|
PageHead,
|
|
TableWrap,
|
|
Tag,
|
|
Tiles,
|
|
} from '../components/ui';
|
|
import type { ScheduledTask, TasksResponse } from '../api/types';
|
|
|
|
/* Scheduled tasks: what the gateway does when nobody is watching.
|
|
*
|
|
* A directory, and — following the Users page it is now shaped like — very nearly only a
|
|
* directory. It was a stack of cards holding a paragraph, a select and two switches per
|
|
* task, which meant the one question this page is opened with, "is anything wrong", had to
|
|
* be answered by reading every entry in turn. One row per task answers it by scanning a
|
|
* column, and everything you can *do* to a task beyond starting it lives on the task's own
|
|
* page.
|
|
*
|
|
* Run now is the exception that stays in the row. It is the only action here that is not a
|
|
* change of configuration — it asks for something to happen once, and it is what an
|
|
* operator comes to this page to press.
|
|
*
|
|
* Polled faster than the console's own heartbeat while a task is running, because having
|
|
* pressed it the next thing they do is watch for the outcome, and a thirty-second poll
|
|
* makes a two-second job look like one that did nothing. */
|
|
|
|
const IDLE_POLL_MS = 20_000;
|
|
const BUSY_POLL_MS = 3_000;
|
|
|
|
export function TasksPage() {
|
|
const { wrap } = useToast();
|
|
const { busy, run } = useAction();
|
|
const [fast, setFast] = useState(false);
|
|
const { data, error, loading, reload } = useQuery<TasksResponse>('/admin/api/tasks?limit=60', {
|
|
pollMs: fast ? BUSY_POLL_MS : IDLE_POLL_MS,
|
|
});
|
|
|
|
const tasks = data?.tasks ?? [];
|
|
const anyRunning = tasks.some((task) => task.running);
|
|
if (anyRunning !== fast) setFast(anyRunning);
|
|
|
|
const runNow = (task: ScheduledTask) =>
|
|
run(task.id, async () => {
|
|
await wrap(
|
|
() => api.post(`/admin/api/tasks/${encodeURIComponent(task.id)}/run`),
|
|
`${task.name} started.`,
|
|
);
|
|
await reload();
|
|
});
|
|
|
|
const failures = tasks.filter((task) => task.lastRun?.status === 'failed').length;
|
|
const offSchedule = tasks.filter(retimed).length;
|
|
const disabled = tasks.filter((task) => !task.enabled).length;
|
|
|
|
const rows = [...tasks].sort(compareTasks);
|
|
|
|
return (
|
|
<>
|
|
<PageHead
|
|
title="Scheduled tasks"
|
|
intro="The gateway's background work: what it does, when it last ran, how long it took and whether it worked. Every one of these can be started by hand."
|
|
/>
|
|
|
|
<Banner message={error} />
|
|
|
|
{loading ? (
|
|
<Loading />
|
|
) : (
|
|
<>
|
|
<Tiles
|
|
tiles={[
|
|
{ label: 'Tasks', value: num(tasks.length), icon: 'clock', tone: 'info' },
|
|
{
|
|
label: 'Running now',
|
|
value: num(tasks.filter((task) => task.running).length),
|
|
icon: 'pulse',
|
|
tone: anyRunning ? 'ok' : undefined,
|
|
},
|
|
{
|
|
label: 'Last run failed',
|
|
value: num(failures),
|
|
icon: 'alert',
|
|
tone: failures > 0 ? 'bad' : undefined,
|
|
},
|
|
{
|
|
label: 'Switched off',
|
|
value: num(disabled),
|
|
icon: 'power',
|
|
tone: disabled > 0 ? 'warn' : undefined,
|
|
},
|
|
// Worth a tile of its own: a retimed task is the most likely explanation for
|
|
// "why has this not run", and it is invisible on a page that only prints the
|
|
// cadence currently in force.
|
|
{
|
|
label: 'Retimed',
|
|
value: num(offSchedule),
|
|
icon: 'clock',
|
|
tone: offSchedule > 0 ? 'note' : undefined,
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{failures > 0 ? (
|
|
<Note tone="bad">
|
|
A failed task publishes an administrative event, so the failure is in the activity feed and
|
|
wherever your integrations send it — you did not have to be looking at this page.
|
|
</Note>
|
|
) : null}
|
|
|
|
<Card
|
|
title="Tasks"
|
|
intro="Anything wrong sorts to the top. Open a task to change its schedule, switch it off, or read its own run history."
|
|
icon="clock"
|
|
tone="info"
|
|
>
|
|
<TableWrap>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Task</th>
|
|
<th>Service</th>
|
|
<th>Schedule</th>
|
|
<th>Last run</th>
|
|
<th className="num">Took</th>
|
|
<th>Next run</th>
|
|
<th>Status</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.length === 0 ? (
|
|
<EmptyRow columns={8}>This gateway has no scheduled tasks registered.</EmptyRow>
|
|
) : (
|
|
rows.map((task) => {
|
|
const status = taskStatus(task);
|
|
const last = task.lastRun;
|
|
const href = `/admin/tasks/${encodeURIComponent(task.id)}`;
|
|
return (
|
|
<tr key={task.id}>
|
|
{/* The name is the row's primary element and everything under it
|
|
is quieter, so a column of forty reads as a list of names
|
|
rather than as forty paragraphs. */}
|
|
<td>
|
|
<Link className="table-row-link" to={href}>
|
|
{task.name}
|
|
</Link>
|
|
<span className="table-sub">{task.description}</span>
|
|
</td>
|
|
<td className="muted nowrap">{task.group || 'Other'}</td>
|
|
{/* The declared cadence sits under an overridden one rather than
|
|
beside it: what happens next is the answer, and what the code
|
|
asked for is the footnote explaining why the row is retimed. */}
|
|
<td className="nowrap">
|
|
{interval(task.intervalSeconds)}
|
|
{retimed(task) ? (
|
|
<span className="table-sub">
|
|
default {interval(task.defaultIntervalSeconds)}
|
|
</span>
|
|
) : null}
|
|
</td>
|
|
<td className="nowrap muted" title={last ? when(last.startedAt) : undefined}>
|
|
{last ? ago(last.startedAt) : 'never'}
|
|
{/* Only a failure earns a sub-line. A detail under every
|
|
successful row is a column of noise, and the detail is on
|
|
the task's own page either way. */}
|
|
{last?.error ? <span className="table-sub">{last.error}</span> : null}
|
|
</td>
|
|
<td className="num muted">{last ? duration(last.durationMs) : '—'}</td>
|
|
{/* A switched-off task still has a next run in the scheduler's
|
|
records and it is not going to happen, so the column says so
|
|
rather than printing a time that will pass with nothing at
|
|
the end of it. */}
|
|
<td className="nowrap muted">
|
|
{!task.enabled ? '—' : task.running ? 'now' : until(task.nextRun)}
|
|
</td>
|
|
<td className="nowrap">
|
|
<span className="row tight">
|
|
<span className="dot-state" data-tone={statusDot(status)} />
|
|
<Tag tone={status.tone}>
|
|
<span title={status.title}>{status.label}</span>
|
|
</Tag>
|
|
</span>
|
|
</td>
|
|
<td className="nowrap">
|
|
<span className="row tight">
|
|
<Button
|
|
size="sm"
|
|
icon="play"
|
|
busy={busy === task.id}
|
|
disabled={task.running}
|
|
title={`Run ${task.name} now`}
|
|
onClick={() => void runNow(task)}
|
|
/>
|
|
<Link className="table-row-link" to={href}>
|
|
Details
|
|
</Link>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</TableWrap>
|
|
</Card>
|
|
|
|
<Card
|
|
title="Recent runs"
|
|
intro="Every task together and in order, which is what shows two jobs interfering with each other."
|
|
icon="history"
|
|
tone="note"
|
|
>
|
|
<TableWrap>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th className="nowrap">Started</th>
|
|
<th>Task</th>
|
|
<th>Trigger</th>
|
|
<th>Result</th>
|
|
<th className="num">Took</th>
|
|
<th>Detail</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(data?.runs.length ?? 0) === 0 ? (
|
|
<EmptyRow columns={6}>No task has run yet.</EmptyRow>
|
|
) : (
|
|
data?.runs.map((entry) => (
|
|
<tr key={entry.id}>
|
|
<td className="nowrap muted" title={when(entry.startedAt)}>
|
|
{ago(entry.startedAt)}
|
|
</td>
|
|
<td>
|
|
<Link
|
|
className="table-row-link"
|
|
to={`/admin/tasks/${encodeURIComponent(entry.taskId)}`}
|
|
>
|
|
{tasks.find((task) => task.id === entry.taskId)?.name ?? entry.taskId}
|
|
</Link>
|
|
</td>
|
|
<td className="muted">{entry.trigger}</td>
|
|
<td>
|
|
<Tag tone={runTone(entry.status)}>{entry.status}</Tag>
|
|
</td>
|
|
<td className="num muted">{duration(entry.durationMs)}</td>
|
|
<td className="muted">{entry.error || entry.detail || '—'}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</TableWrap>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|