mgr/dashboard: Status info cards' improvements

- MGR info card:
  Show amount of daemons active instead of active mgr name.
  Daemons active text line: show mgr active name when 'on mouse over'.
- OSD/MDS info cards (for consistency):
  The same text appearance as MGR card.
- Hosts/Object Gateway/iSCSI cards: added 'total' after amount for clarification.
- Some CSS refactor.

Fixes: https://tracker.ceph.com/issues/37283
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 97a361b58f0ea4f577ab6d8b6ca5012d37db8018..1c2d051946563d853032f4a48221179e9088b141 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
@@ -15,7 +15,7 @@
     <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 text-area-size-2' : 'content-highlight'"
                   *ngIf="contentData.health?.status">
       <ng-container *ngIf="contentData.health?.checks?.length > 0">
         <ng-template #healthChecks>
@@ -59,9 +59,10 @@
                   i18n-cardTitle
                   link="/osd"
                   class="col-sm-6 col-md-4 col-lg-3"
-                  *ngIf="contentData.osd_map"
-                  contentClass="content-row-size-2 content-highlight">
-      <span *ngFor="let result of (contentData.osd_map | osdSummary)" [ngClass]="result.class">
+                  *ngIf="(contentData.osd_map | osdSummary) as transformedResult"
+                  [contentClass]="(transformedResult.length == 5 ? 'text-area-size-3' : 'text-area-size-2') + ' content-highlight'">
+      <span *ngFor="let result of transformedResult"
+            [ngClass]="result.class">
         {{ result.content }}
       </span>
     </cd-info-card>
@@ -69,9 +70,13 @@
     <cd-info-card cardTitle="Manager Daemons"
                   i18n-cardTitle
                   class="col-sm-6 col-md-4 col-lg-3"
-                  contentClass="content-highlight"
+                  contentClass="content-highlight text-area-size-2"
                   *ngIf="contentData.mgr_map">
-      {{ contentData.mgr_map | mgrSummary }}
+      <span *ngFor="let result of (contentData.mgr_map | mgrSummary)"
+            [ngClass]="result.class"
+            [title]="result.titleText != null ? result.titleText : ''">
+        {{ result.content }}
+      </span>
     </cd-info-card>
 
     <cd-info-card cardTitle="Hosts"
@@ -80,7 +85,7 @@
                   class="col-sm-6 col-md-4 col-lg-3"
                   contentClass="content-medium content-highlight"
                   *ngIf="contentData.hosts != null">
-      {{ contentData.hosts }}
+      {{ contentData.hosts }} total
     </cd-info-card>
 
     <cd-info-card cardTitle="Object Gateways"
@@ -89,14 +94,17 @@
                   class="col-sm-6 col-md-4 col-lg-3"
                   contentClass="content-medium content-highlight"
                   *ngIf="contentData.rgw != null">
-      {{ contentData.rgw }}
+      {{ contentData.rgw }} total
     </cd-info-card>
     <cd-info-card cardTitle="Metadata Servers"
                   i18n-cardTitle
                   class="col-sm-6 col-md-4 col-lg-3"
-                  contentClass="content-highlight"
-                  *ngIf="contentData.fs_map">
-      {{ contentData.fs_map | mdsSummary }}
+                  *ngIf="(contentData.fs_map | mdsSummary) as transformedResult"
+                  [contentClass]="(transformedResult.length > 1 ? 'text-area-size-2' : '') + ' content-highlight'">
+      <span *ngFor="let result of transformedResult"
+            [ngClass]="result.class">
+        {{ result.content }}
+      </span>
     </cd-info-card>
 
     <cd-info-card cardTitle="iSCSI Gateways"
@@ -105,7 +113,7 @@
                   class="col-sm-6 col-md-4 col-lg-3"
                   contentClass="content-medium content-highlight"
                   *ngIf="contentData.iscsi_daemons != null">
