Adding Health Checks UI
Tags: csharp, architecture, devops, dotnet
Published: 2020-09-22 23:06:50

This is the second article about Health Checks and application monitoring.

1 [Adding Health Check endpoint](https://rmauro.dev/adding-health-checks-to-net-core-application/)
2 **Adding UI Health Check** - this article
3 Using Azure to monitor the URL
4 Building your own monitoring tool

This article assumes that you already have Health Checks up and running. 
If not go back to [article](https://rmauro.dev/adding-health-checks-to-net-core-application/).

The source code of the last article can be found (here)[https://github.com/ricardodemauro/Health-Check-Series] - **branch article-1**.

In the last blog post we discuss how to add health checks to your application returning JSON format. 

But would be nice to have some UI to easily check the status of your application.

>Remember *JSON* is machine friendly and *UI* is human friendly.

###Adding UI to our Health Checks
First add the dependency packages to our project.
- AspNetCore.HealthChecks.UI
- AspNetCore.HealthChecks.UI.Client
- AspNetCore.HealthChecks.UI.InMemory.Storage

Now let's register the dependencies.

```csharp
public void ConfigureServices(IServiceCollection services)
{
        //adding health check services to container
        services.AddHealthChecks()
                .AddMongoDb(mongodbConnectionString: _configuration.GetConnectionString("DefaultMongo"),
                        name: "mongo",
                        failureStatus: HealthStatus.Unhealthy); //adding MongoDb Health Check

        //adding healthchecks UI
        services.AddHealthChecksUI(opt =>
        {
                opt.SetEvaluationTimeInSeconds(15); //time in seconds between check
                opt.MaximumHistoryEntriesPerEndpoint(60); //maximum history of checks
                opt.SetApiMaxActiveRequests(1); //api requests concurrency
                
                opt.AddHealthCheckEndpoint("default api", "/healthz"); //map health check api
        })
        .AddInMemoryStorage();
}
```

And them add to the application pipeline.

```csharp
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        //adding endpoint of health check for the health check ui in UI format
        endpoints.MapHealthChecks("/healthz", new HealthCheckOptions
        {
            Predicate = _ => true,
            ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse
        });

        //map healthcheck ui endpoing - default is /healthchecks-ui/
        endpoints.MapHealthChecksUI();

        endpoints.MapGet("/", async context => await context.Response.WriteAsync("Hello World!"));
    });
}
```
> `Startup.cs`

Note that we're adding another health check API endpoint called `/healthz` with a specific configuration. This is will be used by the UI Health Check.


All done. Now build, run, and open the browser Url `http://{YOUR-SERVER}/healthchecks-ui`.

![health-check-ui-1](https://res-3.cloudinary.com/ht54oxr6q/image/upload/q_auto/v1/ghost-blog-images/health-check-ui-1.png)

You can also customize the branding though CSS. For that I recommend going to the official website - [xabaril's site](https://github.com/xabaril/AspNetCore.Diagnostics.HealthChecks).

####References
- https://www.hanselman.com/blog/HowToSetUpASPNETCore22HealthChecksWithBeatPulsesAspNetCoreDiagnosticsHealthChecks.aspx

- https://github.com/xabaril/AspNetCore.Diagnostics.HealthChecks