@spinnaker/amazon 0.0.0-2025.1-0

package/src/serverGroup/details/sections/InstancesDistributionDetailsSection.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { CollapsibleSection, LabeledValue, LabeledValueList } from '@spinnaker/core';
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+
+export const InstancesDistributionDetailsSection = ({ serverGroup }: IAmazonServerGroupDetailsSectionProps) => {
+  if (!serverGroup.mixedInstancesPolicy) {
+    return null;
+  }
+
+  const instancesDistribution = serverGroup.mixedInstancesPolicy.instancesDistribution;
+  return (
+    <CollapsibleSection heading="Instances Distribution">
+      <LabeledValueList className="horizontal-when-filters-collapsed">
+        <LabeledValue
+          label="On-Demand Allocation Strategy"
+          helpFieldId="aws.serverGroup.odAllocationStrategy"
+          value={instancesDistribution.onDemandAllocationStrategy}
+        />
+        <LabeledValue
+          label="On-Demand Base Capacity"
+          helpFieldId="aws.serverGroup.odBase"
+          value={instancesDistribution.onDemandBaseCapacity}
+        />
+        <LabeledValue
+          label="On-Demand Percentage Above Base Capacity"
+          helpFieldId="aws.serverGroup.odPercentAboveBase"
+          value={instancesDistribution.onDemandPercentageAboveBaseCapacity}
+        />
+        <LabeledValue
+          label="Spot Allocation Strategy"
+          helpFieldId="aws.serverGroup.spotAllocationStrategy"
+          value={instancesDistribution.spotAllocationStrategy}
+        />
+        {instancesDistribution.spotInstancePools && (
+          <LabeledValue
+            label="Spot Instance Pools"
+            helpFieldId="aws.serverGroup.spotInstancePoolCount"
+            value={instancesDistribution.spotInstancePools}
+          />
+        )}
+        <LabeledValue
+          label="Max Spot Price"
+          helpFieldId="aws.serverGroup.spotMaxPrice"
+          value={instancesDistribution.spotMaxPrice || 'on-demand price, default'}
+        />
+      </LabeledValueList>
+    </CollapsibleSection>
+  );
+};

package/src/serverGroup/details/sections/LaunchConfigDetailsSection.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { CollapsibleSection, ShowUserData } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import type { IAmazonServerGroupView } from '../../../domain';
+import { getBaseImageName } from '../utils';
+
+export interface ILaunchConfigDetailsSectionState {
+  image: any;
+}
+
+export class LaunchConfigDetailsSection extends React.Component<
+  IAmazonServerGroupDetailsSectionProps,
+  ILaunchConfigDetailsSectionState
+> {
+  constructor(props: IAmazonServerGroupDetailsSectionProps) {
+    super(props);
+
+    this.state = { image: this.getImage(props.serverGroup) };
+  }
+
+  private getImage(serverGroup: IAmazonServerGroupView): any {
+    const image = serverGroup.image ? serverGroup.image : undefined;
+    if (serverGroup.image && serverGroup.image.description) {
+      image.baseImage = getBaseImageName(serverGroup.image.description);
+    }
+    return image;
+  }
+
+  public componentWillReceiveProps(nextProps: IAmazonServerGroupDetailsSectionProps): void {
+    this.setState({ image: this.getImage(nextProps.serverGroup) });
+  }
+
+  public render(): JSX.Element {
+    const { name, launchConfig } = this.props.serverGroup;
+    const { image } = this.state;
+
+    if (launchConfig) {
+      return (
+        <CollapsibleSection heading="Launch Configuration">
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Name</dt>
+            <dd>{launchConfig.launchConfigurationName}</dd>
+
+            <dt>Image ID</dt>
+            <dd>{launchConfig.imageId}</dd>
+
+            {image && image.imageLocation && <dt>Image Name</dt>}
+            {image && image.imageLocation && <dd>{image.imageLocation}</dd>}
+
+            {image && image.baseImage && <dt>Base Image Name</dt>}
+            {image && image.baseImage && <dd>{image.baseImage}</dd>}
+
+            <dt>Instance Type</dt>
+            <dd>{launchConfig.instanceType}</dd>
+
+            <dt>IAM Profile</dt>
+            <dd>{launchConfig.iamInstanceProfile}</dd>
+
+            {launchConfig.instanceMonitoring && (
+              <>
+                <dt>Instance Monitoring</dt>
+                <dd>{launchConfig.instanceMonitoring.enabled ? 'enabled' : 'disabled'}</dd>
+              </>
+            )}
+
+            {launchConfig.spotPrice && <dt>Spot Price</dt>}
+            {launchConfig.spotPrice && <dd>{launchConfig.spotPrice}</dd>}
+
+            {launchConfig.keyName && <dt>Key Name</dt>}
+            {launchConfig.keyName && <dd>{launchConfig.keyName}</dd>}
+
+            {launchConfig.kernelId && <dt>Kernel ID</dt>}
+            {launchConfig.kernelId && <dd>{launchConfig.kernelId}</dd>}
+
+            {launchConfig.ramdiskId && <dt>Ramdisk ID</dt>}
+            {launchConfig.ramdiskId && <dd>{launchConfig.ramdiskId}</dd>}
+
+            <dt>User Data</dt>
+            {launchConfig.userData && (
+              <dd>
+                <ShowUserData serverGroupName={name} userData={launchConfig.userData} />
+              </dd>
+            )}
+            {!launchConfig.userData && <dd>[none]</dd>}
+          </dl>
+        </CollapsibleSection>
+      );
+    }
+    return null;
+  }
+}

