From 52fc8edec9794ec75b028b4b1f71b3791a16a8d5 Mon Sep 17 00:00:00 2001
From: Aashish Sharma
 <aasharma@li-e74156cc-2f67-11b2-a85c-e98659a63c5c.ibm.com>
Date: Thu, 20 Jul 2023 12:31:59 +0530
Subject: [PATCH] mgr/dashboard: Add inventory card and two single stat panels
 to rgw overview dashboard

Signed-off-by: Aashish Sharma <aasharma@redhat.com>
---
 .../rgw-overview-dashboard.component.html     | 139 ++++++++++--------
 .../rgw-overview-dashboard.component.scss     |  12 ++
 .../rgw-overview-dashboard.component.spec.ts  |   2 +-
 .../rgw-overview-dashboard.component.ts       |  28 ++--
 src/pybind/mgr/dashboard/services/cluster.py  |   2 +-
 5 files changed, 109 insertions(+), 74 deletions(-)

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 eaf7f47048d36..5b11eb4293411 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
@@ -1,61 +1,84 @@
 <div class="container-fluid">
-  <div class="row mx-0">
-    <cd-card cardTitle="Daemons"
-             i18n-title
-             link="/rgw/daemons"
-             class="col-sm-2 px-3 d-flex"
-             aria-label="Daemons card">
-      <span class="ms-4 me-4">
-        <h1 class="text-center">{{ rgwDaemonCount }}</h1>
-      </span>
-    </cd-card>
-
-    <cd-card cardTitle="Zoning"
-             i18n-title
-             class="col-sm-2 px-3 d-flex"
-             aria-label="Details card">
-      <span class="ms-4 me-4 text-center">
-        <h3>{{ rgwRealmCount }} Realms</h3>
-        <h3>{{ rgwZonegroupCount }} Zonegroups</h3>
-        <h3>{{ rgwZoneCount }} Zones</h3>
-      </span>
-    </cd-card>
-
-    <cd-card cardTitle="Buckets"
-             i18n-title
-             class="col-sm-2 px-3 d-flex"
-             aria-label="Details card">
-      <span class="ms-4 me-4 text-center">
-        <h2>{{ rgwBucketCount }} Buckets</h2>
-        <h2>{{ objectCount }} Objects</h2>
-      </span>
-    </cd-card>
-
-    <cd-card cardTitle="Users"
-             i18n-title
-             class="col-sm-2 px-3 d-flex"
-             aria-label="Details card">
-      <span class="ms-4 me-4 text-center">
-        <h1>{{ UserCount }}</h1>
-      </span>
-    </cd-card>
-
-    <cd-card cardTitle="Used Capacity"
-             i18n-title
-             class="col-sm-2 px-3 d-flex"
-             aria-label="Details card">
-      <span class="ms-4 me-4 text-center">
-        <h1>{{ totalPoolUsedBytes | dimlessBinary}}</h1>
-      </span>
-    </cd-card>
-
-    <cd-card cardTitle="Avg Object Size"
-             i18n-title
-             class="col-sm-2 px-3 d-flex"
-             aria-label="Details card">
-      <span class="ms-4 me-4 text-center">
-        <h1>{{ averageObjectSize | dimlessBinary}}</h1>
-      </span>
-    </cd-card>
+  <div class="row">
+    <div class="col-lg-3">
+      <cd-card cardTitle="Inventory"
+               i18n-title
+               class="col-sm-3 px-3"
+               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="Zonegroup"
+                       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>
+    </div>
+    <div class="col-lg-3">
+      <cd-card cardTitle="Used Capacity"
+               i18n-title
+               class="col-sm-2 px-3 d-flex w-100 h-50 mt-4 pb-5"
+               aria-label="Details card">
+        <span  class="ms-4 me-4 text-center">
+          <h1>{{ totalPoolUsedBytes | dimlessBinary}}</h1>
+        </span>
+      </cd-card>
+      <cd-card cardTitle="Avg Object Size"
+               i18n-title
+               class="col-sm-2 px-3 d-flex w-100 h-50 mt-2 pb-5"
+               aria-label="Details card">
+        <span class="ms-4 me-4 text-center">
+          <h1>{{ averageObjectSize | dimlessBinary}}</h1>
+        </span>
+      </cd-card>
+    </div>
   </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.scss
