mgr/dashboard: Landing Page: info group visibility

Do not display info groups not containing any card.
Fixes: https://tracker.ceph.com/issues/27047
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 54b5bbe3f79eba718c39233a0bbab01f0aca43b7..75dcb37962f12e97b4c1583a55a97ce44dc35b44 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
@@ -2,14 +2,22 @@
      class="container-fluid">
   <cd-info-group groupTitle="Status"
                  i18n-groupTitle
-                 class="row info-group">
+                 class="row info-group"
+                 *ngIf="contentData.health?.status
+                 || contentData.mon_status
+                 || contentData.osd_map
+                 || contentData.mgr_map
+                 || contentData.hosts != null
+                 || contentData.rgw != null
+                 || contentData.fs_map
+                 || contentData.iscsi_daemons != null">
 
     <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'"
-                  *ngIf="contentData.health">
-      <ng-container *ngIf="contentData.health.checks.length > 0">
+                  [contentClass]="contentData.health?.checks?.length > 0 ? 'content-highlight content-row-size-1-5' : 'content-highlight'"
+                  *ngIf="contentData.health?.status">
+      <ng-container *ngIf="contentData.health?.checks?.length > 0">
         <ng-template #healthChecks>
           <p class="logs-link"
              i18n>
@@ -33,7 +41,7 @@
           {{ contentData.health.status }}
         </div>
       </ng-container>
-      <ng-container *ngIf="contentData.health.checks.length == 0">
+      <ng-container *ngIf="contentData.health?.checks?.length == 0">
         <div [ngStyle]="contentData.health.status | healthColor">
           {{ contentData.health.status }}
         </div>
@@ -73,7 +81,7 @@
                   link="/hosts"
                   class="col-sm-6 col-md-4 col-lg-3"
                   contentClass="content-medium content-highlight"
-                  *ngIf="contentData.hosts !== undefined">
+                  *ngIf="contentData.hosts != null">
       {{ contentData.hosts }}
     </cd-info-card>
 
@@ -82,7 +90,7 @@
                   link="/rgw/daemon"
                   class="col-sm-6 col-md-4 col-lg-3"
                   contentClass="content-medium content-highlight"
-                  *ngIf="contentData.rgw !== undefined">
+                  *ngIf="contentData.rgw != null">
       {{ contentData.rgw }}
     </cd-info-card>
     <cd-info-card cardTitle="Metadata Servers"
@@ -98,14 +106,16 @@
                   link="/block/iscsi"
                   class="col-sm-6 col-md-4 col-lg-3"
                   contentClass="content-medium content-highlight"
-                  *ngIf="contentData.iscsi_daemons !== undefined">
+                  *ngIf="contentData.iscsi_daemons != null">
       {{ contentData.iscsi_daemons }}
     </cd-info-card>
   </cd-info-group>
 
   <cd-info-group groupTitle="Performance"
                  i18n-groupTitle
-                 class="row info-group">
+                 class="row info-group"
+                 *ngIf="contentData.client_perf || contentData.scrub_status">
+
     <div class="cd-container-flex">
       <cd-info-card cardTitle="Client IOPS"
                     i18n-cardTitle
@@ -165,7 +175,11 @@
 
   <cd-info-group groupTitle="Capacity"
                  i18n-groupTitle
-                 class="row info-group">
+                 class="row info-group"
+                 *ngIf="contentData.pools
+                 || contentData.df
+                 || contentData.df?.stats?.total_objects != null
+                 || contentData.pg_info">
 
     <div class="cd-container-flex">
       <cd-info-card cardTitle="Pools"
@@ -196,7 +210,7 @@
                     class="cd-col-5"
                     cardClass="card-medium"
                     contentClass="content-medium content-highlight"