package/src/serverGroup/details/sections/LaunchTemplateDetailsSection.spec.tsx

@@ -0,0 +1,255 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+import { ApplicationModelBuilder } from '@spinnaker/core';
+import {
+  createCustomMockLaunchTemplate,
+  mockLaunchTemplate,
+  mockLaunchTemplateData,
+  mockServerGroup,
+} from '@spinnaker/mocks';
+
+import { LaunchTemplateDetailsSection } from './LaunchTemplateDetailsSection';
+import { MultipleInstanceTypesSubSection } from './MultipleInstanceTypesSubSection';
+import type { IAmazonMixedInstancesPolicy, IAmazonServerGroupView, IScalingPolicy } from '../../../domain';
+
+describe('Launch template details', () => {
+  let app: Application;
+  beforeEach(() => {
+    app = ApplicationModelBuilder.createApplicationForTests('testapp');
+  });
+
+  const baseServerGroupWithLt = {
+    ...mockServerGroup,
+    launchTemplate: createCustomMockLaunchTemplate('test123', {
+      ...mockLaunchTemplateData,
+      kernelId: 'kernal-abc',
+      ramDiskId: 'ramDisk-123',
+      instanceMarketOptions: {
+        spotOptions: {
+          maxPrice: '0.50',
+        },
+      },
+    }),
+    image: {
+      description: 'ancestor_name=testBaseImage',
+      imageLocation: 'location',
+    },
+    scalingPolicies: [] as IScalingPolicy[],
+  } as IAmazonServerGroupView;
+
+  const baseServerGroupWithMipOverrides = {
+    ...mockServerGroup,
+    image: {
+      description: 'ancestor_name=testBaseImage',
+      imageLocation: 'location',
+    },
+    scalingPolicies: [] as IScalingPolicy[],
+    mixedInstancesPolicy: {
+      allowedInstanceTypes: ['some.type.medium', 'some.type.large'],
+      instancesDistribution: {
+        onDemandAllocationStrategy: 'prioritized',
+        onDemandBaseCapacity: 1,
+        onDemandPercentageAboveBaseCapacity: 50,
+        spotAllocationStrategy: 'capacity-optimized',
+        spotMaxPrice: '1.5',
+      },
+      launchTemplates: [
+        {
+          createdBy: 'testuser@test.com',
+          createdTime: 1588787656527,
+          defaultVersion: true,
+          launchTemplateData: mockLaunchTemplateData,
+          launchTemplateId: '123456',
+          launchTemplateName: 'testLaunchTemplatev001',
+          versionDescription: 'Test purposes',
+          versionNumber: 1,
+        },
+      ],
+      launchTemplateOverridesForInstanceType: [
+        {
+          instanceType: 'some.type.medium',
+          weightedCapacity: '2',
+        },
+        {
+          instanceType: 'some.type.large',
+          weightedCapacity: '4',
+        },
+      ],
+    } as IAmazonMixedInstancesPolicy,
+  } as IAmazonServerGroupView;
+
+  it('should not render if no launch template', () => {
+    const testServerGroup = {
+      ...mockServerGroup,
+      scalingPolicies: [] as IScalingPolicy[],
+    } as IAmazonServerGroupView;
+
+    const wrapper = shallow(<LaunchTemplateDetailsSection serverGroup={testServerGroup} app={app} />);
+    expect(wrapper.type()).toEqual(null);
+  });
+
+  it('should render base info', () => {
+    const wrapper = shallow(<LaunchTemplateDetailsSection serverGroup={baseServerGroupWithLt} app={app} />);
+    const labeledValues = wrapper.find('LabeledValue');
+
+    expect(labeledValues.length).toEqual(12);
+    expect(labeledValues.at(0).prop('value')).toEqual('test123');
+    expect(labeledValues.at(1).prop('value')).toEqual('ami-0123456789');
+    expect(labeledValues.at(4).prop('value')).toEqual('m5.large');
+    expect(labeledValues.at(5).prop('value')).toEqual('testapplicationInstanceProfile');
+    expect(labeledValues.at(6).prop('value')).toEqual('disabled');
+  });
+
+  it('should render launch template details for server group with launchTemplate', () => {
+    const testServerGroup = {
+      ...mockServerGroup,
+      launchTemplate: createCustomMockLaunchTemplate('ltWithCredits', {
+        ...mockLaunchTemplateData,
+        instanceMarketOptions: {
+          spotOptions: {
+            maxPrice: '0.50',
+          },
+        },
+        creditSpecification: {
+          cpuCredits: 'unlimited',
+        },
+        keyName: 'test',
+        kernelId: 'kernal-abc',
+        ramDiskId: 'ramDisk-123',
+        userData: 'thisisfakeuserdata',
+      }),
+      image: {
+        description: 'ancestor_name=testBaseImage',
+        imageLocation: 'location',
+      },
+    } as IAmazonServerGroupView;
+
+    const wrapper = shallow(<LaunchTemplateDetailsSection serverGroup={testServerGroup} app={app} />);
+    const actualLabeledValues = wrapper.find('LabeledValue');
+
+    expect(actualLabeledValues.length).toEqual(13);
+    const expectedLabels = new Map([
+      ['Name', 'ltWithCredits'],
+      ['Image ID', 'ami-0123456789'],
+      ['Image Name', 'location'],
+      ['Base Image Name', 'testBaseImage'],
+      ['Instance Type', 'm5.large'],
+      ['CPU Credit Specification', 'unlimited'],
+      ['IAM Profile', 'testapplicationInstanceProfile'],
+      ['Instance Monitoring', 'disabled'],
+      ['Max Spot Price', '0.50'],
+      ['Key Name', 'test'],
+      ['Kernel ID', 'kernal-abc'],
+      ['Ramdisk ID', 'ramDisk-123'],
+      ['User Data', ''],
+    ]);
+    let index = 0;
+    expectedLabels.forEach((value, key) => {
+      const labeledValue = actualLabeledValues.at(index++);
+      expect(labeledValue.prop('label')).toEqual(key);
+      value != '' && expect(labeledValue.prop('value')).toEqual(value);
+    });
+  });
+
+  it('should conditionally render launch template details for server group with mixedInstancesPolicy', () => {
+    const testServerGroup = baseServerGroupWithMipOverrides;
+
+    const wrapper = shallow(<LaunchTemplateDetailsSection serverGroup={testServerGroup} app={app} />);
+    const labeledValues = wrapper.find('LabeledValue');
+
+    expect(labeledValues.length).toEqual(9);
+    expect(labeledValues.at(0).prop('value')).toEqual('testLaunchTemplatev001');
+    expect(labeledValues.at(1).prop('value')).toEqual('ami-0123456789');
+    expect(labeledValues.at(2).prop('value')).toEqual('location');
+    expect(labeledValues.at(3).prop('value')).toEqual('testBaseImage');
+    expect(labeledValues.at(4).prop('value')).toEqual('testapplicationInstanceProfile');
+    expect(labeledValues.at(5).prop('value')).toEqual('disabled');
+    expect(labeledValues.at(6).prop('value')).toEqual('1.5');
+    expect(labeledValues.at(7).prop('value')).toEqual('test');
+    expect(labeledValues.at(8).prop('label')).toEqual('User Data');
+
+    const multipleInstanceTypes = shallow(
+      <MultipleInstanceTypesSubSection
+        instanceTypeOverrides={testServerGroup.mixedInstancesPolicy.launchTemplateOverridesForInstanceType}
+      />,
+    );
+    expect(multipleInstanceTypes.isEmptyRender()).toEqual(false);
+    const multipleInstanceTypesTableRows = multipleInstanceTypes.find('td');
+
+    expect(multipleInstanceTypesTableRows.length).toEqual(4);
+    expect(multipleInstanceTypesTableRows.at(0).text()).toEqual('some.type.medium');
+    expect(multipleInstanceTypesTableRows.at(1).text()).toEqual('2');
+    expect(multipleInstanceTypesTableRows.at(2).text()).toEqual('some.type.large');
+    expect(multipleInstanceTypesTableRows.at(3).text()).toEqual('4');
+  });
+
+  it('should conditionally render image information', () => {
+    const wrapper = shallow(<LaunchTemplateDetailsSection serverGroup={baseServerGroupWithLt} app={app} />);
+    const labeledValues = wrapper.find('LabeledValue');
+
+    expect(labeledValues.at(2).prop('label')).toEqual('Image Name');
+    expect(labeledValues.at(3).prop('label')).toEqual('Base Image Name');
+
+    const newServerGroup = {
+      ...baseServerGroupWithLt,
+    };
+    delete newServerGroup.image;
+    wrapper.setProps({
+      serverGroup: newServerGroup,
+    });
+
+    const imageName = wrapper.findWhere((lv) => lv.prop('label') === 'Image Name');
+    const baseImage = wrapper.findWhere((lv) => lv.prop('label') === 'Base Image Name');
+
+    expect(imageName.length).toEqual(0);
+    expect(baseImage.length).toEqual(0);
+  });
+
+  it('should conditionally render additional info', () => {
+    const wrapper = shallow(<LaunchTemplateDetailsSection serverGroup={baseServerGroupWithLt} app={app} />);
+    const labeledValues = wrapper.find('LabeledValue');
+
+    expect(labeledValues.at(7).prop('label')).toEqual('Max Spot Price');
+    expect(labeledValues.at(8).prop('label')).toEqual('Key Name');
+    expect(labeledValues.at(9).prop('label')).toEqual('Kernel ID');
+    expect(labeledValues.at(10).prop('label')).toEqual('Ramdisk ID');
+    expect(labeledValues.at(11).prop('label')).toEqual('User Data');
+
+    const newServerGroup = {
+      ...baseServerGroupWithLt,
+      launchTemplate: mockLaunchTemplate,
+    };
+    delete newServerGroup.launchTemplate.launchTemplateData.userData;
+    delete newServerGroup.launchTemplate.launchTemplateData.keyName;
+
+    wrapper.setProps({
+      serverGroup: newServerGroup,
+    });
+
+    const spotPrice = wrapper.findWhere((lv) => lv.prop('label') === 'Max Spot Price');
+    const keyName = wrapper.findWhere((lv) => lv.prop('label') === 'Key Name');
+    const kernelId = wrapper.findWhere((lv) => lv.prop('label') === 'Kernel ID');
+    const ramdiskId = wrapper.findWhere((lv) => lv.prop('label') === 'Ramdisk ID');
+    const userData = wrapper.findWhere((lv) => lv.prop('label') === 'User Data');
+
+    expect(spotPrice.length).toEqual(0);
+    expect(keyName.length).toEqual(0);
+    expect(ramdiskId.length).toEqual(0);
+    expect(kernelId.length).toEqual(0);
+    expect(userData.length).toEqual(0);
+  });
+
+  it('should not render multiple instance types subsection when overrides are not specified', () => {
+    const testServerGroup = baseServerGroupWithMipOverrides;
+    testServerGroup.mixedInstancesPolicy.launchTemplateOverridesForInstanceType = null;
+
+    const multipleInstanceTypes = shallow(
+      <MultipleInstanceTypesSubSection
+        instanceTypeOverrides={testServerGroup.mixedInstancesPolicy.launchTemplateOverridesForInstanceType}
+      />,
+    );
+    expect(multipleInstanceTypes.isEmptyRender()).toEqual(true);
+  });
+});

