Feat : Log recorder
This commit is contained in:
jeanotx32
216
packages/web/src/components/AgentHistory.tsx
Normal file
216
packages/web/src/components/AgentHistory.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import type { AgentEvent, AgentView, LogEntry } from '@stream-control/shared';
|
||||
import { api } from '../api';
|
||||
import { formatTime } from '../format';
|
||||
|
||||
interface Props {
|
||||
agent: AgentView;
|
||||
/** Entrées reçues en direct depuis l'ouverture du dashboard, toutes VM confondues. */
|
||||
liveLogs: LogEntry[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface EventStyle {
|
||||
icon: string;
|
||||
tone: 'ok' | 'warn' | 'rec' | 'offline' | 'error' | 'info';
|
||||
}
|
||||
|
||||
/**
|
||||
* Pictogramme et couleur par type d'évènement.
|
||||
*
|
||||
* On s'en tient aux glyphes typographiques déjà employés sur les fiches (⏺ ⏸ ⛶ ⚙)
|
||||
* plutôt qu'à des émojis : même graisse, même alignement, lisible à 12 px.
|
||||
*/
|
||||
const EVENT_STYLES: Record<AgentEvent, EventStyle> = {
|
||||
'agent.connected': { icon: '⇢', tone: 'ok' },
|
||||
'agent.disconnected': { icon: '⇠', tone: 'offline' },
|
||||
'agent.enrolled': { icon: '+', tone: 'ok' },
|
||||
'agent.updated': { icon: '⬆', tone: 'ok' },
|
||||
'obs.connected': { icon: '◉', tone: 'ok' },
|
||||
'obs.disconnected': { icon: '◌', tone: 'warn' },
|
||||
'record.started': { icon: '⏺', tone: 'rec' },
|
||||
'record.stopped': { icon: '■', tone: 'offline' },
|
||||
'record.paused': { icon: '⏸', tone: 'warn' },
|
||||
'record.resumed': { icon: '▶', tone: 'ok' },
|
||||
'record.split': { icon: '✂', tone: 'info' },
|
||||
'stream.started': { icon: '⇡', tone: 'rec' },
|
||||
'stream.stopped': { icon: '⇣', tone: 'offline' },
|
||||
'capture.started': { icon: '▣', tone: 'rec' },
|
||||
'capture.stopped': { icon: '□', tone: 'offline' },
|
||||
'watch.started': { icon: '⟳', tone: 'info' },
|
||||
'watch.private': { icon: '⊘', tone: 'warn' },
|
||||
'watch.public': { icon: '◉', tone: 'ok' },
|
||||
'watch.offline': { icon: '○', tone: 'offline' },
|
||||
'watch.failed': { icon: '!', tone: 'warn' },
|
||||
'fullscreen.restored': { icon: '⛶', tone: 'ok' },
|
||||
'fullscreen.failed': { icon: '⛶', tone: 'warn' },
|
||||
'browser.opened': { icon: '⊞', tone: 'info' },
|
||||
'browser.closed': { icon: '⊟', tone: 'offline' },
|
||||
'preset.applied': { icon: '≡', tone: 'ok' },
|
||||
'preset.failed': { icon: '≡', tone: 'warn' },
|
||||
'config.changed': { icon: '⚙', tone: 'info' },
|
||||
'command.failed': { icon: '✖', tone: 'error' },
|
||||
};
|
||||
|
||||
const FILTERS = [
|
||||
{ id: 'all', label: 'Tout' },
|
||||
{ id: 'record', label: 'Enregistrement' },
|
||||
{ id: 'obs', label: 'OBS' },
|
||||
{ id: 'watch', label: 'Surveillance' },
|
||||
{ id: 'issues', label: 'Problèmes' },
|
||||
] as const;
|
||||
|
||||
type FilterId = (typeof FILTERS)[number]['id'];
|
||||
|
||||
/** Le préfixe de l'évènement porte la catégorie ; les entrées sans évènement restent dans « Tout ». */
|
||||
const FILTER_PREFIXES: Record<Exclude<FilterId, 'all' | 'issues'>, string[]> = {
|
||||
record: ['record.', 'capture.', 'stream.'],
|
||||
obs: ['obs.', 'preset.', 'config.'],
|
||||
watch: ['watch.', 'fullscreen.', 'browser.'],
|
||||
};
|
||||
|
||||
function matches(entry: LogEntry, filter: FilterId): boolean {
|
||||
if (filter === 'all') return true;
|
||||
if (filter === 'issues') return entry.level === 'warn' || entry.level === 'error';
|
||||
return FILTER_PREFIXES[filter].some((prefix) => entry.event?.startsWith(prefix));
|
||||
}
|
||||
|
||||
export function AgentHistory({ agent, liveLogs, onClose }: Props) {
|
||||
const [fetched, setFetched] = useState<LogEntry[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<FilterId>('all');
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setFetched(null);
|
||||
setError(null);
|
||||
api
|
||||
.agentLogs(agent.id)
|
||||
.then((result) => {
|
||||
if (!cancelled) setFetched(result.logs);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) setError(err instanceof Error ? err.message : 'Historique indisponible');
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [agent.id]);
|
||||
|
||||
/**
|
||||
* L'historique persistant et le flux temps réel se recouvrent : les entrées
|
||||
* arrivées pendant le chargement figurent dans les deux. L'identifiant de ligne
|
||||
* tranche, et l'ordre décroissant place le plus récent en tête.
|
||||
*/
|
||||
const entries = useMemo(() => {
|
||||
const byId = new Map<number, LogEntry>();
|
||||
for (const entry of fetched ?? []) byId.set(entry.id, entry);
|
||||
for (const entry of liveLogs) {
|
||||
if (entry.agentId === agent.id) byId.set(entry.id, entry);
|
||||
}
|
||||
return [...byId.values()].sort((a, b) => b.id - a.id);
|
||||
}, [agent.id, fetched, liveLogs]);
|
||||
|
||||
const visible = entries.filter((entry) => matches(entry, filter));
|
||||
const days = groupByDay(visible);
|
||||
|
||||
return (
|
||||
<div className="modal-backdrop" onClick={onClose}>
|
||||
<div className="modal modal-tall" onClick={(event) => event.stopPropagation()}>
|
||||
<header className="modal-head">
|
||||
<h2>Historique · {agent.name}</h2>
|
||||
<button className="icon" onClick={onClose}>
|
||||
✕
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="history-filters">
|
||||
{FILTERS.map((entry) => (
|
||||
<button
|
||||
key={entry.id}
|
||||
className={filter === entry.id ? 'chip active' : 'chip'}
|
||||
onClick={() => setFilter(entry.id)}
|
||||
>
|
||||
{entry.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="spacer" />
|
||||
<span className="muted small">{visible.length} évènement(s)</span>
|
||||
</div>
|
||||
|
||||
<div className="modal-body history-body">
|
||||
{error && <p className="error small">{error}</p>}
|
||||
{!error && fetched === null && <p className="muted small">Chargement…</p>}
|
||||
{!error && fetched !== null && visible.length === 0 && (
|
||||
<p className="muted small">
|
||||
{entries.length === 0
|
||||
? "Aucun évènement pour cette VM. L'historique se remplit dès que l'agent se connecte."
|
||||
: 'Aucun évènement pour ce filtre.'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{days.map(([day, dayEntries]) => (
|
||||
<section key={day} className="history-day">
|
||||
<h3 className="history-day-label">{day}</h3>
|
||||
{dayEntries.map((entry) => {
|
||||
const style = entry.event ? EVENT_STYLES[entry.event] : null;
|
||||
return (
|
||||
<div key={entry.id} className={`history-line level-${entry.level}`}>
|
||||
<span className="mono small muted">{formatTime(entry.ts)}</span>
|
||||
<span
|
||||
className={`history-icon ${style?.tone ?? 'info'}`}
|
||||
title={entry.event ?? 'évènement non typé'}
|
||||
>
|
||||
{style?.icon ?? '·'}
|
||||
</span>
|
||||
<span className="history-message">{entry.message}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<footer className="modal-foot">
|
||||
<span className="muted small">
|
||||
Les entrées les plus anciennes sont purgées avec le journal global.
|
||||
</span>
|
||||
<div className="spacer" />
|
||||
<button className="ghost" onClick={onClose}>
|
||||
Fermer
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Regroupe par jour en conservant l'ordre décroissant reçu. */
|
||||
function groupByDay(entries: LogEntry[]): Array<[string, LogEntry[]]> {
|
||||
const groups = new Map<string, LogEntry[]>();
|
||||
for (const entry of entries) {
|
||||
const day = dayLabel(entry.ts);
|
||||
const bucket = groups.get(day);
|
||||
if (bucket) bucket.push(entry);
|
||||
else groups.set(day, [entry]);
|
||||
}
|
||||
return [...groups.entries()];
|
||||
}
|
||||
|
||||
function dayLabel(ts: number): string {
|
||||
const date = new Date(ts);
|
||||
const today = new Date();
|
||||
const yesterday = new Date(today.getTime() - 86_400_000);
|
||||
|
||||
if (isSameDay(date, today)) return "Aujourd'hui";
|
||||
if (isSameDay(date, yesterday)) return 'Hier';
|
||||
return date.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' });
|
||||
}
|
||||
|
||||
function isSameDay(a: Date, b: Date): boolean {
|
||||
return (
|
||||
a.getFullYear() === b.getFullYear() &&
|
||||
a.getMonth() === b.getMonth() &&
|
||||
a.getDate() === b.getDate()
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user