function DcvSettings()

in frontend/src/pages/Configure/HeadNode.js [158:209]
50 lines of code
9 McCabe index (conditional complexity)

function DcvSettings() {
  const dcvPath = [...headNodePath, 'Dcv', 'Enabled'];

  let dcvEnabled = useState(dcvPath) || false;
  let port = useState([...headNodePath, 'Dcv', 'Port']) || 8443;
  let allowedIps = useState([...headNodePath, 'Dcv', 'AllowedIps']) || '0.0.0.0/0';
  const editing = useState(['app', 'wizard', 'editing']);
  const toggleDcv = (event) => {
    const value = !dcvEnabled;
    if(value)
    {
      enableSsm(value);
      if(allowedIps === null)
        setState([...headNodePath, 'Dcv', 'AllowedIps'], '0.0.0.0/0');
      if(port === null)
        setState([...headNodePath, 'Dcv', 'Port'], 8443);
      setState(dcvPath, value);
    } else {
      clearState([...headNodePath, 'Dcv'])
    }
  }

  return (
    <FormField label="Virtual Desktop" description="Allow a virtual desktop session on the HeadNode via DCV. If you select this option, we suggest using a larger instance size.">
      <div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
        <SpaceBetween direction="vertical" size="xxxs">
          <Toggle disabled={editing} checked={dcvEnabled} onChange={toggleDcv}>DCV Enabled</Toggle>
          <SpaceBetween direction="vertical" size="xs">
            {dcvEnabled &&
            <FormField label="Allowed IPs">
              <Input
                value={allowedIps}
                onChange={(({detail}) => {setState([...headNodePath, 'Dcv', 'allowedIps'], detail.value)})} />
            </FormField>
            }
            {dcvEnabled &&
              <FormField label="Port">
                <Input
                  inputMode="decimal"
                  value={port}
                  onChange={(({detail}) => setState([...headNodePath, 'Dcv', 'port'], parseInt(detail.value)))} />
              </FormField>
            }
          </SpaceBetween>
        </SpaceBetween>
        <HelpTooltip>
          Remote-Desktop into the headnode to visualize results.
        </HelpTooltip>
      </div>
    </FormField>
  )
}