@spinnaker/azure 0.0.0-main-2

package/src/serverGroup/configure/wizard/loadBalancers/ServerGroupLoadBalancers.controller.js

@@ -0,0 +1,137 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { InfrastructureCaches, LOAD_BALANCER_READ_SERVICE, ModalWizard, NetworkReader } from '@spinnaker/core';
+
+import Utility from '../../../../utility';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_SERVERGROUPLOADBALANCERS_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.loadBalancer.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_SERVERGROUPLOADBALANCERS_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_SERVERGROUPLOADBALANCERS_CONTROLLER, [
+  LOAD_BALANCER_READ_SERVICE,
+]).controller('azureServerGroupLoadBalancersCtrl', [
+  '$scope',
+  'loadBalancerReader',
+  function ($scope, loadBalancerReader) {
+    ModalWizard.markClean('load-balancers');
+
+    function loadVnetSubnets(item, type) {
+      loadBalancerReader
+        .getLoadBalancerDetails('azure', $scope.command.credentials, $scope.command.region, item)
+        .then(function (LBs) {
+          if (!LBs || LBs.length === 0) {
+            // load the subnet and vnets without a load balancer
+            const attachedVnet = $scope.command.selectedVnet;
+            const attachedSubnet = $scope.command.selectedSubnet;
+            $scope.command.selectedVnetSubnets = [];
+            $scope.command.allVnets = [];
+            NetworkReader.listNetworks().then(function (vnets) {
+              if (vnets.azure) {
+                vnets.azure.forEach((selectedVnet) => {
+                  if (
+                    selectedVnet.account === $scope.command.credentials &&
+                    selectedVnet.region === $scope.command.region
+                  ) {
+                    $scope.command.allVnets.push(selectedVnet);
+
+                    selectedVnet.subnets.map(function (subnet) {
+                      let addSubnet = true;
+                      if (subnet.devices) {
+                        subnet.devices.map(function (device) {
+                          // only add subnets that are not assigned to an ApplicationGateway
+                          if (device && device.type === 'applicationGateways') {
+                            addSubnet = false;
+                          }
+                        });
+                      }
+                      if (addSubnet) {
+                        $scope.command.selectedVnetSubnets.push(subnet.name);
+                        if (subnet.name === attachedSubnet) {
+                          $scope.command.selectedSubnet = attachedSubnet;
+                        }
+                      }
+                    });
+                  }
+                });
+              }
+            });
+          } else if (LBs && LBs.length === 1) {
+            const selectedLoadBalancer = LBs[0];
+            const attachedVnet = $scope.command.selectedVnet;
+            $scope.command.selectedVnet = null;
+            $scope.command.selectedVnetSubnets = [];
+            $scope.command.allVnets = [];
+            NetworkReader.listNetworks().then(function (vnets) {
+              if (vnets.azure) {
+                vnets.azure.forEach((selectedVnet) => {
+                  if (
+                    selectedVnet.account === $scope.command.credentials &&
+                    selectedVnet.region === $scope.command.region
+                  ) {
+                    $scope.command.allVnets.push(selectedVnet);
+                  }
+                  if (
+                    selectedVnet.account === $scope.command.credentials &&
+                    selectedVnet.region === $scope.command.region &&
+                    ((type === 'Azure Application Gateway' && selectedVnet.name == selectedLoadBalancer.vnet) ||
+                      (type === 'Azure Load Balancer' && selectedVnet.name === attachedVnet.name))
+                  ) {
+                    $scope.command.selectedVnet = selectedVnet;
+                    selectedVnet.subnets.map(function (subnet) {
+                      let addSubnet = true;
+                      if (subnet.devices) {
+                        subnet.devices.map(function (device) {
+                          // only add subnets that are not assigned to an ApplicationGateway
+                          if (device && device.type === 'applicationGateways') {
+                            addSubnet = false;
+                          }
+                        });
+                      }
+                      if (addSubnet) {
+                        $scope.command.selectedVnetSubnets.push(subnet.name);
+                      }
+                    });
+                  }
+                });
+              }
+            });
+          }
+        });
+    }
+
+    if ($scope.command.credentials && $scope.command.region) {
+      $scope.command.viewState.networkSettingsConfigured = true;
+      $scope.command.selectedVnetSubnets = [];
+      if ($scope.command.loadBalancerName !== null && typeof $scope.command.loadBalancerName !== 'undefined') {
+        $scope.useLoadBalancer = true;
+      }
+      loadVnetSubnets($scope.command.loadBalancerName, $scope.command.loadBalancerType);
+    }
+
+    this.loadBalancerChanged = function (item) {
+      $scope.command.viewState.networkSettingsConfigured = true;
+      ModalWizard.markComplete('load-balancers');
+
+      const loadBalancers = $scope.command.backingData.loadBalancers;
+      let loadBalancerType = null;
+
+      if (loadBalancers) {
+        const loadBalancerToFind = loadBalancers.find((lb) => lb.name === item);
+        if (loadBalancerToFind) {
+          loadBalancerType = Utility.getLoadBalancerType(loadBalancerToFind.loadBalancerType).type;
+        }
+      }
+
+      if (item === null) {
+        $scope.command.loadBalancerName = null;
+      }
+
+      $scope.command.selectedVnetSubnets = [];
+      $scope.command.loadBalancerType = loadBalancerType;
+      InfrastructureCaches.clearCache('networks');
+      loadVnetSubnets(item, loadBalancerType);
+    };
+  },
+]);

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

