diff --git a/client/src/pages/Debug.jsx b/client/src/pages/Debug.jsx index c13507b..aee1337 100644 --- a/client/src/pages/Debug.jsx +++ b/client/src/pages/Debug.jsx @@ -6,7 +6,9 @@ import { ExclamationTriangleIcon, InformationCircleIcon, EyeIcon, - TrashIcon + TrashIcon, + DocumentTextIcon, + XMarkIcon } from '@heroicons/react/24/outline'; const Debug = () => { @@ -15,6 +17,9 @@ const Debug = () => { 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: '', @@ -64,6 +69,48 @@ const Debug = () => { 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'; @@ -243,6 +290,9 @@ const Debug = () => { Debug + + Actions + @@ -288,6 +338,16 @@ const Debug = () => { )} + + + ))} @@ -347,6 +407,108 @@ const Debug = () => { )} + + {/* Raw Payload Modal */} + {showPayloadModal && selectedPayload && ( +
+
+
+ {/* Modal Header */} +
+
+ +

+ Raw Payload Data +

+
+ +
+ + {/* Detection Info */} +
+

Detection Information

+
+
+ Detection ID: + {selectedPayload.id} +
+
+ Device ID: + {selectedPayload.deviceId} +
+
+ Server Timestamp: + + {format(new Date(selectedPayload.timestamp), 'yyyy-MM-dd HH:mm:ss')} + +
+
+ Drone Type: + {selectedPayload.processedData.drone_type} +
+
+
+ + {/* Processed Data */} +
+

Processed Data

+
+ 
+                    {JSON.stringify(selectedPayload.processedData, null, 2)}
+
+
+
+ + {/* Raw Payload */} +
+

Raw Payload from Detector

+ {selectedPayload.rawPayload ? ( +
+ 
+                      {JSON.stringify(selectedPayload.rawPayload, null, 2)}
+
+
+ ) : ( +
+

+ ⚠️ No raw payload data available. This might occur if: +

+
    +
  • STORE_RAW_PAYLOAD environment variable is disabled
    • +
  • This detection was created before raw payload storage was enabled
    • +
  • The detection was processed without storing the original payload
    • +
+
+ )} +
+ + {/* Modal Footer */} +
+ + +
+
+
+
+ )} ); }; diff --git a/server/routes/debug.js b/server/routes/debug.js index 7fd0ba9..5738bcb 100644 --- a/server/routes/debug.js +++ b/server/routes/debug.js @@ -27,7 +27,7 @@ router.get('/debug-test', (req, res) => { // Get recent detection payloads with raw data router.get('/detection-payloads', authenticateToken, async (req, res) => { try { - const { limit = 50, offset = 0, device_id } = req.query; + const { limit = 50, offset = 0, device_id, detection_id } = req.query; const whereClause = { raw_payload: { [Op.ne]: null } @@ -37,6 +37,10 @@ router.get('/detection-payloads', authenticateToken, async (req, res) => { whereClause.device_id = device_id; } + if (detection_id) { + whereClause.id = detection_id; + } + const detections = await DroneDetection.findAll({ where: whereClause, order: [['server_timestamp', 'DESC']], @@ -44,7 +48,7 @@ router.get('/detection-payloads', authenticateToken, async (req, res) => { offset: parseInt(offset), attributes: [ 'id', 'device_id', 'drone_id', 'drone_type', 'rssi', 'freq', - 'server_timestamp', 'device_timestamp', 'raw_payload' + 'server_timestamp', 'device_timestamp', 'raw_payload', 'confidence_level', 'signal_duration', 'geo_lat', 'geo_lon' ] });