fix: bugs

add breadcrums fix timeline show bug
masastack · Mar 21, 2024 · b55f51e · b55f51e
1 parent 2e400d2
commit b55f51e
Show file tree

Hide file tree

Showing 18 changed files with 88 additions and 59 deletions.
diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmLogView.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmLogView.razor
@@ -13,7 +13,7 @@
             <MSimpleTable Height="610" FixedHeader Width="@("100%")">
                 <thead>
                     <tr>
-                        <th class="text-left" style="width:5%">
+                        <th class="text-left" style="width:15%">
                             @I18n.Apm("Log.Dialog.Actions")
                         </th>
                         <th class="text-left" style="width:15%">

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmSamplePage.razor.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmSamplePage.razor.cs
@@ -26,7 +26,7 @@ private async Task OnNextAsync()
 
     private async Task OnPreAsync()
     {
-        if (Current - 1 < 0)
+        if (Current - 1 <= 0)
             return;
 
         Current -= 1;

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmTraceView.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmTraceView.razor
@@ -17,10 +17,10 @@
             <MSimpleTable Style="width:100%" Height="610" FixedHeader>
                 <thead>
                     <tr>
-                        <th class="text-left">
+                        <th class="text-left" width="15%">
                             @I18n.Apm("Log.Dialog.Actions")
                         </th>
-                        <th class="text-left">
+                        <th class="text-left" width="15%">
                             @I18n.Apm("Log.Dialog.Field")
                         </th>
                         <th class="text-left">

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Masa.Tsc.Web.Admin.Rcl.csproj b/src/Web/Masa.Tsc.Web.Admin.Rcl/Masa.Tsc.Web.Admin.Rcl.csproj
@@ -26,7 +26,8 @@
 		<PackageReference Include="Humanizer.Core" Version="2.14.1" />
 		<PackageReference Include="Humanizer.Core.zh-CN" Version="2.14.1" />
 		<PackageReference Include="Mapster" Version="7.3.0" />
-		<PackageReference Include="Masa.Stack.Components" Version="0.0.434" />
+		<PackageReference Include="Masa.Blazor" Version="1.4.0-beta.3" />
+		<PackageReference Include="Masa.Stack.Components" Version="0.0.442" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.3" />
 	</ItemGroup>
 

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoint.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoint.razor
@@ -25,7 +25,7 @@
         @if (context.Header.Value == nameof(ListChartData.Name))
         {
             <div style="width:400px;overflow:hidden" class="text-truncate">
-                <a href="/apm/endpoint@(GetUrlParam(service: context.Item.Service, env: GetSearchEnv(Search.Enviroment, context.Item.Envs?.Split(',')),endpoint:context.Item.Endpoint, comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End,search:Search.Text))"
+                <a href="/apm/endpoints/@(HttpUtility.UrlEncode(context.Item.Name)+GetUrlParam(service: context.Item.Service, env: GetSearchEnv(Search.Enviroment, context.Item.Envs?.Split(',')),endpoint:context.Item.Endpoint, comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End,search:Search.Text))"
                    title="@context.Item.Name">@context.Item.Name</a>
             </div>
         }

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/EndpointDetail.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/EndpointDetail.razor
@@ -1,6 +1,6 @@
 @namespace Masa.Tsc.Web.Admin.Rcl.Pages.Apm
 @inherits ApmComponentBase
-@page "/apm/endpoint"
+@page "/apm/endpoints/{name}"
 <PageTitle>@I18n.Apm("PageTitles.EndpointDetail")</PageTitle>
 
 <ApmSearchComponent ShowService
@@ -16,7 +16,7 @@
     <MTab Value="2">@I18n.Apm("Tabs.Errors")</MTab>
 </MTabs>
 <CascadingValue Value="Search">
-    <div style="height:calc(100vh - 224px)" class="overflow-y-scroll">
+    <div style="height:calc(100vh - 280px)" class="overflow-y-scroll">
         <MTabsItems @bind-Value="index" Class="rounded-b-xl">
             <MTabItem Value="1">
                 <Masa.Tsc.Web.Admin.Rcl.Pages.Apm.Endpoints.OverView />

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/TimeLine.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/TimeLine.razor
@@ -11,7 +11,7 @@
             <div style="width:70%" class="d-flex justify-start pt-4">
                 <div>@(defaultTimeLine?.Trace?.Timestamp.FormatHistory())</div>
                 <div style="color: rgb(52, 55, 65);width:1px" class="mx-2">|</div>
-                <div>@(defaultTimeLine?.Latency)  (@((100*Percentile).ToString("0.##"))% of trace)</div>
+                <div>@(defaultTimeLine?.Latency)  (@((100 * Percentile).ToString("0.##"))% of trace)</div>
                 <div style="color: rgb(52, 55, 65);width:1px" class="mx-2">|</div>
                 <div class="px-2 text-truncate" style="max-width:400px;background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);" title="@(defaultTimeLine?.Trace?.Attributes["http.method"]) @(defaultTimeLine?.Trace?.Attributes["http.url"])">@(defaultTimeLine?.Trace?.Attributes["http.method"]) @(defaultTimeLine?.Trace?.Attributes["http.url"])</div>
                 <div class="px-2 rounded-sm" style="color:#fff;background-color:@((defaultTimeLine?.Faild ?? false)?"red":"green")">@(defaultTimeLine?.Trace?.Attributes["http.status_code"]) @((defaultTimeLine?.Faild ?? false) ? "Failed" : "OK")</div>
@@ -65,30 +65,45 @@
         bool hasShow = false;
         foreach (var timeLine in timeLines)
         {
+            var left = timeLine.Left + timeLine.Process;
+            string className = "d-flex", style = null;
+            if (timeLine.Left - 35 > 0)
+            {
+                if (timeLine.Right -35> 0)
+                    style = $"padding-left:{timeLine.Left}%";
+                else
+                {
+                    className = "d-flex justify-end";
+                    style = $"padding-right:{timeLine.Right}%";
+                }
+            }
+
             <div class="time_line d-flex justify-space-between">
                 <div class="left_col d-flex justify-space-start" style="margin-left:@(level*8)px;border-left:solid 1px #ccc">
                     @if (timeLine.Children != null && timeLine.Children.Any())
                     {
                         <SIcon Small Color="black" Class="pl-4 pr-2" OnClick="@(()=>ShowOrHideLine(timeLine))">@timeLine.ShowIcon</SIcon> <span class="pt-4" style="font-size:900">@timeLine.Children.Count</span>
                     }
                 </div>
-                <div style="width:calc(100% - 100px)" class="d-flex justify-space-between">
-                    <div class="left" style="width:@timeLine.Left.ToString("#.00")%"></div>
-                    <div class="content mt-2" style="width:@((timeLine.Process+timeLine.Right).ToString("#.00"))%">
-                        <div class="d-flex justify-space-between">
-                            <div class="process" title="@timeLine.Label" style="width:@timeLine.Process.ToString(" #.00")%"></div>
-                            <div class="right" style="width:@timeLine.Right.ToString("#.00")%"></div>
-                        </div>
-                        <div class="name d-flex" title="@timeLine.Label">
-                            <SIcon OnClick="@(()=>ShowTraceDetail(timeLine))">@timeLine.Icon</SIcon> <i class="pl-2" style="line-height:30px">@timeLine.Type</i> <div class="@($"{timeLine.NameClass} subtitle-1 text-truncate ml-2")" style="max-width:400px">@timeLine.Name</div> <i class="pl-2" style="line-height:30px">@timeLine.Latency</i>
-                            @if (timeLine.Faild)
-                            {
-                                <SButton XSmall Color="red white--text ml-2 mt-1" Style="text-transform:none">@I18n.T("failure")</SButton>
-                            }
-                            @if (timeLine.IsError)
-                            {
-                                <SButton XSmall Color="red white--text ml-2 mt-1" Style="text-transform:none" OnClick="@(()=>OpenLogAsync(timeLine))">View related error</SButton>
-                            }
+                <div style="width:calc(100% - 100px)">
+                    <div class="d-flex my-2">
+                        <div class="left" style="width:@timeLine.Left%"></div>
+                        <div @onclick="(()=>ShowTraceDetail(timeLine))" class="process" title="@timeLine.Label" style="width:@timeLine.Process%"></div>
+                        <div class="right" style="width:@timeLine.Right%"></div>
+                    </div>
+                    <div class="@className" style="@style">
+                        <div class="content" @onclick="(()=>ShowTraceDetail(timeLine))">
+                            <div class="name d-flex" title="@timeLine.Label">
+                                <SIcon>@timeLine.Icon</SIcon> <i class="pl-2" style="line-height:30px">@timeLine.Type</i> <div class="@($"{timeLine.NameClass} subtitle-1 text-truncate ml-2")" style="max-width:400px">@timeLine.Name</div> <i class="pl-2" style="line-height:30px">@timeLine.Latency</i>
+                                @if (timeLine.Faild)
+                                {
+                                    <SButton XSmall Color="red white--text ml-2 mt-1" Style="text-transform:none">@I18n.T("failure")</SButton>
+                                }
+                                @if (timeLine.IsError)
+                                {
+                                    <SButton XSmall OnClickStopPropagation=true Color="red white--text ml-2 mt-1" Style="text-transform:none" OnClick="@(()=>OpenLogAsync(timeLine))">View related error</SButton>
+                                }
+                            </div>
                         </div>
                     </div>
                 </div>

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/TimeLine.razor.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/TimeLine.razor.cs
@@ -126,7 +126,6 @@ private void CaculateTimelines(List<TraceResponseDto>? traces)
                 Children = GetChildren(item.SpanId, traces)
             };
             timeLine.SetValue(item, start, end, totalDuration, errorStatus);
-            timeLine.SetChildren();
             var spanError = Errors?.FirstOrDefault(t => t.X == item.SpanId);
             if (spanError != null)
             {
@@ -157,7 +156,6 @@ private List<TreeLineDto> GetChildren(string spanId, List<TraceResponseDto> trac
                 Children = GetChildren(item.SpanId, traces)
             };
             timeLine.SetValue(item, start, end, totalDuration, errorStatus);
-            timeLine.SetChildren();
             result.Add(timeLine);
         }
         return result;
@@ -255,7 +253,7 @@ private void CaculateTotalTime(DateTime start, DateTime end)
         lastDuration = totalDuration;
     }
 
