Move filters into a menu, add a remove all filters button

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

@@ -29,7 +29,7 @@
     }
 </FluentButton>
 
-<FluentMenu Anchor="@MenuButtonId" aria-labelledby="button" @bind-Open="@_visible" VerticalThreshold="200" tabindex="0">
+<FluentMenu Anchor="@MenuButtonId" aria-labelledby="button" @bind-Open="@_visible" VerticalThreshold="200">
     @foreach (var item in Items)
     {
         @if (item.IsDivider)

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

@@ -375,7 +375,7 @@ private List<MenuButtonItem> GetFilterMenuItems()
             OnClick = () =>
             {
                 ViewModel.ClearFilters();
-                return InvokeAsync(StateHasChanged);
+                return this.AfterViewModelChangedAsync(_contentLayout, waitToApplyMobileChange: false);
             }
         });
 

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

@@ -47,22 +47,17 @@
                           title="@Loc[nameof(Dashboard.Resources.Traces.TracesNameFilter)]"
                           slot="end" />
             <FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
-            <FluentLabel slot="end">@FilterLoc[nameof(StructuredFiltering.Filters)]</FluentLabel>
             @if (TracesViewModel.Filters.Count == 0)
             {
                 <span slot="end">@FilterLoc[nameof(StructuredFiltering.NoFilters)]</span>
             }
             else
             {
-                for (var i = 0; i < TracesViewModel.Filters.Count; i++)
-                {
-                    var filter = TracesViewModel.Filters[i];
-                    if (i != 0)
-                    {
-                        <FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
-                    }
-                    <FluentButton slot="end" Appearance="Appearance.Outline" OnClick="() => OpenFilterAsync(filter)" class="telemetry-filter-button" title="@filter.GetDisplayText(FilterLoc)">@filter.GetDisplayText(FilterLoc)</FluentButton>
-                }
+                <div slot="end">
+                    <FluentCounterBadge HorizontalPosition="70" Count="@(TracesViewModel.Filters.Count)" Appearance="Appearance.Accent">
+                        <AspireMenuButton HideIcon="true" Text="@FilterLoc[nameof(StructuredFiltering.Filters)]" Items="@GetFilterMenuItems()" />
+                    </FluentCounterBadge>
+                </div>
             }
             <FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
             @if (ViewportInformation.IsDesktop)

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

@@ -343,6 +343,39 @@ private Task ClearTraces(ApplicationKey? key)
         return Task.CompletedTask;
     }
 
+    private List<MenuButtonItem> GetFilterMenuItems()
+    {
+        var filterMenuItems = new List<MenuButtonItem>();
+
+        foreach (var filter in TracesViewModel.Filters)
+        {
+            filterMenuItems.Add(new MenuButtonItem
+            {
+                OnClick = () => OpenFilterAsync(filter),
+                Text = filter.GetDisplayText(FilterLoc),
+                Class = "filter-menu-item",
+            });
+        }
+
+        filterMenuItems.Add(new MenuButtonItem
+        {
+            IsDivider = true
+        });
+
+        filterMenuItems.Add(new MenuButtonItem
+        {
+            Text = DialogsLoc[nameof(Dashboard.Resources.Dialogs.SettingsRemoveAllButtonText)],
+            Icon = new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size16.Delete(),
+            OnClick = () =>
+            {
+                TracesViewModel.ClearFilters();
+                return this.AfterViewModelChangedAsync(_contentLayout, waitToApplyMobileChange: false);
+            }
+        });
+
+        return filterMenuItems;
+    }
+
     public class TracesPageViewModel
     {
         public required SelectViewModel<ResourceTypeDetails> SelectedApplication { get; set; }

tests/Aspire.Dashboard.Components.Tests/Pages/StructuredLogsTests.cs

@@ -189,6 +189,7 @@ private void SetupStructureLogsServices()
         Services.AddSingleton<ShortcutManager>();
         Services.AddSingleton<LibraryConfiguration>();
         Services.AddSingleton<IKeyCodeService, KeyCodeService>();
+        Services.AddSingleton<GlobalState>();
     }
 
     private static string GetFluentFile(string filePath, Version version)

tests/Shared/AsyncTestHelpers.cs

@@ -182,7 +182,7 @@ public static async Task AssertIsTrueRetryAsync(Func<Task<bool>> assert, string
         {
             if (i > 0)
             {
-                await Task.Delay((i + 1) * (i + 1) * 10);
+                await Task.Delay((i + 1) * (i + 1) * 10 * 5);
             }
 
             if (await assert())