Fix various bugs in dashboard metrics

dotnet · adamint · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024
commit 9e36af98b95c243bdff2fcace0ac5ed6f0ea177c
diff --git a/src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor b/src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor
@@ -21,8 +21,6 @@
 <div id="metric-table-container" style="height: 40vh; overflow-y: auto; width:1200px;">
     @* ItemKey is to preserve row focus by associating rows with their associated time *@
     <FluentDataGrid
-        ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(ControlsStringsLoc)"
-        ResizeType="DataGridResizeType.Discrete"
         Items="@_metricsView"
         ItemSize="46"
         Virtualize="true"
@@ -37,7 +35,7 @@
             {
                 foreach (var (percentile, underlineColor) in percentileColumns)
                 {
-                    <AspireTemplateColumn Title="@((_metricsView.FirstOrDefault() as HistogramMetricView)?.Percentiles[percentile].Name ?? (_instrument is not null ? $"P{percentile} {InstrumentUnitResolver.ResolveDisplayedUnit(_instrument, titleCase: true, pluralize: true)}" : $"P{percentile}"))">
+                    <TemplateColumn Title="@((_metricsView.FirstOrDefault() as HistogramMetricView)?.Percentiles[percentile].Name ?? (_instrument is not null ? $"P{percentile} {InstrumentUnitResolver.ResolveDisplayedUnit(_instrument, titleCase: true, pluralize: true)}" : $"P{percentile}"))">
                         @if (context is HistogramMetricView histogramMetric)
                         {
                             var percentileData = histogramMetric.Percentiles[percentile];
@@ -51,13 +49,13 @@
                                 <FluentIcon Style="vertical-align: text-bottom" Value="@icon" Title="@title"/>
                             }
                         }
-                    </AspireTemplateColumn>
+                    </TemplateColumn>
                 }
             }
             else if (_metrics.Values.All(value => value is MetricValueView))
             {
                 <!-- if we're switching between grid types, this could be false -->
-                <AspireTemplateColumn Title="@_unitColumnHeader">
+                <TemplateColumn Title="@_unitColumnHeader">
                     @{
                         var metricValueView = context as MetricValueView;
                     }
@@ -78,11 +76,11 @@
                             <FluentIcon Style="vertical-align: text-bottom" Value="@icon" Title="@title"/>
                         }
                     }
-                </AspireTemplateColumn>
+                </TemplateColumn>
             }
             @if (_exemplars.Count > 0)
             {
-                <AspireTemplateColumn Title="@Loc[nameof(ControlsStrings.MetricTableExemplarsColumnHeader)]">
+                <TemplateColumn Title="@Loc[nameof(ControlsStrings.MetricTableExemplarsColumnHeader)]">
                     @if (context.Exemplars.Count > 0)
                     {
                         @* min-width ensures a consistent button width up to 999 metrics *@
@@ -95,7 +93,7 @@
                     {
                         <span>0</span>
                     }
-                </AspireTemplateColumn>
+                </TemplateColumn>
             }
         </ChildContent>
         <EmptyContent>

diff --git a/src/Aspire.Dashboard/Components/Dialogs/ExemplarsDialog.razor b/src/Aspire.Dashboard/Components/Dialogs/ExemplarsDialog.razor
@@ -14,27 +14,25 @@
 @inject IStringLocalizer<ControlsStrings> ControlsStringsLoc
 
 <div style="max-height: 44vh; overflow-y: auto;">
-    <FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(ControlsStringsLoc)"
-                    ResizeType="DataGridResizeType.Discrete"
-                    Items="@MetricView"
+    <FluentDataGrid Items="@MetricView"
                     ItemSize="46"
                     GridTemplateColumns="2fr 1fr 1fr 1fr"
                     TGridItem="ChartExemplar">
         <ChildContent>
-            <AspireTemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogTraceColumnHeader)]" TooltipText="@(context => GetTitle(context))" Tooltip="true">
+            <TemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogTraceColumnHeader)]" TooltipText="@(context => GetTitle(context))" Tooltip="true">
                 <span style="padding-left:5px; border-left-width: 5px; border-left-style: solid; border-left-color: @(context.Span != null ? ColorGenerator.Instance.GetColorHexByKey(OtlpApplication.GetResourceName(context.Span.Source, Content.Applications)) : "transparent");">
                     @GetTitle(context)
                 </span>
