From: Afreen Misbah <afreen@ibm.com>
Date: Sun, 17 May 2026 09:19:06 +0000 (+0530)
Subject: mgr/dashboard: replace fork-awesome size classes with Carbon sizes
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=8f9abc8f83896698a715a06fade5818d28d1bb0a;p=ceph.git

mgr/dashboard: replace fork-awesome size classes with Carbon sizes

Replace icons.large/large2x/large3x with Carbon icon sizes:
- icons.large -> icons.size24
- icons.large2x -> icons.size32
- icons.large3x -> icons.size32

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

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
     - rebase conflicts
---

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 64913109abe2..33c08351c043 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,25 +97,25 @@ export class IscsiTargetDetailsComponent implements OnChanges, OnInit {
       target: {
         expanded: _.join(
           this.selectedItem.cdExecuting
-            ? [Icons.large, Icons.spinner, Icons.spin]
-            : [Icons.large, Icons.bullseye],
+            ? [Icons.size24, Icons.spinner, Icons.spin]
+            : [Icons.size24, Icons.bullseye],
           ' '
         )
       },
       initiators: {
-        expanded: _.join([Icons.large, Icons.user], ' '),
+        expanded: _.join([Icons.size24, Icons.user], ' '),
         leaf: _.join([Icons.user], ' ')
       },
       groups: {
-        expanded: _.join([Icons.large, Icons.users], ' '),
+        expanded: _.join([Icons.size24, Icons.users], ' '),
         leaf: _.join([Icons.users], ' ')
       },
       disks: {
-        expanded: _.join([Icons.large, Icons.disk], ' '),
+        expanded: _.join([Icons.size24, Icons.disk], ' '),
         leaf: _.join([Icons.disk], ' ')
       },
       portals: {
-        expanded: _.join([Icons.large, Icons.server], ' '),
+        expanded: _.join([Icons.size24, Icons.server], ' '),
         leaf: _.join([Icons.server], ' ')
       }
     };
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 a1a74471b37c..82d5f5a1dfc4 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,7 +6,7 @@
                 [class.disabled]="loadingIndicator"
                 class="btn btn-light pull-right"
                 (click)="refreshAllDirectories()">
-          <i [ngClass]="[icons.large, icons.refresh]"
+          <i [ngClass]="[icons.size24, icons.refresh]"
              [class.fa-spin]="loadingIndicator"></i>
         </button>
       </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html
index 46d6c0f1848a..04800e44ac28 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-snapshotschedule-list/cephfs-snapshotschedule-list.component.html
@@ -23,7 +23,7 @@
   <span
   *ngIf="row.active; else inactiveStatusTpl">
     <i
-      [ngClass]="[icons.success, icons.large]"
+      [ngClass]="[icons.success, icons.size24]"
       ngbTooltip="{{ row.pathForSelection?.split?.('@')?.[0] }} is active"
       class="text-success"
     ></i>
@@ -31,7 +31,7 @@
 
   <ng-template #inactiveStatusTpl>
     <i
-      [ngClass]="[icons.warning, icons.large]"
+      [ngClass]="[icons.warning, icons.size24]"
       class="text-warning"
       ngbTooltip="{{ row.pathForSelection?.split?.('@')?.[0] }} has been deactivated"
     ></i>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html
index 4cec98e31c6b..ea5e7ce80800 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html
@@ -62,13 +62,13 @@
   <span class="fw-bold">{{row.name}}</span>
 
   <span *ngIf="row?.info?.state === 'complete'; else snapshotRetainedTpl">
-    <i [ngClass]="[icons.success, icons.large]"
+    <i [ngClass]="[icons.success, icons.size24]"
        ngbTooltip="{{row.name}} is ready to use"
        class="text-success"></i>
   </span>
 
   <ng-template #snapshotRetainedTpl>
-    <i [ngClass]="[icons.warning, icons.large]"
+    <i [ngClass]="[icons.warning, icons.size24]"
        class="text-warning"
        ngbTooltip="{{row.name}} is removed after retaining the snapshots"></i>
   </ng-template>
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 914327280359..d59ca849a10a 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
@@ -7,7 +7,7 @@
         <div class="row">
           <div class="col-sm-6 col-lg-6 tree-container">
             <i *ngIf="loadingIndicator"
