@spinnaker/amazon 0.0.0-main-2

package/src/loadBalancer/configure/application/ConfigureConfigModal.css

@@ -0,0 +1,3 @@
+.configure-config-modal .StandardFieldLayout .sm-label-right {
+  min-width: 160px;
+}

package/src/loadBalancer/configure/application/ConfigureOidcConfigModal.tsx

@@ -0,0 +1,140 @@
+import type { FormikErrors } from 'formik';
+import { Form } from 'formik';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import { FormikFormField, ModalClose, noop, ReactModal, SpinFormik, SubmitButton, TextInput } from '@spinnaker/core';
+
+import type { IAuthenticateOidcActionConfig } from '../../OidcConfigReader';
+
+import './ConfigureConfigModal.css';
+
+export interface IConfigureOidcConfigModalProps {
+  config: IAuthenticateOidcActionConfig;
+  closeModal?(result?: any): void; // provided by ReactModal
+  dismissModal?(rejection?: any): void; // provided by ReactModal
+}
+
+export interface IConfigureOidcConfigModalState {
+  initialValues: IAuthenticateOidcActionConfig;
+}
+
+export class ConfigureOidcConfigModal extends React.Component<
+  IConfigureOidcConfigModalProps,
+  IConfigureOidcConfigModalState
+> {
+  public static defaultProps: Partial<IConfigureOidcConfigModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  public static show(props: IConfigureOidcConfigModalProps): Promise<void> {
+    return ReactModal.show(ConfigureOidcConfigModal, props);
+  }
+
+  constructor(props: IConfigureOidcConfigModalProps) {
+    super(props);
+
+    const config = props.config || ({} as IAuthenticateOidcActionConfig);
+
+    this.state = {
+      initialValues: {
+        authorizationEndpoint: config.authorizationEndpoint || '',
+        clientId: config.clientId || '',
+        clientSecret: config.clientSecret || '',
+        issuer: config.issuer || '',
+        scope: config.scope || 'openid',
+        sessionCookieName: config.sessionCookieName || 'AWSELBAuthSessionCookie',
+        tokenEndpoint: config.tokenEndpoint || '',
+        userInfoEndpoint: config.userInfoEndpoint || '',
+      },
+    };
+  }
+
+  private close = (reason?: any): void => {
+    this.props.dismissModal(reason);
+  };
+
+  private submit = (data: IAuthenticateOidcActionConfig): void => {
+    this.props.closeModal(data);
+  };
+
+  private validate = (): FormikErrors<IAuthenticateOidcActionConfig> => {
+    return {};
+  };
+
+  public render() {
+    const { initialValues } = this.state;
+
+    const submitLabel = 'Save Client';
+
+    return (
+      <div className="configure-config-modal">
+        <SpinFormik<IAuthenticateOidcActionConfig>
+          initialValues={initialValues}
+          onSubmit={this.submit}
+          validate={this.validate}
+          render={({ isValid }) => (
+            <Form className="form-horizontal">
+              <ModalClose dismiss={this.close} />
+              <Modal.Header>
+                <Modal.Title>Configure OIDC Client</Modal.Title>
+              </Modal.Header>
+
+              <Modal.Body>
+                <FormikFormField
+                  name="issuer"
+                  label="Issuer"
+                  required={true}
+                  input={(props) => <TextInput {...props} placeholder="Enter the OpenId Provider" />}
+                />
+
+                <FormikFormField
+                  name="authorizationEndpoint"
+                  label="Authorization Endpoint"
+                  required={true}
+                  input={(props) => <TextInput {...props} placeholder="Enter OpenID provider server endpoint" />}
+                />
+
+                <FormikFormField
+                  name="tokenEndpoint"
+                  label="Token Endpoint"
+                  required={true}
+                  input={(props) => <TextInput {...props} placeholder="Enter a URI for your token endpoint" />}
+                />
+
+                <FormikFormField
+                  name="userInfoEndpoint"
+                  label="User info Endpoint"
+                  required={true}
+                  input={(props) => <TextInput {...props} placeholder="Enter a URI for your user info endpoint" />}
+                />
+
+                <FormikFormField
+                  name="clientId"
+                  label="Client ID"
+                  required={true}
+                  input={(props) => <TextInput {...props} placeholder="Enter the client ID" />}
+                />
+
+                <FormikFormField
+                  name="clientSecret"
+                  label="Client secret"
+                  required={true}
+                  input={(props) => <TextInput {...props} placeholder="Enter the client secret" />}
+                />
+              </Modal.Body>
+
+              <Modal.Footer>
+                <button className="btn btn-default" onClick={this.close} type="button">
+                  Cancel
+                </button>
+                <SubmitButton isDisabled={!isValid} submitting={false} isFormSubmit={true} label={submitLabel} />
+              </Modal.Footer>
+            </Form>
+          )}
+        />
+      </div>
+    );
+  }
+}

