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

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

@@ -52,10 +52,10 @@
                 <ChildContent>
                     <PropertyColumn Property="@(c => c.ResourceType)" Title="Type" Sortable="true" />
                     <TemplateColumn Title="Name" 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.ResourcesEnvironmentVariablesGridStateColumnHeader)]" Sortable="true" SortBy="@_stateSort">
-                        <StateColumnDisplay UnviewedErrorCounts="@_applicationUnviewedErrorCounts" Resource="@context" />
+                        <StateColumnDisplay Resource="@context"/>
                     </TemplateColumn>
                     <PropertyColumn Property="@(c => c.CreationTimeStamp)" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesEnvironmentVariablesGridStartTimeColumnHeader)]" Sortable="true" Tooltip="true" />
                     <TemplateColumn Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesEnvironmentVariablesGridSourceColumnHeader)]">

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

@@ -172,5 +172,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 Style="padding: 3px 3px;" Max="9" BackgroundColor="@Color.Error" Color="Color.Fill" Appearance="Appearance.Lightweight" Count="@unviewedErrorCount" HorizontalPosition="100">
+        <a href="@GetResourceErrorStructuredLogsUrl(Resource)"><FluentHighlighter HighlightedText="@FilterText" Text="@FormatName(Resource)"/></a>
+    </FluentCounterBadge>
+}
+else
+{
+    <span><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/UnreadLogErrorsBadge.razor.cs → src/Aspire.Dashboard/Components/ResourcesGridColumns/ResourceNameDisplay.razor.cs

@@ -1,31 +1,16 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using Aspire.Dashboard.Model;
-using Aspire.Dashboard.Otlp.Model;
 using Aspire.Dashboard.Otlp.Storage;
 using Microsoft.AspNetCore.Components;
 
 namespace Aspire.Dashboard.Components;
 
-public partial class UnreadLogErrorsBadge
+public partial class ResourceNameDisplay
 {
-    private int _unviewedCount;
-
-    [Parameter, EditorRequired]
-    public required ResourceViewModel Resource { get; set; }
-    [Parameter, EditorRequired]
-    public required Dictionary<OtlpApplication, int>? UnviewedErrorCounts { get; set; }
-
     [Inject]
     public required TelemetryRepository TelemetryRepository { get; init; }
-    [Inject]
-    public required NavigationManager NavigationManager { get; init; }
-
-    protected override void OnParametersSet()
-    {
-        _unviewedCount = GetUnviewedErrorCount(Resource);
-    }
 
     private int GetUnviewedErrorCount(ResourceViewModel resource)
     {

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; }
+}

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

@@ -0,0 +1,36 @@
+@using Aspire.Dashboard.Model
+@using Aspire.Dashboard.Resources
+@inject IStringLocalizer<Columns> Loc
+
+@if (Resource is { State: ResourceStates.ExitedState /* containers */ or ResourceStates.FinishedState /* executables */ })
+{
+    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"/>
+    }
+}
+else
+{
+    <FluentIcon Icon="Icons.Filled.Size16.CheckmarkCircle"
+                Color="Color.Success"
+                Class="severity-icon"/>
+}
+
+@Resource.State
+
+@code {
+    [Parameter, EditorRequired]
+    public required ResourceViewModel Resource { get; set; }
+}

src/Aspire.Dashboard/Resources/ControlsStrings.resx

@@ -233,4 +233,7 @@
   <data name="TimestampColumnHeader" xml:space="preserve">
     <value>Timestamp</value>
   </data>
+  <data name="DetailsColumnHeader" xml:space="preserve">
+    <value>Details</value>
+  </data>
 </root>

src/Aspire.Dashboard/Resources/StructuredLogs.resx

@@ -58,9 +58,6 @@
   <data name="StructuredLogsTraceColumnHeader" xml:space="preserve">
     <value>Trace</value>
   </data>
-  <data name="StructuredLogsDetailsColumnHeader" xml:space="preserve">
-    <value>Details</value>
-  </data>
   <data name="StructuredLogsNoLogsFound" xml:space="preserve">
     <value>No structured logs found</value>
   </data>