From: Afreen Misbah <afreen@ibm.com>
Date: Sun, 17 May 2026 15:07:45 +0000 (+0530)
Subject: mgr/dashboard: fix missing loader and zone group icon
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=10ec25edba971f843f97f300d96c0fe25fc190d5;p=ceph.git

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 de3e74c8a942..314be40ce295 100644
--- 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 3113ba597c9b..92d39708d09d 100644
--- 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 f410e62325b7..5db0b9b896af 100644
--- 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 2fd22eb97b62..d26f42e31cf4 100644
--- 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 9f4c71bbdccb..fee54bd4ee88 100644
--- 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 9a5e465d3ee8..510248cd9d82 100644
--- 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 d1bccc891655..f99833ddb511 100644
--- 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 36a5df28a3a8..5ce43455c344 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
@@ -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 e77d27c0b9f5..1429030166ff 100644
--- 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 456763d3b104..7aa8949ad47a 100644
--- 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 df18fb836ec6..f30f45fc2ea5 100644
--- 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 34d631661b66..d99e4664c9a4 100644
--- 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