package/src/loadBalancer/configure/application/ConfigureRedirectConfigModal.tsx

@@ -0,0 +1,146 @@
+import { Form } from 'formik';
+import { pickBy } from 'lodash';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import {
+  FormikFormField,
+  HelpField,
+  ModalClose,
+  noop,
+  ReactModal,
+  ReactSelectInput,
+  SelectInput,
+  SpinFormik,
+  SubmitButton,
+  TextInput,
+} from '@spinnaker/core';
+import type { IRedirectActionConfig } from '../../../domain';
+
+import './ConfigureConfigModal.css';
+
+export interface IConfigureRedirectConfigModalProps {
+  config: IRedirectActionConfig;
+  closeModal?(result?: any): void; // provided by ReactModal
+  dismissModal?(rejection?: any): void; // provided by ReactModal
+}
+
+export class ConfigureRedirectConfigModal extends React.Component<IConfigureRedirectConfigModalProps> {
+  private initialValues: IRedirectActionConfig;
+
+  public static defaultProps: Partial<IConfigureRedirectConfigModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  public static show(props: IConfigureRedirectConfigModalProps): Promise<void> {
+    return ReactModal.show(ConfigureRedirectConfigModal, props);
+  }
+
+  constructor(props: IConfigureRedirectConfigModalProps) {
+    super(props);
+
+    const config = props.config || ({} as IRedirectActionConfig);
+
+    this.initialValues = {
+      host: config.host || '',
+      path: config.path || '',
+      port: config.port || '',
+      protocol: config.protocol || undefined,
+      query: config.query || '',
+      statusCode: config.statusCode || 'HTTP_301',
+    };
+  }
+
+  private close = (reason?: null): void => {
+    this.props.dismissModal(reason);
+  };
+
+  private submit = (data: IRedirectActionConfig): void => {
+    const filteredData: IRedirectActionConfig = pickBy(data, (value: string) => value && value !== '');
+    this.props.closeModal(filteredData);
+  };
+
+  public render() {
+    const submitLabel = 'Save Config';
+
+    return (
+      <div className="configure-config-modal">
+        <SpinFormik<IRedirectActionConfig>
+          initialValues={this.initialValues}
+          onSubmit={this.submit}
+          render={({ isValid }) => (
+            <Form className="form-horizontal">
+              <ModalClose dismiss={this.close} />
+              <Modal.Header>
+                <Modal.Title>
+                  Configure Redirect <HelpField id="aws.loadBalancer.redirect" />
+                </Modal.Title>
+              </Modal.Header>
+
+              <Modal.Body>
+                <FormikFormField
+                  name="host"
+                  label="Host"
+                  required={false}
+                  input={(props) => <TextInput {...props} />}
+                  help={<HelpField id="aws.loadBalancer.redirect.host" />}
+                />
+                <FormikFormField
+                  name="path"
+                  label="Path"
+                  required={false}
+                  input={(props) => <TextInput {...props} />}
+                  help={<HelpField id="aws.loadBalancer.redirect.path" />}
+                />
+                <FormikFormField
+                  name="port"
+                  label="Port"
+                  required={false}
+                  input={(props) => <TextInput {...props} />}
+                  help={<HelpField id="aws.loadBalancer.redirect.port" />}
+                />
+                <FormikFormField
+                  name="protocol"
+                  label="Protocol"
+                  required={false}
+                  input={(props) => (
+                    <ReactSelectInput
+                      {...props}
+                      stringOptions={['HTTP', 'HTTPS', '#{protocol}']}
+                      placeholder="Select Protocol"
+                      clearable={false}
+                      style={{ width: '130px' }}
+                    />
+                  )}
+                  help={<HelpField id="aws.loadBalancer.redirect.protocol" />}
+                />
+                <FormikFormField
+                  name="query"
+                  label="Query"
+                  required={false}
+                  input={(props) => <TextInput {...props} />}
+                  help={<HelpField id="aws.loadBalancer.redirect.query" />}
+                />
+                <FormikFormField
+                  name="statusCode"
+                  label="Status Code"
+                  required={true}
+                  input={(props) => <SelectInput {...props} options={['HTTP_301', 'HTTP_302']} />}
+                  help={<HelpField id="aws.loadBalancer.redirect.statusCode" />}
+                />
+              </Modal.Body>
+
+              <Modal.Footer>
+                <button className="btn btn-default" onClick={this.close} type="button">
+                  Cancel
+                </button>
+                <SubmitButton isDisabled={!isValid} submitting={false} isFormSubmit={true} label={submitLabel} />
+              </Modal.Footer>
+            </Form>
+          )}
+        />
+      </div>
+    );
+  }
+}

