From 4c6c5787cb338995955b4a30fed9c348337e721c Mon Sep 17 00:00:00 2001
From: Nizamudeen A <nia@redhat.com>
Date: Tue, 3 Oct 2023 17:33:13 +0530
Subject: [PATCH] mgr/dashboard: fix rgw inventory card and broken shadows

Mess up of the dashboard landing page layout fixes PR

Fixes: http://tracker.ceph.com/issues/62961
Signed-off-by: Nizamudeen A <nia@redhat.com>
---
 .../dashboard/dashboard-v3.component.html     | 121 +++++++-----------
 .../dashboard/dashboard-v3.component.scss     |   5 -
 .../rgw-overview-dashboard.component.html     | 119 ++++++++---------
 .../card-row/card-row.component.html          |  59 +++++----
 .../card-row/card-row.component.scss          |   4 +
 .../components/card/card.component.html       |   2 +-
 .../shared/components/card/card.component.ts  |   2 +
 7 files changed, 141 insertions(+), 171 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
index 8faa23a5b2d0b..faf040366fd35 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
@@ -51,89 +51,62 @@
                i18n-title
                class="pt-4"
                aria-label="Inventory card">
-        <hr>
         <!-- Hosts -->
-        <li class="list-group-item">
-          <cd-card-row [data]="healthData.hosts"
-                       link="/hosts"
-                       title="Host"
-                       summaryType="simplified"
-                       *ngIf="healthData.hosts != null"></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.hosts"
+                     link="/hosts"
+                     title="Host"
+                     summaryType="simplified"
+                     *ngIf="healthData.hosts != null"></cd-card-row>
         <!-- Monitors -->
-        <li class="list-group-item">
-          <cd-card-row [data]="healthData.mon_status.monmap.mons.length"
-                       link="/monitor"
-                       title="Monitor"
-                       summaryType="simplified"
-                       *ngIf="healthData.mon_status"></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.mon_status.monmap.mons.length"
+                     link="/monitor"
+                     title="Monitor"
+                     summaryType="simplified"
+                     *ngIf="healthData.mon_status"></cd-card-row>
         <!-- Managers -->
-        <li *ngIf="healthData.mgr_map"
-            class="list-group-item">
-          <cd-card-row [data]="healthData.mgr_map | mgrSummary"
-                       title="Manager"
-                       *ngIf="healthData.mgr_map"></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.mgr_map | mgrSummary"
+                     title="Manager"
+                     *ngIf="healthData.mgr_map"></cd-card-row>
+
         <!-- OSDs -->
-        <li class="list-group-item">
-          <cd-card-row [data]="healthData.osd_map | osdSummary"
-                       link="/osd"
-                       title="OSD"
-                       summaryType="osd"
-                       *ngIf="healthData.osd_map"></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.osd_map | osdSummary"
+                     link="/osd"
+                     title="OSD"
+                     summaryType="osd"
+                     *ngIf="healthData.osd_map"></cd-card-row>
+
         <!-- Pools -->
-        <li *ngIf="healthData.pools"
-            class="list-group-item">
-          <cd-card-row [data]="healthData.pools.length"
-                       link="/pool"
-                       title="Pool"
-                       summaryType="simplified"
-                       *ngIf="healthData.pools"></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.pools.length"
+                     link="/pool"
+                     title="Pool"
+                     summaryType="simplified"
+                     *ngIf="healthData.pools"></cd-card-row>
+
         <!-- PG Info -->
-        <li class="list-group-item">
-          <cd-card-row [data]="healthData.pg_info | pgSummary"
-                       title="PG"
-                       *ngIf="healthData.pg_info"></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.pg_info | pgSummary"
+                     title="PG"
+                     *ngIf="healthData.pg_info"></cd-card-row>
+
         <!-- Object gateways -->
