Display referenced resources in the dashboard

[JamesNK]

I think it would be pretty useful to see what resources a resource is referencing in the dashboard.

builder.AddProject<Projects.MyFrontend>("frontend")
       .WithReference(basketService)
       .WithReference(catalogService.GetEndpoint("http"));

In the example above, the frontend resource would have two references. A reference would have:

• Resource name, e.g. catalogservice
• Endpoint name, e.g. http
• Value - URI string?, e.g. http://localhost:5653/

The resource model today doesn't have references, just the env vars used by the app. You could try to reverse engineer references by looking at environment variables, but it would be a pain in the butt. It is much easier to model it explicitly and display values from the model.

Edit: We could also display the reverse. What resources reference the current resource, e.g. basketservice is referenced by frontend and apigateway.

In the UI, call it dependencies and used by? That's what NuGet does:

• Dependencies - https://www.nuget.org/packages/Grpc.Net.Client#dependencies-body-tab
• Used by - https://www.nuget.org/packages/Grpc.Net.Client#usedby-body-tab

[JamesNK]

Note: I looks like the app model doesn't have this information (just env vars are added). Edit: Actually, EndpointReferenceAnnotation is added sometimes and other times (for connection strings?) it isn't.

It would need to be added to the app model, returned in the resource service (I added a comment to https://github.com/dotnet/aspire/issues/2415), the added to the resource detail UI.

[JamesNK]

cc @davidfowl @DamianEdwards

[davidfowl]

Here is the original issue and PR for modeling dependencies:

• https://github.com/dotnet/aspire/issues/183
• https://github.com/dotnet/aspire/pull/1138

This is the latest PR: https://github.com/dotnet/aspire/pull/2594. The goal is to move to a richer way of modeling references in things like environment variables and connection strings. Are you thinking we only show connection string references and endpoint references or more?

[davidfowl]

Also related https://github.com/dotnet/aspire/issues/1436

[davidfowl]

cc @IEvangelist was interested in this as well.

[IEvangelist]

Yeah, I had imagined that we should display a visual representation of the network topology.

This was drafted up with mermaid, assuming that we might want to use that in the dashboard. I wrote a Razor library POC to test out using mermaid.js, with the idea that it might be used for something like this. Ideally, we could either query the App Model or maybe even the manifest. With the dependency graph and some other runtime data, we could create a mermaid chart and render it like that. All of this was just an idea though...

[dahlsailrunner]

Love this thought / direction and it would be super helpful!!!