@spinnaker/amazon 0.0.0-main-2

package/src/function/details/AmazonFunctionDetails.tsx

@@ -0,0 +1,198 @@
+import { isEmpty } from 'lodash';
+import React from 'react';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { Application, IFunction, IOverridableProps } from '@spinnaker/core';
+import { AccountTag, CollapsibleSection, Details, Overrides } from '@spinnaker/core';
+
+import { FunctionActions } from './FunctionActions';
+import type { IAmazonFunction, IAmazonFunctionSourceData } from '../../domain';
+import { AwsReactInjector } from '../../reactShims';
+
+export interface IFunctionFromStateParams {
+  account: string;
+  region: string;
+  functionName: string;
+}
+
+export interface IAmazonFunctionDetailsProps extends IOverridableProps {
+  app: Application;
+  functionObj: IFunction;
+}
+
+@Overrides('function.details', 'aws')
+export class AmazonFunctionDetails extends React.Component<IAmazonFunctionDetailsProps, any> {
+  private destroy$ = new Subject();
+  constructor(props: IAmazonFunctionDetailsProps) {
+    super(props);
+    this.state = {
+      loading: true,
+    };
+  }
+
+  public extractFunction(): void {
+    const { app, functionObj: functionFromProps } = this.props;
+    const functionDef: IFunction = app.functions.data.find((test: IFunction) => {
+      return (
+        test.functionName === functionFromProps.functionName &&
+        test.region === functionFromProps.region &&
+        test.account === functionFromProps.account
+      );
+    });
+
+    if (functionDef) {
+      observableFrom(
+        AwsReactInjector.functionReader.getFunctionDetails(
+          'aws',
+          functionFromProps.account,
+          functionFromProps.region,
+          functionFromProps.functionName,
+        ),
+      )
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((details: IAmazonFunctionSourceData[]) => {
+          if (details.length) {
+            this.setState({
+              functionDef: details[0] as IAmazonFunction,
+              loading: false,
+            });
+          }
+        });
+    } else {
+      this.setState({
+        functionDef: {},
+        loading: false,
+      });
+    }
+  }
+
+  public componentDidMount(): void {
+    const { app } = this.props;
+    const dataSource = app.functions;
+    observableFrom(dataSource.ready())
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        const dataSourceUnsubscribe = dataSource.onRefresh(null, () => this.extractFunction());
+        this.setState({ dataSourceUnsubscribe });
+        this.extractFunction();
+      });
+  }
+
+  public componentWillUnmount() {
+    this.state.dataSourceUnsubscribe && this.state.dataSourceUnsubscribe();
+    this.destroy$.next();
+  }
+
+  public render() {
+    const { app } = this.props;
+    const { loading, functionDef } = this.state;
+    if (loading) {
+      // Don't bother computing any children if we're loading
+      return <Details loading={loading} />;
+    }
+
+    const functionDetails = (
+      <dl className="horizontal-when-filters-collapsed dl-horizontal dl-narrow">
+        <dt>Last Modified </dt>
+        <dd>{functionDef.lastModified}</dd>
+        <dt>In</dt>
+        <dd>
+          <AccountTag account={functionDef.account} /> {functionDef.region}
+        </dd>
+        <dt>VPC</dt>
+        <dd>{functionDef.vpcConfig ? functionDef.vpcConfig.vpcId : 'Default'}</dd>
+        <dt>Function ARN</dt>
+        <dd>{functionDef.functionArn}</dd>
+        <dt>Revision ID</dt>
+        <dd>{functionDef.revisionId}</dd>
+        <dt>Version</dt>
+        <dd>{functionDef.version}</dd>
+      </dl>
+    );
+
+    const eventSourceDetails = (
+      <dl className="horizontal-when-filters-collapsed dl-horizontal dl-narrow">
+        {functionDef.eventSourceMappings && functionDef.eventSourceMappings.length !== 0
+          ? functionDef.eventSourceMappings.map((value: any) => (
+              <>
+                <h5>
+                  <strong>Event Source</strong>
+                </h5>
+                <dl>
+                  <dt>ARN</dt>
+                  <dd>{value.eventSourceArn}</dd>
+                  <dt>State</dt>
+                  <dd>{value.state}</dd>
+                </dl>
+              </>
+            ))
+          : 'None'}
+      </dl>
+    );
+
+    const aliasConfigurationDetails = (
+      <dl className="horizontal-when-filters-collapsed dl-horizontal dl-narrow">
+        {functionDef.aliasConfigurations && functionDef.aliasConfigurations.length !== 0
+          ? functionDef.aliasConfigurations.map((value: any) => (
+              <>
+                <h5>
+                  <strong>Alias Details</strong>
+                </h5>
+                <dl>
+                  <dt>Name</dt>
+                  <dd>{value.name}</dd>
+                  <dt>ARN</dt>
+                  <dd>{value.aliasArn}</dd>
+                </dl>
+              </>
+            ))
+          : 'None'}
+      </dl>
+    );
+
+    const functionDetailsSection = (
+      <CollapsibleSection heading="Function Details">{functionDetails}</CollapsibleSection>
+    );
+
+    const eventSourceDetailsSection = (
+      <CollapsibleSection heading="Event Source Details">{eventSourceDetails}</CollapsibleSection>
+    );
+
+    const aliasConfigurationDetailsSection = (
+      <CollapsibleSection heading="Alias Configuration Details">{aliasConfigurationDetails}</CollapsibleSection>
+    );
+
+    return (
+      <Details loading={this.state.loading}>
+        {isEmpty(this.state.functionDef) ? (
+          'Function not found.'
+        ) : (
+          <Details.Header
+            icon={<i className="fa fa-xs fa-fw fa-asterisk" />}
+            name={this.state.functionDef.functionName}
+          >
+            <div className="actions">
+              <FunctionActions
+                app={app}
+                functionDef={functionDef}
+                functionFromParams={{
+                  account: this.state.functionDef.account,
+                  region: this.state.functionDef.region,
+                  functionName: this.state.functionDef.functionName,
+                }}
+              />
+            </div>
+          </Details.Header>
+        )}
+        {!isEmpty(this.state.functionDef) ? functionDetailsSection : ''}
+        {!isEmpty(this.state.functionDef) && !isEmpty(this.state.functionDef.eventSourceMappings)
+          ? eventSourceDetailsSection
+          : ''}
+        {!isEmpty(this.state.functionDef) && !isEmpty(this.state.functionDef.aliasConfigurations)
+          ? aliasConfigurationDetailsSection
+          : ''}
+      </Details>
+    );
+  }
+}

