ng: dashboard cosmetics

ng/src/app/components/server-metrics-widget/server-metrics-widget.component.html

@@ -1,8 +1,8 @@
 <div
+  *ngIf="dataTypes; else loading"
   class="d-grid"
   style="grid-template-columns: max-content auto"
-  [style.grid-template-rows]="'repeat(' + dataTypes.length + ')'"
-  [routerLink]="'/srv/' + server.id">
+  [style.grid-template-rows]="'repeat(' + dataTypes.length + ')'">
   <ng-container *ngFor="let type of dataTypes; index as i">
     <div class="d-inline text-uppercase flex-grow-0 pe-2" style="grid-column: 1 / span 1" [style.grid-row]="i + 1 + ' / span 1'">
       <fa-icon [icon]="type.type | faType" class="pe-2 status-ok"></fa-icon>{{ type.type }}
@@ -11,7 +11,7 @@
       <div *ngIf="type.data; else loading" class="progress position-relative">
         <div *ngIf="type.data.avg" class="progress-bar bg-avg" role="progressbar" [style.width]="type.data.avg + '%'"></div>
         <div *ngIf="type.data.peak" class="progress-bar bg-peak" role="progressbar" [style.width]="type.data.peak - (type.data.avg || 0) + '%'"></div>
-        <span *ngIf="type.subtype" class="position-absolute end-0 pe-2">:{{ type.subtype }}</span>
+        <span *ngIf="type.subtype" class="position-absolute end-0 pe-2 bar-label">:{{ type.subtype }}</span>
       </div>
     </div>
   </ng-container>

ng/src/app/components/server-metrics-widget/server-metrics-widget.component.scss

@@ -0,0 +1,3 @@
+.progress .bar-label {
+  transform: translate(0, -2px);
+}

ng/src/app/components/server-metrics-widget/server-metrics-widget.component.ts

@@ -34,7 +34,7 @@ export class ServerMetricsWidgetComponent {
   public fa = { faHardDrive };
 
   private _server!: ServerConfig;
-  private _dataTypes: FlatServerDataTypes[] = [];
+  private _dataTypes?: FlatServerDataTypes[];
   private _typeSubscription?: Subscription;
 
   constructor(private apiService: ServerApiService) {}

ng/src/app/components/service-checks-widget/service-checks-widget.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { format } from 'date-fns';
 
 import { HttpCheckStatus, ServiceCheckData } from '../../../../../common/lib/http-check-data.module';
 
@@ -54,7 +55,7 @@ export class ServiceChecksWidgetComponent {
           const diffPerc = ((rawData[0].time.getTime() - start.getTime()) / diffMs) * 100;
           if (diffPerc > 0) {
             lastEntry = {
-              statusText: rawData[0].data.map(dx => dx.message).join(', '),
+              statusText: `[${format(rawData[0].time, 'HH:mm:ss')}] ${rawData[0].data.map(dx => dx.message).join(', ')}`,
               statusClass: this.mapStatusClass(rawData[0])
             };
             data.push(lastEntry);
@@ -67,7 +68,7 @@ export class ServiceChecksWidgetComponent {
             }
 
             lastEntry = {
-              statusText: d.data.map(dx => dx.message).join(', '),
+              statusText: `[${format(d.time, 'HH:mm:ss')}] ${d.data.map(dx => dx.message).join(', ')}`,
               statusClass: this.mapStatusClass(d)
             };
             data.push(lastEntry);

ng/src/app/pages/home-page/home-page.component.html

@@ -7,13 +7,13 @@
     <span class="flex-fill text-start">Dashboard</span>
     <fa-icon [icon]="fa.faAngleRight" class="ps-2"></fa-icon>
   </div>
-  <div class="card-header bg-primary text-light" style="grid-column: 2 / span 1; grid-row: 1 / span 1">
-    <fa-icon [icon]="fa.faServer" class="pe-2"></fa-icon>
+  <div class="card-header bg-primary text-light text-center" style="grid-column: 2 / span 1; grid-row: 1 / span 1">
+    <fa-icon [icon]="fa.faChartBar" class="pe-2"></fa-icon>
     <span class="flex-fill">Server Metrics (24h)</span>
   </div>
-  <div class="card-header bg-primary text-light" style="grid-column: 3 / span 1; grid-row: 1 / span 1">
-    <fa-icon [icon]="fa.faServer" class="pe-2"></fa-icon>
-    <span class="flex-fill">Service Status</span>
+  <div class="card-header bg-primary text-light text-center" style="grid-column: 3 / span 1; grid-row: 1 / span 1">
+    <fa-icon [icon]="fa.faTheaterMasks" class="pe-2"></fa-icon>
+    <span class="flex-fill">Service Status (24h)</span>
   </div>
 
   <ng-container *ngFor="let server of serverConfigs; index as i">
@@ -26,7 +26,8 @@
       class="d-block p-1 border-end border-bottom text-primary pointer link-panel-highlight"
       style="grid-column: 2 / span 1"
       [style.grid-row]="i + 2 + ' / span 1'"
-      [server]="server">
+      [server]="server"
+      [routerLink]="'/srv/' + server.id">
     </app-server-metrics-widget>
 
     <app-service-checks-widget

ng/src/app/pages/home-page/home-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { faAngleDown, faAngleRight, faChalkboard, faServer } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDown, faAngleRight, faChalkboard, faChartBar, faServer, faTheaterMasks } from '@fortawesome/free-solid-svg-icons';
 
 import { ServerApiService } from '../../services/server-api.service';
 
@@ -9,7 +9,7 @@ import { ServerApiService } from '../../services/server-api.service';
   styleUrls: ['./home-page.component.scss']
 })
 export class HomePageComponent implements OnInit {
-  public fa = { faAngleDown, faAngleRight, faChalkboard, faServer };
+  public fa = { faAngleDown, faAngleRight, faChalkboard, faChartBar, faServer, faTheaterMasks };
   public serverConfigs: ServerConfig[] = [];
 
   public grid = {