Add visible labels to resource select component and filter dialog (#3727

) * Consolidate (All) strings, add select a resource label to resource select, change console logs no selection to say (None) * Add labels to filter dialog inputs, use the same All and None labels everywhere, simplify * Select a resource -> Resource and remove Value placeholder in filter dialog * Change SelectAResource -> ResourceLabel * update resx designer --------- Co-authored-by: Adam Ratzman <[email protected]>
dotnet · Jul 31, 2024 · 4adf0e7 · 4adf0e7
1 parent 0914ca5
commit 4adf0e7
Show file tree

Hide file tree

Showing 55 changed files with 578 additions and 714 deletions.
diff --git a/src/Aspire.Dashboard/Components/Controls/Chart/ChartFilters.razor b/src/Aspire.Dashboard/Components/Controls/Chart/ChartFilters.razor
@@ -13,12 +13,12 @@
             <FluentDataGrid Items="@Queryable.AsQueryable(ChartViewModel.DimensionFilters)" GridTemplateColumns="200px 1fr auto" GenerateHeader="GenerateHeaderOption.None">
                 <ChildContent>
                     <PropertyColumn Tooltip="true" TooltipText="@(c => c.Name)" Property="@(c => c.Name)"/>
-                    <TemplateColumn Tooltip="true" TooltipText="@(c => c.SelectedValues.Count == 0 ? Loc[nameof(ControlsStrings.ChartContainerNoneSelected)] : string.Join(", ", c.SelectedValues.Select(v => v.Name)))">
+                    <TemplateColumn Tooltip="true" TooltipText="@(c => c.SelectedValues.Count == 0 ? Loc[nameof(ControlsStrings.None)] : string.Join(", ", c.SelectedValues.Select(v => v.Name)))">
                         <FluentOverflow Class="dimension-overflow">
                             <ChildContent>
                                 @if (context.SelectedValues.Count == 0)
                                 {
-                                    <FluentBadge>@Loc[nameof(ControlsStrings.ChartContainerNoneSelected)]</FluentBadge>
+                                    <FluentBadge>@Loc[nameof(ControlsStrings.None)]</FluentBadge>
                                 }
                                 else
                                 {

diff --git a/src/Aspire.Dashboard/Components/Controls/ResourceSelect.razor b/src/Aspire.Dashboard/Components/Controls/ResourceSelect.razor
@@ -1,7 +1,15 @@
 @using Aspire.Dashboard.Resources
 
+@inject IStringLocalizer<ControlsStrings> Loc
+
+<FluentInputLabel
+    Label="@Loc[nameof(ControlsStrings.ResourceLabel)]"
+    ForId="@_selectId"
+    Orientation="Orientation.Horizontal" />
+
 <FluentSelect @ref="_resourceSelectComponent"
               Items="Resources"
+              Id="@_selectId"
               OptionValue="@(c => c!.Name)"
               OptionDisabled="@(c => c!.Id?.Type is Otlp.Model.OtlpApplicationType.ResourceGrouping)"
               SelectedOption="SelectedResource"

diff --git a/src/Aspire.Dashboard/Components/Controls/ResourceSelect.razor.cs b/src/Aspire.Dashboard/Components/Controls/ResourceSelect.razor.cs
@@ -15,6 +15,8 @@ public partial class ResourceSelect
     private const int MaxVisibleResourceOptions = 15;
     private const int SelectPadding = 8; // 4px top + 4px bottom
 
+    private readonly string _selectId = $"resource-select-{Guid.NewGuid():N}";
+
     [Parameter]
     public IEnumerable<SelectViewModel<ResourceTypeDetails>> Resources { get; set; } = default!;
 

diff --git a/src/Aspire.Dashboard/Components/Dialogs/FilterDialog.razor b/src/Aspire.Dashboard/Components/Dialogs/FilterDialog.razor
@@ -9,20 +9,33 @@
 <EditForm EditContext="@EditContext" OnValidSubmit="@Apply">
     <DataAnnotationsValidator />
 
-    <FluentStack Orientation="Orientation.Vertical" VerticalGap="8">
-        <FluentCombobox TOption="SelectViewModel<string>"
-                        Placeholder="@Loc[nameof(Dialogs.FilterDialogFieldPlaceholder)]"
-                        Items="@_parameters"
-                        @bind-SelectedOption="@_formModel.Parameter"
-                        Width="100%"
-                        Height="500px"
-                        OptionText="@(c => c.Name)"
-                        OptionDisabled="@(c => c.Id is null)" />
+    <FluentStack Orientation="Orientation.Vertical" VerticalGap="12">
+        <div class="filter-input-container">
+            <FluentCombobox TOption="SelectViewModel<string>"
+                            Placeholder="@Loc[nameof(Dialogs.FilterDialogFieldPlaceholder)]"
+                            Label="@Loc[nameof(Dialogs.FilterDialogParameterInputLabel)]"
+                            Items="@_parameters"
+                            @bind-SelectedOption="@_formModel.Parameter"
+                            Width="100%"
+                            Height="500px"
+                            OptionText="@(c => c.Name)"
+                            OptionDisabled="@(c => c.Id is null)" />
+        </div>
 
-        <FluentSelect TOption="SelectViewModel<FilterCondition>" Items="@_filterConditions" @bind-SelectedOption="@_formModel.Condition" aria-label="@Loc[Dialogs.FilterDialogConditionSelectLabel]" OptionText="@(i => i.Name)" Width="100%" />
+        <div class="filter-input-container">
+            <FluentSelect TOption="SelectViewModel<FilterCondition>"
+                          Items="@_filterConditions"
+                          @bind-SelectedOption="@_formModel.Condition"
+                          Label="@Loc[nameof(Dialogs.FilterDialogConditionInputLabel)]"
+                          OptionText="@(i => i.Name)"
+                          Width="100%" />
+        </div>
 
-        <FluentTextField @bind-Value="_formModel.Value" Placeholder="@Loc[nameof(Dialogs.FilterDialogTextValuePlaceholder)]" />
-        <ValidationMessage For="() => _formModel.Value" />
+        <div class="filter-input-container">
+            <FluentTextField @bind-Value="_formModel.Value"
+                             Label="@Loc[nameof(Dialogs.FilterDialogTextValuePlaceholder)]" />
+            <ValidationMessage For="() => _formModel.Value" />
+        </div>
 
         <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Right">
             <FluentButton OnClick="Cancel">@Loc[nameof(Dialogs.FilterDialogCancelButtonText)]</FluentButton>

diff --git a/src/Aspire.Dashboard/Components/Pages/ConsoleLogs.razor b/src/Aspire.Dashboard/Components/Pages/ConsoleLogs.razor
@@ -19,7 +19,7 @@
         <ToolbarSection>
             <ResourceSelect @ref="_resourceSelectComponent"
                             Resources="_resources"
-                            AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAResource)]"
+                            AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.ResourceLabel)]"
                             @bind-SelectedResource="PageViewModel.SelectedOption"
                             @bind-SelectedResource:after="HandleSelectedOptionChangedAsync" />
             @if (ViewportInformation.IsDesktop)

