Span Id formatting in details title (#960)

dotnet · Nov 20, 2023 · 3b84d57 · 3b84d57
1 parent 49bb056
commit 3b84d57
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor b/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor
@@ -8,7 +8,14 @@
         <Panel2>
             <div class="details-container">
                 <FluentHeader Style="height: auto;">
-                    @DetailsTitle
+                    @if (DetailsTitle is not null)
+                    {
+                        @DetailsTitle
+                    }
+                    else if (DetailsTitleTemplate is not null)
+                    {
+                        @DetailsTitleTemplate
+                    }
                     <div class="header-right">
                         <FluentButton Appearance="Appearance.Stealth"
                                       IconEnd="@(Orientation == Orientation.Horizontal ? _splitHorizontalIcon : _splitVerticalIcon)"

diff --git a/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor.cs b/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor.cs
@@ -19,8 +19,8 @@ public partial class SummaryDetailsView
     [Parameter]
     public bool ShowDetails { get; set; }
 
-    [Parameter, EditorRequired]
-    public required string DetailsTitle { get; set; }
+    [Parameter]
+    public string? DetailsTitle { get; set; }
 
     [Parameter]
     public Orientation Orientation { get; set; } = Orientation.Vertical;
@@ -42,6 +42,9 @@ public partial class SummaryDetailsView
     [Parameter]
     public string? ViewKey { get; set; }
 
+    [Parameter]
+    public RenderFragment? DetailsTitleTemplate { get; set; }
+
     [Inject]
     public required ProtectedLocalStorage ProtectedLocalStore { get; set; }
 

diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
@@ -43,7 +43,13 @@
             <FluentAnchor slot="end" Appearance="Appearance.Lightweight" Href="@($"/Traces")">Back</FluentAnchor>
         </FluentToolbar>
 
-        <SummaryDetailsView DetailsTitle="@(SelectedSpan?.Title)" ShowDetails="SelectedSpan is not null" OnDismiss="() => ClearSelectedSpan()" ViewKey="TraceDetail">
+        <SummaryDetailsView ShowDetails="SelectedSpan is not null" OnDismiss="() => ClearSelectedSpan()" ViewKey="TraceDetail">
+            <DetailsTitleTemplate>
+                <div>
+                    @SelectedSpan!.Title
+                    <span class="span-id">@OtlpHelpers.ToShortenedId(SelectedSpan!.Span.SpanId)</span>
+                </div>
+            </DetailsTitleTemplate>
             <Summary>
                 <FluentDataGrid Class="trace-view-grid" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="SpanWaterfallViewModel" RowClass="@GetRowClass" GridTemplateColumns="2fr 6fr">
                     <TemplateColumn Title="Name">

diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs
@@ -25,9 +25,6 @@ public partial class TraceDetail
     [Parameter]
     public string? SpanId { get; set; }
 
-    [Inject]
-    public required IDialogService DialogService { get; set; }
-
     [Inject]
     public required TelemetryRepository TelemetryRepository { get; set; }
 
@@ -158,7 +155,7 @@ private void OnShowProperties(SpanWaterfallViewModel viewModel)
             {
                 Span = viewModel.Span,
                 Properties = entryProperties,
-                Title = $"{viewModel.Span.Source.ApplicationName}: {viewModel.GetDisplaySummary()} {OtlpHelpers.ToShortenedId(viewModel.Span.SpanId)}"
+                Title = $"{viewModel.Span.Source.ApplicationName}: {viewModel.GetDisplaySummary()}"
             };
 
             SelectedSpan = spanDetailsViewModel;

diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css
@@ -116,7 +116,7 @@ fluent-dialog fluent-data-grid-cell[cell-type=columnheader] fluent-button[appear
 }
 
 .span-id {
-    color: rgb(136, 136, 136);
+    color: var(--foreground-subtext-rest);
     padding-left: 0.5rem;
     font-size: 12px;
 }