Skip to content

Show exception details in text visualizer dialog #6230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 22, 2024
Merged

Show exception details in text visualizer dialog #6230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 19 additions & 36 deletions src/Aspire.Dashboard/Components/Controls/ExceptionDetails.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,35 @@
@namespace Aspire.Dashboard.Components

@using Aspire.Dashboard.Extensions
@using Aspire.Dashboard.Components.Dialogs
@using Aspire.Dashboard.Otlp.Model
@using Aspire.Dashboard.Resources

@inject IStringLocalizer<ControlsStrings> Loc

@{
var iconId = Guid.NewGuid().ToString();
@*
* We don't want a browser tooltip to display when hovering over the error icon.
* Use alt instead of title for screen readers. Also, the column has a title set
* so add a whitespace title to prevent a browser tooltip from displaying.
*@
var title = " ";
}

@if (!string.IsNullOrWhiteSpace(ExceptionText))
{
<FluentIcon alt="@Loc[nameof(ControlsStrings.ExceptionDetailsTitle)]"
title="@title"
Style="flex-shrink: 0"
Id="@iconId"
Icon="Icons.Filled.Size16.DocumentError"
Color="Color.Accent"
Class="severity-icon" />

<FluentTooltip Anchor="@iconId" MaxWidth="650px">
<div style="padding: 10px">
<h4>@Loc[nameof(ControlsStrings.ExceptionDetailsTitle)]</h4>

<pre style="white-space: pre-wrap; overflow-wrap: break-word; max-height: 300px; overflow: auto;">@ExceptionText</pre>

<div style="float: right; margin-bottom: 10px;">
<FluentButton Id="@Guid.NewGuid().ToString()"
Appearance="Appearance.Lightweight"
AdditionalAttributes="@FluentUIExtensions.GetClipboardCopyAdditionalAttributes(ExceptionText, Loc[nameof(ControlsStrings.GridValueCopyToClipboard)].ToString(), Loc[nameof(ControlsStrings.GridValueCopied)].ToString())">
@Loc[nameof(ControlsStrings.GridValueCopyToClipboard)]

<FluentIcon Class="copy-icon align-text-bottom" Style="display:inline;" Icon="Icons.Regular.Size16.Copy" />
<FluentIcon Class="checkmark-icon align-text-bottom" Style="display:none;" Icon="Icons.Regular.Size16.Checkmark" />
</FluentButton>
</div>
</div>
</FluentTooltip>
<FluentButton Appearance="Appearance.Lightweight"
OnClick="OnExceptionDetailsClicked"
Title="@Loc[nameof(ControlsStrings.ExceptionDetailsTitle)]"
Class="exception-details-button">
<FluentIcon Icon="Icons.Filled.Size16.DocumentError"
Color="Color.Accent" />
</FluentButton>
}

@code {
[Parameter, EditorRequired]
public required string ExceptionText { get; set; }

[CascadingParameter]
public required ViewportInformation ViewportInformation { get; init; }

[Inject]
public required IDialogService DialogService { get; init; }

private void OnExceptionDetailsClicked(MouseEventArgs e)
{
_ = TextVisualizerDialog.OpenDialogAsync(ViewportInformation, DialogService, Loc[nameof(ControlsStrings.ExceptionDetailsTitle)], ExceptionText);
}
}
96 changes: 52 additions & 44 deletions src/Aspire.Dashboard/Components/Controls/GridValue.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,27 @@
@inject IStringLocalizer<Dialogs> DialogsLoc

<div class="@GetContainerClass()" style="width: inherit;">

@* Value area *@

@if (EnableMasking && IsMasked)
{
<span class="cellText">
<span class="grid-value masked">
&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;
</span>
}
else if (EnableHighlighting)
{
<span class="cellText" title="@(ToolTip ?? Value)">
@ContentBeforeValue
<FluentHighlighter HighlightedText="@HighlightText" Text="@Value" />
@ContentAfterValue
</span>
}
else
{
<span class="cellText" title="@(ToolTip ?? Value)">
<span class="grid-value" title="@(ToolTip ?? Value)">
@ContentBeforeValue
@(MaxDisplayLength.HasValue ? TrimLength(Value) : Value)
@if (EnableHighlighting && !string.IsNullOrEmpty(HighlightText))
{
<FluentHighlighter HighlightedText="@HighlightText" Text="@Value" />
}
else
{
@Value
}
@ContentAfterValue
</span>
}
Expand All @@ -35,46 +37,52 @@
];
}

