mgr/dashboard: fix missing loader and zone group icon

- Add state="active" to cds-inline-loading in card-row component
  to properly show loading spinner for table row actions
- Replace parentChild icon with clusterIcon (web-services--cluster)
  for zone group representation in RGW multisite
- Remove parentChild from Icons enum and replace with
  WebServicesCluster in components.module.ts
- Import ComponentsModule in rgw.module.ts for cd-icon support

Signed-off-by: Afreen Misbah <afreen@ibm.com>
Assisted-by: Claude
Fixes: https://tracker.ceph.com/issues/76631

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.html
index de3e74c8a94267156ed53352fbaf46c21deae95a..314be40ce2958f47d7da78e98a149b4da6c8c85e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.html
@@ -6,8 +6,8 @@
                 [class.disabled]="loadingIndicator"
                 class="btn btn-light pull-right"
                 (click)="refreshAllDirectories()">
-          <i [ngClass]="[icons.size24, icons.refresh]"
-             [class.fa-spin]="loadingIndicator"></i>
+          <svg [cdsIcon]="icons.refresh"
+               [size]="icons.size16"></svg>
         </button>
       </div>
       <div class="card-body card-tree">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts
index 3113ba597c9b1bf8a52a46548e825a494bf3a8bd..92d39708d09d61731724849752c2edb4584989a1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs.module.ts
@@ -63,6 +63,7 @@ import AddIcon from '@carbon/icons/es/add/32';
 import LaunchIcon from '@carbon/icons/es/launch/32';
 import Close from '@carbon/icons/es/close/32';
 import Trash from '@carbon/icons/es/trash-can/32';
+import Renew16 from '@carbon/icons/es/renew/16';
 import { CephfsMirroringWizardComponent } from './cephfs-mirroring-wizard/cephfs-mirroring-wizard.component';
 import { CephfsFilesystemSelectorComponent } from './cephfs-filesystem-selector/cephfs-filesystem-selector.component';
 import { CephfsMirroringEntityComponent } from './cephfs-mirroring-entity/cephfs-mirroring-entity.component';
