@spinnaker/azure 0.0.0-main-2

package/src/serverGroup/configure/wizard/advancedSettings/advancedSettingsSelector.directive.js

@@ -0,0 +1,43 @@
+'use strict';
+
+import * as angular from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGSSELECTOR_DIRECTIVE =
+  'spinnaker.azure.serverGroup.configure.wizard.advancedSettings.selector.directive';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGSSELECTOR_DIRECTIVE; // for backwards compatibility
+angular
+  .module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGSSELECTOR_DIRECTIVE, [])
+  .directive('azureServerGroupAdvancedSettingsSelector', function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./advancedSettingsSelector.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'adv',
+      controller: 'azureServerGroupAdvancedSettingsSelectorCtrl',
+    };
+  })
+  .controller('azureServerGroupAdvancedSettingsSelectorCtrl', function () {
+    this.addDataDisk = () => {
+      const newDataDisks = angular.copy(this.command.dataDisks);
+      this.command.dataDisks = newDataDisks.concat([
+        {
+          lun: 0,
+          managedDisk: {
+            storageAccountType: 'Standard_LRS',
+          },
+          diskSizeGB: 1,
+          caching: 'None',
+          createOption: 'Empty',
+        },
+      ]);
+    };
+
+    this.removeDataDisk = (index) => {
+      const newDataDisks = angular.copy(this.command.dataDisks);
+      newDataDisks.splice(index, 1);
+      this.command.dataDisks = newDataDisks;
+    };
+  });

package/src/serverGroup/configure/wizard/basicSettings/ServerGroupBasicSettings.controller.js

@@ -0,0 +1,71 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import * as angular from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+
+import { IMAGE_READER, ModalWizard } from '@spinnaker/core';
+
+import { AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_IMAGE_REGIONAL_FILTER } from './image.regional.filter';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_SERVERGROUPBASICSETTINGS_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.basicSettings';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_SERVERGROUPBASICSETTINGS_CONTROLLER; // for backwards compatibility
+angular
+  .module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_SERVERGROUPBASICSETTINGS_CONTROLLER, [
+    UIROUTER_ANGULARJS,
+    ANGULAR_UI_BOOTSTRAP,
+    AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_IMAGE_REGIONAL_FILTER,
+    IMAGE_READER,
+  ])
+  .controller('azureServerGroupBasicSettingsCtrl', [
+    '$scope',
+    '$controller',
+    '$uibModalStack',
+    '$state',
+    'imageReader',
+    function ($scope, $controller, $uibModalStack, $state, imageReader) {
+      $scope.$watch('form.$valid', function (newVal) {
+        if (newVal) {
+          ModalWizard.markClean('basic-settings');
+          ModalWizard.markComplete('basic-settings');
+        } else {
+          ModalWizard.markIncomplete('basic-settings');
+        }
+      });
+
+      this.imageChanged = (image) => {
+        $scope.command.imageName = image.imageName;
+        $scope.command.selectedImage = image;
+        ModalWizard.markClean('basic-settings');
+      };
+
+      angular.extend(
+        this,
+        $controller('BasicSettingsMixin', {
+          $scope: $scope,
+          imageReader: imageReader,
+          $uibModalStack: $uibModalStack,
+          $state: $state,
+        }),
+      );
+
+      this.stackPattern = {
+        test: function (stack) {
+          const pattern = $scope.command.viewState.templatingEnabled ? /^([a-zA-Z0-9]*(\${.+})*)*$/ : /^[a-zA-Z0-9]*$/;
+
+          return pattern.test(stack);
+        },
+      };
+
+      this.detailPattern = {
+        test: function (detail) {
+          const pattern = $scope.command.viewState.templatingEnabled
+            ? /^([a-zA-Z0-9-]*(\${.+})*)*$/
+            : /^[a-zA-Z0-9-]*$/;
+
+          return pattern.test(detail);
+        },
+      };
+    },
+  ]);

package/src/serverGroup/configure/wizard/basicSettings/basicSettings.html

