stock-bot/apps/stock/web-app/src/features/monitoring

Monitoring Components

This directory contains monitoring components that have been refactored to use standardized UI components with a consistent dark theme.

Standardized Components

StatusBadge

Used for displaying status indicators with consistent styling:

• ConnectionStatus - Shows connected/disconnected state
• HealthStatus - Shows healthy/unhealthy state
• ServiceStatusIndicator - Shows service status as a colored dot

MetricCard

Displays metrics with optional progress bars in a consistent card layout.

Cards

• ServiceCard - Displays individual service status
• DatabaseCard - Displays database connection info
• SystemHealthCard - Shows system health overview
• CacheStatsCard - Shows cache statistics
• ProxyStatsCard - Shows proxy status
• QueueStatsTable - Displays queue statistics in a table

Theme Colors

All components now use the standardized color palette from the Tailwind config:

• Background: bg-surface-secondary (dark surfaces)
• Borders: border-border
• Text: text-text-primary, text-text-secondary, text-text-muted
• Status colors: text-success, text-danger, text-warning
• Primary accent: text-primary-400, bg-primary-500/10

Utilities

Common formatting functions are available in utils/formatters.ts:

• formatUptime() - Formats milliseconds to human-readable uptime
• formatBytes() - Formats bytes to KB/MB/GB
• formatNumber() - Adds thousand separators
• formatPercentage() - Formats numbers as percentages