fix(accounts): fix update of the accounts limits (#1119)

PR Close #1114
bwsw · Jul 11, 2018 · 0ce0c6f · 0ce0c6f
1 parent 8e1b9d7
commit 0ce0c6f
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 110 deletions.
diff --git a/src/app/account/account-container/account-details.container.ts b/src/app/account/account-container/account-details.container.ts
@@ -9,9 +9,9 @@ import * as resourceCountAction from '../../reducers/resource-count/redux/resour
 import * as fromResourceCounts from '../../reducers/resource-count/redux/resource-counts.reducers';
 import * as resourceLimitAction from '../../reducers/resource-limit/redux/resource-limits.actions';
 import * as fromResourceLimits from '../../reducers/resource-limit/redux/resource-limits.reducers';
-import { Account } from '../../shared/models/account.model';
 import { AuthService } from '../../shared/services/auth.service';
 import { WithUnsubscribe } from '../../utils/mixins/with-unsubscribe';
+import { Account, ResourceLimit } from '../../shared/models';
 
 @Component({
   selector: 'cs-account-page-container',
@@ -28,19 +28,19 @@ import { WithUnsubscribe } from '../../utils/mixins/with-unsubscribe';
     <cs-account-limits
       [limits]="limits$ | async"
       [isAdmin]="isAdmin()"
-      (onLimitsEdit)="onLimitsEdit($event)"
+      (limitsUpdate)="onLimitsUpdate($event)"
     ></cs-account-limits>
     <cs-account-statistics
       *ngIf="isAdmin()"
       [stats]="stats$ | async"
-      (onStatsUpdate)="onStatsUpdate($event)"
+      (statisticsUpdate)="onStatisticsUpdate()"
     ></cs-account-statistics>`
 })
 export class AccountDetailsContainerComponent extends WithUnsubscribe() implements OnInit {
 
   readonly account$ = this.store.select(fromAccounts.getSelectedAccount);
   readonly configurations$ = this.store.select(fromConfigurations.selectAll);
-  readonly limits$ = this.store.select(fromResourceLimits.updatedLimits);
+  readonly limits$ = this.store.select(fromResourceLimits.getAllLimits);
   readonly stats$ = this.store.select(fromResourceCounts.selectAll);
 
   public account: Account;
@@ -60,14 +60,11 @@ export class AccountDetailsContainerComponent extends WithUnsubscribe() implemen
     }));
   }
 
-  public onLimitsEdit(limits) {
-    this.store.dispatch(new resourceLimitAction.UpdateResourceLimitsRequest({
-      limits,
-      account: this.account
-    }));
+  public onLimitsUpdate(limits: ResourceLimit[]) {
+    this.store.dispatch(new resourceLimitAction.UpdateResourceLimitsRequest(limits));
   }
 
-  public onStatsUpdate(stats) {
+  public onStatisticsUpdate() {
     this.store.dispatch(new resourceCountAction.LoadResourceCountsRequest({
       account: this.account.name,
       domainid: this.account.domainid
@@ -96,9 +93,7 @@ export class AccountDetailsContainerComponent extends WithUnsubscribe() implemen
       });
   }
 
-
   public isAdmin() {
     return this.authService.isAdmin();
   }
-
 }
diff --git a/src/app/account/account-sidebar/account-limits/account-limits.component.html b/src/app/account/account-sidebar/account-limits/account-limits.component.html
@@ -2,60 +2,69 @@
   <mat-card-header>
     <mat-card-title>
       <h2 class="mat-card-title-text">
-        {{ 'ACCOUNT_PAGE.SIDEBAR.LIMITS' | translate}}
+        {{ 'ACCOUNT_PAGE.SIDEBAR.LIMITS' | translate }}
       </h2>
     </mat-card-title>
   </mat-card-header>
+
   <mat-card-content class="mat-card-content-with-actions">
     <div class="mat-card-content-container">
 
-      <div *ngIf="!isEdit">
-        <div *ngFor="let limit of limits; let i = index;">
+      <ng-container *ngIf="isEdit; then editMode else viewMode"></ng-container>
+
+      <ng-template #viewMode>
+        <div *ngFor="let limit of limits">
           <cs-parameters-pair
             [name]="limitLabels[limit.resourcetype]"
             [value]="limit.max"
           ></cs-parameters-pair>
         </div>
-      </div>
 
-      <div *ngIf="isEdit">
+        <ng-container *ngIf="isAdmin">
+          <mat-card-actions>
+            <button
+              mat-icon-button
+              [matTooltip]="'COMMON.EDIT' | translate"
+              matTooltipPosition="above"
+              (click)="editLimits()"
+            >
+              <mat-icon class="mdi-pencil"></mat-icon>
+            </button>
+          </mat-card-actions>
+        </ng-container>
+      </ng-template>
+
+
+      <ng-template #editMode>
         <div *ngFor="let limit of localLimits; let i = index">
           <cs-parameters-edit-pair
             [name]="limitLabels[limit.resourcetype]"
-            [(value)]="localLimits[i].max"
+            [(value)]="limit.max"
             [index]="i"
           ></cs-parameters-edit-pair>
         </div>
-      </div>
+
+        <ng-container *ngIf="isAdmin">
+          <mat-card-actions class="buttons">
+            <button
+              mat-button
+              color="primary"
+              (click)="isEdit=!isEdit"
+            >
+              {{ 'COMMON.CANCEL' | translate }}
+            </button>
+            <button
+              mat-button
+              color="primary"
+              (click)="onSave()"
+            >
+              {{ 'COMMON.SAVE' | translate }}
+            </button>
+          </mat-card-actions>
+        </ng-container>
+      </ng-template>
 
     </div>
-    <div *ngIf="isAdmin">
-      <mat-card-actions *ngIf="!isEdit">
-        <button
-          mat-icon-button
-          [matTooltip]="'COMMON.EDIT' | translate"
-          matTooltipPosition="above"
-          (click)="editLimits()"
-        >
-          <mat-icon class="mdi-pencil"></mat-icon>
-        </button>
-      </mat-card-actions>
-      <mat-card-actions *ngIf="isEdit" class="buttons">
-        <button
-          mat-button
-          color="primary"
-          (click)="isEdit=!isEdit"
-        >
-          {{ 'COMMON.CANCEL' | translate }}
-        </button>
-        <button
-          mat-button
-          color="primary"
-          (click)="onSave()"
-        >
-          {{ 'COMMON.SAVE' | translate }}
-        </button>
-      </mat-card-actions>
-    </div>
+
   </mat-card-content>
 </mat-card>
diff --git a/src/app/account/account-sidebar/account-limits/account-limits.component.ts b/src/app/account/account-sidebar/account-limits/account-limits.component.ts
@@ -1,29 +1,30 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output
-} from '@angular/core';
-import {
-  ResourceLimit,
-  ResourceType
-} from '../../../shared/models/resource-limit.model';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import * as cloneDeep from 'lodash/cloneDeep';
+
+
+import { ResourceLimit, ResourceType } from '../../../shared/models';
 
 
 @Component({
   selector: 'cs-account-limits',
   templateUrl: 'account-limits.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['account-limits.component.scss']
+  styleUrls: ['account-limits.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AccountLimitsComponent {
-  @Input() public limits: Array<ResourceLimit>;
+  @Input()
+  public set limits(limits: ResourceLimit[]) {
+    this._limits = limits.map(this.setNoLimitToInfinity);
+  }
+
+  public get limits(): ResourceLimit[] {
+    return this._limits;
+  }
+
   @Input() public isAdmin: boolean;
-  @Output() public onLimitsEdit: EventEmitter<Array<ResourceLimit>>;
+  @Output() public limitsUpdate = new EventEmitter<ResourceLimit[]>();
   public isEdit = false;
-
-  public localLimits = [];
+  public localLimits: ResourceLimit[] = [];
 
   public limitLabels = {
     [ResourceType.Instance]: 'ACCOUNT_PAGE.CONFIGURATION.VM_LIMIT',
@@ -40,19 +41,36 @@ export class AccountLimitsComponent {
     [ResourceType.SecondaryStorage]: 'ACCOUNT_PAGE.CONFIGURATION.SSTORAGE_LIMIT',
   };
 
-  constructor() {
-    this.onLimitsEdit = new EventEmitter<Array<ResourceLimit>>();
-  }
+  private _limits: ResourceLimit[];
 
   public onSave(): void {
-    this.onLimitsEdit.emit(this.localLimits);
+    const newLimits = this.localLimits.map(this.setInfinityToNoLimit);
+    this.limitsUpdate.emit(newLimits);
     this.isEdit = false;
   }
 
   public editLimits() {
-    this.localLimits =  Object.assign([], this.limits.map(
-      limit => ({resourcetype: limit.resourcetype, max: limit.max})));
+    this.localLimits = cloneDeep(this.limits);
     this.isEdit = !this.isEdit;
   }
 
+  private setNoLimitToInfinity(limit: ResourceLimit) {
+    if (limit.max !== -1) {
+      return limit;
+    }
+    return {
+      ...limit,
+      max: Infinity
+    };
+  }
+
+  private setInfinityToNoLimit(limit: ResourceLimit & { max: string | number }) {
+    if (limit.max === Infinity || (typeof limit.max === 'string' && limit.max.toLowerCase() === 'infinity')) {
+      return {
+        ...limit,
+        max: -1
+      };
+    }
+    return limit;
+  }
 }
diff --git a/src/app/account/account-sidebar/account-statistic/account-statistics.component.ts b/src/app/account/account-sidebar/account-statistic/account-statistics.component.ts
@@ -1,9 +1,4 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ResourceCount } from '../../../shared/models/resource-count.model';
 import { DialogService } from '../../../dialog/dialog-service/dialog.service';
 import { ResourceType } from '../../../shared/models/resource-limit.model';
@@ -14,7 +9,7 @@ import { ResourceType } from '../../../shared/models/resource-limit.model';
 })
 export class AccountStatisticsComponent {
   @Input() public stats: Array<ResourceCount>;
-  @Output() public onStatsUpdate = new EventEmitter();
+  @Output() public statisticsUpdate = new EventEmitter();
 
   public resourceLabels = {
     [ResourceType.Instance]: 'ACCOUNT_PAGE.CONFIGURATION.VM_COUNT',
@@ -42,6 +37,6 @@ export class AccountStatisticsComponent {
     })
       .onErrorResumeNext()
       .filter(res => Boolean(res))
-      .subscribe(res => this.onStatsUpdate.emit(res));
+      .subscribe(res => this.statisticsUpdate.emit(res));
   }
 }
diff --git a/src/app/reducers/resource-limit/redux/resource-limits.actions.ts b/src/app/reducers/resource-limit/redux/resource-limits.actions.ts
@@ -1,4 +1,5 @@
 import { Action } from '@ngrx/store';
+import { ResourceLimit } from '../../../shared/models';
 
 export const LOAD_RESOURCE_LIMITS_REQUEST = '[RESOURCE_LIMITS] LOAD_RESOURCE_LIMITS_REQUEST';
 export const LOAD_RESOURCE_LIMITS_RESPONSE = '[RESOURCE_LIMITS] LOAD_RESOURCE_LIMITS_RESPONSE';
@@ -8,7 +9,7 @@ export const UPDATE_RESOURCE_LIMITS_ERROR = '[RESOURCE_LIMITS] UPDATE_RESOURCE_L
 export class LoadResourceLimitsRequest implements Action {
   type = LOAD_RESOURCE_LIMITS_REQUEST;
 
-  constructor(public payload?: any) {
+  constructor(public payload: { account: string, domainid: string }) {
   }
 
 }
@@ -24,7 +25,7 @@ export class LoadResourceLimitsResponse implements Action {
 export class UpdateResourceLimitsRequest implements Action {
   type = UPDATE_RESOURCE_LIMITS_REQUEST;
 
-  constructor(public payload:  { limits: any[], account: any } ) {
+  constructor(public payload: ResourceLimit[] ) {
   }
 
 }

diff --git a/src/app/reducers/resource-limit/redux/resource-limits.effects.ts b/src/app/reducers/resource-limit/redux/resource-limits.effects.ts
@@ -25,13 +25,17 @@ export class ResourceLimitsEffects {
   updateResourceLimits$: Observable<Action> = this.actions$
     .ofType(resourceLimitActions.UPDATE_RESOURCE_LIMITS_REQUEST)
     .mergeMap((action: resourceLimitActions.UpdateResourceLimitsRequest) => {
-      const observes = action.payload.limits.map(limit =>
-        this.resourceLimitService.updateResourceLimit(limit, action.payload.account));
+      const account = action.payload[0].account;
+      const domainid = action.payload[0].domainid;
+
+      const observes = action.payload.map(limit =>
+        this.resourceLimitService.updateResourceLimit(limit));
+
       return Observable.forkJoin(observes)
         .map(() => {
           return new resourceLimitActions.LoadResourceLimitsRequest({
-            domainid: action.payload.account.domainid,
-            account: action.payload.account.name
+            domainid,
+            account
           });
         })
         .catch((error) => Observable.of(new resourceLimitActions.UpdateResourceLimitsError(error)));

diff --git a/src/app/reducers/resource-limit/redux/resource-limits.reducers.ts b/src/app/reducers/resource-limit/redux/resource-limits.reducers.ts
@@ -1,9 +1,7 @@
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 import { createFeatureSelector, createSelector } from '@ngrx/store';
-import {
-  ResourceLimit,
-  updateLimitMax
-} from '../../../shared/models/resource-limit.model';
+
+import { ResourceLimit } from '../../../shared/models';
 import * as event from './resource-limits.actions';
 
 /**
@@ -91,16 +89,11 @@ export const getResourceLimitsEntitiesState = createSelector(
 export const {
   selectIds,
   selectEntities,
-  selectAll,
+  selectAll: getAllLimits,
   selectTotal,
 } = adapter.getSelectors(getResourceLimitsEntitiesState);
 
 export const isLoading = createSelector(
   getResourceLimitsEntitiesState,
   state => state.loading
 );
-
-export const updatedLimits = createSelector(
-  selectAll,
-  (limits) => limits.map(limit => updateLimitMax(limit))
-);
diff --git a/src/app/shared/models/resource-limit.model.ts b/src/app/shared/models/resource-limit.model.ts
@@ -16,15 +16,9 @@ export const enum ResourceType {
 }
 
 export interface ResourceLimit extends BaseModelInterface {
-  id: string;
+  account: string;
+  domain: string;
+  domainid: string;
   max: number;
   resourcetype: number;
 }
-
-export const updateLimitMax = (limit: ResourceLimit): ResourceLimit => {
-  const fixedJson = { ...limit };
-  if (limit.max === -1) {
-    fixedJson['max'] = Infinity;
-  }
-  return fixedJson;
-};