187 lines
11 KiB
TypeScript
187 lines
11 KiB
TypeScript
import { useEffect, useReducer, useRef, useState } from 'react';
|
|
import type { ActivityItem, ChatSyncStatus, DashboardEvent } from '../../../../../packages/api-contracts/src/index.js';
|
|
import { useDashboardRealtime } from '../../app/realtime-provider.js';
|
|
import { RedditUsernameLink } from '../../components/reddit-username-link.js';
|
|
import { RedditUserText } from '../../components/reddit-user-text.js';
|
|
import { OriginPostButton } from '../../components/origin-post.js';
|
|
import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
|
|
import {
|
|
createLiveConsoleState,
|
|
reduceLiveConsoleState,
|
|
selectVisibleConsoleEntries,
|
|
type ConsoleEntry,
|
|
type ConsoleLevelFilter,
|
|
} from './live-console-model.js';
|
|
import { useActivityQuery, useFetchAllChatsMutation, useLogsQuery, useSyncStatusQuery, useTriggerChatSyncMutation } from './operations-queries.js';
|
|
import type { RealtimeConnectionSnapshot } from './realtime-client.js';
|
|
import './operations.css';
|
|
|
|
function formatTimestamp(timestamp: number | string): string {
|
|
return new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'medium',
|
|
}).format(typeof timestamp === 'number' ? timestamp : new Date(timestamp));
|
|
}
|
|
|
|
function ActivityView({ items }: { items: readonly ActivityItem[] }) {
|
|
return items.length === 0 ? (
|
|
<p className="feature-empty">No recent operator activity.</p>
|
|
) : (
|
|
<ol className="operations-activity-list">
|
|
{items.map((item) => (
|
|
<li key={`${item.timestamp}-${item.message}`}>
|
|
<span className={`activity-marker ${item.type}`} aria-hidden="true" />
|
|
<AccountOwnerBadge owner={item.owner} />
|
|
<div><strong>{item.postUrl && item.postTitle ? (
|
|
<OriginPostButton post={{ title: item.postTitle, url: item.postUrl, imageUrl: item.imageUrl }}>
|
|
{item.message}
|
|
</OriginPostButton>
|
|
) : <RedditUserText>{item.message}</RedditUserText>}</strong><small>{formatTimestamp(item.timestamp)}{item.recipient && !item.message.includes(`u/${item.recipient}`) ? <> · <RedditUsernameLink username={item.recipient} /></> : null}</small></div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
);
|
|
}
|
|
|
|
function SyncSummary({ status }: { status: ChatSyncStatus }) {
|
|
const progress = status.progress;
|
|
return (
|
|
<div className="sync-summary">
|
|
<div><span className={`pill ${status.syncing ? 'warning' : 'success'}`}>{status.syncing ? `${status.syncingKind ?? 'Unknown'} sync running` : 'Idle'}</span><strong>{status.cachedChats} cached conversations</strong></div>
|
|
{progress ? (
|
|
<div>
|
|
<div className="sync-progress-label"><span>{progress.label ?? progress.phase}</span><strong>{progress.current} of {progress.total}</strong></div>
|
|
<progress aria-label="Sync progress" max={Math.max(1, progress.total)} value={progress.current} />
|
|
</div>
|
|
) : null}
|
|
<dl className="sync-history">
|
|
<div><dt>Last delta sync</dt><dd>{status.lastDeltaSyncAt ? formatTimestamp(status.lastDeltaSyncAt) : 'Never'}</dd></div>
|
|
<div><dt>Last full sync</dt><dd>{status.lastFullSyncAt ? formatTimestamp(status.lastFullSyncAt) : 'Never'}</dd></div>
|
|
</dl>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function connectionLabel(snapshot: RealtimeConnectionSnapshot): string {
|
|
switch (snapshot.status) {
|
|
case 'connected': return 'Realtime connected';
|
|
case 'connecting': return 'Connecting to realtime updates';
|
|
case 'reconnecting': return 'Realtime reconnecting';
|
|
case 'closed': return 'Realtime closed';
|
|
case 'idle': return 'Realtime unavailable';
|
|
}
|
|
}
|
|
|
|
export interface OperationsPageProps {
|
|
realtimeEnabled?: boolean;
|
|
}
|
|
|
|
export function OperationsPage({ realtimeEnabled = true }: OperationsPageProps) {
|
|
const realtime = useDashboardRealtime();
|
|
const activityQuery = useActivityQuery();
|
|
const logsQuery = useLogsQuery();
|
|
const syncQuery = useSyncStatusQuery();
|
|
const syncMutation = useTriggerChatSyncMutation();
|
|
const fetchAllMutation = useFetchAllChatsMutation();
|
|
const [consoleClearNotice, setConsoleClearNotice] = useState(false);
|
|
const [consoleState, dispatchConsole] = useReducer(
|
|
reduceLiveConsoleState,
|
|
createLiveConsoleState(500),
|
|
);
|
|
const connection = realtimeEnabled ? realtime.connection : { status: 'idle', isStale: true } as const;
|
|
const consoleEnd = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
logsQuery.data?.forEach((entry, index) => {
|
|
dispatchConsole({
|
|
type: 'append',
|
|
entry: {
|
|
id: `initial-${entry.timestamp}-${index}`,
|
|
occurredAt: new Date(entry.timestamp).toISOString(),
|
|
level: entry.level,
|
|
message: entry.message,
|
|
data: entry.data,
|
|
},
|
|
});
|
|
});
|
|
}, [logsQuery.data]);
|
|
|
|
useEffect(() => {
|
|
if (!realtimeEnabled) return;
|
|
function onEvent(event: DashboardEvent): void {
|
|
if (event.type === 'log.created') {
|
|
const entry: ConsoleEntry = {
|
|
id: event.id,
|
|
occurredAt: event.occurredAt,
|
|
level: event.payload.level,
|
|
message: event.payload.message,
|
|
data: event.payload.data,
|
|
};
|
|
dispatchConsole({ type: 'append', entry });
|
|
}
|
|
}
|
|
return realtime.subscribe(onEvent);
|
|
}, [realtime, realtimeEnabled]);
|
|
|
|
const visibleEntries = selectVisibleConsoleEntries(consoleState);
|
|
const syncBusy = syncQuery.data?.syncing === true || syncMutation.isPending || fetchAllMutation.isPending;
|
|
|
|
function confirmAndRun(kind: 'full' | 'fetch-all') {
|
|
const confirmed = globalThis.confirm(kind === 'full'
|
|
? 'Run a full chat cache sync? This can take significantly longer than a delta sync.'
|
|
: 'Fetch every chat now? This is a legacy blocking operation and may take a while.');
|
|
if (!confirmed) return;
|
|
if (kind === 'full') syncMutation.mutate('full'); else fetchAllMutation.mutate();
|
|
}
|
|
useEffect(() => {
|
|
if (
|
|
consoleState.isAutoScrollEnabled &&
|
|
!consoleState.isPaused &&
|
|
typeof consoleEnd.current?.scrollIntoView === 'function'
|
|
) {
|
|
consoleEnd.current.scrollIntoView({ block: 'nearest' });
|
|
}
|
|
}, [consoleState.entries, consoleState.isAutoScrollEnabled, consoleState.isPaused]);
|
|
|
|
return (
|
|
<div className="page operations-page">
|
|
<header className="page-header"><div><span className="eyebrow">Observability</span><h1>Operations</h1><p>Human-readable activity, background work, and raw diagnostic output in distinct views.</p></div></header>
|
|
<div aria-label="Realtime connection" className={`connection-banner ${connection.isStale ? 'stale' : ''}`} role="status">
|
|
<strong>{connectionLabel(connection)}</strong>
|
|
{connection.isStale ? <span>State may be stale</span> : <span>Events are updating live</span>}
|
|
</div>
|
|
<div className="operations-summary-grid">
|
|
<section aria-labelledby="operations-activity-heading" className="panel feature-panel" role="region">
|
|
<div className="panel-heading"><div><span className="eyebrow">Readable history</span><h2 id="operations-activity-heading">Activity</h2></div></div>
|
|
{activityQuery.isPending ? <p role="status">Loading activity…</p> : activityQuery.isError ? <p role="alert">{activityQuery.error.message}</p> : <ActivityView items={activityQuery.data} />}
|
|
</section>
|
|
<section aria-labelledby="sync-jobs-heading" className="panel feature-panel" role="region">
|
|
<div className="panel-heading"><div><span className="eyebrow">Background work</span><h2 id="sync-jobs-heading">Sync jobs</h2></div></div>
|
|
{syncQuery.isPending ? <p role="status">Loading sync state…</p> : syncQuery.isError ? <p role="alert">{syncQuery.error.message}</p> : <><SyncSummary status={syncQuery.data} /><div className="header-actions"><button className="button secondary" disabled={syncBusy} onClick={() => syncMutation.mutate('delta')} type="button">Sync latest chats</button><button className="button secondary" disabled={syncBusy} onClick={() => confirmAndRun('full')} type="button">Full cache sync</button><button className="button secondary" disabled={syncBusy} onClick={() => confirmAndRun('fetch-all')} type="button">Fetch all chats</button></div></>}
|
|
{syncMutation.isSuccess ? <p role="status">{syncMutation.data.kind === 'delta' ? 'Delta' : 'Full'} sync started. Progress is shown from server status.</p> : null}
|
|
{fetchAllMutation.isSuccess ? <p role="status">Fetched {fetchAllMutation.data.count} chats.</p> : null}
|
|
{syncMutation.isError ? <p role="alert">{syncMutation.error.message}</p> : null}
|
|
{fetchAllMutation.isError ? <p role="alert">{fetchAllMutation.error.message}</p> : null}
|
|
</section>
|
|
</div>
|
|
<section aria-labelledby="live-console-heading" className="panel console-panel" role="region">
|
|
<div className="panel-heading"><div><span className="eyebrow">Raw diagnostics</span><h2 id="live-console-heading">Live console</h2></div><span className="console-count">{consoleState.entries.length} retained</span></div>
|
|
<div className="console-controls">
|
|
<button aria-pressed={consoleState.isPaused} className="button secondary" onClick={() => dispatchConsole({ type: 'set-paused', paused: !consoleState.isPaused })} type="button">{consoleState.isPaused ? `Resume console (${consoleState.pendingEntries.length})` : 'Pause console'}</button>
|
|
<button className="button secondary" onClick={() => { dispatchConsole({ type: 'clear' }); setConsoleClearNotice(true); }} type="button">Clear local console</button>
|
|
<label>Log level<select aria-label="Log level" onChange={(event) => dispatchConsole({ type: 'set-level', level: event.target.value as ConsoleLevelFilter })} value={consoleState.level}><option value="all">All levels</option><option value="debug">Debug</option><option value="info">Info</option><option value="warn">Warning</option><option value="error">Error</option></select></label>
|
|
<label>Search logs<input aria-label="Search logs" onChange={(event) => dispatchConsole({ type: 'set-search', search: event.target.value })} placeholder="Message or metadata" type="search" value={consoleState.search} /></label>
|
|
<label className="checkbox-control"><input checked={consoleState.isAutoScrollEnabled} onChange={(event) => dispatchConsole({ type: 'set-auto-scroll', enabled: event.target.checked })} type="checkbox" />Auto-scroll</label>
|
|
</div>
|
|
{consoleClearNotice ? <p role="status">Cleared from this browser view. Server logs were not deleted.</p> : null}
|
|
<div aria-live="polite" className="live-console" role="log">
|
|
{logsQuery.isPending ? <p>Loading logs…</p> : visibleEntries.length === 0 ? <p>No logs match the current filters.</p> : visibleEntries.map((entry) => (
|
|
<article className={`console-entry ${entry.level}`} key={entry.id}><time dateTime={entry.occurredAt}>{formatTimestamp(entry.occurredAt)}</time><strong>{entry.level.toUpperCase()}</strong><span><RedditUserText>{entry.message}</RedditUserText></span></article>
|
|
))}
|
|
<div ref={consoleEnd} />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|