@spinnaker/azure 0.0.0-main-2

package/src/serverGroup/configure/serverGroupConfiguration.service.spec.js

@@ -0,0 +1,209 @@
+'use strict';
+
+describe('Service: azureServerGroupConfiguration', function () {
+  var service;
+
+  beforeEach(window.module(require('./serverGroupConfiguration.service').name));
+
+  beforeEach(
+    window.inject(function (_azureServerGroupConfigurationService_) {
+      service = _azureServerGroupConfigurationService_;
+
+      this.allLoadBalancers = [
+        {
+          name: 'elb-1',
+          accounts: [
+            {
+              name: 'test',
+              regions: [
+                {
+                  name: 'us-east-1',
+                  loadBalancers: [
+                    { region: 'us-east-1', vpcId: null, name: 'elb-1' },
+                    { region: 'us-east-1', vpcId: 'vpc-1', name: 'elb-1' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: 'elb-2',
+          accounts: [
+            {
+              name: 'test',
+              regions: [
+                {
+                  name: 'us-east-1',
+                  loadBalancers: [
+                    { region: 'us-east-1', vpcId: null, name: 'elb-2' },
+                    { region: 'us-east-1', vpcId: 'vpc-2', name: 'elb-2' },
+                  ],
+                },
+                {
+                  name: 'us-west-1',
+                  loadBalancers: [{ region: 'us-west-1', vpcId: null, name: 'elb-2' }],
+                },
+              ],
+            },
+          ],
+        },
+      ];
+    }),
+  );
+
+  describe('configureSecurityGroupOptions', function () {
+    beforeEach(function () {
+      this.allSecurityGroups = {
+        azurecred1: {
+          eastus: [
+            {
+              'onlyazure-web': {
+                account: 'azure-cred1',
+                accountName: 'azure-cred1',
+                id: 'onlyazure-web',
+                name: 'onlyazure-web',
+                network: 'na',
+                provider: 'azure',
+                region: 'eastus',
+              },
+            },
+            {
+              'onlyazure-cache': {
+                account: 'azure-cred1',
+                accountName: 'azure-cred1',
+                id: 'onlyazure-cache',
+                name: 'onlyazure-cache',
+                network: 'na',
+                provider: 'azure',
+                region: 'eastus',
+              },
+            },
+          ],
+          westus: [
+            {
+              'onlyazure-web': {
+                account: 'azure-cred1',
+                accountName: 'azure-cred1',
+                id: 'onlyazure-web',
+                name: 'onlyazure-web',
+                network: 'na',
+                provider: 'azure',
+                region: 'westus',
+              },
+            },
+          ],
+        },
+      };
+
+      this.command = {
+        backingData: {
+          securityGroups: this.allSecurityGroups,
+          filtered: {},
+        },
+        viewState: {
+          securityGroupsConfigured: false,
+        },
+        credentials: 'azurecred1',
+        region: 'westus',
+      };
+    });
+
+    it('finds matching firewalls and assigns them to the filtered list the first time', function () {
+      this.command.region = 'westus';
+      var expected = this.allSecurityGroups.azurecred1['westus'];
+
+      var result = service.configureSecurityGroupOptions(this.command);
+
+      expect(this.command.backingData.filtered.securityGroups).toEqual(expected);
+      expect(result).toEqual({ dirty: { securityGroups: true } });
+      expect(this.command.viewState.securityGroupConfigured).toBeTrue;
+    });
+
+    it('finds matching firewalls, sets dirty flag for subsequent time', function () {
+      this.command.region = 'eastus';
+      this.command.backingData.filtered.securityGroups = this.allSecurityGroups.azurecred1['westus'];
+      var expected = this.allSecurityGroups.azurecred1['eastus'];
+
+      var result = service.configureSecurityGroupOptions(this.command);
+
+      expect(this.command.backingData.filtered.securityGroups).toEqual(expected);
+      expect(result).toEqual({ dirty: { securityGroups: true } });
+      expect(this.command.viewState.securityGroupConfigured).toBeTrue;
+    });
+
+    it('clears the selected securityGroup', function () {
+      this.command.selectedSecurityGroup = {
+        'onlyazure-web': {
+          account: 'azure-cred1',
+          accountName: 'azure-cred1',
+          id: 'onlyazure-web',
+          name: 'onlyazure-web',
+          network: 'na',
+          provider: 'azure',
+          region: 'westus',
+        },
+      };
+      this.command.region = 'eastus';
+
+      var result = service.configureSecurityGroupOptions(this.command);
+
+      expect(this.command.selectedSecurityGroup).toBeNull;
+      expect(result).toEqual({ dirty: { securityGroups: true } });
+      expect(this.command.viewState.securityGroupConfigured).toBeTrue;
+    });
+
+    it('returns no firewalls if none match', function () {
+      this.command.region = 'eastasia';
+      this.command.backingData.filtered.securityGroups = this.allSecurityGroups.azurecred1['westus'];
+
+      var result = service.configureSecurityGroupOptions(this.command);
+
+      expect(this.command.selectedSecurityGroup).toBeUndefined;
+      expect(result).toEqual({ dirty: { securityGroups: true } });
+      expect(this.command.backingData.filtered.securityGroups).toEqual([]);
+      expect(this.command.viewState.securityGroupConfigured).toBeFalse;
+    });
+
+    it('returns empty zone list if region is not supported', function () {
+      this.command.region = 'eastasia';
+      this.command.backingData.credentialsKeyedByAccount = {};
+      this.command.backingData.credentialsKeyedByAccount[this.command.credentials] = {
+        regionsSupportZones: [],
+        availabilityZones: ['1', '2', '3'],
+      };
+
+      service.configureZones(this.command);
+
+      expect(this.command.backingData.filtered.zones).toEqual([]);
+    });
+
+    it('returns actual zone list if region is supported', function () {
+      this.command.region = 'eastasia';
+      this.command.backingData.credentialsKeyedByAccount = {};
+      this.command.backingData.credentialsKeyedByAccount[this.command.credentials] = {
+        regionsSupportZones: ['eastasia'],
+        availabilityZones: ['1', '2', '3'],
+      };
+
+      service.configureZones(this.command);
+
+      expect(this.command.backingData.filtered.zones).toEqual(
+        this.command.backingData.credentialsKeyedByAccount[this.command.credentials].availabilityZones,
+      );
+    });
+
+    it('does not return zone list if region is not specified', function () {
+      this.command.region = null;
+      this.command.backingData.credentialsKeyedByAccount = {};
+      this.command.backingData.credentialsKeyedByAccount[this.command.credentials] = {
+        regionsSupportZones: ['eastasia'],
+        availabilityZones: ['1', '2', '3'],
+      };
+
+      service.configureZones(this.command);
+
+      expect(this.command.backingData.filtered.zones).toBeUndefined();
+    });
+  });
+});

package/src/serverGroup/configure/wizard/CloneServerGroup.azure.controller.js

@@ -0,0 +1,247 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+
+import { FirewallLabels, ModalWizard, SERVER_GROUP_WRITER, TaskMonitor } from '@spinnaker/core';
+
+import { AZURE_SERVERGROUP_SERVERGROUP_TRANSFORMER } from '../../serverGroup.transformer';
+import { AZURE_SERVERGROUP_CONFIGURE_SERVERGROUPCONFIGURATION_SERVICE } from '../serverGroupConfiguration.service';
+import Utility from '../../../utility';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_AZURE_CONTROLLER =
+  'spinnaker.azure.cloneServerGroup.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_AZURE_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_AZURE_CONTROLLER, [
+  UIROUTER_ANGULARJS,
+  AZURE_SERVERGROUP_CONFIGURE_SERVERGROUPCONFIGURATION_SERVICE,
+  AZURE_SERVERGROUP_SERVERGROUP_TRANSFORMER,
+  SERVER_GROUP_WRITER,
+]).controller('azureCloneServerGroupCtrl', [
+  '$scope',
+  '$uibModalInstance',
+  '$q',
+  '$state',
+  'serverGroupWriter',
+  'azureServerGroupConfigurationService',
+  'serverGroupCommand',
+  'application',
+  'title',
+  function (
+    $scope,
+    $uibModalInstance,
+    $q,
+    $state,
+    serverGroupWriter,
+    azureServerGroupConfigurationService,
+    serverGroupCommand,
+    application,
+    title,
+  ) {
+    $scope.pages = {
+      templateSelection: require('./templateSelection.html'),
+      basicSettings: require('./basicSettings/basicSettings.html'),
+      imageSettings: require('./image/imageSettings.html'),
+      healthSettings: require('./healthSettings/healthSettings.html'),
+      loadBalancers: require('./loadBalancers/loadBalancers.html'),
+      networkSettings: require('./networkSettings/networkSettings.html'),
+      securityGroups: require('./securityGroup/securityGroups.html'),
+      instanceType: require('./instanceType/instanceType.html'),
+      zones: require('./capacity/zones.html'),
+      tags: require('./tags/tags.html'),
+      advancedSettings: require('./advancedSettings/advancedSettings.html'),
+    };
+
+    $scope.firewallsLabel = FirewallLabels.get('Firewalls');
+
+    $scope.title = title;
+
+    $scope.applicationName = application.name;
+    $scope.application = application;
+    $scope.command = serverGroupCommand;
+
+    // Give regions an init value to prevent it being undefined. If so, the React component RegionSelectField would get "undefined" for property regions
+    // and then be unmounted so that the region selector would be hidden.
+    $scope.command.backingData = $scope.command.backingData || {};
+    $scope.command.backingData.filtered = $scope.command.backingData.filtered || {};
+    $scope.command.backingData.filtered.regions = $scope.command.backingData.filtered.regions || [];
+
+    $scope.state = {
+      loaded: false,
+      requiresTemplateSelection: !!serverGroupCommand.viewState.requiresTemplateSelection,
+    };
+
+    this.templateSelectionText = {
+      copied: [
+        'account, region, subnet, cluster name (stack, details)',
+        'load balancers',
+        FirewallLabels.get('firewalls'),
+        'instance type',
+        'all fields on the Advanced Settings page',
+      ],
+      notCopied: [],
+      additionalCopyText:
+        'If a server group exists in this cluster at the time of deployment, its scaling policies will be copied over to the new server group.',
+    };
+
+    if (!$scope.command.viewState.disableStrategySelection) {
+      this.templateSelectionText.notCopied.push(
+        'the deployment strategy (if any) used to deploy the most recent server group',
+      );
+    }
+
+    function onApplicationRefresh() {
+      // If the user has already closed the modal, do not navigate to the new details view
+      if ($scope.$$destroyed) {
+        return;
+      }
+      const cloneStage = $scope.taskMonitor.task.execution.stages.find((stage) => stage.type === 'cloneServerGroup');
+      if (cloneStage && cloneStage.context['deploy.server.groups']) {
+        const newServerGroupName = cloneStage.context['deploy.server.groups'][$scope.command.region];
+        if (newServerGroupName) {
+          const newStateParams = {
+            serverGroup: newServerGroupName,
+            accountId: $scope.command.credentials,
+            region: $scope.command.region,
+            provider: 'azure',
+          };
+          let transitionTo = '^.^.^.clusters.serverGroup';
+          if ($state.includes('**.clusters.serverGroup')) {
+            // clone via details, all view
+            transitionTo = '^.serverGroup';
+          }
+          if ($state.includes('**.clusters.cluster.serverGroup')) {
+            // clone or create with details open
+            transitionTo = '^.^.serverGroup';
+          }
+          if ($state.includes('**.clusters')) {
+            // create new, no details open
+            transitionTo = '.serverGroup';
+          }
+          $state.go(transitionTo, newStateParams);
+        }
+      }
+    }
+
+    function onTaskComplete() {
+      application.serverGroups.refresh();
+      application.serverGroups.onNextRefresh($scope, onApplicationRefresh);
+    }
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: 'Creating your server group',
+      modalInstance: $uibModalInstance,
+      onTaskComplete: onTaskComplete,
+    });
+
+    function configureCommand() {
+      azureServerGroupConfigurationService.configureCommand(application, serverGroupCommand).then(function () {
+        const mode = serverGroupCommand.viewState.mode;
+        if (mode === 'clone' || mode === 'create') {
+          serverGroupCommand.viewState.useAllImageSelection = true;
+        }
+        $scope.state.loaded = true;
+        initializeWizardState();
+        initializeSelectOptions();
+        initializeWatches();
+      });
+    }
+
+    function initializeWizardState() {
+      const mode = serverGroupCommand.viewState.mode;
+      if (mode === 'clone' || mode === 'editPipeline') {
+        ModalWizard.markComplete('basic-settings');
+        ModalWizard.markComplete('load-balancers');
+        ModalWizard.markComplete('network-settings');
+        ModalWizard.markComplete('security-groups');
+        ModalWizard.markComplete('instance-type');
+        ModalWizard.markComplete('zones');
+      }
+    }
+
+    function initializeWatches() {
+      $scope.$watch('command.credentials', createResultProcessor($scope.command.credentialsChanged));
+      $scope.$watch('command.region', createResultProcessor($scope.command.regionChanged));
+    }
+
+    function initializeSelectOptions() {
+      processCommandUpdateResult($scope.command.credentialsChanged($scope.command, true));
+      processCommandUpdateResult($scope.command.regionChanged($scope.command, true));
+    }
+
+    function createResultProcessor(method) {
+      return function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          processCommandUpdateResult(method($scope.command));
+        }
+      };
+    }
+
+    function processCommandUpdateResult(result) {
+      if (result.dirty.loadBalancers) {
+        ModalWizard.markDirty('load-balancers');
+        ModalWizard.markDirty('network-settings');
+      }
+      if (result.dirty.securityGroups) {
+        ModalWizard.markDirty('security-groups');
+      }
+      if (result.dirty.instanceType) {
+        ModalWizard.markDirty('instance-type');
+      }
+      if (result.dirty.zoneEnabled || result.dirty.zones) {
+        ModalWizard.markDirty('zones');
+      }
+    }
+
+    this.submit = function () {
+      if ($scope.command.viewState.mode === 'editPipeline' || $scope.command.viewState.mode === 'createPipeline') {
+        return $uibModalInstance.close($scope.command);
+      }
+      $scope.taskMonitor.submit(function () {
+        return serverGroupWriter.cloneServerGroup($scope.command, application);
+      });
+    };
+
+    this.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+
+    this.toggleSuspendedProcess = function (process) {
+      $scope.command.suspendedProcesses = $scope.command.suspendedProcesses || [];
+      const processIndex = $scope.command.suspendedProcesses.indexOf(process);
+      if (processIndex === -1) {
+        $scope.command.suspendedProcesses.push(process);
+      } else {
+        $scope.command.suspendedProcesses.splice(processIndex, 1);
+      }
+    };
+
+    this.processIsSuspended = function (process) {
+      return $scope.command.suspendedProcesses.includes(process);
+    };
+
+    if (!$scope.state.requiresTemplateSelection) {
+      configureCommand();
+    } else {
+      $scope.state.loaded = true;
+    }
+
+    this.templateSelected = () => {
+      $scope.state.requiresTemplateSelection = false;
+      configureCommand();
+    };
+
+    this.isValid = function () {
+      return (
+        $scope.command &&
+        $scope.command.application &&
+        $scope.command.credentials &&
+        $scope.command.instanceType &&
+        $scope.command.region &&
+        (!$scope.command.zonesEnabled || $scope.command.zones.length !== 0) &&
+        Utility.checkTags($scope.command.instanceTags).isValid
+      );
+    };
+  },
+]);