package/src/loadBalancer/configure/application/CreateApplicationLoadBalancer.tsx

@@ -0,0 +1,337 @@
+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 { ALBAdvancedSettings } from './ALBAdvancedSettings';
+import { ALBListeners } from './ALBListeners';
+import { TargetGroups } from './TargetGroups';
+import { AWSProviderSettings } from '../../../aws.settings';
+import { LoadBalancerLocation } from '../common/LoadBalancerLocation';
+import { SecurityGroups } from '../common/SecurityGroups';
+import type { IAmazonApplicationLoadBalancer, IAmazonApplicationLoadBalancerUpsertCommand } from '../../../domain';
+import { AwsLoadBalancerTransformer } from '../../loadBalancer.transformer';
+
+import '../common/configure.less';
+
+export interface ICreateApplicationLoadBalancerProps extends ILoadBalancerModalProps {
+  loadBalancer: IAmazonApplicationLoadBalancer;
+}
+
+export interface ICreateApplicationLoadBalancerState {
+  includeSecurityGroups: boolean;
+  isNew: boolean;
+  loadBalancerCommand: IAmazonApplicationLoadBalancerUpsertCommand;
+  taskMonitor: TaskMonitor;
+}
+
+export class CreateApplicationLoadBalancer extends React.Component<
+  ICreateApplicationLoadBalancerProps,
+  ICreateApplicationLoadBalancerState
+> {
+  public static defaultProps: Partial<ICreateApplicationLoadBalancerProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private _isUnmounted = false;
+  private refreshUnsubscribe: () => void;
+  private certificateTypes = get(AWSProviderSettings, 'loadBalancers.certificateTypes', ['iam', 'acm']);
+
+  public static show(props: ICreateApplicationLoadBalancerProps): Promise<IAmazonApplicationLoadBalancerUpsertCommand> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(CreateApplicationLoadBalancer, props, modalProps);
+  }
+
+  constructor(props: ICreateApplicationLoadBalancerProps) {
+    super(props);
+
+    const loadBalancerCommand = props.command
+      ? (props.command as IAmazonApplicationLoadBalancerUpsertCommand) // ejecting from a wizard
+      : props.loadBalancer
+      ? AwsLoadBalancerTransformer.convertApplicationLoadBalancerForEditing(props.loadBalancer)
+      : AwsLoadBalancerTransformer.constructNewApplicationLoadBalancerTemplate(props.app);
+
+    this.state = {
+      includeSecurityGroups: !!loadBalancerCommand.vpcId,
+      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;
+  }
+
+  private formatListeners(command: IAmazonApplicationLoadBalancerUpsertCommand): PromiseLike<void> {
+    return AccountService.getAccountDetails(command.credentials).then((account) => {
+      command.listeners.forEach((listener) => {
+        if (listener.protocol === 'HTTP') {
+          delete listener.sslPolicy;
+          listener.certificates = [];
+        }
+        listener.certificates.forEach((certificate) => {
+          certificate.certificateArn = this.certificateIdAsARN(
+            account.accountId,
+            certificate.name,
+            command.region,
+            certificate.type || this.certificateTypes[0],
+          );
+        });
+      });
+    });
+  }
+
+  private setAvailabilityZones(loadBalancerCommand: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    const availabilityZones: { [region: string]: string[] } = {};
+    availabilityZones[loadBalancerCommand.region] = loadBalancerCommand.regionZones || [];
+    loadBalancerCommand.availabilityZones = availabilityZones;
+  }
+
+  private addAppName(name: string): string {
+    return `${this.props.app.name}-${name}`;
+  }
+
+  private manageTargetGroupNames(command: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    (command.targetGroups || []).forEach((targetGroupDescription) => {
+      targetGroupDescription.name = this.addAppName(targetGroupDescription.name);
+    });
+    (command.listeners || []).forEach((listenerDescription) => {
+      listenerDescription.defaultActions.forEach((actionDescription) => {
+        if (actionDescription.targetGroupName) {
+          actionDescription.targetGroupName = this.addAppName(actionDescription.targetGroupName);
+        }
+      });
+      (listenerDescription.rules || []).forEach((ruleDescription) => {
+        ruleDescription.actions.forEach((actionDescription) => {
+          if (actionDescription.targetGroupName) {
+            actionDescription.targetGroupName = this.addAppName(actionDescription.targetGroupName);
+          }
+        });
+      });
+    });
+  }
+
+  private manageRules(command: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    command.listeners.forEach((listener) => {
+      listener.rules.forEach((rule, index) => {
+        // Set the priority in array order, starting with 1
+        rule.priority = index + 1;
+        // Remove conditions that have no value
+        rule.conditions = rule.conditions.filter((condition) => {
+          if (condition.field !== 'http-request-method') {
+            return condition.values[0].length > 0;
+          }
+
+          return condition.values.length > 0;
+        });
+      });
+    });
+  }
+
+  private setIpAddressType(command: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    command.ipAddressType = command.dualstack ? 'dualstack' : 'ipv4';
+    delete command.dualstack;
+  }
+
+  private formatCommand(command: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    this.setAvailabilityZones(command);
+    this.manageTargetGroupNames(command);
+    this.manageRules(command);
+    this.setIpAddressType(command);
+  }
+
+  protected onApplicationRefresh(values: IAmazonApplicationLoadBalancerUpsertCommand): 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: IAmazonApplicationLoadBalancerUpsertCommand): void {
+    this.props.app.loadBalancers.refresh();
+    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(null, () => this.onApplicationRefresh(values));
+  }
+
+  private submit = (values: IAmazonApplicationLoadBalancerUpsertCommand): void => {
+    const { app, forPipelineConfig, closeModal } = this.props;
+    const { isNew } = this.state;
+
+    const descriptor = isNew ? 'Create' : 'Update';
+    const loadBalancerCommandFormatted = cloneDeep(values);
+
+    // replace all authenticateOidcConfig with authenticateOidcActionConfig because aws
+    loadBalancerCommandFormatted.listeners.forEach((listener) => {
+      listener.defaultActions.forEach((a: any) => {
+        if (a.authenticateOidcConfig) {
+          a.authenticateOidcActionConfig = a.authenticateOidcConfig;
+          delete a.authenticateOidcConfig;
+        }
+      });
+      listener.rules.forEach((r) =>
+        r.actions.forEach((a: any) => {
+          if (a.authenticateOidcConfig) {
+            a.authenticateOidcActionConfig = a.authenticateOidcConfig;
+            delete a.authenticateOidcConfig;
+          }
+        }),
+      );
+    });
+
+    if (forPipelineConfig) {
+      // don't submit to backend for creation. Just return the loadBalancerCommand object
+      this.formatListeners(loadBalancerCommandFormatted).then(() => {
+        this.setIpAddressType(loadBalancerCommandFormatted);
+        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 });
+    }
+  };
+
+  public render() {
+    const { app, dismissModal, forPipelineConfig, loadBalancer } = this.props;
+    const { isNew, loadBalancerCommand, taskMonitor } = this.state;
+    let heading = forPipelineConfig ? 'Configure Application Load Balancer' : 'Create New Application Load Balancer';
+    if (!isNew) {
+      heading = `Edit ${loadBalancerCommand.name}: ${loadBalancerCommand.region}: ${loadBalancerCommand.credentials}`;
+    }
+
+    return (
+      <WizardModal<IAmazonApplicationLoadBalancerUpsertCommand>
+        heading={heading}
+        initialValues={loadBalancerCommand}
+        taskMonitor={taskMonitor}
+        dismissModal={dismissModal}
+        closeModal={this.submit}
+        submitButtonLabel={forPipelineConfig ? (isNew ? 'Add' : 'Done') : isNew ? 'Create' : 'Update'}
+        render={({ formik, nextIdx, wizard }) => {
+          const showLocationSection = isNew || forPipelineConfig;
+          const showSecurityGroups = !!formik.values.vpcId;
+
+          return (
+            <>
+              {showLocationSection && (
+                <WizardPage
+                  label="Location"
+                  wizard={wizard}
+                  order={nextIdx()}
+                  render={({ innerRef }) => (
+                    <LoadBalancerLocation
+                      app={app}
+                      forPipelineConfig={forPipelineConfig}
+                      formik={formik}
+                      isNew={isNew}
+                      loadBalancer={loadBalancer}
+                      ref={innerRef}
+                    />
+                  )}
+                />
+              )}
+
+              {showSecurityGroups && (
+                <WizardPage
+                  label={FirewallLabels.get('Firewalls')}
+                  wizard={wizard}
+                  order={nextIdx()}
+                  render={({ innerRef, onLoadingChanged }) => (
+                    <SecurityGroups formik={formik} isNew={isNew} onLoadingChanged={onLoadingChanged} ref={innerRef} />
+                  )}
+                />
+              )}
+
+              <WizardPage
+                label="Target Groups"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => (
+                  <TargetGroups ref={innerRef} app={app} formik={formik} isNew={isNew} loadBalancer={loadBalancer} />
+                )}
+              />
+
+              <WizardPage
+                label="Listeners"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => <ALBListeners ref={innerRef} app={app} formik={formik} />}
+              />
+
+              <WizardPage
+                label="Advanced Settings"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => <ALBAdvancedSettings ref={innerRef} />}
+              />
+            </>
+          );
+        }}
+      />
+    );
+  }
+}