Skip to content

Blazor UI overhaul#38

Merged
poxet merged 6 commits intomasterfrom
develop
Apr 18, 2026
Merged

Blazor UI overhaul#38
poxet merged 6 commits intomasterfrom
develop

Conversation

@poxet
Copy link
Copy Markdown
Contributor

@poxet poxet commented Apr 18, 2026

Summary

Overhaul of the Blazor monitoring UI for Tharga.Cache.Blazor.

Core

  • CacheTypeInfo — new PersistType field, populated by CacheMonitor.Set/Track from CacheOptions.Get<T>().PersistType. Exposes which persistence backend (Memory/Redis/MongoDB/File) each cache type uses.

ListView

  • Slimmed item columns to the essentials: Key, Expires, Load Time, Size, Stale. Other metadata (Created, Updated, Fresh Span, Last Accessed, Access Count) moved to a detail dialog.
  • New Persist column on the type-level grid (e.g. Memory, Redis, MongoDB, File).
  • Info button per row opens the detail dialog.
  • Subscribes to ICacheMonitor.DataSetEvent / DataDropEvent for live refresh.

DetailView (new)

  • Radzen dialog showing all metadata for the selected item.
  • Content section uses ExpandableCard — JSON is not fetched until the card is expanded.
  • Content is loaded via IEternalCache.PeekAsync<T>(key) reflection in a CacheContent child component.
  • Small icon-only copy button anchored top-right invokes the same clipboard.copyText JS as Tharga.Blazor.CopyButton.

SummaryView

  • Subscribes to ICacheMonitor.DataSetEvent / DataDropEvent so the count, size, and queue figures stay in sync (fixes "Clear Cache" not refreshing the list).

Sample

  • App.razor: HeadOutlet, RadzenTheme, Routes all set to InteractiveServerRenderMode(prerender: false) so the Radzen theme (incl. Material Icons font) and dialog host activate in the interactive circuit.
  • MainLayout.razor: added <RadzenComponents /> host for DialogService.
  • App.razor: added tharga.blazor.js script for the copy-to-clipboard JS.
  • Program.cs: added AddBlazoredLocalStorage() (required by ExpandableCard's ILocalStorageService injection, even when AllowSaveState="false").

Consumer integration notes

Apps using Tharga.Cache.Blazor must also:

  1. Add <RadzenComponents /> to their main layout.
  2. Reference _content/Tharga.Blazor/tharga.blazor.js.
  3. Call builder.Services.AddBlazoredLocalStorage().

Test plan

  • Open the cache page in Tharga.Cache.BlazorServer.
  • Verify ListView shows the slim columns + Persist column.
  • Click the info button — dialog opens with metadata.
  • Expand "Content" — JSON loads; copy button appears top-right and copies to clipboard.
  • Click "Clear Cache" — both SummaryView and ListView refresh immediately.
  • Verify 460 tests still pass.

poxet added 6 commits April 18, 2026 13:19
…, live refresh

- CacheTypeInfo: added PersistType field, populated by CacheMonitor.Set/Track
  from CacheOptions.Get<T>().PersistType
- ListView: slimmed columns to Key, Expires, Size, Load Time, Stale; added
  Persist column on the type-level grid (e.g. Memory, Redis, MongoDB, File);
  added chevron button per row to open detail dialog
- DetailView: new Radzen dialog component showing all metadata plus cached
  data as pretty-printed JSON via IEternalCache.PeekAsync<T> reflection;
  uses Tharga.Blazor CopyButton for copy-to-clipboard
- SummaryView + ListView: subscribe to ICacheMonitor DataSetEvent/DataDropEvent
  for live refresh when cache changes (fixes "Clear Cache" not refreshing list)
- Sample App.razor: set render mode on HeadOutlet/RadzenTheme/Routes to
  InteractiveServerRenderMode(prerender: false), matching Florida pattern.
  Without this the Radzen theme CSS (including Material Icons font) and
  the dialog host did not activate in the interactive circuit.
- Sample MainLayout.razor: added <RadzenComponents /> host so
  DialogService.OpenAsync has a portal to render into.
- Sample App.razor: added tharga.blazor.js script for CopyButton clipboard.
- ListView: icon button uses 'article' instead of 'chevron_right'.
- Extracted JSON loading into CacheContent.razor so it mounts (and
  OnInitializedAsync fires) only when the ExpandableCard is expanded.
- DetailView wraps CacheContent in <ExpandableCard Text="Content"
  Icon="data_object" AllowSaveState="false">; all other metadata stays
  visible.
- Copy button is a small icon-only RadzenButton anchored top-right of
  the content area, invokes the same clipboard.copyText JS that
  Tharga.Blazor CopyButton uses.
- Sample: added AddBlazoredLocalStorage() (required by ExpandableCard's
  ILocalStorageService injection even when AllowSaveState is false).
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 18, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@poxet poxet merged commit ea5db13 into master Apr 18, 2026
4 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant