From a4ca5f7e70b025d08a5707f6f2ff5fa43b14da04 Mon Sep 17 00:00:00 2001 From: alfonsomthd Date: Thu, 27 Sep 2018 09:59:50 +0200 Subject: [PATCH] mgr/dashboard: New Landing Page: Milestone 2 MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Changed background color to gray. Changed cards' background color to white. Changed card font size to fluid: from 12px to 21px. Info Group Title: fixed font size 21px, removed underline.. CSS Flexbox layout for perf. and capacity cards. CSS adjustments, refactor and cleanup. Fixes: https://tracker.ceph.com/issues/27050 Signed-off-by: Alfonso Martínez --- .../frontend/src/app/app.component.html | 2 +- .../frontend/src/app/app.component.scss | 7 + .../frontend/src/app/app.component.ts | 4 + .../dashboard/health/health.component.html | 241 +++++++++--------- .../dashboard/health/health.component.scss | 33 +-- .../info-card/info-card.component.scss | 172 ++++--------- .../info-group/info-group.component.html | 1 - .../info-group/info-group.component.scss | 20 +- .../select-badges.component.scss | 2 +- .../mgr/dashboard/frontend/src/defaults.scss | 44 +++- 10 files changed, 234 insertions(+), 292 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.html b/src/pybind/mgr/dashboard/frontend/src/app/app.component.html index 669222afc80e7..f21c571da6370 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.html @@ -1,6 +1,6 @@
+ [ngClass]="{'full-height':isLoginActive(), 'dashboard':isDashboardPage()} ">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss index e69de29bb2d1d..3c6ef116106c3 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss @@ -0,0 +1,7 @@ +@import '../defaults'; + +.dashboard { + background-color: $color-whitesmoke-gray; + margin: 0; + padding: 0; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts index 9f5024eb62158..29c168415e81f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.ts @@ -25,4 +25,8 @@ export class AppComponent { isLoginActive() { return this.router.url === '/login' || !this.authStorageService.isLoggedIn(); } + + isDashboardPage() { + return this.router.url === '/dashboard'; + } } 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 05722e133f0ae..a266dffd00989 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,9 +45,9 @@ i18n-cardTitle link="/osd" class="col-sm-6 col-md-4 col-lg-3" - *ngIf="(contentData.osd_map | osdSummary) as osdSummaryContent" - [contentClass]="osdSummaryContent.length > 3 ? 'content-row3 content-highlight' : 'content-row2 content-highlight'"> - + *ngIf="contentData.osd_map" + contentClass="content-row2 content-highlight"> + {{ result.content }} @@ -95,137 +95,140 @@ +
+ + {{ (contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) | round:1 }} + - - {{ (contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) | round:1 }} - + + {{ ((contentData.client_perf.read_bytes_sec + contentData.client_perf.write_bytes_sec) | dimlessBinary) + '/s' }} + - - {{ ((contentData.client_perf.read_bytes_sec + contentData.client_perf.write_bytes_sec) | dimlessBinary) + '/s' }} - + + + + + N/A + + - - - - - N/A - - + + {{ (contentData.client_perf.recovering_bytes_per_sec | dimlessBinary) + '/s' }} + - - {{ (contentData.client_perf.recovering_bytes_per_sec | dimlessBinary) + '/s' }} - - - - {{ contentData.scrub_status }} - + + {{ contentData.scrub_status }} + +
- - {{ contentData.pools.length }} - +
+ + {{ contentData.pools.length }} + - - - - + + + + - - {{ contentData.df?.stats?.total_objects }} - + + {{ contentData.df?.stats?.total_objects }} + - - {{ contentData.pg_info.pgs_per_osd | dimless }} - + + {{ contentData.pg_info.pgs_per_osd | dimless }} + - - -

- → See Logs for more details. -

-
    -
  • - {{ pgStatesText.key }}: {{ pgStatesText.value }} -
    • -
- -
-
- - + + +

+ → See Logs for more details. +

+
    +
  • + {{ pgStatesText.key }}: {{ pgStatesText.value }} +
    • +
+ +
+
+ + +
-
- + +
{{ groupTitle }}
-
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss index 5023de2bdb4f7..07d2f160552d9 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss @@ -1,21 +1,7 @@ @import '../../../../defaults'; .info-group-title { - margin: 10px 10px 0px 10px; - font-size: 1vw; -} - -.underline { - border-bottom: 1px solid $color-info-group-underline; - margin-top: 0px; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 20px; - padding: 0px; -} - -@media (max-width: 767px) { - .info-group-title { - font-size: 4vw; - } + margin: 0 0 1.3vw 0.5vw; + padding: 0; + font-size: 21px; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss index 89815f262e653..8a1109be2e175 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss @@ -9,7 +9,7 @@ border-bottom: 1px solid $color-transparent; font-size: 12px; &:hover { - background-color: $color-off-white; + background-color: $color-whitesmoke-gray; } } .select-menu-item-icon { diff --git a/src/pybind/mgr/dashboard/frontend/src/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/defaults.scss index 3b5a7f23c9d45..9d9c09e21d3ec 100644 --- a/src/pybind/mgr/dashboard/frontend/src/defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/defaults.scss @@ -29,7 +29,7 @@ $color-grad-gray: #ededed; $color-light-gray: #d1d1d1; $color-soft-gray: #ddd; $color-white-gray: #eee; -$color-off-white: #f5f5f5; +$color-whitesmoke-gray: #f5f5f5; $color-solid-white: #ffffff; $color-transparent: rgba(0, 0, 0, 0.09); @@ -72,10 +72,10 @@ $color-login-active-row-text: $color-black; /*Landing Page*/ /*InfoGroup*/ -$color-info-group-underline: $color-off-white; +$color-info-group-underline: $color-whitesmoke-gray; /*InfoCard*/ -$color-info-card-background: $color-off-white; +$color-info-card-background: $color-whitesmoke-gray; $color-info-card-border: $color-soft-gray; /*Navigation*/ @@ -98,21 +98,21 @@ $color-helper-bg: $color-blue; /*Table*/ $color-table-seperator-border: $color-transparent; $color-table-input-border: $color-transparent; -$color-table-dropdown-bg: $color-off-white; -$color-table-header-bg: $color-off-white; +$color-table-dropdown-bg: $color-whitesmoke-gray; +$color-table-header-bg: $color-whitesmoke-gray; $color-table-header-border: $color-light-gray; $color-table-active-row: $color-sky-blue; $color-table-active-row-hover: $color-light-blue; $color-table-progress-bar-bg: $color-sky-blue; $color-table-progress-bar-active: $color-blue; -$color-table-gradient-1: $color-off-white; +$color-table-gradient-1: $color-whitesmoke-gray; $color-table-gradient-2: $color-grad-gray; $color-table-sort: $color-blue; $color-table-empty-row: $color-light-yellow; $color-table-hover-row: $color-white-gray; $color-table-even-row-bg: $color-solid-white; -$color-table-odd-row-bg: $color-off-white; -$color-table-datatable-header: $color-off-white; +$color-table-odd-row-bg: $color-whitesmoke-gray; +$color-table-datatable-header: $color-whitesmoke-gray; /*Chart tooltip*/ $color-chart-tooltip-bg: $color-transparent-black; @@ -138,5 +138,31 @@ $color-rgw-icon: $color-blue-gray; @mixin hf { border-bottom: 1px solid $color-light-gray; - background-color: $color-off-white; + background-color: $color-whitesmoke-gray; +} + +@function strip-unit($value) { + @return $value / ($value * 0 + 1); +} + +@mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) { + $u1: unit($min-vw); + $u2: unit($max-vw); + $u3: unit($min-font-size); + $u4: unit($max-font-size); + + @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { + & { + font-size: $min-font-size; + @media screen and (min-width: $min-vw) { + font-size: calc( + #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * + ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) + ); + } + @media screen and (min-width: $max-vw) { + font-size: $max-font-size; + } + } + } } -- 2.39.5