Add details column to trace view, remove status badge and put counter badge on resource name (#1788)

* add details column to trace detail

* Update xlfs, style button

* remove error badge

* Put unread error counter on name

* update trace detail details column to absolute width

* Remove unused resx strings, re-add titles for resource name

* Make error counter badge text white in dark theme

* fixed variable name

---------

Co-authored-by: Adam Ratzman <[email protected]>

Author: adamint

src/Aspire.Dashboard/Components/Pages/Resources.razor

@@ -52,10 +52,10 @@
                 <ChildContent>
                     <PropertyColumn Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeColumnHeader)]" Property="@(c => c.ResourceType)" Sortable="true" />
                     <TemplateColumn Title="@ControlsStringsLoc[nameof(ControlsStrings.NameColumnHeader)]" Sortable="true" SortBy="@_nameSort">
-                        <ResourceNameDisplay Resource="context" FilterText="@_filter" FormatName="GetResourceName" />
+                        <ResourceNameDisplay Resource="context" FilterText="@_filter" FormatName="GetResourceName" UnviewedErrorCounts="@_applicationUnviewedErrorCounts" />
                     </TemplateColumn>
                     <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesStateColumnHeader)]" Sortable="true" SortBy="@_stateSort">
-                        <StateColumnDisplay UnviewedErrorCounts="@_applicationUnviewedErrorCounts" Resource="@context" />
+                        <StateColumnDisplay Resource="@context"/>
                     </TemplateColumn>
                     <PropertyColumn Property="@(c => c.CreationTimeStamp)" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesStartTimeColumnHeader)]" Sortable="true" Tooltip="true" />
                     <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesSourceColumnHeader)]">

src/Aspire.Dashboard/Components/Pages/Resources.razor.cs

@@ -182,5 +182,5 @@ public void Dispose()
     }
 
     private string? GetRowClass(ResourceViewModel resource)
-        => resource == SelectedResource ? "selected-row" : null;
+        => resource == SelectedResource ? "selected-row resource-row" : "resource-row";
 }

src/Aspire.Dashboard/Components/Pages/Resources.razor.css

@@ -1,8 +1,3 @@
-::deep .resource-state-container {
-    display: flex;
-    align-items: center;
-}
-
 ::deep .resource-state-badge {
     padding: 0 3px;
     cursor: pointer;
@@ -18,3 +13,6 @@
     margin-left: 3px;
 }
 
+::deep .resource-row > fluent-data-grid-cell {
+    overflow: visible;
+}

src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor

@@ -92,7 +92,7 @@
                                     </a>
                                 }
                             </TemplateColumn>
-                            <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsDetailsColumnHeader)]">
+                            <TemplateColumn Title="@ControlsStringsLoc[nameof(ControlsStrings.DetailsColumnHeader)]">
                                 <FluentButton Appearance="Appearance.Lightweight" OnClick="() => OnShowProperties(context)">@ControlsStringsLoc[nameof(ControlsStrings.ViewAction)]</FluentButton>
                             </TemplateColumn>
                         </ChildContent>

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor

@@ -1,14 +1,12 @@
 @page "/Trace/{traceId}"
 @page "/Trace/{traceId}/Span/{spanId}"
 
-@using Aspire.Dashboard.Model
 @using Aspire.Dashboard.Model.Otlp
 @using Aspire.Dashboard.Otlp.Model
 @using System.Globalization
 @using Aspire.Dashboard.Resources
 @inject IStringLocalizer<Dashboard.Resources.TraceDetail> Loc
 @inject IStringLocalizer<ControlsStrings> ControlStringsLoc
-@inject IDashboardClient DashboardClient
 
 <PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.TraceDetail.TraceDetailPageTitle)" Loc="@Loc" /></PageTitle>
 
@@ -53,7 +51,7 @@
                 </div>
             </DetailsTitleTemplate>
             <Summary>
-                <FluentDataGrid Class="trace-view-grid" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="SpanWaterfallViewModel" RowClass="@GetRowClass" GridTemplateColumns="2fr 6fr">
+                <FluentDataGrid Class="trace-view-grid" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="SpanWaterfallViewModel" RowClass="@GetRowClass" GridTemplateColumns="4fr 12fr 85px">
                     <TemplateColumn Title="Name">
                         <div class="col-long-content" title="@context.GetTooltip()" @onclick="() => OnShowProperties(context)">
                             @{
@@ -126,6 +124,12 @@
                             </div>
                         </ChildContent>
                     </TemplateColumn>
+                    <TemplateColumn Title="@ControlStringsLoc[nameof(ControlsStrings.DetailsColumnHeader)]">
+                        <FluentButton
+                            Style="margin-left: 7px;"
+                            Title="@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]"
+                            Appearance="Appearance.Lightweight" OnClick="() => OnShowProperties(context)">@ControlStringsLoc[nameof(ControlsStrings.ViewAction)]</FluentButton>
+                    </TemplateColumn>
                 </FluentDataGrid>
             </Summary>
             <Details>

src/Aspire.Dashboard/Components/Pages/Traces.razor

@@ -74,7 +74,7 @@
                     </div>
                 </TemplateColumn>
 
-                <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.Traces.TracesDetailsColumnHeader)]">
+                <TemplateColumn Title="@ControlsStringsLoc[nameof(ControlsStrings.DetailsColumnHeader)]">
                     <FluentAnchor Appearance="Appearance.Lightweight" Href="@($"/Trace/{context.TraceId}")">@ControlsStringsLoc[nameof(ControlsStrings.ViewAction)]</FluentAnchor>
                 </TemplateColumn>
             </ChildContent>

src/Aspire.Dashboard/Components/ResourcesGridColumns/ResourceNameDisplay.razor

