mgr/dashboard: add popover to cluster status card

Previous dashboard has a popover for the status when there are some
warnings in the Cluster Health. Introducing the same behaviour on the
new landing page

Fixes: https://tracker.ceph.com/issues/61611
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit 947df3d8ed5d9c34614a31df157e672e77d3042c)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
index 94c1435557c110f0b8bf449a9382acf24e29bebd..9c0dd09111088cc19d2e3b961363eafcd432664b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
@@ -21,11 +21,27 @@
              class="col-sm-6 px-3 d-flex"
              aria-label="Status card">
       <div class="d-flex ms-4 me-4 mb-5 center-content">
+        <ng-template #healthChecks>
+          <ng-container *ngTemplateOutlet="logsLink"></ng-container>
+          <ul>
+            <li *ngFor="let check of healthData.health.checks">
+              <span [ngStyle]="check.severity | healthColor"
+                    [class.health-warn-description]="check.severity === 'HEALTH_WARN'">
+              {{ check.type }}</span>: {{ check.summary.message }}
+            </li>
+          </ul>
+        </ng-template>
         <i *ngIf="healthData.health?.status"
            [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
            [ngStyle]="healthData.health.status | healthColor"
            [title]="healthData.health.status"></i>
+        <a class="ms-2 mt-n1 lead text-primary"
+           [ngbPopover]="healthChecks"
+           popoverClass="info-card-popover-cluster-status"
+           *ngIf="healthData.health?.checks?.length"
+           i18n>Cluster</a>
         <span class="ms-2 mt-n1 lead"
+              *ngIf="!healthData.health?.checks?.length"
               i18n>Cluster</span>
       </div>
       <section class="border-top mt-5"
@@ -259,3 +275,10 @@
     </div>
   </ng-container>
 </ng-template>
+
+<ng-template #logsLink>
+  <ng-container *ngIf="permissions.log.read">
+    <p class="logs-link"
+       i18n><i [ngClass]="[icons.infoCircle]"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
+  </ng-container>
+</ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.spec.ts
index 2ca65a468aa6c16b60a6557ac29be01afae1f2f3..b5c4e5b48d55d14a06b2405e0fbcc50b849785e0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.spec.ts
@@ -295,6 +295,29 @@ describe('Dashbord Component', () => {
     expect(dangerAlerts).toBe(null);
   });
 
+  it('should render "Status" card text that is not clickable', () => {
+    fixture.detectChanges();
+
+    const clusterStatusCard = fixture.debugElement.query(By.css('cd-card[cardTitle="Status"]'));
+    const clickableContent = clusterStatusCard.query(By.css('.lead.text-primary'));
+    expect(clickableContent).toBeNull();
+  });
+
+  it('should render "Status" card text that is clickable (popover)', () => {
+    const payload = _.cloneDeep(healthPayload);
+    payload.health['status'] = 'HEALTH_WARN';
+    payload.health['checks'] = [
+      { severity: 'HEALTH_WARN', type: 'WRN', summary: { message: 'fake warning' } }
+    ];
+
+    getHealthSpy.and.returnValue(of(payload));
+    fixture.detectChanges();
+
+    const clusterStatusCard = fixture.debugElement.query(By.css('cd-card[cardTitle="Status"]'));
+    const clickableContent = clusterStatusCard.query(By.css('.lead.text-primary'));
+    expect(clickableContent).not.toBeNull();
+  });
+
   describe('features disabled', () => {
     beforeEach(() => {
       fakeFeatureTogglesService.and.returnValue(