-      {{ contentData.iscsi_daemons }}
+      {{ contentData.iscsi_daemons }} total
     </cd-info-card>
   </cd-info-group>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
index 9b5afb53e378de72522d2c39d85ae1519da7821e..5eb340cf47c8057a804ca6dc8d54be879bbbef3b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
@@ -83,3 +83,7 @@ cd-info-card {
   content: '\A';
   white-space: pre;
 }
+
+.mgr-active-name:hover {
+  cursor: pointer;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
index 0f39efb02ce2a3d4d1926d9e031890a443f4ef5a..0986e42db82680a804d803eadba2129f0070e877 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
@@ -57,12 +57,12 @@ $logs-text-font-size: $card-font-min-size;
   transform: unset;
 }
 
-.content-row-size-1-5 {
+.text-area-size-2 {
   margin-right: -50%;
   transform: translate(-50%, -20%);
 }
 
-.content-row-size-2 {
+.text-area-size-3 {
   margin-right: -50%;
   transform: translate(-50%, -40%);
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.spec.ts
index e8f004e9faaef2583dd954aa2e58e1b5dce4b4be..98e903ec96371a45dd693f1924dd2414d6f407a3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.spec.ts
@@ -19,32 +19,51 @@ describe('MdsSummaryPipe', () => {
   });
 
   it('transforms with 0 active and 2 standy', () => {
-    const value = {
+    const payload = {
       standbys: [0],
       filesystems: [{ mdsmap: { info: [{ state: 'up:standby-replay' }] } }]
     };
-    expect(pipe.transform(value)).toBe('0 active, 2 standby');
+    const expected = [
+      { class: '', content: '0 active' },
+      { class: 'card-text-line-break', content: '' },
+      { class: '', content: '2 standby' }
+    ];
+
+    expect(pipe.transform(payload)).toEqual(expected);
   });
 
   it('transforms with 1 active and 1 standy', () => {
-    const value = {
+    const payload = {
       standbys: [0],
       filesystems: [{ mdsmap: { info: [{ state: 'up:active' }] } }]
     };
-    expect(pipe.transform(value)).toBe('1 active, 1 standby');
+    const expected = [
+      { class: '', content: '1 active' },
+      { class: 'card-text-line-break', content: '' },
+      { class: '', content: '1 standby' }
+    ];
+    expect(pipe.transform(payload)).toEqual(expected);
   });
 
   it('transforms with 0 filesystems', () => {
-    const value = {
+    const payload = {
       standbys: [0],
       filesystems: []
     };
-    expect(pipe.transform(value)).toBe('no filesystems');
+    const expected = [{ class: '', content: 'no filesystems' }];
+
+    expect(pipe.transform(payload)).toEqual(expected);
   });
 
   it('transforms without filesystem', () => {
-    const value = { standbys: [0] };
-    expect(pipe.transform(value)).toBe('1, no filesystems');
+    const payload = { standbys: [0] };
+    const expected = [
+      { class: '', content: '1 up' },
+      { class: 'card-text-line-break', content: '' },
+      { class: '', content: 'no filesystems' }
+    ];
+
+    expect(pipe.transform(payload)).toEqual(expected);
   });
 
   it('transforms without value', () => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.ts
index 7c2785111e77f4ac9b0a5b6428e581e4d179d17e..3bfdd5267bf89075b3a51ae624404ac9a9376e89 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mds-summary.pipe.ts
@@ -14,6 +14,8 @@ export class MdsSummaryPipe implements PipeTransform {
       return '';
     }
 
+    let contentLine1 = '';
+    let contentLine2 = '';
     let standbys = 0;
     let active = 0;
     let standbyReplay = 0;
@@ -22,9 +24,10 @@ export class MdsSummaryPipe implements PipeTransform {
     });
 
     if (value.standbys && !value.filesystems) {
-      return standbys + ', ' + this.i18n('no filesystems');
+      contentLine1 = `${standbys} ${this.i18n('up')}`;
+      contentLine2 = this.i18n('no filesystems');
     } else if (value.filesystems.length === 0) {
-      return this.i18n('no filesystems');
+      contentLine1 = this.i18n('no filesystems');
     } else {
       _.each(value.filesystems, (fs, i) => {
         _.each(fs.mdsmap.info, (mds, j) => {
@@ -36,9 +39,28 @@ export class MdsSummaryPipe implements PipeTransform {
         });
       });
 
-      return `${active} ${this.i18n('active')}, ${standbys + standbyReplay} ${this.i18n(
-        'standby'
-      )}`;
+      contentLine1 = `${active} ${this.i18n('active')}`;
+      contentLine2 = `${standbys + standbyReplay} ${this.i18n('standby')}`;
     }
+
+    const mgrSummary = [
+      {
+        content: contentLine1,
+        class: ''
+      }
+    ];
+
+    if (contentLine2) {
+      mgrSummary.push({
+        content: '',
+        class: 'card-text-line-break'
+      });
+      mgrSummary.push({
+        content: contentLine2,
+        class: ''
+      });
+    }
+
+    return mgrSummary;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.spec.ts
index 754511dd5ae0c253f415c168eb888a71024a3b42..689f9da44b79cefc0277bd4d93c2d1281ae69921 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.spec.ts
@@ -24,18 +24,30 @@ describe('MgrSummaryPipe', () => {
   });
 
   it('transforms with active_name undefined', () => {
-    const value = {
+    const payload = {
       active_name: undefined,
       standbys: []
     };
-    expect(pipe.transform(value)).toBe('active: n/a');
+    const expected = [
+      { class: 'mgr-active-name', content: 'n/a active', titleText: '' },
+      { class: 'card-text-line-break', content: '', titleText: '' },
+      { class: '', content: '0 standby', titleText: '' }
+    ];
+
+    expect(pipe.transform(payload)).toEqual(expected);
   });
 
   it('transforms with 1 active and 2 standbys', () => {
-    const value = {
+    const payload = {
       active_name: 'a',
       standbys: ['b', 'c']
     };
-    expect(pipe.transform(value)).toBe('active: a, 2 standbys');
+    const expected = [
+      { class: 'mgr-active-name', content: '1 active', titleText: 'active daemon: a' },
+      { class: 'card-text-line-break', content: '', titleText: '' },
+      { class: '', content: '2 standby', titleText: '' }
+    ];
+
+    expect(pipe.transform(payload)).toEqual(expected);
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.ts
index f55f0c304e97149c4a6880795da32fc3654ae880..c37eb88606defe035f4b6edb694c38fe173dffe3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/mgr-summary.pipe.ts
@@ -14,13 +14,33 @@ export class MgrSummaryPipe implements PipeTransform {
       return '';
     }
 
-    let result = 'active: ';
-    result += _.isUndefined(value.active_name) ? 'n/a' : value.active_name;
-
-    if (value.standbys.length) {
-      result += ', ' + value.standbys.length + ' ' + this.i18n('standbys');
+    let activeCount = this.i18n('n/a');
+    const titleText = _.isUndefined(value.active_name)
+      ? ''
+      : `${this.i18n('active daemon')}: ${value.active_name}`;
+    if (titleText.length > 0) {
+      activeCount = '1';
     }
+    const standbyCount = value.standbys.length;
+    const mgrSummary = [
+      {
+        content: `${activeCount} ${this.i18n('active')}`,
+        class: 'mgr-active-name',
+        titleText: titleText
+      }
+    ];
+
+    mgrSummary.push({
+      content: '',
+      class: 'card-text-line-break',
+      titleText: ''
+    });
+    mgrSummary.push({
+      content: `${standbyCount} ${this.i18n('standby')}`,
+      class: '',
+      titleText: ''
+    });
 
-    return result;
+    return mgrSummary;
   }
 }