-            </AspireTemplateColumn>
-            <AspireTemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogTimestampColumnHeader)]" TooltipText="@(context => FormatHelpers.FormatDateTime(TimeProvider, TimeProvider.ToLocal(context.Start), MillisecondsDisplay.None, CultureInfo.CurrentCulture))" Tooltip="true">
+            </TemplateColumn>
+            <TemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogTimestampColumnHeader)]" TooltipText="@(context => FormatHelpers.FormatDateTime(TimeProvider, TimeProvider.ToLocal(context.Start), MillisecondsDisplay.None, CultureInfo.CurrentCulture))" Tooltip="true">
                 @FormatHelpers.FormatTimeWithOptionalDate(TimeProvider, TimeProvider.ToLocal(context.Start), MillisecondsDisplay.Truncated)
-            </AspireTemplateColumn>
-            <AspireTemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogValueColumnHeader)]">
+            </TemplateColumn>
+            <TemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogValueColumnHeader)]">
                 @FormatMetricValue(context.Value)
-            </AspireTemplateColumn>
-            <AspireTemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogDetailsColumnHeader)]">
+            </TemplateColumn>
+            <TemplateColumn Title="@Loc[nameof(Dialogs.ExemplarsDialogDetailsColumnHeader)]">
                 <FluentButton Appearance="Appearance.Lightweight" OnClick="@(() => OnViewDetailsAsync(context))">View</FluentButton>
-            </AspireTemplateColumn>
+            </TemplateColumn>
         </ChildContent>
         <EmptyContent>
             <FluentIcon Icon="Icons.Regular.Size24.ChartMultiple" />&nbsp;@Loc[nameof(ControlsStrings.MetricTableNoMetricsFound)]

diff --git a/src/Aspire.Dashboard/Components/Pages/Metrics.razor b/src/Aspire.Dashboard/Components/Pages/Metrics.razor
@@ -91,7 +91,7 @@
                                             TGridItem="OtlpInstrumentSummary">
                                             <ChildContent>
                                                 <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.Metrics.MetricsInsturementNameGridNameColumnHeader)]">
-                                                    <FluentAnchor Href="@DashboardUrls.MetricsUrl(resource: PageViewModel.SelectedApplication.Name, meter: context.Parent.MeterName, instrument: context.Name)" Appearance="Appearance.Lightweight">
+                                                    <FluentAnchor Href="@DashboardUrls.MetricsUrl(resource: PageViewModel.SelectedApplication.Name, meter: context.Parent.MeterName, instrument: context.Name, duration: DurationMinutes, view: ViewKindName)" Appearance="Appearance.Lightweight">
                                                         @context.Name
                                                     </FluentAnchor>
                                                 </TemplateColumn>

diff --git a/src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs b/src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs
@@ -43,7 +43,7 @@ public partial class Metrics : IDisposable, IPageWithSessionAndUrlState<Metrics.
 
     [Parameter]
     [SupplyParameterFromQuery(Name = "duration")]
-    public int DurationMinutes { get; set; }
+    public int? DurationMinutes { get; set; }
 
     [Parameter]
     [SupplyParameterFromQuery(Name = "view")]
@@ -238,15 +238,11 @@ private Task HandleSelectedTreeItemChangedAsync()
 
     public string GetUrlFromSerializableViewModel(MetricsPageState serializable)
     {
-        var duration = PageViewModel.SelectedDuration.Id != s_defaultDuration
-            ? (int?)serializable.DurationMinutes
-            : null;
-
         var url = DashboardUrls.MetricsUrl(
             resource: serializable.ApplicationName,
             meter: serializable.MeterName,
             instrument: serializable.InstrumentName,
-            duration: duration,
+            duration: serializable.DurationMinutes,
             view: serializable.ViewKind);
 
         return url;

diff --git a/src/Aspire.Dashboard/wwwroot/js/app-metrics.js b/src/Aspire.Dashboard/wwwroot/js/app-metrics.js
@@ -119,7 +119,11 @@ export function initializeChart(id, traces, exemplarTrace, rangeStartTime, range
 
     const resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
-            Plotly.Plots.resize(entry.target);
+            var display = window.getComputedStyle(entry.target).display;
+            var isHidden = !display || display === "none";
+            if (!isHidden) {
+                Plotly.Plots.resize(entry.target);
+            }
         }
     });
     plot.then(plotyDiv => {