-        <li *ngIf="enabledFeature.rgw && healthData.rgw != null"
-            class="list-group-item"
-            id="rgw-item">
-          <cd-card-row [data]="healthData.rgw"
-                       link="/rgw/daemon"
-                       title="Object Gateway"
-                       summaryType="simplified"
-                       *ngIf="healthData.rgw || healthData.rgw === 0 "></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.rgw"
+                     link="/rgw/daemon"
+                     title="Object Gateway"
+                     summaryType="simplified"
+                     id="rgw-item"
+                     *ngIf="enabledFeature.rgw && healthData.rgw || healthData.rgw === 0 "></cd-card-row>
+
         <!-- Metadata Servers -->
-        <li *ngIf="enabledFeature.cephfs && healthData.fs_map"
-            class="list-group-item"
-            id="mds-item">
-          <cd-card-row [data]="healthData.fs_map | mdsSummary"
-                       title="Metadata Server"
-                       *ngIf="healthData.fs_map"></cd-card-row>
-        </li>
-        <hr>
+        <cd-card-row [data]="healthData.fs_map | mdsSummary"
+                     title="Metadata Server"
+                     id="mds-item"
+                     *ngIf="enabledFeature.cephfs && healthData.fs_map"></cd-card-row>
         <!-- iSCSI Gateways -->
-        <li *ngIf="enabledFeature.iscsi && healthData.iscsi_daemons != null"
-            class="list-group-item"
-            id="iscsi-item">
-          <cd-card-row [data]="healthData.iscsi_daemons"
-                       link="/iscsi/daemon"
-                       title="iSCSI Gateway"
-                       summaryType="iscsi"
-                       *ngIf="healthData.iscsi_daemons"></cd-card-row>
-        </li>
+        <cd-card-row [data]="healthData.iscsi_daemons"
+                     link="/iscsi/daemon"
+                     title="iSCSI Gateway"
+                     summaryType="iscsi"
+                     id="iscsi-item"
+                     *ngIf="enabledFeature.iscsi && healthData.iscsi_daemons"></cd-card-row>
       </cd-card>
     </div>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.scss
index 5d558324319de..49ab49bc81b55 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.scss
@@ -31,8 +31,3 @@
     white-space: normal;
   }
 }
