@spinnaker/amazon 0.0.0-main-2

package/src/loadBalancer/configure/classic/CreateClassicLoadBalancer.tsx

@@ -0,0 +1,282 @@
+import type { FormikErrors, FormikValues } from 'formik';
+import { cloneDeep, get } from 'lodash';
+import React from 'react';
+
+import type { ILoadBalancerModalProps } from '@spinnaker/core';
+import {
+  AccountService,
+  FirewallLabels,
+  LoadBalancerWriter,
+  noop,
+  ReactInjector,
+  ReactModal,
+  TaskMonitor,
+  WizardModal,
+  WizardPage,
+} from '@spinnaker/core';
+
+import { AdvancedSettings } from './AdvancedSettings';
+import { HealthCheck } from './HealthCheck';
+import { Listeners } from './Listeners';
+import { AWSProviderSettings } from '../../../aws.settings';
+import { LoadBalancerLocation } from '../common/LoadBalancerLocation';
+import { SecurityGroups } from '../common/SecurityGroups';
+import type { IAmazonClassicLoadBalancer, IAmazonClassicLoadBalancerUpsertCommand } from '../../../domain';
+import { AwsLoadBalancerTransformer } from '../../loadBalancer.transformer';
+
+import '../common/configure.less';
+
+export interface ICreateClassicLoadBalancerProps extends ILoadBalancerModalProps {
+  loadBalancer: IAmazonClassicLoadBalancer;
+}
+
+export interface ICreateClassicLoadBalancerState {
+  isNew: boolean;
+  loadBalancerCommand: IAmazonClassicLoadBalancerUpsertCommand;
+  taskMonitor: TaskMonitor;
+}
+
+export class CreateClassicLoadBalancer extends React.Component<
+  ICreateClassicLoadBalancerProps,
+  ICreateClassicLoadBalancerState
+> {
+  public static defaultProps: Partial<ICreateClassicLoadBalancerProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private _isUnmounted = false;
+  private refreshUnsubscribe: () => void;
+  private certificateTypes = get(AWSProviderSettings, 'loadBalancers.certificateTypes', ['iam', 'acm']);
+
+  public static show(props: ICreateClassicLoadBalancerProps): Promise<IAmazonClassicLoadBalancerUpsertCommand> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(CreateClassicLoadBalancer, props, modalProps);
+  }
+
+  constructor(props: ICreateClassicLoadBalancerProps) {
+    super(props);
+
+    const loadBalancerCommand = props.command
+      ? (props.command as IAmazonClassicLoadBalancerUpsertCommand) // ejecting from a wizard
+      : props.loadBalancer
+      ? AwsLoadBalancerTransformer.convertClassicLoadBalancerForEditing(props.loadBalancer)
+      : AwsLoadBalancerTransformer.constructNewClassicLoadBalancerTemplate(props.app);
+
+    this.state = {
+      isNew: !props.loadBalancer,
+      loadBalancerCommand,
+      taskMonitor: null,
+    };
+  }
+
+  protected certificateIdAsARN(
+    accountId: string,
+    certificateId: string,
+    region: string,
+    certificateType: string,
+  ): string {
+    if (
+      certificateId &&
+      (certificateId.indexOf('arn:aws:iam::') !== 0 || certificateId.indexOf('arn:aws:acm:') !== 0)
+    ) {
+      // If they really want to enter the ARN...
+      if (certificateType === 'iam') {
+        return `arn:aws:iam::${accountId}:server-certificate/${certificateId}`;
+      }
+      if (certificateType === 'acm') {
+        return `arn:aws:acm:${region}:${accountId}:certificate/${certificateId}`;
+      }
+    }
+    return certificateId;
+  }
+
+  protected formatListeners(command: IAmazonClassicLoadBalancerUpsertCommand): PromiseLike<void> {
+    return AccountService.getAccountDetails(command.credentials).then((account) => {
+      command.listeners.forEach((listener) => {
+        listener.sslCertificateId = this.certificateIdAsARN(
+          account.accountId,
+          listener.sslCertificateName,
+          command.region,
+          listener.sslCertificateType || this.certificateTypes[0],
+        );
+      });
+    });
+  }
+
+  private clearSecurityGroupsIfNotInVpc(loadBalancer: IAmazonClassicLoadBalancerUpsertCommand): void {
+    if (!loadBalancer.vpcId && !loadBalancer.subnetType) {
+      loadBalancer.securityGroups = null;
+    }
+  }
+
+  private addHealthCheckToCommand(loadBalancer: IAmazonClassicLoadBalancerUpsertCommand): void {
+    let healthCheck = null;
+    const protocol = loadBalancer.healthCheckProtocol || '';
+    if (protocol.startsWith('HTTP')) {
+      healthCheck = `${protocol}:${loadBalancer.healthCheckPort}${loadBalancer.healthCheckPath}`;
+    } else {
+      healthCheck = `${protocol}:${loadBalancer.healthCheckPort}`;
+    }
+    loadBalancer.healthCheck = healthCheck;
+  }
+
+  public setAvailabilityZones(loadBalancerCommand: IAmazonClassicLoadBalancerUpsertCommand): void {
+    const availabilityZones: { [region: string]: string[] } = {};
+    availabilityZones[loadBalancerCommand.region] = loadBalancerCommand.regionZones || [];
+    loadBalancerCommand.availabilityZones = availabilityZones;
+  }
+
+  protected formatCommand(command: IAmazonClassicLoadBalancerUpsertCommand): void {
+    this.setAvailabilityZones(command);
+    this.clearSecurityGroupsIfNotInVpc(command);
+    this.addHealthCheckToCommand(command);
+  }
+
+  protected onApplicationRefresh(values: IAmazonClassicLoadBalancerUpsertCommand): void {
+    if (this._isUnmounted) {
+      return;
+    }
+
+    this.refreshUnsubscribe = undefined;
+    this.props.dismissModal();
+    this.setState({ taskMonitor: undefined });
+    const newStateParams = {
+      name: values.name,
+      accountId: values.credentials,
+      region: values.region,
+      vpcId: values.vpcId,
+      provider: 'aws',
+    };
+
+    if (!ReactInjector.$state.includes('**.loadBalancerDetails')) {
+      ReactInjector.$state.go('.loadBalancerDetails', newStateParams);
+    } else {
+      ReactInjector.$state.go('^.loadBalancerDetails', newStateParams);
+    }
+  }
+
+  public componentWillUnmount(): void {
+    this._isUnmounted = true;
+    if (this.refreshUnsubscribe) {
+      this.refreshUnsubscribe();
+    }
+  }
+
+  private onTaskComplete(values: IAmazonClassicLoadBalancerUpsertCommand): void {
+    this.props.app.loadBalancers.refresh();
+    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(null, () => this.onApplicationRefresh(values));
+  }
+
+  private submit = (values: IAmazonClassicLoadBalancerUpsertCommand): void => {
+    const { app, forPipelineConfig, closeModal } = this.props;
+    const { isNew } = this.state;
+
+    const descriptor = isNew ? 'Create' : 'Update';
+    const loadBalancerCommandFormatted = cloneDeep(values);
+    if (forPipelineConfig) {
+      // don't submit to backend for creation. Just return the loadBalancerCommand object
+      this.formatListeners(loadBalancerCommandFormatted).then(() => {
+        closeModal && closeModal(loadBalancerCommandFormatted);
+      });
+    } else {
+      const taskMonitor = new TaskMonitor({
+        application: app,
+        title: `${isNew ? 'Creating' : 'Updating'} your load balancer`,
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: () => this.onTaskComplete(loadBalancerCommandFormatted),
+      });
+
+      taskMonitor.submit(() => {
+        return this.formatListeners(loadBalancerCommandFormatted).then(() => {
+          this.formatCommand(loadBalancerCommandFormatted);
+          return LoadBalancerWriter.upsertLoadBalancer(loadBalancerCommandFormatted, app, descriptor);
+        });
+      });
+
+      this.setState({ taskMonitor });
+    }
+  };
+
+  private validate = (_values: FormikValues): FormikErrors<IAmazonClassicLoadBalancerUpsertCommand> => {
+    const errors = {} as FormikErrors<IAmazonClassicLoadBalancerUpsertCommand>;
+    return errors;
+  };
+
+  public render(): React.ReactElement<CreateClassicLoadBalancer> {
+    const { app, dismissModal, forPipelineConfig, loadBalancer } = this.props;
+    const { isNew, loadBalancerCommand, taskMonitor } = this.state;
+
+    const showLocationSection = isNew || forPipelineConfig;
+
+    let heading = forPipelineConfig ? 'Configure Classic Load Balancer' : 'Create New Classic Load Balancer';
+    if (!isNew) {
+      heading = `Edit ${loadBalancerCommand.name}: ${loadBalancerCommand.region}: ${loadBalancerCommand.credentials}`;
+    }
+
+    return (
+      <WizardModal<IAmazonClassicLoadBalancerUpsertCommand>
+        heading={heading}
+        initialValues={loadBalancerCommand}
+        taskMonitor={taskMonitor}
+        dismissModal={dismissModal}
+        closeModal={this.submit}
+        submitButtonLabel={forPipelineConfig ? (isNew ? 'Add' : 'Done') : isNew ? 'Create' : 'Update'}
+        validate={this.validate}
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            {showLocationSection && (
+              <WizardPage
+                label="Location"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => (
+                  <LoadBalancerLocation
+                    app={app}
+                    formik={formik}
+                    isNew={isNew}
+                    forPipelineConfig={forPipelineConfig}
+                    loadBalancer={loadBalancer}
+                    ref={innerRef}
+                  />
+                )}
+              />
+            )}
+
+            {!!formik.values.vpcId && (
+              <WizardPage
+                label={FirewallLabels.get('Firewall')}
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef, onLoadingChanged }) => (
+                  <SecurityGroups formik={formik} isNew={isNew} onLoadingChanged={onLoadingChanged} ref={innerRef} />
+                )}
+              />
+            )}
+
+            <WizardPage
+              label="Listeners"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <Listeners ref={innerRef} formik={formik} app={app} />}
+            />
+
+            <WizardPage
+              label="Health Check"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <HealthCheck ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label="Advanced Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <AdvancedSettings ref={innerRef} formik={formik} />}
+            />
+          </>
+        )}
+      />
+    );
+  }
+}

