function Queue()

in frontend/src/pages/Configure/Queues.js [231:286]
49 lines of code
6 McCabe index (conditional complexity)

function Queue({index}) {
  const queues = useState(queuesPath);
  const [ editingName, setEditingName ] = React.useState(false);
  const queue = useState([...queuesPath, index]);
  const enablePlacementGroupPath = [...queuesPath, index, 'Networking', 'PlacementGroup', 'Enabled'];
  const enablePlacementGroup = useState(enablePlacementGroupPath);

  const subnetError = useState([...queuesErrorsPath, index, 'subnet']);

  const capacityTypes = [
    ["ONDEMAND", "On-Demand", "/img/od.svg"],
    ["SPOT", "Spot", "/img/spot.svg"],
  ];
  const capacityTypePath = [queuesPath, index, "CapacityType"];
  const capacityType = useState(capacityTypePath) || "ONDEMAND";

  const subnetPath = [...queuesPath, index, "Networking", "SubnetIds"];
  const subnetValue = useState([...subnetPath, 0]) || "";

  const remove = () => {
    setState([...queuesPath], [...queues.slice(0, index), ...queues.slice(index + 1)]);
  }
  const addComputeResource = () => {
    setState([...queuesPath, index], {...queue, ComputeResources: [...(queue.ComputeResources || []),
      {
        Name: `queue${index}-c5n-large`,
        InstanceType: 'c5n-large',
        MinCount: 0,
        MaxCount: 4
      }]});
  }

  const setEnablePG = (enable) => {
    setState(enablePlacementGroupPath, enable);
  }

  const renameQueue = (newName) => {
    const computeResources = getState([...queuesPath, index, 'ComputeResources']);
    for(let i = 0; i < computeResources.length; i++)
    {
      const cr = computeResources[i];
      const crName = `${newName}-${cr.InstanceType.replace(".", "")}`;
      setState([...queuesPath, index, 'ComputeResources', i, "Name"], crName);
    }
    setState([...queuesPath, index, 'Name'], newName);
  }

  return (
    <div className="queue">
      <div className="queue-properties">
        <Box margin={{bottom: "xs"}} >
        <Header variant="h4"
          actions={<SpaceBetween direction="horizontal" size="xs">
            <Button disabled={queue.ComputeResources.length >= 3} onClick={addComputeResource}>Add Resource</Button>
            {index > 0 && <Button onClick={remove}>Remove Queue</Button>}
          </SpaceBetween>}>