●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Server-side MudTable with paging, sorting and dense rows
- Toolbar with search (MudTextField) and MudSelect filters for status and last execution
- Row expand/collapse to show child task table and details
- Status chips (MudChip), action icon buttons with MudTooltip, and run action simulation
- Execution logs shown in a MudDialog with searchable MudTable and pager
- Mobile-friendly filter panel using MudHidden and MudCollapse
## Key components
- MudTable (ServerData, TableState, TableData)
- MudTableSortLabel, MudTablePager
- MudTextField (@bind-Value), MudSelect, MudSelectItem
- MudIconButton, MudTooltip, MudChip, MudStack
- MudDialog, DialogService, MudDialogInstance
- MudCollapse, MudPaper, MudCard
- Model classes: WorkflowViewModel, WorkflowTaskViewModel, LastExecutionDetailsViewModel, LogEntryViewModel
## How it works
- The page uses a ServerReload handler wired to MudTable.ServerData to simulate server-side filtering, sorting and paging.
- Search, status and execution filters update bound values (@bind-Value with :after callbacks) and call _table.ReloadServerData() to refresh.
- Sorting is driven by TableState.SortLabel and SortDirection; ServerReload applies ordering using switch on SortLabel.
- Rows toggle details by flipping WorkflowViewModel.ShowDetails; child rows render a nested MudTable bound to Tasks.
- RunWorkflow updates in-memory model state and triggers a table reload; ViewExecutionLogs opens ExecutionLogsDialog via DialogService.ShowAsync with parameters.
## Styling
- UI uses MudBlazor components and theme primitives (MudText, MudChip, color enums) rather than Tailwind/Bootstrap classes.
- Responsive behavior uses MudHidden breakpoints and MudCollapse for small-screen filter UI.
- Spacing utilities (e.g., Class="pa-4", Class="mt-2") are applied to MudPaper/MudContainer for layout consistency.
## Reuse steps
1. Add MudBlazor NuGet package and call builder.Services.AddMudServices() in Program.cs.
2. Import MudBlazor namespace in _Imports.razor or component files and add MudBlazor CSS and icons to index.html/_Host.cshtml.
3. Copy the page and model classes, include ExecutionLogsDialog component in the project.
4. Replace the in-memory ServerReload implementation with real API calls (inject HttpClient/service, map TableState to request parameters).
5. Wire backend endpoints for running workflows, retrieving logs, and applying server-side paging/sorting.
## Limitations & next steps
- This is a single-page UI scaffold generated by Instruct UI; it uses in-memory sample data and simulates server behavior.
- Authentication, authorization, API services and persistent data stores are not implemented and must be added.
- Consider adding optimistic UI updates, confirmation dialogs for destructive actions, and error handling for network calls.
- For large result sets, move filtering/sorting entirely to the backend and expose total counts from API responses.