Add metric highlights

spelling.dic

@@ -17,6 +17,8 @@ chmod
 consolelogs
 cors
 csproj
+dashpage
+dashpages
 dbug
 dcpctrl
 dockerfile
@@ -45,6 +47,7 @@ orleans
 otel
 otlp
 pgadmin
+plotly
 postgre
 postgres
 protoc

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

@@ -7,18 +7,15 @@
 using Aspire.Dashboard.Otlp.Model.MetricValues;
 using Aspire.Dashboard.Otlp.Storage;
 using Microsoft.AspNetCore.Components;
-using Microsoft.FluentUI.AspNetCore.Components;
 
 namespace Aspire.Dashboard.Components;
 
-public partial class ChartContainer : ComponentBase, IAsyncDisposable
+public abstract class ChartContainer : ComponentBase, IAsyncDisposable
 {
-    private OtlpInstrumentData? _instrument;
     private PeriodicTimer? _tickTimer;
     private Task? _tickTask;
     private IDisposable? _themeChangedSubscription;
     private int _renderedDimensionsCount;
-    private readonly InstrumentViewModel _instrumentViewModel = new InstrumentViewModel();
 
     [Parameter, EditorRequired]
     public required ApplicationKey ApplicationKey { get; set; }
@@ -32,6 +29,9 @@ public partial class ChartContainer : ComponentBase, IAsyncDisposable
     [Parameter, EditorRequired]
     public required TimeSpan Duration { get; set; }
 
+    [Parameter, EditorRequired]
+    public required Func<Metrics.MetricViewKind, Task> OnViewChangedAsync { get; set; }
+
     [Inject]
     public required TelemetryRepository TelemetryRepository { get; init; }
 
@@ -44,6 +44,8 @@ public partial class ChartContainer : ComponentBase, IAsyncDisposable
     public List<DimensionFilterViewModel> DimensionFilters { get; } = [];
     public string? PreviousMeterName { get; set; }
     public string? PreviousInstrumentName { get; set; }
+    public InstrumentViewModel ViewModel { get; } = new();
+    public OtlpInstrumentData? InstrumentData { get; private set; }
 
     protected override void OnInitialized()
     {
@@ -52,7 +54,7 @@ protected override void OnInitialized()
         _tickTask = Task.Run(UpdateDataAsync);
         _themeChangedSubscription = ThemeManager.OnThemeChanged(async () =>
         {
-            _instrumentViewModel.Theme = ThemeManager.Theme;
+            ViewModel.Theme = ThemeManager.Theme;
             await InvokeAsync(StateHasChanged);
         });
     }
@@ -74,41 +76,41 @@ private async Task UpdateDataAsync()
         var timer = _tickTimer;
         while (await timer!.WaitForNextTickAsync())
         {
-            _instrument = GetInstrument();
-            if (_instrument == null)
+            InstrumentData = GetInstrument();
+            if (InstrumentData == null)
             {
                 continue;
             }
 
-            if (_instrument.Dimensions.Count > _renderedDimensionsCount)
+            if (InstrumentData.Dimensions.Count > _renderedDimensionsCount)
             {
                 // Re-render the entire control if the number of dimensions has changed.
-                _renderedDimensionsCount = _instrument.Dimensions.Count;
+                _renderedDimensionsCount = InstrumentData.Dimensions.Count;
                 await InvokeAsync(StateHasChanged);
             }
             else
             {
-                await UpdateInstrumentDataAsync(_instrument);
+                await UpdateInstrumentDataAsync(InstrumentData);
             }
         }
     }
 
     public async Task DimensionValuesChangedAsync(DimensionFilterViewModel dimensionViewModel)
     {
-        if (_instrument == null)
+        if (InstrumentData == null)
         {
             return;
         }
 
-        await UpdateInstrumentDataAsync(_instrument);
+        await UpdateInstrumentDataAsync(InstrumentData);
     }
 
     private async Task UpdateInstrumentDataAsync(OtlpInstrumentData instrument)
     {
         var matchedDimensions = instrument.Dimensions.Where(MatchDimension).ToList();
 
         // Only update data in plotly
-        await _instrumentViewModel.UpdateDataAsync(instrument.Summary, matchedDimensions);
+        await ViewModel.UpdateDataAsync(instrument.Summary, matchedDimensions);
     }
 
     private bool MatchDimension(DimensionScope dimension)
