Add resource details panel

[JamesNK]

Fixes #1208
Fixes #1489
Fixes #1584

READY FOR REVIEW

Playing around adding a resource panel. The resource grid is trying to display too much information and a panel allows less used content to be accessed there and removed from the grid.

• Add details button to resources grid
• Remove environment variables button from resources grid
• Move logs button from resources grid to details panel
• Add high-level resource values to panel. These are from returned resource properties
  • There is the concept of "known properties". These are displayed by default and have a friendly name in UI (can still hover over text to get the actual key).
  • Unknown properties are hidden by default. These are properties that aren't generally useful to the end user, e.g. the resource UID
  • The hide/show button toggles showing unknown properties.
  • This pattern will work well for custom resource types. Custom properties can be viewed in the UI.
• Add resource endpoints/services to panel
• Refactor resources panel to use an accordion like span panel
• Remove various bits of detail from the resources grid
  • Container ID
  • Container ports
  • Container command/args
  • Process ID

Future work:

• Display the resource panel by clicking the row instead of a details button. Will do in a follow up PR.

Demo (updated 2024/9/1):

Note: The design is ready to review. Code is rough/unfinished in places. Will improve after design feedback.

Microsoft Reviewers: Open in CodeFlow

[JamesNK]

cc @leslierichardson95 @davidfowl

[drewnoakes]

Please hold off on merging this. The classes you're using in the front end will no longer exist once #1476 is merged. I have new code that will produce the name/values you're producing here too, in a way that's extensible for arbitrary resource types.

[adamint]

I really like the redesigned panel. We're duplicating some information (ie the name, which appears in the panel title, and the other simple columns in the resource grid). We may not want to do that unless you foresee that the panel could be opened somewhere else in the dashboard in the future other than the grid?

[leslierichardson95]

I like the resources panel! +1 on Adam's comment about there being duplicate info though. While there may be some use cases for having duplicate fields, I worry that that may result in taking up more real estate on screen than needed.

[JamesNK]

Now that the resource refactor has happened, I think the way this UI works could be changed a bit. Each resource has a raw list of properties. To properly handle custom resources with unknown properties, this UI should display a list of properties.

I think by default the UI:

• Displays known properties for known resource types (e.g. container ID for containers, source path for projects, etc) or all properties if the resource type is unknown
• Clicking show all then shows all properties

[drewnoakes]

If you want to give any of the properties custom treatment, we can model the required metadata for that in the ResourceType messages we send to the client.

[davidfowl]

What's this change waiting on?

[JamesNK]

I made large refactors yesterday. Me finishing that work. Then moving hardcoded UI text to resource files.

[JamesNK]

This is now ready for final review.

[JamesNK]

I made some changes to the unread errors component because I wanted to reuse it in the resource details component.

At least for now it isn't reused but I left the changes in because I think they're A Good Improvement.

[drewnoakes]

Just pulled this down to take it for a spin. It's the end of my day so I'll look more tomorrow.

Initial impression is that it's a bit tricky to parse the grouping between sections. For example:

Adding some indentation here might help:

Another idea is to add a background to the expander headers.

[davidfowl]

I like the background idea.

[kvenkatrajan]

The new details panel is looking great. Approved.

I have gone ahead and added another issue for tracking the visibility on the expanded headers in lieu of not further increasing the size and scope of this PR : #1612

@adamint please do an accessibility pass after merge and add another issue if additional work needs to be done there. Thanks!

[JamesNK]

The accordion originally had a lot more stuff to separate sections. Different background colors for headers, borders, etc. I turned it off because it didn't look good.

I've slightly increased the gap between each section (4px to 8px) to help highlight them:

[JamesNK]

From offline: Will merge after @drewnoakes takes a look at the code.

[drewnoakes]

Approving, but would like to see the ResourceProperty.DisplayName used rather than having hard-coded knowledge of different resource properties in the UI.

[drewnoakes]

We shouldn't need to hard-code known properties for each resource type here. The ResourceProperty message received via gRPC includes a display name field. The dashboard should avoid special knowledge about specific fields wherever possible.

It also means we don't have to keep this code up to date as properties are added/removed.

[JamesNK]

We shouldn't need to hard-code known properties for each resource type here.

We don't need to, but it improves the experience. They're a balance between making all data for a resource available, while still having a good default experience.

Known properties server three purposes:

1. By default, display a curated list of information that we think is important. For example, it's useful to know the state, while resource.uid is an internal value.
2. Controlling order of information. Ensures the most useful information is first.
3. Displaying a friendly text in the name column.

This is what it looks like without them:

Updating known properties is optional. Data is still available in the UI if not known. Updating UI to show new data is a normal part of app development.

[drewnoakes]

We should move the loc strings to the server side and remove this client-side reference data. All reference data that governs the UI should come from the back end so that we don't have to add explicit support for custom resources in the dashboard.

The UI can still preserve order, as the values are stored in an array rather than an associative collection.

[drewnoakes]

#1644

[davidfowl]

Running the dapr sample I noticed we didn't clean up executables. They still show the args and working directory.