Update app.py

app.py

@@ -210,57 +210,61 @@ threading.Thread(target=background_updates, daemon=True).start()
 with gr.Blocks(title="Website Status Monitor") as demo:
     gr.Markdown("# 🚦 Website Status Monitor")
     
-    # Placeholder for dynamic components
-    status_components = []
-
+    # Predefine UI containers to hold dynamic content
+    dashboard = gr.Column(visible=True)  # Container for all status components
+    
     def update_ui():
         data = monitor.load_data()
-        print("Loaded data:", data)
         metrics = monitor.get_metrics(data)
-        print("Metrics:", metrics)
         plots = monitor.create_plots(metrics)
-        print("Plots created.")
         
-        elements = []
+        # Clear previous content
+        children = []
+        
         for name, metric in metrics.items():
-            with gr.Row():
+            with gr.Row().style(equal_height=True):
+                # Status Card
                 with gr.Column(scale=1):
                     status_color = "#4CAF50" if metric['current_status'] == 'UP' else "#F44336"
-                    status_markdown = gr.Markdown(f"### {name}\n"
-                               f"**Status:** <span style='color: {status_color}'>"
-                               f"{metric['current_status']}</span>\n"
-                               f"**Last Response:** {np.mean(metric['response_times'][-5:]):.2f}s\n"
-                               f"**24h Uptime:** {metric['uptime']*100:.1f}%")
-                    elements.append(status_markdown)
+                    status_card = gr.Markdown(
+                        f"### {name}\n"
+                        f"**Status:** <span style='color: {status_color}'>{metric['current_status']}</span>\n"
+                        f"**Last Response:** {np.mean(metric['response_times'][-5:] or 0:.2f}s\n"
+                        f"**24h Uptime:** {metric['uptime']*100:.1f}%"
+                    )
                 
+                # Plots
                 with gr.Column(scale=2):
                     response_plot = gr.Plot(plots[f"{name}_response"], label="Response Times")
-                    elements.append(response_plot)
                 
                 with gr.Column(scale=1):
                     uptime_plot = gr.Plot(plots[f"{name}_uptime"], label="Uptime")
-                    elements.append(uptime_plot)
             
+            # Incident History
             with gr.Accordion("Incident History", open=False):
                 if not metric['incidents']:
-                    incident_markdown = gr.Markdown("No incidents in past 24 hours")
-                    elements.append(incident_markdown)
+                    gr.Markdown("No incidents in past 24 hours")
                 else:
                     for incident in metric['incidents'][-5:]:
                         duration = incident['duration'] or "Ongoing"
-                        incident_markdown = gr.Markdown(f"**Start:** {incident['start']}\n"
-                                    f"**End:** {incident['end'] or 'Still down'}\n"
-                                    f"**Duration:** {duration}s\n")
-                        elements.append(incident_markdown)
+                        gr.Markdown(
+                            f"**Start:** {incident['start']}\n"
+                            f"**End:** {incident['end'] or 'Still down'}\n"
+                            f"**Duration:** {duration}s"
+                        )
         
-        return elements
+        return dashboard.update(children=children)  # Update the container
     
-    # Initialize the UI with placeholders
-    initial_elements = update_ui()
-    status_components.extend(initial_elements)
+    # Initialize UI with empty dashboard
+    dashboard.render()
     
-    # Load the UI with the specified components
-    demo.load(update_ui, outputs=status_components)
+    # Refresh UI every 5 seconds
+    demo.load(
+        fn=update_ui,
+        inputs=None,
+        outputs=[dashboard],
+        every=5  # Refresh interval in seconds
+    )
 
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=int(os.getenv("PORT", 7860)))