Dashboard dropdown max visible items

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

@@ -0,0 +1,15 @@
+@using Aspire.Dashboard.Resources
+
+<FluentSelect @ref="_resourceSelectComponent"
+              Items="Resources"
+              OptionValue="@(c => c!.Id?.InstanceId)"
+              OptionDisabled="@(c => c!.Id?.Type is Otlp.Model.OtlpApplicationType.ReplicaSet)"
+              SelectedOption="SelectedResource"
+              SelectedOptionChanged="SelectedResourceChanged"
+              AriaLabel="@AriaLabel"
+              Class="resource-list"
+              Height="@GetPopupHeight()">
+    <OptionTemplate>
+        <ResourceSelectOptionTemplate ViewModel="@context" />
+    </OptionTemplate>
+</FluentSelect>

src/Aspire.Dashboard/Components/Controls/ResourceSelect.razor.cs

@@ -0,0 +1,62 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using Aspire.Dashboard.Model;
+using Aspire.Dashboard.Model.Otlp;
+using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Aspire.Dashboard.Components.Controls;
+
+public partial class ResourceSelect
+{
+    private const int ResourceOptionPixelHeight = 32;
+    private const int MaxVisibleResourceOptions = 10;
+
+    [Parameter]
+    public IEnumerable<SelectViewModel<ResourceTypeDetails>> Resources { get; set; } = default!;
+
+    [Parameter]
+    public SelectViewModel<ResourceTypeDetails> SelectedResource { get; set; } = default!;
+
+    [Parameter]
+    public EventCallback<SelectViewModel<ResourceTypeDetails>> SelectedResourceChanged { get; set; }
+
+    [Parameter]
+    public string? AriaLabel { get; set; }
+
+    [Inject]
+    public required IJSRuntime JSRuntime { get; init; }
+
+    private FluentSelect<SelectViewModel<ResourceTypeDetails>>? _resourceSelectComponent;
+
+    /// <summary>
+    /// Workaround for issue in fluent-select web component where the display value of the
+    /// selected item doesn't update automatically when the item changes.
+    /// </summary>
+    public ValueTask UpdateDisplayValueAsync()
+    {
+        if (JSRuntime is null || _resourceSelectComponent is null)
+        {
+            return ValueTask.CompletedTask;
+        }
+
+        return JSRuntime.InvokeVoidAsync("updateSelectDisplayValue", _resourceSelectComponent.Element);
+    }
+
+    private string? GetPopupHeight()
+    {
+        if (Resources?.TryGetNonEnumeratedCount(out var count) is false or null)
+        {
+            return null;
+        }
+
+        if (count <= MaxVisibleResourceOptions)
+        {
+            return null;
+        }
+
+        return $"{ResourceOptionPixelHeight * MaxVisibleResourceOptions}px";
+    }
+}

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

@@ -11,18 +11,11 @@
 <div class="resource-logs-layout">
     <h1 class="page-header">@Loc[nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsHeader)]</h1>
     <FluentToolbar Orientation="Orientation.Horizontal">
-        <FluentSelect @ref="_resourceSelectComponent"
-                      Class="resource-list"
-                      Items="@_resources"
-                      OptionValue="@(c => c.Id?.InstanceId)"
-                      OptionDisabled="@(c => c.Id?.Type is Otlp.Model.OtlpApplicationType.ReplicaSet)"
-                      @bind-SelectedOption="PageViewModel.SelectedOption"
-                      @bind-SelectedOption:after="HandleSelectedOptionChangedAsync"
-                      AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAResource)]">
-            <OptionTemplate>
-                 <ResourceSelectOptionTemplate ViewModel="@context" />
-            </OptionTemplate>
-        </FluentSelect>
+        <ResourceSelect @ref="_resourceSelectComponent"
+                        Resources="_resources"
+                        AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAResource)]"
+                        @bind-SelectedResource="PageViewModel.SelectedOption"
+                        @bind-SelectedResource:after="HandleSelectedOptionChangedAsync" />
         <FluentLabel Typo="Typography.Body" aria-live="polite" aria-label="@Loc[nameof(Dashboard.Resources.ConsoleLogs.LogStatusLabel)]">@PageViewModel.Status</FluentLabel>
     </FluentToolbar>
     <LogViewer @ref="_logViewer" />

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

@@ -4,15 +4,14 @@
 using System.Collections.Concurrent;
 using System.Collections.Immutable;
 using System.Diagnostics;
+using Aspire.Dashboard.Components.Controls;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Model.Otlp;
 using Aspire.Dashboard.Otlp.Model;
 using Aspire.Dashboard.Resources;
 using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
-using Microsoft.FluentUI.AspNetCore.Components;
-using Microsoft.JSInterop;
 
 namespace Aspire.Dashboard.Components.Pages;
 
@@ -21,9 +20,6 @@ public sealed partial class ConsoleLogs : ComponentBase, IAsyncDisposable, IPage
     [Inject]
     public required IDashboardClient DashboardClient { get; init; }
 