package/src/function/details/FunctionActions.spec.tsx

@@ -0,0 +1,55 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+
+import { AWSProviderSettings } from '../../aws.settings';
+import type { IAmazonFunction } from '../../index';
+import { FunctionActions } from '../../index';
+
+describe('FunctionActions', () => {
+  it('should render correct state when all attributes exist', () => {
+    const app = { name: 'app' } as Application;
+
+    const functionDef = { functionName: 'app-function' } as IAmazonFunction;
+    AWSProviderSettings.adHocInfraWritesEnabled = true;
+
+    const wrapper = shallow(
+      <FunctionActions
+        app={app}
+        functionDef={functionDef}
+        functionFromParams={{
+          account: 'test-account',
+          region: 'us-east-1',
+          functionName: 'function-name',
+        }}
+      />,
+    );
+
+    const dropDown = wrapper.find('DropdownToggle');
+
+    expect(dropDown.childAt(0).text()).toEqual('Function Actions');
+  });
+
+  it('should not render DropdownToggle if aws.adHocInfraWritesEnabled is false', () => {
+    const app = { name: 'app' } as Application;
+
+    const functionDef = { functionName: 'app-function' } as IAmazonFunction;
+    AWSProviderSettings.adHocInfraWritesEnabled = false;
+
+    const wrapper = shallow(
+      <FunctionActions
+        app={app}
+        functionDef={functionDef}
+        functionFromParams={{
+          account: 'test-account',
+          region: 'us-east-1',
+          functionName: 'function-name',
+        }}
+      />,
+    );
+
+    const dropDown = wrapper.find('div');
+    expect(dropDown.children().length).toEqual(0);
+  });
+});

