@spinnaker/amazon 2026.2.2 → 2026.3.0

package/src/securityGroup/configure/AmazonSecurityGroupModal.tsx

@@ -0,0 +1,440 @@
+import React from 'react';
+import { Button, Modal } from 'react-bootstrap';
+
+import type { Application, IModalComponentProps, IRouterInjectedProps, ISecurityGroup } from '@spinnaker/core';
+import {
+  FirewallLabels,
+  ModalClose,
+  noop,
+  ReactModal,
+  SecurityGroupWriter,
+  SubmitButton,
+  TaskMonitor,
+  TaskMonitorWrapper,
+  withRouter,
+} from '@spinnaker/core';
+
+export type AmazonSecurityGroupModalMode = 'create' | 'edit' | 'clone';
+
+interface IAmazonSecurityGroupModalProps extends IModalComponentProps {
+  app?: Application;
+  application?: Application;
+  credentials?: string;
+  isNew?: boolean;
+  mode?: AmazonSecurityGroupModalMode;
+  region?: string;
+  securityGroup?: any;
+}
+
+interface IIngressRule {
+  account?: string;
+  accountId?: string;
+  accountName?: string;
+  cidr?: string;
+  endPort: number;
+  existing?: boolean;
+  id?: string;
+  name?: string;
+  startPort: number;
+  type: string;
+  vpcId?: string;
+}
+
+interface IAmazonSecurityGroupModalState {
+  securityGroup: any;
+  taskMonitor: TaskMonitor;
+}
+
+function accountFor(securityGroup: any): string {
+  return (
+    securityGroup.credentials || securityGroup.accountName || securityGroup.accountId || securityGroup.account || ''
+  );
+}
+
+function ipIngressFromInboundRules(securityGroup: any): IIngressRule[] {
+  return (securityGroup.inboundRules || [])
+    .filter((rule: any) => rule.range)
+    .reduce((rules: IIngressRule[], rule: any) => {
+      (rule.portRanges || []).forEach((portRange: any) => {
+        rules.push({
+          cidr: rule.range.ip + rule.range.cidr,
+          type: rule.protocol,
+          startPort: portRange.startPort,
+          endPort: portRange.endPort,
+        });
+      });
+      return rules;
+    }, []);
+}
+
+function securityGroupIngressFromInboundRules(securityGroup: any, mode: AmazonSecurityGroupModalMode): IIngressRule[] {
+  return (securityGroup.inboundRules || [])
+    .filter((rule: any) => rule.securityGroup)
+    .reduce((rules: IIngressRule[], rule: any) => {
+      (rule.portRanges || []).forEach((portRange: any) => {
+        const referencedGroup = rule.securityGroup;
+        const existing = mode === 'edit';
+        rules.push({
+          ...(existing
+            ? {
+                account: referencedGroup.account,
+                accountId: referencedGroup.accountId,
+                accountName: referencedGroup.accountName || referencedGroup.accountId,
+                existing: true,
+                id: referencedGroup.id,
+                vpcId: referencedGroup.vpcId !== securityGroup.vpcId ? referencedGroup.vpcId : null,
+              }
+            : {}),
+          name: referencedGroup.inferredName ? null : referencedGroup.name,
+          type: rule.protocol,
+          startPort: portRange.startPort,
+          endPort: portRange.endPort,
+        });
+      });
+      return rules;
+    }, []);
+}
+
+export function initializeAmazonSecurityGroupForModal(props: IAmazonSecurityGroupModalProps, appName: string): any {
+  const source = props.securityGroup || {};
+  const account = accountFor(source) || props.credentials || '';
+  const region = source.region || props.region || source.regions?.[0] || '';
+  const mode = props.mode || 'create';
+  const name = source.name || appName;
+  const securityGroup = {
+    ...source,
+    account,
+    accountId: source.accountId || account,
+    accountName: source.accountName || account,
+    credentials: account,
+    description: source.description || '',
+    ipIngress: source.ipIngress || ipIngressFromInboundRules(source),
+    name,
+    region,
+    regions: [region].filter(Boolean),
+    securityGroupIngress: source.securityGroupIngress || securityGroupIngressFromInboundRules(source, mode),
+    vpcId: source.vpcId || '',
+  };
+
+  if (mode === 'clone') {
+    delete securityGroup.id;
+  }
+
+  return securityGroup;
+}
+
+function isValidRule(rule: IIngressRule): boolean {
+  return !!rule.type && rule.startPort !== undefined && rule.endPort !== undefined;
+}
+
+export function isAmazonSecurityGroupValid(securityGroup: any): boolean {
+  return (
+    !!securityGroup.name &&
+    !!accountFor(securityGroup) &&
+    !!securityGroup.region &&
+    (securityGroup.ipIngress || []).every((rule: IIngressRule) => !!rule.cidr && isValidRule(rule)) &&
+    (securityGroup.securityGroupIngress || []).every(
+      (rule: IIngressRule) => !!(rule.name || rule.id) && isValidRule(rule),
+    )
+  );
+}
+
+export class AmazonSecurityGroupModalComponent extends React.Component<
+  IAmazonSecurityGroupModalProps & IRouterInjectedProps,
+  IAmazonSecurityGroupModalState
+> {
+  public static defaultProps: Partial<IAmazonSecurityGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+    mode: 'create',
+  };
+
+  public static show(props: IAmazonSecurityGroupModalProps): Promise<any> {
+    return ReactModal.show(AmazonSecurityGroupModal, props, { dialogClassName: 'modal-lg' });
+  }
+
+  constructor(props: IAmazonSecurityGroupModalProps & IRouterInjectedProps) {
+    super(props);
+    const app = this.getApplication(props);
+    this.state = {
+      securityGroup: initializeAmazonSecurityGroupForModal(props, app.name),
+      taskMonitor: new TaskMonitor({
+        application: app,
+        title: `${this.getMode(props) === 'edit' ? 'Updating' : 'Creating'} your ${FirewallLabels.get('firewall')}`,
+        onDismiss: () => props.dismissModal(),
+        onTaskComplete: this.onTaskComplete,
+      }),
+    };
+  }
+
+  private getApplication(props = this.props): Application {
+    return (props.app || props.application) as Application;
+  }
+
+  private getMode(props = this.props): AmazonSecurityGroupModalMode {
+    return props.mode || 'create';
+  }
+
+  private updateSecurityGroup = (updates: any): void => {
+    this.setState(({ securityGroup }) => ({ securityGroup: { ...securityGroup, ...updates } }));
+  };
+
+  private updateRule = (
+    collection: 'ipIngress' | 'securityGroupIngress',
+    index: number,
+    updates: Partial<IIngressRule>,
+  ) => {
+    const rules = this.state.securityGroup[collection].slice();
+    rules[index] = { ...rules[index], ...updates };
+    this.updateSecurityGroup({ [collection]: rules });
+  };
+
+  private addIpRule = (): void => {
+    this.updateSecurityGroup({
+      ipIngress: [
+        ...this.state.securityGroup.ipIngress,
+        { cidr: '0.0.0.0/0', type: 'tcp', startPort: 7001, endPort: 7001 },
+      ],
+    });
+  };
+
+  private addSecurityGroupRule = (): void => {
+    this.updateSecurityGroup({
+      securityGroupIngress: [
+        ...this.state.securityGroup.securityGroupIngress,
+        { name: '', type: 'tcp', startPort: 7001, endPort: 7001 },
+      ],
+    });
+  };
+
+  private removeRule = (collection: 'ipIngress' | 'securityGroupIngress', index: number): void => {
+    this.updateSecurityGroup({
+      [collection]: this.state.securityGroup[collection].filter((_rule: any, ruleIndex: number) => ruleIndex !== index),
+    });
+  };
+
+  private onTaskComplete = (): void => {
+    const app = this.getApplication();
+    app.securityGroups?.refresh?.();
+    this.props.closeModal();
+
+    if (this.getMode() === 'edit') {
+      return;
+    }
+
+    const { securityGroup } = this.state;
+    this.props.stateService.go(
+      this.props.stateService.includes('**.firewallDetails') ? '^.firewallDetails' : '.firewallDetails',
+      {
+        accountId: accountFor(securityGroup),
+        name: securityGroup.name,
+        provider: 'aws',
+        region: securityGroup.region,
+        vpcId: securityGroup.vpcId,
+      },
+    );
+  };
+
+  private submit = (): void => {
+    const app = this.getApplication();
+    const { securityGroup } = this.state;
+    const credentials = accountFor(securityGroup);
+    const command = {
+      ...securityGroup,
+      account: credentials,
+      accountId: credentials,
+      accountName: credentials,
+      cloudProvider: 'aws',
+      credentials,
+      regions: [securityGroup.region],
+    } as ISecurityGroup;
+    const descriptor = this.getMode() === 'edit' ? 'Update' : this.getMode() === 'clone' ? 'Clone' : 'Create';
+
+    this.state.taskMonitor.submit(() => SecurityGroupWriter.upsertSecurityGroup(command, app, descriptor));
+  };
+
+  private renderTextField(label: string, value: string, onChange: (value: string) => void): JSX.Element {
+    return (
+      <div className="form-group row">
+        <label className="col-md-3 sm-label-right">{label}</label>
+        <div className="col-md-7">
+          <input
+            className="form-control input-sm"
+            value={value || ''}
+            onChange={(event) => onChange(event.target.value)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  private renderIpRules(): JSX.Element {
+    const rules = this.state.securityGroup.ipIngress || [];
+    return (
+      <div>
+        <h5>IP Ingress</h5>
+        {rules.map((rule: IIngressRule, index: number) => (
+          <div className="row" key={`ip-${index}`}>
+            <div className="col-md-3">
+              <input
+                className="form-control input-sm"
+                value={rule.cidr || ''}
+                onChange={(event) => this.updateRule('ipIngress', index, { cidr: event.target.value })}
+              />
+            </div>
+            <div className="col-md-2">
+              <input
+                className="form-control input-sm"
+                value={rule.type || ''}
+                onChange={(event) => this.updateRule('ipIngress', index, { type: event.target.value })}
+              />
+            </div>
+            <div className="col-md-2">
+              <input
+                className="form-control input-sm"
+                type="number"
+                value={rule.startPort}
+                onChange={(event) => this.updateRule('ipIngress', index, { startPort: Number(event.target.value) })}
+              />
+            </div>
+            <div className="col-md-2">
+              <input
+                className="form-control input-sm"
+                type="number"
+                value={rule.endPort}
+                onChange={(event) => this.updateRule('ipIngress', index, { endPort: Number(event.target.value) })}
+              />
+            </div>
+            <div className="col-md-1">
+              <Button bsSize="xsmall" onClick={() => this.removeRule('ipIngress', index)}>
+                Remove
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button bsSize="small" onClick={this.addIpRule}>
+          Add IP Rule
+        </Button>
+      </div>
+    );
+  }
+
+  private renderSecurityGroupRules(): JSX.Element {
+    const rules = this.state.securityGroup.securityGroupIngress || [];
+    return (
+      <div>
+        <h5>{FirewallLabels.get('Firewall')} Ingress</h5>
+        {rules.map((rule: IIngressRule, index: number) => (
+          <div className="row" key={`sg-${index}`}>
+            <div className="col-md-3">
+              {rule.existing ? (
+                <span className="form-control-static">{rule.name || rule.id}</span>
+              ) : (
+                <input
+                  className="form-control input-sm"
+                  value={rule.name || ''}
+                  onChange={(event) => this.updateRule('securityGroupIngress', index, { name: event.target.value })}
+                />
+              )}
+            </div>
+            <div className="col-md-2">
+              <input
+                className="form-control input-sm"
+                value={rule.type || ''}
+                onChange={(event) => this.updateRule('securityGroupIngress', index, { type: event.target.value })}
+              />
+            </div>
+            <div className="col-md-2">
+              <input
+                className="form-control input-sm"
+                type="number"
+                value={rule.startPort}
+                onChange={(event) =>
+                  this.updateRule('securityGroupIngress', index, { startPort: Number(event.target.value) })
+                }
+              />
+            </div>
+            <div className="col-md-2">
+              <input
+                className="form-control input-sm"
+                type="number"
+                value={rule.endPort}
+                onChange={(event) =>
+                  this.updateRule('securityGroupIngress', index, { endPort: Number(event.target.value) })
+                }
+              />
+            </div>
+            <div className="col-md-1">
+              <Button bsSize="xsmall" onClick={() => this.removeRule('securityGroupIngress', index)}>
+                Remove
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button bsSize="small" onClick={this.addSecurityGroupRule}>
+          Add {FirewallLabels.get('Firewall')} Rule
+        </Button>
+      </div>
+    );
+  }
+
+  public render(): JSX.Element {
+    const { securityGroup, taskMonitor } = this.state;
+    const mode = this.getMode();
+    const valid = isAmazonSecurityGroupValid(securityGroup);
+    return (
+      <>
+        <TaskMonitorWrapper monitor={taskMonitor} />
+        <ModalClose dismiss={this.props.dismissModal} />
+        <Modal.Header>
+          <Modal.Title>
+            {mode === 'edit' ? 'Edit' : mode === 'clone' ? 'Clone' : 'Create'} {FirewallLabels.get('Firewall')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {this.renderTextField('Account', accountFor(securityGroup), (credentials) =>
+            this.updateSecurityGroup({
+              account: credentials,
+              accountId: credentials,
+              accountName: credentials,
+              credentials,
+            }),
+          )}
+          {this.renderTextField('Region', securityGroup.region, (region) =>
+            this.updateSecurityGroup({ region, regions: [region] }),
+          )}
+          {this.renderTextField('VPC ID', securityGroup.vpcId, (vpcId) => this.updateSecurityGroup({ vpcId }))}
+          {this.renderTextField('Name', securityGroup.name, (name) => this.updateSecurityGroup({ name }))}
+          {this.renderTextField('Description', securityGroup.description, (description) =>
+            this.updateSecurityGroup({ description }),
+          )}
+          <div className="well">
+            <div className="row small text-bold">
+              <div className="col-md-3">CIDR / {FirewallLabels.get('Firewall')}</div>
+              <div className="col-md-2">Protocol</div>
+              <div className="col-md-2">Start Port</div>
+              <div className="col-md-2">End Port</div>
+            </div>
+            {this.renderIpRules()}
+            {this.renderSecurityGroupRules()}
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.dismissModal}>Cancel</Button>
+          <SubmitButton
+            isDisabled={!valid}
+            isFormSubmit={false}
+            submitting={taskMonitor.submitting}
+            onClick={this.submit}
+            label={mode === 'edit' ? 'Update' : mode === 'clone' ? 'Clone' : 'Create'}
+          />
+        </Modal.Footer>
+      </>
+    );
+  }
+}
+
+export const AmazonSecurityGroupModal = Object.assign(
+  withRouter<IAmazonSecurityGroupModalProps & IRouterInjectedProps>(AmazonSecurityGroupModalComponent),
+  { show: AmazonSecurityGroupModalComponent.show },
+);

package/src/securityGroup/details/AmazonSecurityGroupDetails.spec.tsx

@@ -0,0 +1,62 @@
+import { AmazonSecurityGroupDetailsComponent as AmazonSecurityGroupDetails } from './AmazonSecurityGroupDetails';
+import { VpcReader } from '../../vpc/VpcReader';
+
+const tick = () => new Promise((resolve) => setTimeout(resolve));
+
+describe('AmazonSecurityGroupDetails', () => {
+  it('replaces missing details through the injected state service', () => {
+    const stateService = { go: jasmine.createSpy('go') };
+    const component = new AmazonSecurityGroupDetails({
+      app: { isStandalone: false },
+      resolvedSecurityGroup: { accountId: 'test-account', name: 'missing', region: 'us-west-2' },
+      router: {},
+      stateParams: {},
+      stateService,
+    } as any);
+
+    (component as any).autoClose();
+
+    expect(stateService.go).toHaveBeenCalledWith('^', { allowModalToStayOpen: true }, { location: 'replace' });
+  });
+
+  it('does not update state when the VPC lookup resolves after unmount', async () => {
+    const details = {
+      accountId: 'test-account',
+      id: 'sg-123',
+      name: 'test-security-group',
+      region: 'us-west-2',
+      vpcId: 'vpc-1',
+    };
+    const securityGroupReader = {
+      getApplicationSecurityGroup: jasmine.createSpy('getApplicationSecurityGroup').and.returnValue(details),
+      getSecurityGroupDetails: jasmine.createSpy('getSecurityGroupDetails').and.returnValue(Promise.resolve(details)),
+    };
+    let resolveVpcName: (vpcName: string) => void;
+    const vpcName = new Promise<string>((resolve) => {
+      resolveVpcName = resolve;
+    });
+    spyOn(VpcReader, 'getVpcName').and.returnValue(vpcName);
+    const component = new AmazonSecurityGroupDetails({
+      app: { isStandalone: false } as any,
+      resolvedSecurityGroup: {
+        accountId: 'test-account',
+        name: 'test-security-group',
+        region: 'us-west-2',
+        vpcId: 'vpc-1',
+      },
+      securityGroupReader: securityGroupReader as any,
+    });
+    spyOn(component, 'setState');
+
+    (component as any).loadSecurityGroup();
+    await tick();
+    expect(VpcReader.getVpcName).toHaveBeenCalledWith('vpc-1');
+    (component.setState as jasmine.Spy).calls.reset();
+
+    component.componentWillUnmount();
+    resolveVpcName('Main VPC');
+    await tick();
+
+    expect(component.setState).not.toHaveBeenCalled();
+  });
+});