mgr/dashboard: add hardware status summary

On the landing page of the Dashboard, add the hardware status summary

Fixes:https://tracker.ceph.com/issues/64329
Signed-off-by: Pedro Gonzalez Gomez <[email protected]>

Author: Pegonzal

src/pybind/mgr/dashboard/controllers/hardware.py

@@ -0,0 +1,21 @@
+
+from typing import List, Optional
+
+from ..services.hardware import HardwareService
+from . import APIDoc, APIRouter, EndpointDoc, RESTController
+from ._version import APIVersion
+
+
+@APIRouter('/hardware')
+@APIDoc("Hardware management API", "Hardware")
+class Hardware(RESTController):
+
+    @RESTController.Collection('GET', version=APIVersion.EXPERIMENTAL)
+    @EndpointDoc("Retrieve a summary of the hardware health status")
+    def summary(self, categories: Optional[List[str]] = None, hostname: Optional[List[str]] = None):
+        """
+        Get the health status of as many hardware categories, or all of them if none is given
+        :param categories: The hardware type, all of them by default
+        :param hostname: The host to retrieve from, all of them by default
+        """
+        return HardwareService.get_summary(categories, hostname)

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html

@@ -56,7 +56,9 @@
                      link="/hosts"
                      title="Host"
                      summaryType="simplified"
-                     *ngIf="healthData.hosts != null"></cd-card-row>
+                     *ngIf="healthData.hosts != null"
+                     [dropdownData]="(isHardwareEnabled$ | async) && (hardwareSummary$ | async)">
+        </cd-card-row>
         <!-- Monitors -->
         <cd-card-row [data]="healthData.mon_status.monmap.mons.length"
                      link="/monitor"
@@ -141,7 +143,7 @@
                 </ul>
               </ng-template>
 