@@ -0,0 +1,131 @@
+<div class="container-fluid form-horizontal" ng-controller="azureServerGroupBasicSettingsCtrl as basicSettingsCtrl">
+  <div class="modal-body">
+    <ng-form name="basicSettings">
+      <div class="form-group">
+        <div class="col-md-3 sm-label-right">Account</div>
+        <div class="col-md-7">
+          <account-select-field
+            required
+            read-only="command.viewState.readOnlyFields.credentials"
+            component="command"
+            field="credentials"
+            accounts="command.backingData.accounts"
+            provider="'azure'"
+          ></account-select-field>
+        </div>
+      </div>
+      <region-select-field
+        required
+        read-only="command.viewState.readOnlyFields.region"
+        label-columns="3"
+        component="command"
+        field="region"
+        account="command.credentials"
+        provider="'azure'"
+        regions="command.backingData.filtered.regions"
+      ></region-select-field>
+      <div class="form-group">
+        <div class="col-md-3 sm-label-right">
+          Stack
+          <help-field key="azure.serverGroup.stack"></help-field>
+        </div>
+        <div class="col-md-7">
+          <input
+            required
+            type="text"
+            class="form-control input-sm"
+            ng-pattern="basicSettingsCtrl.stackPattern"
+            name="stack"
+            ng-model="command.stack"
+          />
+        </div>
+      </div>
+      <div class="form-group row slide-in" ng-if="basicSettings.stack.$error.pattern">
+        <div class="col-sm-9 col-sm-offset-2 error-message">
+          <span>Stack can only contain letters and numbers.</span>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-md-3 sm-label-right">
+          Detail
+          <help-field key="azure.serverGroup.detail"></help-field>
+        </div>
+        <div class="col-md-7">
+          <input
+            required
+            type="text"
+            class="form-control input-sm"
+            ng-pattern="basicSettingsCtrl.detailPattern"
+            name="details"
+            ng-model="command.freeFormDetails"
+          />
+        </div>
+      </div>
+      <div class="form-group row slide-in" ng-if="basicSettings.details.$error.pattern">
+        <div class="col-sm-9 col-sm-offset-2 error-message">
+          <span>Detail can only contain letters, numbers, and dashes(-).</span>
+        </div>
+      </div>
+      <div class="form-group" ng-if="!command.viewState.disableImageSelection">
+        <div class="col-md-3 sm-label-right">
+          Image
+          <help-field key="azure.serverGroup.imageName"></help-field>
+        </div>
+        <div class="col-md-9">
+          <ui-select
+            class="form-control input-sm"
+            required
+            ng-model="command.selectedImage"
+            on-select="basicSettingsCtrl.imageChanged($item)"
+          >
+            <ui-select-match placeholder="Pick an image">{{$select.selected.imageName}}</ui-select-match>
+            <ui-select-choices repeat="image in command.images | regional:command.region | filter:$select.search">
+              <span ng-bind-html="image.imageName"></span>
+            </ui-select-choices>
+          </ui-select>
+        </div>
+      </div>
+      <deployment-strategy-selector
+        ng-if="!command.viewState.disableStrategySelection && command.selectedProvider"
+        command="command"
+      ></deployment-strategy-selector>
+      <div class="form-group" ng-if="!command.viewState.hideClusterNamePreview">
+        <div class="col-md-12">
+          <div
+            class="well-compact"
+            ng-class="basicSettingsCtrl.showPreviewAsWarning() ? 'alert alert-warning' : 'well'"
+          >
+            <h5 class="text-center">
+              <p>Your server group will be in the cluster:</p>
+              <p>
+                <strong>
+                  {{basicSettingsCtrl.getNamePreview()}}
+                  <span ng-if="basicSettingsCtrl.createsNewCluster()"> (new cluster)</span>
+                </strong>
+              </p>
+              <div
+                class="text-left"
+                ng-if="!basicSettingsCtrl.createsNewCluster() && command.viewState.mode === 'create' && latestServerGroup"
+              >
+                <p>There is already a server group in this cluster. Do you want to clone it?</p>
+                <p>
+                  Cloning copies the entire configuration from the selected server group, allowing you to modify
+                  whichever fields (e.g. image) you need to change in the new server group.
+                </p>
+                <p>
+                  To clone a server group, select "Clone" from the "Server Group Actions" menu in the details view of
+                  the server group.
+                </p>
+                <p>
+                  <a href ng-click="basicSettingsCtrl.navigateToLatestServerGroup()">
+                    Go to details for {{latestServerGroup.name}}
+                  </a>
+                </p>
+              </div>
+            </h5>
+          </div>
+        </div>
+      </div>
+    </ng-form>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/basicSettings/image.regional.filter.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_IMAGE_REGIONAL_FILTER =
+  'spinnaker.azure.serverGroup.configure.basicSettings.image.filter';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_IMAGE_REGIONAL_FILTER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_BASICSETTINGS_IMAGE_REGIONAL_FILTER, []).filter('regional', function () {
+  return function (input, selectedRegion) {
+    return _.filter(input, function (image) {
+      return image.region === selectedRegion || image.region === null;
+    });
+  };
+});