<div @onclick:stopPropagation="true" class="defaultHidden">
<FluentButton Appearance="Appearance.Lightweight"
Id="@_menuAnchorId"
Class="defaultHidden"
Style="float: right; flex-shrink: 0"
OnClick="@ToggleMenuOpen">
<FluentIcon Style="display:inline;" Icon="Icons.Regular.Size16.MoreHorizontal" />
</FluentButton>
@* Button area *@

<FluentMenu Anchor="@_menuAnchorId" @bind-Open="_isMenuOpen" VerticalThreshold="170" HorizontalPosition="HorizontalPosition.End">
<FluentMenuItem
Id="@_copyId"
AdditionalAttributes="@FluentUIExtensions.GetClipboardCopyAdditionalAttributes(ValueToCopy ?? Value, PreCopyToolTip, PostCopyToolTip, uncapturedCopyAttributes)">
<span slot="start">
<FluentIcon Class="copy-icon" Style="display:inline; vertical-align: text-bottom" Icon="Icons.Regular.Size16.Copy" Slot="start" />
<FluentIcon Class="checkmark-icon" Style="display:none; vertical-align: text-bottom" Icon="Icons.Regular.Size16.Checkmark" Slot="start" />
</span>
@PreCopyToolTip
</FluentMenuItem>
<div @onclick:stopPropagation="true">

<FluentMenuItem
Disabled="@(ValueToVisualize is null && Value is null)"
AdditionalAttributes="@FluentUIExtensions.GetOpenTextVisualizerAdditionalAttributes(ValueToVisualize ?? Value!, !string.IsNullOrEmpty(TextVisualizerTitle) ? TextVisualizerTitle : ValueDescription)">
<span slot="start">
<FluentIcon Style="display:inline; vertical-align: text-bottom" Icon="Icons.Regular.Size16.Open" Slot="start"/>
</span>
<span class="defaultHidden">
<FluentButton Appearance="Appearance.Lightweight"
Id="@_menuAnchorId"
OnClick="@ToggleMenuOpen">
<FluentIcon Icon="Icons.Regular.Size16.MoreHorizontal" />
</FluentButton>

@DialogsLoc[nameof(Dialogs.OpenInTextVisualizer)]
</FluentMenuItem>
</FluentMenu>
</div>
<FluentMenu Anchor="@_menuAnchorId" @bind-Open="_isMenuOpen" VerticalThreshold="170" HorizontalPosition="HorizontalPosition.End">
<FluentMenuItem
Id="@_copyId"
AdditionalAttributes="@FluentUIExtensions.GetClipboardCopyAdditionalAttributes(ValueToCopy ?? Value, PreCopyToolTip, PostCopyToolTip, uncapturedCopyAttributes)">
<span slot="start">
<FluentIcon Style="vertical-align: text-bottom" Icon="Icons.Regular.Size16.Copy" />
</span>
@PreCopyToolTip
</FluentMenuItem>

@if (EnableMasking)
{
<div @onclick:stopPropagation="true">
<FluentMenuItem
Disabled="@(ValueToVisualize is null && Value is null)"
AdditionalAttributes="@FluentUIExtensions.GetOpenTextVisualizerAdditionalAttributes(ValueToVisualize ?? Value!, !string.IsNullOrEmpty(TextVisualizerTitle) ? TextVisualizerTitle : ValueDescription)">
<span slot="start">
<FluentIcon Style="vertical-align: text-bottom" Icon="Icons.Regular.Size16.Open" />
</span>

@DialogsLoc[nameof(Dialogs.OpenInTextVisualizer)]
</FluentMenuItem>
</FluentMenu>
</span>

@if (ContentInButtonArea is not null)
{
@ContentInButtonArea
}

@if (EnableMasking)
{
<FluentButton Appearance="Appearance.Lightweight"
IconEnd="@(IsMasked ? _unmaskIcon : _maskIcon)"
Title="@(IsMasked ? Loc[nameof(ControlsStrings.GridValueMaskShowValue)] : Loc[nameof(ControlsStrings.GridValueMaskHideValue)])"
OnClick="ToggleMaskStateAsync"
aria-label="@(IsMasked ? Loc[nameof(ControlsStrings.GridValueMaskShowValue)] : Loc[nameof(ControlsStrings.GridValueMaskHideValue)])" />
</div>
}
}

