function StorageInstance()

in frontend/src/pages/Configure/Storage.js [446:563]
110 lines of code
19 McCabe index (conditional complexity)

function StorageInstance({index}) {
  const path = [...storagePath, index]
  const storageAppPath = ['wizard', 'storage', index];
  const storageType = useState([...path, 'StorageType']) || "none";
  const storageName = useState([...path, 'Name']) || "";
  const mountPoint = useState([...path, 'MountDir']);
  const useExisting = useState([...storageAppPath, 'useExisting']) || false;
  const settingsPath = [...path, `${storageType}Settings`]
  const existingPath = [...settingsPath, 'FileSystemId']
  const existingId = useState(existingPath) || "";
  const storages = useState(storagePath);

  const fsxFilesystems = useState(['aws', 'fsx_filesystems']) || [];
  const efsFilesystems = useState(['aws', 'efs_filesystems']) || [];
  const editing = useState(['app', 'wizard', 'editing']);

  const fsxName = (fsx) => {
    var tags = fsx.Tags;
    if(!tags) {
      return null;
    }
    tags = fsx.Tags.filter((t) => {return t.Key === "Name"})
    return (tags.length > 0) ? tags[0].Value : null
  }

  const removeStorage = (type) => {
    if(index === 0 && storages.length === 1)
      clearState(storagePath);
    else
      clearState(path);

    // Rename storages to keep indices correct and names unique
    const updatedStorages = getState(storagePath);
    if(updatedStorages)
      for(let i = 0; i < updatedStorages.length; i++)
      {
        const storage = getState([...storagePath, i]);
        setState([...storagePath, i, 'Name'], `${storage.StorageType}${i}`);

      }
  }

  const toggleUseExisting = () => {
    const value = !useExisting;
    clearState(settingsPath)
    setState([...storageAppPath, 'useExisting'], value);
  }

  const idToOption = (id) => {
    return {label: id, value: id}
  }

  return (
    <Container
      header={<Header
        variant="h3"
        actions={<Button onClick={removeStorage}>Remove</Button>}>
        Name: {storageName}
      </Header>}
    >
      <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
        <ColumnLayout columns={2} borders="vertical">
          <div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginTop: "10px"}}>
            <div style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "16px"}}>
              Mount Point:
              <Input
                disabled={editing}
                value={mountPoint}
                onChange={(({detail}) => {setState([...storagePath, index, 'MountDir'], detail.value)})} />
            </div>
            <HelpTooltip>
              Where to mount the shared storage on both the Head Node and Compute Fleet instances.
            </HelpTooltip>
          </div>
          <div style={{marginTop: "10px", display: "flex", flexDirection: "column" }}>
            <div style={{marginTop: "10px", display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
              <Toggle disabled={editing} checked={useExisting} onChange={toggleUseExisting}>Use Existing Filesystem</Toggle>
              <HelpTooltip>
                Specify an existing fileystem and mount it to all instances in the cluster.
                See <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-FsxLustreSettings-FileSystemId'>FSx Filesystem ID</a>
                , <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-EfsSettings-FileSystemId'>EFS Filesystem ID</a>
                , <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-EbsSettings-VolumeId'>EBS Volume ID</a>
              </HelpTooltip>
            </div>
            { useExisting &&
                {
                  "Ebs":
                    <div style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "16px", marginTop: "10px"}}>
                      Existing EBS ID:
                      <Input
                        placeholder="i.e. fsx-1234 or efs-1234"
                        value={existingId}
                        onChange={(({detail}) => {setState(existingPath, detail.value)})} />
                    </div>,
                  "FsxLustre": <FormField label="FSx Filesystem">
                    <Select
                      placeholder="Please Select"
                      selectedOption={existingId && idToOption(existingId)} label="FSx Filesystem" onChange={({detail}) => {setState(existingPath, detail.selectedOption.value)}}
                      options={fsxFilesystems.map((x, i) => {return {value: x.FileSystemId, label: (x.FileSystemId + (fsxName(x) ? ` (${fsxName(x)})` : ""))}})}
                    />
                  </FormField>,
                  "Efs": <FormField label="EFS Filesystem">
                    <Select
                      selectedOption={idToOption(existingId || "")} label="EFS Filesystem" onChange={({detail}) => {setState(existingPath, detail.selectedOption.value)}}
                      options={efsFilesystems.map((x, i) => {return {value: x.FileSystemId, label: (x.FileSystemId + (x.Name ? ` (${x.Name})` : ""))}})}
                    />
                  </FormField>}[storageType]
            }
          </div>
        </ColumnLayout>
        { ! useExisting && {"FsxLustre": <FsxLustreSettings index={index}/>,
          "Efs": <EfsSettings index={index}/>,
          "Ebs": <EbsSettings index={index}/>}[storageType]
        }
      </div>
    </Container>
  )
}