chore: ui update

masastack · Mar 27, 2024 · 47cf411 · 47cf411
1 parent 8f7cd99
commit 47cf411
Show file tree

Hide file tree

Showing 32 changed files with 89 additions and 121 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
@@ -41,15 +41,15 @@
         foreach (var key in dic.Keys)
         {
             var currentName = string.IsNullOrEmpty(parent) ? key : $"{parent}.{key}";
-
-            var isShow = string.IsNullOrEmpty(search) || currentName.Contains(search, StringComparison.CurrentCultureIgnoreCase);
-
             var value = dic[key];
             if (IsFundamental(value.GetType()) || value.GetType().Equals(typeof(JsonElement)))
             {
-                if (!isShow) continue;
                 if (value is DateTime time)
                     value = time.UtcFormatLocal(CurrentTimeZone, "yyyy-MM-dd HH:mm:ss fff");
+
+                var isShow = string.IsNullOrEmpty(search) || currentName.Contains(search, StringComparison.CurrentCultureIgnoreCase) || value.ToString()!.Contains(search);
+                if (!isShow) continue;
+
                 <tr>
                     <td></td>
                     <td>@currentName</td>

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmLogView.razor.css b/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmLogView.razor.css
@@ -5,6 +5,7 @@
 .slide_out {
     animation-name: fadeout;
     transform: translateX(1100px);
+    display: none;
 }
 
 .slide {
@@ -24,7 +25,6 @@
     line-height: 1.5rem;
 }
 
-
 @keyframes fadein {
     0% {
         opacity: 0;

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmSearchComponent.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmSearchComponent.razor
@@ -12,9 +12,9 @@
     <div class="d-flex mb-4">
         @if (ShowEnv)
         {
-            <SAutoComplete Label="@I18n.Apm("Search.Enviroment")"
+            <SAutoComplete Label="@I18n.Apm("Search.Environment")"
                            Clearable
-                           Items="enviroments"
+                           Items="environments"
                            TItem="string"
                            TValue="string"
                            TItemValue="string"
@@ -27,8 +27,8 @@
                            Small
                            HideSelected=false
                            BackgroundColor="white"
-                           Value=Search.Enviroment
-                           ValueChanged="OnEnviromentChanged" />
+                           Value=Search.Environment
+                           ValueChanged="OnEnvironmentChanged" />
         }
 
         @if (ShowService)
@@ -80,7 +80,9 @@
                                    OnAutoUpdate="OnTimeUpdate"
                                    ShowQuickChange
                                    ShowTimeZoneSelector
-                                   DefaultQuickRange="QuickRangeKey.Last15Minutes" />
+                                   DefaultQuickRange="QuickRangeKey.Last15Minutes"
+                                   ShowInterval                                   
+                                   />
         }
         @if (ShowButton)
         {

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmSearchComponent.razor.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Components/Apm/ApmSearchComponent.razor.cs
@@ -42,7 +42,7 @@ public partial class ApmSearchComponent
         new (ApmComparisonTypes.Week, "Week before"),
     };
     private List<string> services = new();
-    private List<string> enviroments = new();
+    private List<string> environments = new();
     private bool isServiceLoading = true, isEnvLoading = true;
 
     private bool isCallQuery = false;
@@ -53,7 +53,7 @@ protected override async Task OnInitializedAsync()
         await base.OnInitializedAsync();
         if (!isCallQuery && Search.Start > DateTime.MinValue)
         {
-            await LoadEnviromentAsync();
+            await LoadEnvironmentAsync();
             await LoadServiceAsync();
             await OnValueChanged();
             isCallQuery = true;
@@ -66,8 +66,8 @@ protected override void OnInitialized()
         var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
         if (string.IsNullOrEmpty(uri.Query))
         {
-            if (string.IsNullOrEmpty(Search.Enviroment) && string.IsNullOrEmpty(Search.Service) && !string.IsNullOrEmpty(UserContext.Environment))
-                Search.Enviroment = UserContext.Environment;
+            if (string.IsNullOrEmpty(Search.Environment) && string.IsNullOrEmpty(Search.Service) && !string.IsNullOrEmpty(UserContext.Environment))
+                Search.Environment = UserContext.Environment;
             if (Search.ComparisonType == ApmComparisonTypes.None)
                 Search.ComparisonType = ApmComparisonTypes.Day;
         }
@@ -84,13 +84,13 @@ private async Task LoadServiceAsync()
             Name = StorageConst.ServiceName,
             Type = AggregateTypes.GroupBy
         };
-        if (!string.IsNullOrEmpty(Search.Enviroment) && Search.Enviroment != "All")
+        if (!string.IsNullOrEmpty(Search.Environment) && Search.Environment != "All")
         {
             query.Conditions = new List<FieldConditionDto> {
                 new FieldConditionDto{
                     Name=StorageConst.Environment,
                     Type= ConditionTypes.Equal,
-                    Value=Search.Enviroment
+                    Value=Search.Environment
                 }
             };
         }
@@ -101,7 +101,7 @@ private async Task LoadServiceAsync()
         isServiceLoading = false;
     }
 
-    private async Task LoadEnviromentAsync()
+    private async Task LoadEnvironmentAsync()
     {
         if (!ShowEnv) return;
         isEnvLoading = true;
@@ -113,9 +113,9 @@ private async Task LoadEnviromentAsync()
             Type = AggregateTypes.GroupBy
         };
         var result = await ApiCaller.TraceService.AggregateAsync<IEnumerable<string>>(query);
-        enviroments = result?.ToList() ?? new List<string>();
-        if (!string.IsNullOrEmpty(Search.Enviroment) && !enviroments.Contains(Search.Enviroment))
-            Search.Enviroment = default!;
+        environments = result?.ToList() ?? new List<string>();
+        if (!string.IsNullOrEmpty(Search.Environment) && !environments.Contains(Search.Environment))
+            Search.Environment = default!;
         isEnvLoading = false;
     }
 
@@ -129,14 +129,14 @@ private async Task OnTimeUpdate((DateTimeOffset? start, DateTimeOffset? end) tim
     {
         Search.Start = times.start!.Value.UtcDateTime;
         Search.End = times.end!.Value.UtcDateTime;
-        await LoadEnviromentAsync();
+        await LoadEnvironmentAsync();
         await LoadServiceAsync();
         await OnValueChanged();
     }
 
-    private async Task OnEnviromentChanged(string env)
+    private async Task OnEnvironmentChanged(string env)
     {
-        Search.Enviroment = env;
+        Search.Environment = env;
         await LoadServiceAsync();
         await OnValueChanged();
         StateHasChanged();

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
@@ -2,7 +2,7 @@
 @inherits ApmComponentBase
 
 
-<MDialog @bind-Value=Show>
+<MDialog Value=Show ValueChanged="CloseAsync">
     <ChildContent>
         <div class="@($"slide {(Show ? "slide_in" : "slide_out")}")">
             <MCard Class="slide slide_in">
@@ -52,16 +52,17 @@
             return;
         foreach (var key in dic.Keys)
         {
-            var currentName = string.IsNullOrEmpty(parent) ? key : $"{parent}.{key}";
-
-            var isShow = string.IsNullOrEmpty(search) || currentName.Contains(search, StringComparison.CurrentCultureIgnoreCase);
+            var currentName = string.IsNullOrEmpty(parent) ? key : $"{parent}.{key}";           
 
             var value = dic[key];
             if (IsFundamental(value.GetType()) || value.GetType().Equals(typeof(JsonElement)))
-            {
-                if (!isShow) continue;
+            {               
                 if (value is DateTime time)
                     value = time.UtcFormatLocal(CurrentTimeZone, "yyyy-MM-dd HH:mm:ss fff");
+
+                var isShow = string.IsNullOrEmpty(search) || currentName.Contains(search, StringComparison.CurrentCultureIgnoreCase) || value.ToString()!.Contains(search);
+                if (!isShow) continue;
+
                 <tr>
                     <td></td>
                     <td>@currentName</td>

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Data/Apm/SearchData.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Data/Apm/SearchData.cs
@@ -11,7 +11,7 @@ public class SearchData
 
     public DateTime End { get; set; }
 
-    public string? Enviroment { get; set; }
+    public string? Environment { get; set; }
 
     public string? Service { get; set; }
 

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/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))"
+                <a href="/apm/endpoints/@(HttpUtility.UrlEncode(context.Item.Name)+GetUrlParam(service: context.Item.Service, env: GetSearchEnv(Search.Environment, 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/Endpoint.razor.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoint.razor.cs
@@ -65,7 +65,7 @@ private async Task LoadPageDataAsync()
             Start = Search.Start,
             End = Search.End,
             OrderField = sortFiled,
-            Env = Search.Enviroment,
+            Env = Search.Environment,
             IsDesc = sortBy,
             Service = Search.Service,
             Queries=Search.Text
@@ -99,7 +99,7 @@ private async Task LoadChartDataAsync()
             End = Search.End,
             Endpoint=Search.Endpoint!,
             Service = Search.Service,
-            Env = Search.Enviroment
+            Env = Search.Environment
         };
         var result = await ApiCaller.ApmService.GetChartsAsync(query);
         if (result == null || !result.Any())

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/OverView.razor b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/OverView.razor
@@ -6,7 +6,7 @@
         <MCardSubtitle Class="d-flex">
             <div class="font-weight-black h6 ml-4 mt-2">@I18n.Apm("Chart.Latency")</div>
             <div class="ml-4">
-                <SSelect Placeholder="@I18n.Apm("Search.Enviroment")"
+                <SSelect Placeholder="@I18n.Apm("Search.Environment")"
                          Items="metricTypes"
                          TItem="(MetricTypes,string)"
                          TValue="MetricTypes"
@@ -17,7 +17,7 @@
                          Class="my-auto mr-1"
                          Small
                          BackgroundColor="white"
-                         ValueChanged="OnMetricTypeChanged" />
+                         @bind-Value="metricTypeChartData.MetricType" />
             </div>
         </MCardSubtitle>
         <MCardText>
@@ -31,7 +31,7 @@
         <div class="col-4 rounded-lg" style="border:solid #ccc 1px;height:354px">
             <MCard>
                 <MCardSubtitle Class="font-weight-black h6">
-                    @I18n.Apm("Chart.Thought")
+                    @I18n.Apm("Chart.Throughput")
                 </MCardSubtitle>
                 <MCardText>
                     @if (!throughput.ChartLoading && throughput.HasChart)
@@ -84,36 +84,5 @@
         </MCardText>
     </MCard>
 
-    <TimeLine Data="traceDetails" Errors="errors" Percentile="percentile" Page="page" Total="total" PageChanged="LoadTraceDetailAsync" />
-
-    @* <div class="d-flex pt-4">
-    <div class="col-4 rounded-lg" style="border:solid #ccc 1px;height:354px">
-    @if (!failed.ChartLoading && failed.HasChart)
-    {
-    <ShortEndpoint MetricType="metricTypeChartData.MetricType" />
-    }
-    </div>
-    <div class="col-8 pa-0">
-    <div style="border:solid #ccc 1px;height:354px" class="rounded-lg ml-4">
-    <ShortErrors />
-    </div>
-    </div>
-    </div> *@
-    @* <div class="d-flex pt-4">
-    <div class="col-4 rounded-lg" style="border:solid #ccc 1px;height:354px">
-    <MECharts Option="@(new ())" Width="80" Height="24" />
-    </div>
-    <div class="col-8 pa-0">
-    <div style="border:solid #ccc 1px;height:354px" class="rounded-lg ml-4">
-    short dependencies
-    </div>
-    </div>
-    </div>
-    <div class="rounded-lg mt-4" style="border:solid #ccc 1px;height:354px">
-    Instances latency distribution
-    <MECharts Option="@(new ())" Width="80" Height="24" />
-    </div>
-    <div class="rounded-lg mt-4" style="border:solid #ccc 1px;height:354px">
-    Instances
-    </div> *@
+    <TimeLine Data="traceDetails" Errors="errors" Percentile="percentile" Page="page" Total="total" PageChanged="LoadTraceDetailAsync" />    
 </div>
diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/OverView.razor.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/Endpoints/OverView.razor.cs
@@ -18,12 +18,7 @@ public partial class OverView
     int page = 1, total = 1;
     Dictionary<double, int> latencies = new();
     double percentile = 0;
-    //string? traceId = default;
-
-    private void OnMetricTypeChanged(MetricTypes type)
-    {
-        metricTypeChartData.MetricType = type;
-    }
+    //string? traceId = default;    
 
     protected override async Task OnParametersSetAsync()
     {
@@ -58,7 +53,7 @@ private async Task LoadTraceDetailAsync(int page = 1)
             End = SearchData.End,
             Endpoint = SearchData.Endpoint!,
             Service = SearchData.Service!,
-            Env = SearchData.Enviroment!,
+            Env = SearchData.Environment!,
             Page = this.page,
             PageSize = 1,
             Keyword = SearchData.Text
@@ -85,7 +80,7 @@ private async Task LoadTraceErrorsAsync(string traceId)
         {
             Start = SearchData.Start,
             End = SearchData.End,
-            Env = SearchData.Enviroment,
+            Env = SearchData.Environment,
             Queries = $"TraceId='{traceId}'",
             Page = 1,
             PageSize = 100
@@ -121,7 +116,7 @@ private async Task LoadDataAsync()
             Start = SearchData.Start,
             End = SearchData.End,
             Service = SearchData.Service,
-            Env = SearchData.Enviroment,
+            Env = SearchData.Environment,
             Endpoint = SearchData.Endpoint!,
             Queries = SearchData.Text,
             ComparisonType = SearchData.ComparisonType.ToComparisonType()
@@ -197,7 +192,7 @@ private async Task LoadDistributionDataAsync()
             Start = SearchData.Start,
             End = SearchData.End,
             Service = SearchData.Service,
-            Env = SearchData.Enviroment,
+            Env = SearchData.Environment,
             Endpoint = SearchData.Endpoint!,
             Queries = SearchData.Text,
             ComparisonType = SearchData.ComparisonType.ToComparisonType()

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
@@ -96,15 +96,14 @@
         foreach (var key in dic.Keys)
         {
             var currentName = string.IsNullOrEmpty(parent) ? key : $"{parent}.{key}";
-
-            var isShow = string.IsNullOrEmpty(search) || currentName.Contains(search, StringComparison.CurrentCultureIgnoreCase);
-
             var value = dic[key];
             if (IsFundamental(value.GetType()) || value.GetType().Equals(typeof(JsonElement)))
             {
-                if (!isShow) continue;
                 if (value is DateTime time)
                     value = time.UtcFormatLocal(CurrentTimeZone, "yyyy-MM-dd HH:mm:ss fff");
+                var isShow = string.IsNullOrEmpty(search) || currentName.Contains(search, StringComparison.CurrentCultureIgnoreCase) || value.ToString()!.Contains(search);
+                if (!isShow) continue;
+
                 <tr>
                     <td>@currentName</td>
                     <td><div class="right-error-text">@value</div></td>

diff --git a/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/ErrorDetail.razor.cs b/src/Web/Masa.Tsc.Web.Admin.Rcl/Pages/Apm/ErrorDetail.razor.cs
@@ -65,7 +65,7 @@ private async Task LoadLogAysnc()
         var result = await ApiCaller.LogService.GetPageAsync(new LogPageQueryDto
         {
             Service = Search.Service!,
-            Env = Search.Enviroment!,
+            Env = Search.Environment!,
             PageSize = 1,
             Page = currentPage,
             Query = Search.Text,
@@ -120,7 +120,7 @@ private async Task LoadChartDataAsync()
             //Queries = Search.Text,
             Service = Search.Service,
             Endpoint = Search.Endpoint!,
-            Env = Search.Enviroment,
+            Env = Search.Environment,
         };
         var result = await ApiCaller.ApmService.GetErrorChartAsync(query);
         errorChart.Data = ConvertLatencyChartData(result, lineName: "error count").Json;

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,13 +25,13 @@
             <a target="_blank"
                style="text-decoration:none"
                title="@context.Item.Type"
-               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))">
+               href="/apm/errors/@(HttpUtility.UrlEncode(context.Item.Type)+GetUrlParam(service:Search.Service,env: GetSearchEnv(Search.Environment), comparisonType: Search.ComparisonType, start: Search.Start, end: Search.End,exType:context.Item.Type,search:Search.Text))">
                 @context.Item.Type
             </a>
         }
         else if (context.Header.Value == nameof(ErrorMessageDto.Message))
         {
-            <div style="width:400px;overflow:hidden" class="text-truncate">
+            <div style="width:400px" class="text-truncate">
                 @context.Item.Message
             </div>
         }