mgr/dashboard: Landing Page Milestone 2

OSD card:

Break info in 2/3 lines for huge OSDs amount.

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 4d93b698e9ee935d97fb012dd375b8d040c04f12..05722e133f0aea1d16d392da81fd3c01924840dc 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
@@ -45,10 +45,9 @@
                   i18n-cardTitle
                   link="/osd"
                   class="col-sm-6 col-md-4 col-lg-3"
-                  contentClass="content-highlight"
-                  *ngIf="contentData.osd_map">
-      <span *ngFor="let result of (contentData.osd_map | osdSummary)"
-            [ngStyle]="result.style">
+                  *ngIf="(contentData.osd_map | osdSummary) as osdSummaryContent"
+                  [contentClass]="osdSummaryContent.length > 3 ? 'content-row3 content-highlight' : 'content-row2 content-highlight'">
+      <span *ngFor="let result of osdSummaryContent" [ngClass]="result.class">
         {{ result.content }}
       </span>
     </cd-info-card>

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 7387970fa53e1522a78c7dce1ff2259e819e3a13..ebcc1852c5ff6f287706b5f8634724a089fa1f79 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
@@ -1,3 +1,5 @@
+@import '../../../../defaults';
+
 $popover-text-font-size: 10px;
 
 .cd-col-5 {
@@ -87,3 +89,13 @@ $popover-text-font-size: 10px;
 .logs-link {
   text-align: center;
 }
+
+.card-text-error {
+  display: inline;
+  color: $color-solid-red;
+}
+
+.card-text-line-break:after {
+  content: '\A';
+  white-space: pre;
+}

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 2dee85af5eb25e20a7ace75925c656a4b41a90d3..541f3ff760180be9ac242cc8f4148e3c21d621a4 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
@@ -27,24 +27,33 @@ $logs-text-font-size: 10px;
 
 .card-body {
   font-size: 1.25vw;
-  padding: 0 0 20px;
   text-align: center;
-  padding-top: 2%;
-  padding-bottom: 2%;
 }
 
 .card-link {
   cursor: pointer;
 }
 
+.content-row2 {
+  position: relative;
+  top: -1vw;
+  margin-bottom: -1.5vw;
+  font-size: 1.15vw;
+}
+
+.content-row3 {
+  position: relative;
+  top: -1.5vw;
+  margin-bottom: -1.5vw;
+  font-size: 1vw;
+}
+
 .content-highlight {
   font-weight: bold;
 }
 
 .content-medium {
   font-size: 1.7vw;
-  padding-top: 0;
-  padding-bottom: 0;
 }
 
 .card-medium {
@@ -162,6 +171,12 @@ $logs-text-font-size: 10px;
   }
 }
 