package/src/loadBalancer/configure/classic/HealthCheck.tsx

@@ -0,0 +1,69 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import { FormikFormField, NumberInput, SelectInput, TextInput } from '@spinnaker/core';
+import type { IAmazonClassicLoadBalancerUpsertCommand } from '../../../domain';
+
+export interface IHealthCheckProps {
+  formik: FormikProps<IAmazonClassicLoadBalancerUpsertCommand>;
+}
+
+export class HealthCheck extends React.Component<IHealthCheckProps> {
+  public requiresHealthCheckPath(): boolean {
+    const { values } = this.props.formik;
+    return values.healthCheckProtocol && values.healthCheckProtocol.indexOf('HTTP') === 0;
+  }
+
+  private healthCheckPathChanged = (value: string) => {
+    if (value && value.indexOf('/') !== 0) {
+      this.props.formik.setFieldValue('healthCheckPath', `/${value}`);
+    }
+  };
+
+  public render() {
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="col-md-4 sm-label-right">Ping</div>
+        <div className="col-md-8">
+          <table className="table table-condensed packed">
+            <thead>
+              <tr>
+                <th style={{ width: '35%' }}>Protocol</th>
+                <th style={{ width: '30%' }}>Port</th>
+                <th>{this.requiresHealthCheckPath() && <span>Path</span>}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <FormikFormField
+                    name="healthCheckProtocol"
+                    required={true}
+                    input={(props) => <SelectInput {...props} options={['HTTP', 'HTTPS', 'SSL', 'TCP']} />}
+                  />
+                </td>
+                <td>
+                  <FormikFormField
+                    name="healthCheckPort"
+                    required={true}
+                    input={(props) => <NumberInput {...props} min={1} max={65534} />}
+                  />
+                </td>
+                <td>
+                  {this.requiresHealthCheckPath() && (
+                    <FormikFormField
+                      name="healthCheckPath"
+                      input={(props) => <TextInput {...props} />}
+                      required={true}
+                      onChange={this.healthCheckPathChanged}
+                    />
+                  )}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+}

package/src/loadBalancer/configure/classic/Listeners.less

@@ -0,0 +1,21 @@
+.create-classic-load-balancer-wizard-listeners {
+  .Select-control {
+    height: 30px;
+
+    .Select-placeholder {
+      line-height: 26px;
+    }
+
+    .Select-value {
+      line-height: 26px !important;
+
+      .Select-value-label {
+        line-height: 26px;
+      }
+    }
+
+    .Select-input {
+      height: 26px;
+    }
+  }
+}

package/src/loadBalancer/configure/classic/Listeners.tsx

@@ -0,0 +1,273 @@
+import type { FormikProps } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+
+import { AWSProviderSettings } from '../../../aws.settings';
+import { AmazonCertificateReader } from '../../../certificates/AmazonCertificateReader';
+import { AmazonCertificateSelectField } from '../common/AmazonCertificateSelectField';
+import type {
+  ClassicListenerProtocol,
+  IAmazonCertificate,
+  IAmazonClassicLoadBalancerUpsertCommand,
+  IClassicListenerDescription,
+} from '../../../domain';
+
+import './Listeners.less';
+
+export interface IListenersProps {
+  formik: FormikProps<IAmazonClassicLoadBalancerUpsertCommand>;
+  app: Application;
+}
+
+export interface IListenersState {
+  certificates: { [accountId: number]: IAmazonCertificate[] };
+}
+
+export class Listeners extends React.Component<IListenersProps, IListenersState> {
+  public protocols = ['HTTP', 'HTTPS', 'TCP', 'SSL'];
+  public secureProtocols = ['HTTPS', 'SSL'];
+  private certificateTypes = get(AWSProviderSettings, 'loadBalancers.certificateTypes', ['iam', 'acm']);
+
+  public state: IListenersState = {
+    certificates: [],
+  };
+
+  public componentDidMount(): void {
+    this.loadCertificates();
+  }
+
+  private loadCertificates(): void {
+    AmazonCertificateReader.listCertificates().then((certificates) => {
+      this.setState({ certificates });
+    });
+  }
+
+  private updateListeners(): void {
+    const { values, setFieldValue } = this.props.formik;
+    setFieldValue('listeners', values.listeners);
+  }
+
+  private showCertificateSelect(listener: IClassicListenerDescription): boolean {
+    return (
+      listener.sslCertificateType === 'iam' &&
+      this.state.certificates &&
+      Object.keys(this.state.certificates).length > 0
+    );
+  }
+
+  private listenerExternalProtocolChanged(
+    listener: IClassicListenerDescription,
+    newProtocol: ClassicListenerProtocol,
+  ): void {
+    listener.externalProtocol = newProtocol;
+    if (this.secureProtocols.includes(newProtocol)) {
+      listener.externalPort = 443;
+      if (this.certificateTypes.length >= 1) {
+        listener.sslCertificateType = this.certificateTypes[0];
+      }
+    }
+    if (newProtocol === 'HTTP') {
+      listener.externalPort = 80;
+    }
+    this.updateListeners();
+  }
+
+  private listenerInternalProtocolChanged(
+    listener: IClassicListenerDescription,
+    newProtocol: ClassicListenerProtocol,
+  ): void {
+    listener.internalProtocol = newProtocol;
+    this.updateListeners();
+  }
+
+  private listenerExternalPortChanged(listener: IClassicListenerDescription, newPort: string): void {
+    listener.externalPort = Number.parseInt(newPort, 10);
+    this.updateListeners();
+  }
+
+  private listenerInternalPortChanged(listener: IClassicListenerDescription, newPort: string): void {
+    listener.internalPort = Number.parseInt(newPort, 10);
+    this.updateListeners();
+  }
+
+  private listenerCertificateTypeChanged(listener: IClassicListenerDescription, newProtocol: string): void {
+    listener.sslCertificateType = newProtocol;
+    this.updateListeners();
+  }
+
+  private handleListenerCertificateChanged(listener: IClassicListenerDescription, newCertificate: string): void {
+    listener.sslCertificateName = newCertificate;
+    this.updateListeners();
+  }
+
+  private removeListener(index: number): void {
+    this.props.formik.values.listeners.splice(index, 1);
+    this.updateListeners();
+  }
+
+  private addListener = (): void => {
+    this.props.formik.values.listeners.push({
+      internalProtocol: 'HTTP',
+      externalProtocol: 'HTTP',
+      externalPort: 80,
+      internalPort: 80,
+    });
+    this.updateListeners();
+  };
+
+  private renderCertificateSelector(listener: IClassicListenerDescription): JSX.Element {
+    if (!this.secureProtocols.includes(listener.externalProtocol)) {
+      return null;
+    } else if (this.showCertificateSelect(listener)) {
+      const { values } = this.props.formik;
+      const { certificates } = this.state;
+      return (
+        <AmazonCertificateSelectField
+          certificates={certificates}
+          accountName={values.credentials}
+          currentValue={listener.sslCertificateName}
+          app={this.props.app}
+          onCertificateSelect={(value) => this.handleListenerCertificateChanged(listener, value)}
+        />
+      );
+    } else {
+      return (
+        <input
+          className="input-sm"
+          style={{ width: '100%', marginLeft: '10px' }}
+          required={true}
+          onChange={(e) => this.handleListenerCertificateChanged(listener, e.target.value)}
+          value={listener.sslCertificateName}
+        />
+      );
+    }
+  }
+
+  public render() {
+    const { values } = this.props.formik;
+
+    return (
+      <div className="container-fluid form-horizontal create-classic-load-balancer-wizard-listeners">
+        <div className="form-group">
+          <div className="col-md-12">
+            <table className="table table-condensed packed">
+              <thead>
+                <tr>
+                  <th>External Protocol</th>
+                  <th>External Port</th>
+                  <th />
+                  <th>Internal Protocol</th>
+                  <th>Internal Port</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {values.listeners.map((listener, index) => (
+                  <React.Fragment key={index}>
+                    {/* Using React.Fragment to supply the key only */}
+                    <tr key={index + '-main'}>
+                      <td>
+                        <select
+                          className="form-control input-sm"
+                          value={listener.externalProtocol}
+                          onChange={(event) =>
+                            this.listenerExternalProtocolChanged(
+                              listener,
+                              event.target.value as ClassicListenerProtocol,
+                            )
+                          }
+                        >
+                          {this.protocols.map((p) => (
+                            <option key={p}>{p}</option>
+                          ))}
+                        </select>
+                      </td>
+                      <td>
+                        <input
+                          className="form-control input-sm"
+                          type="number"
+                          min="0"
+                          value={listener.externalPort}
+                          onChange={(event) => this.listenerExternalPortChanged(listener, event.target.value)}
+                          required={true}
+                        />
+                      </td>
+                      <td className="small" style={{ paddingTop: '10px' }}>
+                        &rarr;
+                      </td>
+                      <td>
+                        <select
+                          className="form-control input-sm"
+                          value={listener.internalProtocol}
+                          onChange={(event) =>
+                            this.listenerInternalProtocolChanged(
+                              listener,
+                              event.target.value as ClassicListenerProtocol,
+                            )
+                          }
+                        >
+                          {this.protocols.map((p) => (
+                            <option key={p}>{p}</option>
+                          ))}
+                        </select>
+                      </td>
+                      <td>
+                        <input
+                          className="form-control input-sm"
+                          type="number"
+                          min="0"
+                          value={listener.internalPort}
+                          onChange={(event) => this.listenerInternalPortChanged(listener, event.target.value)}
+                          required={true}
+                        />
+                      </td>
+                      <td>
+                        <a className="sm-label clickable" onClick={() => this.removeListener(index)}>
+                          <span className="glyphicon glyphicon-trash" />
+                        </a>
+                      </td>
+                    </tr>
+                    {this.secureProtocols.includes(listener.externalProtocol) && (
+                      <tr key={index + '-ssl'}>
+                        <td colSpan={5} style={{ borderTopWidth: 0 }}>
+                          <div className="horizontal space-between">
+                            <div className="sm-label-right">Certificate</div>
+                            {this.certificateTypes.length > 1 && (
+                              <select
+                                style={{ width: '45px', marginLeft: '10px' }}
+                                className="form-control input-sm"
+                                value={listener.sslCertificateType}
+                                onChange={(event) => this.listenerCertificateTypeChanged(listener, event.target.value)}
+                              >
+                                {this.certificateTypes.map((t) => (
+                                  <option key={t}>{t}</option>
+                                ))}
+                              </select>
+                            )}
+                            {this.renderCertificateSelector(listener)}
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                ))}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={5}>
+                    <button className="add-new col-md-12" onClick={this.addListener} type="button">
+                      <span className="glyphicon glyphicon-plus-sign" />
+                      <span> Add new port mapping</span>
+                    </button>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/loadBalancer/configure/common/AmazonCertificateSelectField.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import type { Application } from '@spinnaker/core';
+import { Overridable, relativeTime, timestamp } from '@spinnaker/core';
+import type { IAmazonCertificate } from '../../../domain';
+
+export interface IAmazonCertificateSelectFieldProps {
+  certificates: { [accountName: string]: IAmazonCertificate[] };
+  accountName: string;
+  currentValue: string;
+  onCertificateSelect: (certificateName: string) => void;
+  app: Application;
+}
+
+@Overridable('amazon.certificateSelectField')
+export class AmazonCertificateSelectField extends React.Component<IAmazonCertificateSelectFieldProps> {
+  public render() {
+    const { certificates, accountName, onCertificateSelect, currentValue } = this.props;
+    const certificatesForAccount = certificates[accountName] || [];
+    const certificateOptions = certificatesForAccount.map((cert) => {
+      return { label: cert.serverCertificateName, value: cert.serverCertificateName };
+    });
+    const currentCert = certificatesForAccount.find((c) => c.serverCertificateName === currentValue);
+    return (
+      <div style={{ width: '100%' }}>
+        <Select
+          className="input-sm"
+          wrapperStyle={{ width: '100%' }}
+          clearable={true}
+          required={true}
+          options={certificateOptions}
+          onChange={(value: Option<string>) => onCertificateSelect(value.value)}
+          value={currentValue}
+        />
+        {currentCert && (
+          <div className="small sp-margin-xs-top sp-margin-m-bottom sp-margin-m-left">
+            <div>
+              Uploaded {relativeTime(currentCert.uploadDate)} ({timestamp(currentCert.uploadDate)})
+            </div>
+            <b>Expires {relativeTime(currentCert.expiration)}</b> ({timestamp(currentCert.expiration)})
+          </div>
+        )}
+      </div>
+    );
+  }
+}