@spinnaker/amazon 0.0.0-main-2

package/src/function/configure/ExecutionRole.tsx

@@ -0,0 +1,45 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { FormikFormField, FormValidator, TextInput } from '@spinnaker/core';
+import { iamRoleValidator } from '../../aws.validators';
+import type { IAmazonFunction } from '../../domain';
+import type { IAmazonFunctionUpsertCommand } from '../../index';
+
+export interface IExecutionRoleProps {
+  formik: FormikProps<IAmazonFunctionUpsertCommand>;
+  isNew?: boolean;
+  functionDef: IAmazonFunction;
+}
+
+export class ExecutionRole
+  extends React.Component<IExecutionRoleProps>
+  implements IWizardPageComponent<IAmazonFunctionUpsertCommand> {
+  constructor(props: IExecutionRoleProps) {
+    super(props);
+  }
+
+  public validate(values: IAmazonFunctionUpsertCommand): FormikErrors<IAmazonFunctionUpsertCommand> {
+    const validator = new FormValidator(values);
+    validator.field('role', 'Role ARN').required().withValidators(iamRoleValidator);
+    return validator.validateForm();
+  }
+
+  public render() {
+    return (
+      <div className="form-group">
+        <div className="col-md-11">
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name="role"
+              label="Role ARN"
+              input={(props) => <TextInput {...props} placeholder="Enter role ARN" name="role" />}
+              required={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/function/configure/FunctionBasicInformation.tsx

@@ -0,0 +1,207 @@
+import classNames from 'classnames';
+import type { FormikErrors, FormikProps } from 'formik';
+import React from 'react';
+import type { Observable } from 'rxjs';
+import { combineLatest as observableCombineLatest, from as observableFrom, Subject } from 'rxjs';
+import { distinctUntilChanged, map, shareReplay, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
+
+import type { Application, IAccount, IRegion, IWizardPageComponent } from '@spinnaker/core';
+import {
+  AccountService,
+  CheckboxInput,
+  FormikFormField,
+  FormValidator,
+  HelpField,
+  ReactSelectInput,
+  TextInput,
+} from '@spinnaker/core';
+import { s3BucketNameValidator } from '../../aws.validators';
+import type { IAmazonFunction } from '../../domain';
+import type { IAmazonFunctionUpsertCommand } from '../../index';
+
+import { availableRuntimes } from '../../pipeline/stages/deployLambda/components/function.constants';
+
+export interface IFunctionProps {
+  app: Application;
+  formik: FormikProps<IAmazonFunctionUpsertCommand>;
+  isNew?: boolean;
+  functionDef: IAmazonFunction;
+}
+
+export interface IFunctionState {
+  existingFunctionNames: string[];
+  accounts: IAccount[];
+  regions: IRegion[];
+}
+
+export class FunctionBasicInformation
+  extends React.Component<IFunctionProps, IFunctionState>
+  implements IWizardPageComponent<IAmazonFunctionUpsertCommand> {
+  public state: IFunctionState = {
+    accounts: [],
+    existingFunctionNames: [],
+    regions: [],
+  };
+
+  private props$ = new Subject<IFunctionProps>();
+  private destroy$ = new Subject<void>();
+
+  public validate(values: IAmazonFunctionUpsertCommand): FormikErrors<IAmazonFunctionUpsertCommand> {
+    const validator = new FormValidator(values);
+    validator.field('s3bucket', 'S3 Bucket Name').optional().withValidators(s3BucketNameValidator);
+    const errors = validator.validateForm();
+
+    if (
+      this.props.isNew &&
+      this.state.existingFunctionNames.includes(this.props.app.name.concat('-').concat(values.functionName))
+    ) {
+      errors.functionName = `There is already a function in ${values.credentials}:${values.region} with that name.`;
+    }
+    return errors;
+  }
+
+  public componentDidUpdate() {
+    this.props$.next(this.props);
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  public componentDidMount(): void {
+    const formValues$ = this.props$.pipe(map((props) => props.formik.values));
+
+    const form = {
+      account$: formValues$.pipe(
+        map((x) => x.credentials),
+        distinctUntilChanged(),
+      ),
+      region$: formValues$.pipe(
+        map((x) => x.region),
+        distinctUntilChanged(),
+      ),
+      functionName$: formValues$.pipe(
+        map((x) => x.functionName),
+        distinctUntilChanged(),
+      ),
+      runtime$: formValues$.pipe(
+        map((x) => x.runtime),
+        distinctUntilChanged(),
+      ),
+      s3bucket$: formValues$.pipe(
+        map((x) => x.s3bucket),
+        distinctUntilChanged(),
+      ),
+      s3key$: formValues$.pipe(
+        map((x) => x.s3key),
+        distinctUntilChanged(),
+      ),
+      handler$: formValues$.pipe(
+        map((x) => x.handler),
+        distinctUntilChanged(),
+      ),
+    };
+
+    const allAccounts$ = observableFrom(AccountService.listAccounts('aws')).pipe(shareReplay(1));
+    // combineLatest with allAccounts to wait for accounts to load and be cached
+    const accountRegions$ = observableCombineLatest([form.account$, allAccounts$]).pipe(
+      switchMap(([currentAccount, _allAccounts]) => AccountService.getRegionsForAccount(currentAccount)),
+      shareReplay(1),
+    );
+
+    const allFunctions$ = this.props.app.getDataSource('functions').data$ as Observable<IAmazonFunction[]>;
+    const regionfunctions$ = observableCombineLatest([allFunctions$, form.account$, form.region$]).pipe(
+      map(([allFunctions, currentAccount, currentRegion]) => {
+        return allFunctions
+          .filter((fn) => fn.account === currentAccount && fn.region === currentRegion)
+          .map((fn) => fn.functionName);
+      }),
+      shareReplay(1),
+    );
+
+    accountRegions$
+      .pipe(withLatestFrom(form.region$), takeUntil(this.destroy$))
+      .subscribe(([accountRegions, selectedRegion]) => {
+        // If the selected region doesn't exist in the new list of regions (for a new acct), select the first region.
+        if (!accountRegions.some((x) => x.name === selectedRegion)) {
+          this.props.formik.setFieldValue('region', accountRegions[0] && accountRegions[0].name);
+        }
+      });
+
+    observableCombineLatest([allAccounts$, accountRegions$, regionfunctions$])
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(([accounts, regions, existingFunctionNames]) => {
+        return this.setState({ accounts, regions, existingFunctionNames });
+      });
+  }
+
+  public render() {
+    const { isNew } = this.props;
+    const { errors, values } = this.props.formik;
+    const { accounts, regions } = this.state;
+    const className = classNames({
+      well: true,
+      'alert-danger': !!errors.functionName,
+      'alert-info': !errors.functionName,
+    });
+    return (
+      <div className="container-fluid form-horizontal ">
+        {isNew && (
+          <div className={className}>
+            <strong>Your function will be named: </strong>
+            <HelpField id="aws.function.name" />
+            <span>
+              {this.props.app.name}-{values.functionName}
+            </span>
+            <FormikFormField name="functionName" input={() => null} />
+          </div>
+        )}
+        <FormikFormField
+          name="credentials"
+          label="Account"
+          input={(props) => (
+            <ReactSelectInput {...props} stringOptions={accounts.map((acc: IAccount) => acc.name)} clearable={true} />
+          )}
+        />
+        <FormikFormField
+          name="region"
+          label="Region"
+          input={(props) => (
+            <ReactSelectInput {...props} stringOptions={regions.map((reg: IRegion) => reg.name)} clearable={true} />
+          )}
+        />
+        <FormikFormField
+          name="functionName"
+          label="Function Name"
+          help={<HelpField id="aws.function.name" />}
+          input={(props) => <TextInput {...props} />}
+        />
+        <FormikFormField
+          name="runtime"
+          label="Runtime"
+          help={<HelpField id="aws.function.runtime" />}
+          input={(props) => <ReactSelectInput {...props} stringOptions={availableRuntimes} clearable={true} />}
+        />
+        <FormikFormField
+          name="s3bucket"
+          label="S3 Bucket"
+          help={<HelpField id="aws.function.s3bucket" />}
+          input={(props) => <TextInput {...props} placeholder="S3 bucket name" />}
+        />
+        <FormikFormField
+          name="s3key"
+          label="S3 Key"
+          help={<HelpField id="aws.function.s3key" />}
+          input={(props) => <TextInput {...props} placeholder="object.zip" />}
+        />
+        <FormikFormField
+          name="handler"
+          label="Handler"
+          help={<HelpField id="aws.function.handler" />}
+          input={(props) => <TextInput {...props} placeholder="filename.method" />}
+        />
+        <FormikFormField name="publish" label="Publish" input={(props) => <CheckboxInput {...props} />} />
+      </div>
+    );
+  }
+}

package/src/function/configure/FunctionDebugAndErrorHandling.tsx

@@ -0,0 +1,49 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { FormikFormField, FormValidator, HelpField, ReactSelectInput, TextInput } from '@spinnaker/core';
+import { awsArnValidator } from '../../aws.validators';
+import type { IAmazonFunction } from '../../domain';
+import type { IAmazonFunctionUpsertCommand } from '../../index';
+
+export interface IFunctionDebugAndErrorHandlingProps {
+  formik: FormikProps<IAmazonFunctionUpsertCommand>;
+  isNew?: boolean;
+  functionDef: IAmazonFunction;
+}
+
+export class FunctionDebugAndErrorHandling
+  extends React.Component<IFunctionDebugAndErrorHandlingProps>
+  implements IWizardPageComponent<IAmazonFunctionUpsertCommand> {
+  constructor(props: IFunctionDebugAndErrorHandlingProps) {
+    super(props);
+  }
+
+  public validate = (values: IAmazonFunctionUpsertCommand): FormikErrors<IAmazonFunctionUpsertCommand> => {
+    const validator = new FormValidator(values);
+    validator.field('deadLetterConfig.targetArn', 'Target ARN').optional().withValidators(awsArnValidator);
+    return validator.validateForm();
+  };
+
+  public render() {
+    return (
+      <div className="container-fluid form-horizontal ">
+        Dead Letter Config
+        <FormikFormField
+          name="deadLetterConfig.targetArn"
+          label="Target ARN"
+          help={<HelpField id="aws.function.deadletterqueue" />}
+          input={(props) => <TextInput {...props} />}
+        />
+        X-Ray Tracing
+        <FormikFormField
+          name="tracingConfig.mode"
+          label="Mode"
+          help={<HelpField id="aws.function.tracingConfig.mode" />}
+          input={(props) => <ReactSelectInput {...props} stringOptions={['Active', 'PassThrough']} clearable={true} />}
+        />
+      </div>
+    );
+  }
+}

package/src/function/configure/FunctionEnvironmentVariables.tsx

@@ -0,0 +1,42 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { FormikFormField, FormValidator, HelpField, MapEditorInput, TextInput } from '@spinnaker/core';
+import { awsArnValidator } from '../../aws.validators';
+import type { IAmazonFunction } from '../../domain';
+import type { IAmazonFunctionUpsertCommand } from '../../index';
+
+export interface IFunctionEnvironmentVariablesProps {
+  formik: FormikProps<IAmazonFunctionUpsertCommand>;
+  isNew?: boolean;
+  functionDef: IAmazonFunction;
+}
+
+export class FunctionEnvironmentVariables
+  extends React.Component<IFunctionEnvironmentVariablesProps>
+  implements IWizardPageComponent<IAmazonFunctionUpsertCommand> {
+  public validate = (values: IAmazonFunctionUpsertCommand) => {
+    const validator = new FormValidator(values);
+    validator.field('kmskeyArn', 'KMS Key ARN').optional().withValidators(awsArnValidator);
+    return validator.validateForm();
+  };
+
+  public render() {
+    return (
+      <div className="container-fluid form-horizontal ">
+        <FormikFormField
+          name="envVariables"
+          label="Env Variables"
+          input={(props) => <MapEditorInput {...props} allowEmptyValues={true} addButtonLabel="Add" />}
+        />
+        <FormikFormField
+          name="kmskeyArn"
+          label="Key ARN"
+          help={<HelpField id="aws.function.kmsKeyArn" />}
+          input={(props) => <TextInput {...props} />}
+        />
+      </div>
+    );
+  }
+}

package/src/function/configure/FunctionSettings.tsx

@@ -0,0 +1,43 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { FormikFormField, HelpField, NumberInput, TextInput } from '@spinnaker/core';
+import type { IAmazonFunction } from '../../domain';
+import type { IAmazonFunctionUpsertCommand } from '../../index';
+
+export interface IFunctionSettingsProps {
+  formik: FormikProps<IAmazonFunctionUpsertCommand>;
+  isNew?: boolean;
+  functionDef: IAmazonFunction;
+}
+
+export class FunctionSettings
+  extends React.Component<IFunctionSettingsProps>
+  implements IWizardPageComponent<IAmazonFunctionUpsertCommand> {
+  public validate = () => {
+    const errors = {} as any;
+    return errors;
+  };
+
+  public render() {
+    return (
+      <div className="container-fluid form-horizontal ">
+        <FormikFormField name="description" label="Description" input={(props) => <TextInput {...props} />} />
+        <FormikFormField
+          name="memorySize"
+          label="Memory (MB)"
+          help={<HelpField id="aws.functionBasicSettings.memorySize" />}
+          input={(props) => <NumberInput {...props} min={128} max={3008} />}
+        />
+        <FormikFormField
+          name="timeout"
+          label="Timeout (seconds)"
+          help={<HelpField id="aws.functionBasicSettings.timeout" />}
+          input={(props) => <NumberInput {...props} min={1} max={900} />}
+        />
+        <FormikFormField name="targetGroups" label="Target Group Name" input={(props) => <TextInput {...props} />} />
+      </div>
+    );
+  }
+}

package/src/function/configure/FunctionTags.tsx

@@ -0,0 +1,35 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { FormikFormField, FormValidator, MapEditorInput } from '@spinnaker/core';
+import { awsTagsValidator } from '../../aws.validators';
+import type { IAmazonFunction } from '../../domain';
+import type { IAmazonFunctionUpsertCommand } from '../../index';
+
+export interface IFunctionTagsProps {
+  formik: FormikProps<IAmazonFunctionUpsertCommand>;
+  isNew?: boolean;
+  functionDef: IAmazonFunction;
+}
+
+export class FunctionTags
+  extends React.Component<IFunctionTagsProps>
+  implements IWizardPageComponent<IAmazonFunctionUpsertCommand> {
+  public validate = (values: IAmazonFunctionUpsertCommand) => {
+    const validator = new FormValidator(values);
+    validator.field('tags', 'Tag').required().withValidators(awsTagsValidator);
+    return validator.validateForm();
+  };
+
+  public render() {
+    return (
+      <div className="container-fluid form-horizontal ">
+        <FormikFormField
+          name="tags"
+          input={(props) => <MapEditorInput {...props} allowEmptyValues={false} addButtonLabel="Add" />}
+        />
+      </div>
+    );
+  }
+}

package/src/function/configure/Network.tsx

@@ -0,0 +1,260 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import { forOwn, uniqBy } from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+import { combineLatest as observableCombineLatest, from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type {
+  Application,
+  IAccount,
+  IRegion,
+  ISecurityGroupsByAccountSourceData,
+  ISubnet,
+  IVpc,
+  IWizardPageComponent,
+} from '@spinnaker/core';
+import {
+  FormikFormField,
+  HelpField,
+  ReactInjector,
+  ReactSelectInput,
+  SubnetReader,
+  TetheredSelect,
+} from '@spinnaker/core';
+import type { IAmazonFunctionUpsertCommand } from '../../index';
+import { VpcReader } from '../../vpc';
+
+export interface ISubnetOption {
+  subnetId: string;
+  vpcId: string;
+}
+
+export interface INetworkProps {
+  formik: FormikProps<IAmazonFunctionUpsertCommand>;
+  isNew?: boolean;
+  app: Application;
+}
+
+export interface INetworkState {
+  vpcOptions: Array<{}>;
+  accounts: IAccount[];
+  regions: IRegion[];
+  subnets: ISubnetOption[];
+  availableSubnets: ISubnetOption[];
+  securityGroups: ISecurityGroupsByAccountSourceData;
+}
+
+export class Network
+  extends React.Component<INetworkProps, INetworkState>
+  implements IWizardPageComponent<IAmazonFunctionUpsertCommand> {
+  constructor(props: INetworkProps) {
+    super(props);
+    this.getAllVpcs();
+  }
+
+  public state: INetworkState = {
+    vpcOptions: [],
+    accounts: null,
+    regions: [],
+    subnets: [],
+    availableSubnets: [],
+    securityGroups: null,
+  };
+  private props$ = new Subject<INetworkProps>();
+  private destroy$ = new Subject<void>();
+
+  private getAllVpcs(): void {
+    observableFrom(VpcReader.listVpcs())
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((Vpcs) => {
+        this.setState({ vpcOptions: Vpcs });
+      });
+  }
+
+  public validate(): FormikErrors<IAmazonFunctionUpsertCommand> {
+    return {};
+  }
+
+  private getAvailableSubnets(): PromiseLike<ISubnet[]> {
+    return SubnetReader.listSubnetsByProvider('aws');
+  }
+
+  private getAvailableSecurityGroups(): PromiseLike<ISecurityGroupsByAccountSourceData> {
+    return ReactInjector.securityGroupReader.getAllSecurityGroups();
+  }
+  private makeSubnetOptions(availableSubnets: ISubnet[]): ISubnetOption[] {
+    const subOptions: ISubnetOption[] = availableSubnets.map((s) => ({ subnetId: s.id, vpcId: s.vpcId }));
+    // we have to filter out any duplicate options
+    const uniqueSubOptions = uniqBy(subOptions, 'subnetId');
+    return uniqueSubOptions;
+  }
+
+  public componentDidUpdate() {
+    this.props$.next(this.props);
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  public componentDidMount(): void {
+    const allSubnets = Promise.resolve(this.getAvailableSubnets())
+      .then((subnets: ISubnet[]) => {
+        subnets.forEach((subnet: ISubnet) => {
+          subnet.label = subnet.id;
+          subnet.deprecated = !!subnet.deprecated;
+          if (subnet.deprecated) {
+            subnet.label += ' (deprecated)';
+          }
+        });
+        return subnets.filter((s) => s.label);
+      })
+      .then((subnets: ISubnet[]) => {
+        return this.makeSubnetOptions(subnets);
+      });
+
+    const secGroups$ = Promise.resolve(this.getAvailableSecurityGroups());
+    observableCombineLatest([allSubnets, secGroups$])
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(([availableSubnets, securityGroups]) => {
+        return this.setState({ availableSubnets, securityGroups });
+      });
+  }
+
+  private handleSubnetUpdate = (options: Array<Option<string>>) => {
+    const subnetsSelected = options.map((o) => o.value);
+    this.props.formik.setFieldValue('subnetIds', subnetsSelected);
+  };
+
+  private handleSecurityGroupsUpdate = (options: Array<Option<string>>) => {
+    const sgSelected = options.map((o) => o.value);
+    this.props.formik.setFieldValue('securityGroupIds', sgSelected);
+  };
+
+  private setVpc = (vpcId: string): void => {
+    this.props.formik.setFieldValue('vpcId', vpcId);
+    this.props.formik.setFieldValue('subnetIds', []);
+    const { availableSubnets } = this.state;
+    const subs = availableSubnets.filter(function (s: ISubnetOption) {
+      return s.vpcId.includes(vpcId);
+    });
+    this.setState({ subnets: subs });
+  };
+
+  private toSubnetOption = (value: ISubnetOption): Option<string> => {
+    return { value: value.subnetId, label: value.subnetId };
+  };
+
+  private getSecurityGroupsByVpc = (sgs: ISecurityGroupsByAccountSourceData): Array<Option<string>> => {
+    const { values } = this.props.formik;
+    const sgOptions: Array<Option<string>> = [];
+    /** Get security groups that belong to current selected account */
+    forOwn(sgs, function (sgByAccount, acc) {
+      if (acc === values.credentials) {
+        /** Get security groups that fall under the provider 'aws' */
+        forOwn(sgByAccount, function (sgByRegion, provider) {
+          if (provider === 'aws') {
+            /** Get security groups that are under the current selected region */
+            forOwn(sgByRegion, function (groups, region) {
+              if (region === values.region) {
+                /** Get security groups that fall under the current selected VPC */
+                groups.forEach(function (group) {
+                  if (group.vpcId === values.vpcId) {
+                    sgOptions.push({ value: group.id, label: group.name });
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    });
+    return sgOptions;
+  };
+
+  private getSubnetOptions = (): Array<Option<string>> => {
+    const { subnets, availableSubnets } = this.state;
+    const { values } = this.props.formik;
+    if (!this.props.isNew && values.vpcId) {
+      return availableSubnets
+        .filter(function (s: ISubnetOption) {
+          return s.vpcId.includes(values.vpcId);
+        })
+        .map(this.toSubnetOption);
+    } else {
+      return subnets.map(this.toSubnetOption);
+    }
+  };
+
+  public render() {
+    const { vpcOptions, securityGroups } = this.state;
+    const { values } = this.props.formik;
+    const subnetOptions = this.getSubnetOptions();
+    const sgOptions = securityGroups ? this.getSecurityGroupsByVpc(securityGroups) : [];
+    return (
+      <div className="form-group">
+        <div className="col-md-11">
+          <div className="sp-margin-m-bottom">
+            {values.credentials && (
+              <FormikFormField
+                name="vpcId"
+                label="VPC Id"
+                help={<HelpField id="aws.function.vpc.id" />}
+                input={(props) => (
+                  <ReactSelectInput
+                    {...props}
+                    stringOptions={vpcOptions
+                      .filter((v: IVpc) => v.account === values.credentials)
+                      .map((v: IVpc) => v.id)}
+                    clearable={true}
+                  />
+                )}
+                onChange={this.setVpc}
+                required={false}
+              />
+            )}
+          </div>
+          <div className="form-group">
+            <div className="col-md-4 sm-label-right">
+              <b>Subnets </b>
+              <HelpField id="aws.function.subnet" />
+            </div>
+            <div className="col-md-7">
+              {subnetOptions.length === 0 && (
+                <div className="form-control-static">No subnets found in the selected account/region/VPC</div>
+              )}
+              {values.vpcId ? (
+                <TetheredSelect
+                  multi={true}
+                  options={subnetOptions}
+                  value={values.subnetIds}
+                  onChange={this.handleSubnetUpdate}
+                />
+              ) : null}
+            </div>
+          </div>
+          <div className="form-group">
+            <div className="col-md-4 sm-label-right">
+              <b>Security Groups </b>
+              <HelpField id="aws.function.subnet" />
+            </div>
+            <div className="col-md-7">
+              {sgOptions.length === 0 && (
+                <div className="form-control-static">No security groups found in the selected account/region/VPC</div>
+              )}
+              {values.credentials && values.vpcId ? (
+                <TetheredSelect
+                  multi={true}
+                  options={sgOptions}
+                  value={values.securityGroupIds}
+                  onChange={this.handleSecurityGroupsUpdate}
+                />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}