@spinnaker/amazon 0.0.0-2025.1-0

package/src/serverGroup/serverGroup.transformer.spec.ts

@@ -0,0 +1,185 @@
+import type { IQService, IRootScopeService, IScope } from 'angular';
+import { mock } from 'angular';
+
+import type { IAmazonServerGroup, IScalingPolicyAlarmView, IStepAdjustment } from '../domain';
+import type { AwsServerGroupTransformer } from './serverGroup.transformer';
+import { AWS_SERVER_GROUP_TRANSFORMER } from './serverGroup.transformer';
+import { VpcReader } from '../vpc/VpcReader';
+
+describe('awsServerGroupTransformer', () => {
+  let transformer: AwsServerGroupTransformer, $q: IQService, $scope: IScope;
+
+  beforeEach(mock.module(AWS_SERVER_GROUP_TRANSFORMER));
+
+  beforeEach(
+    mock.inject(
+      (_awsServerGroupTransformer_: AwsServerGroupTransformer, _$q_: IQService, $rootScope: IRootScopeService) => {
+        transformer = _awsServerGroupTransformer_;
+        $q = _$q_;
+        $scope = $rootScope.$new();
+      },
+    ),
+  );
+
+  describe('normalize server group', () => {
+    beforeEach(() => {
+      spyOn(VpcReader, 'listVpcs').and.returnValue(
+        $q.when([{ account: 'test', region: 'us-east-1', id: 'vpc-1', name: 'main' } as any]),
+      );
+    });
+
+    it('adds vpc name to server group', () => {
+      const serverGroup = {
+        account: 'test',
+        region: 'us-east-1',
+        vpcId: 'vpc-1',
+        instances: [],
+      } as IAmazonServerGroup;
+      transformer.normalizeServerGroup(serverGroup);
+      $scope.$digest();
+      expect(serverGroup.vpcName).toBe('main');
+    });
+
+    it('adds empty vpc name when no vpcId found on server group', () => {
+      const serverGroup = {
+        account: 'test',
+        region: 'us-east-1',
+        instances: [],
+      } as IAmazonServerGroup;
+      transformer.normalizeServerGroup(serverGroup);
+      $scope.$digest();
+      expect(serverGroup.vpcName).toBe('');
+    });
+  });
+
+  describe('command transforms', () => {
+    it('sets subnetType property to empty string when null', () => {
+      const command: any = {
+        viewState: {
+          mode: 'create',
+          useAllImageSelection: true,
+          allImageSelection: 'something-packagebase',
+        },
+        subnetType: null,
+        application: { name: 'theApp' },
+      };
+
+      let transformed = transformer.convertServerGroupCommandToDeployConfiguration(command);
+      expect(transformed.subnetType).toBe('');
+
+      command.subnetType = 'internal';
+      transformed = transformer.convertServerGroupCommandToDeployConfiguration(command);
+      expect(transformed.subnetType).toBe('internal');
+    });
+  });
+
+  describe('normalize server group details', () => {
+    it('adds appropriate comparator to alarm', () => {
+      const serverGroup = {
+        scalingPolicies: [
+          {
+            alarms: [
+              { comparisonOperator: 'LessThanThreshold' },
+              { comparisonOperator: 'GreaterThanThreshold' },
+              { comparisonOperator: 'LessThanOrEqualToThreshold' },
+              { comparisonOperator: 'GreaterThanOrEqualToThreshold' },
+              { comparisonOperator: 'WhatIsThis' },
+            ],
+          },
+        ],
+      } as IAmazonServerGroup;
+      transformer.normalizeServerGroupDetails(serverGroup);
+      const alarms = serverGroup.scalingPolicies[0].alarms as IScalingPolicyAlarmView[];
+      expect(alarms.map((a) => a.comparator)).toEqual(['<', '>', '≤', '≥', undefined]);
+    });
+
+    it('adds operator, absAdjustment to simple policies', () => {
+      const serverGroup = {
+        scalingPolicies: [{ scalingAdjustment: 10 }, { scalingAdjustment: 0 }, { scalingAdjustment: -5 }],
+      } as IAmazonServerGroup;
+      const transformed = transformer.normalizeServerGroupDetails(serverGroup);
+      const policies = transformed.scalingPolicies;
+      expect(policies.map((a) => a.absAdjustment)).toEqual([10, 0, 5]);
+      expect(policies.map((a) => a.operator)).toEqual(['increase', 'increase', 'decrease']);
+    });
+
+    it('adds operator, absAdjustment to step policies', () => {
+      const serverGroup = {
+        scalingPolicies: [
+          {
+            stepAdjustments: [
+              { scalingAdjustment: 10, metricIntervalLowerBound: 0 },
+              { scalingAdjustment: 0, metricIntervalLowerBound: 6 },
+              { scalingAdjustment: -5, metricIntervalLowerBound: 11 },
+            ],
+          },
+        ],
+      } as IAmazonServerGroup;
+      const transformed = transformer.normalizeServerGroupDetails(serverGroup);
+      const steps = transformed.scalingPolicies[0].stepAdjustments;
+      expect(steps.map((a) => a.absAdjustment)).toEqual([10, 0, 5]);
+      expect(steps.map((a) => a.operator)).toEqual(['increase', 'increase', 'decrease']);
+    });
+
+    describe('sorting step adjustments', () => {
+      beforeEach(function () {
+        this.test = (steps: IStepAdjustment[], expected: any[]) => {
+          const serverGroup = {
+            scalingPolicies: [
+              {
+                stepAdjustments: steps,
+              },
+            ],
+          } as IAmazonServerGroup;
+          transformer.normalizeServerGroupDetails(serverGroup);
+          const check = serverGroup.scalingPolicies[0].stepAdjustments;
+          expect(check.map((s) => s.scalingAdjustment)).toEqual(expected);
+        };
+      });
+
+      it('reverse sorts step adjustments by lower bound when none have an upper bound defined', function () {
+        this.test(
+          [
+            { scalingAdjustment: 10, metricIntervalLowerBound: 3 },
+            { scalingAdjustment: 0, metricIntervalLowerBound: 5 },
+            { scalingAdjustment: -5, metricIntervalLowerBound: 1 },
+          ],
+          [-5, 10, 0],
+        );
+      });
+
+      it('reverse sorts step adjustments by lower bound when some do not have an upper bound defined', function () {
+        this.test(
+          [
+            { id: 1, scalingAdjustment: 10, metricIntervalLowerBound: 3, metricIntervalUpperBound: 5 },
+            { id: 2, scalingAdjustment: 0, metricIntervalLowerBound: 5 },
+            { id: 3, scalingAdjustment: -5, metricIntervalLowerBound: 1, metricIntervalUpperBound: 3 },
+          ],
+          [-5, 10, 0],
+        );
+      });
+
+      it('reverse sorts step adjustments by upper bound when all have an upper bound defined', function () {
+        this.test(
+          [
+            { id: 1, scalingAdjustment: 10, metricIntervalLowerBound: 3, metricIntervalUpperBound: 5 },
+            { id: 2, scalingAdjustment: 0, metricIntervalLowerBound: 5, metricIntervalUpperBound: 9 },
+            { id: 3, scalingAdjustment: -5, metricIntervalLowerBound: 1, metricIntervalUpperBound: 0 },
+          ],
+          [0, 10, -5],
+        );
+      });
+
+      it('verify float adjustments work within the range', function () {
+        this.test(
+          [
+            { id: 1, scalingAdjustment: 10, metricIntervalLowerBound: 3.5, metricIntervalUpperBound: 5.5 },
+            { id: 2, scalingAdjustment: 0, metricIntervalLowerBound: 5.5 },
+            { id: 3, scalingAdjustment: -5, metricIntervalLowerBound: 1.2, metricIntervalUpperBound: 3.5 },
+          ],
+          [-5, 10, 0],
+        );
+      });
+    });
+  });
+});

