Initial commit: Clean RMM Frontend React application
This commit is contained in:
821
src/App.jsx
Normal file
821
src/App.jsx
Normal file
@@ -0,0 +1,821 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Activity,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Terminal,
|
||||
Settings,
|
||||
RefreshCw,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Zap,
|
||||
Flame,
|
||||
Server,
|
||||
AlertTriangle,
|
||||
Play
|
||||
} from 'lucide-react';
|
||||
|
||||
const API_BASE = window.location.protocol === 'https:'
|
||||
? 'https://rmm-backend.seekright.com'
|
||||
: 'http://rmm-backend.seekright.com'; // Target FastAPI central server in production VM
|
||||
|
||||
// Secure API fetch wrapper
|
||||
const apiFetch = (url, options = {}) => {
|
||||
return fetch(url, options);
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [activeTab, setActiveTab] = useState('dashboard'); // 'dashboard' | 'editor'
|
||||
const [clients, setClients] = useState({});
|
||||
const [telemetry, setTelemetry] = useState({});
|
||||
const [logs, setLogs] = useState({});
|
||||
const [whitelist, setWhitelist] = useState({});
|
||||
|
||||
// Dispatcher form state
|
||||
const [selectedClients, setSelectedClients] = useState([]);
|
||||
const [selectedCommand, setSelectedCommand] = useState('');
|
||||
const [manualClient, setManualClient] = useState('');
|
||||
const [manualCommand, setManualCommand] = useState('');
|
||||
|
||||
// Whitelist config editor state
|
||||
const [editorText, setEditorText] = useState('{\n "nt": {},\n "posix": {}\n}');
|
||||
|
||||
const [toast, setToast] = useState(null);
|
||||
const [isSyncing, setIsSyncing] = useState(false);
|
||||
const [filterClient, setFilterClient] = useState('all');
|
||||
const terminalRef = useRef(null);
|
||||
|
||||
const showToast = (message, type = 'success') => {
|
||||
setToast({ message, type });
|
||||
setTimeout(() => setToast(null), 4000);
|
||||
};
|
||||
|
||||
// 1. Initial configuration bootstrap
|
||||
const fetchWhitelist = async () => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_BASE}/api/get-raw-commands`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setWhitelist(data);
|
||||
setEditorText(JSON.stringify(data, null, 2));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load raw commands whitelist:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 2. Continuous telemetry & log sync polling
|
||||
const syncFleetData = async () => {
|
||||
setIsSyncing(true);
|
||||
try {
|
||||
// Sync active clients registry
|
||||
const clientsRes = await apiFetch(`${API_BASE}/api/clients`);
|
||||
if (clientsRes.ok) {
|
||||
const clientsData = await clientsRes.json();
|
||||
setClients(clientsData);
|
||||
}
|
||||
|
||||
// Sync active telemetry details
|
||||
const telRes = await apiFetch(`${API_BASE}/api/telemetry`);
|
||||
if (telRes.ok) {
|
||||
const telData = await telRes.json();
|
||||
setTelemetry(telData);
|
||||
}
|
||||
|
||||
// Sync circular history logs
|
||||
const logsRes = await apiFetch(`${API_BASE}/api/logs`);
|
||||
if (logsRes.ok) {
|
||||
const logsData = await logsRes.json();
|
||||
setLogs(logsData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Network sync failure:', err);
|
||||
} finally {
|
||||
setIsSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchWhitelist();
|
||||
syncFleetData();
|
||||
|
||||
// Set up rapid 3-second fleet synchronization loop
|
||||
const syncInterval = setInterval(syncFleetData, 3000);
|
||||
return () => clearInterval(syncInterval);
|
||||
}, []);
|
||||
|
||||
// Scroll terminal logs to bottom automatically when new actions populate,
|
||||
// but only if the user is already looking at the latest logs (near the bottom)!
|
||||
// If they scrolled up to inspect an error, we freeze the screen scroll.
|
||||
useEffect(() => {
|
||||
if (terminalRef.current) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = terminalRef.current;
|
||||
// Define a 120px threshold close to the bottom
|
||||
const isNearBottom = scrollHeight - scrollTop - clientHeight < 120;
|
||||
const isFirstLoad = scrollTop === 0;
|
||||
|
||||
if (isNearBottom || isFirstLoad) {
|
||||
terminalRef.current.scrollTop = scrollHeight;
|
||||
}
|
||||
}
|
||||
}, [logs]);
|
||||
|
||||
// Dispatch command to client execution queue
|
||||
const handleDispatch = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Resolve final list of targets
|
||||
let finalClientsString = '';
|
||||
if (manualClient.trim()) {
|
||||
finalClientsString = manualClient.trim();
|
||||
} else if (selectedClients.length > 0) {
|
||||
finalClientsString = selectedClients.join(',');
|
||||
}
|
||||
|
||||
const finalCommand = (manualCommand.trim() || selectedCommand).trim();
|
||||
|
||||
if (!finalClientsString) {
|
||||
showToast('Please select target nodes or specify a manual name!', 'error');
|
||||
return;
|
||||
}
|
||||
if (!finalCommand) {
|
||||
showToast('Please specify a Whitelisted Operation Key!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await apiFetch(
|
||||
`${API_BASE}/api/schedule-command?client_id=${encodeURIComponent(finalClientsString)}&command=${encodeURIComponent(finalCommand)}`,
|
||||
{ method: 'POST' }
|
||||
);
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
showToast(`Operation batch successfully dispatched to: ${finalClientsString}!`, 'success');
|
||||
setManualCommand('');
|
||||
setManualClient('');
|
||||
setSelectedClients([]);
|
||||
syncFleetData();
|
||||
} else {
|
||||
showToast(data.detail || 'Dispatch scheduling failed.', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('Network error contacting central RMM server API.', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Dynamic Whitelist Save Config
|
||||
const handleSaveWhitelist = async () => {
|
||||
try {
|
||||
const parsedConfig = JSON.parse(editorText);
|
||||
const response = await apiFetch(`${API_BASE}/api/save-commands`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(parsedConfig)
|
||||
});
|
||||
if (response.ok) {
|
||||
showToast('Dynamic Commands Whitelist successfully deployed to cluster!', 'success');
|
||||
fetchWhitelist(); // Reload whitelists
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
showToast(`Failed to deploy: ${errorData.detail}`, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('Invalid JSON structure! Please audit your config syntax.', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Compile individual client arrays into a single global chronological timeline for terminal display
|
||||
const getSortedTimeline = () => {
|
||||
const timeline = [];
|
||||
Object.entries(logs).forEach(([cid, entryList]) => {
|
||||
// Apply system filter
|
||||
if (filterClient !== 'all' && cid !== filterClient) {
|
||||
return;
|
||||
}
|
||||
if (Array.isArray(entryList)) {
|
||||
entryList.forEach((logItem) => {
|
||||
timeline.push({
|
||||
...logItem,
|
||||
client_id: cid
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
// Sort ascending by ISO timestamp
|
||||
return timeline.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
|
||||
};
|
||||
|
||||
const sortedTimelineLogs = getSortedTimeline();
|
||||
const activeClients = Object.values(clients).filter(c => c.active).length;
|
||||
const totalClients = Object.keys(clients).length;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-16 flex flex-col">
|
||||
{/* Dynamic Toast Alerts */}
|
||||
{toast && (
|
||||
<div className={`fixed bottom-6 right-6 z-50 px-6 py-4 rounded-xl shadow-2xl flex items-center gap-3 border transition-all duration-300 transform translate-y-0 ${
|
||||
toast.type === 'error'
|
||||
? 'bg-rose-950/85 border-rose-500/30 text-rose-200'
|
||||
: 'bg-emerald-950/85 border-emerald-500/30 text-emerald-200'
|
||||
}`}>
|
||||
{toast.type === 'error' ? <XCircle className="w-5 h-5 text-rose-400" /> : <CheckCircle className="w-5 h-5 text-emerald-400" />}
|
||||
<span className="font-semibold text-sm">{toast.message}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modern Glass Header Section */}
|
||||
<header className="sticky top-0 z-30 px-6 py-4 glass-panel border-b border-white/5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-violet-600 to-indigo-600 flex items-center justify-center shadow-lg shadow-violet-900/30">
|
||||
<Zap className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-bold text-lg tracking-tight text-white flex items-center gap-2">
|
||||
SEEKRIGHT PULSE RMM
|
||||
<span className="text-[10px] uppercase font-mono px-2 py-0.5 rounded bg-violet-500/10 border border-violet-500/20 text-violet-300">CORE-v1.0</span>
|
||||
</h1>
|
||||
<p className="text-xs text-slate-400 font-medium">Enterprise Global Fleet & Whitelist Agent Orchestrator</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Controls & Navigation tabs */}
|
||||
<div className="flex items-center gap-4">
|
||||
<nav className="flex items-center gap-1.5 p-1 rounded-xl bg-slate-950/60 border border-white/5">
|
||||
<button
|
||||
onClick={() => setActiveTab('dashboard')}
|
||||
className={`px-4 py-2 rounded-lg font-semibold text-xs transition-all ${
|
||||
activeTab === 'dashboard'
|
||||
? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-md'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<Activity className="w-3.5 h-3.5 inline mr-1.5 -mt-0.5" />
|
||||
Fleet Status
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('editor')}
|
||||
className={`px-4 py-2 rounded-lg font-semibold text-xs transition-all ${
|
||||
activeTab === 'editor'
|
||||
? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-md'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<Settings className="w-3.5 h-3.5 inline mr-1.5 -mt-0.5" />
|
||||
Commands Whitelist
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Sync indicator status badge */}
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-900/50 border border-white/5">
|
||||
<span className={`w-2 h-2 rounded-full ${isSyncing ? 'bg-violet-400 animate-spin' : 'bg-emerald-400 pulse-glow-emerald'}`}></span>
|
||||
<span className="text-xs font-mono text-slate-300">
|
||||
API Status: <b className="text-emerald-400 font-bold">Online</b>
|
||||
</span>
|
||||
<button
|
||||
onClick={syncFleetData}
|
||||
title="Force Sync Fleet Vitals"
|
||||
className="p-1 rounded hover:bg-white/5 text-slate-400 hover:text-slate-200 transition-colors"
|
||||
>
|
||||
<RefreshCw className={`w-3 h-3 ${isSyncing ? 'animate-spin text-violet-400' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Container */}
|
||||
<main className="max-w-7xl w-full mx-auto px-6 mt-8 flex-grow grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
{activeTab === 'dashboard' ? (
|
||||
<>
|
||||
{/* Dashboard Vitals: Grid of Cards (Left/Center Column) */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
|
||||
{/* Central Metrics Board */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="glass-panel p-4 rounded-2xl flex flex-col justify-between">
|
||||
<span className="text-xs font-semibold text-slate-400">Total Systems</span>
|
||||
<span className="text-2xl font-bold text-white mt-1">{totalClients}</span>
|
||||
</div>
|
||||
<div className="glass-panel p-4 rounded-2xl flex flex-col justify-between border-l-2 border-l-emerald-500">
|
||||
<span className="text-xs font-semibold text-slate-400">🟢 Active Systems</span>
|
||||
<span className="text-2xl font-bold text-emerald-400 mt-1">{activeClients}</span>
|
||||
</div>
|
||||
<div className="glass-panel p-4 rounded-2xl flex flex-col justify-between border-l-2 border-l-rose-500">
|
||||
<span className="text-xs font-semibold text-slate-400">🔴 Offline Systems</span>
|
||||
<span className="text-2xl font-bold text-rose-400 mt-1">{totalClients - activeClients}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vitals Node Grid Cards */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-sm font-bold text-white tracking-wide uppercase flex items-center gap-2">
|
||||
<Server className="w-4 h-4 text-violet-400" />
|
||||
Remote Fleet Systems Grid
|
||||
</h2>
|
||||
|
||||
{Object.keys(clients).length === 0 ? (
|
||||
<div className="glass-panel p-12 rounded-2xl text-center text-slate-400">
|
||||
<AlertTriangle className="w-8 h-8 mx-auto text-yellow-400 mb-2 opacity-60" />
|
||||
<p className="font-semibold text-sm">Searching for active RMM telemetry agents...</p>
|
||||
<p className="text-xs text-slate-500 mt-1">Boot up an agent using deploy_agent.sh to register</p>
|
||||
</div>
|
||||
) : (
|
||||
Object.entries(clients).map(([clientId, info]) => {
|
||||
const clientTelemetry = telemetry[clientId];
|
||||
const isOnline = info.active;
|
||||
const lastSeenDate = info.last_seen ? new Date(info.last_seen).toLocaleString() : 'Never';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={clientId}
|
||||
className="glass-panel p-6 rounded-2xl hover:border-violet-500/40 hover:-translate-y-1 hover:shadow-[0_8px_30px_rgb(99,102,241,0.12)] transition-all duration-300 relative overflow-hidden group bg-gradient-to-b from-slate-900/30 to-slate-950/50"
|
||||
>
|
||||
{/* Status bar */}
|
||||
<div className={`absolute top-0 left-0 right-0 h-1 ${isOnline ? 'bg-gradient-to-r from-emerald-500 to-teal-400' : 'bg-gradient-to-r from-rose-500 to-red-400'}`} />
|
||||
|
||||
{/* Title block */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-3.5 h-3.5 rounded-full flex items-center justify-center ${isOnline ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
|
||||
<span className="relative flex h-2 w-2">
|
||||
{isOnline && <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>}
|
||||
<span className={`relative inline-flex rounded-full h-2 w-2 ${isOnline ? 'bg-emerald-500' : 'bg-rose-500'}`}></span>
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-extrabold text-white text-lg tracking-tight group-hover:text-violet-300 transition-colors">{clientId}</span>
|
||||
<span className={`text-[9px] uppercase tracking-wider font-extrabold px-2 py-0.5 rounded ${
|
||||
isOnline
|
||||
? 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-300'
|
||||
: 'bg-rose-500/10 border border-rose-500/20 text-rose-300'
|
||||
}`}>
|
||||
{isOnline ? 'Active' : 'Offline'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<span className="text-[10px] text-slate-500 block">LAST CONTACT</span>
|
||||
<span className="text-[11px] font-bold text-slate-300 font-mono">{lastSeenDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Telemetry charts row */}
|
||||
{clientTelemetry ? (
|
||||
<div className="space-y-5">
|
||||
{/* CPU & RAM progress */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* CPU Progress block */}
|
||||
{(() => {
|
||||
const cpu = clientTelemetry.cpu_percent || 0;
|
||||
const isWarning = cpu > 80;
|
||||
return (
|
||||
<div className="p-3.5 bg-slate-950/40 border border-white/5 rounded-2xl flex flex-col justify-between">
|
||||
<div className="flex justify-between items-center text-xs font-bold text-slate-400 mb-2">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Cpu className={`w-3.5 h-3.5 ${isWarning ? 'text-rose-400 animate-pulse' : 'text-violet-400'}`} />
|
||||
CPU Load
|
||||
</span>
|
||||
<span className={`font-bold ${isWarning ? 'text-rose-400' : 'text-white'}`}>{cpu}%</span>
|
||||
</div>
|
||||
<div className="w-full h-2.5 rounded-full bg-slate-900 overflow-hidden relative border border-white/5">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${
|
||||
isWarning
|
||||
? 'bg-gradient-to-r from-rose-500 to-red-400'
|
||||
: cpu > 60
|
||||
? 'bg-gradient-to-r from-amber-500 to-yellow-400'
|
||||
: 'bg-gradient-to-r from-violet-500 to-indigo-500'
|
||||
}`}
|
||||
style={{ width: `${cpu}%` }}
|
||||
/>
|
||||
</div>
|
||||
{isWarning && (
|
||||
<div className="text-[9px] text-rose-400 font-bold flex items-center gap-1 mt-1.5 animate-pulse">
|
||||
<AlertTriangle className="w-2.5 h-2.5" /> High Utilization
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Memory Progress block */}
|
||||
{(() => {
|
||||
const total = clientTelemetry.memory_total_gb || 0;
|
||||
const free = clientTelemetry.memory_free_gb || 0;
|
||||
const used = (total - free).toFixed(2);
|
||||
const ram = clientTelemetry.memory_percent || 0;
|
||||
const isWarning = ram > 85;
|
||||
return (
|
||||
<div className="p-3.5 bg-slate-950/40 border border-white/5 rounded-2xl flex flex-col justify-between">
|
||||
<div className="flex justify-between items-center text-xs font-bold text-slate-400 mb-2">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Activity className={`w-3.5 h-3.5 ${isWarning ? 'text-rose-400 animate-pulse' : 'text-violet-400'}`} />
|
||||
Virtual RAM
|
||||
</span>
|
||||
<span className={`font-bold ${isWarning ? 'text-rose-400' : 'text-white'}`}>{ram}%</span>
|
||||
</div>
|
||||
<div className="w-full h-2.5 rounded-full bg-slate-900 overflow-hidden relative border border-white/5">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${
|
||||
isWarning
|
||||
? 'bg-gradient-to-r from-rose-500 to-red-400'
|
||||
: ram > 70
|
||||
? 'bg-gradient-to-r from-amber-500 to-yellow-400'
|
||||
: 'bg-gradient-to-r from-violet-500 to-indigo-500'
|
||||
}`}
|
||||
style={{ width: `${ram}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-between text-[9px] text-slate-500 font-mono font-medium mt-2 border-t border-white/5 pt-1.5 font-bold gap-x-1">
|
||||
<span>Used: <b className="text-slate-300">{used}G</b></span>
|
||||
<span>Free: <b className="text-slate-300">{free}G</b></span>
|
||||
<span>Total: <b className="text-slate-300">{total}G</b></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* GPU and Partition details */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-white/5">
|
||||
{/* Partition Storage */}
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] uppercase font-extrabold tracking-wider text-slate-400 flex items-center gap-1.5">
|
||||
<HardDrive className="w-3.5 h-3.5 text-indigo-400" /> Disk Drive Space
|
||||
</span>
|
||||
<div className="space-y-2.5">
|
||||
{clientTelemetry.disks && clientTelemetry.disks.length > 0 ? (
|
||||
clientTelemetry.disks.map((d, index) => {
|
||||
const diskTotal = d.total_gb || 0;
|
||||
const diskFree = d.free_gb || 0;
|
||||
const diskUsed = (diskTotal - diskFree).toFixed(2);
|
||||
return (
|
||||
<div key={index} className="p-2.5 rounded-xl bg-slate-950/30 border border-white/5 space-y-1.5">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="font-semibold text-slate-300">Disk [ {d.mount} ]</span>
|
||||
<span className="font-mono text-slate-400 text-[10px]">
|
||||
Used: <b className="text-slate-300">{diskUsed}G</b> / {diskTotal}G
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full h-1.5 rounded-full bg-slate-900 overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${d.percent > 85 ? 'bg-rose-500' : 'bg-indigo-500'}`}
|
||||
style={{ width: `${d.percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-[8px] text-slate-500 font-mono">
|
||||
<span>Free: <b className="text-slate-400">{diskFree} GB</b></span>
|
||||
<span>{d.percent}% Used</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span className="text-xs text-slate-500 block italic">No storage drives reported.</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nvidia Core GPU Vitals */}
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] uppercase font-extrabold tracking-wider text-slate-400 flex items-center gap-1.5">
|
||||
<Flame className="w-3.5 h-3.5 text-rose-400 animate-pulse" /> Nvidia GPU Accelerator
|
||||
</span>
|
||||
<div className="space-y-1.5">
|
||||
{clientTelemetry.gpus && clientTelemetry.gpus.length > 0 ? (
|
||||
clientTelemetry.gpus.map((gpu, index) => (
|
||||
<div key={index} className="p-2.5 rounded-xl bg-slate-950/40 border border-white/5 space-y-2">
|
||||
<div className="flex justify-between items-center text-xs border-b border-white/5 pb-1">
|
||||
<span className="font-bold text-slate-200 truncate max-w-[130px]">🎮 {gpu.name}</span>
|
||||
<span className="text-violet-400 font-extrabold font-mono text-[11px]">Load: {gpu.utilization}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-2 gap-y-1 text-[10px] text-slate-400 font-mono">
|
||||
<div className="flex justify-between"><span>Temp:</span> <b className="text-slate-200 font-semibold">{gpu.temp}</b></div>
|
||||
<div className="flex justify-between"><span>Fans:</span> <b className="text-slate-200 font-semibold">{gpu.fan_speed}</b></div>
|
||||
<div className="col-span-2 flex justify-between border-t border-white/5 pt-1 mt-0.5">
|
||||
<span>VRAM Used:</span>
|
||||
<b className="text-slate-200 font-semibold">{gpu.memory_used} / {gpu.memory_total || 'N/A'}</b>
|
||||
</div>
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<span>Power Draw:</span>
|
||||
<b className="text-slate-200 font-semibold">{gpu.power_draw} / {gpu.power_limit || 'N/A'}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-xs text-slate-500 py-3 text-center font-medium bg-slate-950/15 border border-white/5 rounded-xl italic">
|
||||
No NVIDIA GPU hardware reported.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-6 bg-slate-950/20 rounded-xl border border-white/5 my-4">
|
||||
<p className="text-xs text-slate-400 font-medium italic">Telemetry check-in pending... Waiting for dynamic vitals transmission</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Maintenance Command Dispatch deck (Right sidebar) */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="glass-panel p-6 rounded-2xl sticky top-24 border border-white/5 space-y-6">
|
||||
<div className="border-b border-white/5 pb-3">
|
||||
<h2 className="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
|
||||
<Play className="w-4 h-4 text-violet-400 fill-violet-400" />
|
||||
Maintenance Dispatcher
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Send a whitelisted command down to a node</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleDispatch} className="space-y-4">
|
||||
{/* Select target node check list */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 flex justify-between">
|
||||
<span>Select Fleet Targets</span>
|
||||
<div className="flex gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedClients(Object.keys(clients))}
|
||||
className="text-[10px] text-violet-400 font-extrabold hover:text-violet-300 transition-colors uppercase tracking-wider"
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedClients(Object.entries(clients).filter(([_, info]) => info.active).map(([id]) => id))}
|
||||
className="text-[10px] text-emerald-400 font-extrabold hover:text-emerald-300 transition-colors uppercase tracking-wider"
|
||||
>
|
||||
Active
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedClients([])}
|
||||
className="text-[10px] text-slate-500 font-extrabold hover:text-slate-400 transition-colors uppercase tracking-wider"
|
||||
>
|
||||
None
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto p-1 bg-slate-950/40 border border-white/5 rounded-xl">
|
||||
{Object.entries(clients).length === 0 ? (
|
||||
<span className="col-span-2 text-xs text-slate-500 italic text-center py-6 block font-medium">No registered nodes found.</span>
|
||||
) : (
|
||||
Object.entries(clients).map(([id, info]) => {
|
||||
const isSelected = selectedClients.includes(id);
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (isSelected) {
|
||||
setSelectedClients(selectedClients.filter(c => c !== id));
|
||||
} else {
|
||||
setSelectedClients([...selectedClients, id]);
|
||||
}
|
||||
}}
|
||||
className={`p-2.5 rounded-xl border text-left transition-all duration-200 relative flex flex-col justify-between overflow-hidden ${
|
||||
isSelected
|
||||
? 'bg-gradient-to-br from-violet-600/15 to-indigo-600/15 border-violet-500/80 shadow-md shadow-violet-900/15 text-white'
|
||||
: 'bg-slate-950/60 border-white/5 hover:border-white/15 text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
{/* Glow element */}
|
||||
{isSelected && <span className="absolute top-0 right-0 w-2 h-2 bg-violet-400 rounded-full blur-[1px] -mr-0.5 -mt-0.5" />}
|
||||
|
||||
<div className="flex items-center justify-between w-full gap-2">
|
||||
<span className={`text-xs font-extrabold truncate ${isSelected ? 'text-violet-200' : 'text-slate-300'}`}>
|
||||
{id}
|
||||
</span>
|
||||
<span className={`w-1.5 h-1.5 rounded-full shrink-0 ${info.active ? 'bg-emerald-400' : 'bg-rose-400'}`} />
|
||||
</div>
|
||||
<span className="text-[9px] font-mono text-slate-500 mt-1 font-semibold uppercase tracking-wider">
|
||||
{info.active ? '🟢 Online' : '🔴 Offline'}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Manual Target target ID */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Or Type Target Name manually (comma-separated for batch)</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. kawsik, client_1, client_2"
|
||||
value={manualClient}
|
||||
onChange={(e) => setManualClient(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-sm text-slate-300 font-semibold focus:outline-none focus:border-violet-500 placeholder-slate-600 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Select command key */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Pick Whitelisted Operation</label>
|
||||
<select
|
||||
value={selectedCommand}
|
||||
onChange={(e) => setSelectedCommand(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-sm text-slate-300 font-semibold focus:outline-none focus:border-violet-500 transition-colors"
|
||||
>
|
||||
<option value="">-- Choose Whitelisted Command --</option>
|
||||
{Array.from(new Set([
|
||||
...Object.keys(whitelist.nt || {}),
|
||||
...Object.keys(whitelist.posix || {})
|
||||
])).map((cmdKey) => (
|
||||
<option key={cmdKey} value={cmdKey}>
|
||||
{cmdKey}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Manual command command key */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Or Type Operation Key manually</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. repair_mysql"
|
||||
value={manualCommand}
|
||||
onChange={(e) => setManualCommand(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-sm text-slate-300 font-semibold focus:outline-none focus:border-violet-500 placeholder-slate-600 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Fire execution button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-bold py-3 px-4 rounded-xl text-sm flex items-center justify-center gap-2 shadow-lg shadow-violet-950/45 hover:shadow-violet-900/50 hover:translate-y-[-1px] active:translate-y-[1px] transition-all"
|
||||
>
|
||||
<Zap className="w-4 h-4 fill-white" />
|
||||
Dispatch Operation to Node
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
/* Visual Whitelist JSON Configuration Editor */
|
||||
<div className="col-span-3">
|
||||
<div className="glass-panel p-6 rounded-2xl border border-white/5 space-y-6">
|
||||
<div className="border-b border-white/5 pb-3">
|
||||
<h2 className="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
|
||||
<Settings className="w-4 h-4 text-violet-400" />
|
||||
Visual Command Whitelist Editor
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Directly configure permitted cluster arrays. Permitted operations are pushed dynamically to remote agents without any central restart required!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<textarea
|
||||
className="w-full h-[400px] bg-slate-950 border border-white/10 rounded-xl p-4 font-mono text-sm text-emerald-400 leading-relaxed focus:outline-none focus:border-violet-500 transition-colors focus:ring-1 focus:ring-violet-500/25"
|
||||
spellCheck="false"
|
||||
value={editorText}
|
||||
onChange={(e) => setEditorText(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={fetchWhitelist}
|
||||
className="px-5 py-2.5 rounded-xl border border-white/10 hover:bg-white/5 font-semibold text-xs text-slate-300 transition-colors"
|
||||
>
|
||||
Discard Changes
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveWhitelist}
|
||||
className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-bold text-xs shadow-lg shadow-violet-950/40 hover:shadow-violet-900/50 hover:translate-y-[-1px] active:translate-y-[1px] transition-all"
|
||||
>
|
||||
Deploy updated JSON Configuration
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Scrolling DevOps CLI output shell terminal */}
|
||||
<footer className="max-w-7xl w-full mx-auto px-6 mt-8">
|
||||
<div className="bg-slate-950/95 border border-white/5 rounded-2xl overflow-hidden shadow-2xl">
|
||||
<div className="bg-slate-900/80 px-4 py-2 border-b border-white/5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-1.5">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-rose-500/60 block"></span>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-yellow-500/60 block"></span>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500/60 block"></span>
|
||||
</div>
|
||||
<span className="text-[11px] uppercase tracking-wider font-bold text-slate-400 font-mono ml-2 flex items-center gap-1.5">
|
||||
<Terminal className="w-3.5 h-3.5 text-violet-400" />
|
||||
Live Fleet Activity Logs & Webhook outputs
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<select
|
||||
value={filterClient}
|
||||
onChange={(e) => setFilterClient(e.target.value)}
|
||||
className="bg-slate-950 border border-white/10 rounded-lg px-2.5 py-1 text-[11px] text-slate-300 font-semibold focus:outline-none focus:border-violet-500 transition-colors"
|
||||
>
|
||||
<option value="all">🔍 All Fleet Logs</option>
|
||||
{Object.keys(clients).map((cid) => (
|
||||
<option key={cid} value={cid}>
|
||||
{cid} logs
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="text-[10px] text-slate-500 font-mono font-medium">Terminal Shell v1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={terminalRef} className="p-4 h-64 overflow-y-auto font-mono text-xs space-y-2.5 terminal-scroll bg-black/90">
|
||||
{sortedTimelineLogs.length === 0 ? (
|
||||
<span className="text-slate-500 block italic py-2">Waiting for check-in events to stream... No historical logs recorded yet.</span>
|
||||
) : (
|
||||
sortedTimelineLogs.map((log, index) => {
|
||||
const formattedTime = new Date(log.timestamp).toLocaleTimeString();
|
||||
|
||||
if (log.type === 'telemetry') {
|
||||
return (
|
||||
<div key={index} className="text-slate-400 flex items-start gap-1 leading-relaxed">
|
||||
<span className="text-slate-600 flex-shrink-0">[{formattedTime}]</span>
|
||||
<span className="text-sky-400 flex-shrink-0 font-bold">INFO:</span>
|
||||
<span>
|
||||
Client <b className="text-white">{log.client_id}</b> check-in telemetry pushed. (CPU: {log.detail.cpu_percent}%, RAM: {log.detail.memory_percent}%)
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (log.type === 'command_scheduled') {
|
||||
return (
|
||||
<div key={index} className="text-yellow-200 flex items-start gap-1 leading-relaxed">
|
||||
<span className="text-slate-600 flex-shrink-0">[{formattedTime}]</span>
|
||||
<span className="text-yellow-500 flex-shrink-0 font-bold">DISPATCH:</span>
|
||||
<span>
|
||||
Operation <b className="text-yellow-400 font-semibold">"{log.detail.command}"</b> successfully queued for node <b className="text-white">{log.client_id}</b>.
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (log.type === 'command_polled') {
|
||||
return (
|
||||
<div key={index} className="text-orange-200/90 flex items-start gap-1 leading-relaxed">
|
||||
<span className="text-slate-600 flex-shrink-0">[{formattedTime}]</span>
|
||||
<span className="text-orange-400 flex-shrink-0 font-bold">POLL:</span>
|
||||
<span>
|
||||
Agent <b className="text-white">{log.client_id}</b> retrieved pending command <b className="text-orange-300 font-semibold">"{log.detail.command}"</b>. Starting execution...
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (log.type === 'command_result') {
|
||||
const isSuccess = log.detail.returncode === 0;
|
||||
return (
|
||||
<div key={index} className="p-2.5 rounded-lg border bg-slate-950/70 border-white/5 space-y-1 my-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-slate-600 font-mono">[{formattedTime}]</span>
|
||||
<span className={`font-bold ${isSuccess ? 'text-emerald-400' : 'text-rose-400'}`}>
|
||||
{isSuccess ? 'OUTCOME SUCCESS:' : 'OUTCOME FAILURE:'}
|
||||
</span>
|
||||
<span className="text-slate-200">
|
||||
Command <b className="text-white">"{log.detail.command}"</b> on <b className="text-white">{log.client_id}</b> finished with code <b className="font-mono">{log.detail.returncode}</b>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subprocess console stdout/stderr */}
|
||||
{(log.detail.stdout || log.detail.stderr) && (
|
||||
<pre className={`p-2 rounded bg-black/60 font-mono text-[11px] leading-normal overflow-x-auto ${isSuccess ? 'text-slate-300 border-l border-emerald-500/45' : 'text-rose-300 border-l border-rose-500/45'}`}>
|
||||
{log.detail.stdout && <code className="block">{log.detail.stdout}</code>}
|
||||
{log.detail.stderr && <code className="block text-rose-400 font-semibold">{log.detail.stderr}</code>}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
})
|
||||
)}
|
||||
{/* Removed internal dummy anchor to avoid viewport jumping */}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user