+@media (min-width: 992px) and (max-width: 1199px) {
+  .content-row3 {
+    top: -0.3vw;
+  }
+}
+
 @media (min-width: 1200px) {
   .card-medium {
     min-height: $card-medium-height * 1.5;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.spec.ts
index 06af6624c3b2e433facd22802eca0aa418211bbf..92119691bf5652a740d26e47ef3eaba1af3b4011 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.spec.ts
@@ -11,42 +11,106 @@ describe('OsdSummaryPipe', () => {
     expect(pipe.transform(undefined)).toBe('');
   });
 
-  it('transforms having 1 with 0 up and 1 in', () => {
+  it('transforms having 3 osd with 3 up, 3 in, 0 down, 0 out', () => {
     const value = {
-      osds: [{ in: true, out: false }]
+      osds: [{ up: 1, in: 1 }, { up: 1, in: 1 }, { up: 1, in: 1 }]
     };
     expect(pipe.transform(value)).toEqual([
       {
-        content: '1 (0 up, 1 in',
-        style: { 'margin-right': '-5px', color: '' }
+        content: '3 total',
+        class: ''
       },
       {
-        content: ', ',
-        style: { 'margin-right': '0', color: '' }
+        content: '',
+        class: 'card-text-line-break'
       },
       {
-        content: '1 down',
-        style: { 'margin-right': '-5px', color: OsdSummaryPipe.COLOR_ERROR }
+        content: '3 up, 3 in',
+        class: ''
+      }
+    ]);
+  });
+
+  it('transforms having 3 osd with 2 up, 1 in, 1 down, 1 out', () => {
+    const value = {
+      osds: [{ up: 1, in: 1 }, { up: 1, in: 0 }, { up: 0, in: 0 }]
+    };
+    expect(pipe.transform(value)).toEqual([
+      {
+        content: '3 total',
+        class: ''
+      },
+      {
+        content: '',
+        class: 'card-text-line-break'
+      },
+      {
+        content: '2 up, 1 in',
+        class: ''
+      },
+      {
+        content: '',
+        class: 'card-text-line-break'
+      },
+      {
+        content: '1 down, 1 out',
+        class: 'card-text-error'
+      }
+    ]);
+  });
+
+  it('transforms having 3 osd with 2 up, 2 in, 1 down, 0 out', () => {
+    const value = {
+      osds: [{ up: 1, in: 1 }, { up: 1, in: 1 }, { up: 0, in: 0 }]
+    };
+    expect(pipe.transform(value)).toEqual([
+      {
+        content: '3 total',
+        class: ''
+      },
+      {
+        content: '',
+        class: 'card-text-line-break'
+      },
+      {
+        content: '2 up, 2 in',
+        class: ''
       },
       {
-        content: ')',
-        style: { 'margin-right': '0', color: '' }
+        content: '',
+        class: 'card-text-line-break'
+      },
+      {
+        content: '1 down',
+        class: 'card-text-error'
       }
     ]);
   });
 
-  it('transforms having 2 with 2 up and 1 in', () => {
+  it('transforms having 3 osd with 3 up, 2 in, 0 down, 1 out', () => {
     const value = {
-      osds: [{ in: true, up: true }, { in: false, up: true }]
+      osds: [{ up: 1, in: 1 }, { up: 1, in: 1 }, { up: 1, in: 0 }]
     };
     expect(pipe.transform(value)).toEqual([
       {
-        content: '2 (2 up, 1 in',
-        style: { 'margin-right': '-5px', color: '' }
+        content: '3 total',
+        class: ''
+      },
+      {
+        content: '',
+        class: 'card-text-line-break'
+      },
+      {
+        content: '3 up, 2 in',
+        class: ''
+      },
+      {
+        content: '',
+        class: 'card-text-line-break'
       },
       {
-        content: ')',
-        style: { 'margin-right': '0', color: '' }
+        content: '1 out',
+        class: 'card-text-error'
       }
     ]);
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.ts
index 4c4e95bbcd3e866019cc714f2f3147d0fc26b703..ad34e87bc67856f40ab419f6de582ac1e8310e54 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/osd-summary.pipe.ts
@@ -5,8 +5,6 @@ import * as _ from 'lodash';
   name: 'osdSummary'
 })
 export class OsdSummaryPipe implements PipeTransform {
-  static readonly COLOR_ERROR = '#ff0000';
-
   transform(value: any, args?: any): any {
     if (!value) {
       return '';
@@ -14,7 +12,7 @@ export class OsdSummaryPipe implements PipeTransform {
 
     let inCount = 0;
     let upCount = 0;
-    _.each(value.osds, (osd, i) => {
+    _.each(value.osds, (osd) => {
       if (osd.in) {
         inCount++;
       }
@@ -25,28 +23,36 @@ export class OsdSummaryPipe implements PipeTransform {
 
     const osdSummary = [
       {
-        content: `${value.osds.length} (${upCount} up, ${inCount} in`,
-        style: { 'margin-right': '-5px', color: '' }
+        content: `${value.osds.length} total`,
+        class: ''
       }
     ];
+    osdSummary.push({
+      content: '',
+      class: 'card-text-line-break'
+    });
+    osdSummary.push({
+      content: `${upCount} up, ${inCount} in`,
+      class: ''
+    });
 
     const downCount = value.osds.length - upCount;
-    if (downCount > 0) {
+    const outCount = upCount - inCount;
+    if (downCount > 0 || outCount > 0) {
       osdSummary.push({
-        content: ', ',
-        style: { 'margin-right': '0', color: '' }
+        content: '',
+        class: 'card-text-line-break'
       });
+
+      const downText = downCount > 0 ? `${downCount} down` : '';
+      const separator = downCount > 0 && outCount > 0 ? ', ' : '';
+      const outText = outCount > 0 ? `${outCount} out` : '';
       osdSummary.push({
-        content: `${downCount} down`,
-        style: { 'margin-right': '-5px', color: OsdSummaryPipe.COLOR_ERROR }
+        content: `${downText}${separator}${outText}`,
+        class: 'card-text-error'
       });
     }
 
-    osdSummary.push({
-      content: ')',
-      style: { 'margin-right': '0', color: '' }
-    });
-
     return osdSummary;
   }
 }