@@ -1,10 +1,24 @@
-@using Aspire.Dashboard.Model
+@namespace Aspire.Dashboard.Components
+
+@using Aspire.Dashboard.Model
+@using Aspire.Dashboard.Otlp.Model
 @using Aspire.Dashboard.Resources
 @inject IStringLocalizer<Columns> Loc
 
-<FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
-    <span><FluentHighlighter HighlightedText="@FilterText" Text="@FormatName(Resource)" /></span>
-</FluentStack>
+@{
+    var unviewedErrorCount = GetUnviewedErrorCount(Resource);
+}
+
+@if (unviewedErrorCount > 0)
+{
+    <FluentCounterBadge Class="error-counter-badge" Max="9" BackgroundColor="@Color.Error" Color="Color.Fill"  Appearance="Appearance.Lightweight" Count="@unviewedErrorCount" HorizontalPosition="100">
+        <a href="@GetResourceErrorStructuredLogsUrl(Resource)" title="@FormatLogLinkTitle(unviewedErrorCount)"><FluentHighlighter HighlightedText="@FilterText" Text="@FormatName(Resource)" /></a>
+    </FluentCounterBadge>
+}
+else
+{
+    <span title="@FormatName(Resource)"><FluentHighlighter HighlightedText="@FilterText" Text="@FormatName(Resource)"/></span>
+}
 
 @code {
     [Parameter, EditorRequired]
@@ -15,4 +29,7 @@
 
     [Parameter, EditorRequired]
     public required string FilterText { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Dictionary<OtlpApplication, int>? UnviewedErrorCounts { get; set; }
 }

src/Aspire.Dashboard/Components/ResourcesGridColumns/ResourceNameDisplay.razor.cs

@@ -0,0 +1,37 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Globalization;
+using Aspire.Dashboard.Model;
+using Aspire.Dashboard.Otlp.Storage;
+using Aspire.Dashboard.Resources;
+using Microsoft.AspNetCore.Components;
+
+namespace Aspire.Dashboard.Components;
+
+public partial class ResourceNameDisplay
+{
+    [Inject]
+    public required TelemetryRepository TelemetryRepository { get; init; }
+
+    private int GetUnviewedErrorCount(ResourceViewModel resource)
+    {
+        if (UnviewedErrorCounts is null)
+        {
+            return 0;
+        }
+
+        var application = TelemetryRepository.GetApplication(resource.Uid);
+        return application is null ? 0 : UnviewedErrorCounts.GetValueOrDefault(application, 0);
+    }
+
+    private static string GetResourceErrorStructuredLogsUrl(ResourceViewModel resource)
+    {
+        return $"/StructuredLogs/{resource.Uid}?level=error";
+    }
+
+    private string FormatLogLinkTitle(int unviewedErrorCount)
+    {
+        return FormatName(Resource) + Environment.NewLine + string.Format(CultureInfo.CurrentCulture, Loc[nameof(Columns.UnreadLogErrors)], unviewedErrorCount);
+    }
+}

src/Aspire.Dashboard/Components/ResourcesGridColumns/StateColumnDisplay.razor

@@ -3,27 +3,35 @@
 @using Aspire.Dashboard.Resources
 @inject IStringLocalizer<Columns> Loc
 
-<div class="resource-state-container">
-    @if (Resource is { State: ResourceStates.ExitedState /* containers */ or ResourceStates.FinishedState /* executables */ })
+@if (Resource is { State: ResourceStates.ExitedState /* containers */ or ResourceStates.FinishedState /* executables */ })
+{
+    if (Resource.TryGetExitCode(out int exitCode) && exitCode is not 0)
     {
-        if (Resource.TryGetExitCode(out int exitCode) && exitCode is not 0)
-        {
-            <!-- process completed unexpectedly, hence the non-zero code. this is almost certainly an error, so warn users -->
-            <FluentIcon Title="@string.Format(Loc[Columns.StateColumnResourceExitedUnexpectedly], Resource.ResourceType, exitCode)"
-                        Icon="Icons.Filled.Size16.ErrorCircle"
-                        Color="Color.Error"
-                        Class="severity-icon" />
-        }
-        else
-        {
-            <!-- process completed, which may not have been unexpected -->
-            <FluentIcon Title="@string.Format(Loc[Columns.StateColumnResourceExited], Resource.ResourceType)"
-                        Icon="Icons.Filled.Size16.Warning"
-                        Color="Color.Warning"
-                        Class="severity-icon" />
-        }
+        <!-- process completed unexpectedly, hence the non-zero code. this is almost certainly an error, so warn users -->
+        <FluentIcon Title="@string.Format(Loc[Columns.StateColumnResourceExitedUnexpectedly], Resource.ResourceType, exitCode)"
+                    Icon="Icons.Filled.Size16.ErrorCircle"
+                    Color="Color.Error"
+                    Class="severity-icon"/>
     }
+    else
+    {
+        <!-- process completed, which may not have been unexpected -->
+        <FluentIcon Title="@string.Format(Loc[Columns.StateColumnResourceExited], Resource.ResourceType)"
+                    Icon="Icons.Filled.Size16.Warning"
+                    Color="Color.Warning"
+                    Class="severity-icon"/>
+    }
+}
+else
+{
+    <FluentIcon Icon="Icons.Filled.Size16.CheckmarkCircle"
+                Color="Color.Success"
+                Class="severity-icon"/>
+}
+
+@Resource.State
 
-    @Resource.State
-    <UnreadLogErrorsBadge UnviewedErrorCounts="UnviewedErrorCounts" Resource="@Resource" />
-</div>
+@code {
+    [Parameter, EditorRequired]
+    public required ResourceViewModel Resource { get; set; }
+}