function ComputeResources()

in frontend/src/old-pages/Configure/Queues/Queues.tsx [280:349]
67 lines of code
3 McCabe index (conditional complexity)

function ComputeResources({queue, index, canUseEFA}: any) {
  const {t} = useTranslation()
  const {ViewComponent} = useComputeResourceAdapter()
  const computeResourceAdapter = useComputeResourceAdapter()

  const {maxCRPerCluster, maxCRPerQueue} = useClusterResourcesLimits()
  const queues = useState([...queuesPath])
  const currentComputeResources = React.useMemo(
    () =>
      queues
        .map((queue: Queue) => queue.ComputeResources.length)
        .reduce(
          (total: number, computeResources: number) => total + computeResources,
          0,
        ),
    [queues],
  )

  const addComputeResource = () => {
    const existingCRs = queue.ComputeResources || []
    setState([...queuesPath, index], {
      ...queue,
      ComputeResources: [
        ...existingCRs,
        computeResourceAdapter.createComputeResource(
          queue.Name,
          existingCRs.length,
        ),
      ],
    })
  }

  return (
    <>
      <Header
        variant="h3"
        actions={
          <SpaceBetween direction="horizontal" size="xs">
            <Button
              disabled={
                queue.ComputeResources.length >= maxCRPerQueue ||
                currentComputeResources >= maxCRPerCluster
              }
              onClick={addComputeResource}
            >
              {t('wizard.queues.computeResource.addComputeResource')}
            </Button>
          </SpaceBetween>
        }
        description={t('wizard.queues.computeResource.header.description', {
          limit: maxCRPerQueue,
        })}
      >
        {t('wizard.queues.computeResource.header.title')}
      </Header>
      <ColumnLayout borders="horizontal">
        {queue.ComputeResources.map((computeResource: any, i: any) => (
          <ViewComponent
            queue={queue}
            computeResource={computeResource}
            index={i}
            queueIndex={index}
            key={i}
            canUseEFA={canUseEFA}
          />
        ))}
      </ColumnLayout>
    </>
  )
}