●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Header with container name, image, short ID and action buttons (Start, Stop, Restart, Remove).
- Quick metadata chips (created, ports, CPU/memory limits).
- Tabbed detail view (Overview, Logs, Stats, Variables, Volumes, Backup, Settings) using MudTabs/MudTabPanel.
- Log viewer with client-side text filtering (MudTextField + computed FilteredLogs).
- Stats summary cards and line charts (MudChart) for CPU, memory and network.
- Read-only tables for environment variables and volumes (MudTable).
- Simple settings form elements (MudTextField, MudCheckBox) and action handlers that append to in-memory logs.
## Key components
- MudContainer, MudPaper, MudText, MudSpacer
- MudButton, MudTextField, MudCheckBox
- MudTabs, MudTabPanel
- MudTable (RowTemplate, MudTd)
- MudChart, ChartSeries, ChartOptions
- MudCard, MudCardContent
- @bind-Value usage, computed property FilteredLogs
## How it works
- Data is populated in OnInitialized with mocked DockerContainerDetailsModel, lists and ChartSeries.
- UI uses @bind-Value for two-way binding (e.g., MudTextField, MudCheckBox). Actions use event handlers (StartContainer, StopContainer, SaveSettings, RefreshLogs) that mutate the model and AllLogs list.
- Log filtering is implemented as a computed property that applies StringComparison.OrdinalIgnoreCase.
- Charts render from CpuChartSeries / MemoryChartSeries arrays and ChartOptions; charts are static based on mocked series and require a live data feed to be real-time.
## Styling
- Uses MudBlazor components and theme primitives (MudPaper, Typo, Color, Elevation).
- Layout uses utility classes such as d-flex, flex-wrap, gap-*, pa-*, mt-* (present in examples alongside MudBlazor layout helpers).
- Tabs and cards are responsive by design; content areas use max-height/overflow for scrollable log output.
## Reuse steps
1. Add MudBlazor NuGet package and reference (MudBlazor).
2. Register MudBlazor services in Program.cs and include MudBlazor CSS/JS in host layout.
3. Copy DockerContainerModels.cs into the project and place the Razor page under Pages or a feature folder.
4. Import MudBlazor namespace in _Imports.razor and adapt route parameter handling (Id).
5. Replace mocked OnInitialized data with injected container service (register with DI) and bind real API calls for actions (Start/Stop/Restart/Remove, backups).
## Limitations & next steps
- This is a single-page demo generated by Instruct UI; data is mocked in OnInitialized and not persisted.
- No backend service, authentication, or confirmation dialogs for destructive actions (Remove) are wired.
- Settings UI lacks validation and server-side save integration.
- Charts are static; implement a polling or WebSocket feed for live stats and update ChartSeries data.
- Volumes/labels editing is UI-only; add form editing, validation and API endpoints to persist changes.