@spinnaker/amazon 0.0.0-main-2

package/src/loadBalancer/TargetGroup.tsx

@@ -0,0 +1,63 @@
+import { UISref, UISrefActive } from '@uirouter/react';
+import { orderBy } from 'lodash';
+import React from 'react';
+
+import { HealthCounts, LoadBalancerInstances, LoadBalancerServerGroup } from '@spinnaker/core';
+import type { IAmazonApplicationLoadBalancer, ITargetGroup } from '../domain/IAmazonLoadBalancer';
+
+import './targetGroup.less';
+
+export interface ITargetGroupProps {
+  loadBalancer: IAmazonApplicationLoadBalancer;
+  targetGroup: ITargetGroup;
+  showServerGroups: boolean;
+  showInstances: boolean;
+}
+
+export class TargetGroup extends React.Component<ITargetGroupProps> {
+  public render(): React.ReactElement<TargetGroup> {
+    const { targetGroup, showInstances, showServerGroups, loadBalancer } = this.props;
+
+    const ServerGroups = orderBy(
+      targetGroup.serverGroups,
+      ['isDisabled', 'name'],
+      ['asc', 'desc'],
+    ).map((serverGroup) => (
+      <LoadBalancerServerGroup
+        key={serverGroup.name}
+        account={serverGroup.account}
+        region={serverGroup.region}
+        serverGroup={serverGroup}
+        showInstances={showInstances}
+      />
+    ));
+
+    const params = {
+      loadBalancerName: loadBalancer.name,
+      region: targetGroup.region,
+      accountId: targetGroup.account,
+      name: targetGroup.name,
+      vpcId: targetGroup.vpcId,
+      provider: targetGroup.cloudProvider,
+    };
+
+    return (
+      <div className="target-group-container container-fluid no-padding">
+        <UISrefActive class="active">
+          <UISref to=".targetGroupDetails" params={params}>
+            <div className={`clickable clickable-row row no-margin-y target-group-header`}>
+              <div className="col-md-8 target-group-title">{targetGroup.name}</div>
+              <div className="col-md-4 text-right">
+                <HealthCounts container={targetGroup.instanceCounts} />
+              </div>
+            </div>
+          </UISref>
+        </UISrefActive>
+        {showServerGroups && ServerGroups}
+        {!showServerGroups && showInstances && (
+          <LoadBalancerInstances serverGroups={targetGroup.serverGroups} instances={targetGroup.instances} />
+        )}
+      </div>
+    );
+  }
+}

package/src/loadBalancer/TargetGroupDetails.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type { IOverridableProps } from '@spinnaker/core';
+import { Overridable } from '@spinnaker/core';
+
+export interface ITargetGroupDetailsProps extends IOverridableProps {}
+
+@Overridable('loadBalancer.targetGroupDetails')
+export class TargetGroupDetails extends React.Component<ITargetGroupDetailsProps> {
+  public render() {
+    return <h3>Target Group Details</h3>;
+  }
+}

package/src/loadBalancer/amazonLoadBalancerDataUtils.ts

@@ -0,0 +1,64 @@
+import { flatten } from 'lodash';
+import { $q } from 'ngimport';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+import { AccountService } from '@spinnaker/core';
+import type { IAmazonApplicationLoadBalancer, IAmazonHealth, IAmazonServerGroup, ITargetGroup } from '../domain';
+
+export class AmazonLoadBalancerDataUtils {
+  private static buildTargetGroup(match: ITargetGroup, serverGroup: IAmazonServerGroup): ITargetGroup {
+    if (!match) {
+      return null;
+    }
+
+    const targetGroup: ITargetGroup = {
+      name: match.name,
+      vpcId: match.vpcId,
+      cloudProvider: match.cloudProvider,
+      account: match.account,
+      region: match.region,
+      loadBalancerNames: match.loadBalancerNames,
+    } as ITargetGroup;
+    targetGroup.instanceCounts = { up: 0, down: 0, succeeded: 0, failed: 0, outOfService: 0, unknown: 0, starting: 0 };
+
+    serverGroup.instances.forEach((instance) => {
+      const tgHealth: IAmazonHealth = instance.health.find((h) => h.type === 'TargetGroup') as IAmazonHealth;
+      if (tgHealth) {
+        const matchedHealth: ILoadBalancer = tgHealth.targetGroups.find((tg) => tg.name === match.name);
+
+        if (matchedHealth !== undefined && matchedHealth.healthState !== undefined) {
+          const healthState = matchedHealth.healthState.toLowerCase();
+          if (targetGroup.instanceCounts[healthState] !== undefined) {
+            targetGroup.instanceCounts[healthState]++;
+          }
+        }
+      }
+    });
+    return targetGroup;
+  }
+
+  public static populateTargetGroups(
+    application: Application,
+    serverGroup: IAmazonServerGroup,
+  ): PromiseLike<ITargetGroup[]> {
+    return $q
+      .all([AccountService.getAccountDetails(serverGroup.account), application.getDataSource('loadBalancers').ready()])
+      .then((data) => {
+        const awsAccount = (data[0] && data[0].awsAccount) || serverGroup.account;
+        const loadBalancers: IAmazonApplicationLoadBalancer[] = (application.loadBalancers
+          .data as ILoadBalancer[]).filter(
+          (lb) => lb.loadBalancerType === 'application' || lb.loadBalancerType === 'network',
+        ) as IAmazonApplicationLoadBalancer[];
+        const targetGroups = serverGroup.targetGroups
+          .map((targetGroupName: string) => {
+            const allTargetGroups = flatten(loadBalancers.map((lb) => lb.targetGroups || []));
+            const targetGroup = allTargetGroups.find(
+              (tg) => tg.name === targetGroupName && tg.region === serverGroup.region && tg.account === awsAccount,
+            );
+            return this.buildTargetGroup(targetGroup, serverGroup);
+          })
+          .filter((tg) => tg);
+        return targetGroups;
+      });
+  }
+}

