Update mobile and desktop toolbars #10407

adamint · 2025-07-15T03:09:11Z

Description

Adds duration text to the metrics page (fixes #10159), adds the clock back to desktop view, and improves mobile view for all pages.

Resources

Before/after (mobile)

Before/after (desktop)

Console logs

Before/after (mobile)

Before/after (desktop)

Structured logs

Before/after (mobile)

Before/after (desktop)

Traces

Before/after (mobile)

Before/after (desktop)

Trace details

Before/after (mobile)

(I think it's more useful on trace details to put this information directly on the page, but it's not important - happy to revert that change if you disagree)

Before/after (desktop)

Metrics

Before/after (mobile)

Before/after (desktop)

Checklist

Is this feature complete?
- Yes. Ready to ship.
- No. Follow-up changes expected.
Are you including unit tests for the changes and scenario tests if relevant?
- Yes
- No
Did you add public API?
- Yes
  - If yes, did you have an API Review for it?
    - Yes
    - No
  - Did you add <remarks /> and <code /> elements on your triple slash comments?
    - Yes
    - No
- No
Does the change make any security assumptions or guarantees?
- Yes
  - If yes, have you done a threat model and had a security review?
    - Yes
    - No
- No
Does the change require an update in our Aspire docs?
- Yes
  - Link to aspire-docs issue (consider using one of the following templates):
- No

Copilot

Pull Request Overview

This PR adds an accessible visible label for the duration selector in the Metrics page by generating a unique ID and linking a FluentInputLabel to the FluentSelect, improving a11y.

Generate a private readonly _selectDurationId in the code-behind.
Insert a FluentInputLabel with ForId and matching Id on the select.
Apply inline margin styling to space the label consistently.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs	Adds `_selectDurationId` field to hold a unique ID for the select
src/Aspire.Dashboard/Components/Pages/Metrics.razor	Adds `FluentInputLabel` linked via `ForId` and sets `Id` on `FluentSelect`; applies inline margin

Comments suppressed due to low confidence (1)

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

Add a component or unit test to verify that the label is correctly associated with the select via the generated Id and ForId, ensuring the accessibility improvement is covered by tests.

            <FluentInputLabel slot="end"

Copilot · 2025-07-15T03:09:42Z

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

+                              Label="@Loc[nameof(Dashboard.Resources.Metrics.MetricsSelectADuration)]"
+                              ForId="@_selectDurationId"
+                              Orientation="Orientation.Horizontal"
+                              style="margin-right: calc(var(--toolbar-item-gap) * 2)" />


[nitpick] Consider extracting the inline calc(var(--toolbar-item-gap) * 2) into a CSS class or CSS variable instead of using a magic number multiplier in the style attribute to improve maintainability.

JamesNK · 2025-07-15T03:31:22Z

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

+            <FluentInputLabel slot="end"
+                              Label="@Loc[nameof(Dashboard.Resources.Metrics.MetricsSelectADuration)]"
+                              ForId="@_selectDurationId"
+                              Orientation="Orientation.Horizontal"
+                              style="margin-right: calc(var(--toolbar-item-gap) * 2)" />


On the structured logs page a divider is used to space them out:

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

Lines 53 to 71 in 37d5759

@if (ViewportInformation.IsDesktop)

{

<div title="@Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsMinimumLogFilter)]" slot="end" style="display: flex;align-items: center;">

<span>@Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsLevels)]</span>

<FluentDivider Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />

<LogLevelSelect IncludeLabel="false"

@bind-LogLevel="@PageViewModel.SelectedLogLevel"

LogLevels="@_logLevels"

HandleSelectedLogLevelChangedAsync="@HandleSelectedLogLevelChangedAsync" />

</div>

}

else

{

<LogLevelSelect IncludeLabel="true"

@bind-LogLevel="@PageViewModel.SelectedLogLevel"

LogLevels="@_logLevels"

HandleSelectedLogLevelChangedAsync="@HandleSelectedLogLevelChangedAsync" />

}

I think we should do that to be consistent.

Also, how does this look when the page is small and the UI is in a dialog. Should it follow what structured logs page does?

Finally, I see the structured logs page has a simple span instead of a label. Could you update that page to use a label as well?

Made the metrics toolbar consistent and removed spans. I also went through the rest of the pages because some mobile views were outdated or inconsistent and cleaned them up.

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

JamesNK · 2025-07-23T06:57:44Z

(I think it's more useful on trace details to put this information directly on the page, but it's not important - happy to revert that change if you disagree)

I disagree for consistency. We don't put data on the mobile settings page anywhere else.

adamint · 2025-07-24T20:14:45Z

@JamesNK moved it back

JamesNK · 2025-07-25T01:01:21Z

Console logs menu doesn't update in mobile view:

JamesNK · 2025-07-25T01:06:09Z

Structured logs data doesn't updated when adding or removing filter from mobile view.

JamesNK · 2025-07-25T01:07:07Z

Same thing on traces page. Data doesn't immediately update after adding/removing a filter.

JamesNK · 2025-07-25T01:11:11Z

Trace detail: Check what happens when there is a copilot button visible. Same with structured logs (when there is an error). Is it displayed in appropriate places in desktop and mobile?

JamesNK · 2025-07-25T01:12:43Z