package/src/serverGroup/configure/wizard/ServerGroupInstanceArchetype.controller.js

@@ -0,0 +1,35 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_SERVERGROUPINSTANCEARCHETYPE_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.instanceArchetype.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_SERVERGROUPINSTANCEARCHETYPE_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_SERVERGROUPINSTANCEARCHETYPE_CONTROLLER, []).controller(
+  'azureInstanceArchetypeCtrl',
+  [
+    '$scope',
+    'instanceTypeService',
+    'modalWizardService',
+    function ($scope, instanceTypeService, modalWizardService) {
+      const wizard = modalWizardService.getWizard();
+
+      $scope.$watch('command.viewState.instanceProfile', function () {
+        if (!$scope.command.viewState.instanceProfile || $scope.command.viewState.instanceProfile === 'custom') {
+          wizard.excludePage('instance-type');
+        } else {
+          wizard.includePage('instance-type');
+          wizard.markClean('instance-profile');
+          wizard.markComplete('instance-profile');
+        }
+      });
+
+      $scope.$watch('command.viewState.instanceType', function (newVal) {
+        if (newVal) {
+          wizard.markClean('instance-profile');
+          wizard.markComplete('instance-profile');
+        }
+      });
+    },
+  ],
+);

package/src/serverGroup/configure/wizard/ServerGroupInstanceType.controller.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_SERVERGROUPINSTANCETYPE_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.instanceType.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_SERVERGROUPINSTANCETYPE_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_SERVERGROUPINSTANCETYPE_CONTROLLER, []).controller('azureInstanceTypeCtrl', [
+  '$scope',
+  'modalWizardService',
+  function ($scope, modalWizardService) {
+    modalWizardService.getWizard().markComplete('instance-type');
+    modalWizardService.getWizard().markClean('instance-type');
+  },
+]);

