Revert real-time API and use polling

Reverted the real-time API implementation in favor of periodic polling for signature updates due to instability.

src/components/SystemTracker.tsx

@@ -1,5 +1,5 @@
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import { RefreshCw, AlertCircle, Radar } from "lucide-react";
 import SignatureListItem from "./SignatureListItem";
 import { toast } from "@/hooks/use-toast";
-import pb from "@/lib/pocketbase";
 
 interface SignatureItem {
   collectionId: string;
@@ -33,9 +32,8 @@ interface SystemTrackerProps {
 
 const SystemTracker = ({ system }: SystemTrackerProps) => {
   const queryClient = useQueryClient();
-  const [realtimeError, setRealtimeError] = useState<string | null>(null);
 
-  // Query to get signatures for the current system
+  // Query to get signatures for the current system with polling
   const {
     data: signaturesData,
     refetch: refetchSignatures,
@@ -60,72 +58,9 @@ const SystemTracker = ({ system }: SystemTrackerProps) => {
       return data;
     },
     enabled: !!system,
-    refetchInterval: 30000, // Fallback polling every 30 seconds if real-time fails
+    refetchInterval: 5000, // Poll every 5 seconds
   });
 
-  // Set up real-time subscription for signature updates with error handling
-  useEffect(() => {
-    if (!system) return;
-
-    console.log('Setting up real-time subscription for system:', system);
-    setRealtimeError(null);
-
-    let unsubscribePromise: Promise<() => void> | null = null;
-
-    try {
-      // Subscribe to changes in the sigview collection
-      unsubscribePromise = pb.collection('sigview').subscribe('*', function (e) {
-        console.log('Real-time update received:', e);
-        
-        // Check if the update is for our current system
-        if (e.record?.system === system) {
-          console.log(`Signature ${e.action} for system ${system}:`, e.record);
-          
-          // Invalidate and refetch the signatures query
-          queryClient.invalidateQueries({ queryKey: ['signatures', system] });
-          
-          // Show toast notification
-          const actionText = e.action === 'create' ? 'added' : e.action === 'update' ? 'updated' : 'removed';
-          toast({
-            title: "Signature Updated",
-            description: `Signature ${e.record?.identifier || 'unknown'} ${actionText} in ${system}`,
-          });
-        }
-      });
-
-      // Handle subscription promise
-      unsubscribePromise.catch((error) => {
-        console.error('Real-time subscription failed:', error);
-        setRealtimeError('Real-time updates unavailable. Using periodic refresh instead.');
-        
-        // Don't show error toast immediately to avoid spam
-        setTimeout(() => {
-          toast({
-            title: "Real-time Connection Failed",
-            description: "Falling back to periodic updates every 30 seconds.",
-            variant: "destructive",
-          });
-        }, 2000);
-      });
-
-    } catch (error) {
-      console.error('Failed to set up real-time subscription:', error);
-      setRealtimeError('Real-time updates unavailable. Using periodic refresh instead.');
-    }
-
-    // Cleanup subscription on unmount or system change
-    return () => {
-      if (unsubscribePromise) {
-        console.log('Cleaning up real-time subscription for system:', system);
-        unsubscribePromise
-          .then(unsub => unsub())
-          .catch(error => {
-            console.error('Error cleaning up subscription:', error);
-          });
-      }
-    };
-  }, [system, queryClient]);
-
   const handleRefresh = () => {
     refetchSignatures();
     toast({
@@ -164,8 +99,8 @@ const SystemTracker = ({ system }: SystemTrackerProps) => {
           <CardTitle className="text-xl text-white flex items-center gap-2">
             <Radar className="h-5 w-5 text-blue-400" />
             {system}
-            <Badge variant="outline" className={`ml-2 ${realtimeError ? 'bg-yellow-900/20 text-yellow-400 border-yellow-600' : 'bg-green-900/20 text-green-400 border-green-600'}`}>
+            <Badge variant="outline" className="ml-2 bg-blue-900/20 text-blue-400 border-blue-600">
-              {realtimeError ? 'Polling' : 'Live'}
+              Polling
             </Badge>
           </CardTitle>
           <Button
@@ -181,18 +116,6 @@ const SystemTracker = ({ system }: SystemTrackerProps) => {
         </CardHeader>
       </Card>
 
-      {/* Real-time Error Display */}
-      {realtimeError && (
-        <Card className="bg-yellow-900/20 border-yellow-700">
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-2 text-yellow-400">
-              <AlertCircle className="h-5 w-5" />
-              <span>{realtimeError}</span>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
       {/* Error Display */}
       {signaturesError && (
         <Card className="bg-red-900/20 border-red-700">