NAS-133494: Find drive trays only once

truenas · Jan 22, 2025 · 4df04af · 4df04af
1 parent 9adfc44
commit 4df04af
Showing 1 changed file with 11 additions and 12 deletions.
diff --git a/...pages/system/enclosure/components/enclosure-side/enclosure-svg/enclosure-svg.component.ts b/...pages/system/enclosure/components/enclosure-side/enclosure-svg/enclosure-svg.component.ts
@@ -57,6 +57,7 @@ export class EnclosureSvgComponent implements OnDestroy {
   protected svgContainer = viewChild<ElementRef<HTMLElement>>('svgContainer');
 
   private overlayRects: Record<number, SVGRectElement> = {};
+  private driveTrays: SVGGElement[] = [];
 
   constructor(
     private renderer: Renderer2,
@@ -97,11 +98,11 @@ export class EnclosureSvgComponent implements OnDestroy {
       return;
     }
 
-    const driveTrays = svgContainer.nativeElement.querySelectorAll<SVGGElement>('svg [id^="DRIVE_CAGE_"]');
+    this.driveTrays = Array.from(svgContainer.nativeElement.querySelectorAll<SVGGElement>('svg [id^="DRIVE_CAGE_"]'));
     this.clearOverlays();
 
     // TODO: Unclear if input change will trigger re-render.
-    driveTrays.forEach((tray) => {
+    this.driveTrays.forEach((tray) => {
       const slot = this.getSlotForTray(tray);
       if (!slot) {
         return;
@@ -259,7 +260,7 @@ export class EnclosureSvgComponent implements OnDestroy {
   };
 
   private addTint(slot: DashboardEnclosureSlot): void {
-    const tintTargets: NodeListOf<SVGGElement> = this.getTintTarget(slot.drive_bay_number);
+    const tintTargets: SVGGElement[] = this.getTintTarget(slot.drive_bay_number);
     const slotTint = this.slotTintFn()(slot);
 
     if (slotTint) {
@@ -280,19 +281,15 @@ export class EnclosureSvgComponent implements OnDestroy {
   }
 
   private dimSlot(slotNumber: number, opacity: number): void {
-    const slotId: string = 'DRIVE_CAGE_' + slotNumber.toString();
-    const slotSvg = this.svgContainer().nativeElement.querySelectorAll<SVGGElement>(`svg [id^=${slotId}]`);
-
-    this.renderer.setStyle(slotSvg[0], 'opacity', opacity.toString());
+    this.renderer.setStyle(this.driveTrays[slotNumber - 1], 'opacity', opacity.toString());
   }
 
   private resetDimValues(): void {
     if (!this.svgContainer()) {
       return;
     }
 
-    const driveTrays = this.svgContainer().nativeElement.querySelectorAll<SVGGElement>('svg [id^="DRIVE_CAGE_"]');
-    driveTrays.forEach((tray) => {
+    this.driveTrays.forEach((tray) => {
       const slot = this.getSlotForTray(tray);
       if (!slot) {
         return;
@@ -306,11 +303,13 @@ export class EnclosureSvgComponent implements OnDestroy {
     });
   }
 
-  private getTintTarget(slotNumber: number): NodeListOf<SVGGElement> {
+  private getTintTarget(slotNumber: number): SVGGElement[] {
     const slotId: string = 'DRIVE_CAGE_' + slotNumber.toString();
-    const driveTrays = this.svgContainer().nativeElement.querySelectorAll<SVGGElement>(`svg [id^=${slotId}] .tint-target`);
+    const tintTargets = Array.from(
+      this.svgContainer().nativeElement.querySelectorAll<SVGGElement>(`svg [id^=${slotId}] .tint-target`),
+    );
 
-    return driveTrays;
+    return tintTargets;
   }
 
   private getSlotForTray(tray: SVGGElement): DashboardEnclosureSlot | undefined {