Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 20, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1aa1536
Move filters into a menu, add a remove all filters button
adamint Mar 17, 2025
c577079
add maximum width to menu item
adamint Mar 19, 2025
0a3ab63
rename DisableIcon->HideIcon
adamint Mar 19, 2025
45c020d
make sure to update url after clear filters
adamint Mar 19, 2025
6055718
Add filters menu to traces page
adamint Mar 19, 2025
99d4b95
remove redundant attribute
adamint Mar 19, 2025
cb3a3dd
add necessary service to test
adamint Mar 19, 2025
834b140
Increase timeout for flaky test
adamint Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@
else
{
@Text
<FluentIcon Value="@_icon" Color="@IconColor" Slot="end" />

@if (!HideIcon)
{
<FluentIcon Value="@_icon" Color="@IconColor" Slot="end" />
}
}
</FluentButton>

Expand All @@ -36,10 +40,10 @@
{
var additionalMenuItemAttributes = new Dictionary<string, object>(item.AdditionalAttributes ?? ImmutableDictionary<string, object>.Empty)
{
{ "title", item.Tooltip ?? string.Empty }
{ "title", item.Tooltip ?? item.Text ?? string.Empty }
};

<FluentMenuItem Id="@item.Id" OnClick="() => HandleItemClicked(item)" Disabled="@item.IsDisabled" AdditionalAttributes="@additionalMenuItemAttributes">
<FluentMenuItem Id="@item.Id" Class="@item.Class" OnClick="() => HandleItemClicked(item)" Disabled="@item.IsDisabled" AdditionalAttributes="@additionalMenuItemAttributes">
@item.Text
@if (item.Icon != null)
{
Expand Down
3 changes: 3 additions & 0 deletions src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ public partial class AspireMenuButton : FluentComponentBase
[Parameter]
public string MenuButtonId { get; set; } = Identifier.NewId();

[Parameter]
public bool HideIcon { get; set; }

protected override void OnParametersSet()
{
_icon = Icon ?? s_defaultIcon;
Expand Down
16 changes: 6 additions & 10 deletions src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -68,22 +69,17 @@
HandleSelectedLogLevelChangedAsync="@HandleSelectedLogLevelChangedAsync" />
}
<FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
<FluentLabel slot="end">@FilterLoc[nameof(StructuredFiltering.Filters)]</FluentLabel>
@if (ViewModel.Filters.Count == 0)
{
<span slot="end">@FilterLoc[nameof(StructuredFiltering.NoFilters)]</span>
}
else
{
for (var i = 0; i < ViewModel.Filters.Count; i++)
{
var filter = ViewModel.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="@(ViewModel.Filters.Count)" Appearance="Appearance.Accent">
Copy link
Member Author

@adamint adamint Mar 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setting slot=end onto counter badge doesn't work, maybe a bug in the component? I can check

Copy link
Member Author

@adamint adamint Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, this is a bug in that component

Copy link
Member Author

@adamint adamint Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

microsoft/fluentui-blazor#3542

<AspireMenuButton HideIcon="true" Text="@FilterLoc[nameof(StructuredFiltering.Filters)]" Items="@GetFilterMenuItems()" />
</FluentCounterBadge>
</div>
}
<FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
@if (ViewportInformation.IsDesktop)
Expand Down
33 changes: 33 additions & 0 deletions src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,39 @@ private string GetRowClass(OtlpLogEntry entry)
}
}

private List<MenuButtonItem> GetFilterMenuItems()
{
var filterMenuItems = new List<MenuButtonItem>();

foreach (var filter in ViewModel.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 = () =>
{
ViewModel.ClearFilters();
return this.AfterViewModelChangedAsync(_contentLayout, waitToApplyMobileChange: false);
}
});

return filterMenuItems;
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (_applicationChanged)
Expand Down
15 changes: 5 additions & 10 deletions src/Aspire.Dashboard/Components/Pages/Traces.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
33 changes: 33 additions & 0 deletions src/Aspire.Dashboard/Components/Pages/Traces.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down
1 change: 1 addition & 0 deletions src/Aspire.Dashboard/Model/MenuButtonItem.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,6 @@ public class MenuButtonItem
public Func<Task>? OnClick { get; set; }
public bool IsDisabled { get; set; }
public string Id { get; set; } = Identifier.NewId();
public string? Class { get; set; }
public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
}
10 changes: 4 additions & 6 deletions src/Aspire.Dashboard/wwwroot/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -752,3 +746,7 @@ fluent-switch.table-switch::part(label) {
max-height: 400px;
overflow-y: auto;
}

.filter-menu-item::part(content) {
max-width: 300px;
}
1 change: 1 addition & 0 deletions tests/Aspire.Dashboard.Components.Tests/Pages/StructuredLogsTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion tests/Shared/AsyncTestHelpers.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Member

@JamesNK JamesNK Mar 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What caused this to timeout?

}

if (await assert())
Expand Down