unos-fe: 各状態のオブジェクトの数を表示するように

This commit is contained in:
usbharu 2024-03-13 16:19:13 +09:00
parent ea80da90d2
commit ae47b29216
Signed by: usbharu
GPG Key ID: 6556747BF94EEBC8
4 changed files with 30 additions and 0 deletions

View File

@ -0,0 +1,3 @@
import {Status} from "./Status";
export type StatusIntMap = Record<Status, number>

View File

@ -3,6 +3,7 @@ import {Observable} from "rxjs";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {Metric} from "../models/Metric"; import {Metric} from "../models/Metric";
import {map} from 'rxjs/operators'; import {map} from 'rxjs/operators';
import {StatusIntMap} from "../models/StatusIntMap";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -31,4 +32,16 @@ export class FetchMetricsService {
getOk():Observable<Metric[]>{ getOk():Observable<Metric[]>{
return this.fetchMetrics("http://localhost:4200/api/v1/metrics/ok") return this.fetchMetrics("http://localhost:4200/api/v1/metrics/ok")
} }
getUnknown():Observable<Metric[]> {
return this.fetchMetrics("http://localhost:4200/api/v1/metrics/unknown")
}
getNotGood():Observable<Metric[]> {
return this.fetchMetrics("http://localhost:4200/api/v1/metrics/not-good")
}
getCount():Observable<StatusIntMap>{
return this.http.get<StatusIntMap>("http://localhost:4200/api/v1/metrics")
}
} }

View File

@ -1,5 +1,12 @@
<h1>Watch Dog</h1> <h1>Watch Dog</h1>
<div class="watchdog-count">
<p>OK {{count.OK || 0}}</p>
<p>NOT GOOD {{count.NOT_GOOD || 0 }}</p>
<p>DEAD {{count.DEAD || 0 }}</p>
<p>UNKNOWN {{count.UNKNOWN || 0}}</p>
</div>
<div class="watchdog-dead" *ngFor="let metric of deads"> <div class="watchdog-dead" *ngFor="let metric of deads">
<p class="metric-name">{{ metric.name }}</p> <p class="metric-name">{{ metric.name }}</p>
</div> </div>

View File

@ -4,6 +4,7 @@ import {Metric} from "../models/Metric";
import {NgForOf} from "@angular/common"; import {NgForOf} from "@angular/common";
import {RouterOutlet} from "@angular/router"; import {RouterOutlet} from "@angular/router";
import {HttpClientModule} from "@angular/common/http"; import {HttpClientModule} from "@angular/common/http";
import {StatusIntMap} from "../models/StatusIntMap";
@Component({ @Component({
selector: 'app-watchdog-top', selector: 'app-watchdog-top',
@ -23,6 +24,7 @@ export class WatchdogTopComponent implements OnInit{
deads: Metric[] = [] deads: Metric[] = []
ok: Metric[] = []; ok: Metric[] = [];
count: StatusIntMap = <StatusIntMap>{};
constructor(private fetchMetricsService: FetchMetricsService) { constructor(private fetchMetricsService: FetchMetricsService) {
} }
@ -30,6 +32,7 @@ export class WatchdogTopComponent implements OnInit{
ngOnInit(): void { ngOnInit(): void {
this.getDead() this.getDead()
this.getOk() this.getOk()
this.getCount()
} }
@ -43,4 +46,8 @@ export class WatchdogTopComponent implements OnInit{
getOk():void{ getOk():void{
this.fetchMetricsService.getOk().subscribe(res =>{this.ok = res}) this.fetchMetricsService.getOk().subscribe(res =>{this.ok = res})
} }
getCount():void{
this.fetchMetricsService.getCount().subscribe(res => (this.count = res))
}
} }