@@ -149,9 +151,9 @@ private static bool MatchFilter(KeyValuePair<string, string>[] attributes, Dimen
 
     protected override async Task OnParametersSetAsync()
     {
-        _instrument = GetInstrument();
+        InstrumentData = GetInstrument();
 
-        if (_instrument == null)
+        if (InstrumentData == null)
         {
             return;
         }
@@ -165,7 +167,7 @@ protected override async Task OnParametersSetAsync()
         DimensionFilters.Clear();
         DimensionFilters.AddRange(filters);
 
-        await UpdateInstrumentDataAsync(_instrument);
+        await UpdateInstrumentDataAsync(InstrumentData);
     }
 
     private OtlpInstrumentData? GetInstrument()
@@ -199,9 +201,9 @@ protected override async Task OnParametersSetAsync()
     private List<DimensionFilterViewModel> CreateUpdatedFilters(bool hasInstrumentChanged)
     {
         var filters = new List<DimensionFilterViewModel>();
-        if (_instrument != null)
+        if (InstrumentData != null)
         {
-            foreach (var item in _instrument.KnownAttributeValues.OrderBy(kvp => kvp.Key))
+            foreach (var item in InstrumentData.KnownAttributeValues.OrderBy(kvp => kvp.Key))
             {
                 var dimensionModel = new DimensionFilterViewModel
                 {
@@ -263,18 +265,4 @@ private List<DimensionFilterViewModel> CreateUpdatedFilters(bool hasInstrumentCh
 
         return filters;
     }
-
-    private Task OnTabChangeAsync(FluentTab newTab)
-    {
-        var id = newTab.Id?.Substring("tab-".Length);
-
-        if (id is null
-            || !Enum.TryParse(typeof(Metrics.MetricViewKind), id, out var o)
-            || o is not Metrics.MetricViewKind viewKind)
-        {
-            return Task.CompletedTask;
-        }
-
-        return OnViewChangedAsync(viewKind);
-    }
 }

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

@@ -3,88 +3,89 @@
 @using Aspire.Dashboard.Components.Controls.Grid
 @using Aspire.Dashboard.Resources
 @using Aspire.Dashboard.Otlp.Model
-@using Aspire.Dashboard.Model
 @inject IStringLocalizer<ControlsStrings> Loc
 
-<div class="metrics-filters-container">
+<div class="@(IsRenderedInsideModal ? "metrics-filters-modal-container" : "metrics-filters-standalone-container")">
     @if (DimensionFilters.Count > 0)
     {
         <div class="metrics-filters-section">
             <h5>@Loc[nameof(ControlsStrings.ChartContainerFiltersHeader)]</h5>
-            <FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(Loc)"
-                            ResizeType="DataGridResizeType.Discrete"
-                            Items="@Queryable.AsQueryable(DimensionFilters)"
-                            GridTemplateColumns="200px 1fr auto"
-                            GenerateHeader="GenerateHeaderOption.None">
-                <ChildContent>
-                    <AspirePropertyColumn Tooltip="true" TooltipText="@(c => c.Name)" Property="@(c => c.Name)"/>
-                    <AspireTemplateColumn Tooltip="true" TooltipText="@(c => c.SelectedValues.Count == 0 ? Loc[nameof(ControlsStrings.None)] : string.Join(", ", c.SelectedValues.Select(v => v.Name)))">
-                        <FluentOverflow Class="dimension-overflow">
-                            <ChildContent>
-                                @if (context.SelectedValues.Count == 0)
-                                {
-                                    <FluentBadge>@Loc[nameof(ControlsStrings.None)]</FluentBadge>
-                                }
-                                else
-                                {
-                                    var i = 0;
-                                    foreach (var item in context.SelectedValues.OrderBy(g => g.Name))
+            <GridColumnManager @ref="_manager" Columns="@_gridColumns">
+                <FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(Loc)"
+                                ResizeType="DataGridResizeType.Discrete"
+                                Items="@Queryable.AsQueryable(DimensionFilters)"
+                                GridTemplateColumns="@_manager.GetGridTemplateColumns()"
+                                GenerateHeader="GenerateHeaderOption.None">
+                    <ChildContent>
+                        <AspirePropertyColumn ColumnManager="@_manager" ColumnId="@NameColumn" Tooltip="true" TooltipText="@(c => c.Name)" Property="@(c => c.Name)"/>
+                        <AspireTemplateColumn ColumnManager="@_manager" ColumnId="@DimensionColumn" Tooltip="true" TooltipText="@(c => c.SelectedValues.Count == 0 ? Loc[nameof(ControlsStrings.None)] : string.Join(", ", c.SelectedValues.Select(v => v.Name)))">
+                            <FluentOverflow Class="dimension-overflow">
+                                <ChildContent>
+                                    @if (context.SelectedValues.Count == 0)
                                     {
-                                        // Always display the first item by setting a fixed value.
-                                        <FluentOverflowItem Fixed="@((i == 0) ? OverflowItemFixed.Ellipsis : OverflowItemFixed.None)">
-                                            <span class="dimension-tag">@item.Name</span>
-                                        </FluentOverflowItem>
-                                        i++;
+                                        <FluentBadge>@Loc[nameof(ControlsStrings.None)]</FluentBadge>
                                     }
-                                }
-                            </ChildContent>
-                            <MoreButtonTemplate Context="overflow">
-                                @* Display must be inline block so the width is correctly calculated. *@
-                                <span class="dimension-tag" style="display:inline-block;">
-                                    @($"+{overflow.ItemsOverflow.Count()}")
-                                </span>
-                            </MoreButtonTemplate>
-                            <OverflowTemplate Context="overflow">
-                                @* Intentionally empty. Don't display an overflow template here. *@
-                            </OverflowTemplate>
-                        </FluentOverflow>
-                    </AspireTemplateColumn>
-                    <AspireTemplateColumn>
-                        @{
-                            var id = $"typeFilterButton-{context.SanitizedHtmlId}-{Guid.NewGuid()}";
-                        }
-                        <FluentButton id="@id"
-                                      IconEnd="@(new Icons.Regular.Size20.Filter())"
-                                      Appearance="@(context.AreAllValuesSelected is true ? Appearance.Stealth : Appearance.Accent)"
-                                      @onclick="() => context.PopupVisible = !context.PopupVisible"
-                                      aria-label="@(context.AreAllValuesSelected is true ? Loc[nameof(ControlsStrings.ChartContainerAllTags)] : Loc[nameof(ControlsStrings.ChartContainerFilteredTags)])"/>
-                        <FluentPopover AnchorId="@id" @bind-Open="context.PopupVisible" VerticalThreshold="200" AutoFocus="false">
-                            <Header>@context.Name</Header>
-                            <Body>
-                            <FluentStack Orientation="Orientation.Vertical" Class="dimension-popup">
-                                <FluentCheckbox Label="@Loc[nameof(ControlsStrings.All)]"
-                                                ThreeState="true"
-                                                ShowIndeterminate="false"
-                                                ThreeStateOrderUncheckToIntermediate="true"
-                                                @bind-CheckState="context.AreAllValuesSelected"/>
-                                @foreach (var tag in context.Values)
-                                {
-                                    var isChecked = context.SelectedValues.Contains(tag);
-                                    <FluentCheckbox Label="@tag.Name"
-                                                    title="@tag.Name"
-                                                    @key=tag
-                                                    @bind-Value:get="isChecked"
-                                                    @bind-Value:set="c => context.OnTagSelectionChanged(tag, c)"/>
-                                }
-                            </FluentStack>
-                            </Body>
-                        </FluentPopover>
-                    </AspireTemplateColumn>
-                </ChildContent>
-            </FluentDataGrid>
+                                    else
+                                    {
+                                        var i = 0;
+                                        foreach (var item in context.SelectedValues.OrderBy(g => g.Name))
+                                        {
+                                            // Always display the first item by setting a fixed value.
+                                            <FluentOverflowItem Fixed="@((i == 0) ? OverflowItemFixed.Ellipsis : OverflowItemFixed.None)">
+                                                <span class="dimension-tag">@item.Name</span>
+                                            </FluentOverflowItem>
+                                            i++;
+                                        }
+                                    }
+                                </ChildContent>
+                                <MoreButtonTemplate Context="overflow">
+                                    @* Display must be inline block so the width is correctly calculated. *@
+                                    <span class="dimension-tag" style="display:inline-block;">
+                                        @($"+{overflow.ItemsOverflow.Count()}")
+                                    </span>
+                                </MoreButtonTemplate>
+                                <OverflowTemplate Context="overflow">
+                                    @* Intentionally empty. Don't display an overflow template here. *@
+                                </OverflowTemplate>
+                            </FluentOverflow>
+                        </AspireTemplateColumn>
+                        <AspireTemplateColumn ColumnManager="@_manager" ColumnId="@FilterColumn">
+                            @{
+                                var id = $"typeFilterButton-{context.SanitizedHtmlId}-{Guid.NewGuid()}";
+                            }
+                            <FluentButton id="@id"
+                                          IconEnd="@(new Icons.Regular.Size20.Filter())"
+                                          Appearance="@(context.AreAllValuesSelected is true ? Appearance.Stealth : Appearance.Accent)"
+                                          @onclick="() => context.PopupVisible = !context.PopupVisible"
+                                          aria-label="@(context.AreAllValuesSelected is true ? Loc[nameof(ControlsStrings.ChartContainerAllTags)] : Loc[nameof(ControlsStrings.ChartContainerFilteredTags)])"/>
+                            <FluentPopover AnchorId="@id" @bind-Open="context.PopupVisible" VerticalThreshold="200" AutoFocus="false" FixedPlacement="true">
+                                <Header>@context.Name</Header>
+                                <Body>
+                                <FluentStack Orientation="Orientation.Vertical" Class="dimension-popup">
+                                    <FluentCheckbox Label="@Loc[nameof(ControlsStrings.All)]"
+                                                    ThreeState="true"
+                                                    ShowIndeterminate="false"
+                                                    ThreeStateOrderUncheckToIntermediate="true"
+                                                    @bind-CheckState="context.AreAllValuesSelected"/>
+                                    @foreach (var tag in context.Values)
+                                    {
+                                        var isChecked = context.SelectedValues.Contains(tag);
+                                        <FluentCheckbox Label="@tag.Name"
+                                                        title="@tag.Name"
+                                                        @key=tag
+                                                        @bind-Value:get="isChecked"
+                                                        @bind-Value:set="c => context.OnTagSelectionChanged(tag, c)"/>
+                                    }
+                                </FluentStack>
+                                </Body>
+                            </FluentPopover>
+                        </AspireTemplateColumn>
+                    </ChildContent>
+                </FluentDataGrid>
+            </GridColumnManager>
         </div>
     }
-    @if (Instrument.Summary.Type == OtlpInstrumentType.Histogram)
+    @if (InstrumentData.Summary.Type == OtlpInstrumentType.Histogram)
     {
         <div class="metrics-filters-section">
             <h5>@Loc[nameof(ControlsStrings.ChartContainerOptionsHeader)]</h5>

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

@@ -9,24 +9,42 @@ namespace Aspire.Dashboard.Components;
 
 public partial class ChartFilters
 {
+    private const string NameColumn = nameof(NameColumn);
+    private const string DimensionColumn = nameof(DimensionColumn);
+    private const string FilterColumn = nameof(FilterColumn);
+
+    [Parameter, EditorRequired]
+    public required OtlpInstrumentData InstrumentData { get; init; }
+
     [Parameter, EditorRequired]
-    public required OtlpInstrumentData Instrument { get; set; }
+    public required InstrumentViewModel InstrumentViewModel { get; init; }
 
     [Parameter, EditorRequired]
-    public required InstrumentViewModel InstrumentViewModel { get; set; }
+    public required List<DimensionFilterViewModel> DimensionFilters { get; init; }
 
     [Parameter, EditorRequired]
-    public required List<DimensionFilterViewModel> DimensionFilters { get; set; }
+    public required bool IsRenderedInsideModal { get; init; }
 
     public bool ShowCounts { get; set; }
 
+    private GridColumnManager _manager = null!;
+    private IList<GridColumn> _gridColumns = null!;
+
     protected override void OnInitialized()
     {
+        _gridColumns = [
+            new GridColumn(Name: NameColumn, DesktopWidth: "200px", MobileWidth: "2fr"),
+            new GridColumn(Name: DimensionColumn, DesktopWidth: "1fr", MobileWidth: "1fr"),
+            new GridColumn(Name: FilterColumn, DesktopWidth: "auto", MobileWidth: "auto")
+        ];
+
         InstrumentViewModel.DataUpdateSubscriptions.Add(() =>
         {
             ShowCounts = InstrumentViewModel.ShowCount;
             return Task.CompletedTask;
         });
+
+        ShowCounts = InstrumentViewModel.ShowCount;
     }
 
     private void ShowCountChanged()