feat: add container running status indicators with auto-refresh

michelroegl-brunner · michelroegl-brunner · commit 762d7485e831 · 2025-10-13T15:16:41.000+02:00
- Add getContainerStatuses tRPC endpoint for checking container status
- Support both local and SSH remote container status checking
- Add 60-second auto-refresh for real-time status updates
- Display green/red dots next to container IDs showing running/stopped status
- Update both desktop table and mobile card views
- Add proper error handling and fallback to 'unknown' status
- Full TypeScript support with updated interfaces

Resolves container status visibility in installed scripts tab
diff --git a/src/app/_components/InstalledScriptsTab.tsx b/src/app/_components/InstalledScriptsTab.tsx
@@ -22,6 +22,7 @@ interface InstalledScript {
   installation_date: string;
   status: 'in_progress' | 'success' | 'failed';
   output_log: string | null;
+  container_status?: 'running' | 'stopped' | 'unknown';
 }
 
 export function InstalledScriptsTab() {
@@ -40,6 +41,7 @@ export function InstalledScriptsTab() {
   const [autoDetectStatus, setAutoDetectStatus] = useState<{ type: 'success' | 'error' | null; message: string }>({ type: null, message: '' });
   const [cleanupStatus, setCleanupStatus] = useState<{ type: 'success' | 'error' | null; message: string }>({ type: null, message: '' });
   const cleanupRunRef = useRef(false);
+  const [containerStatuses, setContainerStatuses] = useState<Record<string, 'running' | 'stopped' | 'unknown'>>({});
 
   // Fetch installed scripts
   const { data: scriptsData, refetch: refetchScripts, isLoading } = api.installedScripts.getAllInstalledScripts.useQuery();
@@ -114,6 +116,18 @@ export function InstalledScriptsTab() {
     }
   });
 
