2025-06-04 13:30:16 +08:00
|
|
|
"""
|
|
|
|
|
System health monitoring layout for the dashboard.
|
|
|
|
|
"""
|
|
|
|
|
|
2025-06-06 13:33:59 +08:00
|
|
|
from dash import html
|
|
|
|
|
import dash_bootstrap_components as dbc
|
2025-06-04 13:30:16 +08:00
|
|
|
|
2025-06-11 18:36:34 +08:00
|
|
|
def create_quick_status_card(title, component_id, icon):
|
|
|
|
|
"""Helper to create a quick status card."""
|
|
|
|
|
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")
|
|
|
|
|
|
|
|
|
|
def _create_header_section():
|
|
|
|
|
"""Creates the header section for the system health layout."""
|
|
|
|
|
return 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")
|
|
|
|
|
|
|
|
|
|
def _create_quick_status_row():
|
|
|
|
|
"""Creates the quick status overview row."""
|
|
|
|
|
return 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")
|
|
|
|
|
|
|
|
|
|
def _create_data_collection_service_card():
|
|
|
|
|
"""Creates the data collection service status card."""
|
|
|
|
|
return 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")
|
2025-06-06 13:33:59 +08:00
|
|
|
])
|
2025-06-11 18:36:34 +08:00
|
|
|
])
|
|
|
|
|
], className="mb-4")
|
|
|
|
|
|
|
|
|
|
def _create_individual_collectors_card():
|
|
|
|
|
"""Creates the individual collectors health card."""
|
|
|
|
|
return 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")
|
|
|
|
|
|
|
|
|
|
def _create_database_status_card():
|
|
|
|
|
"""Creates the database health status card."""
|
|
|
|
|
return 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")
|
2025-06-06 13:33:59 +08:00
|
|
|
|
2025-06-11 18:36:34 +08:00
|
|
|
def _create_redis_status_card():
|
|
|
|
|
"""Creates the Redis health status card."""
|
|
|
|
|
return 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")
|
|
|
|
|
|
|
|
|
|
def _create_system_performance_card():
|
|
|
|
|
"""Creates the system performance metrics card."""
|
|
|
|
|
return dbc.Card([
|
|
|
|
|
dbc.CardHeader(html.H4("📈 System Performance")),
|
|
|
|
|
dbc.CardBody([
|
|
|
|
|
html.Div(id='system-performance-metrics')
|
|
|
|
|
])
|
|
|
|
|
], className="mb-4")
|
|
|
|
|
|
|
|
|
|
def _create_collection_details_modal():
|
|
|
|
|
"""Creates the data collection details modal."""
|
|
|
|
|
return dbc.Modal([
|
|
|
|
|
dbc.ModalHeader(dbc.ModalTitle("📊 Data Collection Details")),
|
|
|
|
|
dbc.ModalBody(id="collection-details-content")
|
|
|
|
|
], id="collection-details-modal", is_open=False, size="lg")
|
|
|
|
|
|
|
|
|
|
def _create_collection_logs_modal():
|
|
|
|
|
"""Creates the collection service logs modal."""
|
|
|
|
|
return 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")
|
|
|
|
|
|
|
|
|
|
def get_system_health_layout():
|
|
|
|
|
"""Create the enhanced system health monitoring layout with Bootstrap components."""
|
2025-06-04 13:30:16 +08:00
|
|
|
return html.Div([
|
2025-06-11 18:36:34 +08:00
|
|
|
_create_header_section(),
|
|
|
|
|
_create_quick_status_row(),
|
2025-06-04 13:30:16 +08:00
|
|
|
|
2025-06-06 13:33:59 +08:00
|
|
|
dbc.Row([
|
|
|
|
|
dbc.Col([
|
2025-06-11 18:36:34 +08:00
|
|
|
_create_data_collection_service_card(),
|
|
|
|
|
_create_individual_collectors_card(),
|
2025-06-06 13:33:59 +08:00
|
|
|
], width=6),
|
2025-06-04 17:46:50 +08:00
|
|
|
|
2025-06-06 13:33:59 +08:00
|
|
|
dbc.Col([
|
2025-06-11 18:36:34 +08:00
|
|
|
_create_database_status_card(),
|
|
|
|
|
_create_redis_status_card(),
|
|
|
|
|
_create_system_performance_card(),
|
2025-06-06 13:33:59 +08:00
|
|
|
], width=6)
|
|
|
|
|
]),
|
2025-06-04 13:30:16 +08:00
|
|
|
|
2025-06-11 18:36:34 +08:00
|
|
|
_create_collection_details_modal(),
|
|
|
|
|
_create_collection_logs_modal()
|
2025-06-04 13:30:16 +08:00
|
|
|
])
|