mgr/dashboard: New Landing Page: Milestone 2

Changed navigation menu dropdown arrows' color to white.

All cards (except logs) viewable at-a-glance in Full HD presentation mode.

CSS adjustments, refactor and cleanup.

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 a266dffd009898f08fdb80d490419c19a908aa74..61695902e2c42cb540f825dbba6c8e063079f7fa 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
@@ -118,7 +118,7 @@
                     i18n-cardTitle
                     class="cd-col-5"
                     cardClass="card-medium"
-                    [contentClass]="(contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) <= 0 ? 'content-medium content-highlight' : 'card-chart'"
+                    [contentClass]="(contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) <= 0 ? 'content-medium content-highlight' : 'content-chart'"
                     *ngIf="contentData.client_perf">
         <cd-health-pie *ngIf="(contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) > 0"
                        [data]="contentData"
@@ -171,7 +171,7 @@
                     i18n-cardTitle
                     class="cd-col-5"
                     cardClass="card-medium"
-                    contentClass="card-chart"
+                    contentClass="content-chart"
                     *ngIf="contentData.mon_status">
         <cd-health-pie [data]="contentData"
                        [isBytesData]="true"
@@ -202,7 +202,7 @@
                     i18n-cardTitle
                     class="cd-col-5"
                     cardClass="card-medium"
-                    contentClass="card-chart"
+                    contentClass="content-chart"
                     (click)="pgStatusTarget.toggle()">
         <ng-template #pgStatus>
           <p class="logs-link"

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 d28d5689ba49761eed09e8ded6430201c1a1c543..66791b49feb937b825ac03082d2463421b289cf8 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
@@ -36,7 +36,8 @@ $popover-text-font-size: 10px;
 }
 
 .info-group {
-  margin-bottom: 20px;
+  margin: 0;
+  padding: 0;
 }
 
 cd-info-card {

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 b03091f038cac32f89146e97db4e5a880cd3383d..32eead47d2235d8b4948623ea4356d69428bc3a6 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
@@ -1,7 +1,7 @@
 @import '../../../../defaults';
 
-$card-height: 8vw;
-$card-medium-height: 13vw;
+$card-height: 6vw;
+$card-medium-height: 12vw;
 $card-font-min-width: 320px;
 $card-font-max-width: 1920px;
 $card-font-min-size: 12px;
@@ -42,7 +42,7 @@ $logs-text-font-size: $card-font-min-size;
   transform: translate(-50%);
 }
 
-.card-chart {
+.content-chart {
   position: unset;
   top: unset;
   left: unset;
@@ -91,34 +91,36 @@ $logs-text-font-size: $card-font-min-size;
   text-align: left;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 1599px) {
   .card {
-    min-height: $card-height * 2;
+    min-height: $card-height * 1.3;
   }
 
   .card-medium {
-    min-height: $card-medium-height * 1.9;
+    min-height: $card-medium-height * 1.5;
   }
 }
 
-@media (min-width: 992px) {
+@media (max-width: 991px) {
   .card {
-    min-height: $card-height;
+    min-height: $card-height * 2;
   }
+}
 
+@media (max-width: 991px) and (min-width: 768px) {
   .card-medium {
-    min-height: $card-medium-height * 1.5;
+    min-height: $card-medium-height * 2.2;
   }
 }
 
-@media (min-width: 1200px) {
-  .card-medium {
-    min-height: $card-medium-height * 1.5;
+@media (max-width: 599px) {
+  .card {
+    min-height: $card-height * 3;
   }
 }
 
-@media (min-width: 1600px) {
-  .card-medium {
-    min-height: $card-medium-height;
+@media (max-width: 319px) {
+  .card {
+    min-height: $card-height * 4;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
index 9d9c09e21d3ec51dc5b234b7f74fb8b17c055056..f75f9c59d31e5ea68820bb808b2d0ec98d4fa9be 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
@@ -47,7 +47,7 @@ $color-button-caret: $color-white-gray;
 $color-dropdown-menu: $color-dark-gray;
 $color-dropdown-active-text: $color-white-gray;
 $color-dropdown-active-bg: $color-blue;
-$color-caret-text: $color-blue;
+$color-caret-text: $color-solid-white;
 $color-progress-bar-info-bg: $color-blue;
 $color-progress-bar-freespace-bg: $color-light-gray;
 $color-oaprogress-text: $color-black;