dotnet · adamint · Dec 6, 2023 · Dec 6, 2023 · Dec 6, 2023 · Dec 6, 2023
diff --git a/src/Aspire.Dashboard/Aspire.Dashboard.csproj b/src/Aspire.Dashboard/Aspire.Dashboard.csproj
@@ -31,4 +31,22 @@
     <InternalsVisibleTo Include="Aspire.Dashboard.Tests" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Compile Update="Resources\ControlsStrings.Designer.cs">
+      <DesignTime>True</DesignTime>
+      <AutoGen>True</AutoGen>
+      <DependentUpon>ControlsStrings.resx</DependentUpon>
+    </Compile>
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Update="Resources\ControlsStrings.resx">
+      <XlfSourceFormat>Resx</XlfSourceFormat>
+      <XlfOutputItem>EmbeddedResource</XlfOutputItem>
+      <SubType>Designer</SubType>
+      <Generator>PublicResXFileCodeGenerator</Generator>
+      <LastGenOutput>ControlsStrings.Designer.cs</LastGenOutput>
+    </EmbeddedResource>
+  </ItemGroup>
+
 </Project>
diff --git a/src/Aspire.Dashboard/Components/Controls/ChartContainer.razor b/src/Aspire.Dashboard/Components/Controls/ChartContainer.razor
@@ -3,10 +3,12 @@
 @using Aspire.Dashboard.Model
 @using Aspire.Dashboard.Otlp.Model
 @using Aspire.Dashboard.Otlp.Model.MetricValues
+@using Aspire.Dashboard.Resources
+@inject IStringLocalizer<ControlsStrings> Loc
 
