feat(web): add jobs audit and settings workspaces
This commit is contained in:
chick
@@ -0,0 +1,480 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
ATTEMPT_STATUSES,
|
||||
JOB_ITEM_TERMINAL_STATES,
|
||||
JOB_STATUSES,
|
||||
MAX_PAGE_SIZE,
|
||||
type Attempt,
|
||||
type Job,
|
||||
type JobItem,
|
||||
type JobPage,
|
||||
type JobPageQuery,
|
||||
type JobStatus,
|
||||
type SortDirection,
|
||||
} from '@multi-simadmin/contracts';
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
const MAX_STRING = 256;
|
||||
const TERMINAL_ITEMS = new Set<string>(JOB_ITEM_TERMINAL_STATES);
|
||||
const JOB_STATUS_SET = new Set<string>(JOB_STATUSES);
|
||||
const ATTEMPT_STATUS_SET = new Set<string>(ATTEMPT_STATUSES);
|
||||
|
||||
type SafeProblem = Pick<NonNullable<JobItem['error']>, 'code' | 'title' | 'status'>;
|
||||
type SafeItem = Omit<JobItem, 'error'> & { readonly error?: SafeProblem };
|
||||
type SafeJob = Omit<Job, 'items'> & { readonly items: readonly SafeItem[] };
|
||||
export interface SafeJobPage {
|
||||
readonly items: readonly SafeJob[];
|
||||
readonly page: JobPage['page'];
|
||||
}
|
||||
|
||||
export interface JobsDataSource {
|
||||
load(query: JobPageQuery, signal: AbortSignal): Promise<unknown>;
|
||||
}
|
||||
export interface JobsPageProps {
|
||||
readonly dataSource?: JobsDataSource;
|
||||
readonly refreshSignal?: number;
|
||||
}
|
||||
|
||||
type SortField = NonNullable<JobPageQuery['sort']>;
|
||||
|
||||
function record(value: unknown): Record<string, unknown> | null {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
||||
? (value as Record<string, unknown>)
|
||||
: null;
|
||||
}
|
||||
function boundedString(value: unknown): string | null {
|
||||
return typeof value === 'string' && value.length > 0 && value.length <= MAX_STRING ? value : null;
|
||||
}
|
||||
function timestamp(value: unknown): string | null {
|
||||
if (typeof value !== 'string' || value.length > MAX_STRING) return null;
|
||||
const time = Date.parse(value);
|
||||
if (!Number.isFinite(time)) return null;
|
||||
const canonical = new Date(time).toISOString();
|
||||
return canonical === value ? value : null;
|
||||
}
|
||||
function parseProblem(value: unknown): SafeProblem | undefined {
|
||||
const source = record(value);
|
||||
if (!source) return undefined;
|
||||
const code = boundedString(source.code);
|
||||
const title = boundedString(source.title);
|
||||
if (
|
||||
!code ||
|
||||
!title ||
|
||||
typeof source.status !== 'number' ||
|
||||
!Number.isInteger(source.status) ||
|
||||
source.status < 100 ||
|
||||
source.status > 599
|
||||
)
|
||||
return undefined;
|
||||
return { code, title, status: source.status };
|
||||
}
|
||||
function hasContractProblem(value: unknown): boolean {
|
||||
const source = record(value);
|
||||
return Boolean(
|
||||
source &&
|
||||
boundedString(source.type) &&
|
||||
boundedString(source.detail) &&
|
||||
boundedString(source.requestId) &&
|
||||
parseProblem(source),
|
||||
);
|
||||
}
|
||||
function parseItem(value: unknown): SafeItem | null {
|
||||
const source = record(value);
|
||||
if (!source) return null;
|
||||
const id = boundedString(source.id);
|
||||
const targetId = boundedString(source.targetId);
|
||||
const state =
|
||||
typeof source.state === 'string' && TERMINAL_ITEMS.has(source.state)
|
||||
? (source.state as SafeItem['state'])
|
||||
: null;
|
||||
if (!id || !targetId || !state) return null;
|
||||
const sourceJobItemId = boundedString(source.sourceJobItemId);
|
||||
const error = parseProblem(source.error);
|
||||
if (source.sourceJobItemId !== undefined && !sourceJobItemId) return null;
|
||||
if (source.error !== undefined && (!error || !hasContractProblem(source.error))) return null;
|
||||
return {
|
||||
id,
|
||||
targetId,
|
||||
state,
|
||||
...(sourceJobItemId ? { sourceJobItemId } : {}),
|
||||
...(error ? { error } : {}),
|
||||
};
|
||||
}
|
||||
function parseAttempt(value: unknown): Attempt | null {
|
||||
const source = record(value);
|
||||
if (!source) return null;
|
||||
const id = boundedString(source.id);
|
||||
const startedAt = timestamp(source.startedAt);
|
||||
const state =
|
||||
typeof source.state === 'string' && ATTEMPT_STATUS_SET.has(source.state)
|
||||
? (source.state as Attempt['state'])
|
||||
: null;
|
||||
if (!id || !startedAt || !state) return null;
|
||||
const finishedAt = timestamp(source.finishedAt);
|
||||
if (source.finishedAt !== undefined && !finishedAt) return null;
|
||||
return { id, state, startedAt, ...(finishedAt ? { finishedAt } : {}) };
|
||||
}
|
||||
function parseJob(value: unknown): SafeJob | null {
|
||||
const source = record(value);
|
||||
if (!source || !Array.isArray(source.items) || !Array.isArray(source.attempts)) return null;
|
||||
const id = boundedString(source.id);
|
||||
const operationId = boundedString(source.operationId);
|
||||
const rootJobId = boundedString(source.rootJobId);
|
||||
const createdAt = timestamp(source.createdAt);
|
||||
const status =
|
||||
typeof source.status === 'string' && JOB_STATUS_SET.has(source.status)
|
||||
? (source.status as JobStatus)
|
||||
: null;
|
||||
if (!id || !operationId || !rootJobId || !createdAt || !status) return null;
|
||||
if (source.items.length > MAX_PAGE_SIZE || source.attempts.length > MAX_PAGE_SIZE) return null;
|
||||
const items = source.items.map(parseItem);
|
||||
const attempts = source.attempts.map(parseAttempt);
|
||||
if (items.some((item) => item === null) || attempts.some((attempt) => attempt === null))
|
||||
return null;
|
||||
const retryOfJobId = boundedString(source.retryOfJobId);
|
||||
if (source.retryOfJobId !== undefined && !retryOfJobId) return null;
|
||||
return {
|
||||
id,
|
||||
operationId,
|
||||
rootJobId,
|
||||
createdAt,
|
||||
status,
|
||||
items: items as SafeItem[],
|
||||
attempts: attempts as Attempt[],
|
||||
...(retryOfJobId ? { retryOfJobId } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
/** Converts an untrusted transport response into the only shape retained by this UI. */
|
||||
export function sanitizeJobPage(value: unknown): SafeJobPage | null {
|
||||
const source = record(value);
|
||||
if (!source || !Array.isArray(source.items)) return null;
|
||||
const page = record(source.page);
|
||||
if (!page) return null;
|
||||
if (
|
||||
source.items.length > MAX_PAGE_SIZE ||
|
||||
!Number.isSafeInteger(page.page) ||
|
||||
(page.page as number) < 1 ||
|
||||
!Number.isSafeInteger(page.pageSize) ||
|
||||
(page.pageSize as number) < 1 ||
|
||||
(page.pageSize as number) > MAX_PAGE_SIZE ||
|
||||
!Number.isSafeInteger(page.total) ||
|
||||
(page.total as number) < 0 ||
|
||||
source.items.length > (page.pageSize as number) ||
|
||||
source.items.length > (page.total as number)
|
||||
)
|
||||
return null;
|
||||
const items: SafeJob[] = [];
|
||||
for (const candidate of source.items) {
|
||||
const parsed = parseJob(candidate);
|
||||
if (!parsed) return null;
|
||||
items.push(parsed);
|
||||
}
|
||||
return {
|
||||
items,
|
||||
page: {
|
||||
page: page.page as number,
|
||||
pageSize: page.pageSize as number,
|
||||
total: page.total as number,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function statusLabel(value: string): string {
|
||||
return value
|
||||
.split('-')
|
||||
.map((part) => part[0]?.toUpperCase() + part.slice(1))
|
||||
.join(' ');
|
||||
}
|
||||
function safeLoadError(value: unknown): SafeProblem | null {
|
||||
return parseProblem(value) ?? null;
|
||||
}
|
||||
|
||||
export function JobsPage({ dataSource, refreshSignal = 0 }: JobsPageProps) {
|
||||
const [result, setResult] = useState<SafeJobPage | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [failed, setFailed] = useState<SafeProblem | true | null>(null);
|
||||
const [manualRefresh, setManualRefresh] = useState(0);
|
||||
const [status, setStatus] = useState<JobStatus | ''>('');
|
||||
const [operation, setOperation] = useState('');
|
||||
const [rootJob, setRootJob] = useState('');
|
||||
const [instance, setInstance] = useState('');
|
||||
const [sort, setSort] = useState<SortField>('createdAt');
|
||||
const [direction, setDirection] = useState<SortDirection>('desc');
|
||||
const [page, setPage] = useState(1);
|
||||
const request = useRef(0);
|
||||
|
||||
const query = useMemo<JobPageQuery>(
|
||||
() => ({
|
||||
...(status ? { status } : {}),
|
||||
...(operation ? { operationId: operation } : {}),
|
||||
...(rootJob ? { rootJobId: rootJob } : {}),
|
||||
...(instance ? { instanceId: instance } : {}),
|
||||
sort,
|
||||
direction,
|
||||
page,
|
||||
pageSize: PAGE_SIZE,
|
||||
}),
|
||||
[direction, instance, operation, page, rootJob, sort, status],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!dataSource) return;
|
||||
const controller = new AbortController();
|
||||
const requestId = ++request.current;
|
||||
setLoading(true);
|
||||
setFailed(null);
|
||||
void dataSource.load(query, controller.signal).then(
|
||||
(raw) => {
|
||||
if (controller.signal.aborted || request.current !== requestId) return;
|
||||
const clean = sanitizeJobPage(raw);
|
||||
if (!clean) {
|
||||
setResult(null);
|
||||
setFailed(true);
|
||||
} else {
|
||||
setResult(clean);
|
||||
}
|
||||
setLoading(false);
|
||||
},
|
||||
(reason: unknown) => {
|
||||
if (controller.signal.aborted || request.current !== requestId) return;
|
||||
setResult(null);
|
||||
setFailed(safeLoadError(reason) ?? true);
|
||||
setLoading(false);
|
||||
},
|
||||
);
|
||||
return () => controller.abort();
|
||||
}, [dataSource, manualRefresh, query, refreshSignal]);
|
||||
|
||||
if (!dataSource) {
|
||||
return (
|
||||
<section aria-labelledby="jobs-title">
|
||||
<h1 id="jobs-title">Jobs</h1>
|
||||
<p role="status" aria-label="Jobs unavailable">
|
||||
Jobs are runtime-unavailable because no jobs data source was provided.
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const total = result?.page.total ?? 0;
|
||||
const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||||
const changeFilter = (change: () => void) => {
|
||||
change();
|
||||
setPage(1);
|
||||
};
|
||||
const changeSort = (field: SortField) => {
|
||||
if (sort === field) setDirection((current) => (current === 'asc' ? 'desc' : 'asc'));
|
||||
else {
|
||||
setSort(field);
|
||||
setDirection('asc');
|
||||
}
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<section aria-labelledby="jobs-title">
|
||||
<header>
|
||||
<h1 id="jobs-title">Jobs</h1>
|
||||
<p>Read-only operation history.</p>
|
||||
</header>
|
||||
<div className="jobs-toolbar">
|
||||
<label>
|
||||
Status
|
||||
<select
|
||||
aria-label="Status"
|
||||
value={status}
|
||||
onChange={(event) =>
|
||||
changeFilter(() => setStatus(event.currentTarget.value as JobStatus | ''))
|
||||
}
|
||||
>
|
||||
<option value="">All statuses</option>
|
||||
{JOB_STATUSES.map((value) => (
|
||||
<option key={value} value={value}>
|
||||
{statusLabel(value)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Operation
|
||||
<input
|
||||
aria-label="Operation"
|
||||
value={operation}
|
||||
onChange={(event) => changeFilter(() => setOperation(event.currentTarget.value))}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Root job
|
||||
<input
|
||||
aria-label="Root job"
|
||||
value={rootJob}
|
||||
onChange={(event) => changeFilter(() => setRootJob(event.currentTarget.value))}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Instance
|
||||
<input
|
||||
aria-label="Instance"
|
||||
value={instance}
|
||||
onChange={(event) => changeFilter(() => setInstance(event.currentTarget.value))}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Refresh jobs"
|
||||
onClick={() => setManualRefresh((value) => value + 1)}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
{loading ? (
|
||||
<p role="status" aria-label="Jobs loading status">
|
||||
Loading jobs…
|
||||
</p>
|
||||
) : null}
|
||||
{failed ? (
|
||||
<div role="alert">
|
||||
<p>
|
||||
Jobs could not be loaded.
|
||||
{failed !== true ? ` ${failed.code}: ${failed.title} (${failed.status})` : ''}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
{!loading && !failed && result?.items.length === 0 ? (
|
||||
<p>No jobs match the current query.</p>
|
||||
) : null}
|
||||
{!loading && !failed && result ? (
|
||||
<>
|
||||
<table aria-label="Jobs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'createdAt'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by created time"
|
||||
onClick={() => changeSort('createdAt')}
|
||||
>
|
||||
Created
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">Job</th>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'operationId'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by operation"
|
||||
onClick={() => changeSort('operationId')}
|
||||
>
|
||||
Operation
|
||||
</button>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
aria-sort={
|
||||
sort === 'status'
|
||||
? direction === 'asc'
|
||||
? 'ascending'
|
||||
: 'descending'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sort by status"
|
||||
onClick={() => changeSort('status')}
|
||||
>
|
||||
Status
|
||||
</button>
|
||||
</th>
|
||||
<th scope="col">Root job</th>
|
||||
<th scope="col">Items</th>
|
||||
<th scope="col">Attempts</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.items.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>{item.createdAt}</td>
|
||||
<th scope="row">{item.id}</th>
|
||||
<td>{item.operationId}</td>
|
||||
<td>{statusLabel(item.status)}</td>
|
||||
<td>{item.rootJobId}</td>
|
||||
<td>
|
||||
{item.items.length === 0 ? (
|
||||
<span>
|
||||
{item.status === 'queued' ||
|
||||
item.status === 'running' ||
|
||||
item.status === 'cancelling'
|
||||
? 'No terminal item results while this job is active.'
|
||||
: 'No terminal item results.'}
|
||||
</span>
|
||||
) : null}
|
||||
{item.items.map((entry) => (
|
||||
<div key={entry.id}>
|
||||
<span>{entry.targetId}</span> — <span>{statusLabel(entry.state)}</span>
|
||||
{entry.error ? (
|
||||
<>
|
||||
{' '}
|
||||
— <span>{entry.error.code}</span> — <span>{entry.error.title}</span> —{' '}
|
||||
<span>{entry.error.status}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
<td>
|
||||
{item.attempts.map((entry) => (
|
||||
<div key={entry.id}>
|
||||
{entry.id} — {statusLabel(entry.state)}
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<nav aria-label="Jobs pagination">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Previous page"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage((value) => value - 1)}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span>
|
||||
Page {page} of {pageCount}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Next page"
|
||||
disabled={page >= pageCount}
|
||||
onClick={() => setPage((value) => value + 1)}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</nav>
|
||||
</>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user