package/src/serverGroup/details/sections/LaunchTemplateDetailsSection.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { CollapsibleSection, LabeledValue, LabeledValueList, ShowUserData } from '@spinnaker/core';
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { MultipleInstanceTypesSubSection } from './MultipleInstanceTypesSubSection';
+import { getBaseImageName } from '../utils';
+
+export const LaunchTemplateDetailsSection = ({ serverGroup }: IAmazonServerGroupDetailsSectionProps) => {
+  const { image } = serverGroup;
+  const baseImage = getBaseImageName(image?.description);
+
+  if (!serverGroup.launchTemplate && !serverGroup.mixedInstancesPolicy) {
+    return null;
+  }
+
+  const isMip = serverGroup.mixedInstancesPolicy ? true : false;
+  const launchTemplate = isMip ? serverGroup.mixedInstancesPolicy.launchTemplates[0] : serverGroup.launchTemplate;
+
+  const { launchTemplateData } = launchTemplate;
+  const maxSpotPrice = isMip
+    ? serverGroup.mixedInstancesPolicy.instancesDistribution.spotMaxPrice
+    : launchTemplateData?.instanceMarketOptions?.spotOptions?.maxPrice;
+  const creditSpecification = launchTemplateData?.creditSpecification?.cpuCredits;
+  const launchTemplateOverrides = isMip
+    ? serverGroup.mixedInstancesPolicy.launchTemplateOverridesForInstanceType
+    : null;
+
+  return (
+    <CollapsibleSection heading="Launch Template">
+      <LabeledValueList className="horizontal-when-filters-collapsed">
+        <LabeledValue label="Name" value={launchTemplate.launchTemplateName} />
+        <LabeledValue label="Image ID" value={launchTemplateData.imageId} />
+        {image?.imageLocation && <LabeledValue label="Image Name" value={image?.imageLocation} />}
+        {baseImage && <LabeledValue label="Base Image Name" value={baseImage} />}
+        {launchTemplateOverrides && launchTemplateOverrides.length > 0 ? (
+          <MultipleInstanceTypesSubSection instanceTypeOverrides={launchTemplateOverrides} />
+        ) : (
+          <LabeledValue label="Instance Type" value={launchTemplateData.instanceType} />
+        )}
+        {creditSpecification && <LabeledValue label="CPU Credit Specification" value={creditSpecification} />}
+        <LabeledValue label="IAM Profile" value={launchTemplateData.iamInstanceProfile.name} />
+        {launchTemplateData.monitoring && (
+          <LabeledValue
+            label="Instance Monitoring"
+            value={launchTemplateData.monitoring.enabled ? 'enabled' : 'disabled'}
+          />
+        )}
+        {maxSpotPrice && <LabeledValue label="Max Spot Price" value={maxSpotPrice} />}
+        {launchTemplateData.keyName && <LabeledValue label="Key Name" value={launchTemplateData.keyName} />}
+        {launchTemplateData.kernelId && <LabeledValue label="Kernel ID" value={launchTemplateData.kernelId} />}
+        {launchTemplateData.ramDiskId && <LabeledValue label="Ramdisk ID" value={launchTemplateData.ramDiskId} />}
+        {launchTemplateData.userData && (
+          <LabeledValue
+            label="User Data"
+            value={<ShowUserData serverGroupName={serverGroup.name} userData={launchTemplateData.userData} />}
+          />
+        )}
+      </LabeledValueList>
+    </CollapsibleSection>
+  );
+};

