F #-: Redesign Sunstone admin dashboard with operational widgets

[pablodelarco]

Summary

Replaces the 4 static WavesCard counters on the Sunstone admin dashboard with an operations-focused layout that surfaces real-time infrastructure metrics at a glance:

• Row 1 — Enhanced WavesCards with live subtitles (running VMs, monitored hosts, storage used/total)
• Row 2 — Infrastructure utilization (aggregate CPU/Memory bars with color thresholds) + Storage capacity (per-datastore-type progress bars)
• Row 3 — Host CPU and Memory monitoring graphs (uPlot 1h time-series)
• Row 4 — VM state distribution donut chart (Recharts) + Quick Actions navigation panel

Design decisions

• No new npm dependencies — uses existing MUI, Recharts, and uPlot already in the project
• 5 unique API calls shared across all widgets via RTK Query cache deduplication
• Respects DISABLE_ANIMATIONS setting, dark/light theme, responsive breakpoints, and per-resource access control gating
• All new widget components are self-contained under widgets/ with a barrel export

Files changed

File	Change
General.js	Rewritten layout: 4-row Grid with new widget components
widgets/ResourceSummaryCards.js	New — enhanced WavesCards with live subtitles
widgets/InfrastructureUtilization.js	New — CPU/Memory aggregate bars
widgets/StorageCapacity.js	New — per-type datastore capacity bars
widgets/HostMonitoringGraphs.js	New — uPlot CPU/Memory time-series
widgets/VmStateDistribution.js	New — Recharts donut chart
widgets/QuickActions.js	New — navigation buttons (Deploy VM, Hosts, Datastores, Settings)
widgets/index.js	New — barrel export
WavesCard.js	Added optional subtitle prop
translates.js	Added translation keys for new widget labels

How to test

Option A: Build from source

# 1. Clone the fork and checkout the branch
git clone https://github.com/pablodelarco/one.git
cd one
git checkout feat/fireedge-admin-dashboard-redesign

# 2. Build FireEdge
cd src/fireedge
npm install
npm run build

# 3. Copy built bundles to your OpenNebula installation
sudo cp -r dist/* /usr/lib/one/fireedge/dist/

# 4. Restart FireEdge
sudo systemctl restart opennebula-fireedge

# 5. Open the Sunstone dashboard
# https://<your-server>:2616/fireedge/sunstone/dashboard

Option B: Build only the ContainersModule (faster)

cd one/src/fireedge
npm install
npm run build:containers   # builds only the dashboard module

# Copy the built ContainersModule
sudo cp -r dist/modules/ContainersModule/* \
  /usr/lib/one/fireedge/dist/modules/ContainersModule/

sudo systemctl restart opennebula-fireedge

What to verify

• Dashboard loads without console errors
• WavesCards show resource counts with live subtitles
• CPU/Memory utilization bars reflect host aggregate data
• Storage capacity shows per-datastore-type breakdown
• Host monitoring graphs render 1h time-series for CPU and Memory
• VM state distribution donut shows correct state breakdown
• Quick Actions buttons navigate to correct pages
• Dark mode renders correctly
• Responsive layout works on narrow viewports (md breakpoint)
• Access control: widgets hidden when user lacks resource permissions

Checklist

• No new npm dependencies
• Follows existing code patterns (React.memo, PropTypes, RTK Query hooks)
• Apache 2.0 license headers on all new files
• Tested on OpenNebula 7.0.1 CE