Resources graph (#7800)

Author: JamesNK

src/Aspire.Dashboard/Components/Controls/Chart/ChartContainer.razor.css

@@ -1,5 +1,5 @@
 ::deep .tab-label > svg {
-    margin-right: 2px;
+    margin-right: calc(var(--design-unit) * 1px);
 }
 
 ::deep .metric-tab {

src/Aspire.Dashboard/Components/Layout/DesktopNavMenu.razor

@@ -9,7 +9,7 @@
     {
         <FluentAppBarItem
             Href="@DashboardUrls.ResourcesUrl()"
-            Match="NavLinkMatch.All"
+            Match="@(_isResources ? NavLinkMatch.Prefix : NavLinkMatch.All)"
             IconRest="ResourcesIcon()"
             IconActive="ResourcesIcon(active: true)"
             Text="@Loc[nameof(Layout.NavMenuResourcesTab)]" />

src/Aspire.Dashboard/Components/Layout/DesktopNavMenu.razor.cs

@@ -1,13 +1,15 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
 using Microsoft.FluentUI.AspNetCore.Components;
 using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 
 namespace Aspire.Dashboard.Components.Layout;
 
-public partial class DesktopNavMenu : ComponentBase
+public partial class DesktopNavMenu : ComponentBase, IDisposable
 {
     internal static Icon ResourcesIcon(bool active = false) =>
         active ? new Icons.Filled.Size24.AppFolder()
@@ -28,4 +30,41 @@ internal static Icon TracesIcon(bool active = false) =>
     internal static Icon MetricsIcon(bool active = false) =>
         active ? new Icons.Filled.Size24.ChartMultiple()
                   : new Icons.Regular.Size24.ChartMultiple();
+
+    [Inject]
+    public required NavigationManager NavigationManager { get; init; }
+
+    // NavLink has limited options for matching the current address when highlighting itself as active.
+    // Can't use Match.All because of the query string. Can't use Match.Prefix always because it matches every page.
+    // Track whether we are on the resource page manually. If we are then change match to prefix to allow the query string.
+    private bool _isResources;
+
+    protected override void OnInitialized()
+    {
+        NavigationManager.LocationChanged += OnLocationChanged;
+        ProcessNavigationUri(NavigationManager.Uri);
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        ProcessNavigationUri(e.Location);
+    }
+
+    private void ProcessNavigationUri(string location)
+    {
+        if (Uri.TryCreate(location, UriKind.Absolute, out var result))
+        {
+            var isResources = result.AbsolutePath.TrimStart('/') == DashboardUrls.ResourcesBasePath;
+            if (isResources != _isResources)
+            {
+                _isResources = isResources;
+                StateHasChanged();
+            }
+        }
+    }
+
+    public void Dispose()
+    {
+        NavigationManager.LocationChanged -= OnLocationChanged;
+    }
 }

src/Aspire.Dashboard/Components/Pages/Resources.razor

@@ -8,6 +8,7 @@
 using Aspire.Dashboard.Components.Layout;
 using Aspire.Dashboard.Extensions;
 using Aspire.Dashboard.Model;
+using Aspire.Dashboard.Model.ResourceGraph;
 using Aspire.Dashboard.Otlp.Storage;
 using Aspire.Dashboard.Utils;
 using Humanizer;
@@ -18,7 +19,7 @@
 
 namespace Aspire.Dashboard.Components.Pages;
 
-public partial class Resources : ComponentBase, IAsyncDisposable
+public partial class Resources : ComponentBase, IAsyncDisposable, IPageWithSessionAndUrlState<Resources.ResourcesViewModel, Resources.ResourcesPageState>
 {
     private const string TypeColumn = nameof(TypeColumn);
     private const string NameColumn = nameof(NameColumn);
@@ -47,6 +48,14 @@ public partial class Resources : ComponentBase, IAsyncDisposable
     [Inject]
     public required ISessionStorage SessionStorage { get; init; }
 
+    public string BasePath => DashboardUrls.ResourcesBasePath;
+    public string SessionStorageKey => "Resources_PageState";
+    public ResourcesViewModel PageViewModel { get; set; } = null!;
+
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "view")]
+    public string? ViewKindName { get; set; }
+
     [CascadingParameter]
     public required ViewportInformation ViewportInformation { get; set; }
 
@@ -80,6 +89,8 @@ public partial class Resources : ComponentBase, IAsyncDisposable
     private GridColumnManager _manager = null!;
     private int _maxHighlightedCount;
     private readonly List<MenuButtonItem> _resourcesMenuItems = new();
+    private DotNetObjectReference<ResourcesInterop>? _resourcesInteropReference;
+    private IJSObjectReference? _jsModule;
     private AspirePageContentLayout? _contentLayout;
 
     private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
@@ -111,13 +122,15 @@ private async Task OnAllFilterVisibilityCheckedChangedAsync()
 
     private async Task OnResourceFilterVisibilityChangedAsync(string resourceType, bool isVisible)
     {
+        await UpdateResourceGraphResourcesAsync();
         await ClearSelectedResourceAsync();
         await _dataGrid.SafeRefreshDataAsync();
         UpdateMenuButtons();
     }
 
     private async Task HandleSearchFilterChangedAsync()
     {
+        await UpdateResourceGraphResourcesAsync();
         await ClearSelectedResourceAsync();
         await _dataGrid.SafeRefreshDataAsync();
     }
@@ -147,6 +160,11 @@ protected override async Task OnInitializedAsync()
             new GridColumn(Name: ActionsColumn, DesktopWidth: "minmax(150px, 1.5fr)", MobileWidth: "1fr")
         ];
 
+        PageViewModel = new ResourcesViewModel
+        {
+            SelectedViewKind = ResourceViewKind.Table
+        };
+
         _applicationUnviewedErrorCounts = TelemetryRepository.GetApplicationUnviewedErrorLogsCount();
         UpdateMenuButtons();
 
@@ -232,6 +250,7 @@ async Task SubscribeResourcesAsync()
                     }
 
                     UpdateMaxHighlightedCount();