-    [Inject]
-    public required IJSRuntime JS { get; init; }
-
     [Inject]
     public required ProtectedSessionStorage SessionStorage { get; init; }
 
@@ -44,7 +40,7 @@ public sealed partial class ConsoleLogs : ComponentBase, IAsyncDisposable, IPage
     private Task? _resourceSubscriptionTask;
 
     // UI
-    private FluentSelect<SelectViewModel<ResourceTypeDetails>>? _resourceSelectComponent;
+    private ResourceSelect? _resourceSelectComponent;
     private SelectViewModel<ResourceTypeDetails> _noSelection = null!;
     private LogViewer _logViewer = null!;
 
@@ -306,9 +302,9 @@ private async Task OnResourceChanged(ResourceViewModelChangeType changeType, Res
 
         // Workaround for issue in fluent-select web component where the display value of the
         // selected item doesn't update automatically when the item changes
-        if (_resourceSelectComponent is not null && JS is not null)
+        if (_resourceSelectComponent is not null)
         {
-            await JS.InvokeVoidAsync("updateFluentSelectDisplayValue", _resourceSelectComponent.Element);
+            await _resourceSelectComponent.UpdateDisplayValueAsync();
         }
     }
 

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

@@ -15,17 +15,10 @@
 <div class="metrics-layout">
     <h1 class="page-header">@Loc[nameof(Dashboard.Resources.Metrics.MetricsHeader)]</h1>
     <FluentToolbar Orientation="Orientation.Horizontal">
-        <FluentSelect Items="@_applications"
-                      Class="resource-list"
-                      OptionDisabled="@(c => c.Id?.Type is OtlpApplicationType.ReplicaSet)"
-                      OptionValue="@(c => c.Id?.InstanceId)"
-                      @bind-SelectedOption="PageViewModel.SelectedApplication"
-                      @bind-SelectedOption:after="HandleSelectedApplicationChangedAsync"
-                      AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]">
-            <OptionTemplate>
-                <ResourceSelectOptionTemplate ViewModel="@context" />
-            </OptionTemplate>
-        </FluentSelect>
+        <ResourceSelect Resources="_applications"
+                        AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]"
+                        @bind-SelectedResource="PageViewModel.SelectedApplication"
+                        @bind-SelectedResource:after="HandleSelectedApplicationChangedAsync" />
         <FluentIcon slot="end" Icon="Icons.Regular.Size20.Clock" Style="margin-right:5px;" />
         <FluentSelect slot="end" TOption="SelectViewModel<TimeSpan>"
                       Items="@_durations"

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

@@ -18,17 +18,10 @@
 <div class="logs-layout">
     <h1 class="page-header">@Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsHeader)]</h1>
     <FluentToolbar Orientation="Orientation.Horizontal">
-        <FluentSelect Items="@_applicationViewModels"
-                      Class="resource-list"
-                      OptionValue="@(c => c.Id?.InstanceId)"
-                      OptionDisabled="@(c => c.Id?.Type is OtlpApplicationType.ReplicaSet)"
-                      @bind-SelectedOption="PageViewModel.SelectedApplication"
-                      @bind-SelectedOption:after="HandleSelectedApplicationChangedAsync"
-                      AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]">
-            <OptionTemplate>
-                <ResourceSelectOptionTemplate ViewModel="@context" />
-            </OptionTemplate>
-        </FluentSelect>
+        <ResourceSelect Resources="_applicationViewModels"
+                        AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]"
+                        @bind-SelectedResource="PageViewModel.SelectedApplication"
+                        @bind-SelectedResource:after="HandleSelectedApplicationChangedAsync" />
         <FluentSearch @bind-Value="PageViewModel.Filter"
                       @oninput="HandleFilter"
                       @bind-Value:after="HandleClear"

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

@@ -17,17 +17,10 @@
 <div class="traces-layout">
     <h1 class="page-header">@Loc[nameof(Dashboard.Resources.Traces.TracesHeader)]</h1>
     <FluentToolbar Orientation="Orientation.Horizontal">
-        <FluentSelect Items="@_applicationViewModels"
-                      Class="resource-list"
-                      OptionValue="@(c => c.Id?.InstanceId)"
-                      OptionDisabled="@(c => c.Id?.Type is OtlpApplicationType.ReplicaSet)"
-                      @bind-SelectedOption="_selectedApplication"
-                      @bind-SelectedOption:after="HandleSelectedApplicationChangedAsync"
-                      AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]">
-            <OptionTemplate>
-                <ResourceSelectOptionTemplate ViewModel="@context" />
-            </OptionTemplate>
-        </FluentSelect>
+        <ResourceSelect Resources="_applicationViewModels"
+                        AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]"
+                        @bind-SelectedResource="_selectedApplication"
+                        @bind-SelectedResource:after="HandleSelectedApplicationChangedAsync" />
         <FluentSearch @bind-Value="_filter"
                       @oninput="HandleFilter"
                       @bind-Value:after="HandleClear"