_ui needs left side in admin panel #5

New issue

Closed

opened 2026-03-18 07:14:36 +00:00 by despiegk · 4 comments

despiegk commented 2026-03-18 07:14:36 +00:00

Owner

Copy link

puts statistics there
also graphs

memory usage over all managed processes
network usage
cpu usage

be more in line to our standards

 puts statistics there also graphs memory usage over all managed processes network usage cpu usage be more in line to our standards

image.png

597 KiB

despiegk commented 2026-03-18 07:23:01 +00:00

Author

Owner

Copy link

Implementation Spec for Issue #5 — Admin Panel Left Sidebar with Stats & Graphs

Objective

Refactor the Admin tab (#tab-admin) in the HeroProc dashboard to use a two-column layout — a persistent left sidebar showing live system statistics (memory, CPU, network) with sparkline graphs, and a right main area containing the existing administrative action cards. This mirrors the established left-sidebar pattern already used in the Docs tab, and reuses the existing Chart.js, Bootstrap 5 dark-mode CSS variables, and JSON-RPC polling infrastructure already present in the codebase.

Requirements

1. The Admin tab must adopt a left sidebar + main content area layout (matching the Docs tab pattern).
2. The left sidebar must display:
   • System memory usage (current value + percentage + sparkline chart, last 60 readings)
   • CPU usage (current percentage + sparkline chart, last 60 readings)
   • Network I/O (bytes received / transmitted, updated via polling)
   • Process count (managed hero_proc services + total OS processes)
   • Job statistics (running / failed / succeeded breakdown)
3. Charts must use the already-bundled chart.umd.min.js (Chart.js) with the same dark-mode color tokens as the Stats tab.
4. Stats must be live-updated by the existing loadSystemStats() polling loop (runs every 2s) without adding a new polling timer.
5. The existing admin action sections ("System Operations", "Maintenance", "Demo Data") stay in the right main area, unchanged in functionality.
6. All CSS must live in the existing dashboard.css file using the established CSS variable system.
7. Network stats require a small backend extension to system.stats RPC and sysmon.rs.
8. The layout must be responsive: sidebar collapses below the main content on screens narrower than 768px.

Files to Modify

File	Change
crates/hero_proc_ui/templates/index.html	Restructure #tab-admin HTML with .admin-layout wrapper, .admin-sidebar with stat widgets, .admin-main for existing action grid
crates/hero_proc_ui/static/css/dashboard.css	Add CSS classes: .admin-layout, .admin-sidebar, .admin-stat-widget, .admin-spark-wrap, responsive breakpoint
crates/hero_proc_ui/static/js/dashboard.js	Add updateAdminSidebar(), formatBytes(), admin Chart.js instances, lifecycle hooks in switchTab() and loadSystemStats()
crates/hero_proc_server/src/sysmon.rs	Add network_rx_bytes/network_tx_bytes to SystemStats, add sys.refresh_networks()
crates/hero_proc_server/src/rpc/system.rs	Expose network fields in handle_stats JSON response
crates/hero_proc_server/openrpc.json	Add network fields to SystemStats schema

Implementation Plan

Step 1 — Extend sysmon.rs with network I/O stats

Files: crates/hero_proc_server/src/sysmon.rs

• Add network_rx_bytes: u64 and network_tx_bytes: u64 to SystemStats
• Add sys.refresh_networks() call in system_stats()
• Sum across all interfaces using sys.networks().iter()
  Dependencies: none

Step 2 — Update handle_stats in system.rs and openrpc.json

Files: crates/hero_proc_server/src/rpc/system.rs, crates/hero_proc_server/openrpc.json

• Add network_rx_bytes and network_tx_bytes to JSON response
• Add fields to OpenRPC schema
  Dependencies: Step 1

Step 3 — Add CSS for the admin sidebar layout

Files: crates/hero_proc_ui/static/css/dashboard.css

• Add .admin-layout, .admin-sidebar, .admin-stat-widget, .admin-spark-wrap classes
• Add responsive breakpoint at 768px
  Dependencies: none (can run in parallel with Step 1)

Step 4 — Refactor Admin tab HTML in index.html

Files: crates/hero_proc_ui/templates/index.html

• Wrap #tab-admin content in .admin-layout
• Add .admin-sidebar with Memory, CPU, Network, Processes, Jobs stat widgets with canvas elements
• Move existing admin sections into .admin-main
  Dependencies: Step 3

Step 5 — Add admin sidebar JS

Files: crates/hero_proc_ui/static/js/dashboard.js

• Add module-level chart variables and history arrays
• Add formatBytes() helper
• Add updateAdminSidebar() function
• Wire into loadSystemStats() and switchTab()
  Dependencies: Steps 1, 2, 4

Acceptance Criteria

• Admin tab has a visible left sidebar with Memory, CPU, Network, Processes, Jobs stats
• Each time-series metric (memory, CPU, network) shows a sparkline Chart.js chart
• Stats update every 2s via existing polling, no new timers
• All values from real system.stats RPC (no mock data)
• Existing admin action buttons remain fully functional
• Layout is responsive: sidebar stacks above main at ≤ 768px
• Dark mode and light mode render correctly
• cargo build -p hero_proc_server and cargo build -p hero_proc_ui pass
• cargo test -p hero_proc_server passes

Notes

• sysinfo 0.37 provides System::networks() with cumulative bytes since boot; JS computes deltas for bandwidth display
• No new chart library needed — Chart.js is already bundled
• No SSE needed — 2s polling matches the Stats tab
• "Our standards" = Bootstrap 5 dark mode, CSS custom properties, Chart.js sparklines, JSON-RPC via rpc() helper

## Implementation Spec for Issue #5 — Admin Panel Left Sidebar with Stats & Graphs ### Objective Refactor the Admin tab (`#tab-admin`) in the HeroProc dashboard to use a two-column layout — a persistent left sidebar showing live system statistics (memory, CPU, network) with sparkline graphs, and a right main area containing the existing administrative action cards. This mirrors the established left-sidebar pattern already used in the Docs tab, and reuses the existing Chart.js, Bootstrap 5 dark-mode CSS variables, and JSON-RPC polling infrastructure already present in the codebase. ### Requirements 1. The Admin tab must adopt a left sidebar + main content area layout (matching the Docs tab pattern). 2. The left sidebar must display: - System memory usage (current value + percentage + sparkline chart, last 60 readings) - CPU usage (current percentage + sparkline chart, last 60 readings) - Network I/O (bytes received / transmitted, updated via polling) - Process count (managed hero_proc services + total OS processes) - Job statistics (running / failed / succeeded breakdown) 3. Charts must use the already-bundled `chart.umd.min.js` (Chart.js) with the same dark-mode color tokens as the Stats tab. 4. Stats must be live-updated by the existing `loadSystemStats()` polling loop (runs every 2s) without adding a new polling timer. 5. The existing admin action sections ("System Operations", "Maintenance", "Demo Data") stay in the right main area, unchanged in functionality. 6. All CSS must live in the existing `dashboard.css` file using the established CSS variable system. 7. Network stats require a small backend extension to `system.stats` RPC and `sysmon.rs`. 8. The layout must be responsive: sidebar collapses below the main content on screens narrower than 768px. ### Files to Modify | File | Change | |---|---| | `crates/hero_proc_ui/templates/index.html` | Restructure `#tab-admin` HTML with `.admin-layout` wrapper, `.admin-sidebar` with stat widgets, `.admin-main` for existing action grid | | `crates/hero_proc_ui/static/css/dashboard.css` | Add CSS classes: `.admin-layout`, `.admin-sidebar`, `.admin-stat-widget`, `.admin-spark-wrap`, responsive breakpoint | | `crates/hero_proc_ui/static/js/dashboard.js` | Add `updateAdminSidebar()`, `formatBytes()`, admin Chart.js instances, lifecycle hooks in `switchTab()` and `loadSystemStats()` | | `crates/hero_proc_server/src/sysmon.rs` | Add `network_rx_bytes`/`network_tx_bytes` to `SystemStats`, add `sys.refresh_networks()` | | `crates/hero_proc_server/src/rpc/system.rs` | Expose network fields in `handle_stats` JSON response | | `crates/hero_proc_server/openrpc.json` | Add network fields to `SystemStats` schema | ### Implementation Plan #### Step 1 — Extend `sysmon.rs` with network I/O stats Files: `crates/hero_proc_server/src/sysmon.rs` - Add `network_rx_bytes: u64` and `network_tx_bytes: u64` to `SystemStats` - Add `sys.refresh_networks()` call in `system_stats()` - Sum across all interfaces using `sys.networks().iter()` Dependencies: none #### Step 2 — Update `handle_stats` in `system.rs` and `openrpc.json` Files: `crates/hero_proc_server/src/rpc/system.rs`, `crates/hero_proc_server/openrpc.json` - Add `network_rx_bytes` and `network_tx_bytes` to JSON response - Add fields to OpenRPC schema Dependencies: Step 1 #### Step 3 — Add CSS for the admin sidebar layout Files: `crates/hero_proc_ui/static/css/dashboard.css` - Add `.admin-layout`, `.admin-sidebar`, `.admin-stat-widget`, `.admin-spark-wrap` classes - Add responsive breakpoint at 768px Dependencies: none (can run in parallel with Step 1) #### Step 4 — Refactor Admin tab HTML in `index.html` Files: `crates/hero_proc_ui/templates/index.html` - Wrap `#tab-admin` content in `.admin-layout` - Add `.admin-sidebar` with Memory, CPU, Network, Processes, Jobs stat widgets with canvas elements - Move existing admin sections into `.admin-main` Dependencies: Step 3 #### Step 5 — Add admin sidebar JS Files: `crates/hero_proc_ui/static/js/dashboard.js` - Add module-level chart variables and history arrays - Add `formatBytes()` helper - Add `updateAdminSidebar()` function - Wire into `loadSystemStats()` and `switchTab()` Dependencies: Steps 1, 2, 4 ### Acceptance Criteria - [ ] Admin tab has a visible left sidebar with Memory, CPU, Network, Processes, Jobs stats - [ ] Each time-series metric (memory, CPU, network) shows a sparkline Chart.js chart - [ ] Stats update every 2s via existing polling, no new timers - [ ] All values from real `system.stats` RPC (no mock data) - [ ] Existing admin action buttons remain fully functional - [ ] Layout is responsive: sidebar stacks above main at ≤ 768px - [ ] Dark mode and light mode render correctly - [ ] `cargo build -p hero_proc_server` and `cargo build -p hero_proc_ui` pass - [ ] `cargo test -p hero_proc_server` passes ### Notes - `sysinfo 0.37` provides `System::networks()` with cumulative bytes since boot; JS computes deltas for bandwidth display - No new chart library needed — Chart.js is already bundled - No SSE needed — 2s polling matches the Stats tab - "Our standards" = Bootstrap 5 dark mode, CSS custom properties, Chart.js sparklines, JSON-RPC via `rpc()` helper

despiegk commented 2026-03-18 07:34:24 +00:00

Author

Owner

Copy link

Test Results

Build: ✅ hero_proc_server + hero_proc_ui compile successfully

Tests: cargo test -p hero_proc_server

• Total: 55
• Passed: 55
• Failed: 0

All 55 tests passed across the following modules:

• process::tests (4 tests)
• scheduler::tests (14 tests)
• types::protocol::tests (6 tests)
• types::responses::tests (4 tests)
• types::signal::tests (7 tests)
• types::socket::tests (2 tests)
• types::state::tests (10 tests)
• types::version::tests (3 tests)
• main.rs unit tests (0 tests)
• Doc-tests (0 tests)

Branch: development_kristof_ttyd | Date: 2026-03-18

## Test Results **Build:** ✅ hero_proc_server + hero_proc_ui compile successfully **Tests:** `cargo test -p hero_proc_server` - Total: 55 - Passed: 55 - Failed: 0 All 55 tests passed across the following modules: - `process::tests` (4 tests) - `scheduler::tests` (14 tests) - `types::protocol::tests` (6 tests) - `types::responses::tests` (4 tests) - `types::signal::tests` (7 tests) - `types::socket::tests` (2 tests) - `types::state::tests` (10 tests) - `types::version::tests` (3 tests) - `main.rs` unit tests (0 tests) - Doc-tests (0 tests) **Branch:** `development_kristof_ttyd` | **Date:** 2026-03-18

despiegk commented 2026-03-18 07:34:58 +00:00

Author

Owner

Copy link

Implementation Complete ✅

Changes Made

Backend (hero_proc_server):

• crates/hero_proc_server/src/sysmon.rs — Added network_rx_bytes: u64 and network_tx_bytes: u64 to SystemStats; added Networks refresh and summing across all interfaces; refactored global state to bundle System + Networks in a single SysmonState mutex
• crates/hero_proc_server/src/rpc/system.rs — Exposed network_rx_bytes and network_tx_bytes in the handle_stats JSON response
• crates/hero_proc_server/openrpc.json — Added network fields to SystemStats schema

Frontend (hero_proc_ui):

• crates/hero_proc_ui/templates/index.html — Refactored #tab-admin to a two-column layout: left sidebar with 5 live stat widgets (Memory+sparkline, CPU+sparkline, Network+sparkline, Processes, Jobs), right main area with existing admin action sections unchanged
• crates/hero_proc_ui/static/css/dashboard.css — Added .admin-layout, .admin-sidebar, .admin-stat-widget, .admin-spark-wrap, .admin-job-row classes with responsive breakpoint at 768px
• crates/hero_proc_ui/static/js/dashboard.js — Added updateAdminSidebar(), updateAdminSparkline(), updateAdminNetChart(), formatBytes() functions; admin Chart.js instances with lifecycle hooks in switchTab() and loadSystemStats()

Test Results

• Build: ✅ both crates compile
• Tests: ✅ 55/55 passed (cargo test -p hero_proc_server)

Acceptance Criteria

• Admin tab has left sidebar with Memory, CPU, Network, Processes, Jobs stats
• Sparkline charts for memory, CPU, and network (Chart.js, reuses existing bundle)
• Live updates via existing 2s polling — no new timers
• All values from real system.stats RPC
• Existing admin action buttons remain fully functional
• Responsive: sidebar stacks above main at ≤ 768px
• Dark/light mode via CSS custom properties
• All builds and tests pass

## Implementation Complete ✅ ### Changes Made **Backend (`hero_proc_server`):** - `crates/hero_proc_server/src/sysmon.rs` — Added `network_rx_bytes: u64` and `network_tx_bytes: u64` to `SystemStats`; added `Networks` refresh and summing across all interfaces; refactored global state to bundle `System` + `Networks` in a single `SysmonState` mutex - `crates/hero_proc_server/src/rpc/system.rs` — Exposed `network_rx_bytes` and `network_tx_bytes` in the `handle_stats` JSON response - `crates/hero_proc_server/openrpc.json` — Added network fields to `SystemStats` schema **Frontend (`hero_proc_ui`):** - `crates/hero_proc_ui/templates/index.html` — Refactored `#tab-admin` to a two-column layout: left sidebar with 5 live stat widgets (Memory+sparkline, CPU+sparkline, Network+sparkline, Processes, Jobs), right main area with existing admin action sections unchanged - `crates/hero_proc_ui/static/css/dashboard.css` — Added `.admin-layout`, `.admin-sidebar`, `.admin-stat-widget`, `.admin-spark-wrap`, `.admin-job-row` classes with responsive breakpoint at 768px - `crates/hero_proc_ui/static/js/dashboard.js` — Added `updateAdminSidebar()`, `updateAdminSparkline()`, `updateAdminNetChart()`, `formatBytes()` functions; admin Chart.js instances with lifecycle hooks in `switchTab()` and `loadSystemStats()` ### Test Results - Build: ✅ both crates compile - Tests: ✅ 55/55 passed (`cargo test -p hero_proc_server`) ### Acceptance Criteria - [x] Admin tab has left sidebar with Memory, CPU, Network, Processes, Jobs stats - [x] Sparkline charts for memory, CPU, and network (Chart.js, reuses existing bundle) - [x] Live updates via existing 2s polling — no new timers - [x] All values from real `system.stats` RPC - [x] Existing admin action buttons remain fully functional - [x] Responsive: sidebar stacks above main at ≤ 768px - [x] Dark/light mode via CSS custom properties - [x] All builds and tests pass

despiegk commented 2026-03-18 07:47:21 +00:00

Author

Owner

Copy link

Implementation committed: 307925e

Browse: lhumina_code/hero_proc@307925e

Implementation committed: `307925e` Browse: https://forge.ourworld.tf/lhumina_code/hero_proc/commit/307925e

despiegk referenced this issue from a commit 2026-03-18 07:47:39 +00:00

feat(ui): add left sidebar with live stats and graphs to admin panel

despiegk referenced this issue from a commit 2026-03-18 07:52:37 +00:00

feat(ui): make stats sidebar global — visible on all tabs

despiegk closed this issue 2026-03-18 07:56:09 +00:00

Commenting is not possible because the repository is archived.

No Branch/Tag specified

Branches Tags

development

development_kristof_ttyd

main

development_home27

development_dioxus_bootstrap

fix/system-config-startup

development_mik_6_1

development_tty2

development_kristof

v0.4.0

archive/development_tty

v0.1.3

v0.1.2

v0.1.1

v0.1.0

v0.0.1-rc1

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

lhumina_code/hero_proc_archive#5

No description provided.