@@ -135,6 +136,6 @@ import { CephfsMirroringEntityComponent } from './cephfs-mirroring-entity/cephfs
 })
 export class CephfsModule {
   constructor(private iconService: IconService) {
-    this.iconService.registerAll([AddIcon, LaunchIcon, Close, Trash]);
+    this.iconService.registerAll([AddIcon, LaunchIcon, Close, Trash, Renew16]);
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
index f410e62325b759e954f8b656ca98ea3c93ff779b..5db0b9b896afea58d114aed0fabd265f23cc6d02 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool.module.ts
@@ -48,7 +48,6 @@ import PasswordIcon from '@carbon/icons/es/password/16';
 import ArrowDownIcon from '@carbon/icons/es/arrow--down/16';
 import ProgressBarRoundIcon from '@carbon/icons/es/progress-bar--round/32';
 import ToolsIcon from '@carbon/icons/es/tools/32';
-import ParentChild from '@carbon/icons/es/parent-child/20';
 import UserAccessLocked from '@carbon/icons/es/user--access-locked/16';
 
 @NgModule({
@@ -105,7 +104,6 @@ export class PoolModule {
       ArrowDownIcon,
       ProgressBarRoundIcon,
       ToolsIcon,
-      ParentChild,
       UserAccessLocked,
       LockedIcon,
       UnlockedIcon

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
index 2fd22eb97b6202abf8aa3140c0f445871665e1a2..d26f42e31cf4a8398731773370fa863fc756ab72 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
@@ -87,8 +87,8 @@
                      [cdsIcon]="icons.deploy"
                      [size]="icons.size20"
                      ></svg>
-                <svg *ngIf="node?.data?.icon === 'parent-child'"
-                     [cdsIcon]="icons.parentChild"
+                <svg *ngIf="node?.data?.icon === 'web-services--cluster'"
+                     [cdsIcon]="icons.clusterIcon"
                      [size]="icons.size20"
                      ></svg>
                 {{ node?.data?.name }}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html
index 9f4c71bbdccb430ef76b1c85c72a79d17b4b1f8b..fee54bd4ee883c8572e6ab9b343ead4ca235d303 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.html
@@ -9,9 +9,9 @@
     <svg [cdsIcon]="icons.down"
          class=" cds-icon--size-07"></svg>
   </li>
-  <li>
-    <i [ngClass]="[icons.size32, icons.cubes]"
-       class="mt-2"></i>
+  <li class="mt-2">
+    <cd-icon type="clusterIcon"
+             [size]="icons.size32"></cd-icon>
   </li>
   <p class="mt-2"> <cds-tag class="tag-info">{{zonegroup}}</cds-tag></p>
   <li>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index 9a5e465d3ee8a9e902356efddf3dfc9885b55c5a..510248cd9d82781aaac1e3fa7db6faba0c45b3b2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -98,7 +98,6 @@ import PasswordIcon from '@carbon/icons/es/password/16';
 import ArrowDownIcon from '@carbon/icons/es/arrow--down/16';
 import ProgressBarRoundIcon from '@carbon/icons/es/progress-bar--round/32';
 import ToolsIcon from '@carbon/icons/es/tools/32';
-import ParentChild from '@carbon/icons/es/parent-child/20';
 import UserAccessLocked from '@carbon/icons/es/user--access-locked/16';
 
 import { ProductiveCardComponent } from '~/app/shared/components/productive-card/productive-card.component';
@@ -120,6 +119,7 @@ import { RgwTopicDetailsComponent } from './rgw-topic-details/rgw-topic-details.
 import { RgwTopicFormComponent } from './rgw-topic-form/rgw-topic-form.component';
 import { RgwBucketNotificationListComponent } from './rgw-bucket-notification-list/rgw-bucket-notification-list.component';
 import { RgwNotificationFormComponent } from './rgw-notification-form/rgw-notification-form.component';
+import { ComponentsModule } from '~/app/shared/components/components.module';
 
 @NgModule({
   imports: [
@@ -162,7 +162,8 @@ import { RgwNotificationFormComponent } from './rgw-notification-form/rgw-notifi
     TilesModule,
     ProductiveCardComponent,
     TimePickerComponent,
-    AreaChartComponent
+    AreaChartComponent,
+    ComponentsModule
   ],
   exports: [
     RgwDaemonDetailsComponent,
@@ -245,7 +246,6 @@ export class RgwModule {
       ArrowDownIcon,
       ProgressBarRoundIcon,
       ToolsIcon,
-      ParentChild,
       UserAccessLocked
     ]);
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zonegroup.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zonegroup.service.ts
index d1bccc8916553564f2f44084406aef741666bf97..f99833ddb51106111b97b62fe4739764fea44db3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zonegroup.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zonegroup.service.ts
@@ -80,7 +80,7 @@ export class RgwZonegroupService {
     nodes['id'] = zonegroup.id;
     nodes['name'] = zonegroup.name;
     nodes['info'] = zonegroup;
-    nodes['icon'] = Icons.parentChild;
+    nodes['icon'] = Icons.clusterIcon;
     nodes['is_master'] = zonegroup.is_master;
     nodes['parent'] = realm ? realm.name : '';
     nodes['is_default'] = zonegroup.id === defaultZonegroupId ? true : false;

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 36a5df28a3a8b7239f925ada2cc04ee023c0aab8..5ce43455c344dad520fc5daf34f72cf32638d998 100644 (file)
--- 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
@@ -104,7 +104,7 @@
     <span *ngIf="data.categoryPgAmount?.working">
       {{ data.categoryPgAmount?.working }}
     </span>
-    <cds-inline-loading class="text-warning"></cds-inline-loading>
+    <cds-inline-loading class="text-warning" state="active"></cds-inline-loading>
   </span>
   }
 </ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index e77d27c0b9f5b1e59efe30294128b9909c20ff44..1429030166ffcfc0cfac644c8cff17466772606d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -128,6 +128,9 @@ import ChevronRight16 from '@carbon/icons/es/chevron--right/16';
 import CaretLeft16 from '@carbon/icons/es/caret--left/16';
 import CaretRight16 from '@carbon/icons/es/caret--right/16';
 import Locked16 from '@carbon/icons/es/locked/16';
+import WebServicesCluster20 from '@carbon/icons/es/web-services--cluster/20';
+import WebServicesCluster32 from '@carbon/icons/es/web-services--cluster/32';
+
 
 import { TearsheetStepComponent } from './tearsheet-step/tearsheet-step.component';
 import { PageHeaderComponent } from './page-header/page-header.component';
@@ -315,7 +318,9 @@ export class ComponentsModule {
       ChevronRight16,
       CaretLeft16,
       CaretRight16,
-      Locked16
+      Locked16,
+      WebServicesCluster20,
+      WebServicesCluster32
     ]);
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
index 456763d3b104b0910ae2ce9b77b5250585d22070..7aa8949ad47a29aaf84024079eacea4ca5aa042d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
@@ -18,7 +18,8 @@ import {
   LayerModule,
   InputModule,
   GridModule,
-  LayoutModule
+  LayoutModule,
+  InlineLoadingModule
 } from 'carbon-components-angular';
 import AddIcon from '@carbon/icons/es/add/16';
 import FilterIcon from '@carbon/icons/es/filter/16';
@@ -107,7 +108,8 @@ import { TableDetailDirective } from './directives/table-detail.directive';
     LayerModule,
     InputModule,
     GridModule,
-    LayoutModule
+    LayoutModule,
+    InlineLoadingModule
   ],
   declarations: [
     TableComponent,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index df18fb836ec625b24afb12e2cfc419c3b7da5c50..f30f45fc2ea51eb91d0c2ac2f8c5d559030d5e81 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -334,7 +334,7 @@
              let-column="data.column"
              let-row="data.row"
              let-value="data.value">
-  <cds-inline-loading *ngIf="row.cdExecuting"></cds-inline-loading>
+  <cds-inline-loading *ngIf="row.cdExecuting" state="active"></cds-inline-loading>
   <span [ngClass]="column?.customTemplateConfig?.valueClass">
     {{ value }}
   </span>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index 34d631661b669fada3e243af9cf8c63242ad8a51..d99e4664c9a4572d0a3ce6422d35192d7ba99e2e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -84,7 +84,6 @@ export enum Icons {
   externalUrl = 'launch', // links to external page
   nfsExport = 'server--rack', // NFS export
   launch = 'launch',
-  parentChild = 'parent-child',
   dataTable = 'data-table',
   idea = 'idea',
   userAccessLocked = 'user--access-locked', // User access locked