diff --git a/src/Aspire.Dashboard/Components/Controls/TreeMetricSelector.razor.cs b/src/Aspire.Dashboard/Components/Controls/TreeMetricSelector.razor.cs index a3bb494873e..44b2947c7ca 100644 --- a/src/Aspire.Dashboard/Components/Controls/TreeMetricSelector.razor.cs +++ b/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(); + } } diff --git a/src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs b/src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs index a4fb31a0215..c03ad79a644 100644 --- a/src/Aspire.Dashboard/Components/Pages/Metrics.razor.cs +++ b/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,15 +160,14 @@ 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; @@ -170,6 +175,11 @@ private async Task HandleSelectedApplicationChangedAsync() } 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 instruments) diff --git a/src/Aspire.Dashboard/Components/Pages/Metrics.razor.css b/src/Aspire.Dashboard/Components/Pages/Metrics.razor.css index cf0ad24508e..49e1f199e55 100644 --- a/src/Aspire.Dashboard/Components/Pages/Metrics.razor.css +++ b/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 {