mirror of
https://github.com/okieselbach/AutopilotMonitor.git
synced 2026-10-25 05:00:07 +00:00
enhanced download tracker and added block device for admin
This commit is contained in:
Oliver Kieselbach
@@ -1 +1 @@
|
||||
182
|
||||
183
|
||||
|
||||
@@ -45,6 +45,9 @@ export default function Home() {
|
||||
const sessionsPerPage = 7;
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [sessionToDelete, setSessionToDelete] = useState<{ sessionId: string; tenantId: string; deviceName?: string } | null>(null);
|
||||
const [showBlockConfirm, setShowBlockConfirm] = useState(false);
|
||||
const [sessionToBlock, setSessionToBlock] = useState<{ serialNumber: string; tenantId: string; deviceName?: string } | null>(null);
|
||||
const [blockingDevice, setBlockingDevice] = useState(false);
|
||||
const [adminMode, setAdminMode] = useState(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem('adminMode') === 'true';
|
||||
@@ -393,6 +396,59 @@ export default function Home() {
|
||||
setSessionToDelete(null);
|
||||
};
|
||||
|
||||
const blockDevice = (serialNumber: string, sessionTenantId: string, deviceName?: string) => {
|
||||
setSessionToBlock({ serialNumber, tenantId: sessionTenantId, deviceName });
|
||||
setShowBlockConfirm(true);
|
||||
};
|
||||
|
||||
const confirmBlock = async () => {
|
||||
if (!sessionToBlock) return;
|
||||
|
||||
try {
|
||||
setBlockingDevice(true);
|
||||
const token = await getAccessToken();
|
||||
|
||||
if (!token) {
|
||||
alert('Authentication error: Failed to get access token. Please try logging in again.');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/api/devices/block`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
tenantId: sessionToBlock.tenantId,
|
||||
serialNumber: sessionToBlock.serialNumber,
|
||||
durationHours: 24,
|
||||
reason: `Blocked from dashboard by Galactic Admin`
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log(`Device ${sessionToBlock.serialNumber} blocked successfully`);
|
||||
setShowBlockConfirm(false);
|
||||
setSessionToBlock(null);
|
||||
addNotification('success', 'Device Blocked', `Device ${sessionToBlock.deviceName || sessionToBlock.serialNumber} blocked for 24 hours.`);
|
||||
} else {
|
||||
const data = await response.json();
|
||||
alert(`Fehler beim Blocken: ${data.message || 'Unbekannter Fehler'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to block device:', error);
|
||||
alert('Fehler beim Blocken des Geräts');
|
||||
} finally {
|
||||
setBlockingDevice(false);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelBlock = () => {
|
||||
setShowBlockConfirm(false);
|
||||
setSessionToBlock(null);
|
||||
};
|
||||
|
||||
const activeSessions = sessions.filter(s => s.status === "InProgress");
|
||||
const successRate = sessions.length > 0
|
||||
? Math.round((sessions.filter(s => s.status === "Succeeded").length / sessions.length) * 100)
|
||||
@@ -823,18 +879,34 @@ export default function Home() {
|
||||
</td>
|
||||
{adminMode && (
|
||||
<td className="pl-3 pr-4 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent row click navigation
|
||||
deleteSession(session.sessionId, session.tenantId, session.deviceName || session.serialNumber);
|
||||
}}
|
||||
className="text-red-600 hover:text-red-900 transition-colors"
|
||||
title="Session löschen"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{galacticAdminMode && user?.isGalacticAdmin && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
blockDevice(session.serialNumber, session.tenantId, session.deviceName || session.serialNumber);
|
||||
}}
|
||||
className="text-orange-500 hover:text-orange-700 transition-colors"
|
||||
title="Device blocken"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteSession(session.sessionId, session.tenantId, session.deviceName || session.serialNumber);
|
||||
}}
|
||||
className="text-red-600 hover:text-red-900 transition-colors"
|
||||
title="Session löschen"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
@@ -917,6 +989,49 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Block Device Confirmation Modal */}
|
||||
{showBlockConfirm && sessionToBlock && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={cancelBlock}>
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="ml-4 text-lg font-semibold text-gray-900">Block Device</h3>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="text-sm text-gray-700 mb-2">
|
||||
Device <span className="font-semibold">{sessionToBlock.deviceName || sessionToBlock.serialNumber}</span> (Serial: <span className="font-mono text-xs">{sessionToBlock.serialNumber}</span>) will be blocked for <span className="font-semibold">24 hours</span>.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
The agent will stop uploading data while blocked. Do you want to continue?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={cancelBlock}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmBlock}
|
||||
disabled={blockingDevice}
|
||||
className="px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{blockingDevice ? 'Blocking...' : 'Block'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
|
||||
@@ -267,6 +267,7 @@ export default function DownloadProgress({ events, summaryStats }: DownloadProgr
|
||||
|
||||
function DownloadItem({ download: dl, progressPercent }: { download: DownloadItem; progressPercent: number }) {
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
const [showDoStats, setShowDoStats] = useState(false);
|
||||
const hasKnownTotal = dl.bytesTotal > 0;
|
||||
const showProgressBar = !dl.isSkipped && (hasKnownTotal || dl.isComplete || !dl.isComplete);
|
||||
|
||||
@@ -346,61 +347,67 @@ function DownloadItem({ download: dl, progressPercent }: { download: DownloadIte
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delivery Optimization stats */}
|
||||
{/* Delivery Optimization stats (collapsible) */}
|
||||
{dl.doStats && dl.doStats.fileSize > 0 && (
|
||||
<div className="mt-2 p-2 bg-blue-50 rounded border border-blue-100">
|
||||
<div className="flex items-center space-x-1 mb-1">
|
||||
<div className="mt-2">
|
||||
<button
|
||||
onClick={() => setShowDoStats(!showDoStats)}
|
||||
className="flex items-center space-x-1 text-xs text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<span className="text-xs font-medium text-blue-700">Delivery Optimization</span>
|
||||
<span className="text-xs text-blue-500">
|
||||
({formatDoMode(dl.doStats.downloadMode)})
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-gray-600">
|
||||
<div>
|
||||
<span className="text-gray-500">Duration:</span>{" "}
|
||||
<span className="font-medium">{formatDoDuration(dl.doStats.downloadDuration)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">File Size:</span>{" "}
|
||||
<span className="font-medium">{formatBytes(dl.doStats.fileSize)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">From HTTP:</span>{" "}
|
||||
<span className="font-medium">{formatBytes(dl.doStats.bytesFromHttp)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">From Peers:</span>{" "}
|
||||
<span className="font-medium">
|
||||
{formatBytes(dl.doStats.bytesFromPeers)}
|
||||
{dl.doStats.percentPeerCaching > 0 && (
|
||||
<span className="text-green-600 ml-1">({dl.doStats.percentPeerCaching}%)</span>
|
||||
<span className="font-medium">Delivery Optimization</span>
|
||||
<span className="text-blue-500">({formatDoMode(dl.doStats.downloadMode)})</span>
|
||||
<span className="text-blue-400">{showDoStats ? '▼' : '▶'}</span>
|
||||
</button>
|
||||
{showDoStats && (
|
||||
<div className="mt-1 p-2 bg-blue-50 rounded border border-blue-100">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-gray-600">
|
||||
<div>
|
||||
<span className="text-gray-500">Duration:</span>{" "}
|
||||
<span className="font-medium">{formatDoDuration(dl.doStats.downloadDuration)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">File Size:</span>{" "}
|
||||
<span className="font-medium">{formatBytes(dl.doStats.fileSize)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">From HTTP:</span>{" "}
|
||||
<span className="font-medium">{formatBytes(dl.doStats.bytesFromHttp)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">From Peers:</span>{" "}
|
||||
<span className="font-medium">
|
||||
{formatBytes(dl.doStats.bytesFromPeers)}
|
||||
{dl.doStats.percentPeerCaching > 0 && (
|
||||
<span className="text-green-600 ml-1">({dl.doStats.percentPeerCaching}%)</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{dl.doStats.bytesFromPeers > 0 && (
|
||||
<div className="col-span-2 mt-1 text-xs text-gray-500">
|
||||
Peer breakdown: LAN {formatBytes(dl.doStats.bytesFromLanPeers)}
|
||||
{" | "}Group {formatBytes(dl.doStats.bytesFromGroupPeers)}
|
||||
{" | "}Internet {formatBytes(dl.doStats.bytesFromInternetPeers)}
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{dl.doStats.bytesFromPeers > 0 && (
|
||||
<div className="col-span-2 mt-1 text-xs text-gray-500">
|
||||
Peer breakdown: LAN {formatBytes(dl.doStats.bytesFromLanPeers)}
|
||||
{" | "}Group {formatBytes(dl.doStats.bytesFromGroupPeers)}
|
||||
{" | "}Internet {formatBytes(dl.doStats.bytesFromInternetPeers)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Peer vs HTTP visual bar */}
|
||||
<div className="mt-1.5 w-full h-1.5 bg-gray-200 rounded-full overflow-hidden flex">
|
||||
<div
|
||||
className="h-full bg-green-400"
|
||||
style={{ width: `${dl.doStats.percentPeerCaching}%` }}
|
||||
title={`${dl.doStats.percentPeerCaching}% from peers`}
|
||||
/>
|
||||
<div
|
||||
className="h-full bg-blue-400"
|
||||
style={{ width: `${100 - dl.doStats.percentPeerCaching}%` }}
|
||||
title={`${100 - dl.doStats.percentPeerCaching}% from HTTP`}
|
||||
/>
|
||||
</div>
|
||||
{/* Peer vs HTTP visual bar */}
|
||||
<div className="mt-1.5 w-full h-1.5 bg-gray-200 rounded-full overflow-hidden flex">
|
||||
<div
|
||||
className="h-full bg-green-400"
|
||||
style={{ width: `${dl.doStats.percentPeerCaching}%` }}
|
||||
title={`${dl.doStats.percentPeerCaching}% from peers`}
|
||||
/>
|
||||
<div
|
||||
className="h-full bg-blue-400"
|
||||
style={{ width: `${100 - dl.doStats.percentPeerCaching}%` }}
|
||||
title={`${100 - dl.doStats.percentPeerCaching}% from HTTP`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user