From: Afreen Misbah <afreen@ibm.com>
Date: Thu, 3 Jul 2025 11:09:25 +0000 (+0530)
Subject: mgr/dashboard: Add generic component for icons
X-Git-Tag: v20.1.1~75^2~3
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=e47aa601b1a680c48dca76689c64b1dfcce67f68;p=ceph.git

mgr/dashboard: Add generic component for icons

Fixes https://tracker.ceph.com/issues/71947
Fixes https://tracker.ceph.com/issues/71933

Signed-off-by: Afreen Misbah <afreen@ibm.com>
(cherry picked from commit fa5160444e71b09e2e845c040206e34c775c27ff)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html
	src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
	src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
	src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
---

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 c8464ea551885..2a41e3e7faaab 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
@@ -61,18 +61,18 @@
     <span *ngIf="data.categoryPgAmount?.clean">
       {{ data.categoryPgAmount?.clean }}
     </span>
-    <i class="text-success"
-       [ngClass]="[icons.success]">
-    </i>
+    <cd-icon
+       type="success">
+    </cd-icon >
   </span>
   <span *ngIf="data.info"
         class="ms-2">
     <span *ngIf="data.info">
       {{ data.info }}
     </span>
-    <i class="text-info"
-       [ngClass]="[icons.danger]">
-    </i>
+    <cd-icon
+       type="info">
+    </cd-icon >
   </span>
   <span *ngIf="data.warn || data.categoryPgAmount?.warning"
         class="ms-2">
@@ -82,9 +82,9 @@
     <span *ngIf="data.categoryPgAmount?.warning">
       {{ data.categoryPgAmount?.warning }}
     </span>
-    <i class="text-warning"
-       [ngClass]="[icons.warning]">
-    </i>
+    <cd-icon
+       type="warning">
+    </cd-icon >
   </span>
   <span *ngIf="data.error || data.categoryPgAmount?.unknown"
         class="ms-2">
@@ -94,9 +94,9 @@
     <span *ngIf="data.categoryPgAmount?.unknown">
       {{ data.categoryPgAmount?.unknown }}
     </span>
-    <i class="text-danger"
-       [ngClass]="[icons.danger]">
-    </i>
+    <cd-icon
+       type="danger">
+    </cd-icon >
   </span>
   <span *ngIf="data.categoryPgAmount?.working"
         class="ms-2">
@@ -109,16 +109,18 @@
   </span>
   }
 </ng-template>
-
+<cd-icon
+       type="progress">
+    </cd-icon >
 <ng-template #osdSummary>
   @if (data === null) {
   <ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
   } @else {
   <span *ngIf="data.up === data.in">
     {{ data.up }}
-    <i class="text-success"
-       [ngClass]="[icons.success]">
-    </i>
+    <cd-icon
+       type="success">
+    </cd-icon >
   </span>
   <span *ngIf="data.up !== data.in">
     {{ data.up }}
@@ -167,18 +169,18 @@
   <ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
   } @else {
   <span>
-    {{ data?.up }}
-    <i class="text-success"
-       *ngIf="data?.up || data?.up === 0"
-       [ngClass]="[icons.success]">
-    </i>
+    {{ data.up }}
+    <cd-icon
+       *ngIf="data.up || data.up === 0"
+       type="success">
+    </cd-icon >
   </span>
   <span *ngIf="data?.down"
         class="ms-2">
-        {{ data?.down }}
-    <i class="text-danger"
-       [ngClass]="[icons.danger]">
-    </i>
+        {{ data.down }}
+    <cd-icon
+       type="danger">
+    </cd-icon >
   </span>
 
   }
