dotnet
Make all pages accessible to low vision on reflow
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
![azure-pipelines[bot] avatar](https://avatars.githubusercontent.com/in/9426?v=4 "Published by a pub.dev verified publisher"){kind=small}
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 https://github.com/dotnet/aspire/issues/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:
- Can we consolidate the heading area?
- "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 #5313)
- 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 #5313)
Something like:
For:
- Can we hide the "View Filters" button in this view? It is disabled anyway. (moved to #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
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.
If a meter or instrument name is very long, the filter page gets a horizonal scroll bar:
The UI should trim long names and end with an ellipsis when there is no more space.
Tag filters appear on top of the graph when not in desktop view:
Edit: I've fixed this.
Also, the graph adds a horizontal scrollbar to the page when very narrow. I think the graph should resize to fit available space.
Edit: I think you've added some logic to change the graph size, but it's only applied when switching the view graph. If the view switches from desktop to mobile, the graph stays the previous size.
Edit: I've fixed this. Now dynamically resizes.
In table view, tag filters UI doesn't shrink horizontally to fit available space. It adds a scroll bar:
Also, the Filters title appears on the table view, and doesn't appear on the graph view. Maybe the title should be changed from Filters to Attributes. It's odd to have a Filters section on the page and a button that says View Filters.
Instrument title goes off the edge of the page and adds a horizontal scroll bar. Should be trimmed and end with ellipsis.
Same issue with the trace detail page header. Goes off the edge of the page and adds a scrollbar.
Resource, structured logs, traces and trace detail grids no longer show the pointer cursor when the mouse is over the row, and clicking on the row no longer allows you to view details/navigate.
Edit: This is the problem: https://github.com/dotnet/aspire/pull/5200#discussion_r1714730923. You've removed row clicking but I don't see any mention of it in the issue or explanation why.
I updated the graph to dynamically resize its width. I couldn't figure out how to make the height dynamically change, but a shorter height doesn't seem important.
I'm going to collate responses to all non-review comments in this comment, because there are so many images. (draft)
- 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.
Behavior is not related to this PR, and has an open issue #5197
Console logs
- Can we consolidate the heading area?
I prefer having two lines, as the page title is more important information than the current resource. We also have the vertical space available, aesthetically I prefer to use it. But not a strong preference if you would like it to be changed - however, should be raised in another issue if so (comment is not related to changes made in this PR)
- "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.
moving to #5313
- Would be nice to be able to click on the resource name in the header as an alternative way to select the resource.
This isn't a bad idea, but would require more than minor tweaks. #5313
- Can we hide the "View Filters" button in this view? It is disabled anyway.
It was intentionally placed in the toolbar view, disabled, to be a visual anchor for users. I'm not opposed to its removal, if you feel strongly comment in #5313 :smile:
- 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).
The button doesn't hide for very small heights in the main view, it just isn't fixed to the bottom. This is necessary for just the main view, as otherwise there is too little vertical space in the main content for users to successfully interact with the page.
- Can we make the "close" button bigger, so it's easier to see and press?
This comes from the default fluent dialog header template, I would suggest instead trying to get this size increase on fluentui-blazor for general usability. @vnbaaij have you considered increasing the size of the close icon? It seems relatively small compared to the rest of the header content height.
- 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?
This is an issue that instead needs to be opened on the ResourceSelect component, no action should be taken here. I believe this is a long-standing problem since it was added (I think we did some initial css customization of the combo box)?
- Why does just this control have an icon rather than text? Looks a bit out of place:
Came from the desktop toolbar. I've removed this.
- However the filter UI uses the term "Metric":
Changed to instrument.
- 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.
This is a good idea, changed.
- Clicking a metric/instrument for the first time doesn't work:
I cannot reproduce this, can you explain what exactly you did?
- These buttons should align before/after transition / Also ideally the black region would have the same height before/after to reduce flicker.
I could add to #5313 but I think this is low priority. We should also strive to use fluentui-blazor defaults where feasible, the more customization we add the more we have to support ourselves.
- Settings comments Out of scope in this PR. See #5313
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:
I only kept the bare minimum of data needed to show resource identifiers. All additional information can be obtained through the details view - there will be so little horizontal space that users won't be able to actually see much of the endpoints column.
It's incredibly hard to keep track of comments not tied to some sort of code when there are so many. Please, if possible, comment on a line of code
-
If a meter or instrument name is very long, the filter page gets a horizonal scroll bar. The UI should trim long names and end with an ellipsis when there is no more space.
-
In table view, tag filters UI doesn't shrink horizontally to fit available space. It adds a scroll bar:
-
Instrument title goes off the edge of the page and adds a horizontal scroll bar. Should be trimmed and end with ellipsis.
-
Same issue with the trace detail page header. Goes off the edge of the page and adds a scrollbar.
I'm leaving these open for now because I'm still not able to figure out css scrolling.
This comes from the default fluent dialog header template, I would suggest instead trying to get this size increase on fluentui-blazor for general usability. @vnbaaij have you considered increasing the size of the close icon? It seems relatively small compared to the rest of the header content height.
Filed as https://github.com/microsoft/fluentui-blazor/issues/2539.
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:
I only kept the bare minimum of data needed to show resource identifiers. All additional information can be obtained through the details view - there will be so little horizontal space that users won't be able to actually see much of the endpoints column.
I agree that we should show endpoints instead of "View". The latter is redundant and the former is more annoying to get to when going via the details view.
We need to go through the comments here and make sure everything we care about is filed as a separate issue, so nothing of value gets lost once this is merged. I filed https://github.com/dotnet/aspire/issues/5317 to track this.
- If a meter or instrument name is very long, the filter page gets a horizonal scroll bar. The UI should trim long names and end with an ellipsis when there is no more space.
- In table view, tag filters UI doesn't shrink horizontally to fit available space. It adds a scroll bar:
- Instrument title goes off the edge of the page and adds a horizontal scroll bar. Should be trimmed and end with ellipsis.
- Same issue with the trace detail page header. Goes off the edge of the page and adds a scrollbar.
I'm leaving these open for now because I'm still not able to figure out css scrolling.
I fixed them.
- If a meter or instrument name is very long, the filter page gets a horizonal scroll bar. The UI should trim long names and end with an ellipsis when there is no more space.
- In table view, tag filters UI doesn't shrink horizontally to fit available space. It adds a scroll bar:
- Instrument title goes off the edge of the page and adds a horizontal scroll bar. Should be trimmed and end with ellipsis.
- Same issue with the trace detail page header. Goes off the edge of the page and adds a scrollbar.
I'm leaving these open for now because I'm still not able to figure out css scrolling.
I fixed them.
Thank you James!
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:
I only kept the bare minimum of data needed to show resource identifiers. All additional information can be obtained through the details view - there will be so little horizontal space that users won't be able to actually see much of the endpoints column.
I agree that we should show endpoints instead of "View". The latter is redundant and the former is more annoying to get to when going via the details view.
This is not currently allowed. We must show View for now since fluentui-blazor does not currently trigger OnRowClick on keyboard enter. I submitted a bug on it.
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.
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.
Horizontal scroll bar is back on the trace detail page. I thought I'd fixed this... was it lost in a merge as well?
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.