Fix metrics instruments not updating in mobile view (#7608)

Author: JamesNK

src/Aspire.Dashboard/Components/Controls/TreeMetricSelector.razor.cs

@@ -20,4 +20,9 @@ public partial class TreeMetricSelector
 
     [Inject]
     public required TelemetryRepository TelemetryRepository { get; init; }
+
+    public void OnResourceChanged()
+    {
+        StateHasChanged();
+    }
 }

src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs

@@ -126,8 +126,8 @@ public Task UpdateViewModelFromQueryAsync(MetricsViewModel viewModel)
     {
         viewModel.SelectedDuration = _durations.SingleOrDefault(d => (int)d.Id.TotalMinutes == DurationMinutes) ?? _durations.Single(d => d.Id == s_defaultDuration);
         viewModel.SelectedApplication = _applicationViewModels.GetApplication(Logger, ApplicationName, canSelectGrouping: true, _selectApplication);
-        var selectedInstance = viewModel.SelectedApplication.Id?.GetApplicationKey();
-        viewModel.Instruments = selectedInstance != null ? TelemetryRepository.GetInstrumentsSummaries(selectedInstance.Value) : null;
+
+        UpdateInstruments(viewModel);
 
         viewModel.SelectedMeter = null;
         viewModel.SelectedInstrument = null;
@@ -144,6 +144,12 @@ public Task UpdateViewModelFromQueryAsync(MetricsViewModel viewModel)
         return Task.CompletedTask;
     }
 
+    private void UpdateInstruments(MetricsViewModel viewModel)
+    {
+        var selectedInstance = viewModel.SelectedApplication.Id?.GetApplicationKey();
+        viewModel.Instruments = selectedInstance != null ? TelemetryRepository.GetInstrumentsSummaries(selectedInstance.Value) : null;
+    }
+
     private void UpdateApplications()
     {
         _applications = TelemetryRepository.GetApplications();
@@ -154,22 +160,26 @@ private void UpdateApplications()
 
     private async Task HandleSelectedApplicationChangedAsync()
     {
+        UpdateInstruments(PageViewModel);
+
         // The new resource might not have the currently selected meter/instrument.
         // Check whether the new resource has the current values or not, and clear if they're not available.
         if (PageViewModel.SelectedMeter != null ||
             PageViewModel.SelectedInstrument != null)
         {
-            var selectedInstance = PageViewModel.SelectedApplication.Id?.GetApplicationKey();
-            var instruments = selectedInstance != null ? TelemetryRepository.GetInstrumentsSummaries(selectedInstance.Value) : null;
-
-            if (instruments == null || ShouldClearSelectedMetrics(instruments))
+            if (PageViewModel.Instruments == null || ShouldClearSelectedMetrics(PageViewModel.Instruments))
             {
                 PageViewModel.SelectedMeter = null;
                 PageViewModel.SelectedInstrument = null;
             }
         }
 
         await this.AfterViewModelChangedAsync(_contentLayout, waitToApplyMobileChange: true);
+
+        // The mobile view doesn't update the URL when the application changes.
+        // Because of this, the page doesn't autoamtically use updated instruments.
+        // Force the metrics tree to update so it re-renders with the new app's instruments.
+        _treeMetricSelector?.OnResourceChanged();
     }
 
     private bool ShouldClearSelectedMetrics(List<OtlpInstrumentSummary> instruments)

src/Aspire.Dashboard/Components/Pages/Metrics.razor.css

@@ -86,7 +86,8 @@
 }
 
 ::deep .metrics-content {
-    margin-left: 10px;
+    /* Match left padding of the page header */
+    margin-left: calc(var(--design-unit)* 4.5px);
 }
 
 ::deep .plotly-chart-container {