@@ -188,8 +190,8 @@
   @if (data === 0 || data) {
   <span *ngIf="!dropdownTotalError else showErrorNum">
     {{ data }}
-    <i class="text-success"
-       [ngClass]="[icons.success]"></i>
+    <cd-icon
+       type="success"></cd-icon >
   </span>
   } @else {
     <ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
@@ -197,13 +199,13 @@
   <ng-template #showErrorNum>
     <span *ngIf="data - dropdownTotalError  > 0">
       {{ data - dropdownTotalError  }}
-    <i class="text-success"
-       [ngClass]="[icons.success]"></i>
+    <cd-icon
+      type="success"></cd-icon >
     </span>
     <span>
       {{ dropdownTotalError  }}
-      <i class="text-danger"
-         [ngClass]="[icons.danger]"></i>
+      <cd-icon
+        type="danger"></cd-icon >
     </span>
   </ng-template>
 </ng-template>
@@ -242,17 +244,17 @@
         </div>
         <span [ngClass]="data.value.error ? 'me-2' : 'me-4'">
           {{ data.value.ok }}
-          <i class="text-success"
+          <cd-icon
              *ngIf="data.value.ok"
-             [ngClass]="[icons.success]">
-          </i>
+             type="success">
+          </cd-icon >
         </span>
         <span *ngIf="data.value.error"
               class="me-4 ms-2">
               {{ data.value.error }}
-          <i class="text-danger"
-             [ngClass]="[icons.danger]">
-          </i>
+          <cd-icon
+             type="danger">
+          </cd-icon >
         </span>
       </div>
     </li>
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 5baf3878cb397..b0566c7319ccb 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
@@ -85,6 +85,7 @@ import { ProgressComponent } from './progress/progress.component';
 // Icons
 import InfoIcon from '@carbon/icons/es/information/16';
 import CopyIcon from '@carbon/icons/es/copy/32';
+import { IconComponent } from './icon/icon.component';
 
 @NgModule({
   imports: [
@@ -166,7 +167,8 @@ import CopyIcon from '@carbon/icons/es/copy/32';
     HelpTextComponent,
     FormAdvancedFieldsetComponent,
     UpgradableComponent,
-    ProgressComponent
+    ProgressComponent,
+    IconComponent
   ],
   providers: [provideCharts(withDefaultRegisterables())],
   exports: [
@@ -205,7 +207,8 @@ import CopyIcon from '@carbon/icons/es/copy/32';
     HelpTextComponent,
     FormAdvancedFieldsetComponent,
     UpgradableComponent,
-    ProgressComponent
+    ProgressComponent,
+    IconComponent
   ]
 })
 export class ComponentsModule {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
new file mode 100644
index 0000000000000..2e6522bd93891
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.html
@@ -0,0 +1,23 @@
+@if (type === ICON_TYPE.danger) {
+    <svg class = "danger-icon"
+         [cdsIcon]="ICONS.danger"
+         [size]="size"></svg>
+}
+
+@if (type === ICON_TYPE.info) {
+    <svg class = "info-icon"
+         [cdsIcon]="ICONS.infoCircle"
+         [size]="size"></svg>
+}
+
+@if (type === ICON_TYPE.success) {
+    <svg class = "success-icon"
+         [cdsIcon]="ICONS.success"
+         [size]="size"></svg>
+}
+
+@if (type === ICON_TYPE.warning) {
+    <svg class = "warning-icon"
+         [cdsIcon]="ICONS.warning"
+         [size]="size"></svg>
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss
new file mode 100644
index 0000000000000..e0a3d2050b34e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss
@@ -0,0 +1,17 @@
+@use '@carbon/styles/scss/theme';
+
+.success-icon {
+  color: theme.$support-success;
+}
+
+.danger-icon {
+  color: theme.$support-error;
+}
+
+.info-icon {
+  color: theme.$support-info;
+}
+
+.warning-icon {
+  color: theme.$support-caution-major;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.spec.ts
new file mode 100644
index 0000000000000..c14459401a617
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts
new file mode 100644
index 0000000000000..82bb1981836aa
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { ICON_TYPE, Icons, IconsSize } from '../../enum/icons.enum';
+
+@Component({
+  selector: 'cd-icon',
+  templateUrl: './icon.component.html',
+  styleUrl: './icon.component.scss'
+})
+export class IconComponent {
+  @Input() type!: keyof typeof ICON_TYPE;
+  @Input() size: IconsSize = IconsSize.size16;
+
+  readonly ICONS = Icons;
+  readonly ICON_TYPE = ICON_TYPE;
+}
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 1938e325378b6..458ca296f60a7 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
@@ -97,3 +97,17 @@ export enum Icons {
   spin = 'fa fa-spin', //  To get any icon to rotate
   inverse = 'fa fa-inverse' // To get an alternative icon color
 }
+
+export enum IconsSize {
+  size16 = '16',
+  size20 = '20',
+  size24 = '24',
+  size32 = '32'
+}
+
+export const ICON_TYPE = {
+  danger: 'warning--filled',
+  info: 'information--filled',
+  success: 'checkmark--filled',
+  warning: 'warning--alt--filled'
+} as const;
\ No newline at end of file