package/src/serverGroup/configure/wizard/basicSettings/image.regional.filter.spec.js

@@ -0,0 +1,42 @@
+'use strict';
+
+describe('Filter: regional', function () {
+  beforeEach(window.module(require('./image.regional.filter').name));
+
+  beforeEach(
+    window.inject(function (_regionalFilter_) {
+      this.regionalFilter = _regionalFilter_;
+      this._ = _;
+
+      this.images = [
+        {
+          name: 'null',
+          region: null,
+        },
+        {
+          name: 'west',
+          region: 'west',
+        },
+        {
+          name: 'east',
+          region: 'east',
+        },
+      ];
+    }),
+  );
+
+  it('filters the images based on the selected region and null', function () {
+    var noEast = [
+      {
+        name: 'null',
+        region: null,
+      },
+      {
+        name: 'west',
+        region: 'west',
+      },
+    ];
+
+    expect(this.regionalFilter(this.images, 'west')).toEqual(noEast);
+  });
+});

package/src/serverGroup/configure/wizard/capacity/capacity.html

@@ -0,0 +1,5 @@
+<div class="clear-fix">
+  <div class="col-md-12">
+    <azure-server-group-capacity-selector command="command"></azure-server-group-capacity-selector>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/capacity/capacitySelector.directive.html

@@ -0,0 +1,20 @@
+<div>
+  <div class="form-group">
+    <div class="col-md-12">
+      <p>Sets desired instance count.</p>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right">Number of Instances</div>
+    <div class="col-md-2">
+      <input
+        type="number"
+        class="form-control input-sm"
+        ng-model="cap.command.sku.capacity"
+        min="0"
+        max="100"
+        required
+      />
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/capacity/capacitySelector.directive.js

@@ -0,0 +1,21 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_CAPACITY_CAPACITYSELECTOR_DIRECTIVE =
+  'spinnaker.azure.serverGroup.configure.wizard.capacity.selector.directive';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_CAPACITY_CAPACITYSELECTOR_DIRECTIVE; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_CAPACITY_CAPACITYSELECTOR_DIRECTIVE, [])
+  .directive('azureServerGroupCapacitySelector', function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./capacitySelector.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'cap',
+      controller: 'azureServerGroupCapacitySelectorCtrl',
+    };
+  })
+  .controller('azureServerGroupCapacitySelectorCtrl', function () {});

package/src/serverGroup/configure/wizard/capacity/zones.html

@@ -0,0 +1,5 @@
+<ng-form name="zonesSubForm">
+  <div class="container-fluid form-horizontal">
+    <azure-zone-selector command="command"></azure-zone-selector>
+  </div>
+</ng-form>

package/src/serverGroup/configure/wizard/healthSettings/ServerGroupHealthSettings.controller.js

@@ -0,0 +1,38 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_HEALTHSETTINGS_SERVERGROUPHEALTHSETTINGS_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.healthSetting.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_HEALTHSETTINGS_SERVERGROUPHEALTHSETTINGS_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_HEALTHSETTINGS_SERVERGROUPHEALTHSETTINGS_CONTROLLER, []).controller(
+  'azureServerGroupHealthSettingsCtrl',
+  [
+    '$scope',
+    function ($scope) {
+      if (typeof $scope.command.healthSettings === 'undefined') {
+        $scope.command.healthSettings = {};
+      }
+
+      this.healthCheckProtocols = [
+        { displayName: 'N/A', name: null },
+        { displayName: 'HTTP', name: 'http' },
+        { displayName: 'TCP', name: 'tcp' },
+      ];
+
+      this.requiresHealthCheckPath = function () {
+        return $scope.command.healthSettings.protocol === 'http';
+      };
+
+      this.changeHealthCheckProtocol = function (newProtocol) {
+        if (newProtocol == null) {
+          $scope.command.healthSettings.protocol = null;
+          $scope.command.healthSettings.port = null;
+          $scope.command.healthSettings.requestPath = null;
+        } else if (!this.requiresHealthCheckPath()) {
+          $scope.command.healthSettings.requestPath = null;
+        }
+      };
+    },
+  ],
+);

