file transfer
This commit is contained in:
263
src/App.jsx
263
src/App.jsx
@@ -19,36 +19,12 @@ import {
|
||||
Clock,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Database,
|
||||
ArrowRight,
|
||||
Sliders
|
||||
} from 'lucide-react';
|
||||
import sideBarLogo from './assets/side-bar-logo.png';
|
||||
|
||||
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 = {}) => {
|
||||
const token = localStorage.getItem('rmm_token');
|
||||
if (token) {
|
||||
options.headers = {
|
||||
...options.headers,
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
return fetch(url, options).then(response => {
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('rmm_token');
|
||||
window.dispatchEvent(new Event('rmm_unauthorized'));
|
||||
}
|
||||
return response;
|
||||
});
|
||||
};
|
||||
import { API_BASE, apiFetch } from './api';
|
||||
|
||||
function App() {
|
||||
const [token, setToken] = useState(localStorage.getItem('rmm_token') || '');
|
||||
@@ -62,6 +38,10 @@ function App() {
|
||||
const [logs, setLogs] = useState({});
|
||||
const [whitelist, setWhitelist] = useState({});
|
||||
|
||||
// Remote video fetch state
|
||||
const [fileTransfers, setFileTransfers] = useState({});
|
||||
const [videoNameInputs, setVideoNameInputs] = useState({});
|
||||
|
||||
// Dispatcher form state
|
||||
const [selectedClients, setSelectedClients] = useState([]);
|
||||
const [selectedCommand, setSelectedCommand] = useState('');
|
||||
@@ -123,6 +103,12 @@ function App() {
|
||||
const logsData = await logsRes.json();
|
||||
setLogs(logsData);
|
||||
}
|
||||
|
||||
// Sync remote video fetch transfer states
|
||||
const ftRes = await apiFetch(`${API_BASE}/api/file-transfers`);
|
||||
if (ftRes.ok) {
|
||||
setFileTransfers(await ftRes.json());
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Network sync failure:', err);
|
||||
} finally {
|
||||
@@ -172,6 +158,47 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleRequestFile = async (clientId) => {
|
||||
const filename = (videoNameInputs[clientId] || '').trim();
|
||||
if (!filename) {
|
||||
showToast('Enter a video file name first.', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await apiFetch(
|
||||
`${API_BASE}/api/request-file?client_id=${encodeURIComponent(clientId)}&filename=${encodeURIComponent(filename)}`,
|
||||
{ method: 'POST' }
|
||||
);
|
||||
if (response.ok) {
|
||||
showToast(`Requested '${filename}' from ${clientId}`);
|
||||
syncFleetData();
|
||||
} else {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
showToast(data.detail || 'Failed to request file.', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('Cannot connect to RMM backend server.', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelUpload = async (clientId, filename) => {
|
||||
try {
|
||||
const response = await apiFetch(
|
||||
`${API_BASE}/api/cancel-upload?client_id=${encodeURIComponent(clientId)}&filename=${encodeURIComponent(filename)}`,
|
||||
{ method: 'POST' }
|
||||
);
|
||||
if (response.ok) {
|
||||
showToast(`Cancelled upload for '${filename}'`);
|
||||
syncFleetData();
|
||||
} else {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
showToast(data.detail || 'Failed to cancel upload.', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('Cannot connect to server.', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('rmm_token');
|
||||
setToken('');
|
||||
@@ -387,11 +414,10 @@ function App() {
|
||||
<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-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'
|
||||
<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/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' ? (
|
||||
<div className="p-1 rounded-full bg-rose-500/10"><XCircle className="w-5 h-5 text-rose-400" /></div>
|
||||
) : (
|
||||
@@ -415,25 +441,23 @@ function App() {
|
||||
|
||||
{/* Action Controls & Navigation tabs */}
|
||||
<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">
|
||||
<nav className="flex flex-wrap items-center gap-1.5 p-1 rounded-xl bg-slate-950/60 border border-white/5">
|
||||
<button
|
||||
onClick={() => setActiveTab('dashboard')}
|
||||
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'
|
||||
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 shadow-violet-500/10'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-white/5'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<Activity className="w-3.5 h-3.5" />
|
||||
Fleet Status
|
||||
Remote Fleet Systems
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('editor')}
|
||||
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'
|
||||
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 shadow-violet-500/10'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-white/5'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<Settings className="w-3.5 h-3.5" />
|
||||
Whitelist Editor
|
||||
@@ -480,18 +504,16 @@ function App() {
|
||||
{/* ALL tab */}
|
||||
<button
|
||||
onClick={() => setNodeFilter('all')}
|
||||
className={`glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden group text-left transition-all duration-200 ${
|
||||
nodeFilter === 'all'
|
||||
className={`glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden group text-left transition-all duration-200 ${nodeFilter === 'all'
|
||||
? 'ring-2 ring-violet-500/60 shadow-[0_0_20px_rgba(139,92,246,0.15)]'
|
||||
: 'hover:ring-1 hover:ring-violet-500/20 hover:shadow-[0_0_12px_rgba(139,92,246,0.08)]'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<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 flex items-center justify-center shrink-0 transition-all ${
|
||||
nodeFilter === 'all'
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 transition-all ${nodeFilter === 'all'
|
||||
? 'bg-violet-500/25 border-2 border-violet-500/60 text-violet-300'
|
||||
: 'bg-violet-500/10 border border-violet-500/20 text-violet-400'
|
||||
}`}>
|
||||
}`}>
|
||||
<Server className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -506,18 +528,16 @@ function App() {
|
||||
{/* ONLINE tab */}
|
||||
<button
|
||||
onClick={() => setNodeFilter('online')}
|
||||
className={`glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden border-l-2 border-l-emerald-500 group text-left transition-all duration-200 ${
|
||||
nodeFilter === 'online'
|
||||
className={`glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden border-l-2 border-l-emerald-500 group text-left transition-all duration-200 ${nodeFilter === 'online'
|
||||
? 'ring-2 ring-emerald-500/60 shadow-[0_0_20px_rgba(16,185,129,0.15)]'
|
||||
: 'hover:ring-1 hover:ring-emerald-500/20 hover:shadow-[0_0_12px_rgba(16,185,129,0.08)]'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<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 flex items-center justify-center shrink-0 transition-all ${
|
||||
nodeFilter === 'online'
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 transition-all ${nodeFilter === 'online'
|
||||
? 'bg-emerald-500/25 border-2 border-emerald-500/60 text-emerald-300'
|
||||
: 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-400'
|
||||
}`}>
|
||||
}`}>
|
||||
<Activity className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -532,18 +552,16 @@ function App() {
|
||||
{/* OFFLINE tab */}
|
||||
<button
|
||||
onClick={() => setNodeFilter('offline')}
|
||||
className={`glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden border-l-2 border-l-rose-500 group text-left transition-all duration-200 ${
|
||||
nodeFilter === 'offline'
|
||||
className={`glass-panel p-5 rounded-2xl flex items-center gap-4 relative overflow-hidden border-l-2 border-l-rose-500 group text-left transition-all duration-200 ${nodeFilter === 'offline'
|
||||
? 'ring-2 ring-rose-500/60 shadow-[0_0_20px_rgba(244,63,94,0.15)]'
|
||||
: 'hover:ring-1 hover:ring-rose-500/20 hover:shadow-[0_0_12px_rgba(244,63,94,0.08)]'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<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 flex items-center justify-center shrink-0 transition-all ${
|
||||
nodeFilter === 'offline'
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 transition-all ${nodeFilter === 'offline'
|
||||
? 'bg-rose-500/25 border-2 border-rose-500/60 text-rose-300'
|
||||
: 'bg-rose-500/10 border border-rose-500/20 text-rose-400'
|
||||
}`}>
|
||||
}`}>
|
||||
<AlertTriangle className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -564,11 +582,10 @@ function App() {
|
||||
<Sliders className="w-4 h-4 text-violet-400" />
|
||||
Remote Fleet Systems Grid ({filteredClientEntries.length})
|
||||
{nodeFilter !== 'all' && (
|
||||
<span className={`text-[9px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider ${
|
||||
nodeFilter === 'online'
|
||||
<span className={`text-[9px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider ${nodeFilter === 'online'
|
||||
? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
|
||||
: 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
|
||||
}`}>
|
||||
}`}>
|
||||
{nodeFilter === 'online' ? '🟢 Online' : '🔴 Offline'}
|
||||
</span>
|
||||
)}
|
||||
@@ -610,8 +627,9 @@ function App() {
|
||||
const isOnline = info.active;
|
||||
const lastSeenDate = info.last_seen ? new Date(info.last_seen).toLocaleString() : 'Never';
|
||||
const isExpanded = expandedClients[clientId] || false;
|
||||
const ft = fileTransfers[clientId];
|
||||
|
||||
{/* Render Compact Card for Offline System */}
|
||||
{/* Render Compact Card for Offline System */ }
|
||||
if (!isOnline) {
|
||||
return (
|
||||
<div
|
||||
@@ -659,7 +677,7 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
{/* Render Full Card for Active/Online System */}
|
||||
{/* Render Full Card for Active/Online System */ }
|
||||
return (
|
||||
<div
|
||||
key={clientId}
|
||||
@@ -705,17 +723,21 @@ function App() {
|
||||
<Cpu className={`w-4 h-4 ${isWarning ? 'text-rose-400 animate-pulse' : 'text-violet-400'}`} />
|
||||
CPU Load
|
||||
</span>
|
||||
<span className={`font-bold font-mono ${isWarning ? 'text-rose-400' : 'text-white'}`}>{cpu}%</span>
|
||||
<span className={`font-bold font-mono ${isWarning ? 'text-rose-400' : 'text-white'}`}>
|
||||
{cpu}%
|
||||
{clientTelemetry.cpu_temp !== undefined && clientTelemetry.cpu_temp !== null && (
|
||||
<span className="text-slate-500 ml-1">@ {clientTelemetry.cpu_temp}°C</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<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
|
||||
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>
|
||||
@@ -746,13 +768,12 @@ function App() {
|
||||
</div>
|
||||
<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
|
||||
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>
|
||||
@@ -824,13 +845,12 @@ function App() {
|
||||
<div className="space-y-1.5">
|
||||
<div className="w-full h-1.5 rounded-full bg-slate-900 overflow-hidden relative border border-white/5">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${
|
||||
d.percent > 85
|
||||
className={`h-full rounded-full transition-all duration-500 ${d.percent > 85
|
||||
? 'bg-gradient-to-r from-rose-500 to-red-500'
|
||||
: d.percent > 70
|
||||
? 'bg-gradient-to-r from-amber-500 to-yellow-500'
|
||||
: 'bg-gradient-to-r from-indigo-500 to-violet-500'
|
||||
}`}
|
||||
}`}
|
||||
style={{ width: `${d.percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -892,6 +912,92 @@ function App() {
|
||||
<p className="text-xs text-slate-400 font-medium italic">Telemetry check-in pending... Waiting for dynamic vitals transmission</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Remote Video Fetch panel */}
|
||||
<div className="mt-5 pt-4 border-t border-white/5">
|
||||
<span className="text-[10px] uppercase font-extrabold tracking-wider text-slate-400 flex items-center gap-1.5 mb-2.5">
|
||||
<Play className="w-4 h-4 text-violet-400" /> Fetch Video From Node
|
||||
</span>
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. 20260707000026_000084.MP4"
|
||||
value={videoNameInputs[clientId] || ''}
|
||||
onChange={(e) => setVideoNameInputs(prev => ({ ...prev, [clientId]: e.target.value }))}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') handleRequestFile(clientId); }}
|
||||
className="flex-1 bg-slate-950/60 border border-white/5 rounded-xl px-3 py-2 text-xs text-slate-300 font-mono placeholder-slate-600 focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/20 transition-all"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRequestFile(clientId)}
|
||||
className="px-5 py-2 rounded-xl text-white font-bold text-xs flex items-center justify-center gap-1.5 bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 shadow-lg shadow-violet-950/40 transition-all"
|
||||
>
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
Fetch
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{ft && (
|
||||
<div className="mt-3 p-3 rounded-xl bg-slate-950/40 border border-white/5">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<span className="text-xs font-mono font-bold text-slate-200 truncate">{ft.filename}</span>
|
||||
<span className={`text-[9px] uppercase tracking-wider font-extrabold px-2 py-0.5 rounded border shrink-0 flex items-center gap-1 ${
|
||||
ft.status === 'ready'
|
||||
? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-300'
|
||||
: ft.status === 'not_found' || ft.status === 'error'
|
||||
? 'bg-rose-500/10 border-rose-500/20 text-rose-300'
|
||||
: 'bg-violet-500/10 border-violet-500/20 text-violet-300'
|
||||
}`}>
|
||||
{(ft.status === 'requested' || ft.status === 'searching' || ft.status === 'uploading') && (
|
||||
<RefreshCw className="w-2.5 h-2.5 animate-spin" />
|
||||
)}
|
||||
{ft.status === 'ready' && <CheckCircle className="w-2.5 h-2.5" />}
|
||||
{(ft.status === 'not_found' || ft.status === 'error') && <XCircle className="w-2.5 h-2.5" />}
|
||||
{ft.status}
|
||||
</span>
|
||||
</div>
|
||||
{ft.message && (
|
||||
<p className="text-[10px] text-slate-500 mt-1.5 font-mono break-all">{ft.message}</p>
|
||||
)}
|
||||
{ft.progress_percent !== undefined && ft.progress_percent !== null && (
|
||||
<div className="mt-2 h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-violet-500 transition-all duration-300"
|
||||
style={{ width: `${Math.min(Math.max(ft.progress_percent, 0), 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{(ft.status === 'requested' || ft.status === 'searching' || ft.status === 'uploading') && (
|
||||
<div className="mt-2.5 flex justify-end">
|
||||
<button
|
||||
onClick={() => handleCancelUpload(clientId, ft.filename)}
|
||||
className="px-3 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider text-rose-300 bg-rose-500/10 border border-rose-500/20 hover:bg-rose-500/20 transition-all flex items-center gap-1.5"
|
||||
>
|
||||
<XCircle className="w-3 h-3" /> Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{ft.status === 'ready' && (
|
||||
<div className="flex gap-2 mt-2.5">
|
||||
<a
|
||||
href={`${API_BASE}/api/download-file?client_id=${encodeURIComponent(clientId)}&filename=${encodeURIComponent(ft.filename)}&token=${encodeURIComponent(token)}&inline=true`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider text-emerald-300 bg-emerald-500/10 border border-emerald-500/20 hover:bg-emerald-500/20 transition-all flex items-center gap-1.5"
|
||||
>
|
||||
<Play className="w-3 h-3" /> Play
|
||||
</a>
|
||||
<a
|
||||
href={`${API_BASE}/api/download-file?client_id=${encodeURIComponent(clientId)}&filename=${encodeURIComponent(ft.filename)}&token=${encodeURIComponent(token)}`}
|
||||
className="px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider text-slate-300 bg-white/5 border border-white/10 hover:bg-white/10 transition-all flex items-center gap-1.5"
|
||||
>
|
||||
<HardDrive className="w-3 h-3" /> Download
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
@@ -959,11 +1065,10 @@ function App() {
|
||||
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
|
||||
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/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 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" />}
|
||||
@@ -1040,7 +1145,7 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
) : activeTab === 'editor' ? (
|
||||
/* Visual Whitelist JSON Configuration Editor */
|
||||
<div className="col-span-3">
|
||||
<div className="glass-panel p-5 md:p-6 rounded-2xl border border-white/5 space-y-6">
|
||||
@@ -1110,11 +1215,10 @@ function App() {
|
||||
<button
|
||||
onClick={handleSaveWhitelist}
|
||||
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
|
||||
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]'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
Deploy Whitelist Configuration
|
||||
@@ -1123,7 +1227,7 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
</main>
|
||||
|
||||
{/* Scrolling DevOps CLI output shell terminal */}
|
||||
@@ -1228,9 +1332,8 @@ function App() {
|
||||
|
||||
{/* Subprocess console stdout/stderr */}
|
||||
{(log.detail.stdout || log.detail.stderr) && (
|
||||
<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'
|
||||
}`}>
|
||||
<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>
|
||||
|
||||
34
src/api.js
Normal file
34
src/api.js
Normal file
@@ -0,0 +1,34 @@
|
||||
let resolvedBase = '';
|
||||
|
||||
if (import.meta.env.VITE_API_BASE_URL) {
|
||||
resolvedBase = import.meta.env.VITE_API_BASE_URL;
|
||||
} else if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
resolvedBase = 'http://localhost:8000';
|
||||
} else if (window.location.hostname.includes('devtunnels.ms')) {
|
||||
// Automatically route devtunnels frontend (e.g. 4174) to devtunnels backend (8000)
|
||||
const newHostname = window.location.hostname.replace(/-\d+/, '-8000');
|
||||
resolvedBase = `https://${newHostname}`;
|
||||
} else {
|
||||
resolvedBase = window.location.protocol === 'https:'
|
||||
? 'https://rmm-backend.seekright.com'
|
||||
: 'http://rmm-backend.seekright.com';
|
||||
}
|
||||
|
||||
export const API_BASE = resolvedBase;
|
||||
|
||||
export const apiFetch = (url, options = {}) => {
|
||||
const token = localStorage.getItem('rmm_token');
|
||||
if (token) {
|
||||
options.headers = {
|
||||
...options.headers,
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
return fetch(url, options).then(response => {
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('rmm_token');
|
||||
window.dispatchEvent(new Event('rmm_unauthorized'));
|
||||
}
|
||||
return response;
|
||||
});
|
||||
};
|
||||
@@ -6,7 +6,7 @@ export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 4173,
|
||||
port: 6173,
|
||||
allowedHosts: ["rmm.seekright.com"]
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user