feat(deploy/blockDevices): Adds a Volume section in the Deploy wizard

app/scripts/modules/amazon/src/help/amazon.help.ts

@@ -80,6 +80,7 @@ const helpContents: { [key: string]: string } = {
   'aws.serverGroup.instanceMonitoring':
     '(Optional) <b>Instance Monitoring</b> whether to enable detailed monitoring of instances. Group metrics must be disabled to update an ASG with Instance Monitoring set to false.',
   'aws.serverGroup.tags': '(Optional) <b>Tags</b> are propagated to the instances in this cluster.',
+  'aws.serverGroup.blockDevice.tags': '(Optional) <b>Tags</b> apply to all the volumes in specified above.',
   'aws.serverGroup.allImages': 'Search for an image that does not match the name of your application.',
   'aws.serverGroup.filterImages': 'Select from a pre-filtered list of images matching the name of your application.',
   'aws.serverGroup.spotPrice': 'The maximum price to pay per hour per instance',

app/scripts/modules/amazon/src/serverGroup/configure/serverGroupConfiguration.service.ts

@@ -83,6 +83,17 @@ export interface IAmazonServerGroupCommandViewState extends IServerGroupCommandV
   spelLoadBalancers: string[];
 }
 
+export interface IServerGroupCommandBlockDevice {
+  deleteOnTermination: boolean;
+  deviceName: string;
+  size: number;
+  volumeType: string;
+  virtualName: string;
+  iops: number;
+  snapshotId: string;
+  encrypted: boolean;
+}
+
 export interface IAmazonServerGroupCommand extends IServerGroupCommand {
   associateIPv6Address?: boolean;
   associatePublicIpAddress: boolean;
@@ -101,6 +112,8 @@ export interface IAmazonServerGroupCommand extends IServerGroupCommand {
   setLaunchTemplate?: boolean;
   unlimitedCpuCredits?: boolean;
   viewState: IAmazonServerGroupCommandViewState;
+  blockDevices: IServerGroupCommandBlockDevice[];
+  blockDeviceTags: string[];
 
   getBlockDeviceMappingsSource: (command: IServerGroupCommand) => IBlockDeviceMappingSource;
   selectBlockDeviceMappingsSource: (command: IServerGroupCommand, selection: string) => void;
@@ -120,6 +133,7 @@ export class AwsServerGroupConfigurationService {
     'GroupTotalInstances',
   ];
   private healthCheckTypes = ['EC2', 'ELB'];
+  private volumeTypes = ['gp2', 'st1', 'io1', 'sc1'];
   private terminationPolicies = [
     'OldestInstance',
     'NewestInstance',
@@ -147,6 +161,7 @@ export class AwsServerGroupConfigurationService {
     command.backingData = {
       enabledMetrics: clone(this.enabledMetrics),
       healthCheckTypes: clone(this.healthCheckTypes),
+      volumeTypes: clone(this.volumeTypes),
       terminationPolicies: clone(this.terminationPolicies),
     } as IAmazonServerGroupCommandBackingData;
   }
@@ -220,6 +235,7 @@ export class AwsServerGroupConfigurationService {
         this.awsInstanceTypeService.getAllTypesByRegion(),
         $q.when(clone(this.enabledMetrics)),
         $q.when(clone(this.healthCheckTypes)),
+        $q.when(clone(this.volumeTypes)),
         $q.when(clone(this.terminationPolicies)),
       ])
       .then(
@@ -232,6 +248,7 @@ export class AwsServerGroupConfigurationService {
           instanceTypes,
           enabledMetrics,
           healthCheckTypes,
+          volumeTypes,
           terminationPolicies,
         ]) => {
           const backingData: Partial<IAmazonServerGroupCommandBackingData> = {
@@ -243,6 +260,7 @@ export class AwsServerGroupConfigurationService {
             instanceTypes,
             enabledMetrics,
             healthCheckTypes,
+            volumeTypes,
             terminationPolicies,
           };
 

app/scripts/modules/amazon/src/serverGroup/configure/wizard/AmazonCloneServerGroupModal.tsx

@@ -23,6 +23,7 @@ import {
   ServerGroupInstanceType,
   ServerGroupLoadBalancers,
   ServerGroupSecurityGroups,
+  ServerGroupVolumes,
   ServerGroupZones,
 } from './pages';
 import { IAmazonServerGroupCommand } from '../serverGroupConfiguration.service';
@@ -245,6 +246,13 @@ export class AmazonCloneServerGroupModal extends React.Component<
                 <ServerGroupAdvancedSettings ref={innerRef} formik={formik} app={application} />
               )}
             />
+
+            <WizardPage
+              label="Volumes"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupVolumes ref={innerRef} formik={formik} app={application} />}
+            />
           </>
         )}
       />

app/scripts/modules/amazon/src/serverGroup/configure/wizard/pages/index.ts

@@ -6,3 +6,4 @@ export * from './ServerGroupLoadBalancers';
 export * from './ServerGroupSecurityGroups';
 export * from './advancedSettings/ServerGroupAdvancedSettings';
 export * from './advancedSettings/ServerGroupAdvancedSettingsCommon';
+export * from './volumes/ServerGroupVolumes';