-@if (_instrument == null)
+@if (_instrument is null)
 {
-    <div>Unable to display chart.</div>
+    <div>@Loc[nameof(ControlsStrings.ChartContainerUnableToDisplay)]</div>
 }
 else
 {
@@ -22,7 +24,7 @@ else
         {
             <div class="metrics-filters-container">
                 <div style="margin-left: 10px">
-                    <h5>Filters</h5>
+                    <h5>@Loc[ControlsStrings.ChartContainerFiltersHeader]</h5>
                     <table style="width:100%">
                         @foreach (var item in _viewModel.DimensionFilters)
                         {
@@ -31,8 +33,8 @@ else
                                 <td class="dimension-values" title="@string.Join(", ", item.SelectedValues.Select(v => v.Name))">
                                     <FluentAutocomplete TOption="DimensionValueViewModel"
                                                         Width="250px"
-                                                        Placeholder="Select filters"
-                                                        AriaLabel="Select filters"
+                                                        Placeholder="@Loc[ControlsStrings.ChartContainerSelectFilters]"
+                                                        AriaLabel="@Loc[ControlsStrings.ChartContainerSelectFilters]"
                                                         OnOptionsSearch="item.OnSearchAsync"
                                                         OptionText="@(item => item.Name)"
                                                         @bind-SelectedOptions="item.SelectedValues"
@@ -44,5 +46,5 @@ else
                 </div>
             </div>
         }
-    </div>    
+    </div>
 }
diff --git a/src/Aspire.Dashboard/Components/Controls/EnvironmentVariables.razor b/src/Aspire.Dashboard/Components/Controls/EnvironmentVariables.razor
@@ -1,4 +1,6 @@
 @using Aspire.Dashboard.Model
+@using Aspire.Dashboard.Resources
+@inject IStringLocalizer<ControlsStrings> Loc
 
 <div class="environment-variables-layout">
 
@@ -7,18 +9,18 @@
         {
             <FluentButton Appearance="Appearance.Lightweight"
                           IconEnd="@(_showAll ? _showSpecOnlyIcon : _showAllIcon)"
-                          Title="@(_showAll ? "Show Spec Only" : "Show All")"
-                          aria-label="@(_showAll ? "Show Spec Only" : "Show All")"
+                          Title="@(_showAll ? Loc[ControlsStrings.EnvironmentVariablesFilterToggleShowSpecOnly] : ControlsStrings.EnvironmentVariablesFilterToggleShowAll)"
+                          aria-label="@(_showAll ? Loc[ControlsStrings.EnvironmentVariablesFilterToggleShowSpecOnly] : ControlsStrings.EnvironmentVariablesFilterToggleShowAll)"
                           OnClick="() => _showAll = !_showAll"
                           slot="end" />
         }
         <FluentButton Appearance="Appearance.Lightweight"
                       IconEnd="@(_defaultMasked ? _unmaskIcon : _maskIcon)"
-                      Title="@(_defaultMasked ? "Show Values" : "Hide Values")"
-                      aria-label="@(_defaultMasked ? "Show Values" : "Hide Values")"
+                      Title="@(_defaultMasked ? Loc[ControlsStrings.EnvironmentVariablesShowVariableValues] : Loc[ControlsStrings.EnvironmentVariablesHideVariableValues])"
+                      aria-label="@(_defaultMasked ? Loc[ControlsStrings.EnvironmentVariablesShowVariableValues] : Loc[ControlsStrings.EnvironmentVariablesHideVariableValues])"
                       OnClick="ToggleMaskState"
                       slot="end" />
-        <FluentSearch Placeholder="Filter..."
+        <FluentSearch Placeholder="@Loc[ControlsStrings.FilterPlaceholder]"
                       Immediate="true"
                       Autofocus="true"
                       @bind-Value="_filter"

diff --git a/src/Aspire.Dashboard/Components/Controls/GridValue.razor b/src/Aspire.Dashboard/Components/Controls/GridValue.razor
@@ -1,4 +1,6 @@
-@inject IJSRuntime JS
+@using Aspire.Dashboard.Resources
+@inject IJSRuntime JS
+@inject IStringLocalizer<ControlsStrings> Loc
 
 <div class="@GetContainerClass()">
     @if (EnableMasking && IsMasked)
@@ -24,15 +26,15 @@
     {
         <FluentButton Appearance="Appearance.Lightweight"
                       IconEnd="@(IsMasked ? _unmaskIcon : _maskIcon)"
-                      Title="@(IsMasked ? "Show Value" : "Hide Value")"
+                      Title="@(IsMasked ? Loc[ControlsStrings.GridValueMaskShowValue] : Loc[ControlsStrings.GridValueMaskHideValue])"
                       OnClick="ToggleMaskStateAsync"
-                      aria-label="@(IsMasked ? "Show Value" : "Hide Value")" />
+                      aria-label="@(IsMasked ? Loc[ControlsStrings.GridValueMaskShowValue] : Loc[ControlsStrings.GridValueMaskHideValue])" />
     }
     <FluentButton Appearance="Appearance.Lightweight"
                   Id="@_anchorId"
                   IconEnd="@(new Icons.Regular.Size16.Copy())"
                   Class="defaultHidden"
                   @onclick="@(() => CopyTextToClipboardAsync(Value, @_anchorId))"
-                  aria-label="Copy to Clipboard" />
+                  aria-label="@Loc[ControlsStrings.GridValueCopyToClipboard]" />
     <FluentTooltip Anchor="@_anchorId" Position="TooltipPosition.Top">@PreCopyToolTip</FluentTooltip>
 </div>
diff --git a/src/Aspire.Dashboard/Components/Controls/PlotlyChart.razor b/src/Aspire.Dashboard/Components/Controls/PlotlyChart.razor
@@ -1,3 +1,5 @@
-@namespace Aspire.Dashboard.Components
+@using Aspire.Dashboard.Resources
+@namespace Aspire.Dashboard.Components
+@inject IStringLocalizer<ControlsStrings> Loc
 
 <div id="plotly-chart-container" style="width:650px; height:400px"></div>
diff --git a/src/Aspire.Dashboard/Components/Controls/PlotlyChart.razor.cs b/src/Aspire.Dashboard/Components/Controls/PlotlyChart.razor.cs
@@ -6,6 +6,7 @@
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Otlp.Model;
 using Aspire.Dashboard.Otlp.Model.MetricValues;
+using Aspire.Dashboard.Resources;
 using Humanizer;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
@@ -436,7 +437,7 @@ await JSRuntime.InvokeVoidAsync("updateChart",
         }
     }
 
-    private static string GetDisplayedUnit(OtlpInstrument instrument)
+    private string GetDisplayedUnit(OtlpInstrument instrument)
     {
         if (!string.IsNullOrEmpty(instrument.Unit))
         {
@@ -448,15 +449,15 @@ private static string GetDisplayedUnit(OtlpInstrument instrument)
         // but have a descriptive name that lets us infer the unit.
         if (instrument.Name.EndsWith(".count"))
         {
-            return "Count";
+            return Loc[ControlsStrings.PlotlyChartCount];
         }
         else if (instrument.Name.EndsWith(".length"))
         {
-            return "Length";
+            return Loc[ControlsStrings.PlotlyChartLength];
         }
         else
         {
-            return "Value";
+            return Loc[ControlsStrings.PlotlyChartValue];
         }
     }
 }
diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor b/src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor
@@ -1,14 +1,16 @@
-@typeparam TItem
+@using Aspire.Dashboard.Resources
+@typeparam TItem
+@inject IStringLocalizer<ControlsStrings> Loc
 
 <FluentDataGrid Items="@Items"
                 ResizableColumns="true"
                 Style="width:100%"
                 GenerateHeader="GenerateHeaderOption.Sticky"
                 GridTemplateColumns="@GridTemplateColumns">
-    <TemplateColumn Title="@NameColumnTitle" Class="nameColumn" SortBy="@NameSort" Sortable="@IsNameSortable">
+    <TemplateColumn Title="@(NameColumnTitle ?? Loc[ControlsStrings.PropertyGridNameColumnTitle])" Class="nameColumn" SortBy="@NameSort" Sortable="@IsNameSortable">
         <GridValue Value="@NameColumnValue(context)" HighlightText="@HighlightText" />
     </TemplateColumn>
-    <TemplateColumn Title="@ValueColumnTitle" Class="valueColumn" SortBy="@ValueSort" Sortable="@IsValueSortable">
+    <TemplateColumn Title="@(ValueColumnTitle ?? Loc[ControlsStrings.PropertyGridValueColumnTitle])" Class="valueColumn" SortBy="@ValueSort" Sortable="@IsValueSortable">
         <GridValue Value="@ValueColumnValue(context)" HighlightText="@HighlightText"
                    EnableMasking="@EnableValueMasking" IsMasked="@GetIsItemMasked(context)"
                    IsMaskedChanged="(newValue) => OnIsMaskedChanged(context, newValue)" />