-    private string GetUrl(TreeLineDto current, bool isSpan = false,string baseUrl= "/apm/logs")
+    private string GetUrl(TreeLineDto current, bool isSpan = false, string baseUrl = "/apm/logs")
     {
         if (current == null)
             return string.Empty;
@@ -269,6 +267,21 @@ private async Task OpenLogAsync(TreeLineDto item)
         await JSRuntime.InvokeVoidAsync("open", url, "_blank");
     }
 
+    private static string GetClassStyle(TreeLineDto timeLine)
+    {
+        var left = timeLine.Left + timeLine.Process;
+        if (left - 65 <= 0)
+        {
+            if (timeLine.Left - 35 <= 0)
+                return "class=\"d-flex\"";
+            return $"class=\"d-flex\" style=\"padding-left:{timeLine.Left}\"";
+        }
+        else
+        {
+            return $"class=\"d-flex justify-end\" style=\"padding-right:{timeLine.Right}\"";
+        }        
+    }
+
     private StringNumber index = 1;
 }
 
@@ -325,11 +338,11 @@ public bool IsError
 
     public TraceResponseDto Trace { get; set; }
 
-    public double Left { get; set; }
+    public int Left { get; set; }
 
-    public double Right { get; set; }
+    public int Right { get; set; }
 
