mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 20:51:49 +00:00
init
This commit is contained in:
135
thirdeye/dashboard/app/logs/LogTable.tsx
Normal file
135
thirdeye/dashboard/app/logs/LogTable.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
const logs = [
|
||||
{
|
||||
timestamp: "2024-05-20 14:22:01.442",
|
||||
level: "ERROR",
|
||||
agentId: "AX-982_CORE",
|
||||
payload: { text: "Unauthorized handshake from peer", ip: "[192.168.1.104].", json: '{"action": "TERMINATE_SESSION"}' },
|
||||
icon: "dangerous",
|
||||
statusClass: "status-strip-error",
|
||||
levelClass: "bg-red-500/10 text-[#ee7d77] border-[#ee7d77]/20 shadow-[0_0_5px_rgba(238,125,119,0.2)]"
|
||||
},
|
||||
{
|
||||
timestamp: "2024-05-20 14:21:58.112",
|
||||
level: "INFO",
|
||||
agentId: "SYS_MONITOR",
|
||||
payload: { text: "Key rotation complete. Nodes synced.", ip: "", json: '{"latency": "12ms", "status": "nominal"}' },
|
||||
icon: "info",
|
||||
statusClass: "status-strip-info",
|
||||
levelClass: "bg-purple-500/10 text-[#a88cfb] border-[#a88cfb]/20"
|
||||
},
|
||||
{
|
||||
timestamp: "2024-05-20 14:21:45.890",
|
||||
level: "SUCCESS",
|
||||
agentId: "SCAN_AGENT_04",
|
||||
payload: { text: "Quantum hash verification PASSED.", ip: "", json: '{"sector": "7B", "integrity": 1.0}' },
|
||||
icon: "check_circle",
|
||||
statusClass: "status-strip-success",
|
||||
levelClass: "bg-cyan-500/10 text-[#00daf3] border-[#00daf3]/20"
|
||||
},
|
||||
{
|
||||
timestamp: "2024-05-20 14:21:12.001",
|
||||
level: "WARN",
|
||||
agentId: "THERMAL_REG",
|
||||
payload: { text: "Blade rack 4 temp high.", ip: "", json: '{"temp": "72°C", "limit": "70°C"}' },
|
||||
icon: "report_problem",
|
||||
statusClass: "status-strip-warning",
|
||||
levelClass: "bg-amber-500/10 text-[#ffb300] border-[#ffb300]/20"
|
||||
},
|
||||
{
|
||||
timestamp: "2024-05-20 14:20:55.223",
|
||||
level: "INFO",
|
||||
agentId: "USER_AUTH",
|
||||
payload: { text: "Admin login sequence initiated.", ip: "", json: '{"terminal": "ST-09", "auth": "biometric"}' },
|
||||
icon: "verified_user",
|
||||
statusClass: "status-strip-info",
|
||||
levelClass: "bg-purple-500/10 text-[#a88cfb] border-[#a88cfb]/20"
|
||||
}
|
||||
];
|
||||
|
||||
export default function LogTable() {
|
||||
return (
|
||||
<div className="glass rounded-xl border neon-border flex flex-col min-h-0 flex-1 overflow-hidden animate-fade-in-up delay-100">
|
||||
{/* Table Header / Controls */}
|
||||
<div className="p-4 border-b border-white/5 flex justify-between items-center bg-black/40 backdrop-blur-md z-10 w-full shrink-0">
|
||||
<div className="flex gap-2">
|
||||
<button className="h-8 px-3 rounded-md bg-white/5 border border-white/10 text-xs font-mono-data text-zinc-400 hover:text-violet-400 hover:bg-violet-500/20 transition-all flex items-center gap-2 btn-interactive shadow-sm">
|
||||
<span className="material-symbols-outlined text-sm">filter_alt</span>
|
||||
Filter
|
||||
</button>
|
||||
<button className="h-8 px-3 rounded-md bg-white/5 border border-white/10 text-xs font-mono-data text-zinc-400 hover:text-violet-400 hover:bg-violet-500/20 transition-all flex items-center gap-2 btn-interactive shadow-sm">
|
||||
<span className="material-symbols-outlined text-sm">sort</span>
|
||||
Sort
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="relative">
|
||||
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">search</span>
|
||||
<input type="text" placeholder="Search logs..." className="h-8 pl-9 pr-4 rounded-md bg-black/50 border border-white/10 text-xs font-mono-data text-zinc-300 placeholder-zinc-600 focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/50 w-64 transition-all" />
|
||||
</div>
|
||||
<button className="h-8 px-4 rounded-md bg-violet-500/20 text-violet-400 hover:bg-violet-500 hover:text-white border border-violet-500/50 text-xs font-bold tracking-widest uppercase transition-all flex items-center gap-2 btn-interactive shadow-[0_0_10px_rgba(167,139,250,0.1)] hover:shadow-[0_0_15px_rgba(167,139,250,0.4)]">
|
||||
<span className="material-symbols-outlined text-sm">download</span>
|
||||
Export PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Log Table Body */}
|
||||
<div className="flex-1 h-0 overflow-y-auto custom-scrollbar relative z-10">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="sticky top-0 bg-black/80 backdrop-blur-md z-20 border-b border-white/5">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-48" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Timestamp</th>
|
||||
<th className="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-24" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Level</th>
|
||||
<th className="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-32" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Agent ID</th>
|
||||
<th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Message Payload</th>
|
||||
<th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-20 text-right" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{logs.map((log, idx) => (
|
||||
<tr key={idx} className={`hover:bg-[#a88cfb]/10 transition-all duration-200 group ${log.statusClass}`}>
|
||||
<td className="px-6 py-3 font-mono-data text-[11px] syntax-timestamp whitespace-nowrap">{log.timestamp}</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap">
|
||||
<span className={`text-[9px] font-mono-data px-2 py-0.5 rounded border font-bold ${log.levelClass}`}>
|
||||
{log.level}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono-data text-[11px] syntax-agent whitespace-nowrap">{log.agentId}</td>
|
||||
<td className="px-6 py-3 font-mono-data text-[11px] truncate max-w-[300px]">
|
||||
<span className="syntax-string mr-2 opacity-90">{log.payload.text}</span>
|
||||
{log.payload.ip && <span className="syntax-ip mr-2" style={{ color: "#00daf3" }}>{log.payload.ip}</span>}
|
||||
<span className="syntax-key opacity-60 text-xs">{log.payload.json}</span>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right whitespace-nowrap">
|
||||
<span className={`material-symbols-outlined text-[16px] drop-shadow-lg ${log.level === 'ERROR' ? 'text-[#ee7d77]' : log.level === 'SUCCESS' ? 'text-[#00daf3]' : log.level === 'WARN' ? 'text-[#ffb300]' : 'text-[#a88cfb]'}`}>
|
||||
{log.icon}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Footer Log Stats */}
|
||||
<div className="px-6 py-3 border-t border-white/5 flex items-center justify-between text-[10px] font-mono-data text-zinc-500 relative z-10 bg-black/60 backdrop-blur-xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full animate-pulse shadow-[0_0_8px_#a88cfb]" style={{ backgroundColor: "#a88cfb" }}></span> LIVE RECAPITULATION</span>
|
||||
<span>|</span>
|
||||
<span>Showing {logs.length} events of 44,901</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>PAGE 1 OF 3,741</span>
|
||||
<div className="flex gap-1">
|
||||
<button className="w-6 h-6 flex items-center justify-center rounded border border-white/10 hover:bg-[#a88cfb]/10 hover:text-[#a88cfb] transition-colors">
|
||||
<span className="material-symbols-outlined text-sm">chevron_left</span>
|
||||
</button>
|
||||
<button className="w-6 h-6 flex items-center justify-center rounded border border-white/10 hover:bg-[#a88cfb]/10 hover:text-[#a88cfb] transition-colors">
|
||||
<span className="material-symbols-outlined text-sm">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user