function ComputeResource()

in frontend/src/pages/Configure/Queues.js [103:210]
91 lines of code
10 McCabe index (conditional complexity)

function ComputeResource({index, queueIndex, computeResource}) {
  const parentPath = [...queuesPath, queueIndex];
  const queue = useState(parentPath);
  const computeResources = useState([...parentPath, 'ComputeResources']);
  const path = [...parentPath, 'ComputeResources', index];
  const typeError = useState([...queuesErrorsPath, queueIndex, 'computeResource', index, 'type']);

  const tInstances = new Set(["t2.micro", "t2.medium"]);
  const gravitonInstances = new Set([]);

  const instanceTypePath = [...path, "InstanceType"]
  const instanceType = useState(instanceTypePath);

  const disableHTPath = [...path, "DisableSimultaneousMultithreading"]
  const disableHT = useState(disableHTPath);

  const efaPath = [...path, "Efa"];

  const enableEFAPath = [...path, "Efa", "Enabled"]
  const enableEFA = useState(enableEFAPath);

  const enablePlacementGroupPath = [parentPath, 'Networking', "PlacementGroup", "Enabled"]

  const enableGPUDirectPath = [...path, "Efa", "GdrSupport"]
  const enableGPUDirect = useState(enableGPUDirectPath);

  const minCount = useState([...path, 'MinCount']);
  const maxCount = useState([...path, 'MaxCount']);

  const remove = () => {
    setState([...parentPath, 'ComputeResources'], [...computeResources.slice(0, index), ...computeResources.slice(index + 1)]);
  }

  const setMinCount = (staticCount) => {
    const dynamicCount = maxCount - minCount;
    if(staticCount > 0)
      setState([...path, 'MinCount'], staticCount);
    else
      clearState([...path, 'MinCount']);
    setState([...path, 'MaxCount'], staticCount + dynamicCount);
  }

  const setMaxCount = (dynamicCount) => {
    const staticCount = minCount;
    setState([...path, 'MaxCount'], staticCount + dynamicCount);
  }

  const setDisableHT = (disable) => {
    if(disable)
      setState(disableHTPath, disable);
    else
      clearState(disableHTPath);
  }

  const setEnableEFA = (enable) => {
    if(enable)
    {
      setState(enableEFAPath, enable);
      setState(enablePlacementGroupPath, enable);
    }
    else
      clearState(efaPath);
  }

  const setEnableGPUDirect = (enable) => {
    if(enable)
      setState(enableGPUDirectPath, enable);
    else
      clearState(enableGPUDirectPath);
  }

  const setInstanceType = (instanceType) => {
    // setting the instance type on the queue happens in the component
    // this updates the name which is derived from the instance type
    setState([...path, 'Name'], `${queue.Name}-${instanceType.replace(".", "")}`);
  }

  React.useEffect(() => {
    if(!instanceType)
      setState([...queuesPath, queueIndex, 'ComputeResources', index, "InstanceType"], 'c5n.large');
  }, [queueIndex, index, instanceType]);

  return (
    <div className="compute-resource">
      <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
        <Box margin={{top: "xs"}} textAlign="right">{index > 0 && <Button onClick={remove}>Remove Resource</Button>}</Box>
        <ColumnLayout columns={2}>
          <div style={{display: "flex", flexDirection: "row", gap: "20px"}}>
            <FormField label="Static Nodes">
              <Input
                value={computeResource.MinCount || 0}
                type="number"
                onChange={(({detail}) => setMinCount(parseInt(detail.value)))} />
            </FormField>
            <FormField label="Dynamic Nodes">
              <Input
                value={Math.max((computeResource.MaxCount || 0) - (computeResource.MinCount || 0), 0)}
                type="number"
                onChange={({detail}) => setMaxCount(parseInt(detail.value))} />
            </FormField>
          </div>
          <FormField label="Instance Type" errorText={typeError}>
            <InstanceSelect path={instanceTypePath} callback={setInstanceType}/>
          </FormField>
        </ColumnLayout>
        <div style={{display: "flex", flexDirection: "row", gap: "20px"}}>
          <Toggle disabled={tInstances.has(instanceType) || gravitonInstances.has(instanceType)} checked={disableHT} onChange={(event) => {setDisableHT(!disableHT)}}>Disable Hyperthreading</Toggle>
          <Toggle disabled={!efaInstances.has(instanceType)} checked={enableEFA} onChange={(event) => {setEnableEFA(!enableEFA)}}>Enable EFA</Toggle>