unos-fe/src/app/watchdog/metric-list-item/metric-list-item.component.html

@@ -0,0 +1,4 @@
+<div class="metric-list-item list-item">
+  <p><span class="metric-name" [title]="[metric.objectId]">{{ metric.name }}</span> is <span class="metric-value" [title]="[metric.timestamp]">{{ metric.status }}
+    ({{ metric.value }})</span></p>
+</div>

unos-fe/src/app/watchdog/metric-list-item/metric-list-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetricListItemComponent } from './metric-list-item.component';
+
+describe('MetricListItemComponent', () => {
+  let component: MetricListItemComponent;
+  let fixture: ComponentFixture<MetricListItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MetricListItemComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(MetricListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

unos-fe/src/app/watchdog/metric-list-item/metric-list-item.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {Metric} from "../models/Metric";
+
+@Component({
+  selector: 'app-metric-list-item',
+  standalone: true,
+  imports: [],
+  templateUrl: './metric-list-item.component.html',
+  styleUrl: './metric-list-item.component.css'
+})
+export class MetricListItemComponent {
+  @Input()
+  metric!: Metric;
+  constructor() {
+  }
+}

unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.html

@@ -7,10 +7,20 @@
   <p>UNKNOWN {{count.UNKNOWN || 0}}</p>
 </div>
 
-<div class="watchdog-dead" *ngFor="let metric of deads">
-  <p class="metric-name">{{ metric.name }}</p>
-</div>
 
+<h2>OK {{count.OK}}</h2>
 <div class="watchdog-ok" *ngFor="let metric of ok">
-  <p><span class="metric-name" [title]="[metric.objectId]">{{ metric.name }}</span> is {{ metric.status }} ({{ metric.value }})</p>
+  <app-metric-list-item [metric]="metric"/>
+</div>
+<h2>NOT GOOD {{count.NOT_GOOD}}</h2>
+<div class="watchdog-notgood" *ngFor="let metric of notGood">
+  <app-metric-list-item [metric]="metric"/>
+</div>
+<h2>DEAD {{count.DEAD}}</h2>
+<div class="watchdog-dead" *ngFor="let metric of deads">
+  <app-metric-list-item [metric]="metric"/>
+</div>
+<h2>UNKNOWN {{count.UNKNOWN}}</h2>
+<div class="watchdog-unknown" *ngFor="let metric of unknown">
+  <app-metric-list-item [metric]="metric"/>
 </div>

unos-fe/src/app/watchdog/watchdog-top/watchdog-top.component.ts

@@ -5,6 +5,7 @@ import {NgForOf} from "@angular/common";
 import {RouterOutlet} from "@angular/router";
 import {HttpClientModule} from "@angular/common/http";
 import {StatusIntMap} from "../models/StatusIntMap";
+import {MetricListItemComponent} from "../metric-list-item/metric-list-item.component";
 
 @Component({
   selector: 'app-watchdog-top',
@@ -13,6 +14,7 @@ import {StatusIntMap} from "../models/StatusIntMap";
     NgForOf,
     RouterOutlet,
     HttpClientModule,
+    MetricListItemComponent,
   ],
   providers:[
     FetchMetricsService
@@ -24,6 +26,8 @@ export class WatchdogTopComponent implements OnInit{
 
   deads: Metric[] = []
   ok: Metric[] = [];
+  unknown:Metric[] = [];
+  notGood:Metric[] = [];
   count: StatusIntMap = <StatusIntMap>{};
 
   constructor(private fetchMetricsService: FetchMetricsService) {
@@ -50,4 +54,12 @@ export class WatchdogTopComponent implements OnInit{
   getCount():void{
     this.fetchMetricsService.getCount().subscribe(res => (this.count = res))
   }
+
+  getUnknown(){
+    this.fetchMetricsService.getUnknown().subscribe(res => this.unknown = res)
+  }
+
+  getNotGood(){
+    this.fetchMetricsService.getNotGood().subscribe(res => this.notGood = res)
+  }
 }