package/src/serverGroup/configure/wizard/advancedSettings/ServerGroupAdvancedSettings.controller.js

@@ -0,0 +1,25 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const AZURE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_SERVERGROUPADVANCEDSETTINGS_CONTROLLER =
+  'spinnaker.azure.serverGroup.configure.advancedSetting.controller';
+export const name = AZURE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_SERVERGROUPADVANCEDSETTINGS_CONTROLLER; // for backwards compatibility
+module(AZURE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_SERVERGROUPADVANCEDSETTINGS_CONTROLLER, []).controller(
+  'azureServerGroupAdvancedSettingsCtrl',
+  [
+    '$scope',
+    'modalWizardService',
+    function ($scope, modalWizardService) {
+      modalWizardService.getWizard().markComplete('advanced');
+
+      $scope.$watch('form.$valid', function (newVal) {
+        if (newVal) {
+          modalWizardService.getWizard().markClean('advanced');
+        } else {
+          modalWizardService.getWizard().markDirty('advanced');
+        }
+      });
+    },
+  ],
+);

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

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

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

@@ -0,0 +1,138 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">Number of Instances</div>
+      <div class="col-md-2">
+        <input
+          type="number"
+          class="form-control input-sm"
+          ng-model="adv.command.sku.capacity"
+          min="0"
+          max="100"
+          required
+        />
+      </div>
+    </div>
+    <div></div>
+    <div class="form-group">
+      <div class="col-xs-4 sm-label-right">
+        <b>Custom Data</b>
+        <help-field key="azure.serverGroup.customData"></help-field>
+      </div>
+      <div class="col-md-7">
+        <input type="text" class="form-control input-sm" ng-model="adv.command.osConfig.customData" />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Custom Script</b>
+        <help-field key="azure.serverGroup.scriptLocation"></help-field>
+      </div>
+      <div class="col-md-7">
+        <input type="text" class="form-control input-sm" ng-model="adv.command.customScriptsSettings.fileUris" />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>Command To Execute</b>
+        <help-field key="azure.serverGroup.commandToExecute"></help-field>
+      </div>
+      <div class="col-md-7">
+        <input
+          type="text"
+          class="form-control input-sm"
+          ng-model="adv.command.customScriptsSettings.commandToExecute"
+        />
+      </div>
+    </div>
+    <div class="form-group" ng-if="adv.command.loadBalancerType === 'Azure Application Gateway'">
+      <div class="col-md-4 sm-label-right">
+        <input type="checkbox" ng-model="adv.command.enableInboundNAT" ng-disabled="adv.command.zonesEnabled" />
+      </div>
+      <div class="col-md-7">
+        <b>Enable inbound NAT port-forwarding rules to connect to VM instances</b>
+        <help-field key="azure.serverGroup.enableInboundNAT"></help-field>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-4 sm-label-right">
+        <b>User-Assigned Identities</b>
+        <help-field key="azure.serverGroup.userAssignedIdentities"></help-field>
+      </div>
+      <div class="col-md-7">
+        <input type="text" class="form-control input-sm" ng-model="adv.command.userAssignedIdentities" />
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-md-4 sm-label-left">Data Disks</div>
+    <div class="col-md-11">
+      <table class="table table-condensed packed tags">
+        <thead>
+          <tr>
+            <th>
+              LUN
+              <help-field key="azure.serverGroup.lun"></help-field>
+            </th>
+            <th>
+              Size (GB)
+              <help-field key="azure.serverGroup.diskSizeGB"></help-field>
+            </th>
+            <th>
+              Type
+              <help-field key="azure.serverGroup.managedDisk.storageAccountType"></help-field>
+            </th>
+            <th>
+              Caching
+              <help-field key="azure.serverGroup.caching"></help-field>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="disk in adv.command.dataDisks">
+            <td>
+              <input type="number" class="form-control input-sm" ng-model="disk.lun" required min="0" />
+            </td>
+            <td>
+              <input type="number" class="form-control input-sm" ng-model="disk.diskSizeGB" required min="1" />
+            </td>
+            <td>
+              <ui-select ng-model="disk.managedDisk.storageAccountType" class="form-control input-sm" required>
+                <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match>
+                <ui-select-choices
+                  repeat="dataDiskType in adv.command.backingData.dataDiskTypes | filter: $select.search"
+                >
+                  <span ng-bind-html="dataDiskType | highlight: $select.search"></span>
+                </ui-select-choices>
+              </ui-select>
+            </td>
+            <td>
+              <ui-select ng-model="disk.caching" class="form-control input-sm" required>
+                <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match>
+                <ui-select-choices
+                  repeat="dataDiskCachingType in adv.command.backingData.dataDiskCachingTypes | filter: $select.search"
+                >
+                  <span ng-bind-html="dataDiskCachingType | highlight: $select.search"></span>
+                </ui-select-choices>
+              </ui-select>
+            </td>
+            <td>
+              <a class="btn btn-link sm-label" style="margin-top: 0" ng-click="adv.removeDataDisk($index)">
+                <span class="glyphicon glyphicon-trash"></span>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="4">
+              <button class="btn btn-block btn-sm add-new" ng-click="adv.addDataDisk()">
+                <span class="glyphicon glyphicon-plus-sign"></span> Add New Data Disk
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</div>