@spinnaker/cloudfoundry 0.0.0-main-2

package/src/presentation/pipeline/stages/CloudFoundryServiceKeyExecutionDetails.tsx

@@ -0,0 +1,52 @@
+import { get } from 'lodash';
+import React from 'react';
+
+import type { IExecutionDetailsSectionProps } from '@spinnaker/core';
+import { AccountTag, ExecutionDetailsSection, StageExecutionLogs, StageFailureMessage } from '@spinnaker/core';
+
+export function CloudFoundryServiceKeyExecutionDetails(props: IExecutionDetailsSectionProps) {
+  const { stage } = props;
+  const { context } = stage;
+  const account = get(context, 'service.account', undefined);
+  const region = get(context, 'service.region', undefined);
+  const serviceInstanceName = get(context, 'serviceInstanceName', undefined);
+  const serviceKeyName = get(context, 'serviceKeyName', undefined);
+  return (
+    <ExecutionDetailsSection name={props.name} current={props.current}>
+      <div className="step-section-details">
+        <div className="row">
+          <div className="col-md-12">
+            <dl className="dl-horizontal">
+              <dt>Account</dt>
+              <dd>
+                <AccountTag account={account} />
+              </dd>
+              <dt>Region</dt>
+              <dd>
+                {region}
+                <br />
+              </dd>
+              <dt>Service Instance Name</dt>
+              <dd>
+                {serviceInstanceName}
+                <br />
+              </dd>
+              <dt>Service Key Name</dt>
+              <dd>
+                {serviceKeyName}
+                <br />
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <StageFailureMessage stage={props.stage} message={props.stage.failureMessage} />
+      <StageExecutionLogs stage={props.stage} />
+    </ExecutionDetailsSection>
+  );
+}
+
+// eslint-disable-next-line
+export namespace CloudFoundryServiceKeyExecutionDetails {
+  export const title = 'cloudfoundryServiceKeyConfig';
+}

package/src/presentation/pipeline/stages/index.ts

@@ -0,0 +1,5 @@
+export * from './CloudFoundryAsgStageConfig';
+export * from './CloudFoundryLoadBalancersExecutionDetails';
+export * from './CloudFoundryLoadBalancersStageConfig';
+export * from './CloudFoundryServiceExecutionDetails';
+export * from './CloudFoundryServiceKeyExecutionDetails';

package/src/presentation/widgets/accountRegionClusterSelector/AccountRegionClusterSelector.spec.tsx

