Update table every second, reuse existing metric values if possible (d…

…otnet#3370) Co-authored-by: Adam Ratzman <[email protected]> Co-authored-by: James Newton-King <[email protected]>
Xen0byte · Apr 17, 2024 · dab5352 · dab5352
1 parent 1b919b1
commit dab5352
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor b/src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor
@@ -14,7 +14,13 @@
 }
 
 <div id="metric-table-container" style="height: 40vh; overflow-y: auto; margin-bottom: 20px; max-width:1200px;">
- <FluentDataGrid Items="@_metricsView" ItemSize="35" Virtualize="true" GridTemplateColumns="@string.Join(" ", Enumerable.Repeat("1fr", columnCount))">
+ @* ItemKey is to preserve row focus by associating rows with their associated time *@
+ <FluentDataGrid
+ Items="@_metricsView"
+ ItemSize="35"
+ Virtualize="true"
+ GridTemplateColumns="@string.Join(" ", Enumerable.Repeat("1fr", columnCount))"
+ ItemKey="@(item => item.DateTime)">
  <ChildContent>
  <TemplateColumn Title="@Loc[nameof(ControlsStrings.MetricTableStartColumnHeader)]" TooltipText="@(context => FormatHelpers.FormatDateTime(TimeProvider, TimeProvider.ToLocal(context.DateTime), MillisecondsDisplay.None, CultureInfo.CurrentCulture))" Tooltip="true">
  @FormatHelpers.FormatTimeWithOptionalDate(TimeProvider, TimeProvider.ToLocal(context.DateTime))

diff --git a/src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor.cs b/src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor.cs
@@ -21,6 +21,7 @@ public partial class MetricTable : ChartBase
  private OtlpInstrument? _instrument;
  private bool _showCount;
  private bool _onlyShowValueChanges = true;
+ private DateTimeOffset? _lastUpdate;
 
  private readonly CancellationTokenSource _waitTaskCancellationTokenSource = new();
 
@@ -31,6 +32,14 @@ public partial class MetricTable : ChartBase
 
  protected override async Task OnChartUpdated(List<ChartTrace> traces, List<DateTimeOffset> xValues, bool tickUpdate, DateTimeOffset inProgressDataTime)
  {
+ // Only update table every second to batch updates. New data coming every 200ms may be disorienting for screen-reader users.
+ if (inProgressDataTime - _lastUpdate < TimeSpan.FromSeconds(1))
+ {
+ return;
+ }
+
+ _lastUpdate = inProgressDataTime;
+
  if (!Equals(_instrument?.Name, InstrumentViewModel.Instrument?.Name) || _showCount != InstrumentViewModel.ShowCount)
  {
  _metrics.Clear();
@@ -43,8 +52,6 @@ protected override async Task OnChartUpdated(List<ChartTrace> traces, List<DateT
 
  _metrics = UpdateMetrics(out var xValuesToAnnounce, traces, xValues);
 
- await InvokeAsync(StateHasChanged);
-
  if (xValuesToAnnounce.Count == 0)
  {
  return;