app/scripts/modules/amazon/src/serverGroup/configure/wizard/pages/volumes/ServerGroupVolumes.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { FormikProps } from 'formik';
+import { IServerGroupCommandBlockDevice } from '../../../serverGroupConfiguration.service';
+import { VolumeEditor } from './VolumeEditor';
+
+import { Application, IServerGroup, IWizardPageComponent, MapEditor, HelpField } from '@spinnaker/core';
+
+import { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+import { isNil } from 'lodash';
+
+export interface IServerGroupVolumesProps {
+  app: Application;
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+export interface IServerGroupVolumesState {
+  namePreview: string;
+  createsNewCluster: boolean;
+  latestServerGroup: IServerGroup;
+}
+
+export class ServerGroupVolumes
+  extends React.Component<IServerGroupVolumesProps, IServerGroupVolumesState>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  private duplicateKeys = false;
+
+  public validate() {
+    const errors = {} as any;
+
+    if (this.duplicateKeys) {
+      errors.tags = 'Tags have duplicate keys.';
+    }
+
+    return errors;
+  }
+
+  private blockChange = (volumes: IServerGroupCommandBlockDevice[]) => {
+    this.props.formik.setFieldValue('blockDevices', volumes);
+  };
+
+  private tagsChanged = (tags: { [key: string]: string }, duplicateKeys: boolean) => {
+    this.duplicateKeys = duplicateKeys;
+    this.props.formik.setFieldValue('blockDeviceTags', tags);
+  };
+
+  constructor(props: IServerGroupVolumesProps) {
+    super(props);
+  }
+
+  public render() {
+    const { values } = this.props.formik;
+    const blockTags = isNil(values.blockDeviceTags) ? [] : values.blockDeviceTags;
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="sm-label-left">
+            <b>Volumes (optional)</b>
+          </div>
+          <VolumeEditor
+            volumeTypes={values.backingData.volumeTypes}
+            model={values.blockDevices}
+            onChange={this.blockChange}
+          />
+        </div>
+        <div className="form-group">
+          <div className="sm-label-left">
+            <b>Tags (optional)</b>
+            <HelpField id="aws.serverGroup.blockDevice.tags" />
+          </div>
+          <MapEditor model={blockTags as any} allowEmpty={true} onChange={this.tagsChanged} />
+        </div>
+      </div>
+    );
+  }
+}

app/scripts/modules/amazon/src/serverGroup/configure/wizard/pages/volumes/VolumeData.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { IServerGroupCommandBlockDevice } from '../../../serverGroupConfiguration.service';
+import Select, { Option } from 'react-select';
+
+export const VolumeData = (props: {
+  blockDevice: IServerGroupCommandBlockDevice;
+  volumeTypes: string[];
+  onChange: (value: any, field: string) => void;
+  onDelete: () => void;
+}) => {
+  const { blockDevice, onChange, onDelete, volumeTypes } = props;
+
+  return (
+    <>
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Delete on Termination</b>
+        </div>
+        <div className="col-md-5 checkbox">
+          <label>
+            <input
+              type="checkbox"
+              checked={blockDevice.deleteOnTermination}
+              onChange={(e) => onChange(e.target.checked, 'deleteOnTermination')}
+            />{' '}
+            Delete on Termination
+          </label>
+        </div>
+        <div className="col-md-2">
+          <a className="clickable" onClick={onDelete}>
+            <span className="glyphicon glyphicon-trash" />
+            <span className="sr-only">Remove field</span>
+          </a>
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Encrypted</b>
+        </div>
+        <div className="col-md-5 checkbox">
+          <label>
+            <input
+              type="checkbox"
+              checked={blockDevice.encrypted}
+              onChange={(e) => onChange(e.target.checked, 'encrypted')}
+            />{' '}
+            Encrypted
+          </label>
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Volume Type</b>
+        </div>
+        <div className="col-md-6">
+          <Select
+            value={blockDevice.volumeType}
+            clearable={false}
+            placeholder="Select..."
+            options={volumeTypes.map((t) => ({ label: t, value: t }))}
+            onChange={(option: Option) => onChange(option.value, 'volumeType')}
+          />
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Device Name</b>
+        </div>
+        <div className="col-md-5 checkbox">
+          <input
+            className="form-control input input-sm"
+            type="text"
+            value={blockDevice.deviceName}
+            onChange={(e) => onChange(e.target.value, 'deviceName')}
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Size</b>
+        </div>
+        <div className="col-md-5 checkbox">
+          <input
+            className="form-control input input-sm"
+            type="text"
+            value={blockDevice.size}
+            onChange={(e) => onChange(e.target.value, 'size')}
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Snapshot Id</b>
+        </div>
+        <div className="col-md-5 checkbox">
+          <input
+            className="form-control input input-sm"
+            type="text"
+            value={blockDevice.snapshotId}
+            onChange={(e) => onChange(e.target.value, 'snapshotId')}
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Virtual Name</b>
+        </div>
+        <div className="col-md-5 checkbox">
+          <input
+            className="form-control input input-sm"
+            type="text"
+            value={blockDevice.virtualName}
+            onChange={(e) => onChange(e.target.value, 'virtualName')}
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Iops</b>
+        </div>
+        <div className="col-md-5 checkbox">
+          <input
+            className="form-control input input-sm"
+            type="text"
+            value={blockDevice.iops}
+            onChange={(e) => onChange(e.target.value, 'iops')}
+          />
+        </div>
+      </div>
+    </>
+  );
+};