-
-.list-group-item {
-  border: 0;
-  font-size: 14px;
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
index f50a6e6c15163..0bcc48b4be2d1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
@@ -4,61 +4,47 @@
              i18n-title
              class="col-sm-3 px-3 d-flex"
              aria-label="Inventory card">
-      <hr>
-      <li class="list-group-item">
-        <cd-card-row [data]="rgwDaemonCount"
-                     link="/rgw/daemon"
-                     title="Gateway"
-                     summaryType="simplified"
-                     *ngIf="rgwDaemonCount != null"></cd-card-row>
-      </li>
-      <hr>
-      <li class="list-group-item">
-        <cd-card-row [data]="rgwRealmCount"
-                     link="/rgw/multisite"
-                     title="Realm"
-                     summaryType="simplified"
-                     *ngIf="rgwRealmCount != null"></cd-card-row>
-      </li>
-      <hr>
-      <li class="list-group-item">
-        <cd-card-row [data]="rgwZonegroupCount"
-                     link="/rgw/multisite"
-                     title="Zone Group"
-                     summaryType="simplified"
-                     *ngIf="rgwZonegroupCount != null"></cd-card-row>
-      </li>
-      <hr>
-      <li class="list-group-item">
-        <cd-card-row [data]="rgwZoneCount"
-                     link="/rgw/multisite"
-                     title="Zone"
-                     summaryType="simplified"
-                     *ngIf="rgwZoneCount != null"></cd-card-row>
-      </li>
-      <hr>
-      <li class="list-group-item">
-        <cd-card-row [data]="rgwBucketCount"
-                     link="/rgw/bucket"
-                     title="Bucket"
-                     summaryType="simplified"
-                     *ngIf="rgwBucketCount != null"></cd-card-row>
-      </li>
-      <hr>
-      <li class="list-group-item">
-        <cd-card-row [data]="UserCount"
-                     link="/rgw/user"
-                     title="User"
-                     summaryType="simplified"
-                     *ngIf="UserCount != null"></cd-card-row>
-      </li>
-      <hr>
-      <li class="list-group-item">
-        <cd-card-row [data]="objectCount"
-                     title="Object"
-                     summaryType="simplified"
-                     *ngIf="objectCount != null"></cd-card-row>
-      </li>
+
+      <cd-card-row [data]="rgwDaemonCount"
+                   link="/rgw/daemon"
+                   title="Gateway"
+                   summaryType="simplified"
+                   *ngIf="rgwDaemonCount != null"></cd-card-row>
+
+      <cd-card-row [data]="rgwRealmCount"
+                   link="/rgw/multisite"
+                   title="Realm"
+                   summaryType="simplified"
+                   *ngIf="rgwRealmCount != null"></cd-card-row>
+
+      <cd-card-row [data]="rgwZonegroupCount"
+                   link="/rgw/multisite"
+                   title="Zone Group"
+                   summaryType="simplified"
+                   *ngIf="rgwZonegroupCount != null"></cd-card-row>
+
+      <cd-card-row [data]="rgwZoneCount"
+                   link="/rgw/multisite"
+                   title="Zone"
+                   summaryType="simplified"
+                   *ngIf="rgwZoneCount != null"></cd-card-row>
+
+      <cd-card-row [data]="rgwBucketCount"
+                   link="/rgw/bucket"
+                   title="Bucket"
+                   summaryType="simplified"
+                   *ngIf="rgwBucketCount != null"></cd-card-row>
+
+      <cd-card-row [data]="UserCount"
+                   link="/rgw/user"
+                   title="User"
+                   summaryType="simplified"
+                   *ngIf="UserCount != null"></cd-card-row>
+
+      <cd-card-row [data]="objectCount"
+                   title="Object"
+                   summaryType="simplified"
+                   *ngIf="objectCount != null"></cd-card-row>
     </cd-card>
     <cd-card cardTitle="Performance Statistics"
              i18n-title
@@ -92,15 +78,19 @@
       <cd-card cardTitle="Used Capacity"
                i18n-title
                class="col-sm-2 d-flex w-100 h-50 pb-3"
-               aria-label="Used Capacity">
+               aria-label="Used Capacity"
+               [alignItemsCenter]="true"
+               [justifyContentCenter]="true">
         <span  class="ms-4 me-4 text-center">
           <h1>{{ totalPoolUsedBytes | dimlessBinary}}</h1>
         </span>
       </cd-card>
-      <cd-card cardTitle="Avg Object Size"
+      <cd-card cardTitle="Average Object Size"
                i18n-title
                class="col-sm-2 d-flex w-100 h-50 pt-3"
-               aria-label="Avg Object Size">
+               aria-label="Avg Object Size"
+               [alignItemsCenter]="true"
+               [justifyContentCenter]="true">
         <span class="ms-4 me-4 text-center">
           <h1>{{ averageObjectSize | dimlessBinary}}</h1>
         </span>
@@ -129,7 +119,9 @@
         <div class="row pt-2"
              *ngIf="showMultisiteCard; else notConfigured">
           <cd-card cardTitle="Primary Source Zone"
-                   class="col-lg-3 d-flex justify-content-center align-primary-zone">
+                   class="col-lg-3 d-flex justify-content-center align-primary-zone"
+                   [alignItemsCenter]="true"
+                   [justifyContentCenter]="true">
             <span *ngIf="loading"
                   class="d-flex justify-content-center">
               <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
@@ -154,7 +146,7 @@
                 <cd-card *ngFor="let zone of replicaZonesInfo; trackBy: trackByFn"
                          cardTitle="{{zone.name}}"
                          cardType="zone"
-                         shadowClass="shadow"
+                         shadowClass="true"
                          i18n-title
                          class="col-sm-9 col-lg-6 align-replica-zones d-flex pt-4"
                          aria-label="Source Zones Card">
@@ -163,11 +155,12 @@
                              [cardTitle]="title"
                              i18n-title
                              cardType="syncCards"
-                             bgColor="bg-color"
-                             borderClass="border-0"
+                             removeBorder="true"
                              class="col-sm-9 col-lg-6"
                              [ngClass]="{ 'border-left': title === 'Data Sync' }"
-                             aria-label="Charts Card">
+                             aria-label="Charts Card"
+                             [alignItemsCenter]="true"
+                             [justifyContentCenter]="true">
                       <span class="me-2 text-center"
                             *ngIf="title === 'Metadata Sync'">
                         <cd-rgw-sync-metadata-info [metadataSyncInfo]="metadataSyncInfo">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html
index e2c50c8b3522e..4e193717252c3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html
@@ -1,32 +1,35 @@
-<div class="d-flex pl-1 pb-2 pt-2">
-  <div class="ms-4 me-auto">
-    <a [routerLink]="link"
-       *ngIf="link && total > 0; else noLinkTitle"
-       [ngPlural]="total"
-       i18n>
-        {{ total }}
-      <ng-template ngPluralCase="=0">{{ title }}</ng-template>
-      <ng-template ngPluralCase="=1">{{ title }}</ng-template>
-      <ng-template ngPluralCase="other">{{ title }}s</ng-template>
-    </a>
-  </div>
-  <span class="me-3">
-    <ng-container [ngSwitch]="summaryType">
-      <ng-container *ngSwitchCase="'iscsi'">
-        <ng-container *ngTemplateOutlet="iscsiSummary"></ng-container>
-      </ng-container>
-      <ng-container *ngSwitchCase="'osd'">
-        <ng-container *ngTemplateOutlet="osdSummary"></ng-container>
-      </ng-container>
-      <ng-container *ngSwitchCase="'simplified'">
-        <ng-container *ngTemplateOutlet="simplifiedSummary"></ng-container>
-      </ng-container>
-      <ng-container *ngSwitchDefault>
-        <ng-container *ngTemplateOutlet="defaultSummary"></ng-container>
+<hr>
+<li class="list-group-item">
+  <div class="d-flex pl-1 pb-2 pt-2">
+    <div class="ms-4 me-auto">
+      <a [routerLink]="link"
+         *ngIf="link && total > 0; else noLinkTitle"
+         [ngPlural]="total"
+        i18n>
+          {{ total }}
+        <ng-template ngPluralCase="=0">{{ title }}</ng-template>
+        <ng-template ngPluralCase="=1">{{ title }}</ng-template>
+        <ng-template ngPluralCase="other">{{ title }}s</ng-template>
+      </a>
+    </div>
+    <span class="me-3">
+      <ng-container [ngSwitch]="summaryType">
+        <ng-container *ngSwitchCase="'iscsi'">
+          <ng-container *ngTemplateOutlet="iscsiSummary"></ng-container>
+        </ng-container>
+        <ng-container *ngSwitchCase="'osd'">
+          <ng-container *ngTemplateOutlet="osdSummary"></ng-container>
+        </ng-container>
+        <ng-container *ngSwitchCase="'simplified'">
+          <ng-container *ngTemplateOutlet="simplifiedSummary"></ng-container>
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          <ng-container *ngTemplateOutlet="defaultSummary"></ng-container>
+        </ng-container>
       </ng-container>
-    </ng-container>
-  </span>
-</div>
+    </span>
+  </div>
+</li>
 
 <ng-template #defaultSummary>
   <span *ngIf="data.success || data.categoryPgAmount?.clean || (data.success === 0 && data.total === 0)">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.scss
index e69de29bb2d1d..29901b832d3a5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.scss
@@ -0,0 +1,4 @@
+.list-group-item {
+  border: 0;
+  font-size: 14px;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html
index deb408525de85..60c0af60306dc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.html
@@ -14,7 +14,7 @@
       {{ cardTitle }}
   </h5>
   <div class="card-body ps-0 pe-0"
-       [ngClass]="{'d-flex align-items-center': alignItemsCenter}">
+       [ngClass]="{'d-flex align-items-center': alignItemsCenter, 'justify-content-center': justifyContentCenter}">
     <ng-content></ng-content>
   </div>
   <div class="card-footer p-0 bg-white"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.ts
index 55f1ba6ae9362..03d403f40f7cf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/card/card.component.ts
@@ -23,4 +23,6 @@ export class CardComponent {
   fullHeight = false;
   @Input()
   alignItemsCenter = false;
+  @Input()
+  justifyContentCenter = false;
 }
-- 
2.39.5