import React from 'react' ; import { CollapsibleSection , LabeledValue , LabeledValueList } from '@spinnaker/core' ; import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps' ; export const InstancesDistributionDetailsSection = ( { serverGroup } ) => { 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>); } ;