package/src/loadBalancer/configure/AmazonLoadBalancerChoiceModal.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Button, Modal } from 'react-bootstrap';
+
+import type { ILoadBalancerIncompatibility, ILoadBalancerModalProps } from '@spinnaker/core';
+import { CloudProviderRegistry, Markdown, ModalClose, noop, ReactModal } from '@spinnaker/core';
+
+import type { IAmazonLoadBalancerConfig } from './LoadBalancerTypes';
+import { LoadBalancerTypes } from './LoadBalancerTypes';
+import { AWSProviderSettings } from '../../aws.settings';
+
+export interface IAmazonLoadBalancerChoiceModalState {
+  choices: IAmazonLoadBalancerConfig[];
+  selectedChoice: IAmazonLoadBalancerConfig;
+}
+
+export class AmazonLoadBalancerChoiceModal extends React.Component<
+  ILoadBalancerModalProps,
+  IAmazonLoadBalancerChoiceModalState
+> {
+  public static defaultProps: Partial<ILoadBalancerModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  public static show(props: ILoadBalancerModalProps): Promise<void> {
+    return ReactModal.show(
+      AmazonLoadBalancerChoiceModal,
+      {
+        ...props,
+        className: 'create-pipeline-modal-overflow-visible modal-lg',
+      },
+      { bsSize: 'lg' },
+    );
+  }
+
+  constructor(props: ILoadBalancerModalProps) {
+    super(props);
+    this.state = {
+      choices: LoadBalancerTypes,
+      selectedChoice: LoadBalancerTypes[0],
+    };
+  }
+
+  public choiceSelected(choice: IAmazonLoadBalancerConfig): void {
+    this.setState({ selectedChoice: choice });
+  }
+
+  private choose = (): void => {
+    const { children, ...loadBalancerProps } = this.props;
+    this.close();
+    this.state.selectedChoice.component
+      .show(loadBalancerProps)
+      .then((loadBalancer) => {
+        this.props.closeModal(loadBalancer);
+      })
+      .catch(() => {});
+  };
+
+  public close = (reason?: any): void => {
+    this.props.dismissModal(reason);
+  };
+
+  private getIncompatibility(choice: IAmazonLoadBalancerConfig, cloudProvider: string): ILoadBalancerIncompatibility {
+    const { loadBalancer = {} } = CloudProviderRegistry.getProvider(cloudProvider);
+    const {
+      incompatibleLoadBalancerTypes = [],
+    }: { incompatibleLoadBalancerTypes: ILoadBalancerIncompatibility[] } = loadBalancer;
+
+    return incompatibleLoadBalancerTypes.find((lb) => lb.type === choice.type);
+  }
+
+  private isIncompatibleWithAllProviders(choice: IAmazonLoadBalancerConfig) {
+    const {
+      app: { attributes },
+    } = this.props;
+    const { cloudProviders = [] }: { cloudProviders: string[] } = attributes;
+
+    if (cloudProviders.length > 0) {
+      return cloudProviders.every((cloudProvider: string) => !!this.getIncompatibility(choice, cloudProvider));
+    }
+
+    // If the list of cloud providers is empty, assume it is compatible by default
+    return false;
+  }
+
+  public render() {
+    const {
+      app: { attributes },
+    } = this.props;
+    const { cloudProviders = [] }: { cloudProviders: string[] } = attributes;
+    const { choices, selectedChoice } = this.state;
+
+    // Remove any choices that are not compatible with all configured cloud providers
+    const filteredChoices = choices.filter((choice) => !this.isIncompatibleWithAllProviders(choice));
+
+    // Compute incompatibilities with the current selected choice so we can display a warning
+    const incompatibilities: ILoadBalancerIncompatibility[] = cloudProviders
+      .map((cloudProvider) => this.getIncompatibility(selectedChoice, cloudProvider))
+      .filter((x: ILoadBalancerIncompatibility) => x);
+
+    const loadBalancerWarning =
+      AWSProviderSettings.createLoadBalancerWarnings &&
+      AWSProviderSettings.createLoadBalancerWarnings[selectedChoice.type];
+
+    return (
+      <>
+        <ModalClose dismiss={this.close} />
+        <Modal.Header>
+          <Modal.Title>Select Type of Load Balancer</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="modal-body">
+            <div className="card-choices">
+              {filteredChoices.map((choice) => (
+                <div
+                  key={choice.type}
+                  className={`card ${selectedChoice === choice ? 'active' : ''}`}
+                  onClick={() => this.choiceSelected(choice)}
+                >
+                  <h3 className="load-balancer-label">{choice.label}</h3>
+                  <h3>({choice.sublabel})</h3>
+                  <div>{choice.description}</div>
+                </div>
+              ))}
+            </div>
+            <>
+              {incompatibilities.length > 0 &&
+                incompatibilities.map((incompatibility) => (
+                  <div className="alert alert-warning">
+                    <p>
+                      <i className="fa fa-exclamation-triangle" /> {incompatibility.reason}
+                    </p>
+                  </div>
+                ))}
+            </>
+            {!!loadBalancerWarning && (
+              <div className="alert alert-warning">
+                <p>
+                  <i className="fa fa-exclamation-triangle" />
+                  <Markdown message={loadBalancerWarning} style={{ display: 'inline-block', marginLeft: '2px' }} />
+                </p>
+              </div>
+            )}
+            <div className="load-balancer-description" />
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.choose}>
+            Configure Load Balancer <span className="glyphicon glyphicon-chevron-right" />
+          </Button>
+        </Modal.Footer>
+      </>
+    );
+  }
+}

