mgr/dashboard: New Landing Page: Milestone 2

Added tests for Health component to ensure that

all groups and cards are rendered.

Fixes: https://tracker.ceph.com/issues/27050
Signed-off-by: Alfonso Martínez <almartin@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
index 650d09e7d642e36aba70ccdadf295975210bd2a0..54b5bbe3f79eba718c39233a0bbab01f0aca43b7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -7,7 +7,8 @@
     <cd-info-card cardTitle="Cluster Status"
                   i18n-cardTitle
                   class="col-sm-6 col-md-4 col-lg-3"
-                  [contentClass]="contentData.health.checks.length > 0 ? 'content-highlight content-row-size-1-5' : 'content-highlight'">
+                  [contentClass]="contentData.health.checks.length > 0 ? 'content-highlight content-row-size-1-5' : 'content-highlight'"
+                  *ngIf="contentData.health">
       <ng-container *ngIf="contentData.health.checks.length > 0">
         <ng-template #healthChecks>
           <p class="logs-link"
@@ -71,7 +72,8 @@
                   i18n-cardTitle
                   link="/hosts"
                   class="col-sm-6 col-md-4 col-lg-3"
-                  contentClass="content-medium content-highlight">
+                  contentClass="content-medium content-highlight"
+                  *ngIf="contentData.hosts !== undefined">
       {{ contentData.hosts }}
     </cd-info-card>
 
@@ -79,7 +81,8 @@
                   i18n-cardTitle
                   link="/rgw/daemon"
                   class="col-sm-6 col-md-4 col-lg-3"
-                  contentClass="content-medium content-highlight">
+                  contentClass="content-medium content-highlight"
+                  *ngIf="contentData.rgw !== undefined">
       {{ contentData.rgw }}
     </cd-info-card>
     <cd-info-card cardTitle="Metadata Servers"
@@ -94,7 +97,8 @@
                   i18n-cardTitle
                   link="/block/iscsi"
                   class="col-sm-6 col-md-4 col-lg-3"
-                  contentClass="content-medium content-highlight">
+                  contentClass="content-medium content-highlight"
+                  *ngIf="contentData.iscsi_daemons !== undefined">
       {{ contentData.iscsi_daemons }}
     </cd-info-card>
   </cd-info-group>
@@ -179,7 +183,7 @@
                     class="cd-col-5"
                     cardClass="card-medium"
                     contentClass="content-chart"
-                    *ngIf="contentData.mon_status">
+                    *ngIf="contentData.df">
         <cd-health-pie [data]="contentData"
                        [isBytesData]="true"
                        [displayLegend]="true"
@@ -192,7 +196,7 @@
                     class="cd-col-5"
                     cardClass="card-medium"
                     contentClass="content-medium content-highlight"
-                    *ngIf="contentData.df?.stats?.total_objects">
+                    *ngIf="contentData.df?.stats?.total_objects !== undefined">
         {{ contentData.df?.stats?.total_objects }}
       </cd-info-card>
 
@@ -210,7 +214,8 @@
                     class="cd-col-5"
                     cardClass="card-medium"
                     contentClass="content-chart"
-                    (click)="pgStatusTarget.toggle()">
+                    (click)="pgStatusTarget.toggle()"
+                    *ngIf="contentData.pg_info">
         <ng-template #pgStatus>
           <p class="logs-link"
              i18n>
@@ -241,7 +246,8 @@
   <cd-info-group groupTitle="Logs"
                  i18n-groupTitle
                  class="row info-group"
-                 id="logs">
+                 id="logs"
+                 *ngIf="contentData.clog || contentData.audit_log">
 
     <cd-info-card cardTitle="Cluster"
                   i18n-cardTitle

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
index 66971dff35a2d5fb50be431124ae29f1bf2f2773..85e6c8eb7ac2bbc044dcc9aa207f3edc20d0b34d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
@@ -3,6 +3,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PopoverModule } from 'ngx-bootstrap/popover';
+import { of } from 'rxjs';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { DashboardService } from '../../../shared/api/dashboard.service';
@@ -19,6 +20,22 @@ import { HealthComponent } from './health.component';
 describe('HealthComponent', () => {
   let component: HealthComponent;
   let fixture: ComponentFixture<HealthComponent>;
+  let getHealthSpy;
+  const healthPayload = {
+    health: { status: 'HEALTH_OK', checks: [] },
+    mon_status: { monmap: { mons: [] }, quorum: [] },
+    osd_map: { osds: [] },
+    mgr_map: { standbys: [] },
+    hosts: 0,
+    rgw: 0,
+    fs_map: { filesystems: [] },
+    iscsi_daemons: 0,
+    client_perf: {},
+    scrub_status: 'Inactive',
+    pools: [],
+    df: { stats: { total_objects: 0 } },
+    pg_info: {}
+  };
 
   configureTestBed({
     providers: [DashboardService],
@@ -39,10 +56,38 @@ describe('HealthComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(HealthComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    getHealthSpy = spyOn(fixture.debugElement.injector.get(DashboardService), 'getHealth');
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render all info groups and all info cards', () => {
+    getHealthSpy.and.returnValue(of(healthPayload));
+    fixture.detectChanges();
+
+    const infoGroups = fixture.debugElement.nativeElement.querySelectorAll('cd-info-group');
+    expect(infoGroups.length).toBe(3);
+
+    const infoCards = fixture.debugElement.nativeElement.querySelectorAll('cd-info-card');
+    expect(infoCards.length).toBe(18);
+  });
+
+  // @TODO: remove this test when logs are no longer in landing page
+  // See https://tracker.ceph.com/issues/24571 & https://github.com/ceph/ceph/pull/23834
+  it('should render Logs group & cards in addition to the other ones', () => {
+    const payload = healthPayload;
+    payload['clog'] = [];
+    payload['audit_log'] = [];
+
+    getHealthSpy.and.returnValue(of(payload));
+    fixture.detectChanges();
+
+    const infoGroups = fixture.debugElement.nativeElement.querySelectorAll('cd-info-group');
+    expect(infoGroups.length).toBe(4);
+
+    const infoCards = fixture.debugElement.nativeElement.querySelectorAll('cd-info-card');
+    expect(infoCards.length).toBe(20);
+  });
 });