provider (#316)

src/app/shared/model/NodeProviderConstants.ts

@@ -8,7 +8,15 @@ export class NodeProvider {
   public static readonly BAREMETAL: string = "baremetal";
   public static readonly OPENSTACK: string = "openstack";
 
-  public static readonly Supported: string[] = [NodeProvider.AWS, NodeProvider.DIGITALOCEAN, NodeProvider.OPENSTACK];
+
+  public static readonly GOOGLE: string = "google";
+  public static readonly HUAWEI: string = "huawei";
+  public static readonly TELEKOM: string = "telekom";
+  public static readonly AZURE: string = "azure";
+
+  public static readonly Supported: string[] = [NodeProvider.AWS, NodeProvider.DIGITALOCEAN, NodeProvider.OPENSTACK, NodeProvider.GOOGLE, NodeProvider.HUAWEI, NodeProvider.TELEKOM, NodeProvider.BAREMETAL, NodeProvider.AZURE];
+  public static readonly DisabledProvider: string[] = [NodeProvider.GOOGLE, NodeProvider.HUAWEI, NodeProvider.TELEKOM, NodeProvider.BAREMETAL, NodeProvider.AZURE];
+
 }
 
 export namespace NodeInstanceFlavors {

src/app/wizard/navigation-buttons/navigation-buttons.component.ts

@@ -3,6 +3,7 @@ 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';
+import { NodeProvider } from "../../shared/model/NodeProviderConstants";
 
 @Component({
   selector: 'kubermatic-navigation-buttons',
@@ -13,7 +14,7 @@ export class NavigationButtonsComponent implements OnInit, OnDestroy {
 
   public nextStep: boolean;
   private subscriptions: Subscription[] = [];
-
+  public DisabledProvider: string[] = NodeProvider.DisabledProvider;
 
   @select(['wizard', 'step']) step$: Observable<number>;
   public step: number;
@@ -42,13 +43,13 @@ export class NavigationButtonsComponent implements OnInit, OnDestroy {
       case 0:
         return valid.get('clusterNameForm');
       case 1:
-        return valid.get('setProviderForm');
+        return valid.get('setProviderForm') && this.DisabledProvider.indexOf(reduxStore.wizard.setProviderForm.provider) < 0;
       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') ) && 
+          } else if ((valid.get('awsClusterForm') || valid.get('digitalOceanClusterForm') || valid.get('openstackClusterForm') ) &&
                       (valid.get('awsNodeForm') || valid.get('digitalOceanNodeForm') || valid.get('openstackNodeForm'))) {
             return true;
           } else {

src/app/wizard/set-provider/set-provider.component.html

@@ -8,34 +8,33 @@ <h4>Select the cloud provider for your nodes</h4>
     <p>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.
     </p>
-
     <form [connect]="['wizard', 'setProviderForm']"
           [formGroup]="setProviderForm"
           (change)="onChange()"
-          fxLayoutAlign="center" 
-          fxLayout="row"
-          fxLayout.sm="column"
-          fxLayout.xs="column"
-          fxLayoutGap="20px">
+          class="provider-fix"
+          fxLayoutGap="25px"
+          fxLayoutAlign="center"
+          >
       <ng-container *ngFor="let cloud of supportedNodeProviders; let i = index;">
-        <ng-container *ngIf="datacenters[cloud]?.length">
+        <ng-container>
           <label fxFlex="150px"
                fxLayoutAlign="center center"
                class="wizard-box-provider"
+               style="float: left;"
                [ngClass]="{'selected': selectedProvider === cloud, 'wizard-box-color_primary': i % 2 === 0, 'wizard-box-color_secondary': i % 2 !== 0}"
                [attr.for]="cloud">
             <!-- TODO: OnClick go to next step -->
             <div class="wizard-box-content">
-              <img class="cloud-logo" 
-                   src="/assets/images/clouds/{{cloud}}.png" 
+              <img class="cloud-logo"
+                   src="/assets/images/clouds/{{cloud}}.png"
                    alt="{{cloud}}">
             </div>
           </label>
           <input style="display: none"
-                 type="radio" 
-                 [attr.id]="cloud" 
-                 formControlName="provider" 
-                 [value]="cloud" 
+                 type="radio"
+                 [attr.id]="cloud"
+                 formControlName="provider"
+                 [value]="cloud"
                  [attr.name]="cloud">
         </ng-container>
       </ng-container>

src/app/wizard/set-provider/set-provider.component.scss

@@ -51,7 +51,7 @@ $wizard-box-content-cloud-margin-top: 50px;
 }
 
 .wizard-box-provider {
-  margin-top: 10px;
+  margin-top: 20px;
   background: #fff;
   border: 1px solid #E3E8EC;
   cursor: pointer;
@@ -87,3 +87,9 @@ img.cloud-logo {
   width: $wizard-box-content-cloud-logo-size ;
   margin-bottom: 15px;
 }
+
+
+.provider-fix {
+  margin: 20px;
+  display: inline-block !important;
+}