borg/drone-detector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix jwt-token

Browse Source
This commit is contained in:
Alexander Borg
2025-09-23 09:26:18 +02:00
parent f3b2c0c7ba
commit 3412aadb9c
6 changed files with 494 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/pages/Alerts.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import api from '../services/api';
import { format } from 'date-fns';
import { t } from '../utils/tempTranslations';
import { useTranslation } from '../utils/tempTranslations';
import {
PlusIcon,
BellIcon,
@@ -16,6 +16,7 @@ import { EditAlertModal, DetectionDetailsModal } from '../components/AlertModals
import { useDroneTypes } from '../hooks/useDroneTypes';
const Alerts = () => {
const { t } = useTranslation();
// Drone types hook for dynamic drone type data
const { getDroneTypeInfo: getDroneTypeInfoFromAPI, loading: droneTypesLoading } = useDroneTypes();
@@ -110,7 +111,7 @@ const Alerts = () => {
};
const handleDeleteRule = async (ruleId) => {
if (window.confirm('Are you sure you want to delete this alert rule?')) {
if (window.confirm(t('alerts.deleteRule') + '?')) {
try {
await api.delete(`/alerts/rules/${ruleId}`);
fetchAlertData();
@@ -233,7 +234,7 @@ const Alerts = () => {
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
<span className="ml-4 text-gray-600">
{droneTypesLoading ? 'Loading drone types...' : t('alerts.loading')}
{droneTypesLoading ? t('common.loading') : t('alerts.loading')}
</span>
</div>
);

112
client/src/pages/Debug.jsx
View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import api from '../services/api';
import { format } from 'date-fns';
import { formatFrequency } from '../utils/formatFrequency';
import { useTranslation } from '../utils/tempTranslations';
import {
BugAntIcon,
ExclamationTriangleIcon,
@@ -13,6 +14,7 @@ import {
} from '@heroicons/react/24/outline';
const Debug = () => {
const { t } = useTranslation();
const [debugData, setDebugData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
@@ -48,11 +50,11 @@ const Debug = () => {
setPagination(response.data.pagination);
setDebugInfo(response.data.debug_info);
} else {
setError(response.data.message || 'Failed to fetch debug data');
setError(response.data.message || t('debug.noDetectionsFound'));
}
} catch (err) {
console.error('Error fetching debug data:', err);
setError(err.response?.data?.message || 'Failed to fetch debug data');
setError(err.response?.data?.message || t('debug.noDetectionsFound'));
} finally {
setLoading(false);
}
@@ -97,11 +99,11 @@ const Debug = () => {
setShowPayloadModal(true);
} else {
console.error('No payload data found for detection:', detectionId);
alert('No raw payload data found for this detection');
alert(t('debug.payloadViewer.noPayloadData'));
}
} catch (err) {
console.error('Error fetching payload:', err);
alert('Failed to fetch payload data');
alert(t('debug.payloadViewer.failedToFetch'));
} finally {
setPayloadLoading(false);
}
@@ -146,7 +148,7 @@ const Debug = () => {
<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>
<h3 className="text-sm font-medium text-red-800">{t('common.error')}</h3>
<div className="mt-2 text-sm text-red-700">{error}</div>
</div>
</div>
@@ -161,9 +163,9 @@ const Debug = () => {
<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>
<h1 className="text-2xl font-bold text-gray-900">{t('debug.title')}</h1>
<p className="text-sm text-gray-500">
Admin-only access to all detection data including drone type 0 (None)
{t('debug.subtitle')}
</p>
</div>
</div>
@@ -175,10 +177,10 @@ const Debug = () => {
<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>
<h3 className="text-sm font-medium text-yellow-800">{t('debug.debugInformation')}</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>
<p className="mt-1">{t('debug.totalNoneDetections', { count: debugInfo.total_none_detections })}</p>
</div>
</div>
</div>
@@ -187,56 +189,56 @@ const Debug = () => {
{/* Filters */}
<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4">Filters</h3>
<h3 className="text-lg font-medium text-gray-900 mb-4">{t('debug.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
{t('debug.droneType')}
</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>
<option value="">{t('debug.allTypes')}</option>
<option value="0">{t('debug.droneTypeOptions.none')}</option>
<option value="1">{t('debug.droneTypeOptions.unknown')}</option>
<option value="2">{t('debug.droneTypeOptions.orlan')}</option>
<option value="3">{t('debug.droneTypeOptions.zala')}</option>
<option value="4">{t('debug.droneTypeOptions.eleron')}</option>
<option value="5">{t('debug.droneTypeOptions.zalaLancet')}</option>
<option value="6">{t('debug.droneTypeOptions.lancet')}</option>
<option value="7">{t('debug.droneTypeOptions.fpvCrossFire')}</option>
<option value="8">{t('debug.droneTypeOptions.fpvElrs')}</option>
<option value="9">{t('debug.droneTypeOptions.maybeOrlan')}</option>
<option value="10">{t('debug.droneTypeOptions.maybeZala')}</option>
<option value="11">{t('debug.droneTypeOptions.maybeLancet')}</option>
<option value="12">{t('debug.droneTypeOptions.maybeEleron')}</option>
<option value="13">{t('debug.droneTypeOptions.dji')}</option>
<option value="14">{t('debug.droneTypeOptions.supercam')}</option>
<option value="15">{t('debug.droneTypeOptions.maybeSupercam')}</option>
<option value="16">{t('debug.droneTypeOptions.reb')}</option>
<option value="17">{t('debug.droneTypeOptions.cryptoOrlan')}</option>
<option value="18">{t('debug.droneTypeOptions.djiEnterprise')}</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Device ID
{t('debug.deviceId')}
</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"
placeholder={t('debug.filterByDeviceId')}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Results per page
{t('debug.resultsPerPage')}
</label>
<select
value={filters.limit}
@@ -255,16 +257,16 @@ const Debug = () => {
<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})
{t('debug.debugDetections', { count: 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>
<h3 className="mt-2 text-sm font-medium text-gray-900">{t('debug.noDebugData')}</h3>
<p className="mt-1 text-sm text-gray-500">
No detections found matching the current filters.
{t('debug.noDetectionsFound')}
</p>
</div>
) : (
@@ -274,25 +276,25 @@ const Debug = () => {
<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
{t('debug.idTime')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Device
{t('debug.device')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Drone Type
{t('debug.droneType')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
RSSI / Freq
{t('debug.rssiFreq')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Threat Level
{t('debug.threatLevel')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Debug
{t('debug.debug')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
{t('debug.actions')}
</th>
</tr>
</thead>
@@ -346,7 +348,7 @@ const Debug = () => {
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'}
{payloadLoading ? t('common.loading') : t('debug.viewPayload')}
</button>
</td>
</tr>
@@ -419,7 +421,7 @@ const Debug = () => {
<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
{t('debug.payloadViewer.title')}
</h3>
</div>
<button
@@ -432,24 +434,24 @@ const Debug = () => {
{/* 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>
<h4 className="font-medium text-gray-900 mb-2">{t('alerts.detectionDetails')}</h4>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-gray-600">Detection ID:</span>
<span className="text-gray-600">{t('debug.payloadViewer.detectionId')}</span>
<span className="ml-2 font-mono">{selectedPayload.id}</span>
</div>
<div>
<span className="text-gray-600">Device ID:</span>
<span className="text-gray-600">{t('debug.payloadViewer.deviceId')}</span>
<span className="ml-2 font-mono">{selectedPayload.deviceId}</span>
</div>
<div>
<span className="text-gray-600">Server Timestamp:</span>
<span className="text-gray-600">{t('debug.payloadViewer.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="text-gray-600">{t('debug.droneType')}</span>
<span className="ml-2 font-mono">{selectedPayload.processedData.drone_type}</span>
</div>
</div>
@@ -457,7 +459,7 @@ const Debug = () => {
{/* Processed Data */}
<div className="mt-4">
<h4 className="font-medium text-gray-900 mb-2">Processed Data</h4>
<h4 className="font-medium text-gray-900 mb-2">{t('debug.payloadViewer.processedData')}</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)}
@@ -467,7 +469,7 @@ const Debug = () => {
{/* Raw Payload */}
<div className="mt-4">
<h4 className="font-medium text-gray-900 mb-2">Raw Payload from Detector</h4>
<h4 className="font-medium text-gray-900 mb-2">{t('debug.payloadViewer.rawPayload')}</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">
@@ -494,7 +496,7 @@ const Debug = () => {
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
{t('common.close')}
</button>
<button
onClick={() => {
@@ -503,7 +505,7 @@ const Debug = () => {
}}
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
{t('common.copy')}
</button>
</div>
</div>

4
client/src/pages/Settings.jsx
View File

@@ -82,7 +82,7 @@ const Settings = () => {
setTenantConfig(response.data.data);
} catch (error) {
console.error('Failed to fetch tenant config:', error);
toast.error('Failed to load tenant settings');
toast.error(t('settings.failedToLoad'));
} finally {
setLoading(false);
}
@@ -104,7 +104,7 @@ const Settings = () => {
<ShieldCheckIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">{t('settings.accessDenied')}</h3>
<p className="mt-1 text-sm text-gray-500">
{t('settings.accessDeniedMessage')}
{t('settings.noPermission')}
</p>
</div>
</div>