257 lines
17 KiB
Python
257 lines
17 KiB
Python
from typing import Literal
|
|
from nicegui import ui
|
|
from components.circular_progress import MetricCircle, LargeMetricCircle, ColorfulMetricCard, MetricCircleAdv
|
|
from utils import SystemMonitor, GPUMonitor, OllamaMonitor
|
|
|
|
"""
|
|
with ui.element('div').classes('main-content w-full'):
|
|
with ui.column().classes('w-full max-w-4xl mx-auto p-6 gap-6'):
|
|
ui.label('Ollama Manager').classes('text-2xl font-bold text-white mb-4')
|
|
|
|
# Status cards
|
|
with ui.row().classes('w-full gap-4 mb-6'):
|
|
with ui.card().classes('metric-card flex-grow p-4'):
|
|
with ui.row().classes('items-center gap-2'):
|
|
ui.icon('check_circle', color='green')
|
|
ui.label('Status: Online').classes('font-medium text-white')
|
|
|
|
with ui.card().classes('metric-card flex-grow p-4'):
|
|
ui.label('Version: 0.11.11').classes('font-medium text-white')
|
|
|
|
# Models list
|
|
with ui.card().classes('metric-card p-6'):
|
|
ui.label('Installed Models').classes('text-lg font-bold text-white mb-4')
|
|
|
|
models = [
|
|
('llama3.2:3b', '2.0 GB', 'Q4_0'),
|
|
('mistral:7b', '4.1 GB', 'Q4_0'),
|
|
('codellama:13b', '7.4 GB', 'Q4_K_M'),
|
|
('phi3:mini', '2.3 GB', 'Q4_0'),
|
|
]
|
|
|
|
for name, size, quant in models:
|
|
with ui.card().classes('metric-card p-4 mb-2'):
|
|
with ui.row().classes('w-full items-center'):
|
|
with ui.column().classes('gap-1'):
|
|
ui.label(name).classes('font-bold text-white')
|
|
with ui.row().classes('gap-2'):
|
|
ui.chip(size, icon='storage').props('outline dense color=cyan')
|
|
ui.chip(quant, icon='memory').props('outline dense color=orange')
|
|
|
|
ui.space()
|
|
|
|
with ui.row().classes('gap-2'):
|
|
ui.button(icon='play_arrow').props('round flat color=green').tooltip('Run')
|
|
ui.button(icon='info').props('round flat color=blue').tooltip('Info')
|
|
ui.button(icon='delete').props('round flat color=red').tooltip('Delete')
|
|
"""
|
|
|
|
|
|
class DashboardPage(ui.column):
|
|
|
|
def __init__(self, system_monitor: SystemMonitor, gpu_monitor: GPUMonitor, ollama_monitor: OllamaMonitor, *, wrap: bool = False, align_items: None | Literal['start'] | Literal['end'] | Literal['center'] | Literal['baseline'] | Literal['stretch'] = None) -> None:
|
|
super().__init__(wrap=wrap, align_items=align_items)
|
|
self.system_monitor = system_monitor
|
|
self.gpu_monitor = gpu_monitor
|
|
|
|
self.classes('main-content w-full')
|
|
# Main content area with proper viewport handling
|
|
with self:
|
|
with ui.column().classes('w-full max-w-6xl mx-auto p-6 gap-6'):
|
|
with ui.grid(columns=4).classes('w-full gap-4'):
|
|
MetricCircleAdv('CPU', system_monitor, 'cpu_percent', '', icon='memory', formatting='percent', color='#e879f9')
|
|
# Top stats grid
|
|
with ui.grid(columns=4).classes('w-full gap-4'):
|
|
# CPU metric with binding
|
|
with ui.card().classes('metric-card p-4 text-center'):
|
|
with ui.column().classes('items-center gap-2'):
|
|
ui.icon('memory', size='md', color='#e879f9')
|
|
ui.label('CPU').classes('text-sm text-grey-5 font-medium')
|
|
ui.circular_progress(size='60px', color='#e879f9').bind_value_from(
|
|
system_monitor, 'cpu_percent', lambda x: x / 100)
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
system_monitor, 'cpu_percent', lambda x: f'{x:.1f}%')
|
|
|
|
# Memory metric with binding
|
|
with ui.card().classes('metric-card p-4 text-center'):
|
|
with ui.column().classes('items-center gap-2'):
|
|
ui.icon('storage', size='md', color='#10b981')
|
|
ui.label('Memory').classes('text-sm text-grey-5 font-medium')
|
|
ui.circular_progress(size='60px', color='#10b981').bind_value_from(
|
|
system_monitor, 'memory_percent', lambda x: x / 100)
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
system_monitor, 'memory_used', lambda x: f'{x / (1024**3):.1f}GB')
|
|
|
|
# GPU metric with conditional rendering
|
|
with ui.card().classes('metric-card p-4 text-center'):
|
|
with ui.column().classes('items-center gap-2'):
|
|
ui.icon('gpu_on', size='md', color='#f97316')
|
|
ui.label('GPU').classes('text-sm text-grey-5 font-medium')
|
|
ui.circular_progress(size='60px', color='#f97316').bind_value_from(
|
|
gpu_monitor, 'usage', lambda x: x / 100 if gpu_monitor.available else 0)
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
gpu_monitor, 'usage', lambda x: f'{x:.1f}%' if gpu_monitor.available else 'N/A')
|
|
|
|
# Temperature metric
|
|
with ui.card().classes('metric-card p-4 text-center'):
|
|
with ui.column().classes('items-center gap-2'):
|
|
ui.icon('thermostat', size='md', color='#06b6d4')
|
|
ui.label('Temp').classes('text-sm text-grey-5 font-medium')
|
|
ui.circular_progress(size='60px', color='#06b6d4').bind_value_from(
|
|
gpu_monitor, 'temperature', lambda x: x / 100 if gpu_monitor.available else 0)
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
gpu_monitor, 'temperature', lambda x: f'{x:.1f}°C' if gpu_monitor.available else 'N/A')
|
|
|
|
# Main dashboard content
|
|
with ui.row().classes('w-full gap-6'):
|
|
# Left column - charts and graphs
|
|
with ui.column().classes('flex-grow gap-4'):
|
|
# Performance chart card
|
|
with ui.card().classes('chart-area p-6'):
|
|
ui.label('System Performance').classes('text-lg font-bold text-white mb-4')
|
|
|
|
# Simulated chart area
|
|
with ui.element('div').classes('h-48 w-full relative').style('background: linear-gradient(45deg, #1a1d2e 0%, #2a2d3e 100%); border-radius: 8px'):
|
|
# Chart lines simulation
|
|
with ui.element('svg').classes('absolute inset-0 w-full h-full'):
|
|
ui.html('''
|
|
<svg viewBox="0 0 400 200" class="w-full h-full">
|
|
<defs>
|
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#e879f9;stop-opacity:0.3" />
|
|
<stop offset="100%" style="stop-color:#e879f9;stop-opacity:0" />
|
|
</linearGradient>
|
|
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.3" />
|
|
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M 20 100 Q 100 50 200 80 T 380 60" stroke="#e879f9" stroke-width="2" fill="none"/>
|
|
<path d="M 20 100 Q 100 50 200 80 T 380 60 L 380 180 L 20 180 Z" fill="url(#gradient1)"/>
|
|
<path d="M 20 120 Q 100 90 200 110 T 380 100" stroke="#10b981" stroke-width="2" fill="none"/>
|
|
<path d="M 20 120 Q 100 90 200 110 T 380 100 L 380 180 L 20 180 Z" fill="url(#gradient2)"/>
|
|
</svg>
|
|
''')
|
|
|
|
# Chart legend
|
|
with ui.row().classes('gap-6 mt-4'):
|
|
with ui.row().classes('items-center gap-2'):
|
|
ui.element('div').classes('w-3 h-3 rounded-full').style('background: #e879f9')
|
|
ui.label('CPU Usage').classes('text-sm text-grey-5')
|
|
with ui.row().classes('items-center gap-2'):
|
|
ui.element('div').classes('w-3 h-3 rounded-full').style('background: #10b981')
|
|
ui.label('Memory Usage').classes('text-sm text-grey-5')
|
|
|
|
# Quick actions
|
|
with ui.row().classes('w-full gap-4'):
|
|
ColorfulMetricCard('Process Manager', 'terminal', '#e879f9')
|
|
ColorfulMetricCard('Network Monitor', 'router', '#10b981')
|
|
ColorfulMetricCard('Log Viewer', 'description', '#f97316')
|
|
|
|
# Right column - system info and GPU details
|
|
with ui.column().classes('w-80 gap-4'):
|
|
# Large GPU usage circle with binding
|
|
with ui.card().classes('metric-card p-6 text-center'):
|
|
with ui.column().classes('items-center gap-3'):
|
|
ui.label('GPU Usage').classes('text-sm text-grey-5 font-medium uppercase tracking-wide')
|
|
ui.circular_progress(size='120px', color='#f97316').bind_value_from(
|
|
gpu_monitor, 'usage', lambda x: x / 100 if gpu_monitor.available else 0)
|
|
ui.label().classes('text-2xl font-bold text-white').bind_text_from(
|
|
gpu_monitor, 'usage', lambda x: f'{int(x)}%' if gpu_monitor.available else '0%')
|
|
ui.label().classes('text-xs text-grey-5').bind_text_from(
|
|
gpu_monitor, 'gpu_name', lambda x: x if gpu_monitor.available else 'No GPU Detected')
|
|
|
|
# System info card with bindings
|
|
with ui.card().classes('metric-card p-4'):
|
|
ui.label('System Info').classes('text-sm font-bold text-white mb-3')
|
|
|
|
with ui.column().classes('gap-2'):
|
|
# OS
|
|
with ui.row().classes('w-full justify-between'):
|
|
ui.label('OS').classes('text-xs text-grey-5')
|
|
ui.label().classes('text-xs text-white font-medium').bind_text_from(
|
|
system_monitor, 'os_name')
|
|
# Kernel
|
|
with ui.row().classes('w-full justify-between'):
|
|
ui.label('Kernel').classes('text-xs text-grey-5')
|
|
ui.label().classes('text-xs text-white font-medium').bind_text_from(
|
|
system_monitor, 'kernel')
|
|
# CPU
|
|
with ui.row().classes('w-full justify-between'):
|
|
ui.label('CPU').classes('text-xs text-grey-5')
|
|
ui.label().classes('text-xs text-white font-medium').bind_text_from(
|
|
system_monitor, 'cpu_model')
|
|
# GPU
|
|
with ui.row().classes('w-full justify-between'):
|
|
ui.label('GPU').classes('text-xs text-grey-5')
|
|
ui.label().classes('text-xs text-white font-medium').bind_text_from(
|
|
gpu_monitor, 'gpu_name', lambda x: x if gpu_monitor.available else 'No GPU')
|
|
# Uptime
|
|
with ui.row().classes('w-full justify-between'):
|
|
ui.label('Uptime').classes('text-xs text-grey-5')
|
|
ui.label().classes('text-xs text-white font-medium').bind_text_from(
|
|
system_monitor, 'uptime')
|
|
|
|
# Ollama status card
|
|
with ui.card().classes('metric-card p-4'):
|
|
ui.label('Ollama Status').classes('text-sm font-bold text-white mb-3')
|
|
|
|
with ui.row().classes('items-center gap-2 mb-2'):
|
|
ui.icon('check_circle', color='green', size='sm')
|
|
ui.label('Online').classes('text-sm text-white')
|
|
|
|
with ui.column().classes('gap-1'):
|
|
ui.label('4 models active').classes('text-xs text-grey-5')
|
|
ui.label('llama3.2:3b, mistral:7b...').classes('text-xs text-grey-6')
|
|
|
|
# Bottom metrics row with bindings
|
|
with ui.grid(columns=5).classes('w-full gap-4 mt-4'):
|
|
# Processes
|
|
with ui.card().classes('metric-card p-3 text-center'):
|
|
with ui.column().classes('items-center gap-1'):
|
|
ui.icon('dashboard', size='sm', color='grey-5')
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
system_monitor, 'process_count', lambda x: str(x))
|
|
ui.label('Processes').classes('text-xs text-grey-5')
|
|
|
|
# Network
|
|
with ui.card().classes('metric-card p-3 text-center'):
|
|
with ui.column().classes('items-center gap-1'):
|
|
ui.icon('wifi', size='sm', color='grey-5')
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
system_monitor, 'network_bytes_recv',
|
|
lambda x: self._format_network(system_monitor.network_bytes_recv + system_monitor.network_bytes_sent))
|
|
ui.label('Network').classes('text-xs text-grey-5')
|
|
|
|
# Disk
|
|
with ui.card().classes('metric-card p-3 text-center'):
|
|
with ui.column().classes('items-center gap-1'):
|
|
ui.icon('storage', size='sm', color='grey-5')
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
system_monitor, 'disk_percent', lambda x: f'{x:.0f}%')
|
|
ui.label('Disk').classes('text-xs text-grey-5')
|
|
|
|
# CPU Cores
|
|
with ui.card().classes('metric-card p-3 text-center'):
|
|
with ui.column().classes('items-center gap-1'):
|
|
ui.icon('settings', size='sm', color='grey-5')
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
system_monitor, 'cpu_count', lambda x: str(x))
|
|
ui.label('CPU Cores').classes('text-xs text-grey-5')
|
|
|
|
# Total RAM
|
|
with ui.card().classes('metric-card p-3 text-center'):
|
|
with ui.column().classes('items-center gap-1'):
|
|
ui.icon('memory', size='sm', color='grey-5')
|
|
ui.label().classes('text-lg font-bold text-white').bind_text_from(
|
|
system_monitor, 'memory_total', lambda x: f'{x / (1024**3):.0f}GB')
|
|
ui.label('Total RAM').classes('text-xs text-grey-5')
|
|
|
|
def _format_network(self, total_bytes: int) -> str:
|
|
"""Format network bytes to human readable format"""
|
|
mb = total_bytes / (1024 * 1024)
|
|
if mb > 1024:
|
|
return f"{mb/1024:.1f}GB"
|
|
else:
|
|
return f"{mb:.0f}MB"
|