Don't display icon with duration on metrics page:

We don't have icons in both places like this, e.g. Level on logs

JamesNK · 2025-07-25T01:23:20Z

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


+@code {


Can you add a code behind file. C# is better supported in C# files.

JamesNK · 2025-07-25T01:23:26Z

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

+    </FluentStack>
+}
+
+@code {


Can you add a code behind file. C# is better supported in C# files.

JamesNK · 2025-07-25T01:23:56Z

src/Aspire.Dashboard/Components/Layout/DesktopToolbarDivider.razor

+    <FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
+}
+
+@code {


Can you add a code behind file. C# is better supported in C# files.

JamesNK · 2025-07-25T01:28:55Z

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

-                    <div class="trace-header-filters">
+                @if (ViewportInformation.IsDesktop)
+                {
+                    <div slot="" class="trace-header">


I'd rather this trace header also be visible on the page in mobile view. Even though it is displayed in the header, and we typically don't display header information, this summary of the trace is important don't.

Don't display it in the mobile filter popup

The overflow should prevent it from taking up a lot of room on small screens. It will be one like max.

JamesNK · 2025-07-25T01:29:42Z

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

+                    <ul>
+                        <li>@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailTraceStartHeader)] <strong
+                                title="@FormatHelpers.FormatDateTime(TimeProvider, _trace.FirstSpan.StartTime, MillisecondsDisplay.Full)">@FormatHelpers.FormatDateTime(TimeProvider, _trace.FirstSpan.StartTime, MillisecondsDisplay.Truncated)</strong>
+                        </li>
+                        <li>@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailDurationHeader)] <strong>@DurationFormatter.FormatDuration(trace.Duration)</strong>
+                        </li>
+                        <li>@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailResourcesHeader)] <strong>@_resourceCount</strong>
+                        </li>
+                        <li>@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailDepthHeader)] <strong>@_maxDepth</strong>
+                        </li>
+                        <li>@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailTotalSpansHeader)] <strong>@trace.Spans.Count</strong>
+                        </li>
+                    </ul>


add visible label to metrics select duration

dbd41cc

adamint requested review from JamesNK and Copilot July 15, 2025 03:09

github-actions bot added the area-dashboard label Jul 15, 2025

Copilot AI reviewed Jul 15, 2025

View reviewed changes

JamesNK reviewed Jul 15, 2025

View reviewed changes

davidfowl added this to the 9.4 milestone Jul 15, 2025

JamesNK modified the milestones: 9.4, 9.5 Jul 17, 2025

JamesNK reviewed Jul 18, 2025

View reviewed changes

src/Aspire.Dashboard/Components/Pages/Metrics.razor Outdated Show resolved Hide resolved

adamint added 2 commits July 22, 2025 15:45

Update mobile toolbars

3fa5e2e

rename ToolbarGlobalActions

5f981ee

adamint changed the title ~~add visible label to metrics select duration~~ Update mobile and desktop toolbars Jul 22, 2025

fix import

fcbb8b2

adamint requested a review from JamesNK July 22, 2025 20:15

Put mobile toolbar content back inside toolbar on trace detail

85f984d

JamesNK reviewed Jul 25, 2025

View reviewed changes

	@if (ViewportInformation.IsDesktop)
	{
	<div title="@Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsMinimumLogFilter)]" slot="end" style="display: flex;align-items: center;">
	<span>@Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsLevels)]</span>
	<FluentDivider Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />

	<LogLevelSelect IncludeLabel="false"
	@bind-LogLevel="@PageViewModel.SelectedLogLevel"
	LogLevels="@_logLevels"
	HandleSelectedLogLevelChangedAsync="@HandleSelectedLogLevelChangedAsync" />
	</div>
	}
	else
	{
	<LogLevelSelect IncludeLabel="true"
	@bind-LogLevel="@PageViewModel.SelectedLogLevel"
	LogLevels="@_logLevels"
	HandleSelectedLogLevelChangedAsync="@HandleSelectedLogLevelChangedAsync" />
	}


		@code {

Update mobile and desktop toolbars #10407

Are you sure you want to change the base?

Update mobile and desktop toolbars #10407

Uh oh!

Conversation

adamint commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Resources

Before/after (mobile)

Before/after (desktop)

Console logs

Before/after (mobile)

Before/after (desktop)

Structured logs

Before/after (mobile)

Before/after (desktop)

Traces

Before/after (mobile)

Before/after (desktop)

Trace details

Before/after (mobile)

Before/after (desktop)

Metrics

Before/after (mobile)

Before/after (desktop)

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

JamesNK Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamint Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JamesNK commented Jul 23, 2025

Uh oh!

adamint commented Jul 24, 2025

Uh oh!

JamesNK commented Jul 25, 2025

Uh oh!

JamesNK commented Jul 25, 2025

Uh oh!

JamesNK commented Jul 25, 2025

Uh oh!

JamesNK commented Jul 25, 2025

Uh oh!

JamesNK commented Jul 25, 2025

Uh oh!

JamesNK Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

JamesNK Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

JamesNK Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

JamesNK Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

JamesNK Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

JamesNK Jul 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adamint commented Jul 15, 2025 •

edited

Loading

JamesNK Jul 15, 2025 •

edited

Loading