From 988a986898d86953ed724f64feaaa55f51f64275 Mon Sep 17 00:00:00 2001 From: alfonsomthd Date: Wed, 26 Sep 2018 11:56:24 +0200 Subject: [PATCH] mgr/dashboard: Landing Page Milestone 2 MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit 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 --- .../dashboard/health/health.component.html | 7 +- .../dashboard/health/health.component.scss | 12 +++ .../info-card/info-card.component.scss | 25 ++++- .../ceph/dashboard/osd-summary.pipe.spec.ts | 96 +++++++++++++++---- .../app/ceph/dashboard/osd-summary.pipe.ts | 36 ++++--- 5 files changed, 136 insertions(+), 40 deletions(-) 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 4d93b698e9e..05722e133f0 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 @@ -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"> - + *ngIf="(contentData.osd_map | osdSummary) as osdSummaryContent" + [contentClass]="osdSummaryContent.length > 3 ? 'content-row3 content-highlight' : 'content-row2 content-highlight'"> + {{ result.content }} 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 7387970fa53..ebcc1852c5f 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 @@ -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 2dee85af5eb..541f3ff7601 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 @@ -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 06af6624c3b..92119691bf5 100644 --- 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 4c4e95bbcd3..ad34e87bc67 100644 --- 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; } } -- 2.39.5