-    public double Process { get; set; }
+    public int Process { get; set; }
 
     public bool Show { get; set; } = true;
 
@@ -386,25 +399,21 @@ public void SetValue(TraceResponseDto trace, DateTime start, DateTime end, int t
             Faild = true;
         }
 
-        Left = Math.Round(Math.Floor((trace.Timestamp - start).TotalMilliseconds) * 100 / total, 2);
-        Process = Math.Round(Math.Floor((trace.EndTimestamp - trace.Timestamp).TotalMilliseconds) * 100 / total, 2);
-        //if (Process - 10 < 0) Process = 10;
-        Right = 100 - Left - Process;
-    }
-
-    public void SetChildren()
-    {
-        if (Children == null || !Children.Any())
-            return;
-
-        double right = 100;
-
-        foreach (var item in Children)
+        Left = (int)Math.Floor(Math.Floor((trace.Timestamp - start).TotalMilliseconds) * 100 / total);
+        Process = (int)Math.Floor(Math.Floor((trace.EndTimestamp - trace.Timestamp).TotalMilliseconds) * 100 / total);
+        if (Process - 1 < 0) Process = 1;
+        if (Process + Left - 100 > 0)
         {
-            item.Left = Left + Process - item.Process;
-            right -= (item.Left + item.Process);
+            Left = 100 - Process;
+        }
+        else
+        {
+            Right = 100 - Left - Process;
+            if (Right < 0)
+            {
+                Right = 0;
+                Left = 100 - Process;
+            }
         }
-        var lastChild = Children[Children.Count - 1];
-        lastChild.Right = right;
     }
 }
diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/ErrorDetail.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/ErrorDetail.razor
@@ -1,6 +1,6 @@
 @namespace Masa.Tsc.Web.Admin.Rcl.Pages.Apm
 @inherits ApmComponentBase
-@page "/apm/error"
+@page "/apm/errors/{name}"
 
 <PageTitle>@I18n.Apm("PageTitles.ErrorDetail")</PageTitle>
 

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Errors.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Errors.razor
@@ -25,7 +25,7 @@
             <a target="_blank"
                style="text-decoration:none"
                title="@context.Item.Type"
-               href="/apm/error@(GetUrlParam(service:Search.Service,env: GetSearchEnv(Search.Enviroment), comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End,exType:context.Item.Type,search:Search.Text))">
+               href="/apm/errors/@(HttpUtility.UrlEncode(context.Item.Type)+GetUrlParam(service:Search.Service,env: GetSearchEnv(Search.Enviroment), comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End,exType:context.Item.Type,search:Search.Text))">
                 @context.Item.Type
             </a>
         }

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Service.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Service.razor
@@ -23,7 +23,7 @@
     <ItemColContent>
         @if (context.Header.Value == nameof(ListChartData.Name))
         {
-            <a href="/apm/service@(GetUrlParam(service: context.Item.Name, env: GetSearchEnv(Search.Enviroment, context.Item.Envs?.Split(',')), comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End,search:Search.Text))">@context.Item.Name</a>
+            <a href="/apm/services/@(context.Item.Name+GetUrlParam(service: context.Item.Name, env: GetSearchEnv(Search.Enviroment, context.Item.Envs?.Split(',')), comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End,search:Search.Text))">@context.Item.Name</a>
         }
         else if (context.Header.Value == nameof(ListChartData.Envs))
         {

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/ServiceDetail.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/ServiceDetail.razor
@@ -1,6 +1,6 @@
 @namespace Masa.Tsc.Web.Admin.Rcl.Pages.Apm
 @inherits ApmComponentBase
-@page "/apm/service"
+@page "/apm/services/{name}"
 <PageTitle>@I18n.Apm("PageTitles.ServiceDetail")</PageTitle>
 
 <ApmSearchComponent ShowService

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ServiceEndpoints.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ServiceEndpoints.razor
@@ -42,7 +42,7 @@
                 @if (context.Header.Value == nameof(ListChartData.Name))
                 {
                     <div style="width:400px;overflow:hidden" class="text-truncate">
-                        <a href="/apm/endpoint@(GetUrlParam(service: context.Item.Service, env: GetSearchEnv(SearchData.Enviroment, context.Item.Envs?.Split(',')),endpoint:context.Item.Endpoint, comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End))"
+                        <a href="/apm/endpoints/@(HttpUtility.UrlEncode(context.Item.Name)+GetUrlParam(service: context.Item.Service, env: GetSearchEnv(SearchData.Enviroment, context.Item.Envs?.Split(',')),endpoint:context.Item.Endpoint, comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End))"
                            title="@context.Item.Name">@context.Item.Name</a>
                     </div>
                 }

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ServiceErrors.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ServiceErrors.razor
@@ -32,7 +32,7 @@
                     <a target="_blank"
                        style="text-decoration:none"
                        title="@context.Item.Type"
-                       href="/apm/error@(GetUrlParam(service:SearchData.Service,env: GetSearchEnv(SearchData.Enviroment), comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End,exType:context.Item.Type))">
+                       href="/apm/errors/@(HttpUtility.UrlEncode(context.Item.Type)+GetUrlParam(service:SearchData.Service,env: GetSearchEnv(SearchData.Enviroment), comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End,exType:context.Item.Type))">
                         @context.Item.Type
                     </a>
                 }

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ShortEndpoint.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ShortEndpoint.razor
@@ -16,7 +16,7 @@
         @if (context.Header.Value == nameof(ListChartData.Name))
         {
             <div style="width:400px;overflow:hidden" class="text-truncate">
-                <a href="/apm/endpoint@(GetUrlParam(service: context.Item.Service, env: GetSearchEnv(SearchData.Enviroment, context.Item.Envs?.Split(',')),endpoint:context.Item.Endpoint, comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End,search:SearchData.Text))"
+                <a href="/apm/endpoints/@(HttpUtility.UrlEncode(context.Item.Name)+GetUrlParam(service: context.Item.Service, env: GetSearchEnv(SearchData.Enviroment, context.Item.Envs?.Split(',')),endpoint:context.Item.Endpoint, comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End,search:SearchData.Text))"
                    title="@context.Item.Name">@context.Item.Name</a>
             </div>
         }

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ShortErrors.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Services/ShortErrors.razor
@@ -18,7 +18,7 @@
             <a target="_blank"
                style="text-decoration:none"
                title="@context.Item.Type"
