Merge pull request #7 from samsp-msft/traces-table

Traces table
samsp-msft · Aug 31, 2023 · dffc801 · dffc801
2 parents 49eb637 + be9db16
commit dffc801
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 112 deletions.
diff --git a/OTLPView/Pages/Traces.razor b/OTLPView/Pages/Traces.razor
@@ -1,4 +1,5 @@
 @page "/Traces"
+@using OTLPView.DataModel;
 
 <PageTitle>Traces</PageTitle>
 
@@ -10,29 +11,30 @@
 else
 {
     <MudStack Row="true" Spacing="3" Class="d-flex">
-        <MudPaper Elevation="1" Height="800" Class="overflow-scroll flex-grow-0">
-            <MudList Clickable="true" SelectedValueChanged="SelectedOperationChanged" >
-                <MudListSubheader>
-                    Operations
-                </MudListSubheader>
-                @foreach (var operation in TelemetryResults.Operations)
-                {
-                    <MudListItem Value="@operation">
-                        <div class="OperationsListDetails">
-                            <span class="Property">Duration:</span>
-                            <span class="Value">@operation.Duration ms</span>,
-                            <span class="Property">Root Spans:</span>
-                            <span class="Value">@operation.RootSpans.Count</span>,
-                            <span class="Property">All Spans:</span>
-                            <span class="Value">@operation.AllSpans.Count</span>
-                        </div>
-                        <div>
-                            <span>@operation.StartTime.TimeOfDay</span>
-                        </div>
-                    </MudListItem>
-                }
+        <MudPaper Elevation="1" Height="800" Class="flex-grow-0">
+
+            <MudTable Items="@TelemetryResults.Operations" Hover="true" Dense="true" @ref="opsTable" RowClassFunc="@SelectedRowClassFunc" OnRowClick="OperationClick" T="TraceOperation">
+                <NoRecordsContent>
+                    Operations will be shown when traces have been seen.
+                </NoRecordsContent>
+                <HeaderContent>
+                    <MudTh>Operation Id</MudTh>
+                    <MudTh>Start Time</MudTh>
+                    <MudTh>Duration (ms)</MudTh>             
+                    <MudTh>Spans</MudTh>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd DataLabel="Operation Id">@(ShortOpName(context.OperationId))</MudTd>
+                    <MudTd DataLabel="Root Spans">@(context.StartTime.ToLocalTime().ToLongTimeString())</MudTd>
+                    <MudTd DataLabel="Duration">@(context.Duration)</MudTd>
+
+                    <MudTd DataLabel="Spans">@(context.AllSpans.Count)</MudTd>
+                </RowTemplate>
+                <PagerContent>
+                    <MudTablePager HideRowsPerPage="true" PageSizeOptions="new int[]{30,}"/>
+                </PagerContent>
+            </MudTable>
 
-            </MudList>
         </MudPaper>
         <MudPaper Width="800" Class="flex-grow-1">
             @if (State.SelectedSpan is not null)

diff --git a/OTLPView/Pages/Traces.razor.cs b/OTLPView/Pages/Traces.razor.cs
@@ -1,3 +1,7 @@
+using MudBlazor;
+using static MudBlazor.CategoryTypes;
+using OTLPView.DataModel;
+
 namespace OTLPView.Pages;
 
 public sealed partial class Traces
@@ -8,6 +12,8 @@ public sealed partial class Traces
     [Inject]
     public required TracesPageState State { get; set; }
 
+    private MudTable<TraceOperation> opsTable;
+
     protected override void OnInitialized()
     {
         State.SetPage(this);
@@ -44,18 +50,40 @@ public void UpdateSelectedSpan()
         }
     }
 
-    public void SelectOperation(TraceOperation o)
+    private void OperationClick(TableRowClickEventArgs<TraceOperation> args)
     {
-        State.SelectedOperation = o;
+        State.SelectedOperation = args.Item;
         State.SelectedSpan = State.SelectedOperation.RootSpans.Values.First();
     }
 
-    public string IsSelected(TraceOperation o, string cssClass) =>
-        cssClass + ((State.SelectedOperation == o) ? " Selected" : "");
+    private int selectedRowNumber = -1;
+    private string SelectedRowClassFunc(TraceOperation o, int rowNumber)
+    {
+        if (selectedRowNumber == rowNumber)
+        {
+            selectedRowNumber = -1;
+            return string.Empty;
+        }
+        else if (opsTable.SelectedItem != null && opsTable.SelectedItem.Equals(o))
+        {
+            selectedRowNumber = rowNumber;
+            return "selected";
+        }
+        else
+        {
+            return string.Empty;
+        }
+    }
 
