Confirm?

Are you sure you want to proceed?
J
Jacob Hall

Admin Console System Monitoring

Clone & Customize via AI

The MudBlazor Admin Console is a node monitoring dashboard that combines a MudChart line series and a MudTable of APA modules. It demonstrates progress bars, status icons and simulated real-time updates via a Timer.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Node system summary card with contribution metrics and live counter. - Line chart for CPU utilization (MudChart) with dynamic series and labels. - Resource cards for CPU, RAM and Disk using MudProgressLinear bars and icons. - APA modules table (MudTable) with row templates showing status icons. - Simulated real-time updates driven by a System.Timers.Timer and state refreshes. ## Key components - MudContainer, MudGrid, MudItem - MudCard, MudCardHeader, MudCardContent - MudChart (ChartSeries, ChartOptions) - MudTable with HeaderContent and RowTemplate - MudProgressLinear, MudIcon, MudImage, MudText - System.Timers.Timer for periodic updates and InvokeAsync(StateHasChanged) ## How it works - UI state is stored in private fields and model lists (ApaModuleModel, ContributionScoreModel). - OnInitialized seeds data and populates a CPU history list; UpdateCpuChart converts that into a ChartSeries and label array. - A Timer triggers OnTimerElapsed every 5 seconds to mutate metrics, update lists, and call InvokeAsync(StateHasChanged) to refresh the UI. - MudTable RowTemplate binds to each ApaModuleModel instance and displays a status icon via GetStatusIcon/GetStatusColor. - Progress bars compute percentages from fields (_ramUsage, _diskUsage) and choose colors using GetProgressColor. ## Styling - Uses MudBlazor components and a custom dark theme via app.css (.bg-dark, .bg-dark-card, .text-light). - Animations and effects: logo-pulse and live-counter glow are defined in app.css keyframes. - Layout responsiveness uses MudGrid/MudItem breakpoints (xs/sm/md) for cards and table. ## Reuse steps 1. Add MudBlazor NuGet package and import MudBlazor namespace. 2. Register MudBlazor services in Program.cs (e.g., builder.Services.AddMudServices()). 3. Include MudBlazor CSS and the custom app.css in the project (index.html / _Host.cshtml). 4. Copy models (ApaModuleModel, ContributionScoreModel) and the component code; register any required services for telemetry or metrics. 5. Replace the simulated Timer logic with a real data source (injected service or SignalR) and wire authentication/authorization as needed. ## Limitations & next steps - This is a single-page showcase generated by Instruct UI; it uses an in-memory Timer to simulate metrics. - Data persistence, telemetry, authentication, and server APIs are not implemented and must be added for production use. - Consider replacing Timer with an injected IHostedService or SignalR for real-time telemetry, add error handling and cancellation tokens, and improve accessibility (aria labels, contrast checks).