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 <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html

@@ -52,18 +52,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">
@@ -73,9 +73,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">
@@ -85,9 +85,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">
@@ -99,13 +99,15 @@
     </i>
   </span>
 </ng-template>
-
+<cd-icon
+       type="progress">
+    </cd-icon >
 <ng-template #osdSummary>
   <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 }}
@@ -151,36 +153,36 @@
 <ng-template #iscsiSummary>
   <span>
     {{ data.up }}
-    <i class="text-success"
+    <cd-icon
        *ngIf="data.up || data.up === 0"
-       [ngClass]="[icons.success]">
-    </i>
+       type="success">
+    </cd-icon >
   </span>
   <span *ngIf="data.down"
         class="ms-2">
         {{ data.down }}
-    <i class="text-danger"
-       [ngClass]="[icons.danger]">
-    </i>
+    <cd-icon
+       type="danger">
+    </cd-icon >
   </span>
 </ng-template>
 
 <ng-template #simplifiedSummary>
   <span *ngIf="!dropdownTotalError else showErrorNum">
     {{ data }}
-    <i class="text-success"
-       [ngClass]="[icons.success]"></i>
+    <cd-icon
+       type="success"></cd-icon >
   </span>
   <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>
@@ -211,17 +213,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>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts

@@ -89,6 +89,7 @@ import InfoIcon from '@carbon/icons/es/information/16';
 import CopyIcon from '@carbon/icons/es/copy/32';
 import downloadIcon from '@carbon/icons/es/download/16';
 import { ChartsModule } from '@carbon/charts-angular';
+import { IconComponent } from './icon/icon.component';
 
 @NgModule({
   imports: [
@@ -172,7 +173,8 @@ import { ChartsModule } from '@carbon/charts-angular';
     FormAdvancedFieldsetComponent,
     UpgradableComponent,
     ProgressComponent,
-    SidePanelComponent
+    SidePanelComponent,
+    IconComponent
   ],
   providers: [provideCharts(withDefaultRegisterables())],
   exports: [
@@ -212,7 +214,8 @@ import { ChartsModule } from '@carbon/charts-angular';
     FormAdvancedFieldsetComponent,
     UpgradableComponent,
     ProgressComponent,
-    SidePanelComponent
+    SidePanelComponent,
+    IconComponent
   ]
 })
 export class ComponentsModule {

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>
+}

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;
+}

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();
+  });
+});

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;
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts

@@ -36,7 +36,6 @@ export enum Icons {
   infoCircle = 'information--filled', // Info on landing page
   questionCircle = 'help',
   danger = 'warning--filled',
-  // success = 'fa fa-check-circle',
   success = 'checkmark--filled',
   check = 'checkmark', // Notification check
   show = 'view', // Show
@@ -99,3 +98,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: 'danger',
+  info: 'info',
+  success: 'success',
+  warning: 'warning'
+} as const;

src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss

@@ -177,10 +177,6 @@ Tabs
   background: var(--cds-layer-01);
 }
 
-.cds-success-color {
-  fill: theme.$support-success;
-}
-
 .cds-danger-color {
   fill: theme.$support-error;
 }