-                    *ngIf="contentData.df?.stats?.total_objects !== undefined">
+                    *ngIf="contentData.df?.stats?.total_objects != null">
         {{ contentData.df?.stats?.total_objects }}
       </cd-info-card>
 

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 85e6c8eb7ac2bbc044dcc9aa207f3edc20d0b34d..29ee634c59ed43c791fc43e08580c4d7958814e6 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
@@ -2,6 +2,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import * as _ from 'lodash';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { of } from 'rxjs';
 
@@ -22,7 +23,7 @@ describe('HealthComponent', () => {
   let fixture: ComponentFixture<HealthComponent>;
   let getHealthSpy;
   const healthPayload = {
-    health: { status: 'HEALTH_OK', checks: [] },
+    health: { status: 'HEALTH_OK' },
     mon_status: { monmap: { mons: [] }, quorum: [] },
     osd_map: { osds: [] },
     mgr_map: { standbys: [] },
@@ -56,7 +57,7 @@ describe('HealthComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(HealthComponent);
     component = fixture.componentInstance;
-    getHealthSpy = spyOn(fixture.debugElement.injector.get(DashboardService), 'getHealth');
+    getHealthSpy = spyOn(TestBed.get(DashboardService), 'getHealth');
   });
 
   it('should create', () => {
@@ -74,10 +75,76 @@ describe('HealthComponent', () => {
     expect(infoCards.length).toBe(18);
   });
 
+  it('should render all except "Status" group and cards', () => {
+    const payload = _.cloneDeep(healthPayload);
+    payload.health.status = '';
+    payload.mon_status = null;
+    payload.osd_map = null;
+    payload.mgr_map = null;
+    payload.hosts = null;
+    payload.rgw = null;
+    payload.fs_map = null;
+    payload.iscsi_daemons = null;
+
+    getHealthSpy.and.returnValue(of(payload));
+    fixture.detectChanges();
+
+    const infoGroups = fixture.debugElement.nativeElement.querySelectorAll('cd-info-group');
+    expect(infoGroups.length).toBe(2);
+
+    const infoCards = fixture.debugElement.nativeElement.querySelectorAll('cd-info-card');
+    expect(infoCards.length).toBe(10);
+  });
+
+  it('should render all except "Performance" group and cards', () => {
+    const payload = _.cloneDeep(healthPayload);
+    payload.scrub_status = '';
+    payload.client_perf = null;
+
+    getHealthSpy.and.returnValue(of(payload));
+    fixture.detectChanges();
+
+    const infoGroups = fixture.debugElement.nativeElement.querySelectorAll('cd-info-group');
+    expect(infoGroups.length).toBe(2);
+
+    const infoCards = fixture.debugElement.nativeElement.querySelectorAll('cd-info-card');
+    expect(infoCards.length).toBe(13);
+  });
+
+  it('should render all except "Capacity" group and cards', () => {
+    const payload = _.cloneDeep(healthPayload);
+    payload.pools = null;
+    payload.df = null;
+    payload.pg_info = null;
+
+    getHealthSpy.and.returnValue(of(payload));
+    fixture.detectChanges();
+
+    const infoGroups = fixture.debugElement.nativeElement.querySelectorAll('cd-info-group');
+    expect(infoGroups.length).toBe(2);
+
+    const infoCards = fixture.debugElement.nativeElement.querySelectorAll('cd-info-card');
+    expect(infoCards.length).toBe(13);
+  });
+
+  it('should render all groups and 1 card per group', () => {
+    const payload = { hosts: 0, scrub_status: 'Inactive', pools: [] };
+
+    getHealthSpy.and.returnValue(of(payload));
+    fixture.detectChanges();
+
+    const infoGroups = fixture.debugElement.nativeElement.querySelectorAll('cd-info-group');
+    expect(infoGroups.length).toBe(3);
+
+    _.each(infoGroups, (infoGroup) => {
+      expect(infoGroup.querySelectorAll('cd-info-card').length).toBe(1);
+    });
+  });
+
   // @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;
+    const payload = _.cloneDeep(healthPayload);
     payload['clog'] = [];
     payload['audit_log'] = [];