@spinnaker/amazon 0.0.0-main-2

package/src/serverGroup/configure/wizard/pages/advancedSettings/ServerGroupAdvancedSettingsCommon.tsx

@@ -0,0 +1,374 @@
+import { Field } from 'formik';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import { HelpField, MapEditor, PlatformHealthOverride } from '@spinnaker/core';
+
+import type { IServerGroupAdvancedSettingsProps } from './ServerGroupAdvancedSettings';
+import { AWSProviderSettings } from '../../../../../aws.settings';
+import type { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+export class ServerGroupAdvancedSettingsCommon extends React.Component<IServerGroupAdvancedSettingsProps> {
+  private duplicateKeys = false;
+
+  public validate = (values: IAmazonServerGroupCommand) => {
+    const errors = {} as any;
+
+    if (!values.keyPair) {
+      errors.keyPair = 'Key Name is required';
+    }
+    if (this.duplicateKeys) {
+      errors.tags = 'Tags have duplicate keys.';
+    }
+
+    return errors;
+  };
+
+  private selectBlockDeviceMappingsSource = (source: string) => {
+    const { values } = this.props.formik;
+    values.selectBlockDeviceMappingsSource(values, source);
+    this.setState({});
+  };
+
+  private toggleSuspendedProcess = (process: string) => {
+    const { values, setFieldValue } = this.props.formik;
+    values.toggleSuspendedProcess(values, process);
+    setFieldValue('suspendedProcesses', values.suspendedProcesses);
+    this.setState({});
+  };
+
+  private platformHealthOverrideChanged = (healthNames: string[]) => {
+    this.props.formik.setFieldValue('interestingHealthProviderNames', healthNames);
+  };
+
+  private tagsChanged = (tags: { [key: string]: string }, duplicateKeys: boolean) => {
+    this.duplicateKeys = duplicateKeys;
+    this.props.formik.setFieldValue('tags', tags);
+  };
+
+  public render() {
+    const { app } = this.props;
+    const { setFieldValue, values } = this.props.formik;
+
+    const blockDeviceMappingsSource = values.getBlockDeviceMappingsSource(values);
+    const keyPairs = values.backingData.filtered.keyPairs || [];
+    const asgSettings = AWSProviderSettings.serverGroups;
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Cooldown</b>
+          </div>
+          <div className="col-md-2">
+            <Field type="text" required={true} name="cooldown" className="form-control input-sm no-spel" />
+          </div>{' '}
+          seconds
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Enabled Metrics </b>
+            <HelpField id="aws.serverGroup.enabledMetrics" />
+          </div>
+          <div className="col-md-6">
+            <Select
+              multi={true}
+              value={values.enabledMetrics}
+              options={values.backingData.enabledMetrics.map((m) => ({ label: m, value: m }))}
+              onChange={(option: Option[]) =>
+                setFieldValue(
+                  'enabledMetrics',
+                  option.map((o) => o.value),
+                )
+              }
+            />
+          </div>
+        </div>
+
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Health Check Type</b>
+          </div>
+          <div className="col-md-6">
+            <Select
+              value={values.healthCheckType}
+              clearable={false}
+              placeholder="Select..."
+              options={values.backingData.healthCheckTypes.map((t) => ({ label: t, value: t }))}
+              onChange={(option: Option) => setFieldValue('healthCheckType', option.value)}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Health Check Grace Period</b>
+          </div>
+          <div className="col-md-2">
+            <Field
+              type="text"
+              required={true}
+              className="form-control input-sm no-spel"
+              name="healthCheckGracePeriod"
+            />
+          </div>{' '}
+          seconds
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Termination Policies</b>
+          </div>
+          <div className="col-md-6">
+            <Select
+              multi={true}
+              value={values.terminationPolicies}
+              options={values.backingData.terminationPolicies.map((m) => ({ label: m, value: m }))}
+              onChange={(option: Option[]) =>
+                setFieldValue(
+                  'terminationPolicies',
+                  option.map((o) => o.value),
+                )
+              }
+            />
+          </div>
+        </div>
+
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Key Name</b>
+          </div>
+          <div className="col-md-6">
+            <Select
+              value={values.keyPair}
+              required={true}
+              clearable={false}
+              options={keyPairs.map((t) => ({ label: t, value: t }))}
+              onChange={(option: Option) => setFieldValue('keyPair', option.value)}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Ramdisk Id (optional)</b>
+          </div>
+          <div className="col-md-6">
+            <Field type="text" name="ramdiskId" className="form-control input-sm no-spel" />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>IAM Instance Profile (optional)</b>
+          </div>
+          <div className="col-md-6">
+            <Field type="text" className="form-control input-sm no-spel" name="iamRole" />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>UserData (optional) </b>
+            <HelpField id="aws.serverGroup.base64UserData" />
+          </div>
+          <div className="col-md-6">
+            <Field type="text" className="form-control input-sm no-spel" name="base64UserData" />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Instance Monitoring </b>
+            <HelpField id="aws.serverGroup.instanceMonitoring" />
+          </div>
+
+          <div className="col-md-6 checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={values.instanceMonitoring}
+                onChange={(e) => setFieldValue('instanceMonitoring', e.target.checked)}
+              />{' '}
+              Enforce Instance Monitoring{' '}
+            </label>
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>EBS Optimized</b>
+          </div>
+          <div className="col-md-6 checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={values.ebsOptimized}
+                onChange={(e) => setFieldValue('ebsOptimized', e.target.checked)}
+              />{' '}
+              Optimize Instances for EBS
+            </label>
+          </div>
+        </div>
+        {asgSettings?.enableIMDSv2 && (
+          <div className="form-group">
+            <div className="col-md-5 sm-label-right">
+              <b>IMDSv2 </b>
+              <HelpField id="aws.serverGroup.imdsv2" />
+            </div>
+            <div className="col-md-6 checkbox">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={values.requireIMDSv2 === true}
+                  onChange={(e) => setFieldValue('requireIMDSv2', e.target.checked)}
+                />{' '}
+                Require IMDSv2{' '}
+              </label>
+            </div>
+          </div>
+        )}
+        {!AWSProviderSettings.disableSpotPricing && values.viewState.useSimpleInstanceTypeSelector && (
+          <div className="form-group">
+            <div className="col-md-5 sm-label-right">
+              <b>Spot Instances Price (optional)</b> <HelpField id="aws.serverGroup.spotMaxPrice" />
+            </div>
+            <div className="col-md-2">
+              <Field type="text" className="form-control input-sm" name="spotPrice" />
+            </div>
+          </div>
+        )}
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>AMI Block Device Mappings</b>
+          </div>
+          <div className="col-md-6 radio">
+            <div>
+              <label>
+                <input
+                  type="radio"
+                  onChange={() => this.selectBlockDeviceMappingsSource('source')}
+                  checked={blockDeviceMappingsSource === 'source'}
+                  name="blockDeviceMappingsSource"
+                />
+                Copy from current server group <HelpField id="aws.blockDeviceMappings.useSource" />
+              </label>
+            </div>
+            <div>
+              <label>
+                <input
+                  type="radio"
+                  onChange={() => this.selectBlockDeviceMappingsSource('ami')}
+                  checked={blockDeviceMappingsSource === 'ami'}
+                  name="blockDeviceMappingsSource"
+                />
+                Prefer AMI block device mappings <HelpField id="aws.blockDeviceMappings.useAMI" />
+              </label>
+            </div>
+            <div>
+              <label>
+                <input
+                  type="radio"
+                  onChange={() => this.selectBlockDeviceMappingsSource('default')}
+                  checked={blockDeviceMappingsSource === 'default'}
+                  name="blockDeviceMappingsSource"
+                />
+                Defaults for selected instance type <HelpField id="aws.blockDeviceMappings.useDefaults" />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>{`Associate ${asgSettings?.enableIPv6 ? 'IPv6 (Recommended)' : 'Public IPv4'} Address`}</b>
+            <HelpField id="serverGroup.ipv6" />
+          </div>
+          {asgSettings?.enableIPv6 && (
+            <div className="col-md-6 checkbox">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={values.associateIPv6Address === true}
+                  onChange={(e) => setFieldValue('associateIPv6Address', e.target.checked)}
+                  id="associateIPv6AddressToggle"
+                />{' '}
+                Assign an IPv6 address to instances{' '}
+              </label>
+            </div>
+          )}
+          {!asgSettings?.enableIPv6 && (
+            <div>
+              <div className="col-md-2 radio">
+                <label>
+                  <input
+                    type="radio"
+                    checked={values.associatePublicIpAddress === true}
+                    onChange={() => setFieldValue('associatePublicIpAddress', true)}
+                    id="associatePublicIpAddressTrue"
+                  />
+                  Yes
+                </label>
+              </div>
+              <div className="col-md-2 radio">
+                <label>
+                  <input
+                    type="radio"
+                    checked={values.associatePublicIpAddress === false}
+                    onChange={() => setFieldValue('associatePublicIpAddress', false)}
+                    id="associatePublicIpAddressFalse"
+                  />
+                  No
+                </label>
+              </div>
+              <div className="col-md-2 radio">
+                <label>
+                  <input
+                    type="radio"
+                    checked={values.associatePublicIpAddress === null}
+                    onChange={() => setFieldValue('associatePublicIpAddress', null)}
+                    id="associatePublicIpAddressDefault"
+                  />
+                  Default
+                </label>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Scaling Processes</b>
+          </div>
+          <div className="col-md-6 checkbox">
+            {values.backingData.scalingProcesses.map((process) => (
+              <div key={process.name}>
+                <label>
+                  <input
+                    type="checkbox"
+                    onChange={() => this.toggleSuspendedProcess(process.name)}
+                    checked={!values.suspendedProcesses.includes(process.name)}
+                  />{' '}
+                  {process.name} <HelpField content={process.description} />
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+        {app.attributes.platformHealthOnlyShowOverride && (
+          <div className="form-group">
+            <div className="col-md-5 sm-label-right">
+              <b>Task Completion</b>
+            </div>
+            <div className="col-md-6">
+              <PlatformHealthOverride
+                interestingHealthProviderNames={values.interestingHealthProviderNames}
+                platformHealthType="Amazon"
+                onChange={this.platformHealthOverrideChanged}
+              />
+            </div>
+          </div>
+        )}
+        <div className="form-group">
+          <div className="sm-label-left">
+            <b>Tags (optional)</b>
+            <HelpField id="aws.serverGroup.tags" />
+          </div>
+          <MapEditor model={values.tags as any} allowEmpty={true} onChange={this.tagsChanged} />
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/advancedSettings/ServerGroupAdvancedSettingsInner.tsx

@@ -0,0 +1,40 @@
+import type { FormikErrors } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { Overridable } from '@spinnaker/core';
+
+import type { IServerGroupAdvancedSettingsProps } from './ServerGroupAdvancedSettings';
+import { ServerGroupAdvancedSettingsCommon } from './ServerGroupAdvancedSettingsCommon';
+import type { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+@Overridable('aws.serverGroup.advancedSettings')
+export class ServerGroupAdvancedSettingsInner
+  extends React.Component<IServerGroupAdvancedSettingsProps>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  private validators = new Map();
+
+  public validate = (values: IAmazonServerGroupCommand) => {
+    const errors: FormikErrors<IAmazonServerGroupCommand> = {};
+
+    this.validators.forEach((validator) => {
+      const subErrors = validator(values);
+      Object.assign(errors, { ...subErrors });
+    });
+
+    return errors;
+  };
+
+  private handleRef = (ele: any) => {
+    if (ele) {
+      this.validators.set('common', ele.validate);
+    } else {
+      this.validators.delete('common');
+    }
+  };
+
+  public render() {
+    const { formik, app } = this.props;
+    return <ServerGroupAdvancedSettingsCommon formik={formik} app={app} ref={this.handleRef as any} />;
+  }
+}

package/src/serverGroup/configure/wizard/pages/index.ts

@@ -0,0 +1,8 @@
+export * from './ServerGroupBasicSettings';
+export * from './ServerGroupCapacity';
+export * from './ServerGroupInstanceType';
+export * from './ServerGroupZones';
+export * from './ServerGroupLoadBalancers';
+export * from './ServerGroupSecurityGroups';
+export * from './advancedSettings/ServerGroupAdvancedSettings';
+export * from './advancedSettings/ServerGroupAdvancedSettingsCommon';

package/src/serverGroup/configure/wizard/securityGroups/SecurityGroupSelector.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import type { Option } from 'react-select';
+import VirtualizedSelect from 'react-virtualized-select';
+
+import type { ISecurityGroup } from '@spinnaker/core';
+import { FirewallLabels, HelpField, InfrastructureCaches, ReactInjector, timestamp } from '@spinnaker/core';
+
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface ISecurityGroupSelectorProps {
+  command: IAmazonServerGroupCommand;
+  availableGroups: ISecurityGroup[];
+  hideLabel?: boolean;
+  refresh?: () => Promise<void>;
+  groupsToEdit: string[];
+  helpKey?: string;
+  onChange: (securityGroups: string[]) => void;
+}
+
+export interface ISecurityGroupSelectorState {
+  refreshing: boolean;
+  refreshTime: number;
+}
+
+export class SecurityGroupSelector extends React.Component<ISecurityGroupSelectorProps, ISecurityGroupSelectorState> {
+  constructor(props: ISecurityGroupSelectorProps) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      refreshTime: InfrastructureCaches.get('securityGroups').getStats().ageMax,
+    };
+  }
+
+  private refreshSecurityGroups = () => {
+    this.setState({ refreshing: true });
+    if (this.props.refresh) {
+      this.props.refresh().then(() => this.setState({ refreshing: false }));
+    } else {
+      (ReactInjector.providerServiceDelegate.getDelegate(
+        this.props.command.selectedProvider,
+        'serverGroup.configurationService',
+      ) as any)
+        .refreshSecurityGroups(this.props.command)
+        .then(() => {
+          this.setState({
+            refreshing: false,
+            refreshTime: InfrastructureCaches.get('securityGroups').getStats().ageMax,
+          });
+        });
+    }
+  };
+
+  private onChange = (options: Option[]) => {
+    const securityGroups = options.map((o) => o.value as string);
+    this.props.onChange(securityGroups);
+  };
+
+  public render() {
+    const { availableGroups, groupsToEdit, helpKey, hideLabel } = this.props;
+    const { refreshing, refreshTime } = this.state;
+
+    const availableGroupOptions = availableGroups.map((g) => ({ label: `${g.name} (${g.id})`, value: g.id }));
+
+    return (
+      <>
+        <div className="form-group">
+          {!hideLabel && (
+            <div className="col-md-3 sm-label-right">
+              <b>{FirewallLabels.get('Firewalls')}</b>
+              {helpKey && <HelpField key={helpKey} />}
+            </div>
+          )}
+          <div className="col-md-8">
+            <VirtualizedSelect
+              ignoreAccents={true}
+              options={availableGroupOptions}
+              onChange={this.onChange}
+              value={groupsToEdit}
+              multi={true}
+            />
+          </div>
+        </div>
+
+        <div className="form-group small" style={{ marginTop: '20px' }}>
+          <div className={`col-md-${hideLabel ? 12 : 9} col-md-offset-${hideLabel ? 0 : 3}`}>
+            <p>
+              {refreshing && (
+                <span>
+                  <span className="fa fa-sync-alt fa-spin" />
+                </span>
+              )}
+              {FirewallLabels.get('Firewalls')}
+              {!refreshing && <span> last refreshed {timestamp(refreshTime)}</span>}
+              {refreshing && <span> refreshing...</span>}
+            </p>
+            <p>
+              If you're not finding a {FirewallLabels.get('firewall')} that was recently added,{' '}
+              <a className="clickable" onClick={this.refreshSecurityGroups}>
+                click here
+              </a>{' '}
+              to refresh the list.
+            </p>
+          </div>
+        </div>
+      </>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/securityGroups/ServerGroupSecurityGroupsRemoved.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { FirewallLabels, noop } from '@spinnaker/core';
+
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IServerGroupSecurityGroupsRemovedProps {
+  command?: IAmazonServerGroupCommand;
+  removed?: string[];
+  onClear?: () => void;
+}
+
+export class ServerGroupSecurityGroupsRemoved extends React.Component<IServerGroupSecurityGroupsRemovedProps> {
+  public static defaultProps: Partial<IServerGroupSecurityGroupsRemovedProps> = {
+    onClear: noop,
+  };
+
+  public render() {
+    const { command, onClear, removed } = this.props;
+
+    const dirtySecurityGroups = ((command && command.viewState.dirty.securityGroups) || []).concat(removed || []);
+
+    if (dirtySecurityGroups.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="col-md-12">
+        <div className="alert alert-warning">
+          <p>
+            <i className="fa fa-exclamation-triangle" />
+            The following {FirewallLabels.get('firewalls')} could not be found in the selected account/region/VPC and
+            were removed:
+          </p>
+          <ul>
+            {dirtySecurityGroups.map((s) => (
+              <li key={s}>{s}</li>
+            ))}
+          </ul>
+          <p className="text-right">
+            <a className="btn btn-sm btn-default dirty-flag-dismiss clickable" onClick={onClear}>
+              Okay
+            </a>
+          </p>
+        </div>
+      </div>
+    );
+  }
+}