mgr/dashboard: Add inventory card and two single stat panels to rgw

overview dashboard

Signed-off-by: Aashish Sharma <aasharma@redhat.com>

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 eaf7f47048d36cd68347c23aeacb833472230546..5b11eb4293411ea366a482c84a02c28e3c04e34b 100644 (file)
--- 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..bda47a5274f01719d3b80c1033af79777cf317a5 100644 (file)
--- 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 238ac788be247a47faa360cb92bc3a597250b912..482fa0f0245da6a907ce9f57da2dc55b4f4976c2 100644 (file)
--- 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 2614a81cbe9419b8c65e5140d1d791b2bb2c976c..a3116834b5963a5dff892db95b54be951c74e01b 100644 (file)
--- 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 6cefd532ed823105557b30fe636fa4bf62f5374e..f239471d8f35bc2578d98c03feb216554b259f76 100644 (file)
--- 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
-