From: alfonsomthd <almartin@redhat.com>
Date: Wed, 21 Nov 2018 12:46:56 +0000 (+0100)
Subject: mgr/dashboard: Status info cards' improvements
X-Git-Tag: v14.1.0~851^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=fc07fb95dfb3d07532a1e89ce075a904574accf9;p=ceph.git

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 97a361b58f0..1c2d0519465 100644
--- 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 9b5afb53e37..5eb340cf47c 100644
--- 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 0f39efb02ce..0986e42db82 100644
--- 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 e8f004e9faa..98e903ec963 100644
--- 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 7c2785111e7..3bfdd5267bf 100644
--- 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 754511dd5ae..689f9da44b7 100644
--- 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 f55f0c304e9..c37eb88606d 100644
--- 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;
   }
 }