package/src/function/details/FunctionActions.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Dropdown } from 'react-bootstrap';
+
+import type { Application } from '@spinnaker/core';
+import {
+  AddEntityTagLinks,
+  ApplicationReader,
+  ConfirmationModalService,
+  FunctionWriter,
+  SETTINGS,
+} from '@spinnaker/core';
+
+import type { IFunctionFromStateParams } from './AmazonFunctionDetails';
+import { CreateLambdaFunction } from '../CreateLambdaFunction';
+import { AWSProviderSettings } from '../../aws.settings';
+import type { IAmazonFunction, IAmazonFunctionDeleteCommand } from '../../domain';
+
+export interface IFunctionActionsProps {
+  app: Application;
+  functionDef: IAmazonFunction;
+  functionFromParams: IFunctionFromStateParams;
+}
+
+export interface IFunctionActionsState {
+  application: Application;
+}
+
+export class FunctionActions extends React.Component<IFunctionActionsProps, IFunctionActionsState> {
+  constructor(props: IFunctionActionsProps) {
+    super(props);
+    this.state = { application: props.app };
+  }
+
+  public componentDidMount(): void {
+    const { app, functionDef } = this.props;
+    let application: Application;
+
+    const functionAppName = functionDef.functionName.split('-')[0];
+    if (functionAppName === app.name) {
+      // Name matches the currently active application
+      application = app;
+    } else {
+      // Load balancer is a part of a different application
+      ApplicationReader.getApplication(functionAppName)
+        .then((functionApp) => {
+          this.setState({ application: functionApp });
+        })
+        .catch(() => {
+          // If the application can't be found, just use the old one
+          this.setState({ application: this.props.app });
+        });
+    }
+
+    this.setState({
+      application,
+    });
+  }
+
+  public editFunction = (): void => {
+    const { functionDef } = this.props;
+    const { application } = this.state;
+    const FunctionModal = CreateLambdaFunction;
+    FunctionModal.show({ app: application, functionDef });
+  };
+
+  public deleteFunction = (): void => {
+    const { app, functionDef, functionFromParams } = this.props;
+    const taskMonitor = {
+      application: app,
+      title: 'Deleting ' + functionFromParams.functionName,
+    };
+    const command: IAmazonFunctionDeleteCommand = {
+      cloudProvider: functionDef.cloudProvider,
+      functionName: functionDef.functionName,
+      region: functionDef.region,
+      credentials: functionDef.credentials,
+    };
+
+    const submitMethod = () => FunctionWriter.deleteFunction(command, app);
+
+    ConfirmationModalService.confirm({
+      header: `Really delete ${functionFromParams.functionName} in ${functionFromParams.region}: ${functionFromParams.account}?`,
+      buttonText: `Delete ${functionFromParams.functionName}`,
+      account: functionFromParams.account,
+      taskMonitorConfig: taskMonitor,
+      submitMethod,
+    });
+  };
+
+  private entityTagUpdate = (): void => {
+    this.props.app.functions.refresh();
+  };
+
+  public render() {
+    const { app, functionDef } = this.props;
+    const { application } = this.state;
+
+    return (
+      <div style={{ display: 'inline-block' }}>
+        {AWSProviderSettings.adHocInfraWritesEnabled && (
+          <Dropdown className="dropdown" id="function-actions-dropdown">
+            <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">
+              <span>Function Actions</span>
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="dropdown-menu">
+              <li className={!application ? 'disabled' : ''}>
+                <a className="clickable" onClick={this.editFunction}>
+                  Edit Function
+                </a>
+              </li>
+              {functionDef.functionName && (
+                <li>
+                  <a className="clickable" onClick={this.deleteFunction}>
+                    Delete Function
+                  </a>
+                </li>
+              )}
+              {SETTINGS && SETTINGS.feature.entityTags && (
+                <AddEntityTagLinks
+                  component={functionDef}
+                  application={app}
+                  entityType="function"
+                  onUpdate={this.entityTagUpdate}
+                />
+              )}
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </div>
+    );
+  }
+}

package/src/function/function.module.ts

@@ -0,0 +1,5 @@
+import { module } from 'angular';
+
+export const AWS_FUNCTION_MODULE = 'spinnaker.amazon.function';
+
+module(AWS_FUNCTION_MODULE, []);

package/src/function/function.transformer.ts

@@ -0,0 +1,71 @@
+import { isEmpty } from 'lodash';
+
+import type { Application } from '@spinnaker/core';
+import { AWSProviderSettings } from '../aws.settings';
+import type { IAmazonFunction, IAmazonFunctionUpsertCommand } from '../domain';
+
+export class AwsFunctionTransformer {
+  public normalizeFunction(functionDef: IAmazonFunction): IAmazonFunction {
+    const normalizedFunctionDef: IAmazonFunction = functionDef;
+    normalizedFunctionDef.credentials = functionDef.account;
+    return normalizedFunctionDef;
+  }
+
+  public convertFunctionForEditing = (functionDef: IAmazonFunction): IAmazonFunctionUpsertCommand => ({
+    ...functionDef,
+    envVariables: functionDef.environment ? functionDef.environment.variables : {},
+    credentials: functionDef.account,
+    tracingConfig: {
+      mode: functionDef.tracingConfig ? functionDef.tracingConfig.mode : '',
+    },
+    deadLetterConfig: {
+      targetArn: functionDef.deadLetterConfig ? functionDef.deadLetterConfig.targetArn : '',
+    },
+    KMSKeyArn: functionDef.kmskeyArn ? functionDef.kmskeyArn : '',
+    subnetIds: functionDef.vpcConfig ? functionDef.vpcConfig.subnetIds : [],
+    securityGroupIds: functionDef.vpcConfig ? functionDef.vpcConfig.securityGroupIds : [],
+    vpcId: functionDef.vpcConfig ? functionDef.vpcConfig.vpcId : '',
+    operation: '',
+    cloudProvider: functionDef.cloudProvider,
+    region: functionDef.region,
+    targetGroups: isEmpty(functionDef.targetGroups) ? '' : functionDef.targetGroups,
+  });
+
+  public constructNewAwsFunctionTemplate(application: Application): IAmazonFunctionUpsertCommand {
+    const defaultCredentials = application.defaultCredentials.aws || AWSProviderSettings.defaults.account;
+    const defaultRegion = application.defaultRegions.aws || AWSProviderSettings.defaults.region;
+
+    return {
+      role: '',
+      runtime: '',
+      s3bucket: '',
+      s3key: '',
+      handler: '',
+      functionName: '',
+      publish: false,
+      tags: {},
+      memorySize: 128,
+      description: '',
+
+      credentials: defaultCredentials,
+      cloudProvider: 'aws',
+      detail: '',
+      region: defaultRegion,
+      envVariables: {},
+
+      tracingConfig: {
+        mode: 'PassThrough',
+      },
+      kmskeyArn: '',
+      vpcId: '',
+      subnetIds: [],
+      securityGroupIds: [],
+      timeout: 3,
+      deadLetterConfig: {
+        targetArn: '',
+      },
+      operation: '',
+      targetGroups: '',
+    };
+  }
+}

package/src/function/index.ts

@@ -0,0 +1,5 @@
+export * from './function.transformer';
+export * from './CreateLambdaFunction';
+export * from './configure/FunctionBasicInformation';
+export * from './details/AmazonFunctionDetails';
+export * from './details/FunctionActions';