feat: update ngrx/platform (#1081)

PR Close #1059

package.json

@@ -28,12 +28,12 @@
     "@angular/platform-browser": "5.1.0",
     "@angular/platform-browser-dynamic": "5.1.0",
     "@angular/platform-server": "5.1.0",
-    "@angular/router": "5.1.0",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/entity": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
-    "@ngrx/store-devtools": "4.1.1",
+    "@angular/router": "5.2.0",
+    "@ngrx/effects": "5.2.0",
+    "@ngrx/entity": "5.2.0",
+    "@ngrx/router-store": "5.2.0",
+    "@ngrx/store": "5.2.0",
+    "@ngrx/store-devtools": "5.2.0",
     "@ngx-translate/core": "^8.0.0",
     "@ngx-translate/http-loader": "^2.0.0",
     "chart.js": "2.7.0",

src/app/security-group/sg-list-item/card-item/security-group-card-item.component.ts

@@ -1,15 +1,11 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material';
+
 import { SecurityGroup } from '../../sg.model';
 import { SecurityGroupListItemComponent } from '../security-group-list-item.component';
-import { MatMenuTrigger } from '@angular/material';
 import { VirtualMachine } from '../../../vm';
-import { Dictionary } from '@ngrx/entity/src/models';
+import { NgrxEntities } from '../../../shared/interfaces';
+
 
 @Component({
   selector: 'cs-security-group-card-item',
@@ -20,7 +16,7 @@ export class SecurityGroupCardItemComponent extends SecurityGroupListItemCompone
   @Input() public item: SecurityGroup;
   @Input() public searchQuery: () => string;
   @Input() public isSelected: (securityGroup) => boolean;
-  @Input() public vmList: Dictionary<VirtualMachine>;
+  @Input() public vmList: NgrxEntities<VirtualMachine>;
   @Output() public onClick = new EventEmitter();
   @ViewChild(MatMenuTrigger) public matMenuTrigger: MatMenuTrigger;
 }

src/app/security-group/sg-list-item/row-item/security-group-row-item.component.ts

@@ -1,15 +1,11 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material';
+
 import { SecurityGroup } from '../../sg.model';
 import { SecurityGroupListItemComponent } from '../security-group-list-item.component';
-import { MatMenuTrigger } from '@angular/material';
-import { Dictionary } from '@ngrx/entity/src/models';
 import { VirtualMachine } from '../../../vm';
+import { NgrxEntities } from '../../../shared/interfaces';
+
 
 @Component({
   selector: 'cs-security-group-row-item',
@@ -20,7 +16,7 @@ export class SecurityGroupRowItemComponent extends SecurityGroupListItemComponen
   @Input() public item: SecurityGroup;
   @Input() public searchQuery: () => string;
   @Input() public isSelected: (securityGroup) => boolean;
-  @Input() public vmList: Dictionary<VirtualMachine>;
+  @Input() public vmList: NgrxEntities<VirtualMachine>;
   @Output() public onClick = new EventEmitter();
   @ViewChild(MatMenuTrigger) public matMenuTrigger: MatMenuTrigger;
 }

src/app/security-group/sg-list/security-group-list.component.ts

@@ -1,21 +1,14 @@
-import {
-  Component,
-  Input,
-  OnChanges
-} from '@angular/core';
-import {
-  getType,
-  SecurityGroup,
-  SecurityGroupType
-} from '../sg.model';
+import { Component, Input, OnChanges } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import { getType, SecurityGroup, SecurityGroupType } from '../sg.model';
 import { ViewMode } from '../../shared/components/view-mode-switch/view-mode-switch.component';
 import { SecurityGroupCardItemComponent } from '../sg-list-item/card-item/security-group-card-item.component';
 import { SecurityGroupRowItemComponent } from '../sg-list-item/row-item/security-group-row-item.component';
-import { TranslateService } from '@ngx-translate/core';
 import { ListService } from '../../shared/components/list/list.service';
 import { SecurityGroupViewMode } from '../sg-view-mode';
 import { VirtualMachine } from '../../vm';
-import { Dictionary } from '@ngrx/entity/src/models';
+import { NgrxEntities } from '../../shared/interfaces';
 
 
 @Component({
@@ -27,7 +20,7 @@ export class SecurityGroupListComponent implements OnChanges {
   @Input() public query: string;
   @Input() public mode: ViewMode;
   @Input() public viewMode: SecurityGroupViewMode;
-  @Input() public vmList: Dictionary<VirtualMachine>;
+  @Input() public vmList: NgrxEntities<VirtualMachine>;
   public groupings = [];
 
   public inputs;

src/app/security-group/sg-page/security-group-page.component.ts

@@ -1,17 +1,13 @@
-import {
-  Component,
-  Input
-} from '@angular/core';
-import {
-  ActivatedRoute,
-  Router
-} from '@angular/router';
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
 import { SecurityGroup, } from '../sg.model';
 import { ViewMode } from '../../shared/components/view-mode-switch/view-mode-switch.component';
 import { ListService } from '../../shared/components/list/list.service';
 import { SecurityGroupViewMode } from '../sg-view-mode';
 import { VirtualMachine } from '../../vm';
-import { Dictionary } from '@ngrx/entity/src/models';
+import { NgrxEntities } from '../../shared/interfaces';
+
 
 @Component({
   selector: 'cs-security-group-page',
@@ -24,7 +20,7 @@ export class SecurityGroupPageComponent {
   @Input() public isLoading = false;
   @Input() public viewMode: SecurityGroupViewMode;
   @Input() public query: string;
-  @Input() public vmList: Dictionary<VirtualMachine>;
+  @Input() public vmList: NgrxEntities<VirtualMachine>;
 
   public mode: ViewMode;
   public viewModeKey = 'sgPageViewMode';

src/app/shared/interfaces/index.ts

@@ -0,0 +1,5 @@
+export * from './action.interface';
+export * from './action-service.interface';
+export * from './filter-component'
+export * from './ngrx-entities.interface';
+export * from './taggable.interface';

src/app/shared/interfaces/ngrx-entities.interface.ts

@@ -0,0 +1,8 @@
+// This interface represents Dictionary that used by ngrx/entity for returning type of selectEntities
+// import { Dictionary } from '@ngrx/entity/src/models';
+// This Dictionary class is not a part of public API, so we use custom interface
+
+export interface NgrxEntities<T> {
+  [id: string ]: T;
+  [id: number]: T;
+}

src/app/shared/models/index.ts

@@ -21,3 +21,4 @@ export * from './configuration.model';
 export * from './action.model';
 export * from './grouping.model';
 export * from './user.model';
+export * from './template-group.model';

src/app/snapshot/snapshots-page/snapshot-list-item/snapshot-card-item.component.ts

@@ -1,20 +1,22 @@
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material';
-import { Dictionary } from '@ngrx/entity/src/models';
 import { TranslateService } from '@ngx-translate/core';
-import { Snapshot, Volume } from '../../../shared/models/index';
+
+import { Snapshot, Volume } from '../../../shared/models';
+import { NgrxEntities } from '../../../shared/interfaces';
 import { VirtualMachine } from '../../../vm';
 import { SnapshotItemComponent } from './snapshot-item.component';
 
+
 @Component({
   selector: 'cs-snapshot-card-item',
   templateUrl: 'snapshot-card-item.component.html',
   styleUrls: ['snapshot-card-item.component.scss']
 })
 export class SnapshotCardItemComponent extends SnapshotItemComponent {
   @Input() public item: Snapshot;
-  @Input() public volumes: Dictionary<Volume>;
-  @Input() public virtualMachines: Dictionary<VirtualMachine>;
+  @Input() public volumes: NgrxEntities<Volume>;
+  @Input() public virtualMachines: NgrxEntities<VirtualMachine>;
   @Input() public isSelected: (snapshot: Snapshot) => boolean;
   @Input() public query: string;
   @Output() public onClick = new EventEmitter<Snapshot>();

src/app/snapshot/snapshots-page/snapshot-list-item/snapshot-list-item.component.ts

@@ -1,20 +1,22 @@
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material';
-import { Dictionary } from '@ngrx/entity/src/models';
 import { TranslateService } from '@ngx-translate/core';
+
 import { Snapshot, Volume } from '../../../shared/models';
+import { NgrxEntities } from '../../../shared/interfaces';
 import { VirtualMachine } from '../../../vm';
 import { SnapshotItemComponent } from './snapshot-item.component';
 
+
 @Component({
   selector: 'cs-snapshot-list-item',
   templateUrl: 'snapshot-list-item.component.html',
   styleUrls: ['snapshot-list-item.component.scss']
 })
 export class SnapshotListItemComponent extends SnapshotItemComponent {
   @Input() public item: Snapshot;
-  @Input() public volumes: Dictionary<Volume>;
-  @Input() public virtualMachines: Dictionary<VirtualMachine>;
+  @Input() public volumes: NgrxEntities<Volume>;
+  @Input() public virtualMachines: NgrxEntities<VirtualMachine>;
   @Input() public isSelected: (snapshot: Snapshot) => boolean;
   @Input() public query: string;
   @Output() public onClick = new EventEmitter<Snapshot>();

src/app/snapshot/snapshots-page/snapshot-sidebar/snapshot-sidebar.component.ts

@@ -1,12 +1,14 @@
 import { Component, Input } from '@angular/core';
-import { Dictionary } from '@ngrx/entity/src/models';
+
 import {
   getDateSnapshotCreated,
   getSnapshotDescription,
   Snapshot,
   SnapshotStates,
   Volume
 } from '../../../shared/models';
+import { NgrxEntities } from '../../../shared/interfaces';
+
 
 @Component({
   selector: 'cs-snapshot-sidebar',
@@ -15,7 +17,7 @@ import {
 })
 export class SnapshotSidebarComponent {
   @Input() public snapshot: Snapshot;
-  @Input() public volumes: Dictionary<Volume>;
+  @Input() public volumes: NgrxEntities<Volume>;
   @Input() public isLoading: boolean;
 
   public stateTranslations = {

src/app/snapshot/snapshots-page/snapshots-page.component.ts

@@ -1,22 +1,23 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { Dictionary } from '@ngrx/entity/src/models';
+
 import { ListService } from '../../shared/components/list/list.service';
 import { ViewMode } from '../../shared/components/view-mode-switch/view-mode-switch.component';
-import { Snapshot, Volume } from '../../shared/models';
-import { Grouping } from '../../shared/models/grouping.model';
+import { Grouping, Snapshot, Volume } from '../../shared/models';
+import { NgrxEntities } from '../../shared/interfaces';
 import { VirtualMachine } from '../../vm';
 import { SnapshotCardItemComponent } from './snapshot-list-item/snapshot-card-item.component';
 import { SnapshotListItemComponent } from './snapshot-list-item/snapshot-list-item.component';
 
+
 @Component({
   selector: 'cs-snapshots-page',
   templateUrl: './snapshots-page.component.html',
   providers: [ListService]
 })
 export class SnapshotsPageComponent implements OnChanges {
   @Input() public snapshots: Snapshot[];
-  @Input() public volumes: Dictionary<Volume>;
-  @Input() public virtualMachines: Dictionary<VirtualMachine>;
+  @Input() public volumes: NgrxEntities<Volume>;
+  @Input() public virtualMachines: NgrxEntities<VirtualMachine>;
   @Input() public groupings: Array<Grouping> = [];
   @Input() public isLoading: boolean;
   @Input() public query: string;

src/app/template/template-filters/template-filters.component.ts

@@ -1,9 +1,8 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { TemplateFilters, TemplateResourceType } from '../shared/base-template.service';
-import { Account, Domain, getPath, OsFamily, OsType, Zone } from '../../shared/models';
-import { Dictionary } from '@ngrx/entity/src/models';
+import { Account, Domain, getPath, OsFamily, OsType, TemplateGroup, Zone } from '../../shared/models';
+import { NgrxEntities } from '../../shared/interfaces';
 import { AuthService } from '../../shared/services/auth.service';
-import { TemplateGroup } from '../../shared/models/template-group.model';
 import { TranslateService } from '@ngx-translate/core';
 import { Language } from '../../shared/services/language.service';
 import { reorderAvailableGroupings } from '../../shared/utils/reorder-groupings';
@@ -22,7 +21,7 @@ export class TemplateFiltersComponent implements OnInit {
   @Input() public accounts: Array<Account> = [];
   @Input() public osTypes: Array<OsType> = [];
   @Input() public zones: Array<Zone>;
-  @Input() public domains: Dictionary<Domain>;
+  @Input() public domains: NgrxEntities<Domain>;
   @Input() public groups: Array<TemplateGroup>;
   @Input() public selectedAccountIds: string[];
   @Input() public selectedGroupings: any[];

src/app/template/template-sidebar/template-os-icon/template-os-icon.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { BaseTemplateModel } from '../../shared/base-template.model';
-import { OsType } from '../../../shared/models/os-type.model';
+import { Component, Input } from '@angular/core';
 
-import { Dictionary } from '@ngrx/entity/src/models';
+import { BaseTemplateModel } from '../../shared/base-template.model';
+import { OsType } from '../../../shared/models';
+import { NgrxEntities } from '../../../shared/interfaces';
 
 
 @Component({
@@ -12,7 +12,7 @@ import { Dictionary } from '@ngrx/entity/src/models';
 })
 export class TemplateOsIconComponent {
   @Input() public template: BaseTemplateModel;
-  @Input() public osTypes: Dictionary<OsType>;
+  @Input() public osTypes: NgrxEntities<OsType>;
 
   public get templateOsType(): any {
     return this.osTypes[this.template.osTypeId];

src/app/template/template-sidebar/template-os/template-os.component.ts

@@ -1,7 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { BaseTemplateModel } from '../../shared/base-template.model';
-import { OsType } from '../../../shared/models/os-type.model';
-import { Dictionary } from '@ngrx/entity/src/models';
+
+import { BaseTemplateModel } from '../../shared';
+import { OsType } from '../../../shared/models';
+import { NgrxEntities } from '../../../shared/interfaces';
 
 
 @Component({
@@ -10,7 +11,7 @@ import { Dictionary } from '@ngrx/entity/src/models';
 })
 export class TemplateOsComponent implements OnInit {
   @Input() public template: BaseTemplateModel;
-  @Input() public osTypes: Dictionary<OsType>;
+  @Input() public osTypes: NgrxEntities<OsType>;
   public templateOsType: OsType;
 
   public ngOnInit() {

src/app/vm/vm-list-item/card-item/vm-list-card-item.component.ts

@@ -1,17 +1,12 @@
-import { VmListItemComponent } from '../vm-list-item.component';
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild
-} from '@angular/core';
-import { VirtualMachine } from '../../shared/vm.model';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material';
+
+import { VirtualMachine } from '../../shared/vm.model';
+import { VmListItemComponent } from '../vm-list-item.component';
 import { VmTagService } from '../../../shared/services/tags/vm-tag.service';
-import { OsType } from '../../../shared/models/os-type.model';
-import { Volume } from '../../../shared/models/volume.model';
-import { Dictionary } from '@ngrx/entity/src/models';
+import { OsType, Volume } from '../../../shared/models';
+import { NgrxEntities } from '../../../shared/interfaces';
+
 
 @Component({
   selector: 'cs-vm-card-list-item',
@@ -21,7 +16,7 @@ import { Dictionary } from '@ngrx/entity/src/models';
 export class VmListCardItemComponent extends VmListItemComponent {
   @Input() public item: VirtualMachine;
   @Input() public volumes: Array<Volume>;
-  @Input() public osTypesMap: Dictionary<OsType>;
+  @Input() public osTypesMap: NgrxEntities<OsType>;
   @Input() public query: string;
   @Input() public isSelected: (vm: VirtualMachine) => boolean;
   @Output() public onClick = new EventEmitter();