-               href="/apm/error@(GetUrlParam(service:SearchData.Service,env: GetSearchEnv(SearchData.Enviroment), comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End,exType:context.Item.Type,search:SearchData.Text))">
+               href="/apm/errors/@(HttpUtility.UrlEncode(context.Item.Type)+GetUrlParam(service:SearchData.Service,env: GetSearchEnv(SearchData.Enviroment), comparisonType: SearchData.ComparisonType, start: SearchData.Start, end: SearchData.End,exType:context.Item.Type,search:SearchData.Text))">
                 @context.Item.Type
             </a>
         }

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Shared/ApmComponentBase.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Shared/ApmComponentBase.cs
@@ -21,7 +21,7 @@ public partial class ApmComponentBase : BDomComponentBase, IAsyncDisposable
 
     public async ValueTask DisposeAsync()
     {
-        base.Dispose(true);
+        //base.Dispose(true);
         await Task.CompletedTask;
     }
 

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/wwwroot/css/tsc.css b/src/Web/Masa.Tsc.Web.Admin.Rcl/wwwroot/css/tsc.css
@@ -399,4 +399,8 @@ div[style*="visibility: hidden; opacity: 0;"] {
 
 .edit .m-slide-group__content {
     cursor: move;
+}
+
+.m-breadcrumbs__item {
+    max-width: 600px !important
 }