@@ -0,0 +1,3 @@
+<div class="row">
+  <azure-server-group-load-balancers-selector command="command"></azure-server-group-load-balancers-selector>
+</div>

package/src/serverGroup/configure/wizard/loadBalancers/serverGroupLoadBalancersSelector.directive.html

@@ -0,0 +1,41 @@
+<h5 class="text-center" ng-if="!command.viewState.loadBalancersConfigured">Please select an account and region.</h5>
+<div
+  ng-if="command.viewState.loadBalancersConfigured"
+  ng-controller="azureServerGroupLoadBalancersCtrl as loadBalancerCtrl"
+>
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right"><b>Load Balancers</b></div>
+    <div class="col-md-7">
+      <label for="useLoadBalancerCheckbox">
+        <input
+          type="checkbox"
+          ng-model="useLoadBalancer"
+          id="useLoadBalancerCheckbox"
+          ng-change="loadBalancerCtrl.loadBalancerChanged(null)"
+        />
+        Use load balancer
+      </label>
+      <ui-select
+        ng-model="command.loadBalancerName"
+        class="form-control input-sm"
+        ng-change="loadBalancerCtrl.loadBalancerChanged($select.selected)"
+        ng-show="useLoadBalancer"
+      >
+        <ui-select-match placeholder="select a loadBalancer">{{$select.selected}}</ui-select-match>
+        <ui-select-choices repeat="loadBalancer in command.loadBalancers | filter: $select.search">
+          <span ng-bind-html="loadBalancer | highlight: $select.search"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <div class="form-group" ng-show="command.loadBalancerName">
+    <div class="col-md-12">
+      <div class="well-compact" ng-class="well">
+        <h5 class="text-center">
+          <p>The load balancer {{command.loadBalancerName}} is an {{command.loadBalancerType}}</p>
+        </h5>
+      </div>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/loadBalancers/serverGroupLoadBalancersSelector.directive.js

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

package/src/serverGroup/configure/wizard/networkSettings/ServerGroupNetworkSettings.controller.js

@@ -0,0 +1,44 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { ModalWizard } from '@spinnaker/core';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_NETWORKSETTINGS_SERVERGROUPNETWORKSETTINGS_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.networkSettings.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_NETWORKSETTINGS_SERVERGROUPNETWORKSETTINGS_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_NETWORKSETTINGS_SERVERGROUPNETWORKSETTINGS_CONTROLLER, []).controller(
+  'azureServerGroupNetworkSettingsCtrl',
+  [
+    '$scope',
+    function ($scope) {
+      ModalWizard.markClean('network-settings');
+
+      $scope.command.selectedVnet = {
+        name: $scope.command.vnet,
+      };
+
+      $scope.command.selectedSubnet = $scope.command.subnet;
+
+      this.vnetChanged = function (item) {
+        $scope.command.vnet = item;
+        $scope.command.subnet = $scope.command.selectedSubnet = null;
+        $scope.command.selectedVnetSubnets = item.subnets.map((s) => s.name);
+      };
+
+      this.networkSettingsChanged = function (item) {
+        $scope.command.vnet = $scope.command.selectedVnet.name;
+        $scope.command.subnet = item;
+        ModalWizard.markComplete('network-settings');
+      };
+
+      this.getVnetName = function () {
+        if ($scope.command.selectedVnet) {
+          return $scope.command.selectedVnet.name;
+        } else {
+          return 'Virtual network was not selected';
+        }
+      };
+    },
+  ],
+);

