Hook up system signature tracker
This commit is contained in:
250
src/components/SystemTracker.tsx
Normal file
250
src/components/SystemTracker.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RefreshCw, AlertCircle, Radar } from "lucide-react";
|
||||
import SignatureListItem from "./SignatureListItem";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface SignatureItem {
|
||||
collectionId: string;
|
||||
collectionName: string;
|
||||
id: string;
|
||||
identifier: string;
|
||||
signame: string;
|
||||
sysid: string;
|
||||
system: string;
|
||||
type: string;
|
||||
updated?: string;
|
||||
created?: string;
|
||||
dangerous?: boolean;
|
||||
}
|
||||
|
||||
interface ApiResponse {
|
||||
items: SignatureItem[];
|
||||
}
|
||||
|
||||
interface SystemTrackerProps {
|
||||
initialSystem?: string;
|
||||
}
|
||||
|
||||
const SystemTracker = ({ initialSystem }: SystemTrackerProps) => {
|
||||
const [currentSystem, setCurrentSystem] = useState<string>(initialSystem || "");
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Query to get current system from localhost:7000 (always enabled to track system changes)
|
||||
const { data: systemData, refetch: refetchSystem, isLoading: systemLoading } = useQuery({
|
||||
queryKey: ['currentSystem'],
|
||||
queryFn: async () => {
|
||||
const response = await fetch('http://localhost:7000');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch current system');
|
||||
}
|
||||
const text = await response.text();
|
||||
return text.trim();
|
||||
},
|
||||
refetchInterval: 1000, // Always refetch to track system changes
|
||||
retry: 3,
|
||||
});
|
||||
|
||||
// Query to get signatures for the current system
|
||||
const {
|
||||
data: signaturesData,
|
||||
refetch: refetchSignatures,
|
||||
isLoading: signaturesLoading,
|
||||
error: signaturesError
|
||||
} = useQuery({
|
||||
queryKey: ['signatures', currentSystem],
|
||||
queryFn: async () => {
|
||||
if (!currentSystem) return null;
|
||||
|
||||
const encodedSystem = encodeURIComponent(currentSystem);
|
||||
const url = `https://evebase.site.quack-lab.dev/api/collections/sigview/records?filter=(system%3D'${encodedSystem}')`;
|
||||
|
||||
console.log('Fetching signatures for system:', currentSystem);
|
||||
console.log('API URL:', url);
|
||||
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch signatures');
|
||||
}
|
||||
const data: ApiResponse = await response.json();
|
||||
return data;
|
||||
},
|
||||
enabled: !!currentSystem,
|
||||
refetchInterval: 60000, // Keep signature refresh at 1 minute
|
||||
});
|
||||
|
||||
// Update current system when data changes and navigate to new system
|
||||
useEffect(() => {
|
||||
if (systemData && systemData !== currentSystem) {
|
||||
setCurrentSystem(systemData);
|
||||
navigate(`/${systemData}`);
|
||||
console.log('Current system updated to:', systemData);
|
||||
// Immediately refetch signatures when system changes
|
||||
refetchSignatures();
|
||||
toast({
|
||||
title: "System Updated",
|
||||
description: `Now tracking: ${systemData}`,
|
||||
});
|
||||
}
|
||||
}, [systemData, currentSystem, refetchSignatures, navigate]);
|
||||
|
||||
// Refresh signatures every 5 seconds
|
||||
useEffect(() => {
|
||||
const refreshInterval = setInterval(() => {
|
||||
console.log('Auto-refreshing signatures...');
|
||||
if (currentSystem) {
|
||||
refetchSignatures();
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
// Cleanup interval on component unmount
|
||||
return () => clearInterval(refreshInterval);
|
||||
}, [refetchSignatures, currentSystem]);
|
||||
|
||||
const handleRefresh = () => {
|
||||
refetchSystem();
|
||||
if (currentSystem) {
|
||||
refetchSignatures();
|
||||
}
|
||||
toast({
|
||||
title: "Refreshing Data",
|
||||
description: "Updating system and signature information...",
|
||||
});
|
||||
};
|
||||
|
||||
const signatures = signaturesData?.items || [];
|
||||
const isLoading = systemLoading || signaturesLoading;
|
||||
|
||||
// Sort signatures by date (newest first) and prioritize unknown types
|
||||
const sortedSignatures = [...signatures].sort((a, b) => {
|
||||
// First, prioritize unknown types
|
||||
const aIsUnknown = !a.type || a.type === '';
|
||||
const bIsUnknown = !b.type || b.type === '';
|
||||
if (aIsUnknown && !bIsUnknown) return -1;
|
||||
if (!aIsUnknown && bIsUnknown) return 1;
|
||||
|
||||
// If both are unknown or both are known, sort by type
|
||||
if (a.type !== b.type) {
|
||||
return a.type.localeCompare(b.type);
|
||||
}
|
||||
|
||||
// If same type, sort by date
|
||||
const dateA = a.updated || a.created || '';
|
||||
const dateB = b.updated || b.created || '';
|
||||
return dateB.localeCompare(dateA);
|
||||
});
|
||||
|
||||
// Group signatures by type for better organization
|
||||
const signaturesByType = sortedSignatures.reduce((acc, sig) => {
|
||||
const type = sig.type || 'Unknown';
|
||||
if (!acc[type]) acc[type] = [];
|
||||
acc[type].push(sig);
|
||||
return acc;
|
||||
}, {} as Record<string, SignatureItem[]>);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* System Status Card */}
|
||||
<Card className="bg-slate-800/50 border-slate-700">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle className="text-xl text-white flex items-center gap-2">
|
||||
<Radar className="h-5 w-5 text-blue-400" />
|
||||
{initialSystem ? 'System View' : 'Current System'}
|
||||
</CardTitle>
|
||||
<Button
|
||||
onClick={handleRefresh}
|
||||
disabled={isLoading}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="bg-slate-700 border-slate-600 text-slate-200 hover:bg-slate-600"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
{systemLoading && !initialSystem ? (
|
||||
<div className="text-slate-400">Loading system...</div>
|
||||
) : currentSystem ? (
|
||||
<div className="text-2xl font-bold text-white">{currentSystem}</div>
|
||||
) : (
|
||||
<div className="text-slate-400">No system data</div>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="outline" className="bg-slate-700 text-slate-200 border-slate-600">
|
||||
{signatures.length} Signatures
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Error Display */}
|
||||
{signaturesError && (
|
||||
<Card className="bg-red-900/20 border-red-700">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-2 text-red-400">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
<span>Error loading signatures: {signaturesError.message}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Signatures Display */}
|
||||
{currentSystem && !signaturesLoading && (
|
||||
<div className="space-y-4">
|
||||
{sortedSignatures.length === 0 ? (
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardContent className="pt-6 text-center">
|
||||
<div className="text-slate-400">No signatures found for {currentSystem}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center justify-between">
|
||||
<span>Signatures</span>
|
||||
<Badge variant="outline" className="bg-slate-700 text-slate-200 border-slate-600">
|
||||
{sortedSignatures.length} Total
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y divide-slate-700">
|
||||
{sortedSignatures.map((signature) => (
|
||||
<SignatureListItem key={signature.id} signature={signature} />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{signaturesLoading && currentSystem && (
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-4">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4 p-4 animate-pulse">
|
||||
<div className="h-6 bg-slate-700 rounded w-24"></div>
|
||||
<div className="h-4 bg-slate-600 rounded flex-1"></div>
|
||||
<div className="h-4 bg-slate-700 rounded w-16"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SystemTracker;
|
||||
Reference in New Issue
Block a user