-    public void SelectedOperationChanged(object item)
+    private string ShortOpName(string name)
     {
-        State.SelectedOperation = item as TraceOperation;
-        State.SelectedSpan = State.SelectedOperation.RootSpans.Values.First();
+        if (name.Length > 8)
+        {
+            return $"{name.Substring(0, 1)}…{name.Substring(name.Length-6)}".HtmlEncode();
+        }
+        else
+        {
+            return name;
+        }
     }
 }
diff --git a/OTLPView/Shared/DimensionedCounterView.razor b/OTLPView/Shared/DimensionedCounterView.razor
@@ -48,7 +48,6 @@
                         </PagerContent>
                     </MudTable>
                 </MudPaper>
-
             </MudStack>
         </MudCardContent>
     </MudCard>

diff --git a/OTLPView/Shared/DimensionedHistogramView.razor b/OTLPView/Shared/DimensionedHistogramView.razor
@@ -21,13 +21,12 @@
             </MudCardContent>
         </MudCardHeader>
         <MudCardContent>
-            <MudStack Row="true">
+            <MudStack>
                 <MudPaper>
                     <MudChart ChartType="ChartType.Bar" ChartSeries="@_chartValues" XAxisLabels="@_chartLabels" Width="500x" Height="400px"></MudChart>
                 </MudPaper>
                 <MudPaper>
-                    <div>Recent Values:</div>
-                    <MudTable Items=@Dimension._values Dense="true">
+                    <MudTable Items="@Dimension._values" Dense="true">
                         <NoRecordsContent>
                             No records found for this dimension combination.
                         </NoRecordsContent>

diff --git a/OTLPView/wwwroot/css/Traces.css b/OTLPView/wwwroot/css/Traces.css
@@ -1,63 +1,17 @@
-
-.OperationBlock {
-    display: block;
-    border: 1px solid darkgrey;
-    margin: 4px 400px 0px 300px;
-}
-
-.OperationsList {
-    display: block;
-    position: fixed;
-    left: 260px;
-    top: 80px;
-    width: 300px;
-}
-
-.OpertionsListTitle {
-}
-
-.OperationsListItems {
-    border: 1px solid darkgray;
-    padding: 2px;
-}
-
-.OperationsListBlock {
-    padding: 4px;
-    border-radius: 2px;
-}
-
-.OperationsListBlock.Selected {
-    background-color: #4d5788;
-}
-
-    .OperationsListBlock:hover {
-        background-color: #f2f2f2;
-    }
 
-.OperationsListTitleBlock h2 {
-    font-size: 12pt;
-    margin: 4px 4px 1px 1px;
+/* Used by the operations table for selection */
+.selected {
+    background-color: #1E88E5 !important;
 }
 
-.DetailsPanel {
-    display: block;
-    position: fixed;
-    right: 0px;
-    top: 80px;
-    width: 400px;
-}
-
-.OperationTitleBlock {
+.selected > td {
+    color: white !important;
 }
 
-    .OperationTitleBlock h2 {
-        font-size: 14pt;
+    .selected > td .mud-input {
+        color: white !important;
     }
 
-        .OperationTitleBlock h2 span {
-            margin: 2px;
-        }
-
 .SpanBlock {
 }
 
@@ -84,8 +38,6 @@
 .TimelineTitle {
     display: block;
     position: absolute;
-    /* Calculates 50% of the element's width, and moves it by that */
-    /* amount across the X-axis to the left */
     left: 50px;
     top: 1px;
     right: 50px;
@@ -112,28 +64,4 @@
     top: 12px;
 }
 
-.TimelineRightOffset {
-    display: inline-block;
-}
-
-.DetailsTitle {
-    font-size: 14pt;
-    padding: 4px 4px;
-}
-
-.SpanTitle {
-}
-
-
-    .SpanTitle h2 {
-        font-size: 14pt;
-    }
-
-    .SpanTitle .Property {
-        font-size: 12pt;
-    }
 
-    .SpanTitle .Value {
-        font-size: 12pt;
-        font-family: 'Cascadia Mono', 'Lucida Console', 'Consolas', Courier, monospace;
-    }