package/src/serverGroup/details/sections/LogsDetailsSection.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { CollapsibleSection, ViewScalingActivitiesLink } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+
+export class LogsDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
+  public render(): JSX.Element {
+    return (
+      <CollapsibleSection heading="Logs">
+        <ul>
+          <li>
+            <ViewScalingActivitiesLink serverGroup={this.props.serverGroup} />
+          </li>
+        </ul>
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/MultipleInstanceTypesSubSection.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { CollapsibleSection, HelpField } from '@spinnaker/core';
+
+import type { IAmazonLaunchTemplateOverrides } from '../../../index';
+
+import './multipleInstanceTypesSubSection.less';
+
+export function MultipleInstanceTypesSubSection(props: { instanceTypeOverrides: IAmazonLaunchTemplateOverrides[] }) {
+  if (!props.instanceTypeOverrides) {
+    return null;
+  }
+
+  return (
+    <CollapsibleSection
+      heading="Instance Types"
+      defaultExpanded={true}
+      outerDivClassName="multiple-instance-types-subsection"
+      toggleClassName="clickable subsection-heading"
+      headingClassName="collapsible-subheading"
+    >
+      <table className="table table-condensed packed" id="MultipleInstanceTypes">
+        <thead>
+          <tr>
+            <th id="instanceType">
+              Type <HelpField id="aws.serverGroup.multipleInstanceTypes"></HelpField>
+            </th>
+            <th id="weight">
+              Weighted Capacity <HelpField id="aws.serverGroup.instanceTypeWeight"></HelpField>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.instanceTypeOverrides.map((override) => [
+            <tr key={override.instanceType}>
+              <td headers="instanceType">{override.instanceType}</td>
+              <td headers="weight">{override.weightedCapacity}</td>
+            </tr>,
+          ])}
+        </tbody>
+      </table>
+    </CollapsibleSection>
+  );
+}

package/src/serverGroup/details/sections/PackageDetailsSection.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+
+export interface IPackageDetailsSectionState {
+  commitHash: string;
+  jenkinsLink: string;
+}
+
+export class PackageDetailsSection extends React.Component<
+  IAmazonServerGroupDetailsSectionProps,
+  IPackageDetailsSectionState
+> {
+  constructor(props: IAmazonServerGroupDetailsSectionProps) {
+    super(props);
+
+    this.state = this.getState(props);
+  }
+
+  private getState(props: IAmazonServerGroupDetailsSectionProps): IPackageDetailsSectionState {
+    const { serverGroup } = props;
+
+    const buildInfo = serverGroup.buildInfo || {};
+
+    let commitHash: string = null;
+    if (buildInfo.commit) {
+      commitHash = serverGroup.buildInfo.commit.substring(0, 8);
+    }
+
+    let jenkinsLink: string = null;
+    if (buildInfo.buildInfoUrl) {
+      jenkinsLink = serverGroup.buildInfo.buildInfoUrl;
+    } else if (buildInfo.jenkins) {
+      const jenkins = serverGroup.buildInfo.jenkins;
+      jenkinsLink = `${jenkins.host}job/${jenkins.name}/${jenkins.number}`;
+    }
+
+    return { commitHash, jenkinsLink };
+  }
+
+  public componentWillReceiveProps(nextProps: IAmazonServerGroupDetailsSectionProps): void {
+    this.setState(this.getState(nextProps));
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    const { commitHash, jenkinsLink } = this.state;
+
+    if (serverGroup.buildInfo && serverGroup.buildInfo.jenkins) {
+      return (
+        <CollapsibleSection heading="Package">
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Job</dt>
+            <dd>{serverGroup.buildInfo.jenkins.name}</dd>
+            <dt>Package</dt>
+            <dd>{serverGroup.buildInfo.package_name}</dd>
+            <dt>Build</dt>
+            <dd>{serverGroup.buildInfo.jenkins.number}</dd>
+            <dt>Commit</dt>
+            <dd>{commitHash}</dd>
+            <dt>Version</dt>
+            <dd>{serverGroup.buildInfo.version}</dd>
+            <dt>Build Link</dt>
+            <dd>
+              <a target="_blank" href={jenkinsLink}>
+                {jenkinsLink}
+              </a>
+            </dd>
+          </dl>
+        </CollapsibleSection>
+      );
+    }
+
+    return null;
+  }
+}

package/src/serverGroup/details/sections/ScalingPoliciesDetailsSection.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { CollapsibleSection, Overridable, Tooltip } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { AWSProviderSettings } from '../../../aws.settings';
+import type { IAmazonServerGroupView, IScalingProcess } from '../../../domain';
+import { CreateScalingPolicyButton } from '../scalingPolicy/CreateScalingPolicyButton';
+import { ScalingPolicySummary } from '../scalingPolicy/ScalingPolicySummary';
+import { AutoScalingProcessService } from '../scalingProcesses/AutoScalingProcessService';
+
+@Overridable('aws.serverGroup.ScalingPoliciesDetailsSection')
+export class ScalingPoliciesDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
+  constructor(props: IAmazonServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public static arePoliciesDisabled(serverGroup: IAmazonServerGroupView): boolean {
+    const autoScalingProcesses: IScalingProcess[] = AutoScalingProcessService.normalizeScalingProcesses(serverGroup);
+    return (
+      serverGroup.scalingPolicies.length > 0 &&
+      autoScalingProcesses
+        .filter((p) => !p.enabled)
+        .some((p) => ['Launch', 'Terminate', 'AlarmNotification'].includes(p.name))
+    );
+  }
+
+  public render(): JSX.Element {
+    const { app, serverGroup } = this.props;
+    const scalingPoliciesDisabled = ScalingPoliciesDetailsSection.arePoliciesDisabled(serverGroup);
+
+    return (
+      <CollapsibleSection
+        cacheKey="Scaling Policies"
+        heading={({ chevron }) => (
+          <h4 className="collapsible-heading">
+            {chevron}
+            <span>
+              {scalingPoliciesDisabled && (
+                <Tooltip value="Some scaling processes are disabled that may prevent scaling policies from working">
+                  <span className="fa fa-exclamation-circle warning-text" />
+                </Tooltip>
+              )}
+              Scaling Policies
+            </span>
+          </h4>
+        )}
+      >
+        {scalingPoliciesDisabled && (
+          <div className="band band-warning">
+            Some scaling processes are disabled that may prevent scaling policies from working.
+          </div>
+        )}
+        {serverGroup.scalingPolicies.map((policy) => (
+          <ScalingPolicySummary key={policy.policyARN} policy={policy} serverGroup={serverGroup} application={app} />
+        ))}
+        {AWSProviderSettings.adHocInfraWritesEnabled ? (
+          <CreateScalingPolicyButton serverGroup={serverGroup} application={app} />
+        ) : (
+          <p>Can not create scaling policy, because ad-hoc operations are disabled for AWS providers.</p>
+        )}
+      </CollapsibleSection>
+    );
+  }
+}