From 03e64a177d461c739003a75413e3e875d89c6143 Mon Sep 17 00:00:00 2001 From: Eugene Dombrowsky Date: Tue, 5 Dec 2017 15:18:57 +0300 Subject: [PATCH] Wizard rework (#315) * rework redux and install @angular-redux/form * associate wizard forms with the redux store, rework validation of nav btns * add clearStore action * rework logic of wizard form * changing component interaction * simplify work with createNodeModel * fix creating nodeModel and clusterMode by redux * fix navigation-buttons cpm * fix validation of wizard forms * fix setting cluster form * fix node froms * fix form validation * fix the redux logic * Hide proveders which don't have datacenters * mark mandatory fields with an asterisk * fix bug with repeated creating cluster * added unsubscribing * fix unsubscribing * fix validation after adding a ssh key by the modal * fix goToStep reducer * fix reset forms * fix digitalocean size of nodes selectbox * set default value of selectedProvider * change set-provider template --- package-lock.json | 53 ++-- package.json | 8 +- src/app/app.module.ts | 8 +- ...ster-delete-confirmation.component.spec.ts | 3 - .../cluster-delete-confirmation.component.ts | 5 +- .../cluster-list.component.spec.ts | 6 +- src/app/cluster/cluster.component.spec.ts | 3 - src/app/cluster/cluster.component.ts | 5 +- ...node-delete-confirmation.component.spec.ts | 3 - .../node-delete-confirmation.component.ts | 6 +- .../node-delete-confirmation.service.spec.ts | 3 - .../breadcrumbs/breadcrumbs.component.spec.ts | 3 - .../breadcrumbs/breadcrumbs.component.ts | 11 +- .../navigation/navigation.component.spec.ts | 3 - .../navigation/navigation.component.ts | 5 +- .../notification.component.spec.ts | 3 - .../notification/notification.component.ts | 12 +- .../sidenav/sidenav.component.spec.ts | 3 - src/app/core/core.module.ts | 4 +- .../error-notifications.service.ts | 4 +- src/app/core/services/api/api.service.spec.ts | 5 +- src/app/core/services/api/api.service.ts | 4 +- .../core/services/auth/auth.service.spec.ts | 5 +- src/app/core/services/auth/auth.service.ts | 4 +- .../create-nodes/create-nodes.service.ts | 5 +- src/app/dashboard/dashboard.component.spec.ts | 3 - src/app/dashboard/dashboard.component.ts | 5 +- src/app/forms/add-node/add-node.component.ts | 5 +- .../aws/aws-add-node.component.spec.ts | 3 - .../add-node/aws/aws-add-node.component.ts | 6 +- .../digitalocean-add-node.component.spec.ts | 3 - .../digitalocean-add-node.component.ts | 4 +- .../openstack-add-node.component.spec.ts | 3 - .../openstack/openstack-add-node.component.ts | 8 +- src/app/kubermatic.component.spec.ts | 3 - src/app/kubermatic.component.ts | 16 +- .../frontpage/frontpage.component.spec.ts | 3 - src/app/redux/actions/action.base.ts | 13 + src/app/redux/actions/actions.module.ts | 14 -- src/app/redux/actions/auth.actions.ts | 41 +-- src/app/redux/actions/breadcrumb.actions.ts | 19 +- src/app/redux/actions/notification.actions.ts | 45 ++-- src/app/redux/actions/wizard.actions.ts | 67 +++++ src/app/redux/reducers/auth.ts | 10 +- src/app/redux/reducers/breadcrumb.ts | 11 +- src/app/redux/reducers/index.ts | 47 ---- src/app/redux/reducers/notification.ts | 10 +- src/app/redux/reducers/wizard.ts | 201 +++++++++++++++ src/app/redux/store.ts | 36 +++ src/app/shared/interfaces/action.interface.ts | 5 + src/app/shared/shared.module.ts | 4 +- .../add-ssh-key/add-ssh-key.component.spec.ts | 3 - .../add-ssh-key/add-ssh-key.component.ts | 5 +- .../list-ssh-key.component.spec.ts | 3 - .../list-ssh-key/list-ssh-key.component.ts | 4 +- src/app/sshkey/sshkey.component.spec.ts | 3 - src/app/sshkey/sshkey.component.ts | 1 - .../add-ssh-key-modal.component.spec.ts | 3 - .../add-ssh-key-modal.component.ts | 3 +- .../navigation-buttons.component.html | 2 +- .../navigation-buttons.component.ts | 70 +++++- src/app/wizard/progress/progress.component.ts | 31 ++- .../provider/cluster/aws/aws.component.html | 8 +- .../provider/cluster/aws/aws.component.ts | 52 ++-- .../provider/cluster/cluster.component.html | 23 +- .../provider/cluster/cluster.component.ts | 66 ++--- .../digitalocean/digitalocean.component.html | 4 +- .../digitalocean/digitalocean.component.ts | 37 +-- .../openstack/openstack.component.html | 12 +- .../cluster/openstack/openstack.component.ts | 54 ++-- .../provider/node/aws/aws.component.html | 10 +- .../wizard/provider/node/aws/aws.component.ts | 49 ++-- .../digitalocean/digitalocean.component.html | 6 +- .../digitalocean/digitalocean.component.ts | 69 +++-- .../wizard/provider/node/node.component.html | 21 +- .../wizard/provider/node/node.component.ts | 29 ++- .../node/openstack/openstack.component.html | 8 +- .../node/openstack/openstack.component.ts | 45 ++-- .../set-cluster-name.component.html | 4 +- .../set-cluster-name.component.ts | 35 +-- .../set-datacenter.component.html | 11 +- .../set-datacenter.component.ts | 69 ++++- .../set-provider/set-provider.component.html | 43 +++- .../set-provider/set-provider.component.ts | 66 ++++- .../set-settings/set-settings.component.html | 6 +- .../set-settings/set-settings.component.ts | 104 ++++---- .../ssh-key-form-field.component.html | 4 +- .../ssh-key-form-field.component.ts | 62 +++-- src/app/wizard/summary/summary.component.html | 78 +++--- src/app/wizard/summary/summary.component.ts | 73 ++++-- src/app/wizard/wizard.component.html | 58 +---- src/app/wizard/wizard.component.spec.ts | 15 +- src/app/wizard/wizard.component.ts | 237 ++++++------------ tslint.json | 2 +- 94 files changed, 1276 insertions(+), 971 deletions(-) create mode 100644 src/app/redux/actions/action.base.ts delete mode 100644 src/app/redux/actions/actions.module.ts create mode 100644 src/app/redux/actions/wizard.actions.ts delete mode 100644 src/app/redux/reducers/index.ts create mode 100644 src/app/redux/reducers/wizard.ts create mode 100644 src/app/redux/store.ts create mode 100644 src/app/shared/interfaces/action.interface.ts diff --git a/package-lock.json b/package-lock.json index fdab036eb0..b76d7a72d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,19 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@angular-redux/form": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@angular-redux/form/-/form-6.6.0.tgz", + "integrity": "sha512-6ELlSKIJfCElkqYSbBWKIDAPdOBDS0cxi8y7OU0bkUFWGc2akQ7/1wDabMpONtG6AMVCeCV7bQNb7NVu+dVjrA==", + "requires": { + "immutable": "3.8.1" + } + }, + "@angular-redux/store": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@angular-redux/store/-/store-6.6.0.tgz", + "integrity": "sha512-gjeOWRyxEG60GbWY0QGCn13cP8w9hzlMRG1JpJeFKhbxrNyAzVCbA8q73RJAJq+s3ivmlqVCDf4qGXh2t7XIfQ==" + }, "@angular/animations": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.0.tgz", @@ -284,21 +297,6 @@ "tsickle": "0.21.6" } }, - "@ngrx/core": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@ngrx/core/-/core-1.2.0.tgz", - "integrity": "sha1-iCtGq6+i4ObYh8txobLC+j5tDcY=" - }, - "@ngrx/store": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-2.2.3.tgz", - "integrity": "sha1-570RSfHEQgjxzEdENT8PmKDx9Xs=" - }, - "@ngrx/store-devtools": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-3.2.4.tgz", - "integrity": "sha1-LOTRO/NISKnlHsh+OxJe1ntR5VA=" - }, "@ngtools/json-schema": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz", @@ -311,6 +309,12 @@ "integrity": "sha1-pDeRJMSSHU4h3lTsdGacnps1Zxc=", "dev": true }, + "@types/lodash": { + "version": "4.14.86", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.86.tgz", + "integrity": "sha512-DIiC7xZkI+iqwb6A28+JDfrioxcFRHAUXl+AEZ9lULQppiArWRfex4ugVUAJKZHxcgqZJ1w2de2DTahVyrEp4Q==", + "dev": true + }, "@types/node": { "version": "6.0.85", "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.85.tgz", @@ -5364,8 +5368,12 @@ "lodash": { "version": "4.17.4", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", - "dev": true + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + }, + "lodash-es": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.4.tgz", + "integrity": "sha1-3MHXVS4VCgZABzupyzHXDwMpUOc=" }, "lodash._basecopy": { "version": "3.0.1", @@ -7643,6 +7651,17 @@ } } }, + "redux": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz", + "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==", + "requires": { + "lodash": "4.17.4", + "lodash-es": "4.17.4", + "loose-envify": "1.3.1", + "symbol-observable": "1.0.4" + } + }, "reflect-metadata": { "version": "0.1.10", "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.10.tgz", diff --git a/package.json b/package.json index 16d6f56f05..536cf74585 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "e2e": "ng e2e" }, "dependencies": { + "@angular-redux/form": "^6.6.0", + "@angular-redux/store": "^6.6.0", "@angular/animations": "4.3.0", "@angular/cdk": "2.0.0-beta.8", "@angular/common": "4.3.0", @@ -31,9 +33,6 @@ "@angular/platform-browser": "4.3.0", "@angular/platform-browser-dynamic": "4.3.0", "@angular/router": "4.3.0", - "@ngrx/core": "^1.2.0", - "@ngrx/store": "^2.2.2", - "@ngrx/store-devtools": "^3.2.4", "angular": "^1.6.4", "angular-lock": "^2.0.2", "angular2-jwt": "^0.2.2", @@ -45,9 +44,11 @@ "hammerjs": "^2.0.8", "jquery": "^3.1.1", "karma-spec-reporter": "0.0.31", + "lodash": "^4.17.4", "ng2-validation": "3.1.2", "ngx-clipboard": "8.0.4", "openstack-lib": "0.0.2", + "redux": "^3.7.2", "reselect": "^2.5.4", "rxjs": "^5.4.1", "ts-helpers": "1.1.2", @@ -57,6 +58,7 @@ "@angular/cli": "1.2.4", "@angular/compiler-cli": "4.3.0", "@types/jasmine": "2.5.38", + "@types/lodash": "^4.14.86", "@types/node": "^6.0.85", "codelyzer": "~2.0.0-beta.1", "concurrently": "^3.1.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index df0c8981eb..a1451be6f4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,8 @@ -import { StoreModule } from '@ngrx/store'; import { NgModule } from '@angular/core'; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { NgReduxModule } from '@angular-redux/store'; +import { NgReduxFormModule } from '@angular-redux/form'; import { KubermaticComponent } from "./kubermatic.component"; import { DashboardComponent } from "./dashboard/dashboard.component"; @@ -13,7 +14,7 @@ import { MobileNavigationComponent } from './overlays'; import { AppRoutingModule } from "./app-routing.module"; import { SharedModule } from './shared/shared.module'; import { CoreModule } from 'app/core/core.module'; -import { combinedReducer } from "./redux/reducers/index"; + @NgModule({ @@ -23,7 +24,8 @@ import { combinedReducer } from "./redux/reducers/index"; BrowserModule, BrowserAnimationsModule, AppRoutingModule, - StoreModule.provideStore(combinedReducer), + NgReduxFormModule, + NgReduxModule ], declarations: [ KubermaticComponent, diff --git a/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.spec.ts b/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.spec.ts index 562f2fa77c..9126a1f006 100644 --- a/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.spec.ts +++ b/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.spec.ts @@ -2,7 +2,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {FormBuilder, ReactiveFormsModule, FormsModule} from "@angular/forms"; -import {StoreModule} from "@ngrx/store"; import { NgModule } from "@angular/core"; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; @@ -12,7 +11,6 @@ import { RouterModule, Router } from "@angular/router"; import { ClusterDeleteConfirmationComponent } from './cluster-delete-confirmation.component'; import {ApiService} from "app/core/services/api/api.service"; import {HttpModule} from "@angular/http"; -import {combinedReducer} from "../../redux/reducers/index"; @@ -27,7 +25,6 @@ describe('ClusterDeleteConfirmationComponent', () => { FormsModule, ReactiveFormsModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), HttpModule, MaterialModule, RouterModule diff --git a/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.ts b/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.ts index 99825feef3..5be5defb28 100644 --- a/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.ts +++ b/src/app/cluster/cluster-delete-confirmation/cluster-delete-confirmation.component.ts @@ -24,8 +24,7 @@ export class ClusterDeleteConfirmationComponent implements OnInit, DoCheck { private router: Router, private api: ApiService, private dialogRef: MdDialogRef, - private createNodesService: CreateNodesService, - private notificationActions: NotificationActions + private createNodesService: CreateNodesService ) {} ngOnInit() {} @@ -48,7 +47,7 @@ export class ClusterDeleteConfirmationComponent implements OnInit, DoCheck { this.api.deleteCluster(this.clusterName).subscribe(result => { this.cluster = result; this.createNodesService.preventCreatingInitialClusterNodes(); - this.notificationActions.success("Success", `Cluster is beeing deleted`); + NotificationActions.success("Success", `Cluster is beeing deleted`); this.router.navigate(['/clusters']); }); diff --git a/src/app/cluster/cluster-list/cluster-list.component.spec.ts b/src/app/cluster/cluster-list/cluster-list.component.spec.ts index 559b777997..bccfa1084c 100644 --- a/src/app/cluster/cluster-list/cluster-list.component.spec.ts +++ b/src/app/cluster/cluster-list/cluster-list.component.spec.ts @@ -9,9 +9,6 @@ import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {Http, HttpModule, ConnectionBackend} from "@angular/http"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../redux/reducers/index"; - describe('ClusterListComponent', () => { let component: ClusterListComponent; let fixture: ComponentFixture; @@ -28,8 +25,7 @@ describe('ClusterListComponent', () => { FormsModule, ReactiveFormsModule, HttpModule, - RouterTestingModule, - StoreModule.provideStore(combinedReducer) + RouterTestingModule ], providers: [ diff --git a/src/app/cluster/cluster.component.spec.ts b/src/app/cluster/cluster.component.spec.ts index e5b6c95ade..a95730b891 100644 --- a/src/app/cluster/cluster.component.spec.ts +++ b/src/app/cluster/cluster.component.spec.ts @@ -9,8 +9,6 @@ import { NodeComponent } from "./node/node.component"; import {HttpModule} from "@angular/http"; import {Auth} from "../core/services"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../redux/reducers/index"; import {AddNodeComponent} from "../forms/add-node/add-node.component"; describe('ClusterComponent', () => { @@ -25,7 +23,6 @@ describe('ClusterComponent', () => { FormsModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), ], declarations: [ ClusterComponent, diff --git a/src/app/cluster/cluster.component.ts b/src/app/cluster/cluster.component.ts index 1fd7a8043d..5b05e6f02a 100644 --- a/src/app/cluster/cluster.component.ts +++ b/src/app/cluster/cluster.component.ts @@ -51,8 +51,7 @@ export class ClusterComponent implements OnInit { private api: ApiService, public dialog: MdDialog, private createNodesService: CreateNodesService, - private dcService: DatacenterService, - private notificationActions: NotificationActions + private dcService: DatacenterService ) {} ngOnInit() { @@ -154,7 +153,7 @@ export class ClusterComponent implements OnInit { } else if (this.cluster.provider === NodeProvider.OPENSTACK) { this.dialogRef = this.dialog.open(OpenstackAddNodeComponent, {data: data}); } else { - this.notificationActions.error("Error", `Add node form is missing.`); + NotificationActions.error("Error", `Add node form is missing.`); return; } diff --git a/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.spec.ts b/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.spec.ts index 88086d5841..d8b6b6f0db 100644 --- a/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.spec.ts +++ b/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.spec.ts @@ -7,8 +7,6 @@ import { DebugElement } from '@angular/core'; import {MaterialModule, MdDialog, MdDialogModule } from '@angular/material'; import { NodeDeleteConfirmationComponent } from './node-delete-confirmation.component'; import {ConnectionBackend, RequestOptions, HttpModule} from "@angular/http"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../redux/reducers/index"; import {Auth} from "../../core/services"; import {RouterTestingModule} from "@angular/router/testing"; import {FormBuilder, NgModel} from "@angular/forms"; @@ -23,7 +21,6 @@ describe('NodeDeleteConfirmationComponent', () => { TestBed.configureTestingModule({ declarations: [ NodeDeleteConfirmationComponent ], imports: [ - StoreModule.provideStore(combinedReducer), MaterialModule, HttpModule, RouterTestingModule, diff --git a/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.ts b/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.ts index 6df81d56a5..014dcdcbc8 100644 --- a/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.ts +++ b/src/app/cluster/node-delete-confirmation/node-delete-confirmation.component.ts @@ -30,9 +30,7 @@ export class NodeDeleteConfirmationComponent implements OnInit { constructor( private api: ApiService, - private customEventService: CustomEventService, - private notificationActions: NotificationActions - ) {} + private customEventService: CustomEventService) {} ngOnInit() { } @@ -40,7 +38,7 @@ export class NodeDeleteConfirmationComponent implements OnInit { public deleteNode(nodeName: string): void { this.onNodeRemoval(true); this.api.deleteClusterNode(this.clusterName, nodeName).subscribe(result => { - this.notificationActions.success("Success", `Node removed successfully`); + NotificationActions.success("Success", `Node removed successfully`); this.customEventService.publish('onNodeDelete', nodeName); this.onNodeRemoval(false); }); diff --git a/src/app/cluster/node-delete-confirmation/node-delete-confirmation.service.spec.ts b/src/app/cluster/node-delete-confirmation/node-delete-confirmation.service.spec.ts index ea4fbb0b92..7f76ee2eb6 100644 --- a/src/app/cluster/node-delete-confirmation/node-delete-confirmation.service.spec.ts +++ b/src/app/cluster/node-delete-confirmation/node-delete-confirmation.service.spec.ts @@ -6,8 +6,6 @@ import {OverlayPositionBuilder} from "@angular/material/typings/core/overlay/pos import {BrowserModule} from "@angular/platform-browser"; import {HttpModule} from "@angular/http"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../redux/reducers/index"; describe('NodeDeleteConfirmationService', () => { beforeEach(() => { @@ -16,7 +14,6 @@ describe('NodeDeleteConfirmationService', () => { BrowserModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), OverlayModule ], providers: [ diff --git a/src/app/core/components/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/core/components/breadcrumbs/breadcrumbs.component.spec.ts index cf7aa06ac2..5d85114a8b 100644 --- a/src/app/core/components/breadcrumbs/breadcrumbs.component.spec.ts +++ b/src/app/core/components/breadcrumbs/breadcrumbs.component.spec.ts @@ -2,8 +2,6 @@ import { async, ComponentFixture, TestBed } from "@angular/core/testing"; import { BreadcrumbsComponent } from "./breadcrumbs.component"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; describe("BreadcrumbsComponent", () => { let component: BreadcrumbsComponent; @@ -12,7 +10,6 @@ describe("BreadcrumbsComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports : [ - StoreModule.provideStore(combinedReducer) ], declarations: [ BreadcrumbsComponent ] }) diff --git a/src/app/core/components/breadcrumbs/breadcrumbs.component.ts b/src/app/core/components/breadcrumbs/breadcrumbs.component.ts index 91799f9eb0..896af3b824 100644 --- a/src/app/core/components/breadcrumbs/breadcrumbs.component.ts +++ b/src/app/core/components/breadcrumbs/breadcrumbs.component.ts @@ -1,8 +1,10 @@ +import { Observable } from 'rxjs'; import { Component, OnInit } from "@angular/core"; import {Router} from '@angular/router'; -import {Store} from "@ngrx/store"; -import * as fromRoot from "../../../redux/reducers/index"; import {ApiService} from 'app/core/services/api/api.service'; +import { select } from "@angular-redux/store"; +import { Breadcrumb } from 'app/redux/reducers/breadcrumb'; + @Component({ selector: "kubermatic-breadcrumbs", templateUrl: "./breadcrumbs.component.html", @@ -13,12 +15,13 @@ export class BreadcrumbsComponent implements OnInit { public activePageTitle: string = ""; public clusterName: string = ''; + @select(['breadcrumb', 'crumb']) breadcrumb$: Observable; + constructor( - private store: Store, private api: ApiService, private router: Router ) { - this.store.select(fromRoot.getBreadcrumb).subscribe(crumb => { + this.breadcrumb$.subscribe(crumb => { this.activePageTitle = crumb; const regExp = /\/cluster\/(.*)$/; diff --git a/src/app/core/components/navigation/navigation.component.spec.ts b/src/app/core/components/navigation/navigation.component.spec.ts index ca1e3bf298..910aeccfa0 100644 --- a/src/app/core/components/navigation/navigation.component.spec.ts +++ b/src/app/core/components/navigation/navigation.component.spec.ts @@ -1,8 +1,6 @@ /* tslint:disable:no-unused-variable */ import {async, ComponentFixture, TestBed} from "@angular/core/testing"; import {BrowserModule} from "@angular/platform-browser"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; import {NavigationComponent} from "./navigation.component"; import {Auth} from "../../services/auth/auth.service"; import {RouterTestingModule} from "@angular/router/testing"; @@ -21,7 +19,6 @@ describe("NavigationComponent", () => { imports: [ BrowserModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), SlimLoadingBarModule.forRoot(), MaterialModule, HttpModule diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts index 0012dc1b9d..4db6db264b 100644 --- a/src/app/core/components/navigation/navigation.component.ts +++ b/src/app/core/components/navigation/navigation.component.ts @@ -3,8 +3,6 @@ import { MdDialog } from '@angular/material'; import {Auth} from "../../services"; import {SidenavService} from "../sidenav/sidenav.service"; -import {Store} from "@ngrx/store"; -import * as fromRoot from "../../../redux/reducers/index"; import {Router} from '@angular/router'; import {environment} from "../../../../environments/environment"; import {AppConstants} from '../../../shared/constants/constants'; @@ -24,8 +22,7 @@ export class NavigationComponent implements OnInit { constructor( public auth: Auth, - private sidenavService: SidenavService, - private store: Store, + private sidenavService: SidenavService, private router: Router, private dialog: MdDialog ) {} diff --git a/src/app/core/components/notification/notification.component.spec.ts b/src/app/core/components/notification/notification.component.spec.ts index 1bb0ccd684..5e92ce60e6 100644 --- a/src/app/core/components/notification/notification.component.spec.ts +++ b/src/app/core/components/notification/notification.component.spec.ts @@ -1,7 +1,5 @@ /* tslint:disable:no-unused-variable */ import {async, ComponentFixture, TestBed} from "@angular/core/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; import {NotificationComponent} from "./notification.component"; import {SimpleNotificationsModule} from "angular2-notifications"; import {RouterTestingModule} from "@angular/router/testing"; @@ -14,7 +12,6 @@ describe("NotificationComponent", () => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, - StoreModule.provideStore(combinedReducer), SimpleNotificationsModule ], declarations: [ NotificationComponent ] diff --git a/src/app/core/components/notification/notification.component.ts b/src/app/core/components/notification/notification.component.ts index d5e44b3b67..5c55b5550c 100644 --- a/src/app/core/components/notification/notification.component.ts +++ b/src/app/core/components/notification/notification.component.ts @@ -1,8 +1,8 @@ +import { Observable } from 'rxjs'; import { Component } from "@angular/core"; import { NotificationsService } from "angular2-notifications"; -import { Store } from "@ngrx/store"; -import * as fromRoot from "../../../redux/reducers/index"; import { NotificationToast, NotificationToastType } from "../../../redux/reducers/notification"; +import { select } from "@angular-redux/store"; @Component({ selector: "kubermatic-notification", @@ -24,9 +24,11 @@ export class NotificationComponent { position: ["right", "top"] }; - constructor(private _store: Store, private _service: NotificationsService) { - this._store.select(fromRoot.getNotificationToast).subscribe(toast => { - if (!!toast) { + @select(['notification', 'toast']) notification$: Observable; + + constructor(private _service: NotificationsService) { + this.notification$.subscribe(toast => { + if (toast) { this.createToast(toast); } }); diff --git a/src/app/core/components/sidenav/sidenav.component.spec.ts b/src/app/core/components/sidenav/sidenav.component.spec.ts index 3c5366d999..54f5841cb3 100644 --- a/src/app/core/components/sidenav/sidenav.component.spec.ts +++ b/src/app/core/components/sidenav/sidenav.component.spec.ts @@ -4,8 +4,6 @@ import { SidenavComponent } from './sidenav.component'; import { MaterialModule } from '@angular/material'; import {Auth} from "../../services/auth/auth.service"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; describe('SidenavComponent', () => { @@ -16,7 +14,6 @@ describe('SidenavComponent', () => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, - StoreModule.provideStore(combinedReducer), MaterialModule ], declarations: [ SidenavComponent ], diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 311720e455..ef39263da2 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router'; /* Modules */ import { SharedModule } from 'app/shared/shared.module'; -import { ActionsModule } from 'app/redux/actions/actions.module'; import { SimpleNotificationsModule } from "angular2-notifications"; /* Components */ @@ -42,8 +41,7 @@ const modules: any[] = [ HttpClientModule, RouterModule, SharedModule, - SimpleNotificationsModule.forRoot(), - ActionsModule + SimpleNotificationsModule.forRoot() ]; const components: any[] = [ diff --git a/src/app/core/interceptors/error-notifications/error-notifications.service.ts b/src/app/core/interceptors/error-notifications/error-notifications.service.ts index be97564006..4e3a3c0a9a 100644 --- a/src/app/core/interceptors/error-notifications/error-notifications.service.ts +++ b/src/app/core/interceptors/error-notifications/error-notifications.service.ts @@ -5,7 +5,7 @@ import { Observable } from 'rxjs'; @Injectable() export class ErrorNotificationsInterceptor implements HttpInterceptor { - constructor(private notificationActions: NotificationActions) { } + constructor() { } intercept(req: HttpRequest, next: HttpHandler): Observable> { return next @@ -13,7 +13,7 @@ export class ErrorNotificationsInterceptor implements HttpInterceptor { .do( event => {}, errorInstance => { - this.notificationActions.error( + NotificationActions.error( `Error ${errorInstance.status}`, `${errorInstance.error.error.message || errorInstance.statusText}` ); diff --git a/src/app/core/services/api/api.service.spec.ts b/src/app/core/services/api/api.service.spec.ts index abf7369474..98c187621b 100644 --- a/src/app/core/services/api/api.service.spec.ts +++ b/src/app/core/services/api/api.service.spec.ts @@ -6,8 +6,6 @@ import {BrowserModule} from "@angular/platform-browser"; import {Http, HttpModule, ConnectionBackend} from "@angular/http"; import {Auth} from "../auth/auth.service"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; describe("ApiService", () => { beforeEach(() => { @@ -15,8 +13,7 @@ describe("ApiService", () => { imports: [ BrowserModule, HttpModule, - RouterTestingModule, - StoreModule.provideStore(combinedReducer) + RouterTestingModule ], declarations: [ ], diff --git a/src/app/core/services/api/api.service.ts b/src/app/core/services/api/api.service.ts index 820ca1ed2c..82545f49e2 100644 --- a/src/app/core/services/api/api.service.ts +++ b/src/app/core/services/api/api.service.ts @@ -21,7 +21,7 @@ export class ApiService { private restRoot: string = environment.restRoot; private headers: HttpHeaders = new HttpHeaders(); - constructor(private http: HttpClient, private auth: Auth, private notificationActions: NotificationActions) { + constructor(private http: HttpClient, private auth: Auth) { let token = auth.getBearerToken(); this.headers = this.headers.set("Authorization", "Bearer " + token); } @@ -111,6 +111,6 @@ export class ApiService { let body = { to: upgradeVersion }; const url = `${this.restRoot}/cluster/${cluster}/upgrade`; this.http.put(url, body, {headers: this.headers}) - .subscribe(result => this.notificationActions.success('Success', `Cluster ${cluster} was upgraded`)); + .subscribe(result => NotificationActions.success('Success', `Cluster ${cluster} was upgraded`)); } } diff --git a/src/app/core/services/auth/auth.service.spec.ts b/src/app/core/services/auth/auth.service.spec.ts index 8f516a4716..f8c743fcb0 100644 --- a/src/app/core/services/auth/auth.service.spec.ts +++ b/src/app/core/services/auth/auth.service.spec.ts @@ -5,8 +5,6 @@ import { Auth } from "./auth.service"; import {HttpModule} from "@angular/http"; import {BrowserModule} from "@angular/platform-browser"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; describe("Auth", () => { beforeEach(() => { @@ -14,8 +12,7 @@ describe("Auth", () => { imports: [ BrowserModule, HttpModule, - RouterTestingModule, - StoreModule.provideStore(combinedReducer) + RouterTestingModule ], declarations: [ ], diff --git a/src/app/core/services/auth/auth.service.ts b/src/app/core/services/auth/auth.service.ts index b01c07b60a..359e3d215b 100644 --- a/src/app/core/services/auth/auth.service.ts +++ b/src/app/core/services/auth/auth.service.ts @@ -1,13 +1,11 @@ import {Injectable} from "@angular/core"; import {Router, NavigationStart} from "@angular/router"; import {tokenNotExpired} from "angular2-jwt"; -import {Store} from "@ngrx/store"; -import * as fromRoot from "../../../redux/reducers/index"; @Injectable() export class Auth { - constructor(private router: Router, private store: Store) { + constructor(private router: Router) { let token = this.getTokenFromQuery(); if (token) { localStorage.setItem('token', token); diff --git a/src/app/core/services/create-nodes/create-nodes.service.ts b/src/app/core/services/create-nodes/create-nodes.service.ts index 997e2de01e..cee0c377e3 100644 --- a/src/app/core/services/create-nodes/create-nodes.service.ts +++ b/src/app/core/services/create-nodes/create-nodes.service.ts @@ -14,8 +14,7 @@ export class CreateNodesService { constructor( private api: ApiService, - private localStorageService: LocalStorageService, - private notificationActions: NotificationActions) { + private localStorageService: LocalStorageService) { let nodesData = this.localStorageService.getNodesData(); if (nodesData) { @@ -40,7 +39,7 @@ export class CreateNodesService { if (cluster.status.phase === "Running") { this.api.createClusterNode(cluster, createNodeModel).subscribe(result => { this.preventCreatingInitialClusterNodes(); - this.notificationActions.success("Success", `Creating Nodes`); + NotificationActions.success("Success", `Creating Nodes`); }); } }); diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts index 68db02a810..066e789bce 100644 --- a/src/app/dashboard/dashboard.component.spec.ts +++ b/src/app/dashboard/dashboard.component.spec.ts @@ -8,8 +8,6 @@ import {HttpModule} from "@angular/http"; import {RouterTestingModule} from "@angular/router/testing"; import {Auth} from "../core/services"; import {ApiService} from "app/core/services/api/api.service"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../redux/reducers/index"; import {ClusterNameGenerator} from "../core/util/name-generator.service"; import {FrontpageComponent} from "../pages/frontpage/frontpage.component"; import { MaterialModule } from '@angular/material'; @@ -25,7 +23,6 @@ describe("DashboardComponent", () => { ReactiveFormsModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), MaterialModule ], declarations: [ diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 60a6350035..ee98ad1347 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -15,8 +15,7 @@ export class DashboardComponent implements OnInit { constructor(private auth: Auth, private router: Router, private activatedRoute: ActivatedRoute, - private api: ApiService, - private breadcrumbActions: BreadcrumbActions) { + private api: ApiService) { this.router.events .filter(event => event instanceof NavigationEnd) .map(() => this.activatedRoute) @@ -30,7 +29,7 @@ export class DashboardComponent implements OnInit { .filter(route => route.outlet === "primary") .mergeMap(route => route.data) .subscribe((event) => { - this.breadcrumbActions.putBreadcrumb(event['title']); + BreadcrumbActions.putBreadcrumb(event['title']); }); } diff --git a/src/app/forms/add-node/add-node.component.ts b/src/app/forms/add-node/add-node.component.ts index 73125e6000..65b14d4914 100644 --- a/src/app/forms/add-node/add-node.component.ts +++ b/src/app/forms/add-node/add-node.component.ts @@ -10,15 +10,14 @@ export abstract class AddNodeComponent { abstract GetNodeCreateSpec(): CreateNodeModel; constructor(protected api: ApiService, - protected formBuilder: FormBuilder, - protected notificationActions: NotificationActions, + protected formBuilder: FormBuilder, @Inject(MD_DIALOG_DATA) public data: AddNodeModalData) { } public addNode(): void { let model = this.GetNodeCreateSpec(); this.api.createClusterNode(this.data.cluster, model).subscribe(node => { - this.notificationActions.success("Success", `Node(s) successfully created`); + NotificationActions.success("Success", `Node(s) successfully created`); }); } } diff --git a/src/app/forms/add-node/aws/aws-add-node.component.spec.ts b/src/app/forms/add-node/aws/aws-add-node.component.spec.ts index 068927423a..ad321a60cc 100644 --- a/src/app/forms/add-node/aws/aws-add-node.component.spec.ts +++ b/src/app/forms/add-node/aws/aws-add-node.component.spec.ts @@ -4,8 +4,6 @@ import { MaterialModule } from '@angular/material'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ApiService } from "app/core/services/api/api.service"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; import {HttpModule, ConnectionBackend} from "@angular/http"; import {Auth} from "../../../core/services"; import {RouterTestingModule} from "@angular/router/testing"; @@ -22,7 +20,6 @@ describe('AddNodeComponent', () => { MaterialModule, FormsModule, ReactiveFormsModule, - StoreModule.provideStore(combinedReducer), HttpModule, RouterTestingModule ], diff --git a/src/app/forms/add-node/aws/aws-add-node.component.ts b/src/app/forms/add-node/aws/aws-add-node.component.ts index c0b81cf084..af977485c0 100644 --- a/src/app/forms/add-node/aws/aws-add-node.component.ts +++ b/src/app/forms/add-node/aws/aws-add-node.component.ts @@ -1,4 +1,3 @@ -import { NotificationActions } from 'app/redux/actions/notification.actions'; import {Component, Inject} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {AWSNodeSpec} from "../../../shared/entity/node/AWSNodeSpec"; @@ -18,12 +17,11 @@ import {AddNodeModalData} from "../add-node-modal-data"; export class AWSAddNodeFormComponent extends AddNodeComponent { form: FormGroup; - instanceTypes:string[] = NodeInstanceFlavors.AWS; + instanceTypes: string[] = NodeInstanceFlavors.AWS; constructor(api: ApiService, fb: FormBuilder, - notificationActions: NotificationActions, @Inject(MD_DIALOG_DATA) public data: AddNodeModalData) { - super(api, fb, notificationActions, data); + super(api, fb, data); this.form = fb.group({ node_count: [1, [Validators.required, Validators.min(1)]], instance_type: ["", [Validators.required]], diff --git a/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.spec.ts b/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.spec.ts index 1f9eb1b92f..ace3f6a720 100644 --- a/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.spec.ts +++ b/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.spec.ts @@ -4,8 +4,6 @@ import { MaterialModule } from '@angular/material'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ApiService } from "app/core/services/api/api.service"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; import {HttpModule, ConnectionBackend} from "@angular/http"; import {Auth} from "../../../core/services"; import {RouterTestingModule} from "@angular/router/testing"; @@ -22,7 +20,6 @@ describe('AddNodeComponent', () => { MaterialModule, FormsModule, ReactiveFormsModule, - StoreModule.provideStore(combinedReducer), HttpModule, RouterTestingModule ], diff --git a/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.ts b/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.ts index a2682555b0..c83627fa12 100644 --- a/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.ts +++ b/src/app/forms/add-node/digitalocean/digitalocean-add-node.component.ts @@ -8,7 +8,6 @@ import {Size} from "../../../shared/entity/digitalocean/DropletSizeEntity"; import {DigitaloceanNodeSpec} from "../../../shared/entity/node/DigitialoceanNodeSpec"; import {MD_DIALOG_DATA} from "@angular/material"; import {AddNodeModalData} from "../add-node-modal-data"; -import { NotificationActions } from 'app/redux/actions/notification.actions'; @Component({ styleUrls: ['./../add-node.component.scss'], @@ -22,9 +21,8 @@ export class DigitaloceanAddNodeComponent extends AddNodeComponent { constructor(api: ApiService, fb: FormBuilder, - notificationActions: NotificationActions, @Inject(MD_DIALOG_DATA) public data: AddNodeModalData) { - super(api, fb, notificationActions, data); + super(api, fb, data); this.api.getDigitaloceanSizes(this.data.cluster.spec.cloud.digitalocean.token).subscribe(result => { this.nodeSizes = result.sizes; } diff --git a/src/app/forms/add-node/openstack/openstack-add-node.component.spec.ts b/src/app/forms/add-node/openstack/openstack-add-node.component.spec.ts index 5e33c5b5fe..2529aa72fc 100644 --- a/src/app/forms/add-node/openstack/openstack-add-node.component.spec.ts +++ b/src/app/forms/add-node/openstack/openstack-add-node.component.spec.ts @@ -4,8 +4,6 @@ import { MaterialModule } from '@angular/material'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ApiService } from "app/core/services/api/api.service"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../../redux/reducers/index"; import {HttpModule, ConnectionBackend} from "@angular/http"; import {Auth} from "../../../core/services"; import {RouterTestingModule} from "@angular/router/testing"; @@ -22,7 +20,6 @@ describe('AddNodeComponent', () => { MaterialModule, FormsModule, ReactiveFormsModule, - StoreModule.provideStore(combinedReducer), HttpModule, RouterTestingModule ], diff --git a/src/app/forms/add-node/openstack/openstack-add-node.component.ts b/src/app/forms/add-node/openstack/openstack-add-node.component.ts index cc55fa6f7a..3e05da059a 100644 --- a/src/app/forms/add-node/openstack/openstack-add-node.component.ts +++ b/src/app/forms/add-node/openstack/openstack-add-node.component.ts @@ -1,11 +1,8 @@ -import { NotificationActions } from './../../../redux/actions/notification.actions'; import {Component, Inject} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {CreateNodeModel} from "../../../shared/model/CreateNodeModel"; import {NodeCreateSpec} from "../../../shared/entity/NodeEntity"; import {ApiService} from "app/core/services/api/api.service"; -import {Store} from "@ngrx/store"; -import * as fromRoot from "../../../redux/reducers/index"; import {AddNodeComponent} from "../add-node.component"; import {MD_DIALOG_DATA} from "@angular/material"; import {OpenstackNodeSpec} from "../../../shared/entity/node/OpenstackNodeSpec"; @@ -23,10 +20,9 @@ export class OpenstackAddNodeComponent extends AddNodeComponent { flavors: string[] = NodeInstanceFlavors.Openstack; constructor(api: ApiService, - fb: FormBuilder, - notificationActions: NotificationActions, + fb: FormBuilder, @Inject(MD_DIALOG_DATA) public data: AddNodeModalData) { - super(api, fb, notificationActions, data); + super(api, fb, data); this.form = fb.group({ node_count: [1, [Validators.required, Validators.min(1)]], diff --git a/src/app/kubermatic.component.spec.ts b/src/app/kubermatic.component.spec.ts index 1943065092..a5373382ec 100644 --- a/src/app/kubermatic.component.spec.ts +++ b/src/app/kubermatic.component.spec.ts @@ -9,8 +9,6 @@ import {Http, HttpModule} from "@angular/http"; import {RouterTestingModule} from "@angular/router/testing"; import {AUTH_PROVIDERS, Auth, AuthGuard} from "./core/services"; import {ApiService} from "app/core/services/api/api.service"; -import {combinedReducer} from "./redux/reducers/index"; -import {StoreModule} from "@ngrx/store"; import {SimpleNotificationsModule} from "angular2-notifications"; import {SlimLoadingBarModule} from "ng2-slim-loading-bar"; import { MaterialModule } from '@angular/material'; @@ -25,7 +23,6 @@ describe("KubermaticComponent", () => { BrowserModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), //SimpleNotificationsModule.forRoot(), SimpleNotificationsModule, SlimLoadingBarModule.forRoot(), diff --git a/src/app/kubermatic.component.ts b/src/app/kubermatic.component.ts index 0b76c28f75..c4964d3f85 100644 --- a/src/app/kubermatic.component.ts +++ b/src/app/kubermatic.component.ts @@ -1,6 +1,9 @@ import { Component, OnInit, ViewChild } from "@angular/core"; +import { NgRedux, DevToolsExtension } from '@angular-redux/store'; +import { Store, INITIAL_STATE, StoreReducer } from "./redux/store"; + import { MdSidenav } from '@angular/material'; import { SidenavService } from './core/components/sidenav/sidenav.service'; @@ -13,8 +16,17 @@ export class KubermaticComponent implements OnInit { @ViewChild('sidenav') public sidenav: MdSidenav; public constructor( - private sidenavService: SidenavService - ) {} + private sidenavService: SidenavService, + private ngRedux: NgRedux, + private devTools: DevToolsExtension, + ) { + let enhancers = []; + + if (devTools.isEnabled()) { + enhancers = [ ...enhancers, devTools.enhancer() ]; + } + this.ngRedux.configureStore(StoreReducer, INITIAL_STATE, null, enhancers); + } public ngOnInit(): void { this.sidenavService diff --git a/src/app/pages/frontpage/frontpage.component.spec.ts b/src/app/pages/frontpage/frontpage.component.spec.ts index f527daace1..9da35970d8 100644 --- a/src/app/pages/frontpage/frontpage.component.spec.ts +++ b/src/app/pages/frontpage/frontpage.component.spec.ts @@ -1,8 +1,6 @@ /* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from "@angular/core/testing"; import {By, BrowserModule} from "@angular/platform-browser"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../redux/reducers/index"; import { FrontpageComponent } from "./frontpage.component"; import {RouterTestingModule} from "@angular/router/testing"; @@ -17,7 +15,6 @@ describe("FrontpageComponent", () => { imports: [ BrowserModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer) ], declarations: [ FrontpageComponent, diff --git a/src/app/redux/actions/action.base.ts b/src/app/redux/actions/action.base.ts new file mode 100644 index 0000000000..e5db1828a6 --- /dev/null +++ b/src/app/redux/actions/action.base.ts @@ -0,0 +1,13 @@ +export class ActionBase { + protected static readonly className: string = 'ActionBase'; + /** + * getActType - unites action name with action class name. + * + * @static + * @param {string} name - action name + * @return {string} + */ + public static getActType (name: string): string { + return `${this.className}:${name}`; + } +} \ No newline at end of file diff --git a/src/app/redux/actions/actions.module.ts b/src/app/redux/actions/actions.module.ts deleted file mode 100644 index 7d374d6f7c..0000000000 --- a/src/app/redux/actions/actions.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { BreadcrumbActions } from './breadcrumb.actions'; -import { NotificationActions } from './notification.actions'; -import { NgModule } from '@angular/core'; -import { AuthActions } from 'app/redux/actions/auth.actions'; - -@NgModule({ - providers: [ - NotificationActions, - BreadcrumbActions, - AuthActions - ] -}) - -export class ActionsModule { } diff --git a/src/app/redux/actions/auth.actions.ts b/src/app/redux/actions/auth.actions.ts index a9e201ff27..fd0e1f709e 100644 --- a/src/app/redux/actions/auth.actions.ts +++ b/src/app/redux/actions/auth.actions.ts @@ -1,33 +1,34 @@ -import { Injectable } from "@angular/core"; -import { Store } from "@ngrx/store"; -import * as fromRoot from "../reducers/index"; +import { ActionBase } from './action.base'; +import { Action } from '../../shared/interfaces/action.interface'; -@Injectable() -export class AuthActions { - public static get LOGGED_IN(): string { return "LOGGED_IN"; } - public static get LOGGED_OUT(): string { return "LOGGED_OUT"; } - public static get FETCH_PROFILE(): string { return "FETCH_PROFILE"; } +import { dispatch } from '@angular-redux/store'; - constructor(private store: Store) { - } - - public login(profile: any[], token: string) { - this.store.dispatch({ +export class AuthActions extends ActionBase { + static readonly className: string = 'AuthActions'; + static readonly LOGGED_IN = AuthActions.getActType('LOGGED_IN'); + static readonly LOGGED_OUT = AuthActions.getActType('LOGGED_OUT'); + static readonly FETCH_PROFILE = AuthActions.getActType('FETCH_PROFILE'); + + @dispatch() + static login(profile: any[], token: string): Action { + return { type: AuthActions.LOGGED_IN, payload: { profile, token } - }); + }; } - public logout() { - this.store.dispatch({ + @dispatch() + static logout(): Action { + return { type: AuthActions.LOGGED_OUT - }); + }; } - public fetchProfile(profile: any[]) { - this.store.dispatch({ + @dispatch() + static fetchProfile(profile: any[]): Action { + return { type: AuthActions.FETCH_PROFILE, payload: { profile } - }); + }; } } diff --git a/src/app/redux/actions/breadcrumb.actions.ts b/src/app/redux/actions/breadcrumb.actions.ts index d7a0b4c30c..f0d0c8eb0b 100644 --- a/src/app/redux/actions/breadcrumb.actions.ts +++ b/src/app/redux/actions/breadcrumb.actions.ts @@ -1,15 +1,14 @@ -import { Injectable } from "@angular/core"; -import { Store } from "@ngrx/store"; -import * as fromRoot from "../reducers/index"; +import { ActionBase } from './action.base'; +import { Action } from '../../shared/interfaces/action.interface'; -@Injectable() -export class BreadcrumbActions { - public static get PUT_BREADCRUMB(): string { return "PUT_BREADCRUMB"; } +import { dispatch } from '@angular-redux/store'; - constructor(private store: Store) { - } +export class BreadcrumbActions extends ActionBase { + static readonly className: string = 'BreadcrumbActions'; + static readonly PUT_BREADCRUMB = BreadcrumbActions.getActType('PUT_BREADCRUMB'); - public putBreadcrumb(crumb: string) { - this.store.dispatch({ type: BreadcrumbActions.PUT_BREADCRUMB, payload: { crumb } }); + @dispatch() + static putBreadcrumb(crumb: string): Action { + return { type: BreadcrumbActions.PUT_BREADCRUMB, payload: { crumb } }; } } diff --git a/src/app/redux/actions/notification.actions.ts b/src/app/redux/actions/notification.actions.ts index c1e9662cbc..0f7c64027a 100644 --- a/src/app/redux/actions/notification.actions.ts +++ b/src/app/redux/actions/notification.actions.ts @@ -1,17 +1,17 @@ -import { Injectable } from "@angular/core"; -import { Store } from "@ngrx/store"; -import * as fromRoot from "../reducers/index"; -import { NotificationToast, NotificationToastType } from "../reducers/index"; +import { ActionBase } from './action.base'; +import { Action } from '../../shared/interfaces/action.interface'; -@Injectable() -export class NotificationActions { - public static get PUSH_NOTIFICATION(): string { return "PUSH_NOTIFICATION"; } +import { dispatch } from '@angular-redux/store'; - constructor(private store: Store) { - } +import { NotificationToast, NotificationToastType } from "../reducers/notification"; - public success(title: string, content: string) { - this.store.dispatch({ +export class NotificationActions extends ActionBase { + static readonly className: string = 'NotificationActions'; + static readonly PUSH_NOTIFICATION = NotificationActions.getActType('PUSH_NOTIFICATION'); + + @dispatch() + static success(title: string, content: string): Action { + return { type: NotificationActions.PUSH_NOTIFICATION, payload: { toast: { type: NotificationToastType.success, @@ -19,11 +19,12 @@ export class NotificationActions { content: content } } - }); + }; } - public alert(title: string, content: string) { - this.store.dispatch({ + @dispatch() + static alert(title: string, content: string) { + return { type: NotificationActions.PUSH_NOTIFICATION, payload: { toast: { type: NotificationToastType.alert, @@ -31,11 +32,12 @@ export class NotificationActions { content: content } } - }); + }; } - public info(title: string, content: string) { - this.store.dispatch({ + @dispatch() + static info(title: string, content: string) { + return { type: NotificationActions.PUSH_NOTIFICATION, payload: { toast: { type: NotificationToastType.info, @@ -43,11 +45,12 @@ export class NotificationActions { content: content } } - }); + }; } - public error(title: string, content: string) { - this.store.dispatch({ + @dispatch() + static error(title: string, content: string) { + return { type: NotificationActions.PUSH_NOTIFICATION, payload: { toast: { type: NotificationToastType.error, @@ -55,6 +58,6 @@ export class NotificationActions { content: content } } - }); + }; } } diff --git a/src/app/redux/actions/wizard.actions.ts b/src/app/redux/actions/wizard.actions.ts new file mode 100644 index 0000000000..ba05bae2cb --- /dev/null +++ b/src/app/redux/actions/wizard.actions.ts @@ -0,0 +1,67 @@ +import { FORM_CHANGED } from '@angular-redux/form'; +import { NodeCreateSpec } from './../../shared/entity/NodeEntity'; +import { CreateClusterModel } from 'app/shared/model/CreateClusterModel'; +import { CloudSpec } from './../../shared/entity/ClusterEntity'; +import { ActionBase } from './action.base'; +import { Action } from '../../shared/interfaces/action.interface'; + +import { dispatch } from '@angular-redux/store'; +import { CreateNodeModel } from 'app/shared/model/CreateNodeModel'; + +export class WizardActions extends ActionBase { + static readonly className: string = 'WizardActions'; + static readonly NEXT_STEP = WizardActions.getActType('NEXT_STEP'); + static readonly PREV_STEP = WizardActions.getActType('PREV_STEP'); + static readonly GO_TO_STEP = WizardActions.getActType('GO_TO_STEP'); + static readonly CLEAR_STORE = WizardActions.getActType('CLEAR_STORE'); + static readonly SET_CLOUD_SPEC = WizardActions.getActType('SET_CLOUD_SPEC'); + static readonly SET_CLUSTER_MODEL = WizardActions.getActType('SET_CLUSTER_MODEL'); + static readonly SET_NODE_MODEL = WizardActions.getActType('SET_NODE_MODEL'); + static readonly SET_VALIDATION = WizardActions.getActType('SET_VALIDATION'); + static readonly RESET_FORMS = WizardActions.getActType('RESET_FORMS'); + + @dispatch() + static nextStep(): Action { + return { type: WizardActions.NEXT_STEP }; + } + + @dispatch() + static prevStep(): Action { + return { type: WizardActions.PREV_STEP }; + } + + @dispatch() + static goToStep(step: number): Action { + return { type: WizardActions.GO_TO_STEP, payload: { step } }; + } + + @dispatch() + static clearStore(): Action { + return { type: WizardActions.CLEAR_STORE }; + } + + @dispatch() + static setCloudSpec(cloudSpec: CloudSpec): Action { + return { type: WizardActions.SET_CLOUD_SPEC, payload: { cloudSpec } }; + } + + @dispatch() + static setClusterModel(clusterModel: CreateClusterModel): Action { + return { type: WizardActions.SET_CLUSTER_MODEL, payload: { clusterModel } }; + } + + @dispatch() + static setNodeModel(nodeModel: CreateNodeModel): Action { + return { type: WizardActions.SET_NODE_MODEL, payload: { nodeModel } }; + } + + @dispatch() + static setValidation(formName: string, isValid: boolean): Action { + return { type: WizardActions.SET_VALIDATION, payload: { formName, isValid } }; + } + + @dispatch() + static resetForms(): Action { + return { type: WizardActions.RESET_FORMS }; + } +} diff --git a/src/app/redux/reducers/auth.ts b/src/app/redux/reducers/auth.ts index 660bd3986a..4a4d11d3f7 100644 --- a/src/app/redux/reducers/auth.ts +++ b/src/app/redux/reducers/auth.ts @@ -1,5 +1,6 @@ import { AuthActions } from './../actions/auth.actions'; -import { Action } from "@ngrx/store"; +import { Action } from "../../shared/interfaces/action.interface"; +import { Reducer } from 'redux'; export enum AuthStatus { LoggedIn = 0, @@ -12,13 +13,13 @@ export interface Auth { state: AuthStatus; } -const initialState: Auth = { +export const INITIAL_STATE: Auth = { profile: [], token: "", state: AuthStatus.LoggedOut }; -export function authReducer(state: Auth = initialState, action: Action): Auth { +export const AuthReducer: Reducer = (state: Auth = INITIAL_STATE, action: Action): Auth => { switch (action.type) { case AuthActions.LOGGED_IN: return Object.assign({}, state, { @@ -43,6 +44,3 @@ export function authReducer(state: Auth = initialState, action: Action): Auth { } } - -export const getProfile = (state: Auth) => state.profile; -export const getAuthState = (state: Auth) => state.state; diff --git a/src/app/redux/reducers/breadcrumb.ts b/src/app/redux/reducers/breadcrumb.ts index 97e804ecc9..d68cfb2dee 100644 --- a/src/app/redux/reducers/breadcrumb.ts +++ b/src/app/redux/reducers/breadcrumb.ts @@ -1,15 +1,16 @@ -import { Action } from "@ngrx/store"; +import { Action } from "../../shared/interfaces/action.interface"; +import { Reducer } from 'redux'; import { BreadcrumbActions } from "../actions/breadcrumb.actions"; export interface Breadcrumb { crumb: string; } -const initialState: Breadcrumb = { +export const INITIAL_STATE: Breadcrumb = { crumb: "", }; -export function breadcrumbReducer(state: Breadcrumb = initialState, action: Action): Breadcrumb { +export const BreadcrumbReducer: Reducer = (state: Breadcrumb = INITIAL_STATE, action: Action): Breadcrumb => { switch (action.type) { case BreadcrumbActions.PUT_BREADCRUMB: return Object.assign({}, state, { @@ -18,6 +19,6 @@ export function breadcrumbReducer(state: Breadcrumb = initialState, action: Acti default: return state; } -} +}; + -export const getCrumb = (state: Breadcrumb) => state.crumb; diff --git a/src/app/redux/reducers/index.ts b/src/app/redux/reducers/index.ts deleted file mode 100644 index 5bea76b47c..0000000000 --- a/src/app/redux/reducers/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -import {createSelector} from "reselect"; -import {storeFreeze} from "ngrx-store-freeze"; -import {storeLogger} from "ngrx-store-logger"; -import {compose, ComposeSignature} from "@ngrx/core/compose"; -import {combineReducers} from "@ngrx/store"; -import {environment} from "../../../environments/environment"; -import * as fromAuth from "./auth"; -import * as fromBreadcrumbs from "./breadcrumb"; -import * as fromNotification from "./notification"; - -export interface State { - auth: fromAuth.Auth; - breadcrumb: fromBreadcrumbs.Breadcrumb; - notification: fromNotification.Notification; -} - -// All reducers -const reducers = { - auth: fromAuth.authReducer, - breadcrumb: fromBreadcrumbs.breadcrumbReducer, - notification: fromNotification.notificationReducer -}; - -const developmentReducer = compose(storeFreeze, storeLogger(), combineReducers)(reducers); -const productionReducer = combineReducers(reducers); - -export function combinedReducer(state: any, action: any): ComposeSignature { - if ( environment.production) { - return productionReducer(state, action); - } else { - return developmentReducer(state, action); - } -} - -export const getAuthState = (state: State) => state.auth; -export const getAuthProfile = createSelector(getAuthState, fromAuth.getProfile); -export const getAuthLoggedIn = createSelector(getAuthState, fromAuth.getAuthState); - -export const getBreadcrumbState = (state: State) => state.breadcrumb; -export const getBreadcrumb = createSelector(getBreadcrumbState, fromBreadcrumbs.getCrumb); - -export const getNotificationState = (state: State) => state.notification; -export const getNotificationToast = createSelector(getNotificationState, fromNotification.getToast); - -export * from "./auth"; -export * from "./breadcrumb"; -export * from "./notification"; diff --git a/src/app/redux/reducers/notification.ts b/src/app/redux/reducers/notification.ts index bec8a5b7ac..9d1eacd70f 100644 --- a/src/app/redux/reducers/notification.ts +++ b/src/app/redux/reducers/notification.ts @@ -1,5 +1,6 @@ import { NotificationActions } from './../actions/notification.actions'; -import {Action} from "@ngrx/store"; +import { Action } from "../../shared/interfaces/action.interface"; +import { Reducer } from 'redux'; export enum NotificationToastType { success, @@ -20,11 +21,11 @@ export interface Notification { toast: NotificationToast; } -const initialState: Notification = { +export const INITIAL_STATE: Notification = { toast: null, }; -export function notificationReducer(state: Notification = initialState, action: Action): Notification { +export const NotificationReducer: Reducer = (state: Notification = INITIAL_STATE, action: Action): Notification => { switch (action.type) { case NotificationActions.PUSH_NOTIFICATION: return Object.assign({}, state, { @@ -33,6 +34,5 @@ export function notificationReducer(state: Notification = initialState, action: default: return state; } -} +}; -export const getToast = (state: Notification) => state.toast; diff --git a/src/app/redux/reducers/wizard.ts b/src/app/redux/reducers/wizard.ts new file mode 100644 index 0000000000..a7e7f2278d --- /dev/null +++ b/src/app/redux/reducers/wizard.ts @@ -0,0 +1,201 @@ +import { CreateNodeModel } from './../../shared/model/CreateNodeModel'; +import { AWSNodeSpec } from './../../shared/entity/node/AWSNodeSpec'; +import { CloudSpec } from './../../shared/entity/ClusterEntity'; +import { CreateClusterModel } from './../../shared/model/CreateClusterModel'; +import { DataCenterEntity } from './../../shared/entity/DatacenterEntity'; +import { Action } from "../../shared/interfaces/action.interface"; +import { Reducer } from 'redux'; +import { BreadcrumbActions } from "../actions/breadcrumb.actions"; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import { FORM_CHANGED } from '@angular-redux/form'; +import { DigitaloceanCloudSpec } from 'app/shared/entity/cloud/DigitialoceanCloudSpec'; +import { AWSCloudSpec } from 'app/shared/entity/cloud/AWSCloudSpec'; +import { OpenstackCloudSpec } from 'app/shared/entity/cloud/OpenstackCloudSpec'; +import { NodeCreateSpec } from 'app/shared/entity/NodeEntity'; +import { DigitaloceanNodeSpec } from 'app/shared/entity/node/DigitialoceanNodeSpec'; +import { OpenstackNodeSpec } from 'app/shared/entity/node/OpenstackNodeSpec'; +import { cloneDeep } from 'lodash'; + +const formOnStep: Map = new Map([ + [0, ['clusterNameForm']], + [1, ['setProviderForm']], + [2, ['setDatacenterForm']], + [3, ['awsClusterForm', 'awsNodeForm', + 'digitalOceanClusterForm', 'digitalOceanNodeForm', + 'openstackClusterForm', 'openstackNodeForm', 'sshKeyForm']] +]); + +export interface Wizard { + step: number; + valid: Map; + clusterNameForm: { + name: string; + }; + setProviderForm: { + provider: string; + }; + setDatacenterForm: { + datacenter: DataCenterEntity; + }; + awsClusterForm: { + accessKeyId: string; + secretAccessKey: string; + vpcId: string; + subnetId: string; + aws_cas: boolean; + routeTableId: string; + }; + awsNodeForm: { + node_count: number; + node_size: string; + root_size: number; + ami: string; + aws_nas: boolean; + }; + digitalOceanClusterForm: { + access_token: string; + }; + digitalOceanNodeForm: { + node_count: number; + node_size: string; + }; + openstackClusterForm: { + os_domain: string; + os_tenant: string; + os_username: string; + os_password: string; + os_network: string; + os_security_groups: string; + os_floating_ip_pool: string; + os_cas: boolean; + }; + openstackNodeForm: { + node_count: number; + node_size: string; + os_node_image: string; + }; + sshKeyForm: { + ssh_keys: string[]; + }; + cloudSpec: CloudSpec; + clusterModel: CreateClusterModel; + nodeModel: CreateNodeModel; +}; + +export const INITIAL_STATE: Wizard = { + step: 0, + valid: new Map(), + clusterNameForm: { + name: '' + }, + setProviderForm: { + provider: '' + }, + setDatacenterForm: { + datacenter: null + }, + awsClusterForm: { + accessKeyId: '', + secretAccessKey: '', + vpcId: '', + subnetId: '', + routeTableId: '', + aws_cas: false + }, + awsNodeForm: { + node_count: 3, + node_size: 't2.medium', + root_size: 20, + ami: '', + aws_nas: false + }, + digitalOceanClusterForm: { + access_token: '' + }, + digitalOceanNodeForm: { + node_count: 3, + node_size: '' + }, + openstackClusterForm: { + os_domain: 'Default', + os_tenant: '', + os_username: '', + os_password: '', + os_network: '', + os_security_groups: '', + os_floating_ip_pool: '', + os_cas: false + }, + openstackNodeForm: { + node_count: 3, + node_size: 'm1.medium', + os_node_image: '' + }, + sshKeyForm: { + ssh_keys: [] + }, + cloudSpec: null, + clusterModel: null, + nodeModel: null +}; + +export const WizardReducer: Reducer = (state: Wizard = INITIAL_STATE, action: Action): Wizard => { + switch (action.type) { + case WizardActions.NEXT_STEP: { + return Object.assign({}, state, { step: state.step + 1 }); + } + case WizardActions.PREV_STEP: { + return Object.assign({}, state, { step: state.step - 1 }); + } + case WizardActions.GO_TO_STEP: { + return Object.assign({}, state, { step: action.payload.step }); + } + case FORM_CHANGED: { + const valid = new Map(state.valid); + const path = action.payload.path; + + valid.set(path[path.length - 1], action.payload.valid); + return Object.assign({}, state, { valid }); + } + case WizardActions.CLEAR_STORE: { + const initialState = Object.assign({}, INITIAL_STATE); + return Object.assign({}, state, initialState); + } + case WizardActions.SET_CLOUD_SPEC: { + const cloudSpec = action.payload.cloudSpec; + return Object.assign({}, state, { cloudSpec }); + } + case WizardActions.SET_CLUSTER_MODEL: { + const clusterModel = action.payload.clusterModel; + return Object.assign({}, state, { clusterModel }); + } + case WizardActions.SET_NODE_MODEL: { + const nodeModel = action.payload.nodeModel; + return Object.assign({}, state, { nodeModel }); + } + case WizardActions.SET_VALIDATION: { + const formName = action.payload.formName; + const valid = new Map(state.valid); + valid.set(formName, action.payload.isValid); + + return Object.assign({}, state, { valid }); + } + case WizardActions.RESET_FORMS: { + const intialState = cloneDeep(INITIAL_STATE); + const nextState = Object.assign({}, state); + nextState.valid = new Map(state.valid); + + formOnStep.forEach((value, key) => { + if (key > state.step) { + formOnStep.get(key).forEach(form => { + nextState[form] = intialState[form]; + nextState.valid.set(form, false); + }); + } + }); + + return Object.assign({}, state, nextState); + } + } + return state; +}; diff --git a/src/app/redux/store.ts b/src/app/redux/store.ts new file mode 100644 index 0000000000..cb1c6d6c7e --- /dev/null +++ b/src/app/redux/store.ts @@ -0,0 +1,36 @@ +import { combineReducers } from 'redux'; +import { composeReducers, defaultFormReducer } from '@angular-redux/form'; + +import { Auth, AuthReducer, INITIAL_STATE as INITIAL_STATE_AUTH } from './reducers/auth'; +import { Breadcrumb, BreadcrumbReducer, INITIAL_STATE as INITIAL_STATE_BREADCRUNB } from './reducers/breadcrumb'; +import { Notification, NotificationReducer, INITIAL_STATE as INITIAL_STATE_NOTIFICATION } from './reducers/notification'; +import { Wizard, WizardReducer, INITIAL_STATE as INITIAL_STATE_WIZARD } from './reducers/wizard'; + + + +/* Store Interface */ +export interface Store { + auth: Auth; + breadcrumb: Breadcrumb; + notification: Notification; + wizard: Wizard; +} + +/* Store Initial State */ +export const INITIAL_STATE: Store = { + auth: INITIAL_STATE_AUTH, + breadcrumb: INITIAL_STATE_BREADCRUNB, + notification: INITIAL_STATE_NOTIFICATION, + wizard: INITIAL_STATE_WIZARD +}; + +/* Combine State Reducers */ +export const StoreReducer = composeReducers( + defaultFormReducer(), + combineReducers({ + auth: AuthReducer, + breadcrumb: BreadcrumbReducer, + notification: NotificationReducer, + wizard: WizardReducer + }) +); diff --git a/src/app/shared/interfaces/action.interface.ts b/src/app/shared/interfaces/action.interface.ts new file mode 100644 index 0000000000..77580b15a4 --- /dev/null +++ b/src/app/shared/interfaces/action.interface.ts @@ -0,0 +1,5 @@ +import { Action as RAction } from 'redux'; + +export interface Action extends RAction { + payload?: any; +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 249fcb9d55..4219c1ad71 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -28,6 +28,7 @@ import { MdProgressBarModule } from '@angular/material'; import 'hammerjs'; +import { NgReduxFormModule } from '@angular-redux/form'; const modules: Array = [ @@ -55,7 +56,8 @@ const modules: Array = [ OverlayModule, MdSlideToggleModule, MdProgressBarModule, - ClipboardModule + ClipboardModule, + NgReduxFormModule ]; @NgModule({ diff --git a/src/app/sshkey/add-ssh-key/add-ssh-key.component.spec.ts b/src/app/sshkey/add-ssh-key/add-ssh-key.component.spec.ts index 43c635e30e..ff46456391 100644 --- a/src/app/sshkey/add-ssh-key/add-ssh-key.component.spec.ts +++ b/src/app/sshkey/add-ssh-key/add-ssh-key.component.spec.ts @@ -6,8 +6,6 @@ import { MaterialModule } from '@angular/material'; import {FormBuilder, ReactiveFormsModule, FormsModule} from "@angular/forms"; import {HttpModule, BaseRequestOptions, Http, XHRBackend, Response, ResponseOptions} from "@angular/http"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../redux/reducers/index"; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {Auth} from "../../core/services"; @@ -25,7 +23,6 @@ describe('AddSshKeyComponent', () => { FormsModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), MaterialModule ], declarations: [ AddSshKeyComponent ], diff --git a/src/app/sshkey/add-ssh-key/add-ssh-key.component.ts b/src/app/sshkey/add-ssh-key/add-ssh-key.component.ts index 427cc62131..f961ea61a6 100644 --- a/src/app/sshkey/add-ssh-key/add-ssh-key.component.ts +++ b/src/app/sshkey/add-ssh-key/add-ssh-key.component.ts @@ -19,8 +19,7 @@ export class AddSshKeyComponent implements OnInit { constructor( private api: ApiService, private formBuilder: FormBuilder, - public inputValidationService: InputValidationService, - private notificationActions: NotificationActions + public inputValidationService: InputValidationService ) {} ngOnInit() { @@ -36,7 +35,7 @@ export class AddSshKeyComponent implements OnInit { this.api.addSSHKey(new SSHKeyEntity(name, null, key)) .subscribe(result => { - this.notificationActions.success("Success", `SSH key ${name} added successfully`); + NotificationActions.success("Success", `SSH key ${name} added successfully`); this.addSSHKeyForm.reset(); this.syncSshKey.emit(); }); diff --git a/src/app/sshkey/list-ssh-key/list-ssh-key.component.spec.ts b/src/app/sshkey/list-ssh-key/list-ssh-key.component.spec.ts index dc259b6135..ad5ab4128f 100644 --- a/src/app/sshkey/list-ssh-key/list-ssh-key.component.spec.ts +++ b/src/app/sshkey/list-ssh-key/list-ssh-key.component.spec.ts @@ -8,8 +8,6 @@ import {ApiService} from "app/core/services/api/api.service"; import {BrowserModule} from "@angular/platform-browser"; import {HttpModule} from "@angular/http"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../redux/reducers/index"; describe('ListSshKeyComponent', () => { let component: ListSshKeyComponent; @@ -21,7 +19,6 @@ describe('ListSshKeyComponent', () => { BrowserModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), MaterialModule ], declarations: [ ListSshKeyComponent ], diff --git a/src/app/sshkey/list-ssh-key/list-ssh-key.component.ts b/src/app/sshkey/list-ssh-key/list-ssh-key.component.ts index 1d05c5f8ff..565b616949 100644 --- a/src/app/sshkey/list-ssh-key/list-ssh-key.component.ts +++ b/src/app/sshkey/list-ssh-key/list-ssh-key.component.ts @@ -11,7 +11,7 @@ import {SSHKeyEntity} from "../../shared/entity/SSHKeyEntity"; export class ListSshKeyComponent implements OnInit { @Input() sshKeys: Array; - constructor(private api: ApiService, private notificationActions: NotificationActions) {} + constructor(private api: ApiService) {} ngOnInit() { } @@ -19,7 +19,7 @@ export class ListSshKeyComponent implements OnInit { public deleteSSHKey(key: SSHKeyEntity): void { this.api.deleteSSHKey(key.metadata.name).subscribe(() => { this.sshKeys.splice(this.sshKeys.indexOf(key), 1); - this.notificationActions.success("Success", `SSH key ${name} deleted.`); + NotificationActions.success("Success", `SSH key ${name} deleted.`); }); } diff --git a/src/app/sshkey/sshkey.component.spec.ts b/src/app/sshkey/sshkey.component.spec.ts index 78b8c6d4bb..39cc000571 100644 --- a/src/app/sshkey/sshkey.component.spec.ts +++ b/src/app/sshkey/sshkey.component.spec.ts @@ -4,8 +4,6 @@ import {ApiService} from "app/core/services/api/api.service"; import {HttpModule} from "@angular/http"; import {Auth} from "../core/services"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../redux/reducers/index"; import { MaterialModule } from '@angular/material'; import { SshkeyComponent } from "./sshkey.component"; import { ListSshKeyComponent } from './list-ssh-key/list-ssh-key.component'; @@ -25,7 +23,6 @@ describe("SshkeyComponent", () => { ReactiveFormsModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), MaterialModule ], declarations: [ diff --git a/src/app/sshkey/sshkey.component.ts b/src/app/sshkey/sshkey.component.ts index cc5342da0f..6517426cad 100644 --- a/src/app/sshkey/sshkey.component.ts +++ b/src/app/sshkey/sshkey.component.ts @@ -1,4 +1,3 @@ -import { NotificationActions } from 'app/redux/actions/notification.actions'; import {Component, OnInit} from "@angular/core"; import {ApiService} from "app/core/services/api/api.service"; import {SSHKeyEntity} from "../shared/entity/SSHKeyEntity"; diff --git a/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.spec.ts b/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.spec.ts index ecdf174500..140bed137c 100644 --- a/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.spec.ts +++ b/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.spec.ts @@ -7,8 +7,6 @@ import {MaterialModule} from '@angular/material'; import {FormBuilder, ReactiveFormsModule, FormsModule} from "@angular/forms"; import {HttpModule, BaseRequestOptions, Http, XHRBackend, Response, ResponseOptions} from "@angular/http"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../../redux/reducers/index"; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {Auth} from "../../core/services"; @@ -26,7 +24,6 @@ describe('AddSshKeyModalComponent', () => { FormsModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), MaterialModule ], declarations: [ AddSshKeyModalComponent ], diff --git a/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.ts b/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.ts index 425f781ee4..f372c0b74c 100644 --- a/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.ts +++ b/src/app/wizard/add-ssh-key-modal/add-ssh-key-modal.component.ts @@ -19,7 +19,6 @@ export class AddSshKeyModalComponent implements OnInit { constructor( private api: ApiService, private formBuilder: FormBuilder, - private notificationActions: NotificationActions, private dialogRef: MdDialogRef, public inputValidationService: InputValidationService ) {} @@ -38,7 +37,7 @@ export class AddSshKeyModalComponent implements OnInit { this.api.addSSHKey(new SSHKeyEntity(name, null, key)) .subscribe( result => { - this.notificationActions.success("Success", `SSH key ${name} added successfully`); + NotificationActions.success("Success", `SSH key ${name} added successfully`); //this.newSshKey.emit(result.metadata.name) this.dialogRef.close(result); }); diff --git a/src/app/wizard/navigation-buttons/navigation-buttons.component.html b/src/app/wizard/navigation-buttons/navigation-buttons.component.html index 255f6382b5..4061a2c403 100644 --- a/src/app/wizard/navigation-buttons/navigation-buttons.component.html +++ b/src/app/wizard/navigation-buttons/navigation-buttons.component.html @@ -15,7 +15,7 @@ continue to review settings - + create cluster diff --git a/src/app/wizard/navigation-buttons/navigation-buttons.component.ts b/src/app/wizard/navigation-buttons/navigation-buttons.component.ts index da2d10435f..e04a3373f9 100644 --- a/src/app/wizard/navigation-buttons/navigation-buttons.component.ts +++ b/src/app/wizard/navigation-buttons/navigation-buttons.component.ts @@ -1,25 +1,77 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; +import { select, NgRedux } from '@angular-redux/store'; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import {Component, OnInit, OnDestroy} from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-navigation-buttons', templateUrl: './navigation-buttons.component.html', styleUrls: ['./navigation-buttons.component.scss'] }) -export class NavigationButtonsComponent implements OnInit { +export class NavigationButtonsComponent implements OnInit, OnDestroy { - @Input() step: number; - @Input() nextStep: boolean; - @Output() syncStep = new EventEmitter(); + public nextStep: boolean; + private subscriptions: Subscription[] = []; + - constructor() { } + @select(['wizard', 'step']) step$: Observable; + public step: number; - ngOnInit() { } + @select(['wizard', 'valid']) valid$: Observable; + + constructor(private ngRedux: NgRedux) { } + + ngOnInit() { + let sub = this.step$.subscribe(step => { + this.step = step; + this.nextStep = this.canGotoStep(); + }); + this.subscriptions.push(sub); + + let sub2 = this.valid$.subscribe(valid => { + this.nextStep = this.canGotoStep(); + }); + this.subscriptions.push(sub2); + } + + public canGotoStep() { + const reduxStore = this.ngRedux.getState(); + const valid = reduxStore.wizard.valid; + switch (this.step) { + case 0: + return valid.get('clusterNameForm'); + case 1: + return valid.get('setProviderForm'); + case 2: + return valid.get('setDatacenterForm'); + case 3: + if (!valid.get('sshKeyForm')) { + return false; + } else if ((valid.get('awsClusterForm') || valid.get('digitalOceanClusterForm') || valid.get('openstackClusterForm') ) && + (valid.get('awsNodeForm') || valid.get('digitalOceanNodeForm') || valid.get('openstackNodeForm'))) { + return true; + } else { + return false; + } + case 4: + return true; + default: + return false; + } + } public stepBack() { - this.syncStep.emit(this.step - 1); + WizardActions.prevStep(); } public stepForward() { - this.syncStep.emit(this.step + 1); + WizardActions.nextStep(); + } + + public ngOnDestroy(): void { + this.subscriptions.forEach(sub => { + sub.unsubscribe(); + }); } } diff --git a/src/app/wizard/progress/progress.component.ts b/src/app/wizard/progress/progress.component.ts index 092f687cd5..dceff913d0 100644 --- a/src/app/wizard/progress/progress.component.ts +++ b/src/app/wizard/progress/progress.component.ts @@ -1,25 +1,32 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; +import { Observable } from 'rxjs'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { select } from '@angular-redux/store/lib/src/decorators/select'; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-progress', templateUrl: 'progress.component.html', styleUrls: ['progress.component.scss'] }) -export class ProgressComponent implements OnInit { +export class ProgressComponent implements OnInit, OnDestroy { - @Input() step: number; - @Output() syncStep = new EventEmitter(); - public currentStep: number; + private subscription: Subscription; - constructor() { } + @select(['wizard', 'step']) step$: Observable; + public step: number; - ngOnInit() { } + constructor() { } + ngOnInit() { + this.subscription = this.step$.subscribe(step => { + this.step = step; + }); + } public gotoStep(clickStep: number) { - if(this.step >= clickStep) { - this.currentStep = clickStep; - this.syncStep.emit(this.currentStep); + if (this.step >= clickStep) { + WizardActions.goToStep(clickStep); } } @@ -45,4 +52,8 @@ export class ProgressComponent implements OnInit { return curser; } + public ngOnDestroy(): void { + this.subscription.unsubscribe(); + } + } diff --git a/src/app/wizard/provider/cluster/aws/aws.component.html b/src/app/wizard/provider/cluster/aws/aws.component.html index ba61393614..583b8c3606 100644 --- a/src/app/wizard/provider/cluster/aws/aws.component.html +++ b/src/app/wizard/provider/cluster/aws/aws.component.html @@ -1,15 +1,15 @@ -
+

We need a AWS Access Key and Secret Access Key with write access. You can create one here.

- + Access Key ID must be between 16 and 32 characters long. - + Secret access key is required. @@ -21,6 +21,6 @@ ng-trim="true" placeholder="Subnet ID (optional):" autocomplete="off" />
- Extend Provider settings + Extend Provider settings
diff --git a/src/app/wizard/provider/cluster/aws/aws.component.ts b/src/app/wizard/provider/cluster/aws/aws.component.ts index 34fb78d1cf..788ee8a7d9 100644 --- a/src/app/wizard/provider/cluster/aws/aws.component.ts +++ b/src/app/wizard/provider/cluster/aws/aws.component.ts @@ -1,9 +1,10 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {AWSCloudSpec} from "../../../../shared/entity/cloud/AWSCloudSpec"; - -import {InputValidationService} from '../../../../core/services'; -import {CloudSpec} from "../../../../shared/entity/ClusterEntity"; +import { NgRedux } from '@angular-redux/store'; +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { AWSCloudSpec } from "../../../../shared/entity/cloud/AWSCloudSpec"; +import { InputValidationService } from '../../../../core/services'; +import { CloudSpec } from "../../../../shared/entity/ClusterEntity"; +import { WizardActions } from 'app/redux/actions/wizard.actions'; @Component({ @@ -13,36 +14,41 @@ import {CloudSpec} from "../../../../shared/entity/ClusterEntity"; }) export class AWSClusterComponent implements OnInit { public awsClusterForm: FormGroup; - public cloudSpec: AWSCloudSpec; - @Input() cloud: AWSCloudSpec; - - constructor(private formBuilder: FormBuilder, public inputValidationService: InputValidationService) { } - @Output() syncProviderCloudSpec = new EventEmitter(); - @Output() syncProviderCloudSpecValid = new EventEmitter(); + constructor(private formBuilder: FormBuilder, + public inputValidationService: InputValidationService, + private ngRedux: NgRedux) { } ngOnInit() { + const reduxStore = this.ngRedux.getState(); + const clusterForm = reduxStore.wizard.awsClusterForm; + this.awsClusterForm = this.formBuilder.group({ - accessKeyId: [this.cloud.accessKeyId, [Validators.required, Validators.minLength(16), Validators.maxLength(32)]], - secretAccessKey: [this.cloud.secretAccessKey, [Validators.required, Validators.minLength(2)]], - vpcId: [this.cloud.vpcId], - subnetId: [this.cloud.subnetId], - routeTableId: [this.cloud.routeTableId], - aws_cas: [false] + accessKeyId: [clusterForm.accessKeyId, [Validators.required, Validators.minLength(16), Validators.maxLength(32)]], + secretAccessKey: [clusterForm.secretAccessKey, [Validators.required, Validators.minLength(2)]], + vpcId: [clusterForm.vpcId], + subnetId: [clusterForm.subnetId], + routeTableId: [clusterForm.routeTableId], + aws_cas: [clusterForm.aws_cas] }); } - public onChange(){ - this.cloudSpec = new AWSCloudSpec( + public onChange() { + const awsCloudSpec = new AWSCloudSpec( this.awsClusterForm.controls["accessKeyId"].value, this.awsClusterForm.controls["secretAccessKey"].value, this.awsClusterForm.controls["vpcId"].value, this.awsClusterForm.controls["subnetId"].value, this.awsClusterForm.controls["routeTableId"].value, "", - ) + ); + + const ruduxStore = this.ngRedux.getState(); + const wizard = ruduxStore.wizard; + const region = wizard.setDatacenterForm.datacenter.metadata.name; - this.syncProviderCloudSpec.emit(this.cloudSpec); - this.syncProviderCloudSpecValid.emit(this.awsClusterForm.valid); + WizardActions.setCloudSpec( + new CloudSpec(region, null, awsCloudSpec, null, null, null) + ); } } diff --git a/src/app/wizard/provider/cluster/cluster.component.html b/src/app/wizard/provider/cluster/cluster.component.html index 43ba58fc8c..12ec8bdfa3 100644 --- a/src/app/wizard/provider/cluster/cluster.component.html +++ b/src/app/wizard/provider/cluster/cluster.component.html @@ -1,12 +1,11 @@ - - - + + + + + + + + diff --git a/src/app/wizard/provider/cluster/cluster.component.ts b/src/app/wizard/provider/cluster/cluster.component.ts index 2c7ea90aab..7379198e30 100644 --- a/src/app/wizard/provider/cluster/cluster.component.ts +++ b/src/app/wizard/provider/cluster/cluster.component.ts @@ -1,65 +1,29 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {CloudSpec, ClusterSpec} from "../../../shared/entity/ClusterEntity"; -import {NodeProvider} from "../../../shared/model/NodeProviderConstants"; +import { Observable } from 'rxjs/Rx'; +import { select } from '@angular-redux/store'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-provider-cluster', templateUrl: './cluster.component.html', styleUrls: ['./cluster.component.scss'] }) -export class ProviderClusterComponent implements OnInit { +export class ProviderClusterComponent implements OnInit, OnDestroy { - constructor() { } - - public cloudSpec: CloudSpec; - - @Input() provider: string; - @Input() region: string; - @Input() cloud: CloudSpec; - @Output() syncCloudSpec = new EventEmitter(); - @Output() syncCloudSpecValid = new EventEmitter(); - - ngOnInit() { } - - public setCloud(providerCloudSpec) { + private subscription: Subscription; - if (this.provider === NodeProvider.AWS) { + @select(['wizard', 'setProviderForm', 'provider']) provider$: Observable; + public provider: string; - this.cloudSpec = new CloudSpec( - this.region, - null, - providerCloudSpec, - null, - null, - null, - ) - - } else if (this.provider === NodeProvider.DIGITALOCEAN) { - - this.cloudSpec = new CloudSpec( - this.region, - providerCloudSpec, - null, - null, - null, - null, - ) - } else if (this.provider === NodeProvider.OPENSTACK) { - this.cloudSpec = new CloudSpec( - this.region, - null, - null, - null, - providerCloudSpec, - null, - ) - } + constructor() { } - this.syncCloudSpec.emit(this.cloudSpec); + ngOnInit() { + this.subscription = this.provider$.subscribe((provider: string) => { + provider && (this.provider = provider); + }); } - public valid(value) { - this.syncCloudSpecValid.emit(value); + public ngOnDestroy(): void { + this.subscription.unsubscribe(); } - } diff --git a/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.html b/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.html index ad7f7abce6..90ddbee348 100644 --- a/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.html +++ b/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.html @@ -1,10 +1,10 @@ -
+

We need a DigitalOcean Personal Access Token. You can create one here.

- + DigitalOcean Personal Access Tokens must be exactly 64 characters long.
diff --git a/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.ts b/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.ts index 4c57cee84e..0cdd8ccded 100644 --- a/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.ts +++ b/src/app/wizard/provider/cluster/digitalocean/digitalocean.component.ts @@ -1,8 +1,11 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {Validators, FormBuilder, FormGroup} from "@angular/forms"; -import {DigitaloceanCloudSpec} from "../../../../shared/entity/cloud/DigitialoceanCloudSpec"; +import { NgRedux } from '@angular-redux/store'; +import { CloudSpec } from './../../../../shared/entity/ClusterEntity'; +import { Component, OnInit } from '@angular/core'; +import { Validators, FormBuilder, FormGroup } from "@angular/forms"; +import { DigitaloceanCloudSpec } from "../../../../shared/entity/cloud/DigitialoceanCloudSpec"; -import {InputValidationService} from '../../../../core/services'; +import { InputValidationService } from '../../../../core/services'; +import { WizardActions } from 'app/redux/actions/wizard.actions'; @Component({ selector: 'kubermatic-cluster-digitalocean', @@ -11,26 +14,30 @@ import {InputValidationService} from '../../../../core/services'; }) export class DigitaloceanClusterComponent implements OnInit { public digitalOceanClusterForm: FormGroup; - public cloudSpec: DigitaloceanCloudSpec; - constructor(private formBuilder: FormBuilder, public inputValidationService: InputValidationService) { } - - @Input() cloud: DigitaloceanCloudSpec; - @Output() syncProviderCloudSpec = new EventEmitter(); - @Output() syncProviderCloudSpecValid = new EventEmitter(); + constructor(private formBuilder: FormBuilder, + public inputValidationService: InputValidationService, + private ngRedux: NgRedux) { } ngOnInit() { + const reduxStore = this.ngRedux.getState(); + const clusterForm = reduxStore.wizard.digitalOceanClusterForm; + this.digitalOceanClusterForm = this.formBuilder.group({ - access_token: [this.cloud.token, [Validators.required, Validators.minLength(64), Validators.maxLength(64), + access_token: [clusterForm.access_token, [Validators.required, Validators.minLength(64), Validators.maxLength(64), Validators.pattern("[a-z0-9]+")]], }); } - public onChange(){ - this.cloudSpec = new DigitaloceanCloudSpec(this.digitalOceanClusterForm.controls["access_token"].value); + public onChange() { + const doCloudSpec = new DigitaloceanCloudSpec(this.digitalOceanClusterForm.controls["access_token"].value); + const ruduxStore = this.ngRedux.getState(); + const wizard = ruduxStore.wizard; + const region = wizard.setDatacenterForm.datacenter.metadata.name; - this.syncProviderCloudSpec.emit(this.cloudSpec); - this.syncProviderCloudSpecValid.emit(this.digitalOceanClusterForm.valid); + WizardActions.setCloudSpec( + new CloudSpec(region, doCloudSpec, null, null, null, null) + ); } } diff --git a/src/app/wizard/provider/cluster/openstack/openstack.component.html b/src/app/wizard/provider/cluster/openstack/openstack.component.html index b1435101af..04f4122624 100644 --- a/src/app/wizard/provider/cluster/openstack/openstack.component.html +++ b/src/app/wizard/provider/cluster/openstack/openstack.component.html @@ -1,22 +1,22 @@ -
+ - + Domain is required. - + Tenant/Project is required. - + Username is required. - + Password is required. @@ -35,6 +35,6 @@
- Extend Provider settings + Extend Provider settings
diff --git a/src/app/wizard/provider/cluster/openstack/openstack.component.ts b/src/app/wizard/provider/cluster/openstack/openstack.component.ts index ca940265ef..cf8d7d4f1d 100644 --- a/src/app/wizard/provider/cluster/openstack/openstack.component.ts +++ b/src/app/wizard/provider/cluster/openstack/openstack.component.ts @@ -1,8 +1,10 @@ -import {Component, OnInit, EventEmitter, Input, Output} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {OpenstackCloudSpec} from "../../../../shared/entity/cloud/OpenstackCloudSpec"; - -import {InputValidationService} from '../../../../core/services'; +import { NgRedux } from '@angular-redux/store'; +import { CloudSpec } from './../../../../shared/entity/ClusterEntity'; +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { OpenstackCloudSpec } from "../../../../shared/entity/cloud/OpenstackCloudSpec"; +import { InputValidationService } from '../../../../core/services'; +import { WizardActions } from 'app/redux/actions/wizard.actions'; @Component({ selector: 'kubermatic-cluster-openstack', @@ -11,28 +13,29 @@ import {InputValidationService} from '../../../../core/services'; }) export class OpenstackClusterComponent implements OnInit { public osClusterForm: FormGroup; - public cloudSpec: OpenstackCloudSpec; - constructor(private formBuilder: FormBuilder, public inputValidationService: InputValidationService) { } - @Input() cloud: OpenstackCloudSpec; - @Output() syncProviderCloudSpec = new EventEmitter(); - @Output() syncProviderCloudSpecValid = new EventEmitter(); + constructor(private formBuilder: FormBuilder, + public inputValidationService: InputValidationService, + private ngRedux: NgRedux) { } ngOnInit() { + const reduxStore = this.ngRedux.getState(); + const clusterForm = reduxStore.wizard.openstackClusterForm; + this.osClusterForm = this.formBuilder.group({ - os_tenant: [this.cloud.tenant, [Validators.required]], - os_domain: [this.cloud.domain, [Validators.required]], - os_username: [this.cloud.username, [Validators.required]], - os_password: [this.cloud.password, [Validators.required]], - os_network: [this.cloud.network], - os_security_groups: [this.cloud.securityGroups], - os_floating_ip_pool: [this.cloud.floatingIpPool], - os_cas: [false] + os_tenant: [clusterForm.os_tenant, [Validators.required]], + os_domain: [clusterForm.os_domain, [Validators.required]], + os_username: [clusterForm.os_username, [Validators.required]], + os_password: [clusterForm.os_password, [Validators.required]], + os_network: [clusterForm.os_network], + os_security_groups: [clusterForm.os_security_groups], + os_floating_ip_pool: [clusterForm.os_floating_ip_pool], + os_cas: [clusterForm.os_cas] }); } - public onChange (){ - this.cloudSpec = new OpenstackCloudSpec( + public onChange() { + const osCloudSpec = new OpenstackCloudSpec( this.osClusterForm.controls["os_username"].value, this.osClusterForm.controls["os_password"].value, this.osClusterForm.controls["os_tenant"].value, @@ -40,9 +43,14 @@ export class OpenstackClusterComponent implements OnInit { this.osClusterForm.controls["os_network"].value, this.osClusterForm.controls["os_security_groups"].value, this.osClusterForm.controls["os_floating_ip_pool"].value, - ) + ); + + const ruduxStore = this.ngRedux.getState(); + const wizard = ruduxStore.wizard; + const region = wizard.setDatacenterForm.datacenter.metadata.name; - this.syncProviderCloudSpec.emit(this.cloudSpec); - this.syncProviderCloudSpecValid.emit(this.osClusterForm.valid); + WizardActions.setCloudSpec( + new CloudSpec(region, null, null, null, osCloudSpec, null) + ); } } diff --git a/src/app/wizard/provider/node/aws/aws.component.html b/src/app/wizard/provider/node/aws/aws.component.html index 7dd2cfe99a..665d4b8c12 100644 --- a/src/app/wizard/provider/node/aws/aws.component.html +++ b/src/app/wizard/provider/node/aws/aws.component.html @@ -1,10 +1,10 @@ -
+ - +
- + Please add your AWS credentials first! {{size}} @@ -13,14 +13,14 @@
- +
- Extend Node settings + Extend Node settings

You need to accept the Software Terms of CoreOS. For this please click on the link, select "manual launch" & click on "Accept Software Terms". diff --git a/src/app/wizard/provider/node/aws/aws.component.ts b/src/app/wizard/provider/node/aws/aws.component.ts index ffd1cbd997..49ddfe07cf 100644 --- a/src/app/wizard/provider/node/aws/aws.component.ts +++ b/src/app/wizard/provider/node/aws/aws.component.ts @@ -1,10 +1,11 @@ -import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core'; -import {Validators, FormBuilder, FormGroup} from "@angular/forms"; -import {NodeInstanceFlavors} from "../../../../shared/model/NodeProviderConstants"; -import {NodeCreateSpec} from "../../../../shared/entity/NodeEntity"; -import {AWSNodeSpec} from "../../../../shared/entity/node/AWSNodeSpec"; -import {CreateNodeModel} from "../../../../shared/model/CreateNodeModel"; -import {InputValidationService} from '../../../../core/services'; +import { NgRedux } from '@angular-redux/store/lib/src/components/ng-redux'; +import {Component, OnInit } from '@angular/core'; +import { Validators, FormBuilder, FormGroup } from "@angular/forms"; +import { NodeInstanceFlavors } from "../../../../shared/model/NodeProviderConstants"; +import { NodeCreateSpec } from "../../../../shared/entity/NodeEntity"; +import { AWSNodeSpec } from "../../../../shared/entity/node/AWSNodeSpec"; +import { CreateNodeModel } from "../../../../shared/model/CreateNodeModel"; +import { WizardActions } from 'app/redux/actions/wizard.actions'; @Component({ selector: 'kubermatic-node-aws', @@ -17,20 +18,26 @@ export class AwsNodeComponent implements OnInit { public nodeSpec: NodeCreateSpec; public nodeInstances: number; - constructor(private formBuilder: FormBuilder, public inputValidationService: InputValidationService) { } - - @Input() node: CreateNodeModel; - @Output() syncNodeModel = new EventEmitter(); - @Output() syncNodeSpecValid = new EventEmitter(); + constructor(private formBuilder: FormBuilder, + private ngRedux: NgRedux) { } ngOnInit() { + const reduxStore = this.ngRedux.getState(); + const nodeForm = reduxStore.wizard.awsNodeForm; + this.awsNodeForm = this.formBuilder.group({ - node_count: [this.node.instances, [Validators.required, Validators.min(1)]], - node_size: [this.node.spec.aws.instance_type, [Validators.required]], - root_size: [this.node.spec.aws.root_size, [Validators.required, Validators.min(10), Validators.max(16000)]], - ami: [this.node.spec.aws.ami], - aws_nas: [false] + node_count: [nodeForm.node_count, [Validators.required, Validators.min(1)]], + node_size: [nodeForm.node_size, [Validators.required]], + root_size: [nodeForm.root_size, [Validators.required, Validators.min(10), Validators.max(16000)]], + ami: [nodeForm.ami], + aws_nas: [nodeForm.aws_nas] }); + + WizardActions.setValidation('awsNodeForm', this.awsNodeForm.valid); + + if (this.awsNodeForm.valid) { + this.onChange(); + } } public onChange() { @@ -39,7 +46,7 @@ export class AwsNodeComponent implements OnInit { new AWSNodeSpec( this.awsNodeForm.controls["node_size"].value, this.awsNodeForm.controls["root_size"].value, - //Can we implement at some point + // Can we implement at some point // this.awsForm.controls["volume_type"].value, "gp2", this.awsNodeForm.controls["ami"].value @@ -47,11 +54,11 @@ export class AwsNodeComponent implements OnInit { null, null, ); - this.nodeInstances = this.awsNodeForm.controls["node_count"].value; + this.nodeInstances = this.awsNodeForm.controls["node_count"].value; const createNodeModel = new CreateNodeModel(this.nodeInstances, this.nodeSpec); - this.syncNodeModel.emit(createNodeModel); - this.syncNodeSpecValid.emit(this.awsNodeForm.valid); + + WizardActions.setNodeModel(createNodeModel); } } diff --git a/src/app/wizard/provider/node/digitalocean/digitalocean.component.html b/src/app/wizard/provider/node/digitalocean/digitalocean.component.html index ca0063ada1..bc4f2900bf 100644 --- a/src/app/wizard/provider/node/digitalocean/digitalocean.component.html +++ b/src/app/wizard/provider/node/digitalocean/digitalocean.component.html @@ -1,9 +1,9 @@ - + - +

- + Please add a Digital Ocean Token first! {{ size.memory / 1024 }} GB RAM, {{ size.vcpus }} CPU{{ (size.vcpus!=1) ? 's' : '' }}, ${{ size.price_monthly }} per month diff --git a/src/app/wizard/provider/node/digitalocean/digitalocean.component.ts b/src/app/wizard/provider/node/digitalocean/digitalocean.component.ts index e702f7936d..b7581f7098 100644 --- a/src/app/wizard/provider/node/digitalocean/digitalocean.component.ts +++ b/src/app/wizard/provider/node/digitalocean/digitalocean.component.ts @@ -1,50 +1,64 @@ -import {Component, OnInit, OnChanges, EventEmitter, Output, Input, SimpleChanges} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {CustomValidators} from "ng2-validation"; -import {ApiService} from "app/core/services/api/api.service"; -import {NodeInstanceFlavors} from "../../../../shared/model/NodeProviderConstants"; -import {NodeCreateSpec} from "../../../../shared/entity/NodeEntity"; -import {CreateNodeModel} from "../../../../shared/model/CreateNodeModel"; -import {DigitaloceanNodeSpec} from "../../../../shared/entity/node/DigitialoceanNodeSpec"; -import {InputValidationService} from '../../../../core/services'; +import { NgRedux } from '@angular-redux/store/lib/src/components/ng-redux'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { CustomValidators } from "ng2-validation"; +import { ApiService } from "app/core/services/api/api.service"; +import { NodeInstanceFlavors } from "../../../../shared/model/NodeProviderConstants"; +import { NodeCreateSpec } from "../../../../shared/entity/NodeEntity"; +import { CreateNodeModel } from "../../../../shared/model/CreateNodeModel"; +import { DigitaloceanNodeSpec } from "../../../../shared/entity/node/DigitialoceanNodeSpec"; +import { InputValidationService } from '../../../../core/services'; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import { select } from '@angular-redux/store'; +import { Observable } from 'rxjs/Rx'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-node-digitalocean', templateUrl: './digitalocean.component.html', styleUrls: ['./digitalocean.component.scss'] }) -export class DigitaloceanNodeComponent implements OnInit, OnChanges { +export class DigitaloceanNodeComponent implements OnInit, OnDestroy { public doNodeForm: FormGroup; public nodeSize: any[] = NodeInstanceFlavors.VOID; public nodeSpec: NodeCreateSpec; public nodeInstances: number; + private subscription: Subscription; - constructor(private formBuilder: FormBuilder,private api: ApiService, public inputValidationService: InputValidationService) { } + @select(['wizard', 'digitalOceanClusterForm', 'access_token']) token$: Observable; + public token: string = ''; - @Input() node: CreateNodeModel; - @Input() doToken: string; - @Output() syncNodeModel = new EventEmitter(); - @Output() syncNodeSpecValid = new EventEmitter(); + constructor(private formBuilder: FormBuilder, + private api: ApiService, + public inputValidationService: InputValidationService, + private ngRedux: NgRedux) { } ngOnInit() { - this.doNodeForm = this.formBuilder.group({ - node_count: [this.node.instances, [Validators.required, CustomValidators.min(1)]], - node_size: [this.node.spec.digitalocean.size, [Validators.required]] + this.subscription = this.token$.subscribe(token => { + if (!token) { return; } + this.token = token; + this.getNodeSize(token); }); - this.getNodeSize(this.doToken); - } + const reduxStore = this.ngRedux.getState(); + const nodeForm = reduxStore.wizard.digitalOceanNodeForm; - ngOnChanges(changes: SimpleChanges) { - this.getNodeSize(this.doToken); + this.doNodeForm = this.formBuilder.group({ + node_count: [nodeForm.node_count, [Validators.required, CustomValidators.min(1)]], + node_size: ['', [Validators.required]] + }); } public getNodeSize(token: string): void { + const reduxStore = this.ngRedux.getState(); + const selectedNodeSize = reduxStore.wizard.digitalOceanNodeForm.node_size; + if (token.length) { this.api.getDigitaloceanSizes(token).subscribe(result => { this.nodeSize = result.sizes; if (this.nodeSize.length > 0 && this.doNodeForm.controls["node_size"].value === '') { - this.doNodeForm.patchValue({node_size: '4gb'}); + const nodeSize = selectedNodeSize ? selectedNodeSize : '4gb'; + this.doNodeForm.patchValue({node_size: nodeSize}); this.onChange(); } } @@ -59,9 +73,14 @@ export class DigitaloceanNodeComponent implements OnInit, OnChanges { null, null, ); + this.nodeInstances = this.doNodeForm.controls["node_count"].value; const createNodeModel = new CreateNodeModel(this.nodeInstances, this.nodeSpec); - this.syncNodeModel.emit(createNodeModel); - this.syncNodeSpecValid.emit(this.doNodeForm.valid); + + WizardActions.setNodeModel(createNodeModel); + } + + public ngOnDestroy(): void { + this.subscription.unsubscribe(); } } diff --git a/src/app/wizard/provider/node/node.component.html b/src/app/wizard/provider/node/node.component.html index 1d6e02619e..8cd1df4f7c 100644 --- a/src/app/wizard/provider/node/node.component.html +++ b/src/app/wizard/provider/node/node.component.html @@ -1,16 +1,11 @@ + *ngIf="provider == 'aws'"> + + + *ngIf="provider == 'digitalocean'"> + + + *ngIf="provider == 'openstack'"> + diff --git a/src/app/wizard/provider/node/node.component.ts b/src/app/wizard/provider/node/node.component.ts index df0055b917..587d07db5a 100644 --- a/src/app/wizard/provider/node/node.component.ts +++ b/src/app/wizard/provider/node/node.component.ts @@ -1,30 +1,29 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {CreateNodeModel} from "../../../shared/model/CreateNodeModel"; +import { Observable } from 'rxjs/Rx'; +import { select } from '@angular-redux/store'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-provider-node', templateUrl: './node.component.html', styleUrls: ['./node.component.scss'] }) -export class ProviderNodeComponent implements OnInit { +export class ProviderNodeComponent implements OnInit, OnDestroy { - @Input() provider: string; - @Input() token: string; - @Input() node: CreateNodeModel; + private subscription: Subscription; - @Output() syncNodeModel = new EventEmitter(); - @Output() syncNodeSpecValid = new EventEmitter(); + @select(['wizard', 'setProviderForm', 'provider']) provider$: Observable; + public provider: string; constructor() { } - ngOnInit() { } - - public getNodeModel(model) { - this.syncNodeModel.emit(model); + ngOnInit() { + this.subscription = this.provider$.subscribe(provider => { + provider && (this.provider = provider); + }); } - public valid(value) { - this.syncNodeSpecValid.emit(value); + public ngOnDestroy(): void { + this.subscription.unsubscribe(); } - } diff --git a/src/app/wizard/provider/node/openstack/openstack.component.html b/src/app/wizard/provider/node/openstack/openstack.component.html index 9bdd6264e4..c8fe6f2bcc 100644 --- a/src/app/wizard/provider/node/openstack/openstack.component.html +++ b/src/app/wizard/provider/node/openstack/openstack.component.html @@ -1,9 +1,9 @@ - + - + - + Please add your Open Stack credentials first! {{size}} @@ -11,6 +11,6 @@ - + diff --git a/src/app/wizard/provider/node/openstack/openstack.component.ts b/src/app/wizard/provider/node/openstack/openstack.component.ts index 1e309931f0..e90f64eb18 100644 --- a/src/app/wizard/provider/node/openstack/openstack.component.ts +++ b/src/app/wizard/provider/node/openstack/openstack.component.ts @@ -1,12 +1,13 @@ -import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {NodeInstanceFlavors} from "../../../../shared/model/NodeProviderConstants"; -import {CustomValidators} from "ng2-validation"; -import {NodeCreateSpec} from "../../../../shared/entity/NodeEntity"; -import {OpenstackNodeSpec} from "../../../../shared/entity/node/OpenstackNodeSpec"; -import {CreateNodeModel} from "../../../../shared/model/CreateNodeModel"; - -import {InputValidationService} from '../../../../core/services'; +import { NgRedux } from '@angular-redux/store/lib/src/components/ng-redux'; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { NodeInstanceFlavors } from "../../../../shared/model/NodeProviderConstants"; +import { CustomValidators } from "ng2-validation"; +import { NodeCreateSpec } from "../../../../shared/entity/NodeEntity"; +import { OpenstackNodeSpec } from "../../../../shared/entity/node/OpenstackNodeSpec"; +import { CreateNodeModel } from "../../../../shared/model/CreateNodeModel"; +import { InputValidationService } from '../../../../core/services'; @Component({ selector: 'kubermatic-node-openstack', @@ -19,17 +20,18 @@ export class OpenstackNodeComponent implements OnInit { public nodeSpec: NodeCreateSpec; public nodeInstances: number; - constructor(private formBuilder: FormBuilder, public inputValidationService: InputValidationService) { } - - @Input() node: CreateNodeModel; - @Output() syncNodeModel = new EventEmitter(); - @Output() syncNodeSpecValid = new EventEmitter(); + constructor(private formBuilder: FormBuilder, + public inputValidationService: InputValidationService, + private ngRedux: NgRedux) { } ngOnInit() { + const reduxStore = this.ngRedux.getState(); + const nodeForm = reduxStore.wizard.openstackNodeForm; + this.osNodeForm = this.formBuilder.group({ - os_node_image: [this.node.spec.openstack.image, [Validators.required]], - node_count: [this.node.instances, [Validators.required, CustomValidators.min(1)]], - node_size: [this.node.spec.openstack.flavor, [Validators.required]], + os_node_image: [nodeForm.os_node_image, [Validators.required]], + node_count: [nodeForm.node_count, [Validators.required, CustomValidators.min(1)]], + node_size: [nodeForm.node_size, [Validators.required]], }); } @@ -41,12 +43,13 @@ export class OpenstackNodeComponent implements OnInit { this.osNodeForm.controls["node_size"].value, this.osNodeForm.controls["os_node_image"].value ), - null, + null ); - this.nodeInstances = this.osNodeForm.controls["node_count"].value; + this.nodeInstances = this.osNodeForm.controls["node_count"].value; + const createNodeModel = new CreateNodeModel(this.nodeInstances, this.nodeSpec); - this.syncNodeModel.emit(createNodeModel); - this.syncNodeSpecValid.emit(this.osNodeForm.valid); + + WizardActions.setNodeModel(createNodeModel); } } diff --git a/src/app/wizard/set-cluster-name/set-cluster-name.component.html b/src/app/wizard/set-cluster-name/set-cluster-name.component.html index 1c1950c555..301229bf66 100644 --- a/src/app/wizard/set-cluster-name/set-cluster-name.component.html +++ b/src/app/wizard/set-cluster-name/set-cluster-name.component.html @@ -6,9 +6,9 @@

Name your Kubernetes cluster

This is how you will identify your Kubernetes cluster instance. Choose a name that is easy for you to remember.

-
+ - +
diff --git a/src/app/wizard/set-cluster-name/set-cluster-name.component.ts b/src/app/wizard/set-cluster-name/set-cluster-name.component.ts index 486e698696..57a81d9525 100644 --- a/src/app/wizard/set-cluster-name/set-cluster-name.component.ts +++ b/src/app/wizard/set-cluster-name/set-cluster-name.component.ts @@ -1,38 +1,41 @@ -import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core'; -import {FormGroup, FormBuilder, Validators} from "@angular/forms"; -import {ClusterNameGenerator} from "../../core/util/name-generator.service"; -import {ClusterNameEntity} from "../../shared/entity/wizard/ClusterNameEntity"; +import { Observable } from 'rxjs'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from "@angular/forms"; +import { ClusterNameGenerator } from "../../core/util/name-generator.service"; +import { select } from '@angular-redux/store/lib/src/decorators/select'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-set-cluster-name', templateUrl: 'set-cluster-name.component.html', styleUrls: ['set-cluster-name.component.scss'] }) -export class SetClusterNameComponent implements OnInit { - @Input() clusterName: ClusterNameEntity; - @Output() syncName = new EventEmitter(); +export class SetClusterNameComponent implements OnInit, OnDestroy { public clusterNameForm: FormGroup; + private subscription: Subscription; + + @select(['wizard', 'clusterNameForm', 'name']) clusterName$: Observable; + public clusterName: string = ''; + constructor(private nameGenerator: ClusterNameGenerator, private formBuilder: FormBuilder) { } ngOnInit() { - this.clusterNameForm = this.formBuilder.group({ - name: [this.clusterName.value, [Validators.required, Validators.minLength(2), Validators.maxLength(50)]], + this.subscription = this.clusterName$.subscribe(clusterName => { + clusterName && (this.clusterName = clusterName); }); - this.syncClusterName(); + this.clusterNameForm = this.formBuilder.group({ + name: [this.clusterName, [Validators.required, Validators.minLength(2), Validators.maxLength(50)]], + }); } public generateName() { this.clusterNameForm.patchValue({name: this.nameGenerator.generateName()}); - this.syncClusterName(); } - public syncClusterName() { - this.syncName.emit(new ClusterNameEntity( - this.clusterNameForm.controls['name'].valid, - this.clusterNameForm.controls['name'].value - )); + public ngOnDestroy(): void { + this.subscription.unsubscribe(); } } diff --git a/src/app/wizard/set-datacenter/set-datacenter.component.html b/src/app/wizard/set-datacenter/set-datacenter.component.html index 7a4c8583d8..9e7bbfac84 100644 --- a/src/app/wizard/set-datacenter/set-datacenter.component.html +++ b/src/app/wizard/set-datacenter/set-datacenter.component.html @@ -7,10 +7,10 @@

Select the datacenter of your cloud provider

This is the cloud provider the Kubernetes nodes are deployed in by Kubermatic. Your nodes can be placed in any cloud you like, but for performance reasons as near to the master as possible.

-
-
+
-
-
+ + +
diff --git a/src/app/wizard/set-datacenter/set-datacenter.component.ts b/src/app/wizard/set-datacenter/set-datacenter.component.ts index 949bab8345..5548ae9ac3 100644 --- a/src/app/wizard/set-datacenter/set-datacenter.component.ts +++ b/src/app/wizard/set-datacenter/set-datacenter.component.ts @@ -1,23 +1,68 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {DataCenterEntity} from "../../shared/entity/DatacenterEntity"; -import {ApiService} from "app/core/services/api/api.service"; +import { DatacenterService } from './../../core/services/datacenter/datacenter.service'; +import { select } from '@angular-redux/store/lib/src/decorators/select'; +import { Observable } from 'rxjs/Rx'; +import { FormGroup } from '@angular/forms'; +import { FormBuilder } from '@angular/forms'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { DataCenterEntity } from "../../shared/entity/DatacenterEntity"; +import { ApiService } from "app/core/services/api/api.service"; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-set-datacenter', templateUrl: 'set-datacenter.component.html', styleUrls: ['set-datacenter.component.scss'] }) -export class SetDatacenterComponent implements OnInit { - @Input() datacenter: DataCenterEntity[]; - @Input() selectedDatacenter: DataCenterEntity; - @Output() syncDatacenter = new EventEmitter(); +export class SetDatacenterComponent implements OnInit, OnDestroy { + public setDatacenterForm: FormGroup; + public datacenters: { [key: string]: DataCenterEntity[] } = {}; + private subscriptions: Subscription[] = []; - constructor() { } + @select(['wizard', 'setDatacenterForm', 'datacenter']) datacenter$: Observable; + public selectedDatacenter: DataCenterEntity; - ngOnInit() { } + @select(['wizard', 'setProviderForm', 'provider']) provider$: Observable; + public selectedProvider: string; - public selectDatacenter(datacenter: DataCenterEntity) { - this.selectedDatacenter = datacenter; - this.syncDatacenter.emit(datacenter); + constructor(private fb: FormBuilder, + private dcService: DatacenterService) { } + + ngOnInit() { + let sub = this.datacenter$.combineLatest(this.provider$) + .subscribe((data: [DataCenterEntity, string]) => { + const datacenter = data[0]; + const provider = data[1]; + + datacenter && (this.selectedDatacenter = datacenter); + provider && (this.selectedProvider = provider); + }); + this.subscriptions.push(sub); + + let sub2 = this.getDatacenters(); + this.subscriptions.push(sub2); + + this.setDatacenterForm = this.fb.group({ + datacenter: [null] + }); + } + + public getDatacenters(): Subscription { + return this.dcService.getDataCenters().subscribe(result => { + result.forEach(elem => { + if (!elem.seed) { + if (!this.datacenters.hasOwnProperty(elem.spec.provider)) { + this.datacenters[elem.spec.provider] = []; + } + + this.datacenters[elem.spec.provider].push(elem); + } + }); + }); + } + + public ngOnDestroy(): void { + this.subscriptions.forEach(sub => { + sub.unsubscribe(); + }); } } diff --git a/src/app/wizard/set-provider/set-provider.component.html b/src/app/wizard/set-provider/set-provider.component.html index 841d54eba5..98b1b0b8df 100644 --- a/src/app/wizard/set-provider/set-provider.component.html +++ b/src/app/wizard/set-provider/set-provider.component.html @@ -8,20 +8,37 @@

Select the cloud provider for your nodes

This is the cloud provider the Kubernetes nodes are deployed in by Kubermatic. Your nodes can be placed in any cloud you like, but for performance reasons as near to the master as possible.

- -
+ +
-
- -
- -
-
+ + + + -
+ diff --git a/src/app/wizard/set-provider/set-provider.component.ts b/src/app/wizard/set-provider/set-provider.component.ts index 2757d7323c..4d335cfb72 100644 --- a/src/app/wizard/set-provider/set-provider.component.ts +++ b/src/app/wizard/set-provider/set-provider.component.ts @@ -1,25 +1,67 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {NodeProvider} from "../../shared/model/NodeProviderConstants"; -import {DataCenterEntity} from "../../shared/entity/DatacenterEntity"; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import { DataCenterEntity } from './../../shared/entity/DatacenterEntity'; +import { DatacenterService } from './../../core/services/datacenter/datacenter.service'; +import { Observable } from 'rxjs/Rx'; +import { select } from '@angular-redux/store'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { NodeProvider } from "../../shared/model/NodeProviderConstants"; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-set-provider', templateUrl: 'set-provider.component.html', styleUrls: ['set-provider.component.scss'] }) -export class SetProviderComponent implements OnInit { +export class SetProviderComponent implements OnInit, OnDestroy { - @Input() provider: { [key: string]: DataCenterEntity[] } = {}; - @Input() selectedProvider: string; - @Output() syncProvider = new EventEmitter(); + private subscriptions: Subscription[] = []; + + public setProviderForm: FormGroup; public supportedNodeProviders: string[] = NodeProvider.Supported; + public datacenters: { [key: string]: DataCenterEntity[] } = {}; + + @select(['wizard', 'setProviderForm', 'provider']) provider$: Observable; + public selectedProvider: string = ''; + + constructor(private fb: FormBuilder, + private dcService: DatacenterService) { } + + public ngOnInit(): void { + let sub = this.provider$.subscribe(provider => { + provider && (this.selectedProvider = provider); + }); + this.subscriptions.push(sub); + + this.setProviderForm = this.fb.group({ + provider: [this.selectedProvider] + }); - constructor() { } + let sub2 = this.getDatacenters(); + this.subscriptions.push(sub2); + } + + public onChange(): void { + WizardActions.resetForms(); + } - ngOnInit() { } + public getDatacenters(): Subscription { + return this.dcService.getDataCenters().subscribe(result => { + result.forEach(elem => { + if (!elem.seed) { + if (!this.datacenters.hasOwnProperty(elem.spec.provider)) { + this.datacenters[elem.spec.provider] = []; + } + + this.datacenters[elem.spec.provider].push(elem); + } + }); + }); + } - public selectProvider(provider: string) { - this.selectedProvider = provider; - this.syncProvider.emit(this.selectedProvider); + public ngOnDestroy(): void { + this.subscriptions.forEach(sub => { + sub.unsubscribe(); + }); } } diff --git a/src/app/wizard/set-settings/set-settings.component.html b/src/app/wizard/set-settings/set-settings.component.html index 0432025dda..84c10c7513 100644 --- a/src/app/wizard/set-settings/set-settings.component.html +++ b/src/app/wizard/set-settings/set-settings.component.html @@ -13,8 +13,8 @@

- - + + @@ -26,7 +26,7 @@

- +

diff --git a/src/app/wizard/set-settings/set-settings.component.ts b/src/app/wizard/set-settings/set-settings.component.ts index 4759c998cd..bf94de5bf3 100644 --- a/src/app/wizard/set-settings/set-settings.component.ts +++ b/src/app/wizard/set-settings/set-settings.component.ts @@ -1,79 +1,58 @@ -import {Component, OnInit, Input, Output, EventEmitter, SimpleChanges} from '@angular/core'; -import {ClusterSpec, CloudSpec} from "../../shared/entity/ClusterEntity"; -import {CreateClusterModel} from "../../shared/model/CreateClusterModel"; -import {CreateNodeModel} from "../../shared/model/CreateNodeModel" +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { ClusterSpec, CloudSpec } from "../../shared/entity/ClusterEntity"; +import { CreateClusterModel } from "../../shared/model/CreateClusterModel"; +import { select } from '@angular-redux/store'; +import { Observable } from 'rxjs/Observable'; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-set-settings', templateUrl: './set-settings.component.html', styleUrls: ['./set-settings.component.scss'] }) -export class SetSettingsComponent implements OnInit { +export class SetSettingsComponent implements OnInit, OnDestroy { - @Input() clusterName: string; - @Input() provider: string; - @Input() region: string; - @Input() cloud: CloudSpec; - @Input() node: CreateNodeModel; - @Input() selectedSshKeys: string[]; + private subscriptions: Subscription[] = []; + + @select(['wizard', 'clusterNameForm', 'name']) clusterName$: Observable; + public clusterName: string; - @Output() syncCluster = new EventEmitter(); - @Output() syncCloud = new EventEmitter(); - @Output() syncNode = new EventEmitter(); - @Output() syncSshKeys = new EventEmitter(); + @select(['wizard', 'sshKeyForm', 'ssh_keys']) sshKeys$: Observable; + public sshKeys: string[] = []; - @Output() cloudValid = new EventEmitter(); - @Output() nodeValid = new EventEmitter(); + @select(['wizard', 'cloudSpec']) cloudSpec$: Observable; + public cloudSpec: CloudSpec; public createClusterModal: CreateClusterModel; - - public cloudSpec: CloudSpec; public clusterSpec: ClusterSpec; - public sshKeys: string[] = []; - - public token: string = ""; constructor() { } - ngOnInit() {} - - ngOnChanges(changes: SimpleChanges) { - /* TODO: Find a better solution */ - if(!!this.cloud.digitalocean && this.cloud.digitalocean.token) { - this.token = this.cloud.digitalocean.token; - } else { - this.token = ""; - } - } - - public setCloud(spec) { - this.cloudSpec = spec; - this.sshKeys = this.selectedSshKeys; - this.createSpec(); - } - - public setNode(model) { - this.syncNode.emit(model); - } - - public setSshKeys(keys) { - this.sshKeys = keys; - this.syncSshKeys.emit(keys); - this.createSpec(); - } - - public cloudSpecValid(value) { - this.cloudValid.emit(value); - } - - public nodeSpecValid(value) { - this.nodeValid.emit(value); + public ngOnInit(): void { + let sub = this.clusterName$.subscribe(clusterName => { + clusterName && (this.clusterName = clusterName); + }); + this.subscriptions.push(sub); + + let sub2 = this.sshKeys$.subscribe(sshKeys => { + if (!Array.isArray(sshKeys) || !sshKeys.length || this.sshKeys === sshKeys) { return; } + + this.sshKeys = sshKeys; + this.createSpec(); + }); + this.subscriptions.push(sub2); + + let sub3 = this.cloudSpec$.subscribe(cloudSpec => { + if (!cloudSpec || this.cloudSpec === cloudSpec) { return; } + + this.cloudSpec = cloudSpec; + this.createSpec(); + }); + this.subscriptions.push(sub3); } public createSpec() { - if (!this.cloudSpec) { - this.cloudSpec = this.cloud; - } this.clusterSpec = new ClusterSpec( this.cloudSpec, @@ -86,7 +65,12 @@ export class SetSettingsComponent implements OnInit { this.sshKeys, ); - this.syncCluster.emit(this.createClusterModal); - this.syncCloud.emit(this.cloudSpec); + WizardActions.setClusterModel(this.createClusterModal); + } + + public ngOnDestroy(): void { + this.subscriptions.forEach(sub => { + sub.unsubscribe(); + }); } } diff --git a/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.html b/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.html index 47cc23c887..a9b8f019f7 100644 --- a/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.html +++ b/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.html @@ -1,7 +1,7 @@ -
+
- + {{key.spec.name + ' - ' + key.spec.fingerprint}} diff --git a/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.ts b/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.ts index 4d8c77b1e3..dd58973015 100644 --- a/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.ts +++ b/src/app/wizard/ssh-key-form-field/ssh-key-form-field.component.ts @@ -1,51 +1,67 @@ -import {Component, OnInit, Output, Input, EventEmitter} from '@angular/core'; -import {ApiService} from "app/core/services/api/api.service"; -import {SSHKeyEntity} from "../../shared/entity/SSHKeyEntity"; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {AddSshKeyModalComponent} from "../add-ssh-key-modal/add-ssh-key-modal.component"; -import {MdDialog, MdDialogConfig} from '@angular/material'; - +import { Observable } from 'rxjs'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { ApiService } from "app/core/services/api/api.service"; +import { SSHKeyEntity } from "../../shared/entity/SSHKeyEntity"; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { AddSshKeyModalComponent } from "../add-ssh-key-modal/add-ssh-key-modal.component"; +import { MdDialog, MdDialogConfig } from '@angular/material'; +import { select } from '@angular-redux/store/lib/src/decorators/select'; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-ssh-key-form-field', templateUrl: './ssh-key-form-field.component.html', styleUrls: ['./ssh-key-form-field.component.scss'] }) -export class SshKeyFormFieldComponent implements OnInit { +export class SshKeyFormFieldComponent implements OnInit, OnDestroy { public sshKeys: SSHKeyEntity[] = []; public config: MdDialogConfig = {}; public selectedCloudProviderApiError: string; public sshKeyForm: FormGroup; - @Input() selectedSshKeys: string[]; - @Output() syncSshKeys = new EventEmitter(); - @Input() provider: string; + private subscriptions: Subscription[] = []; + + @select(['wizard', 'sshKeyForm', 'ssh_keys']) selectedSshKeys$: Observable; + public selectedSshKeys: string[] = []; - constructor(private api: ApiService,private formBuilder: FormBuilder, public dialog: MdDialog) { } + constructor(private api: ApiService, private formBuilder: FormBuilder, public dialog: MdDialog) { } ngOnInit() { + let sub = this.selectedSshKeys$.subscribe(selectedSshKeys => { + this.selectedSshKeys = selectedSshKeys; + }); + this.subscriptions.push(sub); + this.sshKeyForm = this.formBuilder.group({ ssh_keys: [this.selectedSshKeys, [Validators.required]] }); - this.refreshSSHKeys(); - } - public change(keys) { - this.syncSshKeys.emit(keys.value); + this.sshKeyForm.updateValueAndValidity(); + + let sub2 = this.refreshSSHKeys(); + this.subscriptions.push(sub2); } - private refreshSSHKeys() { - this.api.getSSHKeys().subscribe(result => { - this.sshKeys = result; - }); + private refreshSSHKeys(): Subscription { + return this.api.getSSHKeys().subscribe(result => { + this.sshKeys = result; + }); } public addSshKeyDialog(): void { - var dialogRef = this.dialog.open(AddSshKeyModalComponent, this.config); + const dialogRef = this.dialog.open(AddSshKeyModalComponent, this.config); dialogRef.afterClosed().subscribe(result => { - this.selectedSshKeys.push(result.metadata.name); - this.refreshSSHKeys(); + if (result) { + this.sshKeyForm.patchValue({ssh_keys: [...this.selectedSshKeys, result.metadata.name]}); + this.refreshSSHKeys(); + } + }); + } + + public ngOnDestroy(): void { + this.subscriptions.forEach(sub => { + sub.unsubscribe(); }); } diff --git a/src/app/wizard/summary/summary.component.html b/src/app/wizard/summary/summary.component.html index 77e00f822d..dc6050f24d 100644 --- a/src/app/wizard/summary/summary.component.html +++ b/src/app/wizard/summary/summary.component.html @@ -14,7 +14,7 @@

Cluster Credentials and Settings

Cluster name
-
{{ clusterSpec.cluster.humanReadableName }}
+
{{ clusterModel.cluster.humanReadableName }}
@@ -32,19 +32,19 @@

Cluster Credentials and Settings

-
+
Digitalocean API token
-
{{clusterSpec.cluster.cloud[provider].token}}
+
{{clusterModel.cluster.cloud[provider].token}}
-
+
Access Key ID
-
{{clusterSpec.cluster.cloud[provider].access_key_id}}
+
{{clusterModel.cluster.cloud[provider].access_key_id}}
-
+
Secret Access Key
-
{{clusterSpec.cluster.cloud[provider].secret_access_key}}
+
{{clusterModel.cluster.cloud[provider].secret_access_key}}
@@ -55,44 +55,44 @@

Cluster Credentials and Settings

-
+
VPC ID (optional)
-
{{clusterSpec.cluster.cloud[provider].vpc_id}}
+
{{clusterModel.cluster.cloud[provider].vpc_id}}
-
+
Subnet ID (optional)
-
{{clusterSpec.cluster.cloud[provider].subnet_id}}
+
{{clusterModel.cluster.cloud[provider].subnet_id}}
-
+
Domain
-
{{clusterSpec.cluster.cloud[provider].domain}}
+
{{clusterModel.cluster.cloud[provider].domain}}
-
+
Tenant/Project
-
{{clusterSpec.cluster.cloud[provider].tenant}}
+
{{clusterModel.cluster.cloud[provider].tenant}}
-
+
Username
-
{{clusterSpec.cluster.cloud[provider].username}}
+
{{clusterModel.cluster.cloud[provider].username}}
-
+
Password
***************
-
+
Network name
-
{{clusterSpec.cluster.cloud[provider].network}}
+
{{clusterModel.cluster.cloud[provider].network}}
-
+
Security groups
-
{{clusterSpec.cluster.cloud[provider].security_groups}}
+
{{clusterModel.cluster.cloud[provider].security_groups}}
-
+
Floating IP pool
-
{{clusterSpec.cluster.cloud[provider].floating_ip_pool}}
+
{{clusterModel.cluster.cloud[provider].floating_ip_pool}}
@@ -105,69 +105,69 @@

Node Settings

-
+
Quantity of Nodes
- {{ nodeSpec.instances }} + {{ nodeModel.instances }}
-
+
Node Size
- {{ nodeSpec.spec[provider].size }} + {{ nodeModel.spec[provider].size }}
-
+
Node Size
- {{ nodeSpec.spec[provider].instance_type }} + {{ nodeModel.spec[provider].instance_type }}
-
+
Disk Size in GB (gb2)
- {{ nodeSpec.spec[provider].root_size }} + {{ nodeModel.spec[provider].root_size }}
-
+
AMI ID (optional)
- {{ nodeSpec.spec[provider].ami }} + {{ nodeModel.spec[provider].ami }}
- + -
+
Node Size
- {{ nodeSpec.spec[provider].flavor }} + {{ nodeModel.spec[provider].flavor }}
-
+
Image (Ubuntu only)
- {{ nodeSpec.spec[provider].image }} + {{ nodeModel.spec[provider].image }}
diff --git a/src/app/wizard/summary/summary.component.ts b/src/app/wizard/summary/summary.component.ts index 9343c01629..2cf075c0bf 100644 --- a/src/app/wizard/summary/summary.component.ts +++ b/src/app/wizard/summary/summary.component.ts @@ -1,42 +1,79 @@ -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {CreateNodeModel} from "../../shared/model/CreateNodeModel"; -import {CreateClusterModel} from "../../shared/model/CreateClusterModel"; -import {DataCenterEntity} from "../../shared/entity/DatacenterEntity"; -import {ApiService} from "app/core/services/api/api.service"; +import { WizardActions } from 'app/redux/actions/wizard.actions'; +import { select } from '@angular-redux/store'; +import { Observable } from 'rxjs'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { CreateNodeModel } from "../../shared/model/CreateNodeModel"; +import { CreateClusterModel } from "../../shared/model/CreateClusterModel"; +import { DataCenterEntity } from "../../shared/entity/DatacenterEntity"; +import { ApiService } from "app/core/services/api/api.service"; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'kubermatic-summary', templateUrl: './summary.component.html', styleUrls: ['./summary.component.scss'] }) -export class SummaryComponent implements OnInit { +export class SummaryComponent implements OnInit, OnDestroy { - @Input() provider: string; - @Input() region: DataCenterEntity; - @Input() clusterSpec: CreateClusterModel; - @Input() nodeSpec: CreateNodeModel; + private subscriptions: Subscription[] = []; - @Output() syncStep = new EventEmitter(); + @select(['wizard', 'setProviderForm', 'provider']) provider$: Observable; + public provider: string; + + @select(['wizard', 'setDatacenterForm', 'datacenter']) region$: Observable; + public region: DataCenterEntity; + + @select(['wizard', 'nodeModel']) nodeModel$: Observable; + public nodeModel: CreateNodeModel; + + @select(['wizard', 'clusterModel']) clusterModel$: Observable; + public clusterModel: CreateClusterModel; public shhKeysList: string[] = []; constructor(private api: ApiService) { } ngOnInit() { - this.api.getSSHKeys() + let sub = this.getSSHKeys(); + this.subscriptions.push(sub); + + let sub2 = this.provider$.combineLatest(this.region$, this.nodeModel$, this.clusterModel$) + .subscribe((data: [string, DataCenterEntity, CreateNodeModel, CreateClusterModel]) => { + const provider = data[0]; + const region = data[1]; + const nodeModel = data[2]; + const clusterModel = data[3]; + + provider && (this.provider = provider); + region && (this.region = region); + nodeModel && (this.nodeModel = nodeModel); + clusterModel && (this.clusterModel = clusterModel); + }); + this.subscriptions.push(sub2); + } + + public getSSHKeys(): Subscription { + return this.api.getSSHKeys() .subscribe( result => { - for (var item of result) { - for (var key of this.clusterSpec.sshKeys) - if (item.metadata.name == key) { - this.shhKeysList.push(item.spec.name + ' - ' + item.spec.fingerprint); + for (let item of result) { + for (let key of this.clusterModel.sshKeys) { + if (item.metadata.name === key) { + this.shhKeysList.push(item.spec.name + ' - ' + item.spec.fingerprint); + } } } } ); } - public gotoStep(step: number) { - this.syncStep.emit(step); + public goToStep(step: number): void { + WizardActions.goToStep(step); + } + + public ngOnDestroy(): void { + this.subscriptions.forEach(sub => { + sub.unsubscribe(); + }); } } diff --git a/src/app/wizard/wizard.component.html b/src/app/wizard/wizard.component.html index 025051cb80..0d7a976f52 100644 --- a/src/app/wizard/wizard.component.html +++ b/src/app/wizard/wizard.component.html @@ -1,59 +1,21 @@ - + - - - - + + + + - + - + - + - + + diff --git a/src/app/wizard/wizard.component.spec.ts b/src/app/wizard/wizard.component.spec.ts index 9f0805ebb4..91fa499b67 100644 --- a/src/app/wizard/wizard.component.spec.ts +++ b/src/app/wizard/wizard.component.spec.ts @@ -8,8 +8,6 @@ import {ApiService} from "app/core/services/api/api.service"; import {HttpModule, BaseRequestOptions, Http, XHRBackend, Response, ResponseOptions} from "@angular/http"; import {Auth} from "../core/services"; import {RouterTestingModule} from "@angular/router/testing"; -import {StoreModule} from "@ngrx/store"; -import {combinedReducer} from "../redux/reducers/index"; import {MockBackend} from "@angular/http/testing"; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MaterialModule } from '@angular/material'; @@ -25,7 +23,6 @@ describe("WizardComponent", () => { ReactiveFormsModule, HttpModule, RouterTestingModule, - StoreModule.provideStore(combinedReducer), MaterialModule, BrowserAnimationsModule ], @@ -69,10 +66,10 @@ describe("WizardComponent", () => { expect(component).toBeTruthy(); }); - it("initialized in initial step and allowed to step forward right away", () => { - component = fixture.componentInstance; - expect(component.currentStep).toBe(0); - fixture.detectChanges(); - expect(component.canStepForward()).toBe(true); - }); + // it("initialized in initial step and allowed to step forward right away", () => { + // component = fixture.componentInstance; + // expect(component.currentStep).toBe(0); + // fixture.detectChanges(); + // expect(component.canStepForward()).toBe(true); + // }); }); diff --git a/src/app/wizard/wizard.component.ts b/src/app/wizard/wizard.component.ts index 11344d60cf..18209abdf1 100644 --- a/src/app/wizard/wizard.component.ts +++ b/src/app/wizard/wizard.component.ts @@ -1,23 +1,24 @@ -import {Component, OnInit} from "@angular/core"; -import {ApiService} from "app/core/services/api/api.service"; -import {DataCenterEntity} from "../shared/entity/DatacenterEntity"; -import {Router} from "@angular/router"; -import {Observable, Subscription} from "rxjs"; -import {MdDialog} from "@angular/material"; -import {CloudSpec} from "../shared/entity/ClusterEntity"; -import {CreateClusterModel} from "../shared/model/CreateClusterModel"; +import { WizardActions } from './../redux/actions/wizard.actions'; +import { Component, OnInit, OnDestroy } from "@angular/core"; +import { ApiService } from "app/core/services/api/api.service"; +import { Router } from "@angular/router"; +import { Observable } from "rxjs"; +import { MdDialog } from "@angular/material"; +import { CloudSpec } from "../shared/entity/ClusterEntity"; +import { CreateClusterModel } from "../shared/model/CreateClusterModel"; import * as testing from "selenium-webdriver/testing"; -import {CreateNodeModel} from "../shared/model/CreateNodeModel"; -import {DigitaloceanCloudSpec} from "../shared/entity/cloud/DigitialoceanCloudSpec"; -import {ClusterNameEntity} from "../shared/entity/wizard/ClusterNameEntity"; -import {CustomEventService, CreateNodesService, InputValidationService, DatacenterService } from '../core/services'; -import {NodeCreateSpec} from "../shared/entity/NodeEntity"; -import {OpenstackNodeSpec} from "../shared/entity/node/OpenstackNodeSpec"; -import {AWSNodeSpec} from "../shared/entity/node/AWSNodeSpec"; -import {DigitaloceanNodeSpec} from "../shared/entity/node/DigitialoceanNodeSpec"; -import {AWSCloudSpec} from "../shared/entity/cloud/AWSCloudSpec"; -import {OpenstackCloudSpec} from "../shared/entity/cloud/OpenstackCloudSpec"; +import { CreateNodeModel } from "../shared/model/CreateNodeModel"; +import { DigitaloceanCloudSpec } from "../shared/entity/cloud/DigitialoceanCloudSpec"; +import { CreateNodesService } from '../core/services'; +import { NodeCreateSpec } from "../shared/entity/NodeEntity"; +import { OpenstackNodeSpec } from "../shared/entity/node/OpenstackNodeSpec"; +import { AWSNodeSpec } from "../shared/entity/node/AWSNodeSpec"; +import { DigitaloceanNodeSpec } from "../shared/entity/node/DigitialoceanNodeSpec"; +import { AWSCloudSpec } from "../shared/entity/cloud/AWSCloudSpec"; +import { OpenstackCloudSpec } from "../shared/entity/cloud/OpenstackCloudSpec"; import { NotificationActions } from "app/redux/actions/notification.actions"; +import { select, NgRedux } from "@angular-redux/store"; +import { Subscription } from 'rxjs/Subscription'; @Component({ selector: "kubermatic-wizard", @@ -25,183 +26,97 @@ import { NotificationActions } from "app/redux/actions/notification.actions"; styleUrls: ["./wizard.component.scss"] }) -export class WizardComponent implements OnInit { +export class WizardComponent implements OnInit, OnDestroy { + + private subscriptions: Subscription[] = []; - // Current Create Cluster Step - public currentStep: number = 0; - - // Step 1: Cluster Name - public clusterName: ClusterNameEntity = {valid: false, value : ""}; - - // Step 2: Selected Provider + @select(['wizard', 'step']) step$: Observable; + public step: number; + + @select(['wizard', 'setProviderForm', 'provider']) provider$: Observable; public selectedProvider: string; - // Step 3: Selected Provider Region - public selectedProviderRegion: DataCenterEntity; - - // step 5: get sshKeys for Summary - public selectedSshKeys: string[] = []; - - // Step 5: get Cluster Modal - public createClusterModal: CreateClusterModel; - - // step 5: get Node Modal for Summary - public createNodeModel: CreateNodeModel; - - //Validation: Cluster - public clusterModalValid: boolean = false; - - //Validation: Node - public nodeModalValid: boolean = false; - - public groupedDatacenters: { [key: string]: DataCenterEntity[] } = {}; - - public cacheCloud: CloudSpec; - public cacheNode: CreateNodeModel; - - constructor( private api: ApiService, private router: Router, public dialog: MdDialog, - private customEventService: CustomEventService, private createNodesService: CreateNodesService, - public inputValidationService: InputValidationService, - public dcService: DatacenterService, - public notificationActions: NotificationActions + private ngRedux: NgRedux ) {} - ngOnInit() { this.resetCachedCredentials(); - this.dcService.getDataCenters().subscribe(result => { - result.forEach(elem => { - if (!elem.seed) { - if (!this.groupedDatacenters.hasOwnProperty(elem.spec.provider)) { - this.groupedDatacenters[elem.spec.provider] = []; - } - - this.groupedDatacenters[elem.spec.provider].push(elem); + + let sub = this.step$.combineLatest(this.provider$) + .subscribe((data: [number, string]) => { + const step = data[0]; + const provider = data[1]; + + if (this.step !== step && step === 5) { + this.createClusterAndNode(); } + this.step = step; + + provider && this.setProvider(provider); }); - }); - } + this.subscriptions.push(sub); + } public resetCachedCredentials() { - this.cacheCloud = new CloudSpec( - '', - new DigitaloceanCloudSpec(''), - new AWSCloudSpec('','','','','',''), - null, - new OpenstackCloudSpec('','','','Default','','',''), - null + WizardActions.setCloudSpec( + new CloudSpec( + '', + new DigitaloceanCloudSpec(''), + new AWSCloudSpec('', '', '', '', '', ''), + null, + new OpenstackCloudSpec('', '', '', 'Default', '', '', ''), + null + ) ); - this.cacheNode = new CreateNodeModel( - 3, - new NodeCreateSpec( - new DigitaloceanNodeSpec(''), - new AWSNodeSpec('t2.medium', 20, '', ''), - new OpenstackNodeSpec('m1.medium', ''), null) + WizardActions.setNodeModel( + new CreateNodeModel( + 3, + new NodeCreateSpec( + new DigitaloceanNodeSpec(''), + new AWSNodeSpec('t2.medium', 20, '', ''), + new OpenstackNodeSpec('m1.medium', ''), null) + ) ); } - public setClusterName(clusterNameChangeEvent: ClusterNameEntity) { - this.clusterName = clusterNameChangeEvent; - } - public setProvider(cloud: string) { - if(this.selectedProvider != cloud){ + if (this.selectedProvider !== cloud) { this.resetCachedCredentials(); - this.selectedProviderRegion = null; } this.selectedProvider = cloud; - this.gotoStep(2); - - } - - public setProviderRegion(cloud: DataCenterEntity) { - this.selectedProviderRegion = cloud; - this.gotoStep(3); - } - - public setCluster(cluster) { - this.createClusterModal = cluster; - } - - public setCloud(cloud) { - this.cacheCloud = cloud; - } - - public setNode(node) { - this.createNodeModel = node; - this.cacheNode = node; - } - - public setSshKeys(keys) { - this.selectedSshKeys = keys; - } - - public checkCloudValid(value){ - this.clusterModalValid = value; - } - - public checkNodeValid(value){ - this.nodeModalValid = value; - } - - public gotoStep(step: number) { - switch (step) { - case 5: - this.createClusterAndNode(); - break; - - default: - this.currentStep = step; - } - } - - public canGotoStep(step: number) { - switch (step) { - case 0: - return this.clusterName.valid; - case 1: - return !!this.selectedProvider; - case 2: - return !!this.selectedProviderRegion; - case 3: - if(!this.selectedSshKeys) { - return false; - } else if (this.clusterModalValid && this.nodeModalValid){ - return true; - } else { - return false; - } - case 4: - return true; - default: - return false; - } - } - - public canStepForward(): boolean { - return this.canGotoStep(this.currentStep); } public createClusterAndNode() { - - console.log("Create cluster mode: \n" + JSON.stringify(this.createClusterModal)); - this.api.createCluster(this.createClusterModal).subscribe(cluster => { - this.notificationActions.success("Success", `Cluster successfully created`); + const reduxStore = this.ngRedux.getState(); + const wizard = reduxStore.wizard; + const nodeModel = wizard.nodeModel; + const clusterModel = wizard.clusterModel; + + console.log("Create cluster mode: \n" + JSON.stringify(clusterModel)); + this.api.createCluster(clusterModel).subscribe(cluster => { + NotificationActions.success("Success", `Cluster successfully created`); this.router.navigate(["/clusters/" + cluster.metadata.name]); - this.createNodesService.createInitialClusterNodes(cluster, this.createNodeModel); - + this.createNodesService.createInitialClusterNodes(cluster, nodeModel); }, error => { - this.notificationActions.error("Error", `${error.status} ${error.statusText}`); + NotificationActions.error("Error", `${error.status} ${error.statusText}`); }); } + + public ngOnDestroy(): void { + WizardActions.clearStore(); + + this.subscriptions.forEach(sub => { + sub.unsubscribe(); + }); + } } diff --git a/tslint.json b/tslint.json index 599e248c5a..acc39a896d 100644 --- a/tslint.json +++ b/tslint.json @@ -52,7 +52,7 @@ "no-string-throw": true, "no-switch-case-fall-through": true, "no-trailing-whitespace": false, - "no-unused-expression": true, + "no-unused-expression": false, "no-use-before-declare": true, "no-var-keyword": true, "object-literal-sort-keys": false,