diff --git a/src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor.cs b/src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor.cs
@@ -8,17 +8,18 @@ namespace Aspire.Dashboard.Components.Controls;
 
 public partial class PropertyGrid<TItem>
 {
+
     [Parameter, EditorRequired]
     public IQueryable<TItem>? Items { get; set; }
 
     [Parameter]
     public string GridTemplateColumns { get; set; } = "1fr 1fr";
 
     [Parameter]
-    public string NameColumnTitle { get; set; } = "Name";
+    public string? NameColumnTitle { get; set; }
 
     [Parameter]
-    public string ValueColumnTitle { get; set; } = "Value";
+    public string? ValueColumnTitle { get; set; }
 
     [Parameter]
     public GridSort<TItem>? NameSort { get; set; }

diff --git a/src/Aspire.Dashboard/Components/Controls/SpanDetails.razor b/src/Aspire.Dashboard/Components/Controls/SpanDetails.razor
@@ -1,22 +1,24 @@
 @using Aspire.Dashboard.Model
 @using Aspire.Dashboard.Otlp.Model
+@using Aspire.Dashboard.Resources
+@inject IStringLocalizer<ControlsStrings> Loc
 
 <div class="span-details-layout">
     <FluentToolbar Orientation="Orientation.Horizontal">
         <div>
-            Service <strong>@ViewModel.Span.Source.ApplicationName</strong>
+            @((MarkupString)string.Format(ControlsStrings.SpanDetailsService, ViewModel.Span.Source.ApplicationName))
         </div>
         <FluentDivider Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
         <div>
-            Duration <strong>@DurationFormatter.FormatDuration(ViewModel.Span.Duration)</strong>
+            @((MarkupString)string.Format(ControlsStrings.SpanDetailsDuration, DurationFormatter.FormatDuration(ViewModel.Span.Duration)))
         </div>
         <FluentDivider Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
         <div>
-            Start Time <strong>@DurationFormatter.FormatDuration(ViewModel.Span.StartTime - ViewModel.Span.Trace.FirstSpan.StartTime)</strong>
+            @((MarkupString)string.Format(ControlsStrings.SpanDetailsStartTime, DurationFormatter.FormatDuration(ViewModel.Span.StartTime - ViewModel.Span.Trace.FirstSpan.StartTime)))
         </div>
-        <FluentAnchor slot="end" Appearance="Appearance.Lightweight" Href="@($"/StructuredLogs?spanId={ViewModel.Span.SpanId}")">View Logs</FluentAnchor>
+        <FluentAnchor slot="end" Appearance="Appearance.Lightweight" Href="@($"/StructuredLogs?spanId={ViewModel.Span.SpanId}")">@Loc[ControlsStrings.SpanDetailsViewLogsLink]</FluentAnchor>
         <FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
-        <FluentSearch Placeholder="Filter..."
+        <FluentSearch Placeholder="@Loc[ControlsStrings.FilterPlaceholder]"
                       Immediate="true"
                       Autofocus="true"
                       @bind-Value="_filter"

diff --git a/src/Aspire.Dashboard/Components/Controls/StructuredLogDetails.razor b/src/Aspire.Dashboard/Components/Controls/StructuredLogDetails.razor
@@ -1,8 +1,10 @@
 @using Aspire.Dashboard.Model
+@using Aspire.Dashboard.Resources
+@inject IStringLocalizer<ControlsStrings> Loc
 
 <div class="structured-log-details-layout">
     <FluentToolbar Orientation="Orientation.Horizontal">
-        <FluentSearch Placeholder="Filter..."
+        <FluentSearch Placeholder="@Loc[ControlsStrings.FilterPlaceholder]"
                       Immediate="true"
                       Autofocus="true"
                       @bind-Value="_filter"

diff --git a/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor b/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor
@@ -1,4 +1,7 @@
-<div class="summary-details-container">
+@using Aspire.Dashboard.Resources
+@inject IStringLocalizer<ControlsStrings> Loc
+
+<div class="summary-details-container">
     <FluentSplitter Orientation="@Orientation" Collapsed="@(!ShowDetails)"
                     OnResized="HandleSplitterResize"
                     Panel1Size="@_panel1Size" Panel2Size="@_panel2Size"
@@ -23,10 +26,10 @@
                         <FluentButton Appearance="Appearance.Stealth"
                                       IconEnd="@(Orientation == Orientation.Horizontal ? _splitHorizontalIcon : _splitVerticalIcon)"
                                       OnClick="HandleToggleOrientation"
-                                      Title="@(Orientation == Orientation.Horizontal ? "Split Horizontal" : "Split Vertical")"
-                                      aria-label="@(Orientation == Orientation.Horizontal ? "Split Horizontal" : "Split Vertical")" />
+                                      Title="@(Orientation == Orientation.Horizontal ? Loc[ControlsStrings.SummaryDetailsViewSplitHorizontal] : Loc[ControlsStrings.SummaryDetailsViewSplitVertical])"
+                                      aria-label="@(Orientation == Orientation.Horizontal ? Loc[ControlsStrings.SummaryDetailsViewSplitHorizontal] : Loc[ControlsStrings.SummaryDetailsViewSplitVertical])" />
                         <FluentButton Appearance="Appearance.Stealth" IconEnd="@(new Icons.Regular.Size16.Dismiss())"
-                                      OnClick="HandleDismissAsync" Title="Close" aria-label="Close" />
+                                      OnClick="HandleDismissAsync" Title="@Loc[ControlsStrings.SummaryDetailsViewCloseView]" aria-label="@Loc[ControlsStrings.SummaryDetailsViewCloseView]" />
                     </div>
                 </header>
                 @Details

diff --git a/src/Aspire.Dashboard/Components/Controls/TotalItemsFooter.razor b/src/Aspire.Dashboard/Components/Controls/TotalItemsFooter.razor
@@ -1,6 +1,8 @@
-@namespace Aspire.Dashboard.Components
+@using Aspire.Dashboard.Resources
+@namespace Aspire.Dashboard.Components
+@inject IStringLocalizer<ControlsStrings> Loc
 
-<div class="total-items-footer">Total: <strong>@_totalItemCount results found</strong></div>
+<div class="total-items-footer">@((MarkupString)string.Format(Loc[ControlsStrings.TotalItemsFooterText], _totalItemCount))</div>
 
 @code {
     private int _totalItemCount;

diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.cs.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.cs.xlf
diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.de.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.de.xlf
diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.es.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.es.xlf
diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.fr.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.fr.xlf
diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.it.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.it.xlf
diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.ja.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.ja.xlf
diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.ko.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.ko.xlf
diff --git a/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.pl.xlf b/src/Aspire.Dashboard/Components/Controls/xlf/ControlsStrings.pl.xlf