-               [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
+               [ngClass]="[icons.size24, icons.spinner, icons.spin]"></i>
             <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-list/multi-cluster-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.html
index c7e4c2e65a35..1ccc51fdb059 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component.html
@@ -4,7 +4,7 @@
     <div class="row h-100 justify-content-center align-items-center">
       <div class="blank-page">
         <i class="mx-auto d-block"
-           [ngClass]="[icons.large, icons.wrench]">
+           [ngClass]="[icons.size24, icons.wrench]">
         </i>
       <div class="mt-4 text-center">
         <h4 class="mt-3">This cluster is already managed by cluster -
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 44a082a2850b..bbdadd9d0ee6 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
@@ -53,7 +53,7 @@
     <div class="row h-100 justify-content-center align-items-center">
       <div class="blank-page">
         <i class="mx-auto d-block"
-           [ngClass]="[icons.large3x, icons.spinner, icons.spin]">
+           [ngClass]="[icons.size32, icons.spinner, icons.spin]">
         </i>
         <p class="text-center mt-3"
            i18n>Loading data, Please wait...</p>
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 8574b23cba23..36b3fab23fb7 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
@@ -48,7 +48,7 @@
   <div class="row">
     <div class="col-sm-6 col-lg-6 tree-container">
       <i *ngIf="loadingIndicator"
-         [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
+         [ngClass]="[icons.size24, icons.spinner, icons.spin]"></i>
       <cds-tree-view #tree
                      [isMultiSelect]="false"
                      (select)="onNodeSelected($event)">
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 658594f5d3e1..9f4c71bbdccb 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
@@ -10,7 +10,7 @@
          class=" cds-icon--size-07"></svg>
   </li>
   <li>
-    <i [ngClass]="[icons.large2x, icons.cubes]"
+    <i [ngClass]="[icons.size32, icons.cubes]"
        class="mt-2"></i>
   </li>
   <p class="mt-2"> <cds-tag class="tag-info">{{zonegroup}}</cds-tag></p>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
index 2db4f505f70f..cdb38fcf5553 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
@@ -30,7 +30,7 @@
                 i18n-title
                 title="Show hidden information"
                 (click)="showMessage = !showMessage">
-          <i [ngClass]="[icons.infoCircle, icons.large]"></i>
+          <i [ngClass]="[icons.infoCircle, icons.size24]"></i>
         </button>
       </div>
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
new file mode 100644
index 000000000000..e17d79abd65b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@@ -0,0 +1,149 @@
+<ng-template #tasksTpl>
+  <!-- Executing -->
+  <div *ngFor="let executingTask of executingTasks; trackBy:trackByFn">
+    <div class="card tc_task border-0">
+      <div class="row no-gutters">
+        <div class="col-md-2 text-center">
+          <span class="text-info">
+            <svg [cdsIcon]="icons.circle"
+                 [size]="icons.size16"
+                 ></svg>
+          </span>
+        </div>
+        <div class="col-md-9">
+          <div class="card-body p-1">
+            <h6 class="card-title bold">{{ executingTask.description }}</h6>
+            <div class="mb-1">
+              <ngb-progressbar type="info"
+                               [value]="executingTask?.progress"
+                               [striped]="true"
+                               [animated]="true"></ngb-progressbar>
+            </div>
+            <p class="card-text text-muted">
+              <small class="date float-start">
+                {{ executingTask.begin_time | cdDate }}
+              </small>
+
+              <span class="float-end">
+                {{ executingTask.progress || 0 }} %
+              </span>
+            </p>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <hr>
+  </div>
+</ng-template>
+
+<ng-template #notificationsTpl>
+  <ng-container *ngIf="notifications.length > 0">
+    <button type="button"
+            class="btn btn-light btn-block"
+            (click)="removeAll(); $event.stopPropagation()">
+      <svg [cdsIcon]="icons.trash"
+           [size]="icons.size16"
+           ></svg>
+      &nbsp;
+      <ng-container i18n>Clear notifications</ng-container>
+    </button>
+
+    <hr>
+
+    <div *ngFor="let notification of notifications; let i = index"
+         [ngClass]="notification.borderClass">
+      <div class="card tc_notification border-0">
+        <div class="row no-gutters">
+          <div class="col-md-2 text-center">
+            <span [ngClass]="[icons.stack, icons.size24,  notification.textClass]">
+              <i [ngClass]="[icons.circle, icons.stack2x]"></i>
+              <i [ngClass]="[icons.stack1x, icons.inverse, notification.iconClass]"></i>
+            </span>
+          </div>
+          <div class="col-md-10">
+            <div class="card-body p-1">
+              <button class="btn btn-link float-end mt-0 pt-0"
+                      title="Remove notification"
+                      i18n-title
+                      (click)="remove(i); $event.stopPropagation()">
+                <svg [cdsIcon]="icons.trash"
+                     [size]="icons.size16"
+                     ></svg>
+              </button>
+              <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && !notification.alertSilenced"
+                      class="btn btn-link float-end text-muted mute m-0 p-0"
+                      title="Silence Alert"
+                      i18n-title
+                      (click)="silence(notification)">
+                <svg [cdsIcon]="icons.mute"
+                     [size]="icons.size16"
+                     ></svg>
+              </button>
+              <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && notification.alertSilenced"
+                      class="btn btn-link float-end text-muted mute m-0 p-0"
+                      title="Expire Silence"
+                      i18n-title
+                      (click)="expire(notification)">
+                <svg [cdsIcon]="icons.bell"
+                     [size]="icons.size16"
+                     ></svg>
+              </button>
+
+
+              <h6 class="card-title bold">{{ notification.title }}</h6>
+              <p class="card-text"
+                 [innerHtml]="notification.message"></p>
+              <p class="card-text text-muted">
+                <ng-container *ngIf="notification.duration">
+                  <small>
+                    <ng-container i18n>Duration:</ng-container> {{ notification.duration | duration }}
+                  </small>
+                  <br>
+                </ng-container>
+                <small class="date"
+                       [title]="notification.timestamp | cdDate">{{ notification.timestamp | relativeDate }}</small>
+                <i class="float-end custom-icon"
+                   [ngClass]="[notification.applicationClass]"
+                   [title]="notification.application"></i>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr>
+    </div>
+  </ng-container>
+</ng-template>
+
+<ng-template #emptyTpl>
+  <div *ngIf="notifications.length === 0 && executingTasks.length === 0">
+    <div class="message text-center"
+         i18n>There are no notifications.</div>
+  </div>
+</ng-template>
+
+<div class="card"
+     (clickOutside)="closeSidebar()"
+     [clickOutsideEnabled]="isSidebarOpened">
+  <div class="card-header">
+    <ng-container i18n>Tasks and Notifications</ng-container>
+
+    <button class="btn-close float-end"
+            tabindex="-1"
+            type="button"
+            title="close"
+            (click)="closeSidebar()">
+    </button>
+  </div>
+
+  <ngx-simplebar [options]="simplebar">
+    <div class="card-body">
+      <ng-container *ngTemplateOutlet="tasksTpl"></ng-container>
+      <ng-container *ngTemplateOutlet="notificationsTpl"></ng-container>
+      <ng-container *ngTemplateOutlet="emptyTpl"></ng-container>
+    </div>
+  </ngx-simplebar>
+</div>
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 38dcb13a574c..52f37ea57c24 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
@@ -4,9 +4,9 @@
         [ngClass]="{ 'mt-3': status === 'in-progress' && isPaused }"
         *ngIf="!value || actionName === 'upgrading'">
       <i *ngIf="status === 'in-progress' && isPaused; else spinningIcon"
-         [ngClass]="[icons.large, icons.spinner]"></i>
+         [ngClass]="[icons.size24, icons.spinner]"></i>
       <ng-template #spinningIcon>
-        <i [ngClass]="[icons.large, icons.spin, icons.spinner]"></i>
+        <i [ngClass]="[icons.size24, icons.spin, icons.spinner]"></i>
       </ng-template>
     </h3>