From: Afreen Misbah <afreen@ibm.com>
Date: Sun, 17 May 2026 09:48:04 +0000 (+0530)
Subject: mgr/dashboard: replace icons.spin with Carbon loading components
X-Git-Tag: v21.0.1~187^2~4
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=da27d0806d42492dccd190e3046e298172fe52a7;p=ceph.git

mgr/dashboard: replace icons.spin with Carbon loading components

Replace fork-awesome spinner classes with appropriate Carbon loading components:

- cds-inline-loading: for inline spinners (action feedback, status updates)
  * table row actions (executing/removing)
  * upgrade status text/buttons
  * loading panel alerts

- cds-loading size="sm": for section data loading
  * tree view loading (crushmap, multisite-details, cephfs-directories)
  * progress component operations

- cds-loading size="lg": for dashboard/overview loading
  * rgw-overview-dashboard cards
  * multi-cluster overview

Added LoadingModule and InlineLoadingModule imports to:
- block.module.ts
- cephfs.module.ts
- cluster.module.ts
(rgw.module.ts and components.module.ts already had them)

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/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
index c575ca7d01b..1f51cb650ab 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
@@ -64,7 +64,9 @@ import {
   GridModule,
   IconModule,
   IconService,
+  InlineLoadingModule,
   InputModule,
+  LoadingModule,
   ModalModule,
   NumberModule,
   RadioModule,
@@ -121,6 +123,8 @@ import { NvmeofTabsComponent } from './nvmeof-tabs/nvmeof-tabs.component';
     ButtonModule,
     GridModule,
     IconModule,
+    InlineLoadingModule,
+    LoadingModule,
     CheckboxModule,
     RadioModule,
     SelectModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts
index 33c08351c04..13483275b2a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-details/iscsi-target-details.component.ts
@@ -97,7 +97,7 @@ export class IscsiTargetDetailsComponent implements OnChanges, OnInit {
       target: {
         expanded: _.join(
           this.selectedItem.cdExecuting
-            ? [Icons.size24, Icons.spinner, Icons.spin]
+            ? [Icons.size24, Icons.spinner]
             : [Icons.size24, Icons.bullseye],
           ' '
         )
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
index b36ef9e8b72..e7fc966455b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
@@ -102,8 +102,7 @@
              let-column="data.column"
              let-value="data.value"
              let-row="data.row">
-  <i [ngClass]="[icons.spinner, icons.spin]"
-     *ngIf="row.cdExecuting"></i>
+  <cds-inline-loading *ngIf="row.cdExecuting"></cds-inline-loading>
     <span [ngClass]="column?.customTemplateConfig?.valueClass">
     {{ value }}
   </span>
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 82d5f5a1dfc..de3e74c8a94 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
@@ -15,7 +15,9 @@
                        (select)="selectNode($event)">
         </cds-tree-view>
         <div *ngIf="loadingIndicator">
-          <i [ngClass]="[icons.spinner, icons.spin]"></i>
+          <cds-loading [isActive]="true"
+                       [overlay]="false"
+                       size="sm"></cds-loading>
         </div>
       </div>
     </div>
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 2b0555b5430..3113ba597c9 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
@@ -42,8 +42,10 @@ import {
   GridModule,
   IconModule,
   IconService,
+  InlineLoadingModule,
   InputModule,
   LayoutModule,
+  LoadingModule,
   ModalModule,
   NumberModule,
   PlaceholderModule,
@@ -94,6 +96,8 @@ import { CephfsMirroringEntityComponent } from './cephfs-mirroring-entity/cephfs
     LayoutModule,
     ComboBoxModule,
     IconModule,
+    InlineLoadingModule,
+    LoadingModule,
     RadioModule,
     BaseChartDirective,
     TabsModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index d636b5dc996..312ee69f0a6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -10,7 +10,9 @@ import {
   ButtonModule,
   GridModule,
   ProgressIndicatorModule,
+  InlineLoadingModule,
   InputModule,
+  LoadingModule,
   ModalModule,
   TreeviewModule,
   ListModule,
@@ -123,7 +125,9 @@ import { TextLabelListComponent } from '~/app/shared/components/text-label-list/
     GridModule,
     ProgressIndicatorModule,
     ButtonModule,
+    InlineLoadingModule,
     InputModule,
+    LoadingModule,
     ModalModule,
     ListModule,
     ToggletipModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html
index d59ca849a10..804728c35c2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.html
@@ -6,8 +6,10 @@
       <div class="card-body">
         <div class="row">
           <div class="col-sm-6 col-lg-6 tree-container">
-            <i *ngIf="loadingIndicator"
-               [ngClass]="[icons.size24, icons.spinner, icons.spin]"></i>
+            <cds-loading *ngIf="loadingIndicator"
+                         [isActive]="true"
+                         [overlay]="false"
+                         size="sm"></cds-loading>
             <cds-tree-view #tree
                            [isMultiSelect]="false"
                            (select)="onNodeSelected($event)">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.html
index bbdadd9d0ee..97e27b280c4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster.component.html
@@ -52,9 +52,10 @@
   <div class="container h-75">
     <div class="row h-100 justify-content-center align-items-center">
       <div class="blank-page">
-        <i class="mx-auto d-block"
-           [ngClass]="[icons.size32, icons.spinner, icons.spin]">
-        </i>
+        <cds-loading class="mx-auto d-block"
+                     [isActive]="true"
+                     [overlay]="false"
+                     size="lg"></cds-loading>
         <p class="text-center mt-3"
            i18n>Loading data, Please wait...</p>
       </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
index 2bc713bf3dc..0114a257cc4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
@@ -236,11 +236,24 @@
             aria-label="Upgrade now"
             [disabled]="true"
             i18n>Checking for upgrades
-      <i [ngClass]="[icons.spin, icons.spinner]"></i>
+      <cds-inline-loading></cds-inline-loading>
     </button>
   </div>
 </ng-template>
 
+<<<<<<< HEAD
+=======
+<ng-template #loadingDetails>
+  <div class="w-50"
+       *ngIf="!errorMessage; else upgradeInfoError">
+    <span class="text-info justify-content-center align-items-center"
+          i18n>Fetching registry information
+      <cds-inline-loading></cds-inline-loading>
+    </span>
+  </div>
+</ng-template>
+
+>>>>>>> 60818962ca7 (mgr/dashboard: replace icons.spin with Carbon loading components)
 <ng-template #upgradeStatusError>
   <div cdsStack
        orientation="vertical"
@@ -259,6 +272,7 @@
 </ng-template>
 
 <ng-template #upgradeProgress>
+<<<<<<< HEAD
   <div cdsStack
        orientation="vertical"
        gap="4"
@@ -266,6 +280,11 @@
     <h5 class="cds--type-heading-compact-01"
         i18n>
       <i [ngClass]="[icons.spin, icons.spinner]"></i>
+=======
+  <div class="d-flex flex-column justify-content-center align-items-center mt-2">
+    <h5 i18n>
+      <cds-inline-loading></cds-inline-loading>
+>>>>>>> 60818962ca7 (mgr/dashboard: replace icons.spin with Carbon loading components)
       Upgrade in progress {{executingTasks?.progress}}%</h5>
     <a class="cds--link cds-mb-3"
        routerLink="/upgrade/progress"
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 36b3fab23fb..2fd22eb97b6 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
@@ -47,8 +47,10 @@
        i18n>Topology Viewer</div>
   <div class="row">
     <div class="col-sm-6 col-lg-6 tree-container">
-      <i *ngIf="loadingIndicator"
-         [ngClass]="[icons.size24, icons.spinner, icons.spin]"></i>
+      <cds-loading *ngIf="loadingIndicator"
+                   [isActive]="true"
+                   [overlay]="false"
+                   size="sm"></cds-loading>
       <cds-tree-view #tree
                      [isMultiSelect]="false"
                      (select)="onNodeSelected($event)">
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 7e5897ea69b..36a5df28a3a 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,9 +104,7 @@
     <span *ngIf="data.categoryPgAmount?.working">
       {{ data.categoryPgAmount?.working }}
     </span>
-    <i class="text-warning"
-       [ngClass]="[icons.spinner, icons.spin]">
-    </i>
+    <cds-inline-loading class="text-warning"></cds-inline-loading>
   </span>
   }
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
index c2a1b8842b5..2c8ca2e0151 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
@@ -1,9 +1,8 @@
 <ngb-alert type="info"
            [dismissible]="false">
   <strong>
-    <i [ngClass]="[icons.spinner, icons.spin]"
-       aria-hidden="true"
-       class="me-2"></i>
+    <cds-inline-loading aria-hidden="true"
+                        class="me-2"></cds-inline-loading>
   </strong>
   <ng-content></ng-content>
 </ngb-alert>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/progress/progress.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/progress/progress.component.html
index 52f37ea57c2..377a903edf5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/progress/progress.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/progress/progress.component.html
@@ -3,10 +3,14 @@
     <h3 class="text-center"
         [ngClass]="{ 'mt-3': status === 'in-progress' && isPaused }"
         *ngIf="!value || actionName === 'upgrading'">
-      <i *ngIf="status === 'in-progress' && isPaused; else spinningIcon"
-         [ngClass]="[icons.size24, icons.spinner]"></i>
+      <cds-loading *ngIf="status === 'in-progress' && isPaused; else spinningIcon"
+                   [isActive]="false"
+                   [overlay]="false"
+                   size="sm"></cds-loading>
       <ng-template #spinningIcon>
-        <i [ngClass]="[icons.size24, icons.spin, icons.spinner]"></i>
+        <cds-loading [isActive]="true"
+                     [overlay]="false"
+                     size="sm"></cds-loading>
       </ng-template>
     </h3>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/upgradable/upgradable.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/upgradable/upgradable.component.html
new file mode 100644
index 00000000000..e356fbb5022
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/upgradable/upgradable.component.html
@@ -0,0 +1,26 @@
+<div *ngIf="upgradeStatus$ | async as status; else isUpgradable">
+  <ng-container *ngIf="status.is_paused || status.in_progress; else isUpgradable">
+    <h5 *ngIf="status.is_paused; else inProgress"
+        i18n>
+      Upgrade is paused
+    </h5>
+    <ng-template #inProgress>
+      <a href="#/upgrade/progress"
+         i18n>
+        <cds-inline-loading></cds-inline-loading>
+          Upgrading {{executingTask?.progress}}%
+      </a>
+    </ng-template>
+  </ng-container>
+</div>
+
+<ng-template #isUpgradable>
+  <div *ngIf="upgradeInfo$ | async as info"
+       i18n>
+    <h5 *ngIf="info.versions.length > 0"
+        (click)="upgradeModal()">
+      <i [ngClass]="icons.up"></i>
+      Upgrade available
+    </h5>
+  </div>
+</ng-template>
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 57e400c29bf..df18fb836ec 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,8 +334,7 @@
              let-column="data.column"
              let-row="data.row"
              let-value="data.value">
-  <i [ngClass]="[icons.spinner, icons.spin]"
-     *ngIf="row.cdExecuting"></i>
+  <cds-inline-loading *ngIf="row.cdExecuting"></cds-inline-loading>
   <span [ngClass]="column?.customTemplateConfig?.valueClass">
     {{ value }}
   </span>