Active status check

templates/main/instances.html

@@ -57,7 +57,10 @@
                                     <td>{{ instance.payment_plan }}</td>
                                     <td>{{ instance.main_url }}</td>
                                     <td>
-                                        <span class="badge bg-{{ 'success' if instance.status == 'active' else 'danger' }}">
+                                        <span class="badge bg-{{ 'success' if instance.status == 'active' else 'danger' }}" 
+                                              data-bs-toggle="tooltip" 
+                                              data-instance-id="{{ instance.id }}"
+                                              title="{{ instance.status_details }}">
                                             {{ instance.status|title }}
                                         </span>
                                     </td>
@@ -183,8 +186,68 @@ document.addEventListener('DOMContentLoaded', function() {
     addInstanceModal = new bootstrap.Modal(document.getElementById('addInstanceModal'));
     editInstanceModal = new bootstrap.Modal(document.getElementById('editInstanceModal'));
     addExistingInstanceModal = new bootstrap.Modal(document.getElementById('addExistingInstanceModal'));
+    
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+    
+    // Check statuses on page load
+    checkAllInstanceStatuses();
+    
+    // Set up periodic status checks (every 30 seconds)
+    setInterval(checkAllInstanceStatuses, 30000);
 });
 
+// Function to check status of all instances
+async function checkAllInstanceStatuses() {
+    const statusBadges = document.querySelectorAll('[data-instance-id]');
+    for (const badge of statusBadges) {
+        const instanceId = badge.dataset.instanceId;
+        await checkInstanceStatus(instanceId);
+    }
+}
+
+// Function to check status of a single instance
+async function checkInstanceStatus(instanceId) {
+    try {
+        const response = await fetch(`/instances/${instanceId}/status`);
+        if (!response.ok) throw new Error('Failed to check instance status');
+        
+        const data = await response.json();
+        const badge = document.querySelector(`[data-instance-id="${instanceId}"]`);
+        if (badge) {
+            badge.className = `badge bg-${data.status === 'active' ? 'success' : 'danger'}`;
+            badge.textContent = data.status.charAt(0).toUpperCase() + data.status.slice(1);
+            
+            // Parse the JSON string in status_details
+            let tooltipContent = data.status;
+            if (data.status_details) {
+                try {
+                    const details = JSON.parse(data.status_details);
+                    tooltipContent = `Status: ${details.status}\nTimestamp: ${details.timestamp}`;
+                    if (details.database) {
+                        tooltipContent += `\nDatabase: ${details.database}`;
+                    }
+                } catch (e) {
+                    tooltipContent = data.status_details;
+                }
+            }
+            badge.title = tooltipContent;
+            
+            // Update tooltip
+            const tooltip = bootstrap.Tooltip.getInstance(badge);
+            if (tooltip) {
+                tooltip.dispose();
+            }
+            new bootstrap.Tooltip(badge);
+        }
+    } catch (error) {
+        console.error('Error checking instance status:', error);
+    }
+}
+
 // Show modals
 function showAddInstanceModal() {
     document.getElementById('addInstanceForm').reset();