package/src/serverGroup/serverGroup.transformer.ts

@@ -0,0 +1,160 @@
+import { module } from 'angular';
+
+import type { IVpc } from '@spinnaker/core';
+
+import type { IAmazonServerGroupCommand, IAmazonServerGroupDeployConfiguration } from './configure';
+import type {
+  IAmazonServerGroup,
+  IAmazonServerGroupView,
+  IScalingAdjustmentView,
+  IScalingPolicy,
+  IScalingPolicyAlarmView,
+  IScalingPolicyView,
+  IStepAdjustmentView,
+  ITargetTrackingPolicy,
+} from '../domain';
+
+import { VpcReader } from '../vpc/VpcReader';
+
+export class AwsServerGroupTransformer {
+  private addComparator(alarm: IScalingPolicyAlarmView): void {
+    if (!alarm.comparisonOperator) {
+      return;
+    }
+    switch (alarm.comparisonOperator) {
+      case 'LessThanThreshold':
+        alarm.comparator = '<';
+        break;
+      case 'GreaterThanThreshold':
+        alarm.comparator = '>';
+        break;
+      case 'LessThanOrEqualToThreshold':
+        alarm.comparator = '≤';
+        break;
+      case 'GreaterThanOrEqualToThreshold':
+        alarm.comparator = '≥';
+        break;
+    }
+  }
+
+  private addAdjustmentAttributes(policyOrStepAdjustment: IScalingAdjustmentView): void {
+    policyOrStepAdjustment.operator = policyOrStepAdjustment.scalingAdjustment < 0 ? 'decrease' : 'increase';
+    policyOrStepAdjustment.absAdjustment = Math.abs(policyOrStepAdjustment.scalingAdjustment);
+  }
+
+  public transformScalingPolicy(policy: IScalingPolicy): IScalingPolicyView {
+    const view: IScalingPolicyView = { ...policy } as IScalingPolicyView;
+    const upperBoundSorter = (a: IStepAdjustmentView, b: IStepAdjustmentView) =>
+      b.metricIntervalUpperBound - a.metricIntervalUpperBound;
+    const lowerBoundSorter = (a: IStepAdjustmentView, b: IStepAdjustmentView) =>
+      a.metricIntervalLowerBound - b.metricIntervalLowerBound;
+
+    view.alarms = policy.alarms || [];
+    view.alarms.forEach((alarm) => this.addComparator(alarm));
+    this.addAdjustmentAttributes(view); // simple policies
+    if (view.stepAdjustments && view.stepAdjustments.length) {
+      view.stepAdjustments.forEach((sa) => this.addAdjustmentAttributes(sa)); // step policies
+      const sorter = policy.stepAdjustments.every((a) => a.metricIntervalUpperBound !== undefined)
+        ? upperBoundSorter
+        : lowerBoundSorter;
+      view.stepAdjustments.sort((a, b) => sorter(a, b));
+    }
+    return view;
+  }
+
+  public normalizeServerGroupDetails(serverGroup: IAmazonServerGroup): IAmazonServerGroupView {
+    const view: IAmazonServerGroupView = { ...serverGroup } as IAmazonServerGroupView;
+    if (serverGroup.scalingPolicies) {
+      view.scalingPolicies = serverGroup.scalingPolicies.map((policy) => this.transformScalingPolicy(policy));
+    }
+    return view;
+  }
+
+  public normalizeServerGroup(serverGroup: IAmazonServerGroup): PromiseLike<IAmazonServerGroup> {
+    serverGroup.instances.forEach((instance) => {
+      instance.vpcId = serverGroup.vpcId;
+    });
+    return VpcReader.listVpcs().then((vpc) => this.addVpcNameToServerGroup(serverGroup)(vpc));
+  }
+
+  private addVpcNameToServerGroup(serverGroup: IAmazonServerGroup): (vpc: IVpc[]) => IAmazonServerGroup {
+    return (vpcs: IVpc[]) => {
+      const match = vpcs.find((test) => test.id === serverGroup.vpcId);
+      serverGroup.vpcName = match ? match.name : '';
+      return serverGroup;
+    };
+  }
+
+  public convertServerGroupCommandToDeployConfiguration(
+    base: IAmazonServerGroupCommand,
+  ): IAmazonServerGroupDeployConfiguration {
+    const deployConfig = ({ ...base } as any) as IAmazonServerGroupDeployConfiguration;
+
+    deployConfig.cloudProvider = 'aws';
+    deployConfig.availabilityZones = { [deployConfig.region]: base.availabilityZones };
+    deployConfig.loadBalancers = (base.loadBalancers || []).concat(base.vpcLoadBalancers || []);
+    deployConfig.targetGroups = base.targetGroups || [];
+    deployConfig.account = deployConfig.credentials;
+    deployConfig.subnetType = deployConfig.subnetType || '';
+    deployConfig.instanceType =
+      deployConfig.instanceType ||
+      (deployConfig.launchTemplateOverridesForInstanceType &&
+        deployConfig.launchTemplateOverridesForInstanceType[0].instanceType); // populate instanceType for backwards compatibility
+
+    if (base.viewState.mode !== 'clone') {
+      delete deployConfig.source;
+    }
+
+    if (!deployConfig.ramdiskId) {
+      delete deployConfig.ramdiskId; // TODO: clean up in kato? - should ignore if empty string
+    }
+
+    const deleteFields = ['region', 'viewState', 'backingData', 'selectedProvider', 'instanceProfile', 'vpcId'];
+    deleteFields.forEach((key: keyof typeof deployConfig) => {
+      delete deployConfig[key];
+    });
+
+    return deployConfig;
+  }
+
+  public constructNewStepScalingPolicyTemplate(serverGroup: IAmazonServerGroup): IScalingPolicy {
+    return {
+      alarms: [
+        {
+          namespace: 'AWS/EC2',
+          metricName: 'CPUUtilization',
+          threshold: 50,
+          statistic: 'Average',
+          comparisonOperator: 'GreaterThanThreshold',
+          evaluationPeriods: 1,
+          dimensions: [{ name: 'AutoScalingGroupName', value: serverGroup.name }],
+          period: 60,
+        },
+      ],
+      adjustmentType: 'ChangeInCapacity',
+      stepAdjustments: [
+        {
+          scalingAdjustment: 1,
+          metricIntervalLowerBound: 0,
+        },
+      ],
+      estimatedInstanceWarmup: 600,
+    };
+  }
+
+  public constructNewTargetTrackingPolicyTemplate(): ITargetTrackingPolicy {
+    return {
+      alarms: [],
+      estimatedInstanceWarmup: 300,
+      targetTrackingConfiguration: {
+        targetValue: null,
+        predefinedMetricSpecification: {
+          predefinedMetricType: 'ASGAverageCPUUtilization',
+        },
+      },
+    };
+  }
+}
+
+export const AWS_SERVER_GROUP_TRANSFORMER = 'spinnaker.amazon.serverGroup.transformer';
+module(AWS_SERVER_GROUP_TRANSFORMER, []).service('awsServerGroupTransformer', AwsServerGroupTransformer);

