NAS-133494 / 25.04 / WIP: Enclosure Colors

src/app/pages/system/enclosure/components/enclosure-side/enclosure-svg/enclosure-svg.component.scss

@@ -36,31 +36,15 @@
       }
 
       &.selected {
-        fill-opacity: 0.7;
-        filter: brightness(1.2);
+        fill-opacity: 0;
         stroke: var(--primary);
         stroke-dasharray: none;
-        stroke-width: 1%;
-
-        &.tinted {
-          fill: var(--primary) !important;
-        }
+        stroke-width: 3px;
       }
 
       &.selected-vdev-disk {
-        filter: brightness(1.2);
-        stroke: white;
-        stroke-dasharray: none;
-        stroke-width: 4px;
-
-        &.tinted {
-          fill: var(--primary) !important;
-        }
-      }
-
-      &.not-selected-vdev-disk {
         fill: black;
-        opacity: 0.5;
+        opacity: 0.25;
       }
     }
   }

src/app/pages/system/enclosure/components/enclosure-side/enclosure-svg/enclosure-svg.component.spec.ts

@@ -74,6 +74,13 @@ describe('EnclosureSvgComponent', () => {
     spectator.detectChanges();
   }
 
+  function getTintTargets(slotNumber: number): SVGGElement[] {
+    const slotId: string = 'DRIVE_CAGE_' + slotNumber.toString();
+    const driveTrays = spectator.queryAll<SVGGElement>(`svg [id^=${slotId}] .tint-target`);
+
+    return driveTrays;
+  }
+
   describe('svg is loaded', () => {
     beforeEach(fakeAsync(() => {
       mockGetBBox();
@@ -106,9 +113,14 @@ describe('EnclosureSvgComponent', () => {
       expect(tintFn).toHaveBeenCalledTimes(2);
       expect(tintFn).toHaveBeenNthCalledWith(1, { drive_bay_number: 1 });
 
-      const overlays = spectator.queryAll<SVGRectElement>('.overlay-rect');
-      expect(overlays[0].style.fill).toBe('red');
-      expect(overlays[1].style.fill).toBe('blue');
+      const slotOneTargets: SVGGElement[] = getTintTargets(1);
+      slotOneTargets.forEach((target) => {
+        expect(target.style.fill).toBe('red');
+      });
+      const slotTwoTargets: SVGGElement[] = getTintTargets(2);
+      slotTwoTargets.forEach((target) => {
+        expect(target.style.fill).toBe('blue');
+      });
     });
 
     it('adds overlays for every drive cage in an svg', () => {

src/app/pages/system/enclosure/components/enclosure-side/enclosure-svg/enclosure-svg.component.ts

@@ -42,6 +42,8 @@ export type TintingFunction = (slot: DashboardEnclosureSlot) => string | null;
   imports: [NgxSkeletonLoaderModule],
 })
 export class EnclosureSvgComponent implements OnDestroy {
+  readonly emptyOpacity = 0.15;
+  readonly unselectedOpacity = 0.3;
   readonly svgUrl = input.required<string>();
   readonly slots = input.required<DashboardEnclosureSlot[]>();
   readonly enableMouseEvents = input(true);
@@ -55,6 +57,7 @@ export class EnclosureSvgComponent implements OnDestroy {
   protected svgContainer = viewChild<ElementRef<HTMLElement>>('svgContainer');
 
   private overlayRects: Record<number, SVGRectElement> = {};
+  private slotElements: Record<number, SVGGElement> = {};
 
   constructor(
     private renderer: Renderer2,
@@ -105,6 +108,7 @@ export class EnclosureSvgComponent implements OnDestroy {
         return;
       }
 
+      this.slotElements[slot.drive_bay_number] = tray;
       this.addOverlay(slot, tray);
 
       if (this.enableMouseEvents()) {
@@ -133,6 +137,7 @@ export class EnclosureSvgComponent implements OnDestroy {
   });
 
   private clearSelectionStylesFromAllSlots(): void {
+    this.resetDimValues();
     Object.values(this.overlayRects).forEach((overlay) => {
       overlay.classList.remove('selected');
       overlay.classList.remove('selected-vdev-disk');
@@ -162,8 +167,11 @@ export class EnclosureSvgComponent implements OnDestroy {
     for (const slot of allSlots) {
       if (slot.dev && selectedVdevDisks.includes(slot.dev)) {
         this.renderer.addClass(this.overlayRects[slot.drive_bay_number], 'selected-vdev-disk');
+        if (slot.type) {
+          this.dimSlot(slot.drive_bay_number, 1);
+        }
       } else if (slot.drive_bay_number !== selectedSlot.drive_bay_number) {
-        this.renderer.addClass(this.overlayRects[slot.drive_bay_number], 'not-selected-vdev-disk');
+        this.dimSlot(slot.drive_bay_number, this.unselectedOpacity);
       }
     }
   }
@@ -246,25 +254,63 @@ export class EnclosureSvgComponent implements OnDestroy {
     const prevSlotExists = !!selectedSlot;
 
     if (!isNewSlotEmpty && prevSlotExists && slot.dev === selectedSlot.dev) {
-      this.selectedSlot.set(null);
       return;
     }
 
     this.selectedSlot.set(slot);
   };
 
   private addTint(slot: DashboardEnclosureSlot): void {
-    const overlay = this.overlayRects[slot.drive_bay_number];
+    const tintTargets: NodeListOf<SVGGElement> = this.getTintTargets(slot.drive_bay_number);
+    const slotTint = this.slotTintFn()(slot);
+
+    if (slotTint) {
+      tintTargets.forEach((tintTarget: SVGGElement) => {
+        this.renderer.addClass(tintTarget, 'tinted');
+        this.renderer.setStyle(tintTarget, 'fill', slotTint);
+        this.renderer.setStyle(tintTarget, 'filter', 'brightness(1.25)');
+      });
+      this.dimSlot(slot.drive_bay_number, 1);
+    } else {
+      tintTargets.forEach((tintTarget: SVGGElement) => {
+        this.renderer.removeClass(tintTarget, 'tinted');
+        this.renderer.setStyle(tintTarget, 'fill', null);
+        this.renderer.setStyle(tintTarget, 'filter', 'brightness(1)');
+      });
+      this.dimSlot(slot.drive_bay_number, this.emptyOpacity);
+    }
+  }
 
-    this.renderer.removeClass(overlay, 'tinted');
+  private dimSlot(slotNumber: number, opacity: number): void {
+    this.renderer.setStyle(this.slotElements[slotNumber], 'opacity', opacity.toString());
+  }
 
-    const slotTint = this.slotTintFn()?.(slot);
-    if (!slotTint) {
+  private resetDimValues(): void {
+    const svgContainer = this.svgContainer();
+    if (!svgContainer || !this.svg()) {
       return;
     }
 
-    this.renderer.addClass(overlay, 'tinted');
-    this.renderer.setStyle(overlay, 'fill', slotTint);
+    const driveTrays = this.svgContainer().nativeElement.querySelectorAll<SVGGElement>('svg [id^="DRIVE_CAGE_"]');
+    driveTrays.forEach((tray) => {
+      const slot = this.getSlotForTray(tray);
+      if (!slot) {
+        return;
+      }
+
+      if (!slot.dev) {
+        this.dimSlot(slot.drive_bay_number, this.emptyOpacity);
+      } else {
+        this.dimSlot(slot.drive_bay_number, 1);
+      }
+    });
+  }
+
+  private getTintTargets(slotNumber: number): NodeListOf<SVGGElement> {
+    const slotId: string = 'DRIVE_CAGE_' + slotNumber.toString();
+    const tintTargets = this.slotElements[slotNumber].querySelectorAll<SVGGElement>(`svg [id^=${slotId}] .tint-target`);
+
+    return tintTargets;
   }
 
   private getSlotForTray(tray: SVGGElement): DashboardEnclosureSlot | undefined {

src/app/pages/system/enclosure/components/enclosure-side/not-supported-model/not-supported-model.component.html

@@ -4,7 +4,7 @@
 >
   @for (slot of slots(); track slot.drive_bay_number) {
     <a
-      class="slot"
+      class="slot tint-target"
       [class.selected]="slot.drive_bay_number === selectedSlot()?.drive_bay_number"
       [class.static]="!enableMouseEvents()"
       [ixTest]="['enclosure-slot', slot.drive_bay_number]"