diff --git a/src/Aspire.Dashboard/Components/Pages/ConsoleLogs.razor.cs b/src/Aspire.Dashboard/Components/Pages/ConsoleLogs.razor.cs
@@ -64,7 +64,7 @@ public sealed partial class ConsoleLogs : ComponentBase, IAsyncDisposable, IPage
 
     protected override async Task OnInitializedAsync()
     {
-        _noSelection = new() { Id = null, Name = ControlsStringsLoc[nameof(ControlsStrings.SelectAResource)] };
+        _noSelection = new() { Id = null, Name = ControlsStringsLoc[nameof(ControlsStrings.None)] };
         PageViewModel = new ConsoleLogsViewModel { SelectedOption = _noSelection, SelectedResource = null, Status = Loc[nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsLoadingResources)] };
 
         var loadingTcs = new TaskCompletionSource();

diff --git a/src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs b/src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs
@@ -80,7 +80,7 @@ protected override Task OnInitializedAsync()
         _selectApplication = new SelectViewModel<ResourceTypeDetails>
         {
             Id = null,
-            Name = ControlsStringsLoc[ControlsStrings.SelectAResource]
+            Name = ControlsStringsLoc[ControlsStrings.None]
         };
 
         PageViewModel = new MetricsViewModel

diff --git a/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs b/src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs
@@ -142,12 +142,12 @@ protected override Task OnInitializedAsync()
         _allApplication = new()
         {
             Id = null,
-            Name = Loc[nameof(Dashboard.Resources.ControlsStrings.All)]
+            Name = ControlsStringsLoc[nameof(Dashboard.Resources.ControlsStrings.All)]
         };
 
         _logLevels = new List<SelectViewModel<LogLevel?>>
         {
-            new SelectViewModel<LogLevel?> { Id = null, Name = $"({Loc[nameof(Dashboard.Resources.ControlsStrings.All)]})" },
+            new SelectViewModel<LogLevel?> { Id = null, Name = ControlsStringsLoc[nameof(Dashboard.Resources.ControlsStrings.All)] },
             new SelectViewModel<LogLevel?> { Id = LogLevel.Trace, Name = "Trace" },
             new SelectViewModel<LogLevel?> { Id = LogLevel.Debug, Name = "Debug" },
             new SelectViewModel<LogLevel?> { Id = LogLevel.Information, Name = "Information" },

diff --git a/src/Aspire.Dashboard/Components/Pages/Traces.razor.cs b/src/Aspire.Dashboard/Components/Pages/Traces.razor.cs
@@ -124,7 +124,7 @@ await MessageService.ShowMessageBarAsync(options =>
 
     protected override Task OnInitializedAsync()
     {
-        _allApplication = new SelectViewModel<ResourceTypeDetails> { Id = null, Name = $"({ControlsStringsLoc[nameof(ControlsStrings.All)]})" };
+        _allApplication = new SelectViewModel<ResourceTypeDetails> { Id = null, Name = ControlsStringsLoc[nameof(ControlsStrings.All)] };
         PageViewModel = new TracesPageViewModel { SelectedApplication = _allApplication };
 
         UpdateApplications();