import { isEqual } from 'lodash' ; import React from 'react' ; import type { ILoadBalancerClusterContainerProps } from '@spinnaker/core' ; import { LoadBalancerClusterContainer } from '@spinnaker/core' ; import { TargetGroup } from './TargetGroup' ; import type { IAmazonApplicationLoadBalancer } from '../domain/IAmazonLoadBalancer' ; export class AmazonLoadBalancerClusterContainer extends React . Component < ILoadBalancerClusterContainerProps > { public shouldComponentUpdate ( nextProps ) { const serverGroupsDiffer = ( ) => ! isEqual ( ( nextProps . serverGroups || [ ] ) . map ( ( g ) => g . name ) , ( this . props . serverGroups || [ ] ) . map ( ( g ) => g . name ) ) ; const targetGroupsDiffer = ( ) => ! isEqual ( ( ( nextProps . loadBalancer as IAmazonApplicationLoadBalancer ) . targetGroups || [ ] ) . map ( ( t ) => t . name ) , ( ( this . props . loadBalancer as IAmazonApplicationLoadBalancer ) . targetGroups || [ ] ) . map ( ( t ) => t . name ) ) ; return ( nextProps . showInstances !== this . props . showInstances || nextProps . showServerGroups !== this . props . showServerGroups || nextProps . loadBalancer !== this . props . loadBalancer || serverGroupsDiffer ( ) || targetGroupsDiffer ( ) ) ; } public render ( ) { const { loadBalancer , showInstances , showServerGroups } = this . props ; if ( loadBalancer . loadBalancerType !== 'classic' ) { const alb = loadBalancer as IAmazonApplicationLoadBalancer ; const TargetGroups = alb . targetGroups . map ( ( targetGroup ) => { return ( < TargetGroup key = { targetGroup . name } loadBalancer = { loadBalancer as IAmazonApplicationLoadBalancer } targetGroup = { targetGroup } showInstances = { showInstances } showServerGroups = { showServerGroups } / > ) ; } ) ; return < div className = "cluster-container" > { TargetGroups } < /div>; } else { return < LoadBalancerClusterContainer { ... this . props } / > ; } } }