package/src/serverGroup/configure/wizard/healthSettings/healthSettings.html

@@ -0,0 +1,5 @@
+<div class="row">
+  <div class="col-md-12">
+    <azure-server-group-health-settings-selector command="command"></azure-server-group-health-settings-selector>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/healthSettings/healthSettingsSelector.directive.html

@@ -0,0 +1,32 @@
+<div class="container-fluid form-horizontal" ng-controller="azureServerGroupHealthSettingsCtrl as healthCtrl">
+  <div class="form-group">
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Protocol</div>
+      <div class="col-md-7">
+        <select
+          class="form-control input-sm"
+          ng-model="command.healthSettings.protocol"
+          ng-options="protocol.name as protocol.displayName for protocol in healthCtrl.healthCheckProtocols"
+          ng-change="healthCtrl.changeHealthCheckProtocol(command.healthSettings.protocol)"
+        ></select>
+      </div>
+    </div>
+    <div class="form-group" ng-if="command.healthSettings.protocol">
+      <div class="col-md-3 sm-label-right">Port</div>
+      <div class="col-md-7">
+        <input class="form-control input-sm" type="text" ng-model="command.healthSettings.port" required />
+      </div>
+    </div>
+    <div class="form-group" ng-if="healthCtrl.requiresHealthCheckPath()">
+      <div class="col-md-3 sm-label-right">Path</div>
+      <div class="col-md-7">
+        <input class="form-control input-sm" type="text" ng-model="command.healthSettings.requestPath" required />
+      </div>
+    </div>
+  </div>
+  <div class="form-group small" style="margin-top: 20px">
+    <div class="col-md-9 col-md-offset-3">
+      <p>Health settings here will be applied directly to the VM Scale Set.</p>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/healthSettings/healthSettingsSelector.directive.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_HEALTHSETTINGS_HEALTHSETTINGSSELECTOR_DIRECTIVE =
+  'spinnaker.azure.serverGroup.configure.wizard.healthSettings.selector.directive';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_HEALTHSETTINGS_HEALTHSETTINGSSELECTOR_DIRECTIVE; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_HEALTHSETTINGS_HEALTHSETTINGSSELECTOR_DIRECTIVE, []).directive(
+  'azureServerGroupHealthSettingsSelector',
+  [
+    'azureServerGroupConfigurationService',
+    function () {
+      return {
+        restrict: 'E',
+        templateUrl: require('./healthSettingsSelector.directive.html'),
+        scope: {
+          command: '=',
+        },
+      };
+    },
+  ],
+);

package/src/serverGroup/configure/wizard/image/ServerGroupImageSettings.controller.js

@@ -0,0 +1,34 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { ModalWizard } from '@spinnaker/core';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_IMAGESETTINGS_SERVERGROUPIMAGESETTINGS_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.imageSettings.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_IMAGESETTINGS_SERVERGROUPIMAGESETTINGS_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_IMAGESETTINGS_SERVERGROUPIMAGESETTINGS_CONTROLLER, []).controller(
+  'azureServerGroupImageSettingsCtrl',
+  [
+    '$scope',
+    function ($scope) {
+      this.clearImage = function () {
+        if ($scope.command.image.isCustom == false) {
+          $scope.command.image = { isCustom: false };
+        } else {
+          $scope.command.image.region = $scope.command.region;
+        }
+      };
+
+      ModalWizard.markComplete('image-settings');
+
+      $scope.$watch('form.$valid', function (newVal) {
+        if (newVal) {
+          ModalWizard.markClean('image-settings');
+        } else {
+          ModalWizard.markDirty('image-settings');
+        }
+      });
+    },
+  ],
+);

package/src/serverGroup/configure/wizard/image/imageSettings.html

@@ -0,0 +1,5 @@
+<div class="row">
+  <div class="col-md-12">
+    <azure-server-group-image-settings-selector command="command"></azure-server-group-image-settings-selector>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/image/imageSettingsSelector.directive.html

