310 lines
10 KiB
TypeScript
310 lines
10 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import {
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Clock,
|
|
TrendingUp,
|
|
Zap,
|
|
RefreshCw,
|
|
AlertCircle,
|
|
} from 'lucide-react'
|
|
|
|
interface Evaluation {
|
|
id: number
|
|
source: string
|
|
entity_id: string
|
|
result_real: string
|
|
result_nominal: string
|
|
confidence: number
|
|
evaluated_at: number
|
|
category: string
|
|
judge_method: string
|
|
}
|
|
|
|
interface DivergenceStats {
|
|
total_divergences: number
|
|
by_category: Record<string, number>
|
|
by_judge: Record<string, number>
|
|
recent_24h: number
|
|
high_confidence: number
|
|
}
|
|
|
|
interface DivergenceData {
|
|
divergences: Evaluation[]
|
|
stats: DivergenceStats
|
|
generated_at: string
|
|
}
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.1 },
|
|
},
|
|
}
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.4 },
|
|
},
|
|
}
|
|
|
|
const StatusBadge = ({ status }: { status: string }) => {
|
|
const styles: Record<string, { bg: string; text: string; icon: React.ReactNode }> = {
|
|
'automation-liveness': {
|
|
bg: 'bg-red-500/10',
|
|
text: 'text-red-400',
|
|
icon: <AlertTriangle className="w-4 h-4" />,
|
|
},
|
|
'automation-failure': {
|
|
bg: 'bg-orange-500/10',
|
|
text: 'text-orange-400',
|
|
icon: <AlertCircle className="w-4 h-4" />,
|
|
},
|
|
}
|
|
|
|
const style = styles[status] || styles['automation-failure']
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2 px-3 py-1 rounded-full ${style.bg} text-sm ${style.text}`}>
|
|
{style.icon}
|
|
{status.replace('-', ' ')}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const StatCard = ({
|
|
label,
|
|
value,
|
|
icon: Icon,
|
|
color = 'text-blue-400',
|
|
}: {
|
|
label: string
|
|
value: number | string
|
|
icon: React.ElementType
|
|
color?: string
|
|
}) => (
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="glass-card p-4 rounded-xl flex items-center gap-4"
|
|
>
|
|
<div className={`${color} p-3 rounded-lg bg-white/5`}>
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-white/60">{label}</p>
|
|
<p className="text-2xl font-bold text-white">{value}</p>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
|
|
const DivergenceRow = ({ div }: { div: Evaluation }) => {
|
|
const timestamp = new Date(div.evaluated_at * 1000).toLocaleString('pt-PT')
|
|
const confidenceColor = div.confidence >= 0.95 ? 'bg-green-500' : div.confidence >= 0.9 ? 'bg-yellow-500' : 'bg-orange-500'
|
|
|
|
return (
|
|
<motion.tr
|
|
variants={itemVariants}
|
|
className="border-b border-white/10 hover:bg-white/[0.03] transition-colors"
|
|
>
|
|
<td className="px-4 py-3 text-sm text-white/80 font-mono">{div.id}</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
<code className="bg-white/5 px-2 py-1 rounded text-white/90">{div.entity_id}</code>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
<StatusBadge status={div.category} />
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
<span className="text-red-400">{div.result_real}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-white/60">{div.result_nominal}</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2 h-2 rounded-full ${confidenceColor}`} />
|
|
<span className="text-white/80">{(div.confidence * 100).toFixed(0)}%</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-xs text-white/40">{timestamp}</td>
|
|
</motion.tr>
|
|
)
|
|
}
|
|
|
|
export default function StackObserver() {
|
|
const [data, setData] = useState<DivergenceData | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null)
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true)
|
|
setError(null)
|
|
const response = await fetch('/api/stack-observer')
|
|
if (!response.ok) throw new Error(`API error: ${response.status}`)
|
|
const result = await response.json() as DivergenceData
|
|
setData(result)
|
|
setLastUpdate(new Date())
|
|
} catch (err: unknown) {
|
|
const message = err instanceof Error ? err.message : 'Failed to fetch divergences'
|
|
setError(message)
|
|
console.error('Stack Observer error:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
// Refresh every 30 seconds
|
|
const interval = setInterval(fetchData, 30000)
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
const refreshTime = lastUpdate
|
|
? lastUpdate.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
|
: 'nunca'
|
|
|
|
return (
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6"
|
|
>
|
|
{/* Header */}
|
|
<motion.div variants={itemVariants} className="mb-8">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 rounded-lg bg-red-500/10">
|
|
<Zap className="w-6 h-6 text-red-400" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white">Stack Observer</h1>
|
|
<p className="text-white/60">Monitorização de divergências de automações</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={fetchData}
|
|
disabled={loading}
|
|
className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors disabled:opacity-50"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
Actualizar
|
|
</button>
|
|
</div>
|
|
<p className="text-sm text-white/40">
|
|
Última actualização: {refreshTime} • Auto-refresh a cada 30s
|
|
</p>
|
|
</motion.div>
|
|
|
|
{error && (
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 flex items-center gap-3"
|
|
>
|
|
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
|
{error}
|
|
</motion.div>
|
|
)}
|
|
|
|
{loading && !data ? (
|
|
<motion.div variants={itemVariants} className="text-center py-12">
|
|
<div className="inline-block">
|
|
<div className="animate-spin">
|
|
<Zap className="w-8 h-8 text-blue-400" />
|
|
</div>
|
|
</div>
|
|
<p className="mt-4 text-white/60">Carregando divergências...</p>
|
|
</motion.div>
|
|
) : data ? (
|
|
<>
|
|
{/* Stats Grid */}
|
|
<motion.div variants={containerVariants} className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
|
|
<StatCard
|
|
label="Total Divergências"
|
|
value={data.stats.total_divergences}
|
|
icon={AlertTriangle}
|
|
color="text-red-400"
|
|
/>
|
|
<StatCard
|
|
label="Últimas 24h"
|
|
value={data.stats.recent_24h}
|
|
icon={TrendingUp}
|
|
color="text-orange-400"
|
|
/>
|
|
<StatCard
|
|
label="Alta Confiança (>90%)"
|
|
value={data.stats.high_confidence}
|
|
icon={CheckCircle2}
|
|
color="text-yellow-400"
|
|
/>
|
|
<StatCard
|
|
label="Por Método"
|
|
value={Object.keys(data.stats.by_judge).length}
|
|
icon={Zap}
|
|
color="text-blue-400"
|
|
/>
|
|
<StatCard
|
|
label="Por Categoria"
|
|
value={Object.keys(data.stats.by_category).length}
|
|
icon={Clock}
|
|
color="text-purple-400"
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Divergences Table */}
|
|
<motion.div variants={itemVariants} className="glass-card rounded-lg overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-white/10">
|
|
<h2 className="text-xl font-bold text-white">Divergências Detectadas</h2>
|
|
</div>
|
|
|
|
{data.divergences.length === 0 ? (
|
|
<div className="px-6 py-12 text-center">
|
|
<CheckCircle2 className="w-12 h-12 text-green-400 mx-auto mb-4 opacity-60" />
|
|
<p className="text-white/60">Nenhuma divergência detectada</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-white/5 border-b border-white/10">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-white/60">ID</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Entidade</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Categoria</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Resultado Real</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Resultado Nominal</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Confiança</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Timestamp</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<motion.td
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{data.divergences.slice(0, 20).map((div) => (
|
|
<DivergenceRow key={div.id} div={div} />
|
|
))}
|
|
</motion.td>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{data.divergences.length > 20 && (
|
|
<div className="px-6 py-3 bg-white/5 border-t border-white/10 text-xs text-white/40">
|
|
Mostrando 20 de {data.divergences.length} divergências
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</>
|
|
) : null}
|
|
</motion.div>
|
|
)
|
|
}
|