@spinnaker/amazon 0.0.0-2025.1-0

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

@@ -0,0 +1,548 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import { filter, flatten, groupBy, set, uniq } from 'lodash';
+import React from 'react';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { Application, IWizardPageComponent } from '@spinnaker/core';
+import {
+  FormValidator,
+  HelpField,
+  spelNumberCheck,
+  SpelNumberInput,
+  SpInput,
+  ValidationMessage,
+  Validators,
+} from '@spinnaker/core';
+
+import { isNameInUse, isNameLong, isValidHealthCheckInterval, isValidTimeout } from '../common/targetGroupValidators';
+import type { IAmazonApplicationLoadBalancer, IAmazonApplicationLoadBalancerUpsertCommand } from '../../../domain';
+
+export interface ITargetGroupsProps {
+  app: Application;
+  formik: FormikProps<IAmazonApplicationLoadBalancerUpsertCommand>;
+  isNew: boolean;
+  loadBalancer: IAmazonApplicationLoadBalancer;
+}
+
+export interface ITargetGroupsState {
+  existingTargetGroupNames: { [account: string]: { [region: string]: string[] } };
+  oldTargetGroupCount: number;
+}
+
+export class TargetGroups
+  extends React.Component<ITargetGroupsProps, ITargetGroupsState>
+  implements IWizardPageComponent<IAmazonApplicationLoadBalancerUpsertCommand> {
+  public protocols = ['HTTP', 'HTTPS'];
+  public targetTypes = ['instance', 'ip', 'lambda'];
+  private destroy$ = new Subject();
+
+  constructor(props: ITargetGroupsProps) {
+    super(props);
+
+    const oldTargetGroupCount = !props.isNew ? props.formik.initialValues.targetGroups.length : 0;
+    this.state = {
+      existingTargetGroupNames: {},
+      oldTargetGroupCount,
+    };
+  }
+
+  public validate(
+    values: IAmazonApplicationLoadBalancerUpsertCommand,
+  ): FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand> {
+    const duplicateTargetGroups = uniq(
+      flatten(filter(groupBy(values.targetGroups, 'name'), (count) => count.length > 1)).map((tg) => tg.name),
+    );
+
+    const formValidator = new FormValidator(values);
+    const { arrayForEach } = formValidator;
+
+    formValidator.field('targetGroups').withValidators(
+      arrayForEach((builder, item) => {
+        builder
+          .field('name', 'Name')
+          .withValidators(
+            isNameInUse(this.state.existingTargetGroupNames, values.credentials, values.region),
+            isNameLong(this.props.app.name.length),
+            Validators.valueUnique(
+              duplicateTargetGroups,
+              'There is already a target group in this load balancer with the same name.',
+            ),
+          );
+        builder
+          .field('healthCheckInterval', 'Health Check Interval')
+          .withValidators(isValidHealthCheckInterval(item), Validators.checkBetween('healthCheckInterval', 5, 300));
+        builder
+          .field('healthyThreshold', 'Healthy Threshold')
+          .withValidators(Validators.checkBetween('healthyThreshold', 2, 10));
+        builder
+          .field('unhealthyThreshold', 'Unhealthy Threshold')
+          .spelAware()
+          .withValidators(Validators.checkBetween('unhealthyThreshold', 2, 10));
+        builder
+          .field('healthCheckTimeout', 'Timeout')
+          .withValidators(isValidTimeout(item), Validators.checkBetween('healthCheckTimeout', 2, 120));
+
+        if (item.targetType !== 'lambda') {
+          builder.field('protocol', 'Protocol').required();
+          builder.field('healthCheckPath', 'Health Check Path').required();
+          builder.field('healthCheckProtocol', 'Health Check Protocol').required();
+          builder.field('name', 'Name').required();
+          builder
+            .field('healthyThreshold', 'Healthy Threshold')
+            .required()
+            .spelAware()
+            .withValidators((value) => spelNumberCheck(value));
+          builder
+            .field('unhealthyThreshold', 'Unhealthy Threshold')
+            .required()
+            .spelAware()
+            .withValidators((value) => spelNumberCheck(value));
+          builder
+            .field('healthCheckInterval', 'Health Check Interval')
+            .required()
+            .spelAware()
+            .withValidators((value) => spelNumberCheck(value));
+          builder
+            .field('healthCheckPort', 'Health Check Port')
+            .required()
+            .spelAware()
+            .withValidators((value) => (value === 'traffic-port' ? null : spelNumberCheck(value)));
+          builder
+            .field('port', 'Port')
+            .required()
+            .spelAware()
+            .withValidators((value) => spelNumberCheck(value));
+          builder
+            .field('healthyThreshold', 'Healthy Threshold')
+            .required()
+            .spelAware()
+            .withValidators((value) => spelNumberCheck(value), Validators.checkBetween('healthyThreshold', 2, 10));
+          builder
+            .field('unhealthyThreshold', 'Unhealthy Threshold')
+            .required()
+            .spelAware()
+            .withValidators((value) => spelNumberCheck(value), Validators.checkBetween('unhealthyThreshold', 2, 10));
+        }
+      }),
+    );
+
+    return formValidator.validateForm();
+  }
+
+  private removeAppName(name: string): string {
+    return name.replace(`${this.props.app.name}-`, '');
+  }
+
+  protected updateLoadBalancerNames(props: ITargetGroupsProps): void {
+    const { app, loadBalancer } = props;
+
+    const targetGroupsByAccountAndRegion: { [account: string]: { [region: string]: string[] } } = {};
+    observableFrom(app.getDataSource('loadBalancers').refresh(true))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        app.getDataSource('loadBalancers').data.forEach((lb: IAmazonApplicationLoadBalancer) => {
+          if (lb.loadBalancerType !== 'classic') {
+            if (!loadBalancer || lb.name !== loadBalancer.name) {
+              lb.targetGroups.forEach((targetGroup) => {
+                targetGroupsByAccountAndRegion[lb.account] = targetGroupsByAccountAndRegion[lb.account] || {};
+                targetGroupsByAccountAndRegion[lb.account][lb.region] =
+                  targetGroupsByAccountAndRegion[lb.account][lb.region] || [];
+                targetGroupsByAccountAndRegion[lb.account][lb.region].push(this.removeAppName(targetGroup.name));
+              });
+            }
+          }
+        });
+
+        this.setState({ existingTargetGroupNames: targetGroupsByAccountAndRegion }, () =>
+          this.props.formik.validateForm(),
+        );
+      });
+  }
+
+  private targetGroupFieldChanged(index: number, field: string, value: string | boolean | number): void {
+    const { setFieldValue, values } = this.props.formik;
+    const targetGroup = values.targetGroups[index];
+    if (field === 'targetType' && value === 'lambda') {
+      delete targetGroup.port;
+    }
+    set(targetGroup, field, value);
+    setFieldValue('targetGroups', values.targetGroups);
+  }
+
+  private addTargetGroup = (): void => {
+    const { setFieldValue, values } = this.props.formik;
+    const tgLength = values.targetGroups.length;
+    values.targetGroups.push({
+      name: `targetgroup${tgLength ? `${tgLength}` : ''}`,
+      protocol: 'HTTP',
+      port: 7001,
+      targetType: 'instance',
+      healthCheckProtocol: 'HTTP',
+      healthCheckPort: '7001',
+      healthCheckPath: '/healthcheck',
+      healthCheckTimeout: 5,
+      healthCheckInterval: 10,
+      healthyThreshold: 10,
+      unhealthyThreshold: 2,
+      attributes: {
+        deregistrationDelay: 300,
+        stickinessEnabled: false,
+        stickinessType: 'lb_cookie',
+        stickinessDuration: 8400,
+      },
+    });
+    setFieldValue('targetGroups', values.targetGroups);
+  };
+
+  private removeTargetGroup(index: number): void {
+    const { setFieldValue, values } = this.props.formik;
+    const { oldTargetGroupCount } = this.state;
+    values.targetGroups.splice(index, 1);
+
+    if (index < oldTargetGroupCount) {
+      this.setState({ oldTargetGroupCount: oldTargetGroupCount - 1 });
+    }
+    setFieldValue('targetGroups', values.targetGroups);
+  }
+
+  public componentDidMount(): void {
+    this.updateLoadBalancerNames(this.props);
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public render() {
+    const { app } = this.props;
+    const { errors, values } = this.props.formik;
+    const { oldTargetGroupCount } = this.state;
+
+    const ProtocolOptions = this.protocols.map((p) => <option key={p}>{p}</option>);
+    const TargetTypeOptions = this.targetTypes.map((p) => <option key={p}>{p}</option>);
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-12">
+            {values.targetGroups.map((targetGroup, index) => {
+              const tgErrors = (errors.targetGroups && errors.targetGroups[index]) || {};
+              const has6sTimeout =
+                (targetGroup.protocol === 'TCP' || targetGroup.protocol === 'TLS') &&
+                targetGroup.healthCheckProtocol === 'HTTP';
+              const has10sTimeout =
+                (targetGroup.protocol === 'TCP' || targetGroup.protocol === 'TLS') &&
+                targetGroup.healthCheckProtocol === 'HTTPS';
+
+              return (
+                <div key={index} className="wizard-pod">
+                  <div>
+                    <div className="wizard-pod-row header">
+                      <div className="wizard-pod-row-title">Group Name</div>
+                      <div className="wizard-pod-row-contents">
+                        <div className="wizard-pod-row-data">
+                          <span className="group-name-prefix">{app.name}-</span>
+                          <input
+                            className="form-control input-sm target-group-name"
+                            type="text"
+                            value={targetGroup.name}
+                            onChange={(event) => this.targetGroupFieldChanged(index, 'name', event.target.value)}
+                            required={true}
+                            disabled={index < oldTargetGroupCount}
+                          />
+                          <a className="sm-label clickable" onClick={() => this.removeTargetGroup(index)}>
+                            <span className="glyphicon glyphicon-trash" />
+                          </a>
+                        </div>
+                        {tgErrors.name && (
+                          <div className="wizard-pod-row-errors">
+                            <ValidationMessage type="error" message={tgErrors.name} />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className="wizard-pod-row">
+                      <div className="wizard-pod-row-title">
+                        <HelpField id="aws.targetGroup.targetType" /> <span>Target Type&nbsp;</span>
+                      </div>
+                      <div className="wizard-pod-row-contents">
+                        <div className="wizard-pod-row-data">
+                          <span className="wizard-pod-content">
+                            <select
+                              className="form-control input-sm"
+                              value={targetGroup.targetType}
+                              onChange={(event) =>
+                                this.targetGroupFieldChanged(index, 'targetType', event.target.value)
+                              }
+                              disabled={index < oldTargetGroupCount}
+                            >
+                              {TargetTypeOptions}
+                            </select>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    {targetGroup.targetType !== 'lambda' && (
+                      <div className="wizard-pod-row">
+                        <div className="wizard-pod-row-title">Backend Connection</div>
+                        <div className="wizard-pod-row-contents">
+                          <div className="wizard-pod-row-data">
+                            <span className="wizard-pod-content">
+                              <label>Protocol </label>
+                              <HelpField id="aws.targetGroup.protocol" />{' '}
+                              <select
+                                className="form-control input-sm inline-number"
+                                value={targetGroup.protocol}
+                                onChange={(event) =>
+                                  this.targetGroupFieldChanged(index, 'protocol', event.target.value)
+                                }
+                                disabled={index < oldTargetGroupCount}
+                              >
+                                {ProtocolOptions}
+                              </select>
+                            </span>
+                            <span className="wizard-pod-content">
+                              <label>Port </label>
+                              <HelpField id="aws.targetGroup.port" />{' '}
+                              <input
+                                className="form-control input-sm inline-number"
+                                value={targetGroup.port}
+                                onChange={(event) => this.targetGroupFieldChanged(index, 'port', event.target.value)}
+                                type="text"
+                                required={true}
+                                disabled={index < oldTargetGroupCount}
+                              />
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                    <div className="wizard-pod-row">
+                      <div className="wizard-pod-row-title">Healthcheck</div>
+                      <div className="wizard-pod-row-contents">
+                        <div className="wizard-pod-row-data">
+                          {targetGroup.targetType !== 'lambda' && (
+                            <span className="wizard-pod-content">
+                              <label>Protocol </label>
+                              {targetGroup.healthCheckProtocol === 'TCP' && (
+                                <HelpField id="aws.targetGroup.healthCheckProtocol" />
+                              )}{' '}
+                              <select
+                                className="form-control input-sm inline-number"
+                                value={targetGroup.healthCheckProtocol}
+                                onChange={(event) =>
+                                  this.targetGroupFieldChanged(index, 'healthCheckProtocol', event.target.value)
+                                }
+                              >
+                                {ProtocolOptions}
+                              </select>
+                            </span>
+                          )}
+                          {targetGroup.targetType !== 'lambda' && (
+                            <span className="wizard-pod-content">
+                              <label>Port </label>
+                              <HelpField id="aws.targetGroup.attributes.healthCheckPort.trafficPort" />{' '}
+                              <select
+                                className="form-control input-sm inline-number"
+                                style={{ width: '90px' }}
+                                value={targetGroup.healthCheckPort === 'traffic-port' ? 'traffic-port' : 'manual'}
+                                onChange={(event) =>
+                                  this.targetGroupFieldChanged(
+                                    index,
+                                    'healthCheckPort',
+                                    event.target.value === 'traffic-port' ? 'traffic-port' : '',
+                                  )
+                                }
+                              >
+                                <option value="traffic-port">Traffic Port</option>
+                                <option value="manual">Manual</option>
+                              </select>{' '}
+                              <SpInput
+                                className="form-control input-sm inline-number"
+                                error={tgErrors.healthCheckPort}
+                                style={{
+                                  visibility: targetGroup.healthCheckPort === 'traffic-port' ? 'hidden' : 'inherit',
+                                }}
+                                name="healthCheckPort"
+                                required={true}
+                                value={targetGroup.healthCheckPort}
+                                onChange={(event) =>
+                                  this.targetGroupFieldChanged(index, 'healthCheckPort', event.target.value)
+                                }
+                              />
+                            </span>
+                          )}
+                          <span className="wizard-pod-content">
+                            <label>Path </label>
+                            <SpInput
+                              error={tgErrors.healthCheckPath}
+                              name="healthCheckPath"
+                              required={true}
+                              value={targetGroup.healthCheckPath}
+                              onChange={(event) =>
+                                this.targetGroupFieldChanged(index, 'healthCheckPath', event.target.value)
+                              }
+                            />
+                          </span>
+                          <span className="wizard-pod-content">
+                            <label>Timeout </label>
+                            {(has6sTimeout || has10sTimeout) && <HelpField id="aws.targetGroup.healthCheckTimeout" />}
+                            <SpelNumberInput
+                              error={tgErrors.healthCheckTimeout}
+                              disabled={has6sTimeout || has10sTimeout}
+                              required={true}
+                              value={has6sTimeout ? 6 : has10sTimeout ? 10 : targetGroup.healthCheckTimeout}
+                              min={2}
+                              max={120}
+                              onChange={(value: string | number) =>
+                                this.targetGroupFieldChanged(index, 'healthCheckTimeout', value)
+                              }
+                            />
+                          </span>
+                          <span className="wizard-pod-content">
+                            <label>Interval </label>
+                            <SpelNumberInput
+                              error={tgErrors.healthCheckInterval}
+                              required={true}
+                              value={targetGroup.healthCheckInterval}
+                              min={5}
+                              max={300}
+                              onChange={(value: string | number) =>
+                                this.targetGroupFieldChanged(index, 'healthCheckInterval', value)
+                              }
+                            />
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="wizard-pod-row">
+                      <div className="wizard-pod-row-title">Healthcheck Threshold</div>
+                      <div className="wizard-pod-row-contents">
+                        <div className="wizard-pod-row-data">
+                          <span className="wizard-pod-content">
+                            <label>Healthy </label>
+                            <SpelNumberInput
+                              error={tgErrors.healthyThreshold}
+                              value={targetGroup.healthyThreshold}
+                              min={2}
+                              max={10}
+                              onChange={(value: string | number) =>
+                                this.targetGroupFieldChanged(index, 'healthyThreshold', value)
+                              }
+                            />
+                          </span>
+                          <span className="wizard-pod-content">
+                            <label>Unhealthy </label>
+                            <SpelNumberInput
+                              error={tgErrors.unhealthyThreshold}
+                              required={true}
+                              value={targetGroup.unhealthyThreshold}
+                              min={2}
+                              max={10}
+                              onChange={(value: string | number) =>
+                                this.targetGroupFieldChanged(index, 'unhealthyThreshold', value)
+                              }
+                            />
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="wizard-pod-row">
+                      <div className="wizard-pod-row-title">Attributes</div>
+                      {targetGroup.targetType !== 'lambda' ? (
+                        <div className="wizard-pod-row-contents">
+                          <div className="wizard-pod-row-data">
+                            <span className="wizard-pod-content">
+                              <label>Dereg. Delay</label>
+                              <HelpField id="aws.targetGroup.attributes.deregistrationDelay" />{' '}
+                              <input
+                                className="form-control input-sm inline-number"
+                                type="text"
+                                value={targetGroup.attributes.deregistrationDelay}
+                                onChange={(event) =>
+                                  this.targetGroupFieldChanged(
+                                    index,
+                                    'attributes.deregistrationDelay',
+                                    event.target.value,
+                                  )
+                                }
+                              />
+                            </span>
+                            <span className="wizard-pod-content">
+                              <label className="checkbox-inline" style={{ paddingTop: '2px' }}>
+                                <input
+                                  type="checkbox"
+                                  checked={targetGroup.attributes.stickinessEnabled}
+                                  onChange={(event) =>
+                                    this.targetGroupFieldChanged(
+                                      index,
+                                      'attributes.stickinessEnabled',
+                                      event.target.checked,
+                                    )
+                                  }
+                                />{' '}
+                                <label>Sticky</label>
+                                <HelpField id="aws.targetGroup.attributes.stickinessEnabled" />
+                              </label>
+                            </span>
+                            {targetGroup.attributes.stickinessEnabled && (
+                              <span className="wizard-pod-content">
+                                <label>Duration </label>
+                                <HelpField id="aws.targetGroup.attributes.stickinessDuration" />{' '}
+                                <input
+                                  className="form-control input-sm inline-number"
+                                  value={targetGroup.attributes.stickinessDuration}
+                                  onChange={(event) =>
+                                    this.targetGroupFieldChanged(
+                                      index,
+                                      'attributes.stickinessDuration',
+                                      event.target.value,
+                                    )
+                                  }
+                                  type="text"
+                                />
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      ) : (
+                        <span className="wizard-pod-content">
+                          <label className="checkbox-inline" style={{ paddingTop: '2px' }}>
+                            <input
+                              type="checkbox"
+                              checked={targetGroup.attributes.multiValueHeadersEnabled}
+                              onChange={(event) =>
+                                this.targetGroupFieldChanged(
+                                  index,
+                                  'attributes.multiValueHeadersEnabled',
+                                  event.target.checked,
+                                )
+                              }
+                            />{' '}
+                            <label>Enable Multi Value Headers</label>
+                          </label>
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+            <table className="table table-condensed packed">
+              <tbody>
+                <tr>
+                  <td>
+                    <button type="button" className="add-new col-md-12" onClick={this.addTargetGroup}>
+                      <span className="glyphicon glyphicon-plus-sign" /> Add new target group
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/loadBalancer/configure/classic/AdvancedSettings.css

@@ -0,0 +1,3 @@
+.AmazonLoadBalancer-AdvancedSettings .StandardFieldLayout .sm-label-right {
+  width: 180px;
+}

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

@@ -0,0 +1,69 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import { FormikFormField, HelpField, NumberInput, Validators } from '@spinnaker/core';
+import type { IAmazonClassicLoadBalancerUpsertCommand } from '../../../domain';
+
+import './AdvancedSettings.css';
+
+export interface IAdvancedSettingsProps {
+  formik: FormikProps<IAmazonClassicLoadBalancerUpsertCommand>;
+}
+
+export class AdvancedSettings extends React.Component<IAdvancedSettingsProps> {
+  public render() {
+    const { values } = this.props.formik;
+    const { maxValue } = Validators;
+    return (
+      <div className="form-group AmazonLoadBalancer-AdvancedSettings">
+        <FormikFormField
+          name="healthTimeout"
+          label="Timeout"
+          required={true}
+          help={<HelpField id="loadBalancer.advancedSettings.healthTimeout" />}
+          input={(props) => <NumberInput {...props} min={0} max={values.healthInterval} />}
+          validate={maxValue(values.healthInterval, 'Timeout must be less than the health interval.')}
+        />
+
+        <FormikFormField
+          name="healthInterval"
+          label="Interval"
+          required={true}
+          help={<HelpField id="loadBalancer.advancedSettings.healthInterval" />}
+          input={(props) => <NumberInput {...props} min={0} />}
+        />
+
+        <FormikFormField
+          name="healthyThreshold"
+          label="Healthy Threshold"
+          required={true}
+          help={<HelpField id="loadBalancer.advancedSettings.healthyThreshold" />}
+          input={(props) => <NumberInput {...props} min={0} />}
+        />
+
+        <FormikFormField
+          name="unhealthyThreshold"
+          label="Unhealthy Threshold"
+          required={true}
+          help={<HelpField id="loadBalancer.advancedSettings.unhealthyThreshold" />}
+          input={(props) => <NumberInput {...props} min={0} />}
+        />
+
+        <FormikFormField
+          name="idleTimeout"
+          label="Idle Timeout"
+          required={true}
+          help={<HelpField id="loadBalancer.advancedSettings.idleTimeout" />}
+          input={(props) => <NumberInput {...props} min={0} />}
+        />
+
+        <div className="col-md-12">
+          <p>
+            Additional configuration options (cross-zone load balancing, session stickiness, access logs) are available
+            via the AWS console.
+          </p>
+        </div>
+      </div>
+    );
+  }
+}