bigtux
dbf9f0497f
🎨 Dashboard UI (Next.js 14) - Modern dark theme with purple/green accents - Responsive layout with sidebar navigation - Real-time metrics cards with alerts - Interactive charts (CPU, Memory) with Recharts - Hosts table with status indicators - Alerts list with AI suggestions 🤖 AI Copilot Chat - Slide-in panel with chat interface - Quick action buttons - Command suggestions with execute option - Real-time loading indicators 📊 Components - MetricCard with trend indicators - HostsTable with colored metrics - AlertsList with severity levels - AIInsights panel with predictions - CpuChart and MemoryChart 🛠️ Tech Stack - Next.js 14 with App Router - TypeScript - Tailwind CSS - Recharts for visualization - Zustand for state management
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
const insights = [
|
|
{
|
|
type: 'anomaly',
|
|
icon: '🔍',
|
|
title: 'Anomalia Detectada',
|
|
description: 'O servidor cache-01 está com consumo 40% acima do padrão para este horário.',
|
|
severity: 'high',
|
|
action: 'Investigar',
|
|
},
|
|
{
|
|
type: 'prediction',
|
|
icon: '🔮',
|
|
title: 'Previsão de Capacidade',
|
|
description: 'O disco do servidor db-01 vai atingir 90% em aproximadamente 12 dias.',
|
|
severity: 'medium',
|
|
action: 'Planejar expansão',
|
|
},
|
|
{
|
|
type: 'optimization',
|
|
icon: '💡',
|
|
title: 'Oportunidade de Economia',
|
|
description: 'O servidor dev-02 está subutilizado (CPU média: 5%). Considere reduzir recursos.',
|
|
severity: 'low',
|
|
action: 'Ver detalhes',
|
|
},
|
|
]
|
|
|
|
export default function AIInsights() {
|
|
const getSeverityColor = (severity: string) => {
|
|
switch (severity) {
|
|
case 'high':
|
|
return 'border-red-500/50 bg-red-950/20'
|
|
case 'medium':
|
|
return 'border-yellow-500/50 bg-yellow-950/20'
|
|
default:
|
|
return 'border-green-500/50 bg-green-950/20'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-gradient-to-r from-purple-900/30 to-slate-900 rounded-xl p-6 border border-purple-500/30">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center space-x-3">
|
|
<span className="text-2xl">🤖</span>
|
|
<div>
|
|
<h3 className="text-lg font-semibold">AI Insights</h3>
|
|
<p className="text-sm text-slate-400">Análises geradas automaticamente</p>
|
|
</div>
|
|
</div>
|
|
<button className="text-sm text-purple-400 hover:text-purple-300">
|
|
Ver todos →
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{insights.map((insight, index) => (
|
|
<div
|
|
key={index}
|
|
className={`p-4 rounded-lg border ${getSeverityColor(insight.severity)} hover:bg-slate-800/50 transition cursor-pointer`}
|
|
>
|
|
<div className="flex items-start space-x-3">
|
|
<span className="text-2xl">{insight.icon}</span>
|
|
<div className="flex-1">
|
|
<p className="font-medium">{insight.title}</p>
|
|
<p className="text-sm text-slate-400 mt-1">{insight.description}</p>
|
|
<button className="mt-3 text-sm text-purple-400 hover:text-purple-300">
|
|
{insight.action} →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|