import type { FormikProps } from 'formik' ; import React from 'react' ; import { FormikFormField , NumberInput , SelectInput , TextInput } from '@spinnaker/core' ; import type { IAmazonClassicLoadBalancerUpsertCommand } from '../../../domain' ; export interface IHealthCheckProps { formik : FormikProps < IAmazonClassicLoadBalancerUpsertCommand > ; } export class HealthCheck extends React . Component < IHealthCheckProps > { public requiresHealthCheckPath ( ) { const { values } = this . props . formik ; return values . healthCheckProtocol && values . healthCheckProtocol . indexOf ( 'HTTP' ) === 0 ; } private healthCheckPathChanged = ( value ) => { if ( value && value . indexOf ( '/' ) !== 0 ) { this . props . formik . setFieldValue ( 'healthCheckPath' , `/${ value }` ) ; } } ; public render ( ) { return ( < div className = "container-fluid form-horizontal" > < div className = "col-md-4 sm-label-right" > Ping < /div> < div className = "col-md-8" > < table className = "table table-condensed packed" > < thead > < tr > < th style = { { width : '35%' } } > Protocol < /th> < th style = { { width : '30%' } } > Port < /th> < th > { this . requiresHealthCheckPath ( ) && < span > Path < /span>}</th > < /tr> < /thead> < tbody > < tr > < td > < FormikFormField name = "healthCheckProtocol" required = { true } input = { ( props ) => < SelectInput { ... props } options = { [ 'HTTP' , 'HTTPS' , 'SSL' , 'TCP' ] } / > } /> < /td> < td > < FormikFormField name = "healthCheckPort" required = { true } input = { ( props ) => < NumberInput { ... props } min = { 1 } max = { 65534 } / > } /> < /td> < td > { this . requiresHealthCheckPath ( ) && ( < FormikFormField name = "healthCheckPath" input = { ( props ) => < TextInput { ... props } />} required={true} onChange={this.healthCheckPathChanged}/ > ) } < /td> < /tr> < /tbody> < /table> < /div> < /div>); } }