package/src/serverGroup/configure/wizard/networkSettings/ServerGroupNetworkSettingsSelector.directive.html

@@ -0,0 +1,54 @@
+<h5 class="text-center" ng-if="!command.viewState.networkSettingsConfigured">
+  Please select an account, a region and a load balancer first.
+</h5>
+<div
+  ng-if="command.viewState.networkSettingsConfigured"
+  ng-controller="azureServerGroupNetworkSettingsCtrl as networkSettingCtrl"
+>
+  <div class="form-group" ng-if="command.loadBalancerType === 'Azure Load Balancer' || !command.loadBalancerType">
+    <div class="col-md-3 sm-label-right">Virtual Network</div>
+    <div class="col-md-7">
+      <ui-select
+        required
+        class="form-control input-sm"
+        ng-model="command.selectedVnet"
+        on-select="networkSettingCtrl.vnetChanged($item)"
+      >
+        <ui-select-match placeholder="Select from existing virtual networks">{{$select.selected.name}}</ui-select-match>
+        <ui-select-choices repeat="selectVnet in command.allVnets">
+          <span ng-bind-html="selectVnet.name"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right"><b>Subnets</b></div>
+    <div class="col-md-7">
+      <ui-select
+        required
+        ng-model="command.selectedSubnet"
+        class="form-control input-sm"
+        on-select="networkSettingCtrl.networkSettingsChanged($item)"
+      >
+        <ui-select-match placeholder="Select from an existing subnet">{{$select.selected}}</ui-select-match>
+        <ui-select-choices repeat="subnet in command.selectedVnetSubnets | filter: $select.search">
+          <span ng-bind-html="subnet | highlight: $select.search"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <div class="form-group" ng-if="!command.viewState.hideClusterNamePreview">
+    <div class="col-md-12">
+      <div class="well-compact" ng-class="well">
+        <h5 class="text-center">
+          <p>Your server group will be using a subnet in virtual network:</p>
+          <p>
+            <strong> {{networkSettingCtrl.getVnetName()}} </strong>
+          </p>
+        </h5>
+      </div>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/networkSettings/ServerGroupNetworkSettingsSelector.directive.js

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

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

@@ -0,0 +1,3 @@
+<div class="row">
+  <azure-server-group-network-settings-selector command="command"></azure-server-group-network-settings-selector>
+</div>

package/src/serverGroup/configure/wizard/securityGroup/ServerGroupSecurityGroups.controller.js

@@ -0,0 +1,28 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { ModalWizard } from '@spinnaker/core';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUP_SERVERGROUPSECURITYGROUPS_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.securityGroups.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUP_SERVERGROUPSECURITYGROUPS_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUP_SERVERGROUPSECURITYGROUPS_CONTROLLER, []).controller(
+  'azureServerGroupSecurityGroupsCtrl',
+  [
+    '$scope',
+    function ($scope) {
+      ModalWizard.markClean('security-groups');
+      ModalWizard.markComplete('security-groups');
+
+      $scope.command.selectedSecurityGroup = {
+        id: $scope.command.securityGroupName,
+      };
+
+      this.securityGroupChanged = function (securityGroup) {
+        $scope.command.securityGroupName = securityGroup.id;
+        ModalWizard.markComplete('security-groups');
+      };
+    },
+  ],
+);

package/src/serverGroup/configure/wizard/securityGroup/securityGroups.html

@@ -0,0 +1,3 @@
+<div class="row">
+  <azure-server-group-security-groups-selector command="command"></azure-server-group-security-groups-selector>
+</div>

package/src/serverGroup/configure/wizard/securityGroup/serverGroupSecurityGroupsSelector.directive.html