@@ -0,0 +1,385 @@
+import type { IScope } from 'angular';
+import { mock, noop } from 'angular';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import type { Application, ApplicationDataSource, IMoniker, IServerGroup } from '@spinnaker/core';
+import { ApplicationModelBuilder, REACT_MODULE } from '@spinnaker/core';
+
+import type { IAccountRegionClusterSelectorProps } from './AccountRegionClusterSelector';
+import { AccountRegionClusterSelector } from './AccountRegionClusterSelector';
+
+describe('<AccountRegionClusterSelector />', () => {
+  let $scope: IScope;
+  let application: Application;
+
+  function createServerGroup(account: string, cluster: string, name: string, region: string): IServerGroup {
+    return {
+      account,
+      cloudProvider: 'cloud-provider',
+      cluster,
+      name,
+      region,
+      instances: [{ health: null, id: 'instance-id', launchTime: 0, name: 'instance-name', zone: 'GMT' }],
+      instanceCounts: { up: 1, down: 0, starting: 0, succeeded: 1, failed: 0, unknown: 0, outOfService: 0 },
+      moniker: { app: 'my-app', cluster, detail: 'my-detail', stack: 'my-stack', sequence: 1 },
+    } as IServerGroup;
+  }
+
+  beforeEach(mock.module(REACT_MODULE));
+  beforeEach(
+    mock.inject(($rootScope: IScope) => {
+      $scope = $rootScope.$new();
+      application = ApplicationModelBuilder.createApplicationForTests('app', {
+        key: 'serverGroups',
+        loaded: true,
+        data: [
+          createServerGroup('account-name-one', 'app-stack-detailOne', 'app', 'region-one'),
+          createServerGroup('account-name-two', 'app-stack-detailTwo', 'app', 'region-two'),
+          createServerGroup('account-name-one', 'app-stack-detailOne', 'app', 'region-three'),
+          createServerGroup('account-name-one', 'app-stack-detailThree', 'app', 'region-one'),
+          createServerGroup('account-name-one', 'app-stack-detailFour', 'app', 'region-three'),
+          createServerGroup('account-name-one', 'app-stack-detailFive', 'app', 'region-two'),
+        ],
+        defaultData: [] as IServerGroup[],
+      } as ApplicationDataSource<IServerGroup[]>);
+    }),
+  );
+
+  it('initializes properly with provided component', () => {
+    const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
+      accounts: [
+        {
+          accountId: 'account-id-one',
+          name: 'account-name-one',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+      ],
+      application,
+      cloudProvider: 'cloud-provider',
+      onComponentUpdate: noop,
+      component: {
+        credentials: 'account-name-one',
+        regions: ['region-one'],
+      },
+    };
+
+    const component = shallow<AccountRegionClusterSelector>(
+      <AccountRegionClusterSelector {...accountRegionClusterProps} />,
+    );
+    $scope.$digest();
+
+    expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
+    expect(component.state().availableRegions).toContain('region-one');
+    expect(component.state().availableRegions).toContain('region-two');
+    expect(component.state().availableRegions).toContain('region-three');
+    expect(component.state().clusters.length).toBe(2, 'number of clusters does not match');
+    expect(component.state().clusters).toContain('app-stack-detailOne');
+    expect(component.state().clusters).toContain('app-stack-detailThree');
+    expect(component.state().clusterField).toBe('cluster');
+    expect(component.state().componentName).toBe('');
+  });
+
+  it('retrieves the correct list of regions when account is changed', () => {
+    let credentials = '';
+    let region = 'SHOULD-CHANGE';
+    let regions = ['SHOULD-CHANGE'];
+    let cluster = 'SHOULD-CHANGE';
+    const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
+      accounts: [
+        {
+          accountId: 'account-id-two',
+          name: 'account-name-two',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+        {
+          accountId: 'account-id-one',
+          name: 'account-name-one',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+      ],
+      application,
+      cloudProvider: 'cloud-provider',
+      onComponentUpdate: (value: any) => {
+        credentials = value.credentials;
+        region = value.region;
+        regions = value.regions;
+        cluster = value.cluster;
+      },
+      component: {
+        credentials: 'account-name-one',
+        regions: ['region-one'],
+      },
+    };
+
+    const component = mount<AccountRegionClusterSelector>(
+      <AccountRegionClusterSelector {...accountRegionClusterProps} />,
+    );
+    $scope.$digest();
+
+    expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
+    expect(component.state().availableRegions).toContain('region-one');
+    expect(component.state().availableRegions).toContain('region-two');
+    expect(component.state().availableRegions).toContain('region-three');
+    expect(component.state().clusters.length).toBe(2, 'number of clusters does not match');
+    expect(component.state().clusters).toContain('app-stack-detailOne');
+    expect(component.state().clusters).toContain('app-stack-detailThree');
+
+    const accountSelectComponent = component.find('Select[name="credentials"] .Select-control input');
+    accountSelectComponent.simulate('mouseDown');
+    accountSelectComponent.simulate('change', { target: { value: 'account-name-two' } });
+    accountSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
+    $scope.$digest();
+
+    expect(component.state().availableRegions.length).toBe(1, 'number of available regions does not match');
+    expect(component.state().availableRegions).toContain('region-two');
+    expect(component.state().clusters.length).toBe(0, 'number of clusters does not match');
+    expect(region).toEqual('', 'selected region is not cleared');
+    expect(regions.length).toBe(0, 'selected regions list is not cleared');
+    expect(credentials).toContain('account-name-two');
+    expect(cluster).toBeUndefined('selected cluster is not cleared');
+  });
+
+  it('retrieves the correct list of clusters when the selector is multi-region and the region is changed', () => {
+    let regions: string[] = [];
+    let cluster = 'SHOULD-CHANGE';
+    const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
+      accounts: [
+        {
+          accountId: 'account-id-two',
+          name: 'account-name-two',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+        {
+          accountId: 'account-id-one',
+          name: 'account-name-one',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+      ],
+      application,
+      cloudProvider: 'cloud-provider',
+      clusterField: 'newCluster',
+      onComponentUpdate: (value: any) => {
+        regions = value.regions;
+        cluster = value.newCluster;
+      },
+      component: {
+        credentials: 'account-name-one',
+        regions: ['region-one'],
+      },
+    };
+
+    const component = mount<AccountRegionClusterSelector>(
+      <AccountRegionClusterSelector {...accountRegionClusterProps} />,
+    );
+    $scope.$digest();
+
+    expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
+    expect(component.state().availableRegions).toContain('region-one');
+    expect(component.state().availableRegions).toContain('region-two');
+    expect(component.state().availableRegions).toContain('region-three');
+    expect(component.state().clusters.length).toBe(2, 'number of clusters does not match');
+    expect(component.state().clusters).toContain('app-stack-detailOne');
+    expect(component.state().clusters).toContain('app-stack-detailThree');
+
+    const accountSelectComponent = component.find('Select[name="regions"] .Select-control input');
+    accountSelectComponent.simulate('mouseDown');
+    accountSelectComponent.simulate('change', { target: { value: 'region-three' } });
+    accountSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
+    $scope.$digest();
+
+    expect(component.state().clusters.length).toBe(3, 'number of clusters does not match');
+    expect(component.state().clusters).toContain('app-stack-detailOne');
+    expect(component.state().clusters).toContain('app-stack-detailThree');
+    expect(component.state().clusters).toContain('app-stack-detailFour');
+    expect(cluster).toBeUndefined('selected cluster is not cleared');
+    expect(regions.length).toBe(2);
+    expect(regions).toContain('region-one');
+    expect(regions).toContain('region-three');
+  });
+
+  it('retrieves the correct list of clusters on startup and the selector is single-region', () => {
+    const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
+      accounts: [
+        {
+          accountId: 'account-id-two',
+          name: 'account-name-two',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+        {
+          accountId: 'account-id-one',
+          name: 'account-name-one',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+      ],
+      application,
+      cloudProvider: 'cloud-provider',
+      onComponentUpdate: (_value: any) => {},
+      component: {
+        cluster: 'app-stack-detailOne',
+        credentials: 'account-name-one',
+        region: 'region-one',
+      },
+      isSingleRegion: true,
+    };
+
+    const component = mount<AccountRegionClusterSelector>(
+      <AccountRegionClusterSelector {...accountRegionClusterProps} />,
+    );
+    $scope.$digest();
+
+    expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
+    expect(component.state().availableRegions).toContain('region-one');
+    expect(component.state().availableRegions).toContain('region-two');
+    expect(component.state().availableRegions).toContain('region-three');
+    expect(component.state().clusters.length).toBe(2, 'number of clusters does not match');
+    expect(component.state().clusters).toContain('app-stack-detailOne');
+    expect(component.state().clusters).toContain('app-stack-detailThree');
+  });
+
+  it('the cluster value is updated in the component when cluster is changed', () => {
+    let cluster = '';
+    let moniker: IMoniker = { app: '' };
+    const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
+      accounts: [
+        {
+          accountId: 'account-id-two',
+          name: 'account-name-two',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+        {
+          accountId: 'account-id-one',
+          name: 'account-name-one',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+      ],
+      application,
+      cloudProvider: 'cloud-provider',
+      clusterField: 'newCluster',
+      onComponentUpdate: (value: any) => {
+        cluster = value.newCluster;
+        moniker = value.moniker;
+      },
+      component: {
+        cluster: 'app-stack-detailOne',
+        credentials: 'account-name-one',
+        regions: ['region-one'],
+      },
+    };
+
+    const expectedMoniker = {
+      app: 'my-app',
+      cluster: 'app-stack-detailThree',
+      detail: 'my-detail',
+      stack: 'my-stack',
+      sequence: null,
+    } as IMoniker;
+
+    const component = mount<AccountRegionClusterSelector>(
+      <AccountRegionClusterSelector {...accountRegionClusterProps} />,
+    );
+    $scope.$digest();
+
+    expect(component.state().availableRegions.length).toBe(3, 'number of available regions does not match');
+    expect(component.state().availableRegions).toContain('region-one');
+    expect(component.state().availableRegions).toContain('region-two');
+    expect(component.state().availableRegions).toContain('region-three');
+    expect(component.state().clusters.length).toBe(2, 'number of clusters does not match');
+    expect(component.state().clusters).toContain('app-stack-detailOne');
+    expect(component.state().clusters).toContain('app-stack-detailThree');
+
+    const clusterSelectComponent = component.find('Select[name="newCluster"] .Select-control input');
+    clusterSelectComponent.simulate('mouseDown');
+    clusterSelectComponent.simulate('change', { target: { value: 'app-stack-detailThree' } });
+    clusterSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
+    $scope.$digest();
+
+    expect(cluster).toBe('app-stack-detailThree');
+    expect(moniker).toEqual(expectedMoniker);
+  });
+
+  it('the cluster value is updated in the component when cluster is changed to freeform value', () => {
+    let cluster = '';
+    let moniker: IMoniker = { app: '' };
+    const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
+      accounts: [
+        {
+          accountId: 'account-id-two',
+          name: 'account-name-two',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+        {
+          accountId: 'account-id-one',
+          name: 'account-name-one',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+      ],
+      application,
+      cloudProvider: 'cloud-provider',
+      clusterField: 'newCluster',
+      onComponentUpdate: (value: any) => {
+        cluster = value.newCluster;
+        moniker = value.moniker;
+      },
+      component: {
+        cluster: 'app-stack-detailOne',
+        credentials: 'account-name-one',
+        regions: ['region-one'],
+      },
+    };
+
+    const component = mount<AccountRegionClusterSelector>(
+      <AccountRegionClusterSelector {...accountRegionClusterProps} />,
+    );
+    $scope.$digest();
+
+    const clusterSelectComponent = component.find('Select[name="newCluster"] .Select-control input');
+    clusterSelectComponent.simulate('mouseDown');
+    clusterSelectComponent.simulate('change', { target: { value: 'app-stack-freeform' } });
+    clusterSelectComponent.simulate('keyDown', { keyCode: 9, key: 'Tab' });
+    $scope.$digest();
+
+    expect(cluster).toBe('app-stack-freeform');
+    expect(moniker).toBeUndefined();
+    expect(component.state().clusters).toContain('app-stack-freeform');
+  });
+
+  it('initialize with form names', () => {
+    const accountRegionClusterProps: IAccountRegionClusterSelectorProps = {
+      accounts: [
+        {
+          accountId: 'account-id-one',
+          name: 'account-name-one',
+          requiredGroupMembership: [],
+          type: 'account-type',
+        },
+      ],
+      application,
+      cloudProvider: 'cloud-provider',
+      onComponentUpdate: noop,
+      componentName: 'form',
+      component: {
+        credentials: 'account-name-one',
+        regions: ['region-one'],
+      },
+    };
+
+    const component = shallow(<AccountRegionClusterSelector {...accountRegionClusterProps} />);
+    $scope.$digest();
+
+    expect(component.find('Select[name="form.credentials"]').length).toBe(1, 'select for account not found');
+    expect(component.find('Select[name="form.regions"]').length).toBe(1, 'select for regions not found');
+    expect(component.find('StageConfigField [name="form.cluster"]').length).toBe(1, 'select for cluster not found');
+  });
+});

package/src/presentation/widgets/accountRegionClusterSelector/AccountRegionClusterSelector.tsx

@@ -0,0 +1,231 @@
+import { first, isNil, uniq } from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select, { Creatable } from 'react-select';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { Application, IAccount, IMoniker, IServerGroup, IServerGroupFilter } from '@spinnaker/core';
+import { AppListExtractor, StageConfigField } from '@spinnaker/core';
+
+export interface IAccountRegionClusterSelectorProps {
+  accounts: IAccount[];
+  application: Application;
+  cloudProvider: string;
+  clusterField?: string;
+  component: any;
+  componentName?: string;
+  isSingleRegion?: boolean;
+  onComponentUpdate?: (component: any) => void;
+}
+
+export interface IAccountRegionClusterSelectorState {
+  [k: string]: any;
+
+  availableRegions: string[];
+  clusterField: string;
+  clusters: string[];
+  componentName: string;
+}
+
+export class AccountRegionClusterSelector extends React.Component<
+  IAccountRegionClusterSelectorProps,
+  IAccountRegionClusterSelectorState
+> {
+  private destroy$ = new Subject();
+
+  constructor(props: IAccountRegionClusterSelectorProps) {
+    super(props);
+    const clusterField = props.clusterField || 'cluster';
+    this.state = {
+      availableRegions: [],
+      cloudProvider: props.cloudProvider,
+      clusterField: clusterField,
+      clusters: [],
+      componentName: props.componentName || '',
+      [clusterField]: props.component[clusterField],
+    };
+  }
+
+  public componentDidMount(): void {
+    this.setRegionList(this.props.component.credentials);
+    this.setClusterList(
+      this.props.component.credentials,
+      this.props.isSingleRegion ? [this.props.component.region] : this.props.component.regions,
+    );
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private setRegionList = (credentials: string): void => {
+    const { application } = this.props;
+    const accountFilter: IServerGroupFilter = (serverGroup: IServerGroup) =>
+      serverGroup ? serverGroup.account === credentials : true;
+    observableFrom(application.ready())
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        const availableRegions = AppListExtractor.getRegions([application], accountFilter);
+        availableRegions.sort();
+        this.setState({ availableRegions });
+      });
+  };
+
+  private setClusterList = (credentials: string, regions: string[]): void => {
+    const { application } = this.props;
+    observableFrom(application.ready())
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        const clusterFilter = AppListExtractor.clusterFilterForCredentialsAndRegion(credentials, regions);
+        const clusters = AppListExtractor.getClusters([application], clusterFilter);
+
+        const clusterField = this.props.component[this.state.clusterField];
+        if (clusterField && !clusters.includes(clusterField)) {
+          clusters.push(clusterField);
+        }
+        this.setState({ clusters });
+      });
+  };
+
+  public onAccountUpdate = (option: Option<string>): void => {
+    const credentials = option.value;
+    this.setRegionList(credentials);
+    this.setClusterList(credentials, []);
+    this.props.onComponentUpdate &&
+      this.props.onComponentUpdate({
+        ...this.props.component,
+        credentials,
+        region: '',
+        regions: [],
+        [this.state.clusterField]: undefined,
+      });
+  };
+
+  public onRegionsUpdate = (option: Option<string>): void => {
+    const regions = option.map((o: Option) => o.value);
+    this.setClusterList(this.props.component.credentials, regions);
+    this.props.onComponentUpdate &&
+      this.props.onComponentUpdate({
+        ...this.props.component,
+        regions,
+        [this.state.clusterField]: undefined,
+      });
+  };
+
+  public onRegionUpdate = (option: Option<string>): void => {
+    const region = option.value;
+    this.setClusterList(this.props.component.credentials, [region]);
+    this.props.onComponentUpdate &&
+      this.props.onComponentUpdate({
+        ...this.props.component,
+        region,
+        [this.state.clusterField]: undefined,
+      });
+  };
+
+  public onClusterUpdate = (option: Option<string>): void => {
+    const clusterName = option.value;
+    const filterByCluster = AppListExtractor.monikerClusterNameFilter(clusterName);
+    const clusterMoniker = first(uniq(AppListExtractor.getMonikers([this.props.application], filterByCluster)));
+    let moniker: IMoniker;
+
+    if (isNil(clusterMoniker)) {
+      // remove the moniker from the stage if one doesn't exist.
+      moniker = undefined;
+    } else {
+      // clusters don't contain sequences, so null it out.
+      clusterMoniker.sequence = null;
+      moniker = clusterMoniker;
+    }
+
+    if (option.className) {
+      const clusters = this.state.clusters;
+      clusters.push(clusterName);
+      this.setState(clusters);
+    }
+
+    this.props.onComponentUpdate &&
+      this.props.onComponentUpdate({
+        ...this.props.component,
+        [this.state.clusterField]: clusterName,
+        moniker,
+      });
+  };
+
+  public render() {
+    const { accounts, isSingleRegion, component } = this.props;
+    const { availableRegions, clusters, clusterField, componentName } = this.state;
+    return (
+      <>
+        <StageConfigField label="Account">
+          <Select
+            name={componentName ? `${componentName}.credentials` : 'credentials'}
+            options={
+              accounts &&
+              accounts.map((acc: IAccount) => ({
+                label: acc.name,
+                value: acc.name,
+              }))
+            }
+            clearable={false}
+            value={component.credentials}
+            onChange={this.onAccountUpdate}
+          />
+        </StageConfigField>
+
+        {!isSingleRegion && (
+          <StageConfigField label="Region">
+            <Select
+              name={componentName ? `${componentName}.regions` : 'regions'}
+              options={
+                availableRegions &&
+                availableRegions.map((r: string) => ({
+                  label: r,
+                  value: r,
+                }))
+              }
+              multi={true}
+              clearable={false}
+              value={component.regions}
+              onChange={this.onRegionsUpdate}
+            />
+          </StageConfigField>
+        )}
+        {isSingleRegion && (
+          <StageConfigField label="Region">
+            <Select
+              name={componentName ? `${componentName}.region` : 'region'}
+              options={
+                availableRegions &&
+                availableRegions.map((r: string) => ({
+                  label: r,
+                  value: r,
+                }))
+              }
+              multi={false}
+              clearable={false}
+              value={component.region}
+              onChange={this.onRegionUpdate}
+            />
+          </StageConfigField>
+        )}
+        <StageConfigField label="Cluster" helpKey={'pipeline.config.findAmi.cluster'}>
+          <Creatable
+            name={componentName ? `${componentName}.${clusterField}` : `${clusterField}`}
+            options={
+              clusters &&
+              clusters.map((c: string) => ({
+                label: c,
+                value: c,
+              }))
+            }
+            clearable={false}
+            value={component[clusterField]}
+            onChange={this.onClusterUpdate}
+          />
+        </StageConfigField>
+      </>
+    );
+  }
+}