Combined Resources View #987

tlmii · 2023-11-21T20:44:16Z

Resolves #892

This differs a bit from the screenshots that I showed in #892 (comment) for a few reasons that I'll try to address below as I detail the changes.

The GH diff viewer treated Index.razor -> Resources.razor as a rename rather than a delete and add, and that is somewhat helpful in seeing what actually changed from the old pages to the new single page.

Added a single page at / that shows all resources, regardless of type. Default ordering is by type ascending and then by name ascending.
Added a Type column in the first position. This is different from the screenshots where I added an icon-only column. Two reasons for this: First, visual scanning of the icons was hard. They're just not big enough and different enough. Second, there are some rendering issues with an icon-only column that would need to be sorted out. I'll file an issue separately for that.
Added a filter button to the toolbar that allows you to specify which of Projects/Containers/Executables (or all) are shown at a given time. Right now this is not remembered across page loads, but we could add that later if so desired (this PR is already big enough).
Combined Name + PID (projects/executables) and Name + Container ID (containers) in the name column. Container ID is shortened to first 8 characters, but has the copy button from the properties grid that will copy the full value. PID/CID are slightly greyed out to differentiate from the name
Combined Source Location (Projects), Executable Path + Arguments + Working Directory (Executables) and Container Image + Ports (Containers) into "Source" column (naming per suggestion in the issue). Exe path + arguments is combined to look like a full command line, working directory is on a second line. Arguments and Ports are slightly greyed out to separate them from the item before it on the same line. The two lines for executables both have tooltips so you can see the entire thing if the display gets truncated with ellipses. I think we can likely tweak this display going forward (especially executables) as people use it more, but this seemed like an inoffensive starting point.
Deleted the individual resource pages from the project and from the left menu, replacing them in the menu with one Resources entry with a new icon (@leslierichardson95 we are definitely going to need an overall icon review)
Changed DashboardViewModelService to have an "all resources" change tracker in addition to the individual type change trackers. The individual ones are still used on the logs pages. If we end up combining the logs pages (see Consider merging Project Logs and Container Logs pages #176) then we could potentially revisit that and streamline it to just the single change tracker.
The Environment Variables/Details View didn't change as part of this. All the existing data from the grids is still available (albeit combined w/ other data in some cases) in the new grid, so the details view still just shows the environment variables and their values

DamianEdwards · 2023-11-21T21:41:52Z

This looks fantastic @tlmii! Did you try having a separate "ID" column rather than appending it to the name? Just curious how that looks and feels for quickly scanning.

dbreshears · 2023-11-21T22:28:45Z

Looks great! Might be overlooking, but when results are filtered by Resource Type, is there an easy way to tell they are filtered?

mmitche · 2023-11-21T22:33:34Z

/azp where

azure-pipelines · 2023-11-21T22:33:40Z

Azure DevOps orgs getting events for this repository: dnceng

tlmii · 2023-11-21T22:37:43Z

This looks fantastic @tlmii! Did you try having a separate "ID" column rather than appending it to the name? Just curious how that looks and feels for quickly scanning.

@DamianEdwards I did, and it was fine. But the minimum width required for a column and the small amount of data in it for the PID or shortened container ID seemed a bit wasteful when other columns were ending up truncated very quickly. The scanning was definitely a bit better, though the PID/CID combined into one column still leaves some visual scanning issues. I can bring that back if you'd prefer, though.

DamianEdwards · 2023-11-21T23:04:14Z

@tlmii I wouldn't block on it now. I imagine we'll be making lots of changes to this view for a while yet 😄

DamianEdwards

Approving from a purely "product" point of view. I'll let others handle the code 😄
Can't wait to get this change in!

JamesNK · 2023-11-22T00:09:57Z

Why is "All" checked if "Project" is unchecked? It would be nice if the UI showed that half-checked box (a dash or square?) in "All". See https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

I don't think FluentUI supports it though. cc @vnbaaij

The source column is really large. It looks fine in this screenshot, but a lot of people will have small screens. They'll see a lot of truncated columns. I wonder if there is something we can do to truncate source paths in a more intelligent way so we can reduce the source column size.

Today the content is always trimmed at the end. We really want the opposite. For example, trimming c:\dev\aspire\whatever\project\Dashboard.csproj:

Before: c:\dev\aspire\whatever\project\Dash...
After: c:\..\whatever\project\Dashboard.csproj

This feels like a common problem. Is there a JS library for truncating paths?

Could be a future issue.

davidfowl · 2023-11-22T02:10:38Z

Maybe just get rid of "All".

mitchdenny · 2023-11-22T03:51:03Z

Definitely don't block on this but I kind of like the idea of a card view.

davidfowl

Merge it!

tlmii · 2023-11-22T06:56:32Z

Why is "All" checked if "Project" is unchecked? It would be nice if the UI showed that half-checked box (a dash or square?) in "All". See https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

I don't think FluentUI supports it though. cc @vnbaaij

Its not exposed in the blazor component, and its only awkwardly exposed in the underlying web component. But Fluent UI does actually support it. I figured out how to get it working:

The source column is really large. It looks fine in this screenshot, but a lot of people will have small screens. They'll see a lot of truncated columns. I wonder if there is something we can do to truncate source paths in a more intelligent way so we can reduce the source column size.

Today the content is always trimmed at the end. We really want the opposite. For example, trimming c:\dev\aspire\whatever\project\Dashboard.csproj:

Before: c:\dev\aspire\whatever\project\Dash...

After: c:\..\whatever\project\Dashboard.csproj

This feels like a common problem. Is there a JS library for truncating paths?

Could be a future issue.

Agree completely on this. I debated for a bit seeing if we could do something where we only showed what was different between the projects. E.g:

Before: c:\dev\aspire\whatever\project1\project1.csproj, c:\dev\aspire\whatever\project2\project2.csproj
After: project1\project1.csproj, project2\project2.csproj

But I figured it warranted some more investigation into the standard/common way of doing this (as well as what libraries are available) and that didn't fit well with this PR. I'll file another issue.

tlmii · 2023-11-22T07:00:00Z

Looks great! Might be overlooking, but when results are filtered by Resource Type, is there an easy way to tell they are filtered?

I changed it so the button is highlighted if anything is filtered out, e.g.:

And I added a title and an aria-label to the button that says whether it is filtered or not. This may not be enough long-term but I think its a good start.

smitpatel · 2023-11-23T10:14:44Z

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

-        <FluentNavLink Icon="@(new Icons.Regular.Size24.BinFull())" Href="/Containers">Containers</FluentNavLink>
-        <FluentNavLink Icon="@(new Icons.Regular.Size24.AppGeneric())" Href="/Executables">Executables</FluentNavLink>
+        <FluentNavLink Icon="@(new Icons.Regular.Size24.AppFolder())" Href="/" Match="NavLinkMatch.All">Resources</FluentNavLink>
+        @* <FluentNavLink Icon="@(new Icons.Regular.Size24.BinFull())" Href="/Containers">Containers</FluentNavLink>


smitpatel · 2023-11-23T10:17:50Z

src/Aspire.Hosting/Dashboard/DashboardViewModelService.cs

+    private async Task WriteProjectChange(ProjectViewModel projectViewModel, ObjectChangeType changeType = ObjectChangeType.Modified)
+    {
+        await _projectViewModelChangesChannel.Writer.WriteAsync(
+            new ResourceChanged<ProjectViewModel>(changeType, projectViewModel), _cancellationToken)


can create resourechanged only once and reuse.

The generic type is different (ResourceChanged<ProjectViewModel> vs ResourceChanged<ResourceViewModel>) so we can't do that. I guess maybe we could add an IResourceChanged and use generic variance to make it work? But that seemed outside the scope.

Combined Resources View

d391081

tlmii requested review from davidfowl, DamianEdwards, JamesNK, smitpatel, vnbaaij, leslierichardson95 and kvenkatrajan November 21, 2023 20:44

dotnet-issue-labeler bot added the area-dashboard label Nov 21, 2023

DamianEdwards approved these changes Nov 21, 2023

View reviewed changes

davidfowl approved these changes Nov 22, 2023

View reviewed changes

Bug fixes, code review changes

67817ea

vnbaaij approved these changes Nov 22, 2023

View reviewed changes

tlmii mentioned this pull request Nov 22, 2023

Standard method(s) of trimming file paths #999

Closed

Add a couple missing tooltips

4f9f5b4

tlmii enabled auto-merge (squash) November 22, 2023 19:20

tlmii merged commit ea05b9a into dotnet:main Nov 22, 2023
3 checks passed

tlmii deleted the dev/combined-resources-view branch November 22, 2023 20:21

smitpatel reviewed Nov 23, 2023

View reviewed changes

JamesNK mentioned this pull request Feb 25, 2024

Update dashboard docs for merged resource view dotnet/docs-aspire#420

Closed

tlmii mentioned this pull request Nov 25, 2023

Combine console logs pages #1034

Merged

JamesNK mentioned this pull request Nov 27, 2023

Use tri-state feature in FluentCheckbox #1042

Closed

kvenkatrajan mentioned this pull request Nov 27, 2023

Enhancement of Navigation Menu Consistency #1031

Open

josephaw1022 mentioned this pull request Dec 4, 2023

Redundancy in Menu Items for Project Replicas #1179

Closed

tlmii mentioned this pull request Dec 11, 2023

Add copy to clipboard option for project/executable source columns #1332

Merged

IEvangelist mentioned this pull request Dec 12, 2023

Update .NET Aspire dashboard docs. dotnet/docs-aspire#214

Closed

github-actions bot locked and limited conversation to collaborators Apr 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Combined Resources View #987

Combined Resources View #987

tlmii commented Nov 21, 2023 •

edited

Loading

DamianEdwards commented Nov 21, 2023

dbreshears commented Nov 21, 2023

mmitche commented Nov 21, 2023

azure-pipelines bot commented Nov 21, 2023

tlmii commented Nov 21, 2023

DamianEdwards commented Nov 21, 2023

DamianEdwards left a comment

JamesNK commented Nov 22, 2023 •

edited

Loading

davidfowl commented Nov 22, 2023

mitchdenny commented Nov 22, 2023

davidfowl left a comment

tlmii commented Nov 22, 2023 •

edited

Loading

tlmii commented Nov 22, 2023

smitpatel Nov 23, 2023

smitpatel Nov 23, 2023

tlmii Nov 25, 2023

Combined Resources View #987

Combined Resources View #987

Conversation

tlmii commented Nov 21, 2023 • edited Loading

DamianEdwards commented Nov 21, 2023

dbreshears commented Nov 21, 2023

mmitche commented Nov 21, 2023

azure-pipelines bot commented Nov 21, 2023

tlmii commented Nov 21, 2023

DamianEdwards commented Nov 21, 2023

DamianEdwards left a comment

Choose a reason for hiding this comment

JamesNK commented Nov 22, 2023 • edited Loading

davidfowl commented Nov 22, 2023

mitchdenny commented Nov 22, 2023

davidfowl left a comment

Choose a reason for hiding this comment

tlmii commented Nov 22, 2023 • edited Loading

tlmii commented Nov 22, 2023

smitpatel Nov 23, 2023

Choose a reason for hiding this comment

smitpatel Nov 23, 2023

Choose a reason for hiding this comment

tlmii Nov 25, 2023

Choose a reason for hiding this comment

tlmii commented Nov 21, 2023 •

edited

Loading

JamesNK commented Nov 22, 2023 •

edited

Loading

tlmii commented Nov 22, 2023 •

edited

Loading