package/src/loadBalancer/configure/LoadBalancerTypes.ts

@@ -0,0 +1,42 @@
+import type { ILoadBalancerModalProps } from '@spinnaker/core';
+
+import { CreateApplicationLoadBalancer } from './application/CreateApplicationLoadBalancer';
+import { CreateClassicLoadBalancer } from './classic/CreateClassicLoadBalancer';
+import type { IAmazonLoadBalancerUpsertCommand } from '../../domain';
+import { CreateNetworkLoadBalancer } from './network/CreateNetworkLoadBalancer';
+
+export interface ICloseableLoadBalancerModal extends React.ComponentClass<ILoadBalancerModalProps> {
+  show: (props: ILoadBalancerModalProps) => Promise<IAmazonLoadBalancerUpsertCommand>;
+}
+
+export interface IAmazonLoadBalancerConfig {
+  type: 'network' | 'application' | 'classic';
+  label: string;
+  sublabel: string;
+  description: string;
+  component: ICloseableLoadBalancerModal;
+}
+
+export const LoadBalancerTypes: IAmazonLoadBalancerConfig[] = [
+  {
+    type: 'application',
+    label: 'Application',
+    sublabel: 'ALB',
+    description: 'Highly configurable, application-focused balancer. HTTP and HTTPS only.',
+    component: CreateApplicationLoadBalancer,
+  },
+  {
+    type: 'network',
+    label: 'Network',
+    sublabel: 'NLB',
+    description: 'Basic, high-performance balancer with fixed IP.',
+    component: CreateNetworkLoadBalancer,
+  },
+  {
+    type: 'classic',
+    label: 'Classic',
+    sublabel: 'Legacy',
+    description: 'Previous generation balancer (ELB).',
+    component: CreateClassicLoadBalancer,
+  },
+];

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { CheckboxInput, FormikFormField, HelpField, NumberInput } from '@spinnaker/core';
+
+export const ALBAdvancedSettings = React.forwardRef<HTMLDivElement, {}>((_, ref) => (
+  <div ref={ref}>
+    <FormikFormField
+      name="idleTimeout"
+      label="Idle Timeout"
+      help={<HelpField id="loadBalancer.advancedSettings.idleTimeout" />}
+      input={(inputProps) => <NumberInput {...inputProps} min={0} />}
+    />
+
+    <FormikFormField
+      name="deletionProtection"
+      label="Protection"
+      help={<HelpField id="loadBalancer.advancedSettings.deletionProtection" />}
+      input={(inputProps) => <CheckboxInput {...inputProps} text="Enable delete protection" />}
+    />
+
+    <FormikFormField
+      name="dualstack"
+      label="Dualstack"
+      help={<HelpField id="loadBalancer.advancedSettings.albIpAddressType" />}
+      input={(inputProps) => <CheckboxInput {...inputProps} text="Assign Ipv4 and IPv6" />}
+    />
+  </div>
+));