Confirm?

Are you sure you want to proceed?
A
Alex Guimera

Real Time Event Viewer Web

Clone & Customize via AI

MudBlazor Events Dashboard shows live event generation with a MudTable and a left-side panel for event type configuration, using MudColorPicker and MudSwitch.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Left maintenance panel to manage event types (add, remove, enable/disable) with MudColorPicker and MudTextField. - Live events area with MudTable showing Type, Message, Timestamp and colored MudChip per event. - Live generator (start/stop) via MudSwitch, manual generate button, clear, and JSON export with snackbar feedback. ## Key components - MudGrid, MudPaper, MudText, MudDivider - MudTable, MudTh, MudTd, MudChip - MudColorPicker, MudTextField, MudSwitch, MudButton - ISnackbar, CancellationTokenSource, Task.Run for background generator ## How it works - Data models: EventModel and EventTypeConfigModel hold events and type configs used by the component. - Binding: @bind-Value is used on switches and inputs; @bind-Value:after triggers OnRunningChanged to start/stop the generator. - Live generation runs inside Task.Run using a CancellationTokenSource; new events are Insert(0, event) and UI refresh occurs via InvokeAsync(StateHasChanged). - Color values are parsed with MudColor.Parse/TryParse and passed to MudColorPicker Value/ValueChanged callbacks. ## Styling - Built with MudBlazor components and theme primitives (MudGrid layout and MudPaper cards). - Small utility/spacing classes (d-flex, gap-*, mt-*) are present for alignment in the markup. - Layout uses responsive MudGrid item sizes (xs/md) to adapt left panel and main table. ## Reuse steps 1. Add MudBlazor NuGet and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor or the component and include MudBlazor CSS/theme in the app shell. 3. Copy or adapt EventModel and EventTypeConfigModel and adjust persistence for SaveConfigs/ExportEvents. 4. Inject ISnackbar and replace demo Task.Run generator with a server stream (SignalR or API) as needed. ## Limitations & next steps - State is in-memory; persistence and server sync are not implemented and should be added for production. - Background generator is demo-only (Task.Run); consider server push (SignalR) and robust cancellation handling. - Add paging, filtering, or virtualization on MudTable for large volumes, and secure endpoints for config changes.