333 lines
12 KiB
JavaScript
333 lines
12 KiB
JavaScript
import React, {
|
|
useEffect,
|
|
useState,
|
|
useRef,
|
|
} from 'react';
|
|
import { HelpIcon, MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
|
|
import {
|
|
Alert,
|
|
Button,
|
|
Popover,
|
|
Text,
|
|
TextContent,
|
|
TextVariants,
|
|
} from '@patternfly/react-core';
|
|
import {
|
|
TableComposable,
|
|
Thead,
|
|
Tbody,
|
|
Tr,
|
|
Th,
|
|
Td,
|
|
} from '@patternfly/react-table';
|
|
import styles from '@patternfly/react-styles/css/components/Table/table';
|
|
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
|
|
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
import { UNIT_GIB } from '../../../constants';
|
|
import MountPoint from './MountPoint';
|
|
import SizeUnit from './SizeUnit';
|
|
|
|
let initialRow = {
|
|
id: uuidv4(),
|
|
mountpoint: '/',
|
|
fstype: 'xfs',
|
|
size: 10,
|
|
unit: UNIT_GIB,
|
|
};
|
|
|
|
const FileSystemConfiguration = ({ ...props }) => {
|
|
const { change, getState } = useFormApi();
|
|
const { input } = useFieldApi(props);
|
|
const [ draggedItemId, setDraggedItemId ] = useState(null);
|
|
const [ draggingToItemIndex, setDraggingToItemIndex ] = useState(null);
|
|
const [ isDragging, setIsDragging ] = useState(false);
|
|
const [ itemOrder, setItemOrder ] = useState([ initialRow.id ]);
|
|
const [ tempItemOrder, setTempItemOrder ] = useState([]);
|
|
const bodyref = useRef();
|
|
const [ rows, setRows ] = useState([ initialRow ]);
|
|
|
|
useEffect(() => {
|
|
const fsc = getState()?.values?.['file-system-configuration'];
|
|
if (!fsc) {
|
|
return;
|
|
}
|
|
|
|
const newRows = [];
|
|
const newOrder = [];
|
|
fsc.map(r => {
|
|
const id = uuidv4();
|
|
newRows.push({
|
|
id,
|
|
mountpoint: r.mountpoint,
|
|
fstype: 'xfs',
|
|
size: r.size,
|
|
unit: r.unit,
|
|
});
|
|
newOrder.push(id);
|
|
});
|
|
setRows(newRows);
|
|
setItemOrder(newOrder);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
change(input.name, itemOrder.map(r => {
|
|
for (const r2 of rows) {
|
|
if (r2.id === r) {
|
|
return {
|
|
mountpoint: r2.mountpoint,
|
|
size: r2.size,
|
|
unit: r2.unit,
|
|
};
|
|
}
|
|
}
|
|
}));
|
|
}, [ rows, itemOrder ]);
|
|
|
|
const addRow = () => {
|
|
const id = uuidv4();
|
|
setRows(rows.concat([{
|
|
id,
|
|
mountpoint: '/home',
|
|
fstype: 'xfs',
|
|
size: 1,
|
|
unit: UNIT_GIB,
|
|
}]));
|
|
setItemOrder(itemOrder.concat([ id ]));
|
|
};
|
|
|
|
const removeRow = id => {
|
|
let removeIndex = rows.map(e => e.id).indexOf(id);
|
|
let newRows = [ ...rows ];
|
|
newRows.splice(removeIndex, 1);
|
|
|
|
let removeOrderIndex = itemOrder.indexOf(id);
|
|
let newOrder = [ ...itemOrder ];
|
|
newOrder.splice(removeOrderIndex, 1);
|
|
|
|
setRows(newRows);
|
|
setItemOrder(newOrder);
|
|
};
|
|
|
|
const moveItem = (arr, i1, toIndex) => {
|
|
const fromIndex = arr.indexOf(i1);
|
|
if (fromIndex === toIndex) {
|
|
return arr;
|
|
}
|
|
|
|
const temp = arr.splice(fromIndex, 1);
|
|
arr.splice(toIndex, 0, temp[0]);
|
|
return arr;
|
|
};
|
|
|
|
const move = itemOrder => {
|
|
const ulNode = bodyref.current;
|
|
const nodes = Array.from(ulNode.children);
|
|
if (nodes.map(node => node.id).every((id, i) => id === itemOrder[i])) {
|
|
return;
|
|
}
|
|
|
|
while (ulNode.firstChild) {
|
|
ulNode.removeChild(ulNode.lastChild);
|
|
}
|
|
|
|
itemOrder.forEach(id => {
|
|
ulNode.appendChild(nodes.find(n => n.id === id));
|
|
});
|
|
};
|
|
|
|
const onDragOver = evt => {
|
|
evt.preventDefault();
|
|
|
|
const curListItem = evt.target.closest('tr');
|
|
if (!curListItem || !bodyref.current.contains(curListItem) || curListItem.id === draggedItemId) {
|
|
return null;
|
|
}
|
|
|
|
const dragId = curListItem.id;
|
|
const newDraggingToItemIndex = Array.from(bodyref.current.children).findIndex(item => item.id === dragId);
|
|
if (newDraggingToItemIndex !== draggingToItemIndex) {
|
|
const tempItemOrder = moveItem([ ...itemOrder ], draggedItemId, newDraggingToItemIndex);
|
|
move(tempItemOrder);
|
|
setDraggingToItemIndex(newDraggingToItemIndex);
|
|
setTempItemOrder(tempItemOrder);
|
|
}
|
|
};
|
|
|
|
const isValidDrop = evt => {
|
|
const ulRect = bodyref.current.getBoundingClientRect();
|
|
return (
|
|
evt.clientX > ulRect.x &&
|
|
evt.clientX < ulRect.x + ulRect.width &&
|
|
evt.clientY > ulRect.y &&
|
|
evt.clientY < ulRect.y + ulRect.height
|
|
);
|
|
};
|
|
|
|
const onDragLeave = evt => {
|
|
if (!isValidDrop(evt)) {
|
|
move(itemOrder);
|
|
setDraggingToItemIndex(null);
|
|
}
|
|
};
|
|
|
|
const onDrop = evt => {
|
|
if (isValidDrop(evt)) {
|
|
setItemOrder(tempItemOrder);
|
|
} else {
|
|
evt.currentTarget.classList.remove(styles.modifiers.ghostRow);
|
|
evt.currentTarget.setAttribute('aria-pressed', 'false');
|
|
setDraggedItemId(null);
|
|
setDraggingToItemIndex(null);
|
|
setIsDragging(false);
|
|
}
|
|
};
|
|
|
|
const onDragStart = evt => {
|
|
evt.dataTransfer.effectAllowed = 'move';
|
|
evt.dataTransfer.setData('text/plain', evt.currentTarget.id);
|
|
evt.currentTarget.classList.add(styles.modifiers.ghostRow);
|
|
evt.currentTarget.setAttribute('aria-pressed', 'true');
|
|
setDraggedItemId(evt.currentTarget.id);
|
|
setIsDragging(true);
|
|
};
|
|
|
|
const onDragEnd = evt => {
|
|
evt.target.classList.remove(styles.modifiers.ghostRow);
|
|
evt.target.setAttribute('aria-pressed', 'false');
|
|
setDraggedItemId(null);
|
|
setDraggingToItemIndex(null);
|
|
setIsDragging(false);
|
|
};
|
|
|
|
const setMountpoint = (id, mp) => {
|
|
let newRows = [ ...rows ];
|
|
for (let i = 0; i < newRows.length; i++) {
|
|
if (newRows[i].id === id) {
|
|
let newRow = { ...newRows[i] };
|
|
newRow.mountpoint = mp;
|
|
newRows.splice(i, 1, newRow);
|
|
break;
|
|
}
|
|
}
|
|
|
|
setRows(newRows);
|
|
};
|
|
|
|
const setSize = (id, s, u) => {
|
|
let newRows = [ ...rows ];
|
|
for (let i = 0; i < newRows.length; i++) {
|
|
if (newRows[i].id === id) {
|
|
let newRow = { ...newRows[i] };
|
|
newRow.size = s;
|
|
newRow.unit = u;
|
|
newRows.splice(i, 1, newRow);
|
|
break;
|
|
}
|
|
}
|
|
|
|
setRows(newRows);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<TextContent>
|
|
<Text component={ TextVariants.h3 }>Configure partitions</Text>
|
|
</TextContent>
|
|
{ rows.length > 1 && getState()?.errors?.['file-system-configuration']?.duplicates &&
|
|
<Alert variant="danger" isInline
|
|
title="Duplicate mount points: All mount points must be unique. Remove the duplicate or choose a new mount point." />
|
|
}
|
|
{ rows.length >= 1 && getState()?.errors?.['file-system-configuration']?.root === false &&
|
|
<Alert variant="danger" isInline
|
|
title="No root partition configured." />
|
|
}
|
|
<TextContent>
|
|
<Text>
|
|
Partitions have been generated and given default values based on best practices from Red Hat,
|
|
and your selections in previous steps of the wizard.
|
|
</Text>
|
|
</TextContent>
|
|
<TableComposable aria-label="File system table" className={ isDragging && styles.modifiers.dragOver } variant="compact">
|
|
<Thead>
|
|
<Tr>
|
|
<Th />
|
|
<Th>Mount point</Th>
|
|
<Th>Type</Th>
|
|
<Th>Minimum size
|
|
<Popover
|
|
hasAutoWidth
|
|
bodyContent={ <TextContent>
|
|
<Text>
|
|
Image Builder may extend this size based on requirements, selected packages, and configurations.
|
|
</Text>
|
|
</TextContent> }>
|
|
<Button
|
|
variant="plain"
|
|
aria-label="File system configuration info"
|
|
aria-describedby="file-system-configuration-info"
|
|
className="pf-c-form__group-label-help">
|
|
<HelpIcon />
|
|
</Button>
|
|
</Popover>
|
|
</Th>
|
|
<Th />
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody
|
|
ref={ bodyref }
|
|
onDragOver={ onDragOver }
|
|
onDrop={ onDragOver }
|
|
onDragLeave={ onDragLeave }
|
|
data-testid="file-system-configuration-tbody">
|
|
{rows.map((row, rowIndex) => (
|
|
<Tr key={ rowIndex } id={ row.id } draggable onDrop={ onDrop } onDragEnd={ onDragEnd } onDragStart={ onDragStart }>
|
|
<Td draggableRow={ {
|
|
id: `draggable-row-${row.id}`
|
|
} } />
|
|
<Td className="pf-m-width-30">
|
|
<MountPoint
|
|
key={ row.id + '-mountpoint' }
|
|
mountpoint={ row.mountpoint }
|
|
onChange={ mp => setMountpoint(row.id, mp) } />
|
|
{ getState().errors['file-system-configuration']?.duplicates &&
|
|
getState().errors['file-system-configuration']?.duplicates.indexOf(row.mountpoint) !== -1 &&
|
|
<Alert variant="danger" isInline isPlain title="Duplicate mount point." /> }
|
|
</Td>
|
|
<Td className="pf-m-width-20">
|
|
{ /* always xfs */ }
|
|
{row.fstype}
|
|
</Td>
|
|
<Td className="pf-m-width-30">
|
|
<SizeUnit
|
|
key={ row.id + '-sizeunit' }
|
|
size={ row.size }
|
|
unit={ row.unit }
|
|
onChange={ (s, u) => setSize(row.id, s, u) } />
|
|
</Td>
|
|
<Td className="pf-m-width-10">
|
|
<Button
|
|
variant="link"
|
|
icon={ <MinusCircleIcon /> }
|
|
onClick={ () => removeRow(row.id) } />
|
|
</Td>
|
|
</Tr>
|
|
))}
|
|
</Tbody>
|
|
</TableComposable>
|
|
<TextContent>
|
|
<Button
|
|
data-testid="file-system-add-partition"
|
|
className="pf-u-text-align-left"
|
|
variant="link"
|
|
icon={ <PlusCircleIcon /> }
|
|
onClick={ addRow }>
|
|
Add partition
|
|
</Button>
|
|
</TextContent>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FileSystemConfiguration;
|