UI for dotnet-monitor

[SachiraChin]

Proposal

Integrate client application developed to interact with dotnet-monitor endpoints as optional in-built tool.

Repository: https://github.com/SachiraChin/dotnet-monitor-ui

Why?

While going though endpoints of REST endpoints provided by this tool, I found that there are lots features which are not easily accessible for end user without manually enter values in the URL. The POST endpoint for trace is completely inaccessible for user without using different tool.

For an user who wants to access this tool, it is much easier if tool itself provides an interface to interact with APIs. Further more, with an UI, user will be able to understand parameters without having need to go through documentation.

Solution

I have already developed a client application (https://github.com/SachiraChin/dotnet-monitor-ui) to interact with endpoints provided by dotnet-monitor. But as I discussed in dotnet/diagnostics#1346, this application will not work as an external tool without having CORS enabled in app itself. But if we move client application as an endpoint available in tool itself, CORS rules are not required for it to function.

This application is developed using Angular 10 and Angular Material 10. There are no other dependencies were added to this tool. Currently after production build, static files has 739 KB in total size, but I believe this can be further reduced.

Integration

Since APIs for dotnet-monitor built on top of ASP.NET Core IWebHostBuilder, we can use Microsoft.AspNetCore.SpaServices to serve static files as a web application from app itself. If needed, building web-ui application can be integrated to build of dotnet-monitor itself, but this has to managed properly due to the significant delays which can be caused on each time dotnet-monitor debugged from Visual Studio.

Conclusion

If the team would like to consider this integration, I can prepare proof-of-concept with the dotnet-monitor tool to show how it will work in the app. Thank you!

[hoyosjs]

cc: @davidfowl who's had some input around UIs and distribution in the dotnet-monitor development process. To be clear, we do want monitor's output to be readily consumable by tools that can help visualize the state of apps better.

[loic-sharma]

I like this idea 👍

Dart has something similar called Observatory that is very useful. You don't need an IDE to debug your Dart application, and, it's cross-platform.

[SachiraChin]

@hoyosjs @davidfowl @loic-sharma New update for dotnet-monitor UI is now available in the repo. Added support for /metrics endpoint and few improvements for UI. Have a look here. https://github.com/SachiraChin/dotnet-monitor-ui#updates