From: Pedro Gonzalez Gomez <pegonzal@redhat.com>
Date: Tue, 5 Jul 2022 09:40:01 +0000 (+0200)
Subject: mgr/dashboard: auto-coloring-badges-component
X-Git-Tag: v17.2.6~451^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=ca69cd05ab4fa060e08c4ce2f0b7ac231229fb33;p=ceph.git

mgr/dashboard: auto-coloring-badges-component

Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
(cherry picked from commit 29f510a522b2694903d095ac0ec45ee23c474121)
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html
new file mode 100644
index 000000000000..41cfae743f2f
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html
@@ -0,0 +1,11 @@
+<span *ngIf="!key; else key_value"
+      class="badge badge-{{value}}"
+      ngClass="{{value | colorClassFromText}}">
+  {{ value }}
+</span>
+
+<ng-template #key_value>
+  <span class="badge badge-background-primary badge-{{key}}-{{value}}">
+        {{ key }}: {{ value }}
+  </span>
+</ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.spec.ts
new file mode 100644
index 000000000000..61472cde4c8e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CdLabelComponent } from './cd-label.component';
+import { ColorClassFromTextPipe } from './color-class-from-text.pipe';
+
+describe('CdLabelComponent', () => {
+  let component: CdLabelComponent;
+  let fixture: ComponentFixture<CdLabelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CdLabelComponent, ColorClassFromTextPipe]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CdLabelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.ts
new file mode 100644
index 000000000000..ae0471bf6f79
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'cd-label',
+  templateUrl: './cd-label.component.html',
+  styleUrls: ['./cd-label.component.scss']
+})
+export class CdLabelComponent {
+  @Input() key?: string;
+  @Input() value?: string;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts
new file mode 100644
index 000000000000..628d7431966b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts
@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'colorClassFromText'
+})
+export class ColorClassFromTextPipe implements PipeTransform {
+  readonly cssClasses: string[] = [
+    'badge-cd-label-green',
+    'badge-cd-label-cyan',
+    'badge-cd-label-purple',
+    'badge-cd-label-light-blue',
+    'badge-cd-label-gold',
+    'badge-cd-label-light-green'
+  ];
+
+  transform(text: string): string {
+    let hash = 0;
+    let charCode = 0;
+    if (text) {
+      for (let i = 0; i < text.length; i++) {
+        charCode = text.charCodeAt(i);
+        // tslint:disable-next-line:no-bitwise
+        hash = Math.abs((hash << 5) - hash + charCode);
+      }
+    }
+    return this.cssClasses[hash % this.cssClasses.length];
+  }
+}
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 a281bf8598e5..5350e2bd50b0 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
@@ -21,6 +21,8 @@ import { DirectivesModule } from '../directives/directives.module';
 import { PipesModule } from '../pipes/pipes.module';
 import { AlertPanelComponent } from './alert-panel/alert-panel.component';
 import { BackButtonComponent } from './back-button/back-button.component';
+import { CdLabelComponent } from './cd-label/cd-label.component';
+import { ColorClassFromTextPipe } from './cd-label/color-class-from-text.pipe';
 import { ConfigOptionComponent } from './config-option/config-option.component';
 import { ConfirmationModalComponent } from './confirmation-modal/confirmation-modal.component';
 import { Copy2ClipboardButtonComponent } from './copy2clipboard-button/copy2clipboard-button.component';
@@ -97,7 +99,9 @@ import { WizardComponent } from './wizard/wizard.component';
     FormButtonPanelComponent,
     MotdComponent,
     WizardComponent,
-    CustomLoginBannerComponent
+    CustomLoginBannerComponent,
+    CdLabelComponent,
+    ColorClassFromTextPipe
   ],
   providers: [],
   exports: [
@@ -126,7 +130,8 @@ import { WizardComponent } from './wizard/wizard.component';
     FormButtonPanelComponent,
     MotdComponent,
     WizardComponent,
-    CustomLoginBannerComponent
+    CustomLoginBannerComponent,
+    CdLabelComponent
   ]
 })
 export class ComponentsModule {}
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 099433d3148c..e27b01261471 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -105,6 +105,36 @@ $grid-breakpoints: (
   color: $gray-700;
 }
 
+.badge-cd-label-green {
+  background-color: $green-300;
+  color: $white;
+}
+
+.badge-cd-label-cyan {
+  background-color: $cyan-300;
+  color: $white;
+}
+
+.badge-cd-label-purple {
+  background-color: $purple-300;
+  color: $white;
+}
+
+.badge-cd-label-light-blue {
+  background-color: $light-blue-300;
+  color: $white;
+}
+
+.badge-cd-label-gold {
+  background-color: $gold-300;
+  color: $white;
+}
+
+.badge-cd-label-light-green {
+  background-color: $light-green-300;
+  color: $white;
+}
+
 // angular-tree-component
 tree-root {
   tree-viewport {
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index d4a3d5f86bec..27547c36b043 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -33,6 +33,14 @@ $danger: $red !default;
 $light: $gray-100 !default;
 $dark: #777 !default;
 
+//badges colors
+$green-300: #6ec664;
+$cyan-300: #009596;
+$purple-300: #a18fff;
+$light-blue-300: #35caed;
+$gold-300: #f4c145;
+$light-green-300: #ace12e;
+
 // Extra theme colors.
 $accent: $red !default;
 $warning-dark: $orange !default;