@@ -0,0 +1,40 @@
+<h5 class="text-center" ng-if="!command.viewState.securityGroupsConfigured">Please select an account and region.</h5>
+<div
+  ng-if="command.viewState.securityGroupsConfigured"
+  ng-controller="azureServerGroupSecurityGroupsCtrl as securityGroupCtrl"
+>
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right">
+      <b><firewall-label label="Firewalls"></firewall-label></b>
+    </div>
+    <div class="col-md-7">
+      <ui-select
+        ng-model="command.selectedSecurityGroup"
+        class="form-control input-sm"
+        on-select="securityGroupCtrl.securityGroupChanged($item)"
+      >
+        <ui-select-match placeholder="select a {{firewallLabel}}">{{$select.selected.id}}</ui-select-match>
+        <ui-select-choices
+          repeat="securityGroup in command.backingData.filtered.securityGroups | anyFieldFilter: {name: $select.search, id: $select.search}"
+        >
+          <span ng-bind-html="securityGroup.id | highlight: $select.search"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <div class="form-group small" style="margin-top: 20px">
+    <div class="col-md-9 col-md-offset-3">
+      <p>
+        <span ng-if="refreshing"><span class="fa fa-sync-alt fa-spin"></span></span>
+        <firewall-label label="Firewalls"></firewall-label>
+        <span ng-if="!refreshing">last refreshed {{ getSecurityGroupRefreshTime() | timestamp }}</span>
+        <span ng-if="refreshing"> refreshing...</span>
+      </p>
+      <p>
+        If you're not finding a <firewall-label label="firewall"></firewall-label> that was recently added,
+        <a href ng-click="refreshSecurityGroups()">click here</a> to refresh the list.
+      </p>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/securityGroup/serverGroupSecurityGroupsSelector.directive.js

@@ -0,0 +1,38 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { FirewallLabels, InfrastructureCaches } from '@spinnaker/core';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUP_SERVERGROUPSECURITYGROUPSSELECTOR_DIRECTIVE =
+  'spinnaker.azure.serverGroup.configure.securityGroupSelector.directive';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUP_SERVERGROUPSECURITYGROUPSSELECTOR_DIRECTIVE; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUP_SERVERGROUPSECURITYGROUPSSELECTOR_DIRECTIVE, []).directive(
+  'azureServerGroupSecurityGroupsSelector',
+  [
+    'azureServerGroupConfigurationService',
+    function (azureServerGroupConfigurationService) {
+      return {
+        restrict: 'E',
+        scope: {
+          command: '=',
+        },
+        templateUrl: require('./serverGroupSecurityGroupsSelector.directive.html'),
+        link: function (scope) {
+          scope.firewallLabel = FirewallLabels.get('firewall');
+
+          scope.getSecurityGroupRefreshTime = function () {
+            return InfrastructureCaches.get('securityGroups').getStats().ageMax;
+          };
+
+          scope.refreshSecurityGroups = function () {
+            scope.refreshing = true;
+            azureServerGroupConfigurationService.refreshSecurityGroups(scope.command).then(function () {
+              scope.refreshing = false;
+            });
+          };
+        },
+      };
+    },
+  ],
+);

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

@@ -0,0 +1,61 @@
+<div>
+  <div ng-if="state.requiresTemplateSelection">
+    <ng-include src="pages.templateSelection"></ng-include>
+  </div>
+  <div ng-if="!state.loaded" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div>
+    <form name="serverGroupWizardForm" class="form-horizontal" novalidate validate-on-submit>
+      <v2-modal-wizard
+        ng-show="state.loaded && !state.requiresTemplateSelection"
+        heading="{{title}}"
+        task-monitor="taskMonitor"
+        dismiss="$dismiss()"
+      >
+        <v2-wizard-page key="basic-settings" label="Basic Settings" hide-subheading="true">
+          <ng-include src="pages.basicSettings"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="image-settings" label="Image">
+          <ng-include src="pages.imageSettings"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="load-balancers" label="Load Balancers" mark-complete-on-view="false">
+          <ng-include src="pages.loadBalancers"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="network-settings" label="Network Settings" mark-complete-on-view="false">
+          <ng-include src="pages.networkSettings"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="health-settings" label="Health" mark-complete-on-view="false">
+          <ng-include src="pages.healthSettings"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="security-groups" label="{{firewallsLabel}}" mark-complete-on-view="false" done="true">
+          <ng-include src="pages.securityGroups"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="instance-type" label="Instance Type" mark-complete-on-view="false" done="false">
+          <ng-include src="pages.instanceType"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="zones" label="Zones" mark-complete-on-view="false" done="false">
+          <ng-include src="pages.zones"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="tags" label="Tags" mark-complete-on-view="false" done="true">
+          <ng-include src="pages.tags"></ng-include>
+        </v2-wizard-page>
+        <v2-wizard-page key="advanced-settings" label="Advanced Settings" mark-complete-on-view="false" done="true">
+          <ng-include src="pages.advancedSettings"></ng-include>
+        </v2-wizard-page>
+      </v2-modal-wizard>
+      <div class="modal-footer" ng-if="state.loaded">
+        <button ng-disabled="taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">
+          Cancel
+        </button>
+        <submit-button
+          is-disabled="taskMonitor.submitting || !ctrl.isValid()"
+          label="command.viewState.submitButtonLabel"
+          submitting="taskMonitor.submitting"
+          on-click="serverGroupWizardForm.$valid && ctrl.submit()"
+          is-new="true"
+        ></submit-button>
+      </div>
+    </form>
+  </div>
+</div>

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

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

