@spinnaker/amazon 0.0.0-2025.1-0

package/src/loadBalancer/configure/common/configure.less

@@ -0,0 +1,131 @@
+.wizard-pod {
+  padding-bottom: 15px;
+  > div {
+    border: 1px solid var(--color-cirrus);
+  }
+  .wizard-pod-row {
+    display: flex;
+    padding: 5px;
+    border-bottom: 1px solid var(--color-cirrus);
+
+    label {
+      font-weight: 400;
+      padding-right: 5px;
+    }
+
+    &.header {
+      .glyphicon-trash {
+        padding: 0 8px;
+      }
+      .wizard-pod-row-contents {
+        .wizard-pod-row-title {
+          font-weight: 800;
+        }
+        .wizard-pod-row-data {
+          flex-wrap: nowrap;
+          padding: 0;
+          label {
+            font-weight: 600;
+          }
+          .wizard-pod-content {
+            padding: 0 10px 0 0;
+          }
+        }
+      }
+      background-color: var(--color-cirrus);
+    }
+    .wizard-pod-row-title {
+      display: flex;
+      align-items: center;
+      max-height: 37px;
+      flex-basis: 120px;
+      flex-direction: row-reverse;
+      font-weight: 600;
+      text-align: right;
+      margin-right: 10px;
+      width: 100px;
+    }
+    .wizard-pod-row-contents {
+      display: flex;
+      width: 100%;
+      .wizard-pod-row-data {
+        display: flex;
+        width: 100%;
+        align-items: baseline;
+        flex-wrap: wrap;
+        padding: 5px 0;
+        &.spread {
+          justify-content: space-between;
+        }
+        .wizard-pod-content {
+          padding: 0 10px 5px 0;
+          display: flex;
+          align-items: center;
+        }
+        .group-name-prefix {
+          flex-grow: 2;
+          white-space: nowrap;
+        }
+        .rules-table {
+          thead {
+            th {
+              font-weight: 600;
+            }
+          }
+          td {
+            vertical-align: middle;
+          }
+          > tbody {
+            > tr:first-child {
+              > td {
+                border-top: none;
+              }
+            }
+          }
+        }
+      }
+      .wizard-pod-row-errors {
+        display: flex;
+        width: 100%;
+      }
+      align-items: baseline;
+      flex-wrap: wrap;
+    }
+  }
+
+  .listener-rule {
+    .handle {
+      cursor: move;
+      width: 10px;
+      padding: 0;
+    }
+    .listener-rule-condition {
+      display: flex;
+      label {
+        white-space: nowrap;
+      }
+      .help-field {
+        > span {
+          top: 4px;
+          padding: 0 2px;
+        }
+      }
+      .remove-condition {
+        min-width: 15px;
+        padding-top: 4px;
+      }
+    }
+    .add-new-container {
+      display: flex;
+      .add-new {
+        padding: 2px;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.rule-sortable-helper {
+  z-index: 99999;
+  width: 500px;
+}

package/src/loadBalancer/configure/common/targetGroupValidators.spec.ts

@@ -0,0 +1,130 @@
+import { isNameInUse, isNameLong, isValidHealthCheckInterval, isValidTimeout } from './targetGroupValidators';
+
+const mockTargetGroup = {
+  attributes: {
+    deregistrationDelay: 300,
+    stickinessDuration: 8400,
+    stickinessEnabled: false,
+    stickinessType: 'lb_cookie',
+  },
+  healthCheckInterval: 10,
+  healthCheckPath: '/healthcheck',
+  healthCheckPort: 7001,
+  healthCheckProtocol: 'HTTP',
+  healthCheckTimeout: 5,
+  healthyThreshold: 10,
+  name: 'targetgroup',
+  port: 7001,
+  protocol: 'HTTP',
+  targetType: 'ip',
+  unhealthyThreshold: 2,
+  account: 'test',
+  cloudProvider: 'aws',
+  healthTimeout: 1000,
+  healthInterval: 10,
+  loadBalancerNames: ['loadbalancer1', 'loadbalancer2'],
+  region: 'us-east-1',
+  type: '',
+};
+
+const httpTargetGroup = {
+  ...mockTargetGroup,
+  protocol: 'TCP',
+  healthCheckProtocol: 'HTTP',
+};
+
+const httpsTargetGroup = {
+  ...mockTargetGroup,
+  protocol: 'TCP',
+  healthCheckProtocol: 'HTTPS',
+};
+
+const tcpTargetGroup = {
+  ...mockTargetGroup,
+  healthCheckProtocol: 'TCP',
+};
+
+describe('Target Group validators', () => {
+  describe('of used names', () => {
+    it('returns an error if the name exists already', () => {
+      const existingGroups = {
+        test: {
+          'us-east-1': [mockTargetGroup.name],
+        },
+      };
+      const actual = isNameInUse(existingGroups, 'test', 'us-east-1')(mockTargetGroup.name);
+      expect(actual).toBeTruthy();
+    });
+
+    it('returns an null if it does not exist', () => {
+      const existingGroups = {
+        test: {
+          'us-east-1': ['targetgroup2'],
+        },
+      };
+      const actual = isNameInUse(existingGroups, 'test', 'us-east-1')(mockTargetGroup.name);
+      expect(actual).toEqual(null);
+    });
+  });
+
+  describe('of name length', () => {
+    it('returns an error if the inputted name >32 additional characters (this is prepended to the application name)', () => {
+      const actual = isNameLong('application'.length)(`applicationwithareallylongname`);
+      expect(actual).toBeTruthy();
+    });
+
+    it('returns null if the name is < 32', () => {
+      const actual = isNameLong('app'.length)('appwithshortname');
+      expect(actual).toEqual(null);
+    });
+  });
+
+  describe('of health check timeout constraints', () => {
+    it('should have a 6s timeout', () => {
+      const actual = isValidTimeout(httpTargetGroup)('8');
+      expect(actual).toBeTruthy();
+    });
+
+    it('should be 6s and is valid', () => {
+      const actual = isValidTimeout(httpTargetGroup)('6');
+      expect(actual).toEqual(null);
+    });
+
+    it('should have a 10s timeout', () => {
+      const actual = isValidTimeout(httpsTargetGroup)('9');
+      expect(actual).toBeTruthy();
+    });
+
+    it('should be 10s and is valid', () => {
+      const actual = isValidTimeout(httpsTargetGroup)('10');
+      expect(actual).toEqual(null);
+    });
+
+    it('should not have a timeout constraint', () => {
+      const actual = isValidTimeout(mockTargetGroup)('10');
+      expect(actual).toEqual(null);
+    });
+  });
+
+  describe('of health check interval', () => {
+    it('TCPs can have a 10s interval', () => {
+      const actual = isValidHealthCheckInterval(tcpTargetGroup)('10');
+      expect(actual).toEqual(null);
+    });
+
+    it('TCPs can have a 30s interval', () => {
+      const actual = isValidHealthCheckInterval(tcpTargetGroup)('30');
+      expect(actual).toEqual(null);
+    });
+
+    it('returns an error when it fails TCP rules', () => {
+      const actual = isValidHealthCheckInterval(tcpTargetGroup)('20');
+      expect(actual).toBeTruthy();
+    });
+
+    it('is not a TCP protocol target group', () => {
+      const actual = isValidHealthCheckInterval(mockTargetGroup)('20');
+      expect(actual).toEqual(null);
+    });
+  });
+});

package/src/loadBalancer/configure/common/targetGroupValidators.ts

@@ -0,0 +1,41 @@
+import { get, isNumber } from 'lodash';
+
+import type { IValidator } from '@spinnaker/core';
+import type { ITargetGroup } from '../../../domain';
+
+export const isNameInUse = (
+  existingNames: { [account: string]: { [region: string]: string[] } },
+  credentials: string,
+  region: string,
+): IValidator => (name: string) =>
+  get(existingNames, [credentials, region], []).includes(name.toLowerCase())
+    ? `There is already a target group in ${credentials}:${region} with that name.`
+    : null;
+
+export const isNameLong = (appNameLength: number): IValidator => (name: string) =>
+  name.length < 32 - appNameLength
+    ? null
+    : 'Target group names are automatically prefixed with their application name and cannot exceed 32 characters in length.';
+
+export const isValidTimeout = (targetGroup: ITargetGroup): IValidator => (value: number | string) => {
+  const num = isNumber(value) ? value : Number.parseInt(value, 10);
+  const { protocol, healthCheckProtocol } = targetGroup;
+
+  if (protocol === 'TCP' || protocol === 'TLS') {
+    if (healthCheckProtocol === 'HTTP' && num !== 6) {
+      return 'HTTP health check timeouts for TCP/TLS target groups must be 6s';
+    }
+
+    if ((healthCheckProtocol === 'HTTPS' || healthCheckProtocol === 'TLS') && num !== 10) {
+      return 'HTTPS/TLS health check timeouts for TCP/TLS target groups must be 10s';
+    }
+  }
+  return null;
+};
+
+export const isValidHealthCheckInterval = (targetGroup: ITargetGroup): IValidator => (value: string) =>
+  targetGroup.healthCheckProtocol !== 'TCP' ||
+  (targetGroup.healthCheckProtocol === 'TCP' &&
+    (Number.parseInt(value, 10) === 10 || Number.parseInt(value, 10) === 30))
+    ? null
+    : 'TCP health checks only support 10s and 30s intervals';

package/src/loadBalancer/configure/network/CertificateSelectors.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import type { IALBListenerCertificate } from '../../../index';
+import { AmazonCertificateSelectField } from '../../../index';
+import type { INLBCertificateSelectorProps } from '../network/NLBListeners';
+
+export function CertificateSelector({
+  availableCertificates,
+  certificates,
+  formik,
+  app,
+  certificateTypes,
+}: INLBCertificateSelectorProps) {
+  function certificateTypeChanged(certificate: IALBListenerCertificate, newType: string): void {
+    certificate.type = newType;
+    updateListeners();
+  }
+
+  function updateListeners(): void {
+    formik.setFieldValue('listeners', formik.values.listeners);
+  }
+
+  function handleCertificateChanged(certificate: IALBListenerCertificate, newCertificateName: string): void {
+    certificate.name = newCertificateName;
+    updateListeners();
+  }
+
+  function showCertificateSelect(certificate: IALBListenerCertificate): boolean {
+    return certificate.type === 'iam' && certificates && Object.keys(certificates).length > 0;
+  }
+
+  const { values } = formik;
+  return (
+    <div className="wizard-pod-row">
+      <div className="wizard-pod-row-title">Certificate</div>
+      <div className="wizard-pod-row-contents">
+        {availableCertificates.map((certificate, cIndex) => (
+          <div key={cIndex} style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>
+            <select
+              className="form-control input-sm inline-number"
+              style={{ width: '45px' }}
+              value={certificate.type}
+              onChange={(event) => certificateTypeChanged(certificate, event.target.value)}
+            >
+              {certificateTypes.map((t) => (
+                <option key={t}>{t}</option>
+              ))}
+            </select>
+            {showCertificateSelect(certificate) && (
+              <AmazonCertificateSelectField
+                certificates={certificates}
+                accountName={values.credentials}
+                currentValue={certificate.name}
+                app={app}
+                onCertificateSelect={(value) => handleCertificateChanged(certificate, value)}
+              />
+            )}
+            {!showCertificateSelect(certificate) && (
+              <input
+                className="form-control input-sm no-spel"
+                style={{ display: 'inline-block' }}
+                type="text"
+                value={certificate.name}
+                onChange={(event) => handleCertificateChanged(certificate, event.target.value)}
+                required={true}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/loadBalancer/configure/network/CreateNetworkLoadBalancer.tsx

@@ -0,0 +1,303 @@
+import type { FormikErrors } from 'formik';
+import { cloneDeep, every, get } from 'lodash';
+import React from 'react';
+
+import type { ILoadBalancerModalProps } from '@spinnaker/core';
+import {
+  AccountService,
+  LoadBalancerWriter,
+  noop,
+  ReactInjector,
+  ReactModal,
+  TaskMonitor,
+  WizardModal,
+  WizardPage,
+} from '@spinnaker/core';
+
+import { NLBAdvancedSettings } from './NLBAdvancedSettings';
+import { NLBListeners } from './NLBListeners';
+import { TargetGroups } from './TargetGroups';
+import { AWSProviderSettings } from '../../../aws.settings';
+import { LoadBalancerLocation } from '../common/LoadBalancerLocation';
+import type { IAmazonNetworkLoadBalancer, IAmazonNetworkLoadBalancerUpsertCommand } from '../../../domain';
+import { AwsLoadBalancerTransformer } from '../../loadBalancer.transformer';
+
+import '../common/configure.less';
+
+export interface ICreateNetworkLoadBalancerProps extends ILoadBalancerModalProps {
+  loadBalancer: IAmazonNetworkLoadBalancer;
+}
+
+export interface ICreateApplicationLoadBalancerState {
+  isNew: boolean;
+  loadBalancerCommand: IAmazonNetworkLoadBalancerUpsertCommand;
+  taskMonitor: TaskMonitor;
+}
+
+export class CreateNetworkLoadBalancer extends React.Component<
+  ICreateNetworkLoadBalancerProps,
+  ICreateApplicationLoadBalancerState
+> {
+  public static defaultProps: Partial<ICreateNetworkLoadBalancerProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private _isUnmounted = false;
+  private refreshUnsubscribe: () => void;
+  private certificateTypes = get(AWSProviderSettings, 'loadBalancers.certificateTypes', ['iam', 'acm']);
+
+  public static show(props: ICreateNetworkLoadBalancerProps): Promise<IAmazonNetworkLoadBalancerUpsertCommand> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(CreateNetworkLoadBalancer, props, modalProps);
+  }
+
+  constructor(props: ICreateNetworkLoadBalancerProps) {
+    super(props);
+
+    const loadBalancerCommand = props.loadBalancer
+      ? AwsLoadBalancerTransformer.convertNetworkLoadBalancerForEditing(props.loadBalancer)
+      : AwsLoadBalancerTransformer.constructNewNetworkLoadBalancerTemplate(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;
+  }
+
+  private formatListeners(command: IAmazonNetworkLoadBalancerUpsertCommand): PromiseLike<void> {
+    return AccountService.getAccountDetails(command.credentials).then((account) => {
+      command.listeners.forEach((listener) => {
+        if (listener.protocol === 'TCP') {
+          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: IAmazonNetworkLoadBalancerUpsertCommand): 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: IAmazonNetworkLoadBalancerUpsertCommand): 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: IAmazonNetworkLoadBalancerUpsertCommand): 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) => condition.values[0].length > 0);
+      });
+    });
+  }
+
+  private formatCommand(command: IAmazonNetworkLoadBalancerUpsertCommand): void {
+    this.setAvailabilityZones(command);
+    this.manageTargetGroupNames(command);
+    this.manageRules(command);
+  }
+
+  protected onApplicationRefresh(values: IAmazonNetworkLoadBalancerUpsertCommand): 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: IAmazonNetworkLoadBalancerUpsertCommand): void {
+    this.props.app.loadBalancers.refresh();
+    this.refreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(null, () => this.onApplicationRefresh(values));
+  }
+
+  private submit = (values: IAmazonNetworkLoadBalancerUpsertCommand): void => {
+    const { app, forPipelineConfig, closeModal } = this.props;
+    const { isNew } = this.state;
+
+    const descriptor = isNew ? 'Create' : 'Update';
+    const loadBalancerCommandFormatted = cloneDeep(values);
+    loadBalancerCommandFormatted.ipAddressType = loadBalancerCommandFormatted.dualstack ? 'dualstack' : 'ipv4';
+    delete loadBalancerCommandFormatted.dualstack;
+
+    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 = (): FormikErrors<IAmazonNetworkLoadBalancerUpsertCommand> => {
+    const errors = {} as FormikErrors<IAmazonNetworkLoadBalancerUpsertCommand>;
+    return errors;
+  };
+
+  public render(): React.ReactElement<ICreateNetworkLoadBalancerProps> {
+    const { app, dismissModal, forPipelineConfig, loadBalancer } = this.props;
+    const { isNew, loadBalancerCommand, taskMonitor } = this.state;
+
+    let heading = forPipelineConfig ? 'Configure Network Load Balancer' : 'Create New Network Load Balancer';
+    if (!isNew) {
+      heading = `Edit ${loadBalancerCommand.name}: ${loadBalancerCommand.region}: ${loadBalancerCommand.credentials}`;
+    }
+
+    const showLocationSection = isNew || forPipelineConfig;
+
+    return (
+      <WizardModal<IAmazonNetworkLoadBalancerUpsertCommand>
+        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}
+                    forPipelineConfig={forPipelineConfig}
+                    formik={formik}
+                    isNew={isNew}
+                    loadBalancer={loadBalancer}
+                    ref={innerRef}
+                  />
+                )}
+              />
+            )}
+
+            <WizardPage
+              label="Target Groups"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => (
+                <TargetGroups ref={innerRef} formik={formik} app={app} isNew={isNew} loadBalancer={loadBalancer} />
+              )}
+            />
+
+            <WizardPage
+              label="Listeners"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <NLBListeners ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label="Advanced Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => (
+                <NLBAdvancedSettings
+                  ref={innerRef}
+                  showDualstack={
+                    !formik.values.isInternal && every(formik.values.targetGroups, { targetType: 'instance' })
+                  }
+                />
+              )}
+            />
+          </>
+        )}
+      />
+    );
+  }
+}