91 lines
2.2 KiB
React
91 lines
2.2 KiB
React
import React from "react";
|
|
import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
|
|
import { Box, Stack, Typography } from "@mui/material";
|
|
import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
|
|
import { useTheme } from "@emotion/react";
|
|
import { useTranslation } from "react-i18next";
|
|
import PropTypes from "prop-types";
|
|
|
|
const DiskSelection = ({ availableDisks, selectedDisks, onChange }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
const handleDiskChange = (event, mountpoint) => {
|
|
const isChecked = event.target.checked;
|
|
let newSelectedDisks = [];
|
|
|
|
if (isChecked) {
|
|
newSelectedDisks = [...selectedDisks, mountpoint];
|
|
} else {
|
|
newSelectedDisks = selectedDisks.filter((disk) => disk !== mountpoint);
|
|
}
|
|
|
|
onChange(newSelectedDisks);
|
|
};
|
|
|
|
return (
|
|
<ConfigBox>
|
|
<Box>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
>
|
|
{t("v1.infrastructure.disk_selection_title")}
|
|
</Typography>
|
|
<Typography component="p">
|
|
{t("v1.infrastructure.disk_selection_description")}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Stack gap={theme.spacing(6)}>
|
|
{!availableDisks || availableDisks.length === 0 ? (
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontStyle: "italic", opacity: 0.8 }}
|
|
>
|
|
{t("v1.infrastructure.disk_selection_info")}
|
|
</Typography>
|
|
) : (
|
|
availableDisks.map((disk) => {
|
|
const identifier = disk.mountpoint || disk.device;
|
|
return (
|
|
<Stack
|
|
key={identifier}
|
|
direction={{ sm: "column", md: "row" }}
|
|
spacing={theme.spacing(2)}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
}}
|
|
justifyContent="flex-start"
|
|
>
|
|
<Checkbox
|
|
id={`disk-${identifier}`}
|
|
name={identifier}
|
|
label={identifier}
|
|
isChecked={selectedDisks.includes(identifier)}
|
|
onChange={(e) => handleDiskChange(e, identifier)}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
})
|
|
)}
|
|
</Stack>
|
|
</ConfigBox>
|
|
);
|
|
};
|
|
|
|
DiskSelection.propTypes = {
|
|
availableDisks: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
mountpoint: PropTypes.string.isRequired,
|
|
})
|
|
),
|
|
selectedDisks: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default DiskSelection;
|