in frontend/src/pages/Configure/Storage.js [84:220]
function FsxLustreSettings({index}) {
const fsxPath = [...storagePath, index, 'FsxLustreSettings']
const storageCapacityPath = [...fsxPath, 'StorageCapacity'];
const lustreTypePath = [...fsxPath, 'DeploymentType'];
const lustreTypes = ['PERSISTENT_1', 'SCRATCH_1', 'SCRATCH_2'];
const storageThroughputPath = [...fsxPath, 'PerUnitStorageThroughput'];
const storageThroughputs = [50, 100, 200];
const importPathPath = [...fsxPath, 'ImportPath'];
const exportPathPath = [...fsxPath, 'ExportPath'];
const compressionPath = [...fsxPath, 'DataCompressionType'];
const storageCapacity = useState(storageCapacityPath);
const lustreType = useState(lustreTypePath);
const storageThroughput = useState(storageThroughputPath);
const importPath = useState(importPathPath) || '';
const exportPath = useState(exportPathPath) || '';
const compression = useState(compressionPath);
const editing = useState(['app', 'wizard', 'editing']);
React.useEffect(() => {
const fsxPath = [...storagePath, index, 'FsxLustreSettings']
const storageCapacityPath = [...fsxPath, 'StorageCapacity'];
const lustreTypePath = [...fsxPath, 'DeploymentType'];
if(storageCapacity === null)
setState(storageCapacityPath, 1200);
if(lustreType === null)
setState(lustreTypePath, "SCRATCH_2");
}, [storageCapacity, lustreType, storageThroughput]);
const toggleCompression = () => {
if(compression)
clearState(compressionPath);
else
setState(compressionPath, 'LZ4');
}
const setImportPath = (path) => {
if(path !== '')
setState(importPathPath, path);
else
clearState(importPathPath);
}
const setExportPath = (path) => {
if(path !== '')
setState(exportPathPath, path);
else
clearState(exportPathPath);
}
return (
<ColumnLayout columns={2} borders="vertical">
<div key="capacity" style={{display: "flex", flexDirection: "column"}}>
Storage Capacity: {storageCapacity} GB
<Slider
disabled={editing}
aria-label="Storage Capacity"
defaultValue={1200}
getAriaValueText={(v) => {return `${v} GB`}}
valueLabelDisplay="auto"
value={storageCapacity}
onChange={((e) => {setState(storageCapacityPath, e.target.value)})}
step={1200}
min={1200}
max={100800}
/>
</div>
<div key="lustre-type" style={{display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center"}}>
<div style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "16px"}}>
FSx Lustre Type:
<Select
disabled={editing}
selectedOption={strToOption(lustreType || 'PERSISTENT_1')} label="FSx Lustre Type" onChange={({detail}) => {
setState(lustreTypePath, detail.selectedOption.value);
if(detail.selectedOption.value === 'PERSISTENT_1') {
setState(storageThroughputPath, 200);
} else {
clearState(storageThroughputPath);
}
}}
options={lustreTypes.map(strToOption)}
/>
</div>
<HelpTooltip>
Choose SCRATCH_1 and SCRATCH_2 deployment types when you need temporary storage and shorter-term processing of data. The SCRATCH_2 deployment type provides in-transit encryption of data and higher burst throughput capacity than SCRATCH_1. Choose PERSISTENT_1 deployment type for longer-term storage and workloads and encryption of data in transit. See <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-FsxLustreSettings-DeploymentType'>DeploymentType</a>.
</HelpTooltip>
</div>
<div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
<FormField label="Import Path">
<Input
disabled={editing}
placeholder="s3://yourbucket"
value={importPath} onChange={({detail}) => setImportPath(detail.value)} />
</FormField>
<HelpTooltip>
Set Import Path to read files into your filesystem from an S3 bucket. See <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-FsxLustreSettings-ImportPath'>ImportPath</a>.
</HelpTooltip>
</div>
<div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
<FormField label="Export Path">
<Input
disabled={editing}
placeholder="s3://yourbucket"
value={exportPath} onChange={({detail}) => {setExportPath(detail.value)}} />
</FormField>
<HelpTooltip>
Set Export Path to write files from your filesystem into an S3 bucket. See <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-FsxLustreSettings-ExportPath'>ExportPath</a>.
</HelpTooltip>
</div>
{ lustreType === 'PERSISTENT_1' &&
<div style={{display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center"}}>
<FormField label="Per Unit Storage Throughput">
<Select
selectedOption={strToOption(storageThroughput || 200)} onChange={({detail}) => {
setState(storageThroughputPath, detail.selectedOption.value);
}}
options={storageThroughputs.map(strToOption)}
/>
</FormField>
<HelpTooltip>
Describes the amount of read and write throughput for each 1 tebibyte of storage, in MB/s/TiB. See <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-FsxLustreSettings-PerUnitStorageThroughput'>PerUnitStorageThroughput</a>.
</HelpTooltip>
</div>
}
<div style={{display: "flex", flexDirection: "row", alignItems: "center", marginTop: "10px", justifyContent: "space-between"}}>
<Toggle checked={compression !== null} onChange={toggleCompression}>Compress Filesystem Data?</Toggle>
<HelpTooltip>
When data compression is enabled, Amazon FSx for Lustre automatically compresses newly written files before they are written to disk and automatically uncompresses them when they are read. See <a rel="noreferrer" target="_blank" href='https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-FsxLustreSettings-DataCompressionType'>DataCompressionType</a>.
</HelpTooltip>
</div>
</ColumnLayout>
)
}