Show exception details in text visualizer dialog

[drewnoakes]

Description

Fixes #6130

Exception details are shown behind a button in two places:

1. In the "Message" column of the structured logs table, when an exception exists.
2. In the "Health reports" grid in resource details, when a health report includes exception details.

Previously, the stack trace would be shown in a popup when the mouse hovered over the icon, sort of like a tooltip.

This commit changes the behaviour so that exception details are shown in the existing text visualizer dialog whenever the icon is clicked.

The icon becomes a FluentButton for consistency with the menu button to the right of the cell.

Also some optimisations in GridValue:

• Don't use FluentHighlighter when the text to highlight is empty, which will be the common case.
• Remove MaxDisplayLength. We never set this property, and it used space on every GridValue instance, and we create a lot of these objects.
• Remove some redundant DOM elements
• Support adding arbitrary buttons to the right-hand side of the area (used for the "exception details" button)

---

Here's how it looks for health checks:

Here's how it looks on mouse-over, along with a tooltip. The button appears too close to the text here, but that's consistent with other inline lightweight buttons. It only shows on mouse over. If we add more margin, it looks bad when the mouse isn't hovering over it.

Clicking the button opens the text visualizer we use throughout the dashboard:

Here's how it looks in structured logs:

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:
  • No

Microsoft Reviewers: Open in CodeFlow

[davidfowl]

Yes please!

[davidfowl]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[davidfowl]

I would love this in 9

[drewnoakes]

@JamesNK @davidfowl @DamianEdwards I moved the icon to the right side, so it sits with the masking button and the "..." dropdown button. See updated screenshots in PR description.

[JamesNK]

I like it.

One extra suggestion is to add an action to the menu here:

If there is an exception message then add a menu item with <icon> Exception details and launches the same visualizer. The Log message menu item already does the same thing.

If it is difficult then create a follow up issue. Stick with this for now and add the menu item in 9.1.

[drewnoakes]

Adding a menu item makes sense, though it might reasonably be expected in the GridValue's own drop-down menu. That'd make it work in the Health Checks area too. Any thoughts?

I was tempted to pull out an abstraction for these buttons and menu items, to take a more data-driven approach. I would rather do that in 9.1, to keep the scale of the change down.

[JamesNK]

I found a regression:

• Previously the content in the grid cell would use the full width. Content would shrink when needed to make room for the ... button
• Now the content is always strunk to make room for the ... button.

Before:

After:

[JamesNK]

Adding a menu item makes sense, though it might reasonably be expected in the GridValue's own drop-down menu. That'd make it work in the Health Checks area too. Any thoughts?

We'd need to add a way to add items to the grid value menu. It's doable, and I like the consistency, but not as high value. Structured logs will get a lot of use.

Could do it properly in 9.1.

[drewnoakes]

Previously the content in the grid cell would use the full width. Content would shrink when needed to make room for the ... button. Now the content is always strunk to make room for the ... button.

Fixed in 340124a.

[drewnoakes]

@JamesNK what do you think of this:

The filled icon looks a bit strange, but there's no regular version of that icon as far as I can tell.

[JamesNK]

• I prefer the text as Exception details. That's consistent with Log message. I don't know why I like this system, but not having View details or consistently having View xxx for all items felt worse.

• Move Log details above Exception details. That way there is consistent order of items:

  • View details
  • Log message
  • Exception details (optional)

The filled icon looks a bit strange, but there's no regular version of that icon as far as I can tell.

I see one in the FluentUI explorer:

[drewnoakes]

I'll do the menu item in a follow-up PR for 9.1.

[drewnoakes]

/backport to release/9.0

[github-actions]

Started backporting to release/9.0: https://github.com/dotnet/aspire/actions/runs/11454378085