@@ -0,0 +1,33 @@
+<div class="container-fluid form-horizontal" ng-controller="azureServerGroupImageSettingsCtrl as imageCtrl">
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right">Use custom image?</div>
+    <input type="checkbox" ng-model="command.image.isCustom" ng-change="imageCtrl.clearImage()" />
+  </div>
+
+  <div class="form-group" ng-if="command.image.isCustom === true">
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Region</div>
+      <div class="col-md-6">
+        <span>{{command.image.region}}</span>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Image Name</div>
+      <div class="col-md-6">
+        <input type="text" class="input-sm" ng-model="command.image.imageName" required />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">OS Type</div>
+      <div class="col-md-6">
+        <input type="text" class="input-sm" ng-model="command.image.ostype" required />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">URI</div>
+      <div class="col-md-6">
+        <input type="text" class="input-sm" ng-model="command.image.uri" required />
+      </div>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/image/imageSettingsSelector.directive.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_IMAGESETTINGS_IMAGESETTINGS_DIRECTIVE =
+  'spinnaker.azure.serverGroup.configure.wizard.imageSettingsSelector.directive';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_IMAGESETTINGS_IMAGESETTINGS_DIRECTIVE; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_IMAGESETTINGS_IMAGESETTINGS_DIRECTIVE, []).directive(
+  'azureServerGroupImageSettingsSelector',
+  [
+    'azureServerGroupConfigurationService',
+    function () {
+      return {
+        restrict: 'E',
+        templateUrl: require('./imageSettingsSelector.directive.html'),
+        scope: {
+          command: '=',
+        },
+      };
+    },
+  ],
+);

package/src/serverGroup/configure/wizard/instanceArchetype.html

@@ -0,0 +1,33 @@
+<form
+  ng-controller="azureInstanceArchetypeCtrl as instanceArchetypeCtrl"
+  class="container-fluid form-horizontal"
+  name="form"
+  novalidate
+>
+  <div class="modal-body">
+    <instance-archetype-selector command="command"></instance-archetype-selector>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default pull-left" ng-click="wizard.previousPage(form.$valid)">
+      <span class="glyphicon glyphicon-chevron-left"></span> Back
+    </button>
+    <button ng-disabled="taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">
+      Cancel
+    </button>
+    <submit-button
+      ng-if="ctrl.showSubmitButton()"
+      is-disabled="form.$invalid || !ctrl.isValid() || taskMonitor.submitting"
+      label="command.viewState.submitButtonLabel"
+      submitting="taskMonitor.submitting"
+      on-click="ctrl.submit()"
+      is-new="true"
+    ></submit-button>
+    <button
+      class="btn btn-primary"
+      ng-disabled="!command.viewState.instanceProfile || form.$invalid"
+      ng-click="wizard.nextPage(form.$valid)"
+    >
+      Next <span class="glyphicon glyphicon-chevron-right"></span>
+    </button>
+  </div>
+</form>

package/src/serverGroup/configure/wizard/instanceType/instanceType.html

@@ -0,0 +1,10 @@
+<div ng-show="!!(command.region)">
+  <v2-instance-archetype-selector ng-if="command.region" command="command"></v2-instance-archetype-selector>
+  <div style="padding: 0 15px">
+    <v2-instance-type-selector
+      ng-if="command.viewState.instanceProfile && !(command.viewState.instanceProfile === 'custom' || command.viewState.instanceProfile === 'buildCustom' )"
+      command="command"
+    ></v2-instance-type-selector>
+  </div>
+</div>
+<h5 class="text-center" ng-if="!command.region">Please select a region.</h5>

package/src/serverGroup/configure/wizard/instanceType.html

@@ -0,0 +1,33 @@
+<form
+  ng-controller="azureInstanceTypeCtrl as instanceTypeCtrl"
+  class="container-fluid form-horizontal"
+  name="form"
+  novalidate
+>
+  <div class="modal-body">
+    <instance-type-selector command="command"></instance-type-selector>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default pull-left" ng-click="wizard.previousPage(form.$valid)">
+      <span class="glyphicon glyphicon-chevron-left"></span> Back
+    </button>
+    <button ng-disabled="taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">
+      Cancel
+    </button>
+    <submit-button
+      ng-if="ctrl.showSubmitButton()"
+      is-disabled="form.$invalid || !ctrl.isValid() || taskMonitor.submitting"
+      label="command.viewState.submitButtonLabel"
+      submitting="taskMonitor.submitting"
+      on-click="ctrl.submit()"
+      is-new="true"
+    ></submit-button>
+    <button
+      class="btn btn-primary"
+      ng-disabled="!command.viewState.instanceProfile || form.$invalid"
+      ng-click="wizard.nextPage(form.$valid)"
+    >
+      Next <span class="glyphicon glyphicon-chevron-right"></span>
+    </button>
+  </div>
+</form>