package/src/serverGroup/configure/wizard/tags/tagsSelector.directive.html

@@ -0,0 +1,16 @@
+<div class="form-group">
+  <div class="col-md-12" style="color: red" ng-if="!tagsSelectorCtrl.getTagResult().isValid">
+    {{ tagsSelectorCtrl.getTagResult().errorMessage }}
+  </div>
+  <div class="col-md-4 sm-label-left">
+    <b>Custom Tags</b>
+    <help-field key="azure.serverGroup.customTags"></help-field>
+  </div>
+  <div class="col-md-12">
+    <map-editor
+      model="tagsSelectorCtrl.command.instanceTags"
+      add-button-label="Add New Tags"
+      allow-empty="true"
+    ></map-editor>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/tags/tagsSelector.directive.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import { module } from 'angular';
+
+import Utility from '../../../../utility';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_TAGS_TAGSSELECTOR_DIRECTIVE =
+  'spinnaker.azure.serverGroup.configure.wizard.tags.directive';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_TAGS_TAGSSELECTOR_DIRECTIVE; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_TAGS_TAGSSELECTOR_DIRECTIVE, [])
+  .directive('azureTagsSelector', function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./tagsSelector.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'tagsSelectorCtrl',
+      controller: 'TagsSelectorCtrl',
+    };
+  })
+  .controller('TagsSelectorCtrl', [
+    '$scope',
+    function () {
+      this.getTagResult = function () {
+        return Utility.checkTags(this.command.instanceTags);
+      };
+    },
+  ]);

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

@@ -0,0 +1,9 @@
+<deploy-initializer
+  cloud-provider="azure"
+  command="command"
+  application="application"
+  parent-state="state"
+  dismiss="ctrl.cancel()"
+  template-selection-text="ctrl.templateSelectionText"
+  on-template-selected="ctrl.templateSelected()"
+></deploy-initializer>

package/src/serverGroup/configure/wizard/zones/zoneSelector.directive.html

@@ -0,0 +1,21 @@
+<div class="form-group" ng-if="vm.command.region">
+  <div class="col-md-10">
+    <label ng-if="vm.command.backingData.filtered.zones && vm.command.backingData.filtered.zones.length !== 0">
+      <input type="checkbox" ng-model="vm.command.zonesEnabled" ng-change="vm.updateEnableInboundNAT()" />
+      Set availability zones
+    </label>
+    <ui-select multiple ng-if="vm.command.zonesEnabled" ng-model="vm.command.zones" class="form-control input-sm">
+      <ui-select-match>{{ $item }}</ui-select-match>
+      <ui-select-choices repeat="zone as zone in vm.command.backingData.filtered.zones">
+        <span>{{ zone }}</span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>
+<h5 class="text-center" ng-if="!vm.command.region">Please select a region.</h5>
+<h5
+  class="text-center"
+  ng-if="vm.command.region && !(vm.command.backingData.filtered.zones && vm.command.backingData.filtered.zones.length !== 0)"
+>
+  Current region does not support availability zones
+</h5>

package/src/serverGroup/configure/wizard/zones/zoneSelector.directive.js

@@ -0,0 +1,28 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_ZONESELECTOR_DIRECTIVE =
+  'spinnaker.azure.serverGroup.configure.wizard.capacity.zone.directive';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_ZONESELECTOR_DIRECTIVE; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_ZONESELECTOR_DIRECTIVE, []).directive('azureZoneSelector', function () {
+  return {
+    restrict: 'E',
+    templateUrl: require('./zoneSelector.directive.html'),
+    scope: {},
+    bindToController: {
+      command: '=',
+    },
+    controllerAs: 'vm',
+    controller: [
+      '$scope',
+      function ($scope) {
+        this.updateEnableInboundNAT = () => {
+          if ($scope.vm.command.zonesEnabled) {
+            $scope.vm.command.enableInboundNAT = false;
+          }
+        };
+      },
+    ],
+  };
+});