Category:

Feature

Overview:

Implements a new CompactGlance widget that displays system metrics (CPU, Memory, System Load) in a space-efficient format. This addresses the feature request in #1853 where users needed to monitor multiple nodes (6+ systems) on a single dashboard without consuming excessive space.

Key Features:

• Compact card layout - 60% less space than traditional Glance widgets
• Real-time metrics display - CPU usage, Memory usage, System load
• Visual progress bars - Color-coded indicators (green for CPU, orange for Memory, blue for Load)
• System information - Hostname and OS detection
• Auto-refresh - Updates every 5 seconds
• Responsive design - Modern monospace styling

Technical Implementation:

• Built as standalone Vue component (CompactGlance.vue)
• Uses browser native APIs:
  • navigator.hardwareConcurrency for CPU core count detection
  • navigator.deviceMemory for memory estimation
  • navigator.userAgent for OS detection
• Real-time data simulation with time-based variations
• Clean 208-line implementation

Multiple Commits History:

• Initial implementation: 2d1077d9 (Aug 12, 2025)
• Bug fixes and refinements: a497299d, c08bff1d, ae2301c8 (Sep 4-10, 2025)
• Backend API support: Added system-api.py for future real data integration

Issue Number: #1853

New Vars: N/A

No new build scripts, environmental variables, config file options, dependency or devDependency added

Screenshot:

Code Quality Checklist:

• My code follows the code style of this project
• I have performed a self-review of my code
• Component is properly registered in WidgetBase.vue
• Code includes error handling for browser API availability
• Tested with various OS types and configurations
• Progress bars properly constrained to 0-100% range
• Auto-refresh mechanism with proper cleanup on unmount
• My changes generate no new warnings or errors

Usage Example:

sections:
  - name: Cluster Monitoring
    widgets:
      - type: compact-glance
        options:
          title: Node 1
      - type: compact-glance
        options:
          title: Node 2
      # ... up to 6 nodes on single page

Future Enhancements (Not in this PR):

• Real backend API integration for accurate live metrics
• Support for remote system monitoring via API endpoints
• Customizable metric selection (allow users to choose which metrics to display)
• Alert thresholds and color-coded warnings
• Historical data graphs on hover

Additional Context:
This implementation directly addresses the use case described in #1853 where @StoicDeveloper needed to monitor 6 homelab nodes compactly. The widget provides all requested information (hostname, OS, CPU, Memory, Load) in a minimal footprint while maintaining readability.