NAS-132108 / 25.04 / Add support for name selection from old pool wid…

…gets (by RehanY147) (#11089)
truenas · Nov 27, 2024 · 28145e9 · 28145e9
1 parent d25c657
commit 28145e9
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/src/app/pages/dashboard/services/widget-resources.service.ts b/src/app/pages/dashboard/services/widget-resources.service.ts
@@ -132,6 +132,13 @@ export class WidgetResourcesService {
     );
   }
 
+  getPoolByName(poolName: string): Observable<Pool> {
+    return this.api.call('pool.query', [[['name', '=', poolName]]]).pipe(
+      map((pools) => pools[0]),
+      shareReplay({ bufferSize: 1, refCount: true }),
+    );
+  }
+
   getDatasetById(datasetId: string): Observable<Dataset> {
     return this.api.call('pool.dataset.query', [[['id', '=', datasetId]]]).pipe(
       map((response) => response[0]),

diff --git a/src/app/pages/dashboard/widgets/storage/widget-pool/widget-pool.component.spec.ts b/src/app/pages/dashboard/widgets/storage/widget-pool/widget-pool.component.spec.ts
@@ -14,8 +14,30 @@ import { DisksWithZfsErrorsComponent } from 'app/pages/dashboard/widgets/storage
 import { LastScanErrorsComponent } from 'app/pages/dashboard/widgets/storage/widget-pool/common/last-scan-errors/last-scan-errors.component';
 import { PoolStatusComponent } from 'app/pages/dashboard/widgets/storage/widget-pool/common/pool-status/pool-status.component';
 import { PoolUsageGaugeComponent } from 'app/pages/dashboard/widgets/storage/widget-pool/common/pool-usage-gauge/pool-usage-gauge.component';
+import { WidgetPoolSettings } from 'app/pages/dashboard/widgets/storage/widget-pool/widget-pool.definition';
 import { WidgetPoolComponent } from './widget-pool.component';
 
+const pool = {
+  name: 'Test Pool',
+  status: 'Online',
+  topology: {
+    data: [
+      {
+        type: 'raidz2',
+        children: [
+          {
+            disk: 'sda',
+          },
+        ],
+      },
+    ],
+  },
+  scan: {
+    end_time: { $date: 1687455632000 },
+    start_time: { $date: 1687452032000 },
+  },
+};
+
 describe('WidgetPoolComponent', () => {
   let spectator: Spectator<WidgetPoolComponent>;
   const createComponent = createComponentFactory({
@@ -30,36 +52,20 @@ describe('WidgetPoolComponent', () => {
     ],
     providers: [
       mockProvider(WidgetResourcesService, {
-        getPoolById: jest.fn().mockReturnValue(of({
-          name: 'Test Pool',
-          status: 'Online',
-          topology: {
-            data: [
-              {
-                type: 'raidz2',
-                children: [
-                  {
-                    disk: 'sda',
-                  },
-                ],
-              },
-            ],
-          },
-          scan: {
-            end_time: { $date: 1687455632000 },
-            start_time: { $date: 1687452032000 },
-          },
-        })),
+        getPoolById: jest.fn().mockReturnValue(of(pool)),
+        getPoolByName: jest.fn().mockReturnValue(of(pool)),
       }),
     ],
   });
-
-  beforeEach(() => {
+  function setupComponent(byName = false): void {
+    const settings: WidgetPoolSettings = { poolId: '1' };
+    if (byName) {
+      delete settings.poolId;
+      settings.name = 'Pool:pool';
+    }
     spectator = createComponent({
       props: {
-        settings: {
-          poolId: '1',
-        },
+        settings,
         size: SlotSize.Full,
       },
       providers: [
@@ -118,20 +124,28 @@ describe('WidgetPoolComponent', () => {
         }),
       ],
     });
+  }
+
+  it('should get pool if pool name is available instead of pool id', () => {
+    setupComponent(true);
+    expect(spectator.query('h3')).toHaveText('Pool');
   });
 
   it('should display pool name when pool exists', () => {
+    setupComponent();
     expect(spectator.query('h3')).toHaveText('Pool');
   });
 
   it('should have pool info components', () => {
+    setupComponent();
     expect(spectator.query(PoolUsageGaugeComponent)).toBeTruthy();
     expect(spectator.query(PoolStatusComponent)).toBeTruthy();
     expect(spectator.query(DisksWithZfsErrorsComponent)).toBeTruthy();
     expect(spectator.query(LastScanErrorsComponent)).toBeTruthy();
   });
 
   it('should have a disk reports button', () => {
+    setupComponent();
     expect(spectator.query('button[aria-label="Disk Reports"]')).toBeTruthy();
   });
 });
diff --git a/src/app/pages/dashboard/widgets/storage/widget-pool/widget-pool.component.ts b/src/app/pages/dashboard/widgets/storage/widget-pool/widget-pool.component.ts
@@ -7,7 +7,9 @@ import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatTooltip } from '@angular/material/tooltip';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { filter, switchMap, tap } from 'rxjs';
+import {
+  combineLatest, filter, switchMap, tap,
+} from 'rxjs';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { TestDirective } from 'app/modules/test-id/test.directive';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
@@ -49,9 +51,11 @@ export class WidgetPoolComponent implements WidgetComponent {
 
   protected poolId = computed(() => this.settings()?.poolId || '');
 
-  protected pool = toSignal(toObservable(this.poolId).pipe(
-    filter(Boolean),
-    switchMap((poolId) => this.resources.getPoolById(poolId)),
+  protected poolName = computed(() => this.settings()?.name?.split(':')[1] || '');
+
+  protected pool = toSignal(combineLatest([toObservable(this.poolName), toObservable(this.poolId)]).pipe(
+    filter(([name, id]) => !!name || !!id),
+    switchMap(([name, id]) => (id ? this.resources.getPoolById(id) : this.resources.getPoolByName(name))),
     tap((pool) => {
       this.poolExists = !!pool;
       this.cdr.markForCheck();

diff --git a/src/app/pages/dashboard/widgets/storage/widget-pool/widget-pool.definition.ts b/src/app/pages/dashboard/widgets/storage/widget-pool/widget-pool.definition.ts
@@ -9,6 +9,7 @@ import { WidgetPoolComponent } from 'app/pages/dashboard/widgets/storage/widget-
 
 export interface WidgetPoolSettings {
   poolId: string;
+  name?: string;
 }
 
 export const poolWidget = dashboardWidget<WidgetPoolSettings>({