219 lines
7.9 KiB
TypeScript
219 lines
7.9 KiB
TypeScript
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' },
|
|
'browser.imported': { icon: '⇄', tone: 'ok' },
|
|
'browser.importFailed': { icon: '⇄', tone: 'warn' },
|
|
'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()
|
|
);
|
|
}
|