517 lines
22 KiB
JavaScript
517 lines
22 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import api from '../services/api';
|
||
import { format } from 'date-fns';
|
||
import {
|
||
BugAntIcon,
|
||
ExclamationTriangleIcon,
|
||
InformationCircleIcon,
|
||
EyeIcon,
|
||
TrashIcon,
|
||
DocumentTextIcon,
|
||
XMarkIcon
|
||
} from '@heroicons/react/24/outline';
|
||
|
||
const Debug = () => {
|
||
const [debugData, setDebugData] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
const [pagination, setPagination] = useState({});
|
||
const [debugInfo, setDebugInfo] = useState({});
|
||
const [showPayloadModal, setShowPayloadModal] = useState(false);
|
||
const [selectedPayload, setSelectedPayload] = useState(null);
|
||
const [payloadLoading, setPayloadLoading] = useState(false);
|
||
const [filters, setFilters] = useState({
|
||
drone_type: '',
|
||
device_id: '',
|
||
page: 1,
|
||
limit: 50
|
||
});
|
||
|
||
useEffect(() => {
|
||
fetchDebugData();
|
||
}, [filters]);
|
||
|
||
const fetchDebugData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const params = new URLSearchParams();
|
||
|
||
Object.entries(filters).forEach(([key, value]) => {
|
||
if (value) params.append(key, value);
|
||
});
|
||
|
||
const response = await api.get(`/detections/debug?${params}`);
|
||
|
||
if (response.data.success) {
|
||
setDebugData(response.data.data);
|
||
setPagination(response.data.pagination);
|
||
setDebugInfo(response.data.debug_info);
|
||
} else {
|
||
setError(response.data.message || 'Failed to fetch debug data');
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching debug data:', err);
|
||
setError(err.response?.data?.message || 'Failed to fetch debug data');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleFilterChange = (key, value) => {
|
||
setFilters(prev => ({
|
||
...prev,
|
||
[key]: value,
|
||
page: 1 // Reset to first page when filtering
|
||
}));
|
||
};
|
||
|
||
const handlePageChange = (newPage) => {
|
||
setFilters(prev => ({ ...prev, page: newPage }));
|
||
};
|
||
|
||
const fetchRawPayload = async (detectionId) => {
|
||
try {
|
||
setPayloadLoading(true);
|
||
const response = await api.get(`/debug/detection-payloads?limit=1&detection_id=${detectionId}`);
|
||
|
||
if (response.data.success && response.data.data.length > 0) {
|
||
const detection = response.data.data[0];
|
||
setSelectedPayload({
|
||
id: detection.id,
|
||
timestamp: detection.server_timestamp,
|
||
deviceId: detection.device_id,
|
||
rawPayload: detection.raw_payload,
|
||
processedData: {
|
||
drone_id: detection.drone_id,
|
||
drone_type: detection.drone_type,
|
||
rssi: detection.rssi,
|
||
freq: detection.freq,
|
||
geo_lat: detection.geo_lat,
|
||
geo_lon: detection.geo_lon,
|
||
device_timestamp: detection.device_timestamp,
|
||
confidence_level: detection.confidence_level,
|
||
signal_duration: detection.signal_duration
|
||
}
|
||
});
|
||
setShowPayloadModal(true);
|
||
} else {
|
||
console.error('No payload data found for detection:', detectionId);
|
||
alert('No raw payload data found for this detection');
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching payload:', err);
|
||
alert('Failed to fetch payload data');
|
||
} finally {
|
||
setPayloadLoading(false);
|
||
}
|
||
};
|
||
|
||
const closePayloadModal = () => {
|
||
setShowPayloadModal(false);
|
||
setSelectedPayload(null);
|
||
};
|
||
|
||
const getDroneTypeColor = (droneType) => {
|
||
if (droneType === 0) return 'bg-gray-100 text-gray-800';
|
||
return 'bg-blue-100 text-blue-800';
|
||
};
|
||
|
||
const getThreatLevelColor = (threatLevel) => {
|
||
switch (threatLevel?.toLowerCase()) {
|
||
case 'critical':
|
||
return 'bg-red-100 text-red-800';
|
||
case 'high':
|
||
return 'bg-orange-100 text-orange-800';
|
||
case 'medium':
|
||
return 'bg-yellow-100 text-yellow-800';
|
||
case 'low':
|
||
return 'bg-green-100 text-green-800';
|
||
default:
|
||
return 'bg-gray-100 text-gray-800';
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-96">
|
||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-500"></div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="bg-red-50 border border-red-200 rounded-md p-4">
|
||
<div className="flex">
|
||
<ExclamationTriangleIcon className="h-5 w-5 text-red-400" />
|
||
<div className="ml-3">
|
||
<h3 className="text-sm font-medium text-red-800">Error</h3>
|
||
<div className="mt-2 text-sm text-red-700">{error}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="bg-white shadow rounded-lg p-6">
|
||
<div className="flex items-center">
|
||
<BugAntIcon className="h-8 w-8 text-orange-500 mr-3" />
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900">Debug Console</h1>
|
||
<p className="text-sm text-gray-500">
|
||
Admin-only access to all detection data including drone type 0 (None)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Debug Info */}
|
||
{debugInfo && (
|
||
<div className="bg-yellow-50 border border-yellow-200 rounded-md p-4">
|
||
<div className="flex">
|
||
<InformationCircleIcon className="h-5 w-5 text-yellow-400" />
|
||
<div className="ml-3">
|
||
<h3 className="text-sm font-medium text-yellow-800">Debug Information</h3>
|
||
<div className="mt-2 text-sm text-yellow-700">
|
||
<p>{debugInfo.message}</p>
|
||
<p className="mt-1">Total None detections: <strong>{debugInfo.total_none_detections}</strong></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Filters */}
|
||
<div className="bg-white shadow rounded-lg p-6">
|
||
<h3 className="text-lg font-medium text-gray-900 mb-4">Filters</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Drone Type
|
||
</label>
|
||
<select
|
||
value={filters.drone_type}
|
||
onChange={(e) => handleFilterChange('drone_type', e.target.value)}
|
||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||
>
|
||
<option value="">All Types</option>
|
||
<option value="0">0 - None (Debug)</option>
|
||
<option value="1">1 - Unknown</option>
|
||
<option value="2">2 - Orlan</option>
|
||
<option value="3">3 - Zala</option>
|
||
<option value="4">4 - Eleron</option>
|
||
<option value="5">5 - Zala Lancet</option>
|
||
<option value="6">6 - Lancet</option>
|
||
<option value="7">7 - FPV CrossFire</option>
|
||
<option value="8">8 - FPV ELRS</option>
|
||
<option value="9">9 - Maybe Orlan</option>
|
||
<option value="10">10 - Maybe Zala</option>
|
||
<option value="11">11 - Maybe Lancet</option>
|
||
<option value="12">12 - Maybe Eleron</option>
|
||
<option value="13">13 - DJI</option>
|
||
<option value="14">14 - Supercam</option>
|
||
<option value="15">15 - Maybe Supercam</option>
|
||
<option value="16">16 - REB</option>
|
||
<option value="17">17 - Crypto Orlan</option>
|
||
<option value="18">18 - DJI Enterprise</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Device ID
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={filters.device_id}
|
||
onChange={(e) => handleFilterChange('device_id', e.target.value)}
|
||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||
placeholder="Filter by device ID"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Results per page
|
||
</label>
|
||
<select
|
||
value={filters.limit}
|
||
onChange={(e) => handleFilterChange('limit', e.target.value)}
|
||
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-primary-500 focus:border-primary-500"
|
||
>
|
||
<option value="25">25</option>
|
||
<option value="50">50</option>
|
||
<option value="100">100</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Debug Data Table */}
|
||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||
<div className="px-6 py-4 border-b border-gray-200">
|
||
<h3 className="text-lg font-medium text-gray-900">
|
||
Debug Detections ({pagination.total || 0})
|
||
</h3>
|
||
</div>
|
||
|
||
{debugData.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<BugAntIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||
<h3 className="mt-2 text-sm font-medium text-gray-900">No debug data</h3>
|
||
<p className="mt-1 text-sm text-gray-500">
|
||
No detections found matching the current filters.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="overflow-x-auto">
|
||
<table className="min-w-full divide-y divide-gray-200">
|
||
<thead className="bg-gray-50">
|
||
<tr>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
ID / Time
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Device
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Drone Type
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
RSSI / Freq
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Threat Level
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Debug
|
||
</th>
|
||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
Actions
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="bg-white divide-y divide-gray-200">
|
||
{debugData.map((detection) => (
|
||
<tr key={detection.id} className={detection.is_debug_data ? 'bg-gray-50' : ''}>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="text-sm text-gray-900">#{detection.id}</div>
|
||
<div className="text-sm text-gray-500">
|
||
{format(new Date(detection.server_timestamp), 'MMM dd, HH:mm:ss')}
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="text-sm text-gray-900">
|
||
{detection.device?.name || `Device ${detection.device_id}`}
|
||
</div>
|
||
<div className="text-sm text-gray-500">ID: {detection.device_id}</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getDroneTypeColor(detection.drone_type)}`}>
|
||
{detection.drone_type_info?.name || `Type ${detection.drone_type}`}
|
||
</span>
|
||
<div className="text-xs text-gray-500 mt-1">
|
||
ID: {detection.drone_type}
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="text-sm text-gray-900">{detection.rssi} dBm</div>
|
||
<div className="text-sm text-gray-500">{detection.freq} MHz</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
{detection.threat_level ? (
|
||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getThreatLevelColor(detection.threat_level)}`}>
|
||
{detection.threat_level}
|
||
</span>
|
||
) : (
|
||
<span className="text-gray-400 text-sm">N/A</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
{detection.is_debug_data && (
|
||
<span className="px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
|
||
Debug Data
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<button
|
||
onClick={() => fetchRawPayload(detection.id)}
|
||
disabled={payloadLoading}
|
||
className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
|
||
>
|
||
<DocumentTextIcon className="h-4 w-4 mr-1" />
|
||
{payloadLoading ? 'Loading...' : 'View Payload'}
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
{pagination.pages > 1 && (
|
||
<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||
<div className="flex-1 flex justify-between sm:hidden">
|
||
<button
|
||
onClick={() => handlePageChange(Math.max(1, pagination.page - 1))}
|
||
disabled={pagination.page === 1}
|
||
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
|
||
>
|
||
Previous
|
||
</button>
|
||
<button
|
||
onClick={() => handlePageChange(Math.min(pagination.pages, pagination.page + 1))}
|
||
disabled={pagination.page === pagination.pages}
|
||
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
|
||
>
|
||
Next
|
||
</button>
|
||
</div>
|
||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-700">
|
||
Showing <span className="font-medium">{((pagination.page - 1) * pagination.limit) + 1}</span> to{' '}
|
||
<span className="font-medium">
|
||
{Math.min(pagination.page * pagination.limit, pagination.total)}
|
||
</span>{' '}
|
||
of <span className="font-medium">{pagination.total}</span> results
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
||
<button
|
||
onClick={() => handlePageChange(Math.max(1, pagination.page - 1))}
|
||
disabled={pagination.page === 1}
|
||
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
|
||
>
|
||
Previous
|
||
</button>
|
||
<button
|
||
onClick={() => handlePageChange(Math.min(pagination.pages, pagination.page + 1))}
|
||
disabled={pagination.page === pagination.pages}
|
||
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
|
||
>
|
||
Next
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Raw Payload Modal */}
|
||
{showPayloadModal && selectedPayload && (
|
||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||
<div className="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
|
||
<div className="mt-3">
|
||
{/* Modal Header */}
|
||
<div className="flex items-center justify-between pb-4 border-b">
|
||
<div className="flex items-center">
|
||
<DocumentTextIcon className="h-6 w-6 text-blue-500 mr-2" />
|
||
<h3 className="text-lg font-medium text-gray-900">
|
||
Raw Payload Data
|
||
</h3>
|
||
</div>
|
||
<button
|
||
onClick={closePayloadModal}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<XMarkIcon className="h-6 w-6" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Detection Info */}
|
||
<div className="mt-4 bg-gray-50 rounded-lg p-4">
|
||
<h4 className="font-medium text-gray-900 mb-2">Detection Information</h4>
|
||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||
<div>
|
||
<span className="text-gray-600">Detection ID:</span>
|
||
<span className="ml-2 font-mono">{selectedPayload.id}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-gray-600">Device ID:</span>
|
||
<span className="ml-2 font-mono">{selectedPayload.deviceId}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-gray-600">Server Timestamp:</span>
|
||
<span className="ml-2 font-mono">
|
||
{format(new Date(selectedPayload.timestamp), 'yyyy-MM-dd HH:mm:ss')}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-gray-600">Drone Type:</span>
|
||
<span className="ml-2 font-mono">{selectedPayload.processedData.drone_type}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Processed Data */}
|
||
<div className="mt-4">
|
||
<h4 className="font-medium text-gray-900 mb-2">Processed Data</h4>
|
||
<div className="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
||
<pre className="whitespace-pre-wrap">
|
||
{JSON.stringify(selectedPayload.processedData, null, 2)}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Raw Payload */}
|
||
<div className="mt-4">
|
||
<h4 className="font-medium text-gray-900 mb-2">Raw Payload from Detector</h4>
|
||
{selectedPayload.rawPayload ? (
|
||
<div className="bg-black text-green-400 rounded-lg p-4 font-mono text-sm overflow-x-auto max-h-96 overflow-y-auto">
|
||
<pre className="whitespace-pre-wrap">
|
||
{JSON.stringify(selectedPayload.rawPayload, null, 2)}
|
||
</pre>
|
||
</div>
|
||
) : (
|
||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||
<p className="text-yellow-800 text-sm">
|
||
⚠️ No raw payload data available. This might occur if:
|
||
</p>
|
||
<ul className="mt-2 text-yellow-700 text-sm list-disc list-inside">
|
||
<li>STORE_RAW_PAYLOAD environment variable is disabled</li>
|
||
<li>This detection was created before raw payload storage was enabled</li>
|
||
<li>The detection was processed without storing the original payload</li>
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Modal Footer */}
|
||
<div className="mt-6 flex justify-end space-x-3">
|
||
<button
|
||
onClick={closePayloadModal}
|
||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||
>
|
||
Close
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
navigator.clipboard.writeText(JSON.stringify(selectedPayload, null, 2));
|
||
alert('Payload data copied to clipboard!');
|
||
}}
|
||
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
Copy to Clipboard
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Debug;
|