package/src/subnet/SubnetSelectField.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+import type { Application, ISubnet } from '@spinnaker/core';
+import { HelpField, Markdown } from '@spinnaker/core';
+
+import { SubnetSelectInput } from './SubnetSelectInput';
+import { AWSProviderSettings } from '../aws.settings';
+
+export interface ISubnetSelectFieldProps {
+  application: Application;
+  component: { [key: string]: any };
+  field: string;
+  helpKey: string;
+  hideClassic?: boolean;
+  labelColumns: number;
+  onChange: () => void;
+  readOnly?: boolean;
+  // The default value to select when subnets change
+  defaultSubnetTypes?: string[];
+  // The recommended values; all other values will display a configurable warning
+  recommendedSubnetTypes?: string[];
+  region: string;
+  subnets: ISubnet[];
+  showSubnetWarning?: boolean;
+}
+
+export class SubnetSelectField extends React.Component<ISubnetSelectFieldProps> {
+  private handleChange = (event: React.ChangeEvent<any>) => {
+    const { component, onChange, field } = this.props;
+    component[field] = event.target.value;
+    onChange();
+  };
+
+  public render() {
+    const {
+      component,
+      defaultSubnetTypes,
+      field,
+      helpKey,
+      labelColumns,
+      recommendedSubnetTypes,
+      region,
+      showSubnetWarning,
+      ...otherProps
+    } = this.props;
+
+    const value = component[field];
+    const recommended = recommendedSubnetTypes ?? AWSProviderSettings.serverGroups?.recommendedSubnets ?? [];
+    const defaults = defaultSubnetTypes ?? [AWSProviderSettings.defaults.subnetType];
+    const isRecommended = recommended.some((subnet) => value && value.includes(subnet));
+    const subnetWarning = AWSProviderSettings.serverGroups?.subnetWarning;
+
+    return (
+      <div className="form-group">
+        <div className={`col-md-${labelColumns} sm-label-right`}>
+          VPC Subnet <HelpField id={helpKey} />
+        </div>
+        <div className="col-md-7">
+          {region ? (
+            <SubnetSelectInput
+              {...otherProps}
+              inputClassName="form-control input-sm"
+              credentials={component.credentials}
+              defaultSubnetTypes={defaults}
+              region={region}
+              value={value}
+              onChange={this.handleChange}
+            />
+          ) : (
+            '(Select an account)'
+          )}
+          {showSubnetWarning && !isRecommended && Boolean(subnetWarning) && (
+            <div className="alert alert-warning sp-margin-s-top horizontal center">
+              <i className="fa fa-exclamation-triangle sp-margin-s-top" />
+              <div className="sp-margin-s-left">
+                <Markdown message={subnetWarning} style={{ display: 'inline-block', marginLeft: '2px' }} />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}

package/src/subnet/SubnetSelectInput.spec.tsx

@@ -0,0 +1,91 @@
+import { mock } from 'angular';
+import { render, shallow } from 'enzyme';
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+import { ApplicationModelBuilder } from '@spinnaker/core';
+import { mockServerGroupDataSourceConfig, mockSubnet } from '@spinnaker/mocks';
+
+import { SubnetSelectInput } from './SubnetSelectInput';
+
+describe('SubnetSelectInput', () => {
+  let application: Application;
+
+  beforeEach(
+    mock.inject(() => {
+      application = ApplicationModelBuilder.createApplicationForTests('testapp', mockServerGroupDataSourceConfig);
+    }),
+  );
+
+  // Selectable state
+  const INPUT_PROPS = {
+    value: 'test',
+    onChange: () => {},
+    application,
+    readOnly: false,
+    hideClassic: false,
+    subnets: [mockSubnet],
+    region: 'us-east-1',
+    credentials: 'test_credentials',
+  };
+
+  it('should render an input', () => {
+    const wrapper = shallow(<SubnetSelectInput {...INPUT_PROPS} />);
+    const input = wrapper.find('SelectInput');
+    const paragraph = wrapper.find('p');
+    expect(input.length).toBeTruthy();
+    expect(paragraph.length).toBeFalsy();
+  });
+
+  it('should generate options', () => {
+    const wrapper = render(<SubnetSelectInput {...INPUT_PROPS} />);
+    expect(wrapper.find('option').length).toBeGreaterThan(0);
+  });
+});
+
+describe('SubnetSelectInput read only', () => {
+  let application: Application;
+
+  beforeEach(
+    mock.inject(() => {
+      application = ApplicationModelBuilder.createApplicationForTests('testapp', mockServerGroupDataSourceConfig);
+    }),
+  );
+
+  // Read only state, with value
+  const READ_ONLY_PROPS = {
+    value: 'test',
+    onChange: () => {},
+    application,
+    readOnly: true,
+    hideClassic: false,
+    subnets: [mockSubnet],
+    region: 'us-east-1',
+    credentials: 'test_credentials',
+  };
+
+  // Read only state with null value
+  const NULL_VALUE_PROPS = {
+    ...READ_ONLY_PROPS,
+    value: '',
+  };
+
+  it('should render the value', () => {
+    const wrapper = shallow(<SubnetSelectInput {...READ_ONLY_PROPS} />);
+
+    const input = wrapper.find('SelectInput');
+    const paragraph = wrapper.find('p');
+    expect(input.length).toBeFalsy();
+    expect(paragraph.length).toBeTruthy();
+    expect(paragraph.text()).toEqual(READ_ONLY_PROPS.value);
+  });
+
+  it('should render the default value', () => {
+    const wrapper = shallow(<SubnetSelectInput {...NULL_VALUE_PROPS} />);
+    const input = wrapper.find('SelectInput');
+    const paragraph = wrapper.find('p');
+    expect(input.length).toBeFalsy();
+    expect(paragraph.length).toBeTruthy();
+    expect(paragraph.text()).toEqual('None (EC2 Classic)');
+  });
+});

package/src/subnet/SubnetSelectInput.tsx

@@ -0,0 +1,111 @@
+import { get } from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+
+import type { Application, ISelectInputProps, ISubnet, Omit } from '@spinnaker/core';
+import { createFakeReactSyntheticEvent, SelectInput, useDeepObjectDiff, useMountStatusRef } from '@spinnaker/core';
+import { AWSProviderSettings } from '../aws.settings';
+
+export interface ISubnetSelectInputProps extends Omit<ISelectInputProps, 'options'> {
+  value: string;
+  onChange: (event: React.ChangeEvent<any>) => void;
+  application: Application;
+  readOnly?: boolean;
+  hideClassic?: boolean;
+  // Ordered list of subnet types to default to
+  // higher priority defaults should be ordered first
+  defaultSubnetTypes: string[];
+  subnets: ISubnet[];
+  region: string;
+  credentials: string;
+}
+
+export interface ISubnetSelectInputState {
+  options: Array<Option<string>>;
+}
+
+function isClassicLockout(region: string, credentials: string, application: Application): boolean {
+  const { classicLaunchLockout, classicLaunchAllowlist: allowlist } = AWSProviderSettings;
+
+  const appCreationDate = Number(get(application, 'attributes.createTs', 0));
+  const appCreatedAfterLockout = appCreationDate > (classicLaunchLockout || 0);
+  const isAllowlisted = !!allowlist && allowlist.some((e) => e.region === region && e.credentials === credentials);
+  return appCreatedAfterLockout || !isAllowlisted;
+}
+
+function getOptions(subnets: ISubnet[], isClassicHidden: boolean): Array<Option<string>> {
+  const sortByLabel = (a: ISubnet, b: ISubnet) => a.label.localeCompare(b.label);
+  const asOption = (subnet: ISubnet): Option<string> => ({ value: subnet.purpose, label: subnet.label });
+
+  const classicOption = isClassicHidden ? [] : [{ label: 'None (EC2 Classic)', value: '' } as Option];
+
+  const activeOptions = subnets
+    .filter((x) => !x.deprecated)
+    .sort(sortByLabel)
+    .map(asOption);
+
+  const deprecatedOptions = subnets
+    .filter((x) => x.deprecated)
+    .sort(sortByLabel)
+    .map(asOption);
+
+  if (deprecatedOptions.length) {
+    deprecatedOptions.unshift({ label: '-----------', value: '', disabled: true });
+  }
+
+  return classicOption.concat(activeOptions).concat(deprecatedOptions) as Array<Option<string>>;
+}
+
+function getDefaultSubnet(subnets: ISubnet[], defaultSubnetTypes: string[] = []): ISubnet {
+  for (const subnetType of defaultSubnetTypes) {
+    const defaultSubnet = subnets.find((subnet) => subnetType === subnet.purpose);
+    if (defaultSubnet) {
+      return defaultSubnet;
+    }
+  }
+  return undefined;
+}
+
+export function SubnetSelectInput(props: ISubnetSelectInputProps) {
+  const {
+    application,
+    credentials,
+    defaultSubnetTypes,
+    hideClassic,
+    name,
+    onChange,
+    readOnly,
+    region,
+    subnets,
+    value,
+    ...otherProps
+  } = props;
+
+  // Allow subnets array reference to change by parent component
+  const subnetsDiff = useDeepObjectDiff(subnets);
+
+  const options = React.useMemo(() => {
+    const isClassicHidden = hideClassic || isClassicLockout(region, credentials, application);
+    return getOptions(subnets, isClassicHidden);
+  }, [hideClassic, region, credentials, application, subnetsDiff]);
+
+  const defaultSubnet = getDefaultSubnet(subnets, defaultSubnetTypes) || subnets[0];
+  const mountStatus = useMountStatusRef().current;
+
+  React.useEffect(() => {
+    const isSelectionValid = options.some((o) => o.value === value);
+    // - apply the default value whenever `options` changes and the current
+    // selection is invalid, including on the first pass
+    // - apply the default value on all subsequent renders if `options` changes
+    const applyDefault = !isSelectionValid || mountStatus !== 'FIRST_RENDER';
+    if (defaultSubnet && applyDefault) {
+      onChange(createFakeReactSyntheticEvent({ name, value: defaultSubnet.purpose }));
+    }
+  }, [options]);
+
+  if (readOnly) {
+    return <p className="form-control-static">{props.value || 'None (EC2 Classic)'}</p>;
+  }
+
+  return <SelectInput options={options} value={value} onChange={onChange} {...otherProps} />;
+}

package/src/subnet/index.ts

@@ -0,0 +1,2 @@
+export * from './SubnetSelectField';
+export * from './SubnetSelectInput';

package/src/subnet/subnet.renderer.ts

@@ -0,0 +1,12 @@
+import { module } from 'angular';
+
+import type { IServerGroup } from '@spinnaker/core';
+
+export class AwsSubnetRenderer {
+  public render(serverGroup: IServerGroup): string {
+    return serverGroup.subnetType;
+  }
+}
+
+export const SUBNET_RENDERER = 'spinnaker.amazon.subnet.renderer';
+module(SUBNET_RENDERER, []).service('awsSubnetRenderer', AwsSubnetRenderer);