function HeadNode()

in frontend/src/old-pages/Configure/HeadNode.tsx [422:547]
119 lines of code
6 McCabe index (conditional complexity)

function HeadNode() {
  const {t} = useTranslation()

  const subnetPath = [...headNodePath, 'Networking', 'SubnetId']
  const instanceTypeErrors = useState([...errorsPath, 'instanceType'])
  const subnetErrors = useState([...errorsPath, 'subnet'])
  const subnetValue = useState(subnetPath) || ''
  const editing = useState(['app', 'wizard', 'editing'])
  const isOnNodeUpdatedActive = useFeatureFlag('on_node_updated')

  const subnets = useState(['aws', 'subnets'])
  const vpcId = useState(['app', 'wizard', 'vpc'])
  const currentHeadNodeSubnet = useState(headNodeSubnetPath)

  React.useEffect(() => {
    if (currentHeadNodeSubnet) {
      return
    }
    const filteredSubnets = (subnets || []).filter(
      (s: any) => s.VpcId === vpcId,
    )
    if (filteredSubnets.length > 0) {
      var subnet = filteredSubnets[0]
      setState(headNodeSubnetPath, subnet.SubnetId)
    }
  }, [subnets, vpcId, currentHeadNodeSubnet])

  useHelpPanel(<HeadNodePropertiesHelpPanel />)

  return (
    <ColumnLayout columns={1}>
      <Container
        header={
          <Header variant="h2">{t('wizard.headNode.instance.title')}</Header>
        }
      >
        <SpaceBetween direction="vertical" size="s">
          <Box>
            <FormField
              errorText={instanceTypeErrors}
              label={t('wizard.headNode.instanceType.label')}
            >
              <InstanceSelect
                disabled={editing}
                selectId="head-node"
                path={[...headNodePath, 'InstanceType']}
              />
            </FormField>
          </Box>
          <SsmSettings />
          <DcvSettings />
          <IMDSSecuredSettings />
          <ExpandableSection
            headerText={t('wizard.headNode.advancedOptions.label')}
          >
            <SpaceBetween size="xs">
              <FormField label={t('wizard.headNode.securityGroups.label')}>
                <SecurityGroups basePath={headNodePath} />
              </FormField>
              <SpaceBetween size="xxs">
                <TextContent>
                  <h3>{t('wizard.headNode.advancedOptions.scripts.title')}</h3>
                </TextContent>
                {isOnNodeUpdatedActive ? (
                  <HeadNodeActionsEditor
                    basePath={headNodePath}
                    errorsPath={errorsPath}
                  />
                ) : (
                  <ActionsEditor
                    basePath={headNodePath}
                    errorsPath={errorsPath}
                  />
                )}
              </SpaceBetween>
            </SpaceBetween>
          </ExpandableSection>
        </SpaceBetween>
      </Container>

      <Container
        header={
          <Header variant="h2">{t('wizard.headNode.networking.header')}</Header>
        }
      >
        <SpaceBetween direction="vertical" size="s">
          <FormField
            label={t('wizard.headNode.networking.subnetId.label')}
            errorText={subnetErrors}
            description={t('wizard.headNode.networking.subnetId.description')}
          >
            <SubnetSelect
              disabled={editing}
              value={subnetValue}
              onChange={(subnetId: any) => setState(subnetPath, subnetId)}
            />
          </FormField>
        </SpaceBetween>
      </Container>

      <Container
        header={
          <Header variant="h2">{t('wizard.headNode.security.header')}</Header>
        }
      >
        <ColumnLayout borders="horizontal">
          <Box margin={{bottom: 'xs'}}>
            <KeypairSelect />
          </Box>
          <ExpandableSection
            variant="footer"
            headerText={t('wizard.headNode.advancedOptions.iamPolicies.label')}
          >
            <IamPoliciesEditor basePath={headNodePath} />
          </ExpandableSection>
        </ColumnLayout>
      </Container>
      <ExpandableSection
        variant="container"
        headerText={t('wizard.headNode.localStorage.title')}
      >
        <RootVolume basePath={headNodePath} errorsPath={errorsPath} />
      </ExpandableSection>
    </ColumnLayout>
  )
}