CreateImageWizard: File system configuration
This commit is contained in:
Sanne Raymaekers
parent
1e864a2076
commit
350acbd21b
15 changed files with 906 additions and 17 deletions
|
|
@ -0,0 +1,333 @@
|
|||
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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue