Make all pages accessible to low vision on reflow

[adamint]

Fixes #3317
Fixes #3176
Fixes #3393

Does NOT address #3364 (which will be in a follow-up PR)

Based on the success criterion, we're allowed to present information without forcing horizontal scroll for users because an exception is provided for data tables, but

• it will be hard for us to comply with the requirement of individual cells not needing horizontal scroll, and
• it is preferred to use progressive disclosure for these users to hide nonessential information in the tables that they can find in detail views.

Resource view
In the resource view, we can hide all but resource type/name/status behind details

Structured logs
Same for structured logs, but this time resource/timestamp/message

Traces
Same for traces, but timestamp and resource name. For trace details, since users can click on the individual rows, we can hide the "View" button

Metrics
There isn't enough space to present both the metric select tree and main content together, so we can move the selector into filters

We are allowed to require horizontal scrolling for the filters table and chart, and it is unavoidable for these two elements.

Detail view
Because of a Safari bug, we make the copy button opacity 0 instead of collapsing it. We could limit this behavior to just Safari by parsing the user agent, but since this is a nonessential feature also available by double-clicking the cell, I removed the copy button on very low viewport widths to allow for more content to be displayed.

Microsoft Reviewers: Open in CodeFlow

[adamint]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[drewnoakes]

LGTM though I am less familiar with the metrics and structured logs UI code to comment on that part.

Tomorrow I'll pull the branch down and run it through some testing locally.

[adamint]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[drewnoakes]

Hey @adamint, I pulled this down and tried it out locally. It looks great!

Captured a few things as I played with it. Not sure how many of these you feel are worth including here vs. filing as issues for future. Some of them should be simple changes I assume. I'm writing in the imperative for clarity and capturing all my ideas, even the pedantry. There are a few important ones though. Let me know your thoughts.

---

(Update, already reported in #5197)

The details view in the resource grid gets snapped into place, and doesn't revert when the viewport is widened again. The UI fundamentally changes. I can imagine this being surprising if you narrowed the window momentarily, such as when snapping to regions of the monitor, or when dragging to resize.

---

(Update mostly moved to #5313)

A few comments on this UI:

1. Can we consolidate the heading area?
2. "View Filters" doesn't match with the desktop version, where the instruction is to select a resource. "Select Resource" might be a better string here. (moved to Responsive design UI changes #5313)
3. Would be nice to be able to click on the resource name in the header as an alternative way to select the resource. (moved to Responsive design UI changes #5313)

Something like:

---

For:

• Can we hide the "View Filters" button in this view? It is disabled anyway. (moved to Responsive design UI changes #5313)
  • If not, we should fix how the button hides for very small heights in the main view, but the button appears at all heights in the filter view (though I prefer we just hide it when filters are displayed).
• Can we make the "close" button bigger, so it's easier to see and press?

Eg:

(Same for filter UI under structured logs and metrics.)

---

Open combo boxes in the filter UI blend into the background and lose definition. Is there a slight drop shadow we can put on these to create that separation? Or can we use a different background colour?

---

(Update, this was fixed ✅)

Why does just this control have an icon rather than text? Looks a bit out of place:

---

(Update, this was fixed ✅)

In the "Metrics" view, it shows "Select instrument.":

However the filter UI uses the term "Metric":

These concepts should be consistent for the user.

(Update, this was fixed ✅)

Also, the text "Select instrument" when none is selected should be a link that opens the filter view. It sounds like a call to action, so should be interactive.

---

Clicking a metric/instrument for the first time doesn't work:

---

Clicking a metric/instrument twice deselects it, which is surprising.

---

These buttons should align before/after transition.

Also ideally the black region would have the same height before/after to reduce flicker.

---

(Update, moved to #5313)

The settings flyout looks inconsistent with the filtering panes on very small screens:

• The fact that it's a flyout rather than full-screen
• The presence of a floating "Close" button

[JamesNK]

What is the decision process for which columns to hide and show? IMO, the endpoints column is more useful than type on the resources page:

But I'd be interested in what other people think.

[drewnoakes]

Ran another round of manual testing and don't see any blocking issues. Good work here!

#5317 tracks creating issues from the discussion on this PR.

[drewnoakes]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[JamesNK]

Scroll position is lost after closing details view.

This feels like a pretty big usability issue. If someone wants to view details for multiple resources around the same time, having to re-scroll to find them would be annoying.

[JamesNK]

Metrics issues:

• This link doesn't have a pointer cursor on mouse over:
  

• Same issue with the link below. Should it have the same position as the previous message? It feels odd to have the two links presented in different ways:
  

• Changing the resource in the metrics filter view causes it to close. This is inconsistent with all the other filter views which stay open when a resource is selected.

• It feels weird that selecting an instrument or meter on the filter view doesn't immediately close the filter view and select the instrument/meter. Every time I come back to this filter view, it takes me a second of clicking the tree view multiple times to realise that I have to click the close button to see the selected item. I'd be curious what other people think here.

[JamesNK]

Horizontal scroll bar is back on the trace detail page. I thought I'd fixed this... was it lost in a merge as well?

[adamint]

Metrics issues:

• This link doesn't have a pointer cursor on mouse over:
  
• Same issue with the link below. Should it have the same position as the previous message? It feels odd to have the two links presented in different ways:
  
• Changing the resource in the metrics filter view causes it to close. This is inconsistent with all the other filter views which stay open when a resource is selected.
• It feels weird that selecting an instrument or meter on the filter view doesn't immediately close the filter view and select the instrument/meter. Every time I come back to this filter view, it takes me a second of clicking the tree view multiple times to realise that I have to click the close button to see the selected item. I'd be curious what other people think here.

Can these be filed as follow-up issues? They seem minor.

[adamint]

Horizontal scroll bar is back on the trace detail page. I thought I'd fixed this... was it lost in a merge as well?

I reverted one line of css added that broke selects in toolbar, it could be related.

[adamint]

annoying.

I’ll check when I have access to a computer later, but I would be inclined to believe that’s an issue in main now.

[JamesNK]

It is an existing issue. It was introduced when the full screen details view was added.

[drewnoakes]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[JamesNK]

#5356

#5355

#5353

[drewnoakes]

Seems like a legitimate build failure:

  Failed Aspire.Dashboard.Components.Tests.Pages.StructuredLogsTests.Render_TraceIdAndSpanId_FilterAdded [782 ms]
  Error Message:
   System.ArgumentNullException : Value cannot be null. (Parameter '_viewportInformation')
  Stack Trace:
     at Aspire.Dashboard.Components.Resize.DimensionManager.get_ViewportInformation() in /_/src/Aspire.Dashboard/Components/Resize/DimensionManager.cs:line 12
   at Aspire.Dashboard.Components.GridColumnManager.GetColumnWidth(GridColumn column) in /_/src/Aspire.Dashboard/Components/ResourcesGridColumns/GridColumnManager.cs:line 37
   at System.Linq.Enumerable.SelectArrayIterator`2.MoveNext()
   at System.Linq.Enumerable.WhereSelectEnumerableIterator`2.MoveNext()
   at System.String.Join(String separator, IEnumerable`1 values)
   at Aspire.Dashboard.Components.GridColumnManager.GetGridTemplateColumns() in /_/src/Aspire.Dashboard/Components/ResourcesGridColumns/GridColumnManager.cs:line 52
   at Aspire.Dashboard.Components.Pages.StructuredLogs.<BuildRenderTree>b__118_20(RenderTreeBuilder __builder3)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Aspire.Dashboard.Components.Controls.SummaryDetailsView`1.<BuildRenderTree>b__90_0(RenderTreeBuilder __builder2)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Microsoft.FluentUI.AspNetCore.Components.FluentSplitter.BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
--- End of stack trace from previous location ---
   at Bunit.Rendering.TestRenderer.AssertNoUnhandledExceptions() in /_/src/bunit.core/Rendering/TestRenderer.cs:line 629
   at Bunit.Rendering.TestRenderer.Render[TResult](RenderFragment renderFragment, Func`2 activator) in /_/src/bunit.core/Rendering/TestRenderer.cs:line 480
   at Bunit.Rendering.TestRenderer.RenderFragment(RenderFragment renderFragment) in /_/src/bunit.core/Rendering/TestRenderer.cs:line 101
   at Bunit.Extensions.TestContextBaseRenderExtensions.RenderInsideRenderTree(TestContextBase testContext, RenderFragment renderFragment) in /_/src/bunit.core/Extensions/TestContextBaseRenderExtensions.cs:line 43
   at Bunit.Extensions.TestContextBaseRenderExtensions.RenderInsideRenderTree[TComponent](TestContextBase testContext, RenderFragment renderFragment) in /_/src/bunit.core/Extensions/TestContextBaseRenderExtensions.cs:line 23
   at Bunit.TestContext.Render[TComponent](RenderFragment renderFragment) in /_/src/bunit.web/TestContext.cs:line 68
   at Bunit.TestContext.RenderComponent[TComponent](Action`1 parameterBuilder) in /_/src/bunit.web/TestContext.cs:line 54
   at Aspire.Dashboard.Components.Tests.Pages.StructuredLogsTests.Render_TraceIdAndSpanId_FilterAdded() in /_/tests/Aspire.Dashboard.Components.Tests/Pages/StructuredLogsTests.cs:line 43
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Void** arguments, Signature sig, Boolean isConstructor)
   at System.Reflection.MethodBaseInvoker.InvokeWithNoArgs(Object obj, BindingFlags invokeAttr)