</div>
</div>
19 changes: 6 additions & 13 deletions src/Aspire.Dashboard/Components/Controls/GridValue.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ public partial class GridValue
[Parameter]
public RenderFragment? ContentAfterValue { get; set; }

/// <summary>
/// Content to include, if any, in button area to right. Intended for adding extra buttons.
/// </summary>
[Parameter]
public RenderFragment? ContentInButtonArea { get; set; }

/// <summary>
/// If set, copies this value instead of <see cref="Value"/>.
/// </summary>
Expand Down Expand Up @@ -66,9 +72,6 @@ public partial class GridValue
[Parameter]
public EventCallback<bool> IsMaskedChanged { get; set; }

[Parameter]
public int? MaxDisplayLength { get; set; }

[Parameter]
public string? ToolTip { get; set; }

Expand Down Expand Up @@ -99,16 +102,6 @@ private async Task ToggleMaskStateAsync()
await IsMaskedChanged.InvokeAsync(IsMasked);
}

private string TrimLength(string? text)
{
if (text is not null && MaxDisplayLength is int maxLength && text.Length > maxLength)
{
return text[..maxLength];
}

return text ?? "";
}

private void ToggleMenuOpen()
{
_isMenuOpen = !_isMenuOpen;
Expand Down
5 changes: 3 additions & 2 deletions src/Aspire.Dashboard/Components/Controls/GridValue.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
grid-template-columns: 1fr auto auto;
}

::deep .cellText {
::deep .grid-value {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
Expand All @@ -19,9 +19,10 @@
opacity: 0;
cursor: pointer;
width: 0;
display: inline-block;
}

::deep:hover .defaultHidden, ::deep:focus-within .defaultHidden {
::deep:hover .defaultHidden, ::deep:focus-within .defaultHidden {
opacity: 1; /* safari has a bug where hover is not always called on an invisible element, so we use opacity instead */
width: auto;
}
4 changes: 2 additions & 2 deletions src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,9 +166,9 @@
EnableHighlighting="@(!string.IsNullOrEmpty(_filter))"
HighlightText="@_filter"
TextVisualizerTitle="@context.Name">
<ContentBeforeValue>
<ContentInButtonArea>
<ExceptionDetails ExceptionText="@context.ExceptionText" />
</ContentBeforeValue>
</ContentInButtonArea>
</GridValue>
</AspireTemplateColumn>
</FluentDataGrid>
Expand Down
4 changes: 2 additions & 2 deletions src/Aspire.Dashboard/Components/ResourcesGridColumns/LogMessageColumnDisplay.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
ValueDescription="@Loc[nameof(StructuredLogs.StructuredLogsMessageColumnHeader)]"
EnableHighlighting="true"
HighlightText="@FilterText">
<ContentBeforeValue>
<ContentInButtonArea>
<ExceptionDetails ExceptionText="@_exceptionText" />
</ContentBeforeValue>
</ContentInButtonArea>
</GridValue>

@code {
Expand Down
13 changes: 9 additions & 4 deletions src/Aspire.Dashboard/wwwroot/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,15 +133,18 @@ window.copyTextToClipboard = function (id, text, precopy, postcopy) {

const copyIcon = button.querySelector('.copy-icon');
const checkmarkIcon = button.querySelector('.checkmark-icon');

const anchoredTooltip = document.querySelector(`fluent-tooltip[anchor="${id}"]`);
const tooltipDiv = anchoredTooltip ? anchoredTooltip.children[0] : null;
navigator.clipboard.writeText(text)
.then(() => {
if (tooltipDiv) {
tooltipDiv.innerText = postcopy;
}
copyIcon.style.display = 'none';
checkmarkIcon.style.display = 'inline';
if (copyIcon && checkmarkIcon) {
copyIcon.style.display = 'none';
checkmarkIcon.style.display = 'inline';
}
})
.catch(() => {
if (tooltipDiv) {
Expand All @@ -154,8 +157,10 @@ window.copyTextToClipboard = function (id, text, precopy, postcopy) {
tooltipDiv.innerText = precopy;
}

copyIcon.style.display = 'inline';
checkmarkIcon.style.display = 'none';
if (copyIcon && checkmarkIcon) {
copyIcon.style.display = 'inline';
checkmarkIcon.style.display = 'none';
}
delete button.dataset.copyTimeout;
}, 1500);
};
Expand Down