mgr/dashboard: small fixes and improvements over all cards and layout

	- all cards placed evenly with the same height
	- increased font size on details card and adjusted margin
	- changed capacity card legend to: "Used"
	- adjusted cluster utilization card margins and increased graphs height
	- improved status card toggle
	- changed orchestror to orchestrator
	- switched IPS/OPS graph colors

Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html
index 71cb870b9985c238b52f1270da194a3ccc68ec1e..35dffd46c047c969114e8b4ecc60b8823f33d919 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.html
@@ -1,4 +1,4 @@
-<div class="card shadow-sm">
+<div class="card shadow-sm flex-fill">
   <h4 class="card-title mt-4 ms-4 mb-0">
     {{ title }}
   </h4>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..fdf19a00ec6aa3e4ac5c39c13cccc4fa232b09b5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss
@@ -0,0 +1,5 @@
+.card-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.html
index f5b5bc596b5fc50056ec8968cbb75b91280b9580..6ac991fd58c5603ab6b23ad1b206437a035c057d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.html
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-3">
+  <div class="col-3 center-text">
     <br>
     <b class="chartTitle"
        i18n>{{ chartTitle }}</b>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.scss
index dd3f915d6275262dca9f05892c2aefa1f680c957..12e9b9c1c6a5e1f2d1074f9e8a0ab110367b226d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-area-chart/dashboard-area-chart.component.scss
@@ -1,8 +1,9 @@
-.chartTitle {
-  margin-top: 5vw;
+.center-text {
+  margin-top: 1.2vw;
+  position: relative;
 }
 
 .chart {
-  height: 7vh;
+  height: 8vh;
   margin-top: 15px;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-pie/dashboard-pie.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-pie/dashboard-pie.component.ts
index 4e766f61859cf11dbbcdb7e7f7feb698958a2733..4aaabb6eb4a0116f36608cfaa63fe39d4137eb97 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-pie/dashboard-pie.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard-pie/dashboard-pie.component.ts
@@ -55,7 +55,7 @@ export class DashboardPieComponent implements OnChanges, OnInit {
           generateLabels: (chart: any) => {
             const labels = { 0: {}, 1: {}, 2: {} };
             labels[0] = {
-              text: $localize`Capacity: ${chart.data.datasets[1].data[2]}`,
+              text: $localize`Used: ${chart.data.datasets[1].data[2]}`,
               fillStyle: chart.data.datasets[1].backgroundColor[0],
               strokeStyle: chart.data.datasets[1].backgroundColor[0]
             };

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
index 0b534719331ea5f6c1504e1f9cf34b3550276372..333ccfa7ad21e4135b1d52c27b2042bf01fad287 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
@@ -3,12 +3,13 @@
   <div class="row mx-0">
     <cd-card title="Details"
              i18n-title
-             class="col-sm-3 px-3">
+             class="col-sm-3 px-3"
+             [ngClass]="{'d-flex': flexHeight}">
       <dl class="ms-4 me-4">
         <dt>FSID</dt>
         <dd>{{ detailsCardData.fsid }}</dd>
-        <dt>Orchestror</dt>
-        <dd>{{ detailsCardData.orchestrator }}</dd>
+        <dt>Orchestrator</dt>
+        <dd i18n>{{ detailsCardData.orchestrator || 'Orchestrator is not available' }}</dd>
         <dt>Ceph version</dt>
         <dd>{{ detailsCardData.cephVersion }}</dd>
       </dl>
@@ -16,13 +17,13 @@
 
     <cd-card title="Status"
              i18n-title
-             class="col-sm-6 px-3">
-      <div class="d-flex ms-4 me-4 mb-5">
+             class="col-sm-6 px-3 d-flex">
+      <div class="d-flex ms-4 me-4 mb-5 center-content">
         <i *ngIf="healthData.health?.status"
-           [ngClass]="[healthData.health.status | healthIcon, icons.large]"
+           [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
            [ngStyle]="healthData.health.status | healthColor"
            [title]="healthData.health.status"></i>
-        <span class="ms-2 mt-n1"
+        <span class="ms-2 mt-n1 lead"
               i18n>Cluster</span>
       </div>
       <section class="border-top mt-5"
@@ -58,7 +59,7 @@
                     data-toggle="collapse"
                     aria-label="toggle alert window"
                     [attr.aria-expanded]="showAlerts"
-                    (click)="toggleAlertsWindow('danger')"></button>
+                    (click)="toggleAlertsWindow('danger', 'true')"></button>
 
           </div>
         </div>
@@ -76,7 +77,8 @@
 
     <cd-card title="Capacity"
              i18n-title
-             class="col-sm-3 px-3">
+             class="col-sm-3 px-3"
+             [ngClass]="{'d-flex': flexHeight}">
       <ng-container class="ms-4 me-4"
                     *ngIf="capacity && osdSettings">
         <cd-dashboard-pie [data]="{max: capacity.total_bytes, current: capacity.total_used_raw_bytes}"
@@ -86,11 +88,12 @@
       </ng-container>
     </cd-card>
   </div>
-  <!-- Inventory Card -->
+  <!-- Second row -->
   <div class="row mx-0">
+    <!-- Inventory Card -->
     <cd-card title="Inventory"
              i18n-title
-             class="col-sm-3 px-3">
+             class="col-sm-3 px-3 d-flex">
       <!-- Hosts -->
       <li class="border-top list-group-item">
         <cd-card-row [data]="healthData.hosts"
@@ -146,7 +149,7 @@
                      link="/rgw/daemon"
                      title="Object Gateway"
                      summaryType="simplified"
-                     *ngIf="healthData.rgw"></cd-card-row>
+                     *ngIf="healthData.rgw || healthData.rgw === 0 "></cd-card-row>
       </li>
 
       <!-- Metadata Servers -->
@@ -172,8 +175,8 @@
 
     <cd-card title="Cluster utilization"
              i18n-title
-             class="col-sm-6 px-3">
-      <div class="ms-4 me-4">
+             class="col-sm-9 px-3 d-flex">
+      <div class="ms-4 me-4 mt-0">
         <cd-dashboard-time-selector (selectedTime)="getPrometheusData($event)">
         </cd-dashboard-time-selector>
         <ng-container *ngIf="capacity">
@@ -188,8 +191,8 @@
                                  dataUnits="none"
                                  label="IPS"
                                  label2="OPS"
-                                 [data]="queriesResults.IPS"
-                                 [data2]="queriesResults.OPS">
+                                 [data]="queriesResults.OPS"
+                                 [data2]="queriesResults.IPS">
         </cd-dashboard-area-chart>
         <cd-dashboard-area-chart chartTitle="Latency"
                                  dataUnits="ms"
@@ -207,14 +210,6 @@
         </cd-dashboard-area-chart>
       </div>
     </cd-card>
-
-    <cd-card title="Events"
-             i18n-title
-             class="col-sm-3 px-3">
-      <div class="ms-4 me-4">
-        Text
-      </div>
-    </cd-card>
   </div>
 </div>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss
index eda8fad74e54913ee35d9fd666daddebe8a753a5..140f5f78fa4ad842ce31feef75cf27e1d5d658a4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.scss
@@ -24,6 +24,12 @@ hr {
   order: 2;
 }
 
+.center-content {
+  align-items: center;
+  margin-top: 30px;
+  position: relative;
+}
+
 button.dropdown-toggle {
   position: relative;
 
@@ -49,3 +55,13 @@ button.dropdown-toggle {
 .list-group-item {
   border: 0;
 }
+
+dt {
+  font-size: larger;
+  margin-bottom: 0.3rem;
+}
+
+dd {
+  font-size: larger;
+  margin-bottom: 0.8rem;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
index 56b9d262075bc7eab8d46f5e6b45c82b0f567346..68ee9b5486c197deb525de2135efde396468bd38 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
@@ -194,7 +194,7 @@ describe('Dashbord Component', () => {
   it('should render all cards', () => {
     fixture.detectChanges();
     const dashboardCards = fixture.debugElement.nativeElement.querySelectorAll('cd-card');
-    expect(dashboardCards.length).toBe(6);
+    expect(dashboardCards.length).toBe(5);
   });
 
   it('should get corresponding data into detailsCardData', () => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
index e82f1d49286326cc61e141737ced2fe46f7e85a8..21d922042d684f5bc23a293367355d1751844258 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
@@ -45,6 +45,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   isAlertmanagerConfigured = false;
   icons = Icons;
   showAlerts = false;
+  flexHeight = true;
   simplebar = {
     autoHide: false
   };
@@ -110,11 +111,22 @@ export class DashboardComponent implements OnInit, OnDestroy {
     });
   }
 
-  toggleAlertsWindow(type: string) {
+  toggleAlertsWindow(type: string, isToggleButton: boolean = false) {
+    if (isToggleButton) {
+      this.showAlerts = !this.showAlerts;
+      this.flexHeight = !this.flexHeight;
+    } else if (
+      !this.showAlerts ||
+      (this.alertType === type && type !== 'danger') ||
+      (this.alertType !== 'warning' && type === 'danger')
+    ) {
+      this.showAlerts = !this.showAlerts;
+      this.flexHeight = !this.flexHeight;
+    }
+
     type === 'danger' ? (this.alertType = 'critical') : (this.alertType = type);
     this.textClass = `text-${type}`;
     this.borderClass = `border-${type}`;
-    this.showAlerts = !this.showAlerts;
   }
 
   getDetailsCardData() {