import React from 'react' ; import { Button , Modal } from 'react-bootstrap' ; import type { ILoadBalancerIncompatibility , ILoadBalancerModalProps } from '@spinnaker/core' ; import { CloudProviderRegistry , Markdown , ModalClose , noop , ReactModal } from '@spinnaker/core' ; import type { IAmazonLoadBalancerConfig } from './LoadBalancerTypes' ; import { LoadBalancerTypes } from './LoadBalancerTypes' ; import { AWSProviderSettings } from '../../aws.settings' ; export interface IAmazonLoadBalancerChoiceModalState { choices : IAmazonLoadBalancerConfig [ ] ; selectedChoice : IAmazonLoadBalancerConfig ; } export class AmazonLoadBalancerChoiceModal extends React . Component < ILoadBalancerModalProps , IAmazonLoadBalancerChoiceModalState > { public static defaultProps : Partial < ILoadBalancerModalProps > = { closeModal : noop , dismissModal : noop , } ; public static show ( props ) { return ReactModal . show ( AmazonLoadBalancerChoiceModal , { ... props , className : 'create-pipeline-modal-overflow-visible modal-lg' , } , { bsSize : 'lg' } ) ; } constructor ( props ) { super ( props ) ; this . state = { choices : LoadBalancerTypes , selectedChoice : LoadBalancerTypes [ 0 ] , } ; } public choiceSelected ( choice ) { this . setState ( { selectedChoice : choice } ) ; } private choose = ( ) : void => { const { children , ... loadBalancerProps } = this . props ; this . close ( ) ; this . state . selectedChoice . component . show ( loadBalancerProps ) . then ( ( loadBalancer ) => { this . props . closeModal ( loadBalancer ) ; } ) . catch ( ( ) => { } ) ; } ; public close = ( reason ? ) : void => { this . props . dismissModal ( reason ) ; } ; private getIncompatibility ( choice , cloudProvider ) { const { loadBalancer = { } } = CloudProviderRegistry . getProvider ( cloudProvider ) ; const { incompatibleLoadBalancerTypes = [ ] , } = loadBalancer ; return incompatibleLoadBalancerTypes . find ( ( lb ) => lb . type === choice . type ) ; } private isIncompatibleWithAllProviders ( choice ) { const { app : { attributes } , } = this . props ; const { cloudProviders = [ ] } = attributes ; if ( cloudProviders . length > 0 ) { return cloudProviders . every ( ( cloudProvider ) => ! ! this . getIncompatibility ( choice , cloudProvider ) ) ; } return false ; } public render ( ) { const { app : { attributes } , } = this . props ; const { cloudProviders = [ ] } = attributes ; const { choices , selectedChoice } = this . state ; const filteredChoices = choices . filter ( ( choice ) => ! this . isIncompatibleWithAllProviders ( choice ) ) ; const incompatibilities = cloudProviders . map ( ( cloudProvider ) => this . getIncompatibility ( selectedChoice , cloudProvider ) ) . filter ( ( x ) => x ) ; const loadBalancerWarning = AWSProviderSettings . createLoadBalancerWarnings && AWSProviderSettings . createLoadBalancerWarnings [ selectedChoice . type ] ; return ( < > < ModalClose dismiss = { this . close } / > < Modal . Header > < Modal . Title > Select Type of Load Balancer < /Modal.Title> < /Modal.Header> < Modal . Body > < div className = "modal-body" > < div className = "card-choices" > { filteredChoices . map ( ( choice ) => ( < div key = { choice . type } className = { `card ${ selectedChoice === choice ? 'active' : '' }` } onClick = { ( ) => this . choiceSelected ( choice ) } > < h3 className = "load-balancer-label" > { choice . label } < /h3> < h3 > ( { choice . sublabel } ) < /h3> < div > { choice . description } < /div> < /div>))} < /div> < > { incompatibilities . length > 0 && incompatibilities . map ( ( incompatibility ) => ( < div className = "alert alert-warning" > < p > < i className = "fa fa-exclamation-triangle" / > { incompatibility . reason } < /p> < /div>))} < /> { ! ! loadBalancerWarning && ( < div className = "alert alert-warning" > < p > < i className = "fa fa-exclamation-triangle" / > < Markdown message = { loadBalancerWarning } style = { { display : 'inline-block' , marginLeft : '2px' } } / > < /p> < /div>)} < div className = "load-balancer-description" / > < /div> < /Modal.Body> < Modal . Footer > < Button onClick = { this . choose } > Configure Load Balancer < span className = "glyphicon glyphicon-chevron-right" / > < /Button> < /Modal.Footer> < />); } }