+                    await UpdateResourceGraphResourcesAsync();
                     await InvokeAsync(async () =>
                     {
                         await _dataGrid.SafeRefreshDataAsync();
@@ -270,6 +289,47 @@ bool UpdateFromResource(ResourceViewModel resource, Func<string, bool> resourceT
         }
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (PageViewModel.SelectedViewKind == ResourceViewKind.Graph && _jsModule == null)
+        {
+            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/app-resourcegraph.js");
+
+            _resourcesInteropReference = DotNetObjectReference.Create(new ResourcesInterop(this));
+
+            await _jsModule.InvokeVoidAsync("initializeResourcesGraph", _resourcesInteropReference);
+            await UpdateResourceGraphResourcesAsync();
+        }
+    }
+
+    private async Task UpdateResourceGraphResourcesAsync()
+    {
+        if (PageViewModel.SelectedViewKind != ResourceViewKind.Graph || _jsModule == null)
+        {
+            return;
+        }
+
+        var activeResources = _resourceByName.Values.Where(Filter).OrderBy(e => e.ResourceType).ThenBy(e => e.Name).ToList();
+        var resources = activeResources.Select(r => ResourceGraphMapper.MapResource(r, _resourceByName, ColumnsLoc)).ToList();
+        await _jsModule.InvokeVoidAsync("updateResourcesGraph", resources);
+    }
+
+    private class ResourcesInterop(Resources resources)
+    {
+        [JSInvokable]
+        public async Task SelectResource(string id)
+        {
+            if (resources._resourceByName.TryGetValue(id, out var resource))
+            {
+                await resources.InvokeAsync(async () =>
+                {
+                    await resources.ShowResourceDetailsAsync(resource, null!);
+                    resources.StateHasChanged();
+                });
+            }
+        }
+    }
+
     internal IEnumerable<ResourceViewModel> GetFilteredResources()
     {
         return _resourceByName
@@ -355,6 +415,11 @@ private void UpdateMaxHighlightedCount()
 
     protected override async Task OnParametersSetAsync()
     {
+        if (await this.InitializeViewModelAsync())
+        {
+            return;
+        }
+
         if (ResourceName is not null)
         {
             if (_resourceByName.TryGetValue(ResourceName, out var selectedResource))
@@ -423,6 +488,11 @@ private async Task ClearSelectedResourceAsync(bool causedByUserAction = false)
 
         await InvokeAsync(StateHasChanged);
 
+        if (PageViewModel.SelectedViewKind == ResourceViewKind.Graph)
+        {
+            await UpdateResourceGraphSelectedAsync();
+        }
+
         if (_elementIdBeforeDetailsViewOpened is not null && causedByUserAction)
         {
             await JS.InvokeVoidAsync("focusElement", _elementIdBeforeDetailsViewOpened);
@@ -546,12 +616,88 @@ private bool HasAnyChildResources()
         return _resourceByName.Values.Any(r => !string.IsNullOrEmpty(r.GetResourcePropertyValue(KnownProperties.Resource.ParentName)));
     }
 
+    private Task OnTabChangeAsync(FluentTab newTab)
+    {
+        var id = newTab.Id?.Substring("tab-".Length);
+
+        if (id is null
+            || !Enum.TryParse(typeof(ResourceViewKind), id, out var o)
+            || o is not ResourceViewKind viewKind)
+        {
+            return Task.CompletedTask;
+        }
+
+        return OnViewChangedAsync(viewKind);
+    }
+
+    private async Task OnViewChangedAsync(ResourceViewKind newView)
+    {
+        PageViewModel.SelectedViewKind = newView;
+        await this.AfterViewModelChangedAsync(_contentLayout, waitToApplyMobileChange: true);
+
+        if (newView == ResourceViewKind.Graph)
+        {
+            await UpdateResourceGraphResourcesAsync();
+            await UpdateResourceGraphSelectedAsync();
+        }
+    }
+
+    private async Task UpdateResourceGraphSelectedAsync()
+    {
+        if (_jsModule != null)
+        {
+            await _jsModule.InvokeVoidAsync("updateResourcesGraphSelected", SelectedResource?.Name);
+        }
+    }
+
+    public sealed class ResourcesViewModel
+    {
+        public required ResourceViewKind SelectedViewKind { get; set; }
+    }
+
+    public class ResourcesPageState
+    {
+        public required string? ViewKind { get; set; }
+    }
+
+    public enum ResourceViewKind
+    {
+        Table,
+        Graph
+    }
+
+    public Task UpdateViewModelFromQueryAsync(ResourcesViewModel viewModel)
+    {
+        if (Enum.TryParse(typeof(ResourceViewKind), ViewKindName, out var view) && view is ResourceViewKind vk)
+        {
+            viewModel.SelectedViewKind = vk;
+        }
+
+        return Task.CompletedTask;
+    }
+
+    public string GetUrlFromSerializableViewModel(ResourcesPageState serializable)
+    {
+        return DashboardUrls.ResourcesUrl(view: serializable.ViewKind);
+    }
+
+    public ResourcesPageState ConvertViewModelToSerializable()
+    {
+        return new ResourcesPageState
+        {
+            ViewKind = (PageViewModel.SelectedViewKind != ResourceViewKind.Table) ? PageViewModel.SelectedViewKind.ToString() : null
+        };
+    }
+
     public async ValueTask DisposeAsync()
     {
+        _resourcesInteropReference?.Dispose();
         _watchTaskCancellationTokenSource.Cancel();
         _watchTaskCancellationTokenSource.Dispose();
         _logsSubscription?.Dispose();
 
+        await JSInteropHelpers.SafeDisposeAsync(_jsModule);
+
         await TaskHelpers.WaitIgnoreCancelAsync(_resourceSubscriptionTask);
     }
 }