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
kubermatic · Dec 5, 2017 · 03e64a1 · 03e64a1
1 parent d2c075a
commit 03e64a1
Show file tree

Hide file tree

Showing 94 changed files with 1,276 additions and 971 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -24,8 +24,7 @@ export class ClusterDeleteConfirmationComponent implements OnInit, DoCheck {
     private router: Router,
     private api: ApiService,
     private dialogRef: MdDialogRef<ClusterDeleteConfirmationComponent>,
-    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
@@ -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<ClusterListComponent>;
@@ -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
@@ -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
@@ -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
@@ -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
@@ -30,17 +30,15 @@ export class NodeDeleteConfirmationComponent implements OnInit {
 
   constructor(
     private api: ApiService,
-    private customEventService: CustomEventService,
-    private notificationActions: NotificationActions
-  ) {}
+    private customEventService: CustomEventService) {}
 
   ngOnInit() {
   }
 
   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
@@ -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
@@ -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
@@ -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<string>;
+
   constructor(
-    private store: Store<fromRoot.State>,
     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
@@ -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
@@ -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<fromRoot.State>,
+    private sidenavService: SidenavService,
     private router: Router,
     private dialog: MdDialog
   ) {}