From 0c4e658328f9ac2cee3742aace6e4f526e0d5392 Mon Sep 17 00:00:00 2001 From: RehanY147 Date: Fri, 10 Nov 2023 11:05:52 +0500 Subject: [PATCH] NAS-124985 / 24.04 / Removing mutability of state object (#9167) --- .../configuration-preview.component.ts | 7 ++++--- .../automated-disk-selection.component.spec.ts | 3 ++- .../automated-disk-selection.component.ts | 12 +++++++++++- .../pool-manager-wizard.component.html | 2 +- .../pool-manager/tests/draid-pool-creation.spec.ts | 1 + .../modules/pool-manager/store/pool-manager.store.ts | 6 +++++- 6 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/app/pages/storage/modules/pool-manager/components/configuration-preview/configuration-preview.component.ts b/src/app/pages/storage/modules/pool-manager/components/configuration-preview/configuration-preview.component.ts index 8bbda9f8750..4f94dc8a2fa 100644 --- a/src/app/pages/storage/modules/pool-manager/components/configuration-preview/configuration-preview.component.ts +++ b/src/app/pages/storage/modules/pool-manager/components/configuration-preview/configuration-preview.component.ts @@ -25,10 +25,11 @@ export class ConfigurationPreviewComponent { protected topology$ = this.store.topology$.pipe( map((topology) => { - if (this.store.isUsingDraidLayout(topology)) { - delete topology.spare; + const newTopology = { ...topology }; + if (this.store.isUsingDraidLayout(newTopology)) { + delete newTopology.spare; } - return topology; + return newTopology; }), ); protected totalCapacity$ = this.store.totalUsableCapacity$; diff --git a/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.spec.ts b/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.spec.ts index ba5d0a4c50f..b82c1563ab1 100644 --- a/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.spec.ts +++ b/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.spec.ts @@ -3,7 +3,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { ReactiveFormsModule } from '@angular/forms'; import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; import { MockComponents } from 'ng-mocks'; -import { Subject } from 'rxjs'; +import { of, Subject } from 'rxjs'; import { CreateVdevLayout, VdevType } from 'app/enums/v-dev-type.enum'; import { UnusedDisk } from 'app/interfaces/storage.interface'; import { IxSelectHarness } from 'app/modules/ix-forms/components/ix-select/ix-select.harness'; @@ -46,6 +46,7 @@ describe('AutomatedDiskSelection', () => { mockProvider(PoolManagerStore, { startOver$, resetStep$, + isLoading$: of(false), }), ], }); diff --git a/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.ts b/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.ts index 33ab0b78549..b69b9b8d298 100644 --- a/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.ts +++ b/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/components/layout-step/automated-disk-selection/automated-disk-selection.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c import { FormControl, Validators } from '@angular/forms'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { merge, of } from 'rxjs'; -import { filter } from 'rxjs/operators'; +import { filter, take } from 'rxjs/operators'; import { CreateVdevLayout, vdevLayoutOptions, VdevType } from 'app/enums/v-dev-type.enum'; import { SelectOption } from 'app/interfaces/option.interface'; import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface'; @@ -59,6 +59,16 @@ export class AutomatedDiskSelectionComponent implements OnChanges { } private updateStoreOnChanges(): void { + this.store.isLoading$.pipe(filter((isLoading) => !isLoading), take(1), untilDestroyed(this)).subscribe({ + next: () => { + if ( + (!this.canChangeLayout && !this.isDataVdev) + && (this.type && this.limitLayouts.length) + ) { + this.store.setTopologyCategoryLayout(this.type, this.limitLayouts[0]); + } + }, + }); this.layoutControl.valueChanges.pipe(untilDestroyed(this)).subscribe((layout) => { this.store.setTopologyCategoryLayout(this.type, layout); }); diff --git a/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/pool-manager-wizard.component.html b/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/pool-manager-wizard.component.html index 65ff62d0d85..a1ee315563c 100644 --- a/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/pool-manager-wizard.component.html +++ b/src/app/pages/storage/modules/pool-manager/components/pool-manager-wizard/pool-manager-wizard.component.html @@ -99,7 +99,7 @@ { ], cache: [], dedup: [], + spares: [], log: [], special: [], }, diff --git a/src/app/pages/storage/modules/pool-manager/store/pool-manager.store.ts b/src/app/pages/storage/modules/pool-manager/store/pool-manager.store.ts index 367ea14fa81..9db0a4ded0f 100644 --- a/src/app/pages/storage/modules/pool-manager/store/pool-manager.store.ts +++ b/src/app/pages/storage/modules/pool-manager/store/pool-manager.store.ts @@ -271,11 +271,15 @@ export class PoolManagerStore extends ComponentStore { } readonly resetTopologyCategory = this.updater((state, category: VdevType) => { + const newCategory = { ...initialTopology[category] }; + if (category === VdevType.Spare || category === VdevType.Cache) { + newCategory.layout = CreateVdevLayout.Stripe; + } return { ...state, topology: { ...state.topology, - [category]: initialTopology[category], + [category]: newCategory, }, }; });