TCPDashboard/dashboard/layouts/system_health.py

"""
System health monitoring layout for the dashboard.
"""

from dash import html
import dash_bootstrap_components as dbc

def get_system_health_layout():
    """Create the enhanced system health monitoring layout with Bootstrap components."""
    
    def create_quick_status_card(title, component_id, icon):
        return dbc.Card(dbc.CardBody([
            html.H5(f"{icon} {title}", className="card-title"),
            html.Div(id=component_id, children=[
                dbc.Badge("Checking...", color="warning", className="me-1")
            ])
        ]), className="text-center")

    return html.Div([
        # Header section
        html.Div([
            html.H2("⚙️ System Health & Data Monitoring"),
            html.P("Real-time monitoring of data collection services, database health, and system performance",
                   className="lead")
        ], className="p-5 mb-4 bg-light rounded-3"),
        
        # Quick Status Overview Row
        dbc.Row([
            dbc.Col(create_quick_status_card("Data Collection", "data-collection-quick-status", "📊"), width=3),
            dbc.Col(create_quick_status_card("Database", "database-quick-status", "🗄️"), width=3),
            dbc.Col(create_quick_status_card("Redis", "redis-quick-status", "🔗"), width=3),
            dbc.Col(create_quick_status_card("Performance", "performance-quick-status", "📈"), width=3),
        ], className="mb-4"),
        
        # Detailed Monitoring Sections
        dbc.Row([
            # Left Column - Data Collection Service
            dbc.Col([
                # Data Collection Service Status
                dbc.Card([
                    dbc.CardHeader(html.H4("📡 Data Collection Service")),
                    dbc.CardBody([
                        html.H5("Service Status", className="card-title"),
                        html.Div(id='data-collection-service-status', className="mb-4"),
                        
                        html.H5("Collection Metrics", className="card-title"),
                        html.Div(id='data-collection-metrics', className="mb-4"),
                        
                        html.H5("Service Controls", className="card-title"),
                        dbc.ButtonGroup([
                            dbc.Button("🔄 Refresh Status", id="refresh-data-status-btn", color="primary", outline=True, size="sm"),
                            dbc.Button("📊 View Details", id="view-collection-details-btn", color="secondary", outline=True, size="sm"),
                            dbc.Button("📋 View Logs", id="view-collection-logs-btn", color="info", outline=True, size="sm")
                        ])
                    ])
                ], className="mb-4"),
                
                # Data Collector Health
                dbc.Card([
                    dbc.CardHeader(html.H4("🔌 Individual Collectors")),
                    dbc.CardBody([
                        html.Div(id='individual-collectors-status'),
                        html.Div([
                            dbc.Alert(
                                "Collector health data will be displayed here when the data collection service is running.",
                                id="collectors-info-alert",
                                color="info",
                                is_open=True,
                            )
                        ], id='collectors-placeholder')
                    ])
                ], className="mb-4"),
            ], width=6),
            
            # Right Column - System Health
            dbc.Col([
                # Database Status
                dbc.Card([
                    dbc.CardHeader(html.H4("🗄️ Database Health")),
                    dbc.CardBody([
                        html.H5("Connection Status", className="card-title"),
                        html.Div(id='database-status', className="mb-3"),
                        html.Hr(),
                        html.H5("Database Statistics", className="card-title"),
                        html.Div(id='database-stats')
                    ])
                ], className="mb-4"),
                
                # Redis Status
                dbc.Card([
                    dbc.CardHeader(html.H4("🔗 Redis Status")),
                    dbc.CardBody([
                        html.H5("Connection Status", className="card-title"),
                        html.Div(id='redis-status', className="mb-3"),
                        html.Hr(),
                        html.H5("Redis Statistics", className="card-title"),
                        html.Div(id='redis-stats')
                    ])
                ], className="mb-4"),
                
                # System Performance
                dbc.Card([
                    dbc.CardHeader(html.H4("📈 System Performance")),
                    dbc.CardBody([
                        html.Div(id='system-performance-metrics')
                    ])
                ], className="mb-4"),
            ], width=6)
        ]),
        
        # Data Collection Details Modal
        dbc.Modal([
            dbc.ModalHeader(dbc.ModalTitle("📊 Data Collection Details")),
            dbc.ModalBody(id="collection-details-content")
        ], id="collection-details-modal", is_open=False, size="lg"),
        
        # Collection Logs Modal  
        dbc.Modal([
            dbc.ModalHeader(dbc.ModalTitle("📋 Collection Service Logs")),
            dbc.ModalBody(
                html.Div(
                    html.Pre(id="collection-logs-content", style={'max-height': '400px', 'overflow-y': 'auto'}),
                    style={'white-space': 'pre-wrap', 'background-color': '#f8f9fa', 'padding': '15px', 'border-radius': '5px'}
                )
            ),
            dbc.ModalFooter([
                dbc.Button("Refresh", id="refresh-logs-btn", color="primary"),
                dbc.Button("Close", id="close-logs-modal", color="secondary", className="ms-auto")
            ])
        ], id="collection-logs-modal", is_open=False, size="xl")
    ])