From 1aa15368190e7fbe41894dc6b675b7150e54a2d9 Mon Sep 17 00:00:00 2001 From: "Ratzman, Adam Mortimer" Date: Mon, 17 Mar 2025 16:39:34 -0400 Subject: [PATCH 1/8] Move filters into a menu, add a remove all filters button --- .../Controls/AspireMenuButton.razor | 6 +++- .../Controls/AspireMenuButton.razor.cs | 3 ++ .../Components/Pages/StructuredLogs.razor | 16 ++++------ .../Components/Pages/StructuredLogs.razor.cs | 32 +++++++++++++++++++ src/Aspire.Dashboard/wwwroot/css/app.css | 6 ---- 5 files changed, 46 insertions(+), 17 deletions(-) diff --git a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor index 7c4881dda7a..5d91abeaaa0 100644 --- a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor +++ b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor @@ -21,7 +21,11 @@ else { @Text - + + @if (!DisableIcon) + { + + } } diff --git a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs index 3463d32d5a7..a1efc40d9e3 100644 --- a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs +++ b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs @@ -43,6 +43,9 @@ public partial class AspireMenuButton : FluentComponentBase [Parameter] public string MenuButtonId { get; set; } = Identifier.NewId(); + [Parameter] + public bool DisableIcon { get; set; } + protected override void OnParametersSet() { _icon = Icon ?? s_defaultIcon; diff --git a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor index 2c129c76319..92e7d967dcd 100644 --- a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor +++ b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor @@ -6,6 +6,7 @@ @using Aspire.Dashboard.Resources @using System.Globalization @using Aspire.Dashboard.Components.Controls.Grid +@using Aspire.Dashboard.Model @inject IJSRuntime JS @implements IDisposable @@ -68,22 +69,17 @@ HandleSelectedLogLevelChangedAsync="@HandleSelectedLogLevelChangedAsync" /> } - @FilterLoc[nameof(StructuredFiltering.Filters)] @if (ViewModel.Filters.Count == 0) { @FilterLoc[nameof(StructuredFiltering.NoFilters)] } else { - for (var i = 0; i < ViewModel.Filters.Count; i++) - { - var filter = ViewModel.Filters[i]; - if (i != 0) - { - - } - @filter.GetDisplayText(FilterLoc) - } +
+ + + +
} @if (ViewportInformation.IsDesktop) diff --git a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs index 6a914209112..727887ca3aa 100644 --- a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs +++ b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs @@ -349,6 +349,38 @@ private string GetRowClass(OtlpLogEntry entry) } } + private List GetFilterMenuItems() + { + var filterMenuItems = new List(); + + foreach (var filter in ViewModel.Filters) + { + filterMenuItems.Add(new MenuButtonItem + { + OnClick = () => OpenFilterAsync(filter), + Text = filter.GetDisplayText(FilterLoc) + }); + } + + 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 = () => + { + ViewModel.ClearFilters(); + return InvokeAsync(StateHasChanged); + } + }); + + return filterMenuItems; + } + protected override async Task OnAfterRenderAsync(bool firstRender) { if (_applicationChanged) diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css index 500db7a7ed4..f59fe73d298 100644 --- a/src/Aspire.Dashboard/wwwroot/css/app.css +++ b/src/Aspire.Dashboard/wwwroot/css/app.css @@ -535,12 +535,6 @@ fluent-switch.table-switch::part(label) { padding: calc(((var(--design-unit) * 0.5) - var(--stroke-width)) * 1px) calc((var(--design-unit) - var(--stroke-width)) * 1px); } -.telemetry-filter-button::part(content) { - max-width: 350px; - overflow: hidden; - text-overflow: ellipsis -} - .mobile-toolbar { width: 100%; height: max(5vh, 30px); From c5770798c278c386e1e0b74147224d8a5145e1a7 Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 19 Mar 2025 11:23:39 -0400 Subject: [PATCH 2/8] add maximum width to menu item --- .../Components/Controls/AspireMenuButton.razor | 6 +++--- .../Components/Pages/StructuredLogs.razor.cs | 3 ++- src/Aspire.Dashboard/Model/MenuButtonItem.cs | 1 + src/Aspire.Dashboard/wwwroot/css/app.css | 4 ++++ 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor index 5d91abeaaa0..9143f0d2bfc 100644 --- a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor +++ b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor @@ -29,7 +29,7 @@ } - + @foreach (var item in Items) { @if (item.IsDivider) @@ -40,10 +40,10 @@ { var additionalMenuItemAttributes = new Dictionary(item.AdditionalAttributes ?? ImmutableDictionary.Empty) { - { "title", item.Tooltip ?? string.Empty } + { "title", item.Tooltip ?? item.Text ?? string.Empty } }; - + @item.Text @if (item.Icon != null) { diff --git a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs index 727887ca3aa..2427ad9500f 100644 --- a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs +++ b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs @@ -358,7 +358,8 @@ private List GetFilterMenuItems() filterMenuItems.Add(new MenuButtonItem { OnClick = () => OpenFilterAsync(filter), - Text = filter.GetDisplayText(FilterLoc) + Text = filter.GetDisplayText(FilterLoc), + Class = "filter-menu-item", }); } diff --git a/src/Aspire.Dashboard/Model/MenuButtonItem.cs b/src/Aspire.Dashboard/Model/MenuButtonItem.cs index 174e836636b..57b254733af 100644 --- a/src/Aspire.Dashboard/Model/MenuButtonItem.cs +++ b/src/Aspire.Dashboard/Model/MenuButtonItem.cs @@ -14,5 +14,6 @@ public class MenuButtonItem public Func? OnClick { get; set; } public bool IsDisabled { get; set; } public string Id { get; set; } = Identifier.NewId(); + public string? Class { get; set; } public IReadOnlyDictionary? AdditionalAttributes { get; set; } } diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css index f59fe73d298..35bcf66b4a8 100644 --- a/src/Aspire.Dashboard/wwwroot/css/app.css +++ b/src/Aspire.Dashboard/wwwroot/css/app.css @@ -746,3 +746,7 @@ fluent-switch.table-switch::part(label) { max-height: 400px; overflow-y: auto; } + +.filter-menu-item::part(content) { + max-width: 300px; +} From 0a3ab63aec0c7ad37b2ab678f3aa7ccd1baf7e0a Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 19 Mar 2025 11:39:23 -0400 Subject: [PATCH 3/8] rename DisableIcon->HideIcon --- src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor | 2 +- .../Components/Controls/AspireMenuButton.razor.cs | 2 +- src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor index 9143f0d2bfc..749c8eb6639 100644 --- a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor +++ b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor @@ -22,7 +22,7 @@ { @Text - @if (!DisableIcon) + @if (!HideIcon) { } diff --git a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs index a1efc40d9e3..54c063c8467 100644 --- a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs +++ b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs @@ -44,7 +44,7 @@ public partial class AspireMenuButton : FluentComponentBase public string MenuButtonId { get; set; } = Identifier.NewId(); [Parameter] - public bool DisableIcon { get; set; } + public bool HideIcon { get; set; } protected override void OnParametersSet() { diff --git a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor index 92e7d967dcd..83709331680 100644 --- a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor +++ b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor @@ -77,7 +77,7 @@ {
- +
} From 45c020dd2dd240d1a858886234755263dd14bc59 Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 19 Mar 2025 11:46:38 -0400 Subject: [PATCH 4/8] make sure to update url after clear filters --- src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs index 2427ad9500f..aca17fd1365 100644 --- a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs +++ b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs @@ -375,7 +375,7 @@ private List GetFilterMenuItems() OnClick = () => { ViewModel.ClearFilters(); - return InvokeAsync(StateHasChanged); + return this.AfterViewModelChangedAsync(_contentLayout, waitToApplyMobileChange: false); } }); From 60557187be9c106ade681024f8612e28d493660d Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 19 Mar 2025 11:52:34 -0400 Subject: [PATCH 5/8] Add filters menu to traces page --- .../Components/Pages/Traces.razor | 15 +++------ .../Components/Pages/Traces.razor.cs | 33 +++++++++++++++++++ 2 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/Aspire.Dashboard/Components/Pages/Traces.razor b/src/Aspire.Dashboard/Components/Pages/Traces.razor index 2c76c270189..7984a0c462d 100644 --- a/src/Aspire.Dashboard/Components/Pages/Traces.razor +++ b/src/Aspire.Dashboard/Components/Pages/Traces.razor @@ -47,22 +47,17 @@ title="@Loc[nameof(Dashboard.Resources.Traces.TracesNameFilter)]" slot="end" /> - @FilterLoc[nameof(StructuredFiltering.Filters)] @if (TracesViewModel.Filters.Count == 0) { @FilterLoc[nameof(StructuredFiltering.NoFilters)] } else { - for (var i = 0; i < TracesViewModel.Filters.Count; i++) - { - var filter = TracesViewModel.Filters[i]; - if (i != 0) - { - - } - @filter.GetDisplayText(FilterLoc) - } +
+ + + +
} @if (ViewportInformation.IsDesktop) diff --git a/src/Aspire.Dashboard/Components/Pages/Traces.razor.cs b/src/Aspire.Dashboard/Components/Pages/Traces.razor.cs index 9619c8a9faf..d7ab137de73 100644 --- a/src/Aspire.Dashboard/Components/Pages/Traces.razor.cs +++ b/src/Aspire.Dashboard/Components/Pages/Traces.razor.cs @@ -343,6 +343,39 @@ private Task ClearTraces(ApplicationKey? key) return Task.CompletedTask; } + private List GetFilterMenuItems() + { + var filterMenuItems = new List(); + + 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 SelectedApplication { get; set; } From 99d4b955eed1fcce37bce27d9528b13f94d755e1 Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 19 Mar 2025 12:08:01 -0400 Subject: [PATCH 6/8] remove redundant attribute --- src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor index 749c8eb6639..b60f7831436 100644 --- a/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor +++ b/src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor @@ -29,7 +29,7 @@ } - + @foreach (var item in Items) { @if (item.IsDivider) From cb3a3dd52869f843bce5bcf454d541e422a00f3e Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 19 Mar 2025 12:11:20 -0400 Subject: [PATCH 7/8] add necessary service to test --- .../Pages/StructuredLogsTests.cs | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/Aspire.Dashboard.Components.Tests/Pages/StructuredLogsTests.cs b/tests/Aspire.Dashboard.Components.Tests/Pages/StructuredLogsTests.cs index 99777f0bf64..d273a4e8e03 100644 --- a/tests/Aspire.Dashboard.Components.Tests/Pages/StructuredLogsTests.cs +++ b/tests/Aspire.Dashboard.Components.Tests/Pages/StructuredLogsTests.cs @@ -189,6 +189,7 @@ private void SetupStructureLogsServices() Services.AddSingleton(); Services.AddSingleton(); Services.AddSingleton(); + Services.AddSingleton(); } private static string GetFluentFile(string filePath, Version version) From 834b1407d527f04bfefd1c817f453c8d3b4d18bc Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 19 Mar 2025 12:12:53 -0400 Subject: [PATCH 8/8] Increase timeout for flaky test --- tests/Shared/AsyncTestHelpers.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Shared/AsyncTestHelpers.cs b/tests/Shared/AsyncTestHelpers.cs index 785a9efdc22..62640fc0048 100644 --- a/tests/Shared/AsyncTestHelpers.cs +++ b/tests/Shared/AsyncTestHelpers.cs @@ -182,7 +182,7 @@ public static async Task AssertIsTrueRetryAsync(Func> 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())