import type { FormikProps } from 'formik' ; import React from 'react' ; import type { IWizardPageComponent } from '@spinnaker/core' ; import { AvailabilityZoneSelector } from '../../../AvailabilityZoneSelector' ; import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service' ; export interface IServerGroupZonesProps { formik : FormikProps < IAmazonServerGroupCommand > ; } export class ServerGroupZones extends React . Component < IServerGroupZonesProps > implements IWizardPageComponent < IAmazonServerGroupCommand > { public validate ( values ) { const errors = { } as any ; if ( ! values . availabilityZones || values . availabilityZones . length === 0 ) { errors . availabilityZones = 'You must select at least one availability zone.' ; } return errors ; } private handleAvailabilityZonesChanged = ( zones ) : void => { const { values , setFieldValue } = this . props . formik ; values . usePreferredZonesChanged ( values ) ; setFieldValue ( 'availabilityZones' , zones ) ; } ; private rebalanceToggled = ( ) => { const { values , setFieldValue } = this . props . formik ; values . toggleSuspendedProcess ( values , 'AZRebalance' ) ; setFieldValue ( 'suspendedProcesses' , values . suspendedProcesses ) ; this . setState ( { } ) ; } ; public render ( ) { const { values } = this . props . formik ; return ( < div className = "container-fluid form-horizontal" > < AvailabilityZoneSelector credentials = { values . credentials } region = { values . region } onChange = { this . handleAvailabilityZonesChanged } selectedZones = { values . availabilityZones } allZones = { values . backingData . filtered . availabilityZones } usePreferredZones = { values . viewState . usePreferredZones } / > < div className = "form-group" > < div className = "col-md-3 sm-label-right" > < b > AZ Rebalance < /b> < /div> < div className = "col-md-7 checkbox" > < label > < input type = "checkbox" onChange = { this . rebalanceToggled } checked = { ! values . processIsSuspended ( values , 'AZRebalance' ) } /> Keep instances evenly distributed across zones < /label> < /div> < /div> < /div>); } }