seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): enable add network by dragging NIC

Browse Source
main
Tsu-ba-me 2 years ago
parent 60a425a92d
commit 6cbff16d28
1 changed files with 133 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 210
      striker-ui/pages/init/index.tsx

210
striker-ui/pages/init/index.tsx
Unescape View File

@ -7,6 +7,7 @@ import {
iconButtonClasses as muiIconButtonClasses, iconButtonClasses as muiIconButtonClasses,
} from '@mui/material'; } from '@mui/material';
import { import {
Add as MUIAddIcon,
Check as MUICheckIcon, Check as MUICheckIcon,
Close as MUICloseIcon, Close as MUICloseIcon,
DragHandle as MUIDragHandleIcon, DragHandle as MUIDragHandleIcon,
@ -297,16 +298,17 @@ const NetworkInterfaceList: FC = () => {
interfaces: NetworkInterfaceOverviewMetadata[], interfaces: NetworkInterfaceOverviewMetadata[],
) => MUIBoxProps['onMouseUp']; ) => MUIBoxProps['onMouseUp'];
let floatingNetworkInterface: JSX.Element = <></>; let floatingNetworkInterface: JSX.Element = <></>;
let handleCreateNetworkMouseUp: MUIBoxProps['onMouseUp'];
let handlePanelMouseMove: MUIBoxProps['onMouseMove']; let handlePanelMouseMove: MUIBoxProps['onMouseMove'];
if (networkInterfaceHeld) { if (networkInterfaceHeld) {
const { networkInterfaceUUID } = networkInterfaceHeld;
createDropMouseUpHandler = createDropMouseUpHandler =
(interfaces: NetworkInterfaceOverviewMetadata[]) => () => { (interfaces: NetworkInterfaceOverviewMetadata[]) => () => {
interfaces.push(networkInterfaceHeld); interfaces.push(networkInterfaceHeld);
networkInterfaceInputMap[ networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
networkInterfaceHeld.networkInterfaceUUID
].isApplied = true;
}; };
floatingNetworkInterface = ( floatingNetworkInterface = (
@ -321,6 +323,17 @@ const NetworkInterfaceList: FC = () => {
/> />
); );
handleCreateNetworkMouseUp = () => {
networkInputs.push({
ipAddress: '',
name: '',
interfaces: [networkInterfaceHeld],
subnetMask: '',
});
networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
};
handlePanelMouseMove = ({ nativeEvent: { clientX, clientY } }) => { handlePanelMouseMove = ({ nativeEvent: { clientX, clientY } }) => {
setDragMousePosition({ setDragMousePosition({
x: clientX, x: clientX,
@ -399,83 +412,126 @@ const NetworkInterfaceList: FC = () => {
}, },
}} }}
/> />
{networkInputs.map(({ interfaces, ipAddress, name, subnetMask }) => ( <MUIBox
<InnerPanel key={`network-input-${name.toLowerCase()}`}> sx={{
<InnerPanelHeader> display: 'flex',
<BodyText text={name} /> flexDirection: 'row',
</InnerPanelHeader> overflowX: 'auto',
<MUIBox
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
margin: '.6em',
'& > *': { '& > *': {
flexBasis: '50%', marginBottom: '1em',
}, marginTop: '1em',
},
'& > :not(:first-child)': {
marginLeft: '1em',
},
}}
>
<MUIBox
onMouseUp={handleCreateNetworkMouseUp}
sx={{
alignItems: 'center',
borderColor: TEXT,
borderStyle: 'dashed',
borderWidth: '4px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
padding: '.6em',
}}
>
<MUIAddIcon fontSize="large" sx={{ color: GREY }} />
<BodyText
text="Drag interfaces here to create a new network."
sx={{
textAlign: 'center',
}} }}
> />
<MUIBox </MUIBox>
onMouseUp={createDropMouseUpHandler?.call(null, interfaces)} {networkInputs.map(
sx={{ ({ interfaces, ipAddress, name, subnetMask }, networkIndex) => (
borderColor: TEXT, <InnerPanel key={`network-input-${name.toLowerCase()}`}>
borderStyle: 'dashed', <InnerPanelHeader>
borderWidth: '4px', <OutlinedInputWithLabel label="Network name" value={name} />
display: 'flex', </InnerPanelHeader>
flexDirection: 'column', <MUIBox
padding: '.6em', sx={{
display: 'flex',
'& > :not(:first-child)': { flexDirection: 'column',
marginTop: '.3em', margin: '.6em',
},
}} '& > :not(:first-child)': {
> marginTop: '1em',
{interfaces.length > 0 ? (
interfaces.map(
(networkInterface, networkInterfaceIndex) => {
const { networkInterfaceUUID } = networkInterface;
return (
<BriefNetworkInterface
key={`brief-network-interface-${networkInterfaceUUID}`}
networkInterface={networkInterface}
onClose={() => {
interfaces.splice(networkInterfaceIndex, 1);
networkInterfaceInputMap[
networkInterfaceUUID
].isApplied = false;
setNetworkInterfaceInputMap({
...networkInterfaceInputMap,
});
}}
/>
);
}, },
) }}
) : ( >
<BodyText text="Drag interfaces here to add." /> <MUIBox
)} onMouseUp={createDropMouseUpHandler?.call(
</MUIBox> null,
<MUIBox interfaces,
sx={{ )}
display: 'flex', sx={{
flexDirection: 'column', borderColor: TEXT,
}} borderStyle: 'dashed',
> borderWidth: '4px',
<OutlinedInputWithLabel display: 'flex',
label="IP address" flexDirection: 'column',
value={ipAddress} padding: '.6em',
/>
<OutlinedInputWithLabel '& > :not(:first-child)': {
label="Subnet mask" marginTop: '.3em',
value={subnetMask} },
/> }}
</MUIBox> >
</MUIBox> {interfaces.length > 0 ? (
</InnerPanel> interfaces.map(
))} (networkInterface, networkInterfaceIndex) => {
const { networkInterfaceUUID } = networkInterface;
return (
<BriefNetworkInterface
key={`brief-network-interface-${networkInterfaceUUID}`}
networkInterface={networkInterface}
onClose={() => {
interfaces.splice(networkInterfaceIndex, 1);
networkInterfaceInputMap[
networkInterfaceUUID
].isApplied = false;
if (
networkIndex > 1 &&
interfaces.length === 0
) {
networkInputs.splice(networkIndex, 1);
}
setNetworkInterfaceInputMap({
...networkInterfaceInputMap,
});
}}
/>
);
},
)
) : (
<BodyText text="Drag interfaces here to add to this network." />
)}
</MUIBox>
<OutlinedInputWithLabel
label="IP address"
value={ipAddress}
/>
<OutlinedInputWithLabel
label="Subnet mask"
value={subnetMask}
/>
</MUIBox>
</InnerPanel>
),
)}
</MUIBox>
</MUIBox> </MUIBox>
)} )}
</Panel> </Panel>

Write Preview
Loading…
Cancel
Save