index e69de29bb2d1d..bda47a5274f01 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.scss
@@ -0,0 +1,12 @@
+hr {
+  margin-bottom: 2px;
+  margin-top: 2px;
+}
+
+.list-group-item {
+  border: 0;
+}
+
+.pb-5 {
+  padding-bottom: 3.5rem !important;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.spec.ts
index 238ac788be247..482fa0f0245da 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.spec.ts
@@ -168,7 +168,7 @@ describe('RgwOverviewDashboardComponent', () => {
   it('should render all cards', () => {
     fixture.detectChanges();
     const dashboardCards = fixture.debugElement.nativeElement.querySelectorAll('cd-card');
-    expect(dashboardCards.length).toBe(6);
+    expect(dashboardCards.length).toBe(3);
   });
 
   it('should get corresponding data into Daemons', () => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.ts
index 2614a81cbe941..a3116834b5963 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.ts
@@ -5,11 +5,6 @@ import { Subscription } from 'rxjs';
 
 import { HealthService } from '~/app/shared/api/health.service';
 import { Permissions } from '~/app/shared/models/permissions';
-import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
-import {
-  FeatureTogglesMap$,
-  FeatureTogglesService
-} from '~/app/shared/services/feature-toggles.service';
 import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.service';
 import { RgwDaemonService } from '~/app/shared/api/rgw-daemon.service';
 import { RgwRealmService } from '~/app/shared/api/rgw-realm.service';
@@ -17,6 +12,11 @@ import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
 import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
 import { RgwBucketService } from '~/app/shared/api/rgw-bucket.service';
 import { RgwUserService } from '~/app/shared/api/rgw-user.service';
+import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
+import {
+  FeatureTogglesMap$,
+  FeatureTogglesService
+} from '~/app/shared/services/feature-toggles.service';
 
 @Component({
   selector: 'cd-rgw-overview-dashboard',
@@ -66,15 +66,6 @@ export class RgwOverviewDashboardComponent implements OnInit, OnDestroy {
       this.daemonSub = this.rgwDaemonService.list().subscribe((data: any) => {
         this.rgwDaemonCount = data.length;
       });
-      this.realmSub = this.rgwRealmService.list().subscribe((data: any) => {
-        this.rgwRealmCount = data['realms'].length;
-      });
-      this.ZonegroupSub = this.rgwZonegroupService.list().subscribe((data: any) => {
-        this.rgwZonegroupCount = data['zonegroups'].length;
-      });
-      this.ZoneSUb = this.rgwZoneService.list().subscribe((data: any) => {
-        this.rgwZoneCount = data['zones'].length;
-      });
       this.BucketSub = this.rgwBucketService.list().subscribe((data: any) => {
         this.rgwBucketCount = data.length;
       });
@@ -87,6 +78,15 @@ export class RgwOverviewDashboardComponent implements OnInit, OnDestroy {
         this.averageObjectSize = data['average_object_size'];
       });
     });
+    this.realmSub = this.rgwRealmService.list().subscribe((data: any) => {
+      this.rgwRealmCount = data['realms'].length;
+    });
+    this.ZonegroupSub = this.rgwZonegroupService.list().subscribe((data: any) => {
+      this.rgwZonegroupCount = data['zonegroups'].length;
+    });
+    this.ZoneSUb = this.rgwZoneService.list().subscribe((data: any) => {
+      this.rgwZoneCount = data['zones'].length;
+    });
   }
 
   ngOnDestroy() {
diff --git a/src/pybind/mgr/dashboard/services/cluster.py b/src/pybind/mgr/dashboard/services/cluster.py
index 6cefd532ed823..f239471d8f35b 100644
--- a/src/pybind/mgr/dashboard/services/cluster.py
+++ b/src/pybind/mgr/dashboard/services/cluster.py
@@ -63,6 +63,7 @@ class ClusterModel:
                                total_objects=total_objects,
                                total_pool_bytes_used=total_pool_bytes_used,
                                average_object_size=average_object_size)._asdict()
+
     @classmethod
     def get_rgw_pools(cls):
         rgw_pool_names = []
@@ -71,4 +72,3 @@ class ClusterModel:
             if 'rgw' in pool.get('application_metadata', {}):
                 rgw_pool_names.append(pool['pool_name'])
         return rgw_pool_names
-
-- 
2.39.5