-              <div class="d-flex flex-row">
+              <div class="d-flex flex-row col-md-3 ms-4">
                 <i *ngIf="healthData.health?.status"
                    [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
                    [ngStyle]="healthData.health.status | healthColor"
@@ -159,6 +161,16 @@
                       i18n>Cluster</span>
               </div>
             </div>
+
+            <div class="d-flex flex-column col-md-3">
+              <div *ngIf="hasHardwareError"
+                   class="d-flex flex-row">
+                <i class="text-danger"
+                   [ngClass]="[icons.danger, icons.large2x]"></i>
+                <span class="ms-2 mt-n1 lead"
+                      i18n>Hardware</span>
+              </div>
+            </div>
             <section class="footer alerts"
                      *ngIf="isAlertmanagerConfigured && prometheusAlertService.alerts.length">
               <div class="d-flex flex-wrap ms-4 me-4 mb-3 mt-3">

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import _ from 'lodash';
-import { Observable, Subscription } from 'rxjs';
-import { take } from 'rxjs/operators';
+import { BehaviorSubject, Observable, Subscription, of } from 'rxjs';
+import { switchMap, take } from 'rxjs/operators';
 
 import { HealthService } from '~/app/shared/api/health.service';
 import { OsdService } from '~/app/shared/api/osd.service';
@@ -24,6 +24,7 @@ import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.s
 import { OrchestratorService } from '~/app/shared/api/orchestrator.service';
 import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
 import { AlertClass } from '~/app/shared/enum/health-icon.enum';
+import { HardwareService } from '~/app/shared/api/hardware.service';
 
 @Component({
   selector: 'cd-dashboard-v3',
@@ -69,6 +70,12 @@ export class DashboardV3Component extends PrometheusListHelper implements OnInit
   telemetryEnabled: boolean;
   telemetryURL = 'https://telemetry-public.ceph.com/';
   origin = window.location.origin;
+  hardwareHealth: any;
+  hardwareEnabled: boolean = false;
+  hasHardwareError: boolean = false;
+  isHardwareEnabled$: Observable<boolean>;
+  hardwareSummary$: Observable<any>;
+  hardwareSubject = new BehaviorSubject<any>([]);
 
   constructor(
     private summaryService: SummaryService,
@@ -80,7 +87,8 @@ export class DashboardV3Component extends PrometheusListHelper implements OnInit
     public prometheusService: PrometheusService,
     private mgrModuleService: MgrModuleService,
     private refreshIntervalService: RefreshIntervalService,
-    public prometheusAlertService: PrometheusAlertService
+    public prometheusAlertService: PrometheusAlertService,
+    private hardwareService: HardwareService
   ) {
     super(prometheusService);
     this.permissions = this.authStorageService.getPermissions();
@@ -89,9 +97,21 @@ export class DashboardV3Component extends PrometheusListHelper implements OnInit
 
   ngOnInit() {
     super.ngOnInit();
+    this.isHardwareEnabled$ = this.getHardwareConfig();
+    this.hardwareSummary$ = this.hardwareSubject.pipe(
+      switchMap(() =>
+        this.hardwareService.getSummary().pipe(
+          switchMap((data: any) => {
+            this.hasHardwareError = data.host.flawed;
+            return of(data);
+          })
+        )
+      )
+    );
     this.interval = this.refreshIntervalService.intervalData$.subscribe(() => {
       this.getHealth();
       this.getCapacityCardData();
+      if (this.hardwareEnabled) this.hardwareSubject.next([]);
     });
     this.getPrometheusData(this.prometheusService.lastHourDateObject);
     this.getDetailsCardData();
@@ -163,4 +183,13 @@ export class DashboardV3Component extends PrometheusListHelper implements OnInit
   trackByFn(index: any) {
     return index;
   }
+
+  getHardwareConfig(): Observable<any> {
+    return this.mgrModuleService.getConfig('cephadm').pipe(
+      switchMap((resp: any) => {
+        this.hardwareEnabled = resp?.hw_monitoring;
+        return of(resp?.hw_monitoring);
+      })
+    );
+  }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/api/hardware.service.spec.ts

@@ -0,0 +1,23 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { configureTestBed } from '~/testing/unit-test-helper';
+import { HardwareService } from './hardware.service';
+
+describe('HardwareService', () => {
+  let service: HardwareService;
+
+  configureTestBed({
+    providers: [HardwareService],
+    imports: [HttpClientTestingModule]
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HardwareService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/api/hardware.service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HardwareService {
+  baseURL = 'api/hardware';
+
+  constructor(private http: HttpClient) {}
+
+  getSummary(category: string[] = []): any {
+    return this.http.get<any>(`${this.baseURL}/summary`, {
+      params: { categories: category },
+      headers: { Accept: 'application/vnd.ceph.api.v0.1+json' }
+    });
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html

@@ -1,6 +1,6 @@
 <hr>
 <li class="list-group-item">
-  <div class="d-flex pl-1 pb-2 pt-2">
+  <div class="d-flex pl-1 pb-2 pt-2 position-relative">
     <div class="ms-4 me-auto">
       <a [routerLink]="link"
          *ngIf="link && total > 0; else noLinkTitle"
@@ -12,7 +12,7 @@
         <ng-template ngPluralCase="other">{{ title }}s</ng-template>
       </a>
     </div>
-    <span class="me-3">
+    <span class="me-4">
       <ng-container [ngSwitch]="summaryType">
         <ng-container *ngSwitchCase="'iscsi'">
           <ng-container *ngTemplateOutlet="iscsiSummary"></ng-container>
@@ -28,9 +28,22 @@
         </ng-container>
       </ng-container>
     </span>
+    <span *ngIf="dropdownData && dropdownData.total.total.total > 0"
+          class="position-absolute end-0 me-2">
+      <a (click)="toggleDropdown()"
+         class="dropdown-toggle"
+         [attr.aria-expanded]="dropdownToggled"
+         aria-controls="row-dropdwon"
+         role="button"></a>
+    </span>
   </div>
 </li>
 
+<div *ngIf="dropdownToggled">
+  <hr>
+  <ng-container *ngTemplateOutlet="dropdownTemplate"></ng-container>
+</div>
+
 <ng-template #defaultSummary>
   <span *ngIf="data.success || data.categoryPgAmount?.clean || (data.success === 0 && data.total === 0)">
     <span *ngIf="data.success || (data.success === 0 && data.total === 0)">
@@ -153,11 +166,23 @@
 </ng-template>
 
 <ng-template #simplifiedSummary>
-  <span>
+  <span *ngIf="!dropdownTotalError else showErrorNum">
     {{ data }}
     <i class="text-success"
        [ngClass]="[icons.success]"></i>
   </span>
+  <ng-template #showErrorNum>
+    <span *ngIf="data - dropdownTotalError  > 0">
+      {{ data - dropdownTotalError  }}
+    <i class="text-success"
+       [ngClass]="[icons.success]"></i>
+    </span>
+    <span>
+      {{ dropdownTotalError  }}
+      <i class="text-danger"
+         [ngClass]="[icons.danger]"></i>
+    </span>
+  </ng-template>
 </ng-template>
 
 <ng-template #noLinkTitle>
@@ -169,3 +194,36 @@
     <ng-template ngPluralCase="other">{{ title }}s</ng-template>
   </span>
 </ng-template>
+
+<ng-template #dropdownTemplate>
+  <ng-container *ngFor="let data of dropdownData?.total.category | keyvalue">
+    <li class="list-group-item">
+      <div class="d-flex pb-2 pt-2">
+        <div class="ms-5 me-auto">
+          <span *ngIf="data.value.total"
+                [ngPlural]="data.value.total"
+                i18n>
+              {{ data.value.total }}
+            <ng-template ngPluralCase="=0">{{ hwNames[data.key] }}</ng-template>
+            <ng-template ngPluralCase="=1">{{ hwNames[data.key] }}</ng-template>
+            <ng-template ngPluralCase="other">{{ hwNames[data.key] | pluralize }}</ng-template>
+          </span>
+        </div>
+        <span [ngClass]="data.value.error ? 'me-2' : 'me-4'">
+          {{ data.value.ok }}
+          <i class="text-success"
+             *ngIf="data.value.ok"
+             [ngClass]="[icons.success]">
+          </i>
+        </span>
+        <span *ngIf="data.value.error"
+              class="me-4 ms-2">
+              {{ data.value.error }}
+          <i class="text-danger"
+             [ngClass]="[icons.danger]">
+          </i>
+        </span>
+      </div>
+    </li>
+  </ng-container>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.scss

@@ -2,3 +2,18 @@
   border: 0;
   font-size: 14px;
 }
+
+a.dropdown-toggle {
+  &::after {
+    border: 0;
+    content: '\f054';
+    font-family: 'ForkAwesome';
+    font-size: 1rem;
+    margin-top: 0.15rem;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  &[aria-expanded='true']::after {
+    transform: rotate(90deg);
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { Icons } from '~/app/shared/enum/icons.enum';
+import { HardwareNameMapping } from '~/app/shared/enum/hardware.enum';
 
 @Component({
   selector: 'cd-card-row',
@@ -19,8 +20,14 @@ export class CardRowComponent implements OnChanges {
   @Input()
   summaryType = 'default';
 
+  @Input()
+  dropdownData: any;
+
+  hwNames = HardwareNameMapping;
   icons = Icons;
   total: number;
+  dropdownTotalError: number = 0;
+  dropdownToggled: boolean = false;
 
   ngOnChanges(): void {
     if (this.data.total || this.data.total === 0) {
@@ -30,5 +37,15 @@ export class CardRowComponent implements OnChanges {
     } else {
       this.total = this.data;
     }
+
+    if (this.dropdownData) {
+      if (this.title == 'Host') {
+        this.dropdownTotalError = this.dropdownData.host.flawed;
+      }
+    }
+  }
+
+  toggleDropdown(): void {
+    this.dropdownToggled = !this.dropdownToggled;
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/enum/hardware.enum.ts

@@ -0,0 +1,8 @@
+export enum HardwareNameMapping {
+  memory = 'Memory',
+  storage = 'Drive',
+  processors = 'CPU',
+  network = 'Network',
+  power = 'Power supply',
+  fans = 'Fan module'
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts

@@ -37,6 +37,7 @@ import { TruncatePipe } from './truncate.pipe';
 import { UpperFirstPipe } from './upper-first.pipe';
 import { OctalToHumanReadablePipe } from './octal-to-human-readable.pipe';
 import { PathPipe } from './path.pipe';
+import { PluralizePipe } from './pluralize.pipe';
 
 @NgModule({
   imports: [CommonModule],
@@ -76,7 +77,8 @@ import { PathPipe } from './path.pipe';
     MdsSummaryPipe,
     OsdSummaryPipe,
     OctalToHumanReadablePipe,
-    PathPipe
+    PathPipe,
+    PluralizePipe
   ],
   exports: [
     ArrayPipe,
@@ -114,7 +116,8 @@ import { PathPipe } from './path.pipe';
     MdsSummaryPipe,
     OsdSummaryPipe,
     OctalToHumanReadablePipe,
-    PathPipe
+    PathPipe,
+    PluralizePipe
   ],
   providers: [
     ArrayPipe,