forked from dotnet/aspire
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve summary details view / toolbars / navbar experience on deskto…
…p for low-vision users, as well as mobile users (dotnet#4245) * Temporarily add nuget.org feed * Refactor current layout into DesktopLayout component * wip prototype * add mobile nav menu * add rest of nav menu to mobile, increase reconnection modal size on mobile * Add common page layout, use it for Resources * Convert Console Logs toolbar * Use new layout for structured logs * fix scroll bars, place toolbar on mobile within footer * Rename page sections, make title section more generic, do trace detail page * use new layout for metrics page * Add context parameter to details views, make them full page height on mobile * wip custom browser resize logic * Get initial viewport parameters for render (do not use scoped js because it is ~20ms slower) * fix nested h1, increase mobile toolbar button size, add resize listener * clean up views * remove extra class * remove redundant code, clean up * remove redundant code, add a few comments * fix accidental logic bug * Increase mobile toolbar height, make entire page scrollable at very low resolution * Add translation, comment * move comment * remove redundant if * Move toolbar mobile button to top * remove padding bottom for page header on mobile * some requested changes * try to avoid closing dialog on mobile if a toolbar setting has been changed, remove extraneous css, add Filter to url * Persist filter into URL, as well as visible types for resources. * Remove unnecessary button on detail view, invoke listeners after filters opened * Move MobileLayout and DesktopLayout logic into MainLayout so that page is not re-initialized when layout is changed. Remove filter state added to individual pages. Add a view model to the log viewer so that logs appear quickly after switching layouts * Open aspire repo link in new tab on mobile navigation * Add divs around page content layout to fix scoped css not being applied * fix extra div not taking up total height * fix metric scrollbar, change debounced resize event to throttled * Fix scrollbar erroneously appearing on console logs * Consolidate two selects into one * Refactor mobile nav menu to its own component, rename desktop nav menu component to DesktopNavMenu, and show page as active in mobile nav menu if its url matches current uri * Show icon as active in mobile navigation menu for the current page * Close mobile filter/nav menus when changing to desktop layout * Use --accent-foreground-active for active page in mobile nav * Make detail view close button background transparent in mobile * hide duration progress circle on traces mobile * fix continuous scroll on traces/console logs/structured logs * add console log application to mobile toolbar * re-add mobile filter footer button * fix incorrect merge conflicts * Avoid invoking redundant SetStateAndNavigateAsync calls, cleanup * fix chart/table state being lost on layout change * fix toolbar with newline appearance on mobile * add file headers, fix merge * fix console logs not updating after layout change --------- Co-authored-by: Adam Ratzman <[email protected]>
- Loading branch information
Showing
87 changed files
with
2,285 additions
and
1,172 deletions.
There are no files selected for viewing
2 changes: 0 additions & 2 deletions
2
src/Aspire.Dashboard/Components/Controls/Chart/ChartContainer.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 7 additions & 3 deletions
10
src/Aspire.Dashboard/Components/Controls/Chart/ChartFilters.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,27 @@ | ||
| // 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 Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace Aspire.Dashboard.Components; | ||
|
|
||
| public partial class ChartFilters | ||
| { | ||
| private bool _showCount; | ||
| [Inject] | ||
| public required CurrentChartViewModel ChartViewModel { get; init; } | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| InstrumentViewModel.DataUpdateSubscriptions.Add(() => | ||
| { | ||
| _showCount = InstrumentViewModel.ShowCount; | ||
| ChartViewModel.ShowCounts = InstrumentViewModel.ShowCount; | ||
| return Task.CompletedTask; | ||
| }); | ||
| } | ||
|
|
||
| private void ShowCountChanged() | ||
| { | ||
| InstrumentViewModel.ShowCount = _showCount; | ||
| InstrumentViewModel.ShowCount = ChartViewModel.ShowCounts; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| @using Aspire.Dashboard.Components.Resize | ||
| @using Aspire.Dashboard.Resources | ||
| @inject IStringLocalizer<ControlsStrings> Loc | ||
|
|
||
| <div class="details-container"> | ||
| <header style="height: auto;"> | ||
| @if (DetailsTitle is not null) | ||
| { | ||
| <div class="details-header-title" title="@DetailsTitle">@DetailsTitle</div> | ||
| } | ||
| else if (DetailsTitleTemplate is not null) | ||
| { | ||
| <div class="details-header-title">@DetailsTitleTemplate</div> | ||
| } | ||
| <div class="header-actions"> | ||
| @if (ViewportInformation.IsDesktop) | ||
| { | ||
| <FluentButton Appearance="Appearance.Stealth" | ||
| IconEnd="@(Orientation == Orientation.Horizontal ? _splitHorizontalIcon : _splitVerticalIcon)" | ||
| OnClick="HandleToggleOrientation" | ||
| Title="@(Orientation == Orientation.Horizontal ? Loc[nameof(ControlsStrings.SummaryDetailsViewSplitHorizontal)] : Loc[nameof(ControlsStrings.SummaryDetailsViewSplitVertical)])" | ||
| aria-label="@(Orientation == Orientation.Horizontal ? Loc[nameof(ControlsStrings.SummaryDetailsViewSplitHorizontal)] : Loc[nameof(ControlsStrings.SummaryDetailsViewSplitVertical)])"/> | ||
| } | ||
|
|
||
| <FluentButton Appearance="Appearance.Stealth" BackgroundColor="@(ViewportInformation.IsDesktop ? null : "rgba(0, 0, 0, 0)")" IconEnd="@(new Icons.Regular.Size16.Dismiss())" | ||
| OnClick="HandleDismissAsync" Title="@Loc[nameof(ControlsStrings.SummaryDetailsViewCloseView)]" aria-label="@Loc[nameof(ControlsStrings.SummaryDetailsViewCloseView)]"/> | ||
| </div> | ||
| </header> | ||
| @Details | ||
| </div> | ||
|
|
||
| @code { | ||
| private readonly Icon _splitHorizontalIcon = new Icons.Regular.Size16.SplitHorizontal(); | ||
| private readonly Icon _splitVerticalIcon = new Icons.Regular.Size16.SplitVertical(); | ||
|
|
||
| [Parameter] | ||
| public string? DetailsTitle { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment? Details { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment? DetailsTitleTemplate { get; set; } | ||
|
|
||
| [Parameter] | ||
| public required Func<Task> HandleToggleOrientation { get; set; } | ||
|
|
||
| [Parameter] | ||
| public required Func<Task> HandleDismissAsync { get; set; } | ||
|
|
||
| [Parameter] | ||
| public required Orientation Orientation { get; set; } | ||
|
|
||
| [CascadingParameter] | ||
| public required ViewportInformation ViewportInformation { get; set; } | ||
| } |
30 changes: 30 additions & 0 deletions
30
src/Aspire.Dashboard/Components/Controls/LogLevelSelect.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| @using Aspire.Dashboard.Model.Otlp | ||
| @inject IStringLocalizer<Resources.StructuredLogs> Loc | ||
|
|
||
| <FluentSelect TOption="SelectViewModel<LogLevel?>" | ||
| Items="@LogLevels" | ||
| Position="SelectPosition.Below" | ||
| OptionText="@(c => c.Name)" | ||
| Label="@(IncludeLabel ? Loc[nameof(Resources.StructuredLogs.StructuredLogsLevels)].Value : null)" | ||
| @bind-SelectedOption="@LogLevel" | ||
| @bind-SelectedOption:after="@HandleSelectedLogLevelChangedInternalAsync" | ||
| Width="120px" | ||
| Style="min-width: auto;" | ||
| AriaLabel="@Loc[nameof(Resources.StructuredLogs.StructuredLogsSelectMinimumLogLevel)]"/> | ||
|
|
||
| @code { | ||
| [Parameter] | ||
| public bool IncludeLabel { get; set; } | ||
|
|
||
| [Parameter, EditorRequired] | ||
| public required List<SelectViewModel<LogLevel?>> LogLevels { get; set; } | ||
|
|
||
| [Parameter, EditorRequired] | ||
| public required SelectViewModel<LogLevel?> LogLevel { get; set; } | ||
|
|
||
| [Parameter] | ||
| public EventCallback<SelectViewModel<LogLevel?>> LogLevelChanged { get; set; } | ||
|
|
||
| [Parameter, EditorRequired] | ||
| public required Func<Task> HandleSelectedLogLevelChangedAsync { get; set; } | ||
| } |
16 changes: 16 additions & 0 deletions
16
src/Aspire.Dashboard/Components/Controls/LogLevelSelect.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // Licensed to the .NET Foundation under one or more agreements. | ||
| // The .NET Foundation licenses this file to you under the MIT license. | ||
|
|
||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace Aspire.Dashboard.Components.Controls; | ||
|
|
||
| public partial class LogLevelSelect : ComponentBase | ||
| { | ||
| private async Task HandleSelectedLogLevelChangedInternalAsync() | ||
| { | ||
| await LogLevelChanged.InvokeAsync(LogLevel); | ||
| await HandleSelectedLogLevelChangedAsync(); | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.