feat: initialize RMM dashboard frontend with telemetry, command dispatch, and configuration management capabilities
This commit is contained in:
1
.env.development
Normal file
1
.env.development
Normal file
@@ -0,0 +1 @@
|
||||
VITE_API_BASE_URL="http://localhost:8000"
|
||||
1
.env.production
Normal file
1
.env.production
Normal file
@@ -0,0 +1 @@
|
||||
VITE_API_BASE_URL="https://rmm-backend.seekright.com"
|
||||
582
package-lock.json
generated
582
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
611
src/App.jsx
611
src/App.jsx
@@ -12,12 +12,24 @@ import {
|
||||
Flame,
|
||||
Server,
|
||||
AlertTriangle,
|
||||
Play
|
||||
Play,
|
||||
Search,
|
||||
Code,
|
||||
FileCode,
|
||||
Clock,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Database,
|
||||
ArrowRight,
|
||||
Sliders
|
||||
} 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
|
||||
const API_BASE = import.meta.env.VITE_API_BASE_URL ||
|
||||
(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
||||
? 'http://localhost:8000'
|
||||
: (window.location.protocol === 'https:'
|
||||
? 'https://rmm-backend.seekright.com'
|
||||
: 'http://rmm-backend.seekright.com'));
|
||||
|
||||
// Secure API fetch wrapper
|
||||
const apiFetch = (url, options = {}) => {
|
||||
@@ -39,10 +51,13 @@ function App() {
|
||||
|
||||
// Whitelist config editor state
|
||||
const [editorText, setEditorText] = useState('{\n "nt": {},\n "posix": {}\n}');
|
||||
const [jsonError, setJsonError] = useState(null); // Real-time JSON validation error
|
||||
|
||||
const [toast, setToast] = useState(null);
|
||||
const [isSyncing, setIsSyncing] = useState(false);
|
||||
const [filterClient, setFilterClient] = useState('all');
|
||||
const [searchQuery, setSearchQuery] = useState(''); // Live search filter for clients
|
||||
const [expandedClients, setExpandedClients] = useState({}); // Expanded telemetry details for offline nodes
|
||||
const terminalRef = useRef(null);
|
||||
|
||||
const showToast = (message, type = 'success') => {
|
||||
@@ -120,6 +135,20 @@ function App() {
|
||||
}
|
||||
}, [logs]);
|
||||
|
||||
// Real-time JSON validation
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (editorText.trim() === '') {
|
||||
setJsonError('JSON configuration cannot be empty.');
|
||||
return;
|
||||
}
|
||||
JSON.parse(editorText);
|
||||
setJsonError(null);
|
||||
} catch (err) {
|
||||
setJsonError(err.message);
|
||||
}
|
||||
}, [editorText]);
|
||||
|
||||
// Dispatch command to client execution queue
|
||||
const handleDispatch = async (e) => {
|
||||
e.preventDefault();
|
||||
@@ -165,6 +194,10 @@ function App() {
|
||||
|
||||
// Dynamic Whitelist Save Config
|
||||
const handleSaveWhitelist = async () => {
|
||||
if (jsonError) {
|
||||
showToast('Cannot save configuration. Please resolve JSON errors first.', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const parsedConfig = JSON.parse(editorText);
|
||||
const response = await apiFetch(`${API_BASE}/api/save-commands`, {
|
||||
@@ -184,6 +217,13 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleClientDetails = (clientId) => {
|
||||
setExpandedClients(prev => ({
|
||||
...prev,
|
||||
[clientId]: !prev[clientId]
|
||||
}));
|
||||
};
|
||||
|
||||
// Compile individual client arrays into a single global chronological timeline for terminal display
|
||||
const getSortedTimeline = () => {
|
||||
const timeline = [];
|
||||
@@ -209,81 +249,93 @@ function App() {
|
||||
const activeClients = Object.values(clients).filter(c => c.active).length;
|
||||
const totalClients = Object.keys(clients).length;
|
||||
|
||||
// Filter clients based on search query
|
||||
const filteredClientEntries = Object.entries(clients).filter(([clientId]) =>
|
||||
clientId.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-16 flex flex-col">
|
||||
<div className="min-h-screen pb-16 flex flex-col font-sans antialiased text-slate-100 bg-[#050811]">
|
||||
{/* 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 ${
|
||||
<div className={`fixed bottom-6 right-6 z-50 px-5 py-4 rounded-2xl shadow-2xl flex items-center gap-3 border transition-all duration-300 transform translate-y-0 max-w-sm ${
|
||||
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'
|
||||
? 'bg-rose-950/90 border-rose-500/30 text-rose-200 shadow-rose-950/20'
|
||||
: 'bg-emerald-950/90 border-emerald-500/30 text-emerald-200 shadow-emerald-950/20'
|
||||
}`}>
|
||||
{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>
|
||||
{toast.type === 'error' ? (
|
||||
<div className="p-1 rounded-full bg-rose-500/10"><XCircle className="w-5 h-5 text-rose-400" /></div>
|
||||
) : (
|
||||
<div className="p-1 rounded-full bg-emerald-500/10"><CheckCircle className="w-5 h-5 text-emerald-400" /></div>
|
||||
)}
|
||||
<span className="font-semibold text-sm tracking-wide">{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">
|
||||
<header className="sticky top-0 z-30 w-full px-4 py-4 md:px-6 glass-panel border-b border-white/5 flex flex-col md:flex-row gap-4 items-stretch md:items-center justify-between shadow-[0_4px_30px_rgba(0,0,0,0.4)]">
|
||||
<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 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-500/20 relative group overflow-hidden">
|
||||
<Zap className="w-5 h-5 text-white animate-pulse" />
|
||||
<span className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></span>
|
||||
</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>
|
||||
<span className="text-[9px] uppercase font-mono px-2 py-0.5 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-300 font-semibold">CORE-v1.0</span>
|
||||
</h1>
|
||||
<p className="text-xs text-slate-400 font-medium">Enterprise Global Fleet & Whitelist Agent Orchestrator</p>
|
||||
<p className="text-[11px] 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">
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
|
||||
<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 ${
|
||||
className={`flex-1 sm:flex-initial px-4 py-2 rounded-lg font-semibold text-xs transition-all flex items-center justify-center gap-1.5 ${
|
||||
activeTab === 'dashboard'
|
||||
? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-md'
|
||||
? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-md shadow-violet-500/10'
|
||||
: '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" />
|
||||
<Activity className="w-3.5 h-3.5" />
|
||||
Fleet Status
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('editor')}
|
||||
className={`px-4 py-2 rounded-lg font-semibold text-xs transition-all ${
|
||||
className={`flex-1 sm:flex-initial px-4 py-2 rounded-lg font-semibold text-xs transition-all flex items-center justify-center gap-1.5 ${
|
||||
activeTab === 'editor'
|
||||
? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-md'
|
||||
? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-md shadow-violet-500/10'
|
||||
: '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
|
||||
<Settings className="w-3.5 h-3.5" />
|
||||
Whitelist Editor
|
||||
</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>
|
||||
<div className="flex items-center justify-between sm:justify-start gap-2.5 px-3 py-2 rounded-xl bg-slate-950/40 border border-white/5 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${isSyncing ? 'bg-violet-400 animate-spin' : 'bg-emerald-400 glow-emerald'}`}></span>
|
||||
<span className="font-mono text-slate-300 font-medium">
|
||||
API Status: <b className="text-emerald-400 font-bold">Online</b>
|
||||
</span>
|
||||
</div>
|
||||
<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"
|
||||
className="p-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-slate-400 hover:text-slate-200 transition-all border border-white/5"
|
||||
>
|
||||
<RefreshCw className={`w-3 h-3 ${isSyncing ? 'animate-spin text-violet-400' : ''}`} />
|
||||
<RefreshCw className={`w-3.5 h-3.5 ${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">
|
||||
<main className="max-w-7xl w-full mx-auto px-4 md:px-6 mt-8 flex-grow grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{activeTab === 'dashboard' ? (
|
||||
<>
|
||||
@@ -291,70 +343,150 @@ function App() {
|
||||
<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 className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div className="glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-violet-600/5 rounded-full blur-2xl group-hover:bg-violet-600/10 transition-all"></div>
|
||||
<div className="w-12 h-12 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center text-violet-400 shrink-0">
|
||||
<Server className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Total Fleet Nodes</span>
|
||||
<span className="text-3xl font-extrabold text-white mt-0.5 block">{totalClients}</span>
|
||||
</div>
|
||||
</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 className="glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden border-l-2 border-l-emerald-500 group">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-emerald-500/5 rounded-full blur-2xl group-hover:bg-emerald-500/10 transition-all"></div>
|
||||
<div className="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 shrink-0">
|
||||
<Activity className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider block">🟢 Online Nodes</span>
|
||||
<span className="text-3xl font-extrabold text-emerald-400 mt-0.5 block">{activeClients}</span>
|
||||
</div>
|
||||
</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 className="glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden border-l-2 border-l-rose-500 group">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-rose-500/5 rounded-full blur-2xl group-hover:bg-rose-500/10 transition-all"></div>
|
||||
<div className="w-12 h-12 rounded-xl bg-rose-500/10 border border-rose-500/20 flex items-center justify-center text-rose-400 shrink-0">
|
||||
<AlertTriangle className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider block">🔴 Offline Nodes</span>
|
||||
<span className="text-3xl font-extrabold text-rose-400 mt-0.5 block">{totalClients - activeClients}</span>
|
||||
</div>
|
||||
</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>
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<h2 className="text-xs font-bold text-slate-300 tracking-wider uppercase flex items-center gap-2">
|
||||
<Sliders className="w-4 h-4 text-violet-400" />
|
||||
Remote Fleet Systems Grid ({filteredClientEntries.length})
|
||||
</h2>
|
||||
|
||||
{Object.keys(clients).length === 0 ? (
|
||||
{/* Node Search Bar */}
|
||||
<div className="relative w-full sm:w-64">
|
||||
<Search className="w-4 h-4 text-slate-500 absolute left-3 top-2.5" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search systems..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-slate-950/60 border border-white/5 rounded-xl pl-9 pr-4 py-1.5 text-xs text-slate-300 placeholder-slate-500 focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/20 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredClientEntries.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>
|
||||
<AlertTriangle className="w-8 h-8 mx-auto text-yellow-500/60 mb-3" />
|
||||
<p className="font-semibold text-sm">No systems matching your query.</p>
|
||||
<p className="text-xs text-slate-500 mt-1">Make sure the agent services are actively running</p>
|
||||
</div>
|
||||
) : (
|
||||
Object.entries(clients).map(([clientId, info]) => {
|
||||
filteredClientEntries.map(([clientId, info]) => {
|
||||
const clientTelemetry = telemetry[clientId];
|
||||
const isOnline = info.active;
|
||||
const lastSeenDate = info.last_seen ? new Date(info.last_seen).toLocaleString() : 'Never';
|
||||
const isExpanded = expandedClients[clientId] || false;
|
||||
|
||||
{/* Render Compact Card for Offline System */}
|
||||
if (!isOnline) {
|
||||
return (
|
||||
<div
|
||||
key={clientId}
|
||||
className="glass-panel p-4 rounded-xl border border-white/5 hover:border-rose-500/20 hover:shadow-[0_4px_20px_rgba(244,63,94,0.04)] transition-all duration-300 bg-gradient-to-r from-slate-950/40 to-slate-900/10"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-3.5 h-3.5 rounded-full flex items-center justify-center bg-rose-500/10">
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-rose-500 glow-rose"></span>
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-400 text-base">{clientId}</span>
|
||||
<span className="text-[9px] uppercase tracking-wider font-extrabold px-2 py-0.5 rounded bg-rose-500/10 border border-rose-500/20 text-rose-300/80">
|
||||
Offline
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between sm:justify-end gap-4">
|
||||
<div className="text-left sm:text-right">
|
||||
<span className="text-[9px] text-slate-500 block uppercase font-bold tracking-wider">Last Contact</span>
|
||||
<span className="text-[11px] font-semibold text-slate-400 font-mono">{lastSeenDate}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleClientDetails(clientId)}
|
||||
className="p-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-slate-400 hover:text-slate-200 transition-colors border border-white/5 flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider"
|
||||
>
|
||||
{isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
|
||||
Info
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded Empty Telemetry Status */}
|
||||
{isExpanded && (
|
||||
<div className="mt-3 p-4 bg-black/40 rounded-lg border border-white/5 text-center text-xs text-slate-500 italic">
|
||||
<AlertTriangle className="w-4 h-4 mx-auto text-rose-500/40 mb-1" />
|
||||
Telemetry check-in pending. System is offline and not responding to pings.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Render Full Card for Active/Online System */}
|
||||
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"
|
||||
className="glass-panel p-5 md:p-6 rounded-2xl hover:border-violet-500/40 hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(139,92,246,0.06)] transition-all duration-300 relative overflow-hidden group bg-gradient-to-b from-slate-900/40 to-slate-950/60"
|
||||
>
|
||||
{/* 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'}`} />
|
||||
{/* Status top glow line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-emerald-500 via-teal-400 to-emerald-400" />
|
||||
|
||||
{/* Title block */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 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>
|
||||
<div className="w-3.5 h-3.5 rounded-full flex items-center justify-center bg-emerald-500/10">
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<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.5 w-2.5 bg-emerald-500 glow-emerald"></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 className="text-[9px] uppercase tracking-wider font-extrabold px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-300">
|
||||
Active
|
||||
</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 className="text-left sm:text-right">
|
||||
<span className="text-[9px] text-slate-500 block uppercase font-bold tracking-wider">LAST CHECK-IN</span>
|
||||
<span className="text-xs font-bold text-slate-300 font-mono">{lastSeenDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -362,21 +494,21 @@ function App() {
|
||||
{clientTelemetry ? (
|
||||
<div className="space-y-5">
|
||||
{/* CPU & RAM progress */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm: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">
|
||||
<div className="p-4 bg-slate-950/40 border border-white/5 rounded-xl flex flex-col justify-between">
|
||||
<div className="flex justify-between items-center text-xs font-bold text-slate-400 mb-2.5">
|
||||
<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 className={`w-4 h-4 ${isWarning ? 'text-rose-400 animate-pulse' : 'text-violet-400'}`} />
|
||||
CPU Load
|
||||
</span>
|
||||
<span className={`font-bold ${isWarning ? 'text-rose-400' : 'text-white'}`}>{cpu}%</span>
|
||||
<span className={`font-bold font-mono ${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="w-full h-2 rounded-full bg-slate-900 overflow-hidden relative border border-white/5">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${
|
||||
isWarning
|
||||
@@ -389,8 +521,8 @@ function App() {
|
||||
/>
|
||||
</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 className="text-[9px] text-rose-400 font-bold flex items-center gap-1 mt-2 animate-pulse">
|
||||
<AlertTriangle className="w-2.5 h-2.5" /> High CPU Warning
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -405,15 +537,15 @@ function App() {
|
||||
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">
|
||||
<div className="p-4 bg-slate-950/40 border border-white/5 rounded-xl flex flex-col justify-between">
|
||||
<div className="flex justify-between items-center text-xs font-bold text-slate-400 mb-2.5">
|
||||
<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'}`} />
|
||||
<Activity className={`w-4 h-4 ${isWarning ? 'text-rose-400 animate-pulse' : 'text-violet-400'}`} />
|
||||
Virtual RAM
|
||||
</span>
|
||||
<span className={`font-bold ${isWarning ? 'text-rose-400' : 'text-white'}`}>{ram}%</span>
|
||||
<span className={`font-bold font-mono ${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="w-full h-2 rounded-full bg-slate-900 overflow-hidden relative border border-white/5">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${
|
||||
isWarning
|
||||
@@ -425,7 +557,7 @@ function App() {
|
||||
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">
|
||||
<div className="flex justify-between text-[9px] text-slate-500 font-mono mt-2.5 border-t border-white/5 pt-2">
|
||||
<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>
|
||||
@@ -436,11 +568,11 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* GPU and Partition details */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-white/5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 pt-4 border-t border-white/5">
|
||||
{/* Partition Storage */}
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2.5">
|
||||
<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
|
||||
<HardDrive className="w-4 h-4 text-indigo-400" /> Disk Drive Space
|
||||
</span>
|
||||
<div className="space-y-2.5">
|
||||
{clientTelemetry.disks && clientTelemetry.disks.length > 0 ? (
|
||||
@@ -449,20 +581,20 @@ function App() {
|
||||
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 key={index} className="p-3 rounded-xl bg-slate-950/30 border border-white/5 space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="font-semibold text-slate-300">Disk [ {d.mount} ]</span>
|
||||
<span className="font-bold 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'}`}
|
||||
className={`h-full rounded-full ${d.percent > 85 ? 'bg-rose-505' : 'bg-indigo-500'}`}
|
||||
style={{ width: `${d.percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-[8px] text-slate-500 font-mono">
|
||||
<div className="flex justify-between text-[9px] text-slate-500 font-mono">
|
||||
<span>Free: <b className="text-slate-400">{diskFree} GB</b></span>
|
||||
<span>{d.percent}% Used</span>
|
||||
</div>
|
||||
@@ -476,35 +608,35 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* Nvidia Core GPU Vitals */}
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2.5">
|
||||
<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
|
||||
<Flame className="w-4 h-4 text-rose-400 animate-pulse" /> Nvidia GPU Accelerator
|
||||
</span>
|
||||
<div className="space-y-1.5">
|
||||
<div className="space-y-2.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 key={index} className="p-3 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.5">
|
||||
<span className="font-extrabold text-slate-200 truncate max-w-[150px]">🎮 {gpu.name}</span>
|
||||
<span className="text-violet-400 font-bold font-mono text-xs">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 className="grid grid-cols-2 gap-x-3 gap-y-1.5 text-[10px] text-slate-400 font-mono">
|
||||
<div className="flex justify-between border-r border-white/5 pr-1.5"><span>Temp:</span> <b className="text-slate-200">{gpu.temp}</b></div>
|
||||
<div className="flex justify-between pl-1.5"><span>Fans:</span> <b className="text-slate-200">{gpu.fan_speed}</b></div>
|
||||
<div className="col-span-2 flex justify-between border-t border-white/5 pt-1.5 mt-1">
|
||||
<span>VRAM:</span>
|
||||
<b className="text-slate-200">{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>
|
||||
<span>Power:</span>
|
||||
<b className="text-slate-200">{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 className="text-xs text-slate-500 py-6 text-center font-medium bg-slate-950/15 border border-white/5 rounded-xl italic">
|
||||
No NVIDIA GPU hardware detected.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -513,7 +645,7 @@ function App() {
|
||||
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-6 bg-slate-950/20 rounded-xl border border-white/5 my-4">
|
||||
<div className="text-center py-8 bg-slate-950/20 rounded-2xl 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>
|
||||
)}
|
||||
@@ -526,46 +658,48 @@ function App() {
|
||||
|
||||
{/* 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="glass-panel p-5 md: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">
|
||||
<h2 className="text-xs font-bold text-slate-300 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>
|
||||
<p className="text-[11px] text-slate-400 mt-0.5">Send a whitelisted command down to a node</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleDispatch} className="space-y-4">
|
||||
<form onSubmit={handleDispatch} className="space-y-5">
|
||||
{/* 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">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">
|
||||
Select Targets
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<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"
|
||||
className="text-[10px] text-violet-400 font-bold hover:text-violet-300 transition-colors uppercase tracking-wider bg-violet-500/5 px-2 py-0.5 rounded border border-violet-500/10"
|
||||
>
|
||||
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"
|
||||
className="text-[10px] text-emerald-400 font-bold hover:text-emerald-300 transition-colors uppercase tracking-wider bg-emerald-500/5 px-2 py-0.5 rounded border border-emerald-500/10"
|
||||
>
|
||||
Active
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedClients([])}
|
||||
className="text-[10px] text-slate-500 font-extrabold hover:text-slate-400 transition-colors uppercase tracking-wider"
|
||||
className="text-[10px] text-slate-500 font-bold hover:text-slate-400 transition-colors uppercase tracking-wider bg-white/5 px-2 py-0.5 rounded border border-white/5"
|
||||
>
|
||||
None
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto p-2 bg-slate-950 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>
|
||||
) : (
|
||||
@@ -584,21 +718,21 @@ function App() {
|
||||
}}
|
||||
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'
|
||||
? 'bg-gradient-to-br from-violet-600/20 to-indigo-600/20 border-violet-500/80 shadow-md shadow-violet-900/15 text-white'
|
||||
: 'bg-slate-900/40 border-white/5 hover:border-white/10 text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
{/* Glow element */}
|
||||
{/* Glow dot */}
|
||||
{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'}`} />
|
||||
<span className={`w-1.5 h-1.5 rounded-full shrink-0 ${info.active ? 'bg-emerald-400 glow-emerald' : 'bg-rose-400'}`} />
|
||||
</div>
|
||||
<span className="text-[9px] font-mono text-slate-500 mt-1 font-semibold uppercase tracking-wider">
|
||||
{info.active ? '🟢 Online' : '🔴 Offline'}
|
||||
{info.active ? 'Online' : 'Offline'}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
@@ -609,25 +743,25 @@ function App() {
|
||||
|
||||
{/* 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>
|
||||
<label className="block text-[11px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Or Type Custom Node Target</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. kawsik, client_1, client_2"
|
||||
placeholder="e.g. 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"
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-xs text-slate-200 font-semibold focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/20 placeholder-slate-600 transition-all focus-glow-violet"
|
||||
/>
|
||||
</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>
|
||||
<label className="block text-[11px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Select Whitelisted Operation Key</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"
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-xs text-slate-200 font-semibold focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/20 transition-all"
|
||||
>
|
||||
<option value="">-- Choose Whitelisted Command --</option>
|
||||
<option value="">-- Select Permitted Operation --</option>
|
||||
{Array.from(new Set([
|
||||
...Object.keys(whitelist.nt || {}),
|
||||
...Object.keys(whitelist.posix || {})
|
||||
@@ -641,23 +775,23 @@ function App() {
|
||||
|
||||
{/* 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>
|
||||
<label className="block text-[11px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Or Type Custom Operation Key</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. repair_mysql"
|
||||
placeholder="e.g. check_drives"
|
||||
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"
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-xs text-slate-200 font-semibold focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/20 placeholder-slate-600 transition-all focus-glow-violet"
|
||||
/>
|
||||
</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"
|
||||
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.5 px-4 rounded-xl text-xs 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] active:scale-[0.98] transition-all"
|
||||
>
|
||||
<Zap className="w-4 h-4 fill-white" />
|
||||
Dispatch Operation to Node
|
||||
<Zap className="w-3.5 h-3.5 fill-white" />
|
||||
Dispatch Command Batch
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -666,37 +800,81 @@ function App() {
|
||||
) : (
|
||||
/* 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 className="glass-panel p-5 md:p-6 rounded-2xl border border-white/5 space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-white/5 pb-4">
|
||||
<div>
|
||||
<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 Commands whitelist Editor
|
||||
</h2>
|
||||
<p className="text-[11px] text-slate-400 mt-0.5">
|
||||
Permitted operations are checked against whitelist config and pushed to nodes without restarts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* JSON Validation Status Badge */}
|
||||
<div>
|
||||
{jsonError ? (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-rose-500/10 border border-rose-500/20 text-rose-300 text-xs font-semibold">
|
||||
<XCircle className="w-4 h-4 text-rose-400 shrink-0" />
|
||||
Invalid JSON Config
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 text-xs font-semibold">
|
||||
<CheckCircle className="w-4 h-4 text-emerald-400 shrink-0" />
|
||||
Valid JSON Config
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IDE Editor UI wrapper */}
|
||||
<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="rounded-xl overflow-hidden border border-white/5 bg-[#02040a] shadow-inner relative">
|
||||
{/* Editor Tab Bar */}
|
||||
<div className="bg-[#0b0f19] px-4 py-2 border-b border-white/5 flex items-center justify-between text-xs text-slate-400 font-mono">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileCode className="w-4 h-4 text-violet-400" />
|
||||
<span className="font-semibold text-slate-300">commands.json</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-slate-500 font-semibold uppercase tracking-wider bg-slate-900 px-2 py-0.5 rounded border border-white/5">JSON</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<textarea
|
||||
className="w-full h-[450px] bg-transparent p-4 font-mono text-xs text-emerald-400 leading-relaxed focus:outline-none resize-y"
|
||||
spellCheck="false"
|
||||
value={editorText}
|
||||
onChange={(e) => setEditorText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{jsonError && (
|
||||
<div className="p-3.5 bg-rose-950/40 border border-rose-500/30 rounded-xl text-rose-300 font-mono text-xs leading-relaxed flex gap-2 items-start">
|
||||
<AlertTriangle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<span className="font-bold text-rose-200">JSON Parse Error:</span> {jsonError}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-end gap-3 pt-2">
|
||||
<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"
|
||||
className="w-full sm:w-auto 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"
|
||||
disabled={jsonError !== null}
|
||||
className={`w-full sm:w-auto px-6 py-2.5 rounded-xl text-white font-bold text-xs flex items-center justify-center gap-1.5 transition-all ${
|
||||
jsonError
|
||||
? 'bg-slate-800 text-slate-500 border border-slate-700 cursor-not-allowed'
|
||||
: 'bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 shadow-lg shadow-violet-950/40 hover:shadow-violet-900/50 hover:translate-y-[-1px] active:translate-y-[1px]'
|
||||
}`}
|
||||
>
|
||||
Deploy updated JSON Configuration
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
Deploy Whitelist Configuration
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -706,51 +884,60 @@ function App() {
|
||||
</main>
|
||||
|
||||
{/* Scrolling DevOps CLI output shell terminal */}
|
||||
<footer className="max-w-7xl w-full mx-auto px-6 mt-8">
|
||||
<footer className="max-w-7xl w-full mx-auto px-4 md: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">
|
||||
{/* Terminal Title Bar */}
|
||||
<div className="bg-[#0b0f19] px-4 py-3 border-b border-white/5 flex flex-col sm:flex-row gap-3 sm:items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Window Controls */}
|
||||
<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>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-rose-500/70 block"></span>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-yellow-500/70 block"></span>
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500/70 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 className="text-[10px] uppercase tracking-wider font-extrabold text-slate-400 font-mono ml-2.5 flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4 text-violet-400" />
|
||||
Live Fleet Activity & Webhook Output Shell
|
||||
</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 className="flex items-center gap-3 w-full sm:w-auto justify-between sm:justify-end">
|
||||
<div className="relative">
|
||||
<select
|
||||
value={filterClient}
|
||||
onChange={(e) => setFilterClient(e.target.value)}
|
||||
className="bg-slate-900 border border-white/10 rounded-lg pl-3 pr-8 py-1.5 text-xs text-slate-300 font-semibold focus:outline-none focus:border-violet-500 transition-colors appearance-none cursor-pointer"
|
||||
>
|
||||
<option value="all">🔍 Show All Nodes</option>
|
||||
{Object.keys(clients).map((cid) => (
|
||||
<option key={cid} value={cid}>
|
||||
{cid} logs
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-400">
|
||||
<ChevronDown className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] text-slate-500 font-mono font-medium hidden sm:inline">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">
|
||||
{/* Terminal Console output */}
|
||||
<div ref={terminalRef} className="p-4 h-72 overflow-y-auto font-mono text-[11px] space-y-3 terminal-scroll bg-black/95 select-text">
|
||||
{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>
|
||||
<span className="text-slate-600 block italic py-2">Waiting for fleet check-ins and dispatches 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>
|
||||
<div key={index} className="text-slate-400 flex items-start gap-1 leading-relaxed break-words whitespace-pre-wrap">
|
||||
<span className="text-slate-600 shrink-0 select-none">[{formattedTime}]</span>
|
||||
<span className="text-sky-400 shrink-0 font-bold select-none">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}%)
|
||||
Client <b className="text-white font-semibold">{log.client_id}</b> check-in telemetry pushed. (CPU: <b className="text-sky-300">{log.detail.cpu_percent}%</b>, RAM: <b className="text-sky-300">{log.detail.memory_percent}%</b>)
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -758,11 +945,11 @@ function App() {
|
||||
|
||||
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>
|
||||
<div key={index} className="text-amber-200/90 flex items-start gap-1 leading-relaxed break-words whitespace-pre-wrap">
|
||||
<span className="text-slate-600 shrink-0 select-none">[{formattedTime}]</span>
|
||||
<span className="text-amber-400 shrink-0 font-bold select-none">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>.
|
||||
Operation <b className="text-amber-300 font-bold">"{log.detail.command}"</b> successfully queued for node <b className="text-white font-semibold">{log.client_id}</b>.
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -770,11 +957,11 @@ function App() {
|
||||
|
||||
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>
|
||||
<div key={index} className="text-orange-200/95 flex items-start gap-1 leading-relaxed break-words whitespace-pre-wrap">
|
||||
<span className="text-slate-600 shrink-0 select-none">[{formattedTime}]</span>
|
||||
<span className="text-orange-400 shrink-0 font-bold select-none">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...
|
||||
Agent <b className="text-white font-semibold">{log.client_id}</b> retrieved pending command <b className="text-orange-300 font-bold">"{log.detail.command}"</b>. Executing process...
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -783,22 +970,24 @@ function App() {
|
||||
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:'}
|
||||
<div key={index} className="p-3.5 rounded-xl border bg-slate-950/80 border-white/5 space-y-2.5 my-1.5">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-white/5 pb-2">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="text-slate-600 select-none">[{formattedTime}]</span>
|
||||
<span className={`font-bold text-xs ${isSuccess ? 'text-emerald-400' : 'text-rose-400'}`}>
|
||||
{isSuccess ? '✓ SUCCESS' : '✗ 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 className="text-slate-300">
|
||||
Command <b className="text-white font-semibold">"{log.detail.command}"</b> on <b className="text-white font-semibold">{log.client_id}</b> finished with code <b className="font-mono text-slate-100">{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'}`}>
|
||||
<pre className={`p-3 rounded-lg bg-black/80 font-mono text-[10px] leading-relaxed overflow-x-auto break-all whitespace-pre-wrap ${
|
||||
isSuccess ? 'text-slate-300 border-l-2 border-emerald-500/50' : 'text-rose-300 border-l-2 border-rose-500/50'
|
||||
}`}>
|
||||
{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>
|
||||
@@ -810,7 +999,6 @@ function App() {
|
||||
return null;
|
||||
})
|
||||
)}
|
||||
{/* Removed internal dummy anchor to avoid viewport jumping */}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -818,4 +1006,25 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
// Simple custom Check icon component since lucide-react Check may sometimes fail or need explicit import mapping
|
||||
function Check({ className, ...props }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className}
|
||||
{...props}
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@@ -7,12 +7,15 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #080c14;
|
||||
background-image: radial-gradient(circle at 12% 18%, rgba(139, 92, 246, 0.05) 0%, transparent 45%),
|
||||
radial-gradient(circle at 88% 82%, rgba(59, 130, 246, 0.05) 0%, transparent 45%);
|
||||
background-color: #050811;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.06) 0%, transparent 40%),
|
||||
radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 40%),
|
||||
radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
|
||||
color: #f3f4f6;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
code {
|
||||
@@ -21,44 +24,85 @@ code {
|
||||
|
||||
/* Custom scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
/* Glassmorphism Panel styles */
|
||||
/* Premium Glassmorphism Panel styles */
|
||||
.glass-panel {
|
||||
background: rgba(13, 18, 30, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.45);
|
||||
background: rgba(10, 15, 28, 0.7);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Smooth active pulses */
|
||||
.pulse-glow-emerald {
|
||||
box-shadow: 0 0 12px #10b981;
|
||||
animation: pulse-emerald 2s infinite;
|
||||
.glass-panel:hover {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
@keyframes pulse-emerald {
|
||||
0% { transform: scale(0.92); opacity: 1; }
|
||||
50% { transform: scale(1.15); opacity: 0.6; }
|
||||
100% { transform: scale(0.92); opacity: 1; }
|
||||
/* Glowing Animations for Statuses */
|
||||
.glow-emerald {
|
||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
|
||||
animation: pulse-glow-emerald 2.5s infinite alternate;
|
||||
}
|
||||
|
||||
.glow-rose {
|
||||
box-shadow: 0 0 12px rgba(244, 63, 94, 0.3);
|
||||
animation: pulse-glow-rose 2.5s infinite alternate;
|
||||
}
|
||||
|
||||
.glow-violet {
|
||||
box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
|
||||
animation: pulse-glow-violet 2.5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow-emerald {
|
||||
0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 4px rgba(16, 185, 129, 0.2); }
|
||||
100% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 14px rgba(16, 185, 129, 0.6); }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow-rose {
|
||||
0% { transform: scale(0.95); opacity: 0.7; box-shadow: 0 0 4px rgba(244, 63, 94, 0.15); }
|
||||
100% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 12px rgba(244, 63, 94, 0.45); }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow-violet {
|
||||
0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 4px rgba(139, 92, 246, 0.2); }
|
||||
100% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 14px rgba(139, 92, 246, 0.6); }
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
.terminal-scroll {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Animated border glow on focus */
|
||||
.focus-glow-violet:focus {
|
||||
border-color: rgba(139, 92, 246, 0.5);
|
||||
box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
|
||||
/* Textarea customization */
|
||||
.code-textarea {
|
||||
background: #02040a;
|
||||
color: #34d399; /* emerald-400 */
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user