+  // Get container statuses mutation
+  const containerStatusMutation = api.installedScripts.getContainerStatuses.useMutation({
+    onSuccess: (data) => {
+      if (data.success) {
+        setContainerStatuses(data.statusMap);
+      }
+    },
+    onError: (error) => {
+      console.error('Error fetching container statuses:', error);
+    }
+  });
+
   // Cleanup orphaned scripts mutation
   const cleanupMutation = api.installedScripts.cleanupOrphanedScripts.useMutation({
     onSuccess: (data) => {
@@ -149,6 +163,28 @@ export function InstalledScriptsTab() {
   const scripts: InstalledScript[] = (scriptsData?.scripts as InstalledScript[]) ?? [];
   const stats = statsData?.stats;
 
+  // Function to fetch container statuses
+  const fetchContainerStatuses = () => {
+    const containersWithIds = scripts
+      .filter(script => script.container_id)
+      .map(script => ({
+        containerId: script.container_id!,
+        serverId: script.server_id ?? undefined,
+        server: script.server_id ? {
+          id: script.server_id,
+          name: script.server_name!,
+          ip: script.server_ip!,
+          user: script.server_user!,
+          password: script.server_password!,
+          auth_type: 'password' // Default to password auth
+        } : undefined
+      }));
+
+    if (containersWithIds.length > 0) {
+      containerStatusMutation.mutate({ containers: containersWithIds });
+    }
+  };
+
   // Run cleanup when component mounts and scripts are loaded (only once)
   useEffect(() => {
     if (scripts.length > 0 && serversData?.servers && !cleanupMutation.isPending && !cleanupRunRef.current) {
@@ -158,8 +194,23 @@ export function InstalledScriptsTab() {
     }
   }, [scripts.length, serversData?.servers, cleanupMutation]);
 
+  // Auto-refresh container statuses every 60 seconds
+  useEffect(() => {
+    if (scripts.length > 0) {
+      fetchContainerStatuses(); // Initial fetch
+      const interval = setInterval(fetchContainerStatuses, 60000); // Every 60 seconds
+      return () => clearInterval(interval);
+    }
+  }, [scripts.length]);
+
+  // Update scripts with container statuses
+  const scriptsWithStatus = scripts.map(script => ({
+    ...script,
+    container_status: script.container_id ? containerStatuses[script.container_id] || 'unknown' : undefined
+  }));
+
   // Filter and sort scripts
-  const filteredScripts = scripts
+  const filteredScripts = scriptsWithStatus
     .filter((script: InstalledScript) => {
       const matchesSearch = script.script_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                            (script.container_id?.includes(searchTerm) ?? false) ||
@@ -810,7 +861,27 @@ export function InstalledScriptsTab() {
                           />
                         ) : (
                           script.container_id ? (
-                            <span className="text-sm font-mono text-foreground">{String(script.container_id)}</span>
+                            <div className="flex items-center space-x-2">
+                              <span className="text-sm font-mono text-foreground">{String(script.container_id)}</span>
+                              {script.container_status && (
+                                <div className="flex items-center space-x-1">
+                                  <div className={`w-2 h-2 rounded-full ${
+                                    script.container_status === 'running' ? 'bg-green-500' : 
+                                    script.container_status === 'stopped' ? 'bg-red-500' : 
+                                    'bg-gray-400'
+                                  }`}></div>
+                                  <span className={`text-xs font-medium ${
+                                    script.container_status === 'running' ? 'text-green-700 dark:text-green-300' : 
+                                    script.container_status === 'stopped' ? 'text-red-700 dark:text-red-300' : 
+                                    'text-gray-500 dark:text-gray-400'
+                                  }`}>
+                                    {script.container_status === 'running' ? 'Running' : 
+                                     script.container_status === 'stopped' ? 'Stopped' : 
+                                     'Unknown'}
+                                  </span>
+                                </div>
+                              )}
+                            </div>
                           ) : (
                             <span className="text-sm text-muted-foreground">-</span>
                           )
diff --git a/src/app/_components/ScriptInstallationCard.tsx b/src/app/_components/ScriptInstallationCard.tsx
@@ -18,6 +18,7 @@ interface InstalledScript {
   installation_date: string;
   status: 'in_progress' | 'success' | 'failed';
   output_log: string | null;
+  container_status?: 'running' | 'stopped' | 'unknown';
 }
 
 interface ScriptInstallationCardProps {
@@ -99,7 +100,29 @@ export function ScriptInstallationCard({
             />
           ) : (
             <div className="text-sm font-mono text-foreground break-all">
-              {script.container_id ?? '-'}
+              {script.container_id ? (
+                <div className="flex items-center space-x-2">
+                  <span>{script.container_id}</span>
+                  {script.container_status && (
+                    <div className="flex items-center space-x-1">
+                      <div className={`w-2 h-2 rounded-full ${
+                        script.container_status === 'running' ? 'bg-green-500' : 
+                        script.container_status === 'stopped' ? 'bg-red-500' : 
+                        'bg-gray-400'
+                      }`}></div>
+                      <span className={`text-xs font-medium ${
+                        script.container_status === 'running' ? 'text-green-700 dark:text-green-300' : 
+                        script.container_status === 'stopped' ? 'text-red-700 dark:text-red-300' : 
+                        'text-gray-500 dark:text-gray-400'
+                      }`}>
+                        {script.container_status === 'running' ? 'Running' : 
+                         script.container_status === 'stopped' ? 'Stopped' : 
+                         'Unknown'}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              ) : '-'}
             </div>
           )}
         </div>
diff --git a/src/server/api/routers/installedScripts.ts b/src/server/api/routers/installedScripts.ts
@@ -1,6 +1,90 @@
 import { z } from "zod";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
 import { getDatabase } from "~/server/database";
+import { exec } from "child_process";
+import { promisify } from "util";
+import { getSSHExecutionService } from "~/server/ssh-execution-service";
+
+const execAsync = promisify(exec);
+
+// Helper function to check local container statuses
+async function getLocalContainerStatuses(containerIds: string[]): Promise<Record<string, 'running' | 'stopped' | 'unknown'>> {
+  try {
+    const { stdout } = await execAsync('pct list');
+    const statusMap: Record<string, 'running' | 'stopped' | 'unknown'> = {};
+    
+    // Parse pct list output
+    const lines = stdout.trim().split('\n');
+    const dataLines = lines.slice(1); // Skip header
+    
+    for (const line of dataLines) {
+      const parts = line.trim().split(/\s+/);
+      if (parts.length >= 2) {
+        const vmid = parts[0];
+        const status = parts[1];
+        
+        if (containerIds.includes(vmid)) {
+          statusMap[vmid] = status === 'running' ? 'running' : 'stopped';
+        }
+      }
+    }
+    
+    // Set unknown for containers not found in pct list
+    for (const containerId of containerIds) {
+      if (!(containerId in statusMap)) {
+        statusMap[containerId] = 'unknown';
+      }
+    }
+    
+    return statusMap;
+  } catch (error) {
+    console.error('Error checking local container statuses:', error);
+    // Return unknown for all containers on error
+    const statusMap: Record<string, 'running' | 'stopped' | 'unknown'> = {};
+    for (const containerId of containerIds) {
+      statusMap[containerId] = 'unknown';
+    }
+    return statusMap;
+  }
+}
+
+// Helper function to check remote container status
+async function getRemoteContainerStatus(containerId: string, server: any): Promise<'running' | 'stopped' | 'unknown'> {
+  return new Promise((resolve) => {
+    const sshService = getSSHExecutionService();
+    
+    sshService.executeCommand(
+      server,
+      'pct list',
+      (data: string) => {
+        // Parse the output to find the specific container
+        const lines = data.trim().split('\n');
+        const dataLines = lines.slice(1); // Skip header
+        
+        for (const line of dataLines) {
+          const parts = line.trim().split(/\s+/);
+          if (parts.length >= 2 && parts[0] === containerId) {
+            const status = parts[1];
+            resolve(status === 'running' ? 'running' : 'stopped');
+            return;
+          }
+        }
+        
+        // Container not found in the list
+        resolve('unknown');
+      },
+      (error: string) => {
+        console.error(`Error checking remote container ${containerId}:`, error);
+        resolve('unknown');
+      },
+      (exitCode: number) => {
+        if (exitCode !== 0) {
+          resolve('unknown');
+        }
+      }
+    );
+  });
+}
 
 export const installedScriptsRouter = createTRPCRouter({
   // Get all installed scripts
@@ -540,5 +624,72 @@ export const installedScriptsRouter = createTRPCRouter({
           deletedScripts: []
         };
       }
+    }),
+
+  // Get container running statuses
+  getContainerStatuses: publicProcedure
+    .input(z.object({ 
+      containers: z.array(z.object({
+        containerId: z.string(),
+        serverId: z.number().optional(),
+        server: z.object({
+          id: z.number(),
+          name: z.string(),
+          ip: z.string(),
+          user: z.string(),
+          password: z.string(),
+          auth_type: z.string()
+        }).optional()
+      }))
+    }))
+    .mutation(async ({ input }) => {
+      try {
+        const { containers } = input;
+        const statusMap: Record<string, 'running' | 'stopped' | 'unknown'> = {};
+        
+        // Group containers by server (local vs remote)
+        const localContainers: string[] = [];
+        const remoteContainers: Array<{containerId: string, server: any}> = [];
+        
+        for (const container of containers) {
+          if (!container.serverId || !container.server) {
+            localContainers.push(container.containerId);
+          } else {
+            remoteContainers.push({
+              containerId: container.containerId,
+              server: container.server
+            });
+          }
+        }
+        
+        // Check local containers
+        if (localContainers.length > 0) {
+          const localStatuses = await getLocalContainerStatuses(localContainers);
+          Object.assign(statusMap, localStatuses);
+        }
+        
+        // Check remote containers
+        for (const { containerId, server } of remoteContainers) {
+          try {
+            const remoteStatus = await getRemoteContainerStatus(containerId, server);
+            statusMap[containerId] = remoteStatus;
+          } catch (error) {
+            console.error(`Error checking status for container ${containerId} on server ${server.name}:`, error);
+            statusMap[containerId] = 'unknown';
+          }
+        }
+        
+        return {
+          success: true,
+          statusMap
+        };
+      } catch (error) {
+        console.error('Error in getContainerStatuses:', error);
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Failed to fetch container statuses',
+          statusMap: {}
+        };
+      }
     })
 });
