quincy: mgr/dashboard: fix weird data in osd details

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html

@@ -8,7 +8,9 @@
       <a ngbNavLink
          i18n>Devices</a>
       <ng-template ngbNavContent>
-        <cd-device-list [osdId]="osd?.id"></cd-device-list>
+        <cd-device-list [osdId]="osd?.id"
+                        [hostname]="selection?.host.name"
+                        [osdList]="true"></cd-device-list>
       </ng-template>
     </li>
     <li ngbNavItem="attributes">

src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.html

@@ -8,9 +8,36 @@
 
 <ng-template #deviceLocation
              let-value="value">
-  <span *ngFor="let location of value">{{location.dev}}</span>
+  <ng-container *ngFor="let location of value">
+    <cd-label *ngIf="location.host === hostname"
+              [value]="location.dev"></cd-label>
+  </ng-container>
 </ng-template>
 
+<ng-template #daemonName
+             let-value="value">
+  <ng-container [ngTemplateOutlet]="osdId !== null ? osdIdDaemon : readableDaemons"
+                [ngTemplateOutletContext]="{daemons: value}">
+  </ng-container>
+</ng-template>
+
+<ng-template #osdIdDaemon
+             let-daemons="daemons">
+  <ng-container *ngFor="let daemon of daemons">
+    <cd-label *ngIf="daemon.includes(osdId)"
+              [value]="daemon"></cd-label>
+  </ng-container>
+</ng-template>
+
+<ng-template #readableDaemons
+             let-daemons="daemons">
+  <ng-container *ngFor="let daemon of daemons">
+    <cd-label class="mr-1"
+              [value]="daemon"></cd-label>
+  </ng-container>
+</ng-template>
+
+
 <ng-template #lifeExpectancy
              let-value="value">
   <span *ngIf="!value.life_expectancy_enabled"

src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts

@@ -18,8 +18,13 @@ export class DeviceListComponent implements OnChanges, OnInit {
   @Input()
   osdId: number = null;
 
+  @Input()
+  osdList = false;
+
   @ViewChild('deviceLocation', { static: true })
   locationTemplate: TemplateRef<any>;
+  @ViewChild('daemonName', { static: true })
+  daemonNameTemplate: TemplateRef<any>;
   @ViewChild('lifeExpectancy', { static: true })
   lifeExpectancyTemplate: TemplateRef<any>;
   @ViewChild('lifeExpectancyTimestamp', { static: true })
@@ -69,16 +74,16 @@ export class DeviceListComponent implements OnChanges, OnInit {
         isHidden: true
       },
       { prop: 'location', name: $localize`Device Name`, cellTemplate: this.locationTemplate },
-      { prop: 'readableDaemons', name: $localize`Daemons` }
+      { prop: 'daemons', name: $localize`Daemons`, cellTemplate: this.daemonNameTemplate }
     ];
   }
 
   ngOnChanges() {
     const updateDevicesFn = (devices: CdDevice[]) => (this.devices = devices);
-    if (this.hostname) {
-      this.hostService.getDevices(this.hostname).subscribe(updateDevicesFn);
-    } else if (this.osdId !== null) {
+    if (this.osdList && this.osdId !== null) {
       this.osdService.getDevices(this.osdId).subscribe(updateDevicesFn);
+    } else if (this.hostname) {
+      this.hostService.getDevices(this.hostname).subscribe(updateDevicesFn);
     }
   }
 }

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>

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

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

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

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

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 {

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;