Add pause warning to metrics (#9207)

Co-authored-by: Dan Moseley <[email protected]>
Co-authored-by: James Newton-King <[email protected]>

Author: 3 people

src/Aspire.Dashboard/Components/Controls/Chart/ChartContainer.razor

@@ -15,6 +15,7 @@ else
         <div class="metrics-chart-header">
             <h3>@_instrument.Summary.Name</h3>
             <p>@_instrument.Summary.Description</p>
+
             @if (_instrument.HasOverflow)
             {
                 <div class="block-warning">
@@ -51,5 +52,11 @@ else
                 </div>
             </FluentTab>
         </FluentTabs>
+        <div class="metrics-chart-footer">
+            @if (PauseText is not null)
+            {
+                <PauseWarning PauseText="@PauseText" />
+            }
+        </div>
     </div>
 }

src/Aspire.Dashboard/Components/Controls/Chart/ChartContainer.razor.cs

@@ -43,6 +43,9 @@ public partial class ChartContainer : ComponentBase, IAsyncDisposable
     [Parameter, EditorRequired]
     public required List<OtlpApplication> Applications { get; set; }
 
+    [Parameter, EditorRequired]
+    public required string? PauseText { get; set; }
+
     [Inject]
     public required TelemetryRepository TelemetryRepository { get; init; }
 

src/Aspire.Dashboard/Components/Controls/PauseWarning.razor

@@ -0,0 +1,19 @@
+@using Aspire.Dashboard.Resources
+
+@inject IStringLocalizer<ControlsStrings> Loc
+
+<div class="block-warning">
+    <div class="block-warning-icon">
+        <FluentIcon Value="new Icons.Filled.Size16.Warning()" Color="Color.Warning" />
+    </div>
+
+    <div class="block-warning-message">
+        <span class="title">@Loc[nameof(ControlsStrings.PauseWarningTitle)]</span>
+        @PauseText
+    </div>
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public required string PauseText { get; set; }
+}

src/Aspire.Dashboard/Components/Controls/TotalItemsFooter.razor

@@ -9,16 +9,7 @@
 
     @if (PauseText is not null)
     {
-        <div class="block-warning">
-            <div class="block-warning-icon">
-                <FluentIcon Value="new Icons.Filled.Size16.Warning()" Color="Color.Warning" />
-            </div>
-
-            <div class="block-warning-message">
-                <span class="title">@Loc[nameof(ControlsStrings.TotalItemsFooterCapturePaused)]</span>
-                @PauseText
-            </div>
-        </div>
+        <PauseWarning PauseText="@PauseText" />
     }
 </div>
 

src/Aspire.Dashboard/Components/Pages/Metrics.razor

@@ -108,7 +108,8 @@
                                             Duration="PageViewModel.SelectedDuration.Id"
                                             ActiveView="@(PageViewModel.SelectedViewKind ?? Metrics.MetricViewKind.Graph)"
                                             OnViewChangedAsync="@OnViewChangedAsync"
-                                            Applications="@_applications" />
+                                            Applications="@_applications"
+                                            PauseText="@PauseText" />
                                     }
                                     else if (PageViewModel.SelectedMeter != null)
                                     {

src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs

@@ -70,6 +70,9 @@ public partial class Metrics : IDisposable, IComponentWithTelemetry, IPageWithSe
     [Inject]
     public required PauseManager PauseManager { get; init; }
 
+    [Inject]
+    public required BrowserTimeProvider TimeProvider { get; init; }
+
     [CascadingParameter]
     public required ViewportInformation ViewportInformation { get; init; }
 
@@ -218,6 +221,13 @@ private Task HandleSelectedDurationChangedAsync()
         return this.AfterViewModelChangedAsync(_contentLayout, waitToApplyMobileChange: true);
     }
 
+    private string? PauseText => PauseManager.AreMetricsPaused(out var startTime)
+        ? string.Format(
+            CultureInfo.CurrentCulture,
+            Loc[nameof(Dashboard.Resources.Metrics.PauseInProgressText)],
+            FormatHelpers.FormatTimeWithOptionalDate(TimeProvider, startTime.Value, MillisecondsDisplay.Truncated))
+        : null;
+
     public sealed class MetricsViewModel
     {
         public FluentTreeItem? SelectedTreeItem { get; set; }

src/Aspire.Dashboard/Components/Pages/Metrics.razor.css

@@ -28,7 +28,8 @@
     grid-template-rows: auto 1fr;
     grid-template-areas:
         "header"
-        "chart";
+        "chart"
+        "footer";
     width: 100%;
     gap: calc(var(--design-unit) * 4px);
 }
@@ -44,6 +45,11 @@
     overflow-x: hidden;
 }
 
+::deep .metrics-chart-footer {
+    grid-area: footer;
+    margin-bottom: calc(var(--design-unit) * 4px);
+}
+
 ::deep .metrics-chart-header h3 {
     overflow: hidden;
     text-overflow: ellipsis;

src/Aspire.Dashboard/Components/Pages/Traces.razor.cs

@@ -249,7 +249,7 @@ private void OnBrowserResize(object? o, EventArgs args)
     private string? PauseText => PauseManager.AreTracesPaused(out var startTime)
         ? string.Format(
             CultureInfo.CurrentCulture,
-            Loc[nameof(Dashboard.Resources.StructuredLogs.PauseInProgressText)],
+            Loc[nameof(Dashboard.Resources.Traces.PauseInProgressText)],
             FormatHelpers.FormatTimeWithOptionalDate(TimeProvider, startTime.Value, MillisecondsDisplay.Truncated))
         : null;