in ASPNET Core, Informatica

Monitoraggio Integrità – ASPNET Core – Parte 3

Reading Time: 2 minutes

Dopo il post precedente dove abbiamo descritto l’infrastruttura di un sistema per la verifica dell’integrità di servizi tramite ASPNET Core, in questo ultimo post mettiamo mano al codice per implementare il checker e ed un semplice client angular.

Realizzazione dell’architettura

Per poter implementare la soluzione partiamo dal template angular di ASPNET Core. Dalla linea di comando:

> dotnet new angular

che crearà l’applicazione MVC con all’interno della cartella ClientApp il codice dell’applicazione angular. Riassumiamo i passi affrontati nei post precedenti:

  • aggiunta della libreria Microsoft.AspNetCore.Diagnostics.HealthChecks  al progetto
  • aggiunta della classe custom per la realizzazione dei test
  • modifica del file Startup.cs aggiungendo il middleware
  • modifica del file Startup.cs aggiungendo l’elenco dei servizi da monitore

Al termine di questi steps abbiamo realizzato l’infrastruttura dell’applicazione che risponderà all’endpoint custom con la response in formato json. Il solito:

metterà in esecuzione la nostra applicazione in versione HTTP ed in versione HTTPS.

Realizzazione del client Angular

Aggiungiamo il nuovo component, dedicato alla visualizzazione dei dati all’interno dell’applicazione ClientApp:

> cd ClientApp
> ng g c health-check --module=app.module

usando i comandi standard di angular. Ovviamente dobbiamo aver installato prima la cli di angular. E’ necessario registrare la nuova route all’interno della nostra applicazione modificando il file app.module.ts:

  RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'health', component: HealthCheckComponent },
    ])

Per testare il funzionamento della nuova rotta possiamo raggiungere /health. Modifichiamo il codice di health-check.component.ts, aggiungendo HttpClient per interrogare il backend, ed impostando all’interno di ngOnInit() la chiamata verso l’API:

import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-health-check',
  templateUrl: './health-check.component.html',
  styleUrls: ['./health-check.component.css']
})
export class HealthCheckComponent implements OnInit {

  public result: Result; 

  constructor(private httpClient: HttpClient, @Inject('BASE_URL') private baseUrl: string) { 
  }

  ngOnInit() {
    this.httpClient.get<Result>(this.baseUrl + 'hc').subscribe(result => {
      this.result = result;
      }, error => console.error(error));
  }

}

//result message
interface Result {
  checks: Check[];
  totalStatus: string;
  totalResponseTime: number;
}

//single service response
interface Check {
  name: string;
  status: string;
  responseTime: number;
}

Per poter gestire le risposte, ho definito due Interface, la cui dichiarazione l’ho inserita all’interno del component. Per progetti più completi andrebbero posizionate all’interno di un cartella dedicata.

La nostra applicazione Angular è terminata. Provando ad accedere alla route /health e otterremo :

In questa serie di tre post abbiamo realizzato una semplice applicazione backend che consente di effettuare health check su servizi online. Inoltre abbiamo realizzato un semplice component angular per la visualizzazione dei dati online.

Ho pubblicato il codice dell’applicazione al link : https://github.com/amerlin/dotnetHealthcheck