Removed Mantine for UI, and used bootstrap for simplicity
This commit is contained in:
Vasily.onl
@@ -2,211 +2,130 @@
|
||||
System health monitoring layout for the dashboard.
|
||||
"""
|
||||
|
||||
from dash import html, dcc
|
||||
import dash_mantine_components as dmc
|
||||
|
||||
from dash import html
|
||||
import dash_bootstrap_components as dbc
|
||||
|
||||
def get_system_health_layout():
|
||||
"""Create the enhanced system health monitoring layout with market data monitoring."""
|
||||
"""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
|
||||
dmc.Paper([
|
||||
dmc.Title("⚙️ System Health & Data Monitoring", order=2, c="#2c3e50"),
|
||||
dmc.Text("Real-time monitoring of data collection services, database health, and system performance",
|
||||
c="dimmed", size="sm")
|
||||
], p="lg", mb="xl"),
|
||||
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
|
||||
dmc.Grid([
|
||||
dmc.GridCol([
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Group([
|
||||
dmc.Text("📊 Data Collection", fw=600, c="#2c3e50"),
|
||||
], justify="space-between"),
|
||||
html.Div(id='data-collection-quick-status',
|
||||
children=[dmc.Badge("🔄 Checking...", color="yellow", variant="light")])
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True)
|
||||
], span=3),
|
||||
|
||||
dmc.GridCol([
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Group([
|
||||
dmc.Text("🗄️ Database", fw=600, c="#2c3e50"),
|
||||
], justify="space-between"),
|
||||
html.Div(id='database-quick-status',
|
||||
children=[dmc.Badge("🔄 Checking...", color="yellow", variant="light")])
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True)
|
||||
], span=3),
|
||||
|
||||
dmc.GridCol([
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Group([
|
||||
dmc.Text("🔗 Redis", fw=600, c="#2c3e50"),
|
||||
], justify="space-between"),
|
||||
html.Div(id='redis-quick-status',
|
||||
children=[dmc.Badge("🔄 Checking...", color="yellow", variant="light")])
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True)
|
||||
], span=3),
|
||||
|
||||
dmc.GridCol([
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Group([
|
||||
dmc.Text("📈 Performance", fw=600, c="#2c3e50"),
|
||||
], justify="space-between"),
|
||||
html.Div(id='performance-quick-status',
|
||||
children=[dmc.Badge("🔄 Loading...", color="yellow", variant="light")])
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True)
|
||||
], span=3),
|
||||
], gutter="md", mb="xl"),
|
||||
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
|
||||
dmc.Grid([
|
||||
dbc.Row([
|
||||
# Left Column - Data Collection Service
|
||||
dmc.GridCol([
|
||||
dbc.Col([
|
||||
# Data Collection Service Status
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Title("📡 Data Collection Service", order=4, c="#2c3e50")
|
||||
], inheritPadding=True, py="xs", withBorder=True),
|
||||
dmc.CardSection([
|
||||
# Service Status
|
||||
dmc.Stack([
|
||||
dmc.Title("Service Status", order=5, c="#34495e"),
|
||||
html.Div(id='data-collection-service-status'),
|
||||
], gap="sm"),
|
||||
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"),
|
||||
|
||||
# Data Collection Metrics
|
||||
dmc.Stack([
|
||||
dmc.Title("Collection Metrics", order=5, c="#34495e"),
|
||||
html.Div(id='data-collection-metrics'),
|
||||
], gap="sm"),
|
||||
html.H5("Collection Metrics", className="card-title"),
|
||||
html.Div(id='data-collection-metrics', className="mb-4"),
|
||||
|
||||
# Service Controls
|
||||
dmc.Stack([
|
||||
dmc.Title("Service Controls", order=5, c="#34495e"),
|
||||
dmc.Group([
|
||||
dmc.Button("🔄 Refresh Status", id="refresh-data-status-btn",
|
||||
variant="light", color="blue", size="sm"),
|
||||
dmc.Button("📊 View Details", id="view-collection-details-btn",
|
||||
variant="outline", color="blue", size="sm"),
|
||||
dmc.Button("📋 View Logs", id="view-collection-logs-btn",
|
||||
variant="outline", color="gray", size="sm")
|
||||
], gap="xs")
|
||||
], gap="sm")
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True, mb="md"),
|
||||
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
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Title("🔌 Individual Collectors", order=4, c="#2c3e50")
|
||||
], inheritPadding=True, py="xs", withBorder=True),
|
||||
dmc.CardSection([
|
||||
dbc.Card([
|
||||
dbc.CardHeader(html.H4("🔌 Individual Collectors")),
|
||||
dbc.CardBody([
|
||||
html.Div(id='individual-collectors-status'),
|
||||
html.Div([
|
||||
dmc.Alert(
|
||||
dbc.Alert(
|
||||
"Collector health data will be displayed here when the data collection service is running.",
|
||||
title="📊 Collector Health Monitoring",
|
||||
color="blue",
|
||||
variant="light",
|
||||
id="collectors-info-alert"
|
||||
id="collectors-info-alert",
|
||||
color="info",
|
||||
is_open=True,
|
||||
)
|
||||
], id='collectors-placeholder')
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True, mb="md")
|
||||
], span=6),
|
||||
])
|
||||
], className="mb-4"),
|
||||
], width=6),
|
||||
|
||||
# Right Column - System Health
|
||||
dmc.GridCol([
|
||||
dbc.Col([
|
||||
# Database Status
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Title("🗄️ Database Health", order=4, c="#2c3e50")
|
||||
], inheritPadding=True, py="xs", withBorder=True),
|
||||
dmc.CardSection([
|
||||
dmc.Stack([
|
||||
dmc.Title("Connection Status", order=5, c="#34495e"),
|
||||
html.Div(id='database-status')
|
||||
], gap="sm"),
|
||||
|
||||
dmc.Stack([
|
||||
dmc.Title("Database Statistics", order=5, c="#34495e"),
|
||||
html.Div(id='database-stats')
|
||||
], gap="sm")
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True, mb="md"),
|
||||
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
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Title("🔗 Redis Status", order=4, c="#2c3e50")
|
||||
], inheritPadding=True, py="xs", withBorder=True),
|
||||
dmc.CardSection([
|
||||
dmc.Stack([
|
||||
dmc.Title("Connection Status", order=5, c="#34495e"),
|
||||
html.Div(id='redis-status')
|
||||
], gap="sm"),
|
||||
|
||||
dmc.Stack([
|
||||
dmc.Title("Redis Statistics", order=5, c="#34495e"),
|
||||
html.Div(id='redis-stats')
|
||||
], gap="sm")
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True, mb="md"),
|
||||
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
|
||||
dmc.Card([
|
||||
dmc.CardSection([
|
||||
dmc.Title("📈 System Performance", order=4, c="#2c3e50")
|
||||
], inheritPadding=True, py="xs", withBorder=True),
|
||||
dmc.CardSection([
|
||||
dbc.Card([
|
||||
dbc.CardHeader(html.H4("📈 System Performance")),
|
||||
dbc.CardBody([
|
||||
html.Div(id='system-performance-metrics')
|
||||
], p="md")
|
||||
], shadow="sm", radius="md", withBorder=True, mb="md")
|
||||
], span=6)
|
||||
], gutter="md"),
|
||||
])
|
||||
], className="mb-4"),
|
||||
], width=6)
|
||||
]),
|
||||
|
||||
# Data Collection Details Modal
|
||||
dmc.Modal(
|
||||
title="📊 Data Collection Details",
|
||||
id="collection-details-modal",
|
||||
children=[
|
||||
html.Div(id="collection-details-content")
|
||||
],
|
||||
size="lg"
|
||||
),
|
||||
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
|
||||
dmc.Modal(
|
||||
title="📋 Collection Service Logs",
|
||||
id="collection-logs-modal",
|
||||
children=[
|
||||
dmc.ScrollArea([
|
||||
dmc.Code(
|
||||
id="collection-logs-content",
|
||||
block=True,
|
||||
style={
|
||||
'white-space': 'pre-wrap',
|
||||
'background-color': '#f8f9fa',
|
||||
'padding': '15px',
|
||||
'border-radius': '5px',
|
||||
'font-family': 'monospace'
|
||||
}
|
||||
)
|
||||
], h=400),
|
||||
dmc.Group([
|
||||
dmc.Button("Refresh", id="refresh-logs-btn", variant="light"),
|
||||
dmc.Button("Close", id="close-logs-modal", variant="outline")
|
||||
], justify="flex-end", mt="md")
|
||||
],
|
||||
size="xl"
|
||||
)
|
||||
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")
|
||||
])
|
||||
Reference in New Issue
Block a user