Tsu-ba-me
2 years ago
parent
6beae61640
commit
22eba52b11
3 changed files with 609 additions and 571 deletions
@ -0,0 +1,563 @@ |
|||||||
|
import { FC, useEffect, useState } from 'react'; |
||||||
|
import { |
||||||
|
Box as MUIBox, |
||||||
|
BoxProps as MUIBoxProps, |
||||||
|
iconButtonClasses as muiIconButtonClasses, |
||||||
|
} from '@mui/material'; |
||||||
|
import { |
||||||
|
Add as MUIAddIcon, |
||||||
|
Check as MUICheckIcon, |
||||||
|
DragHandle as MUIDragHandleIcon, |
||||||
|
} from '@mui/icons-material'; |
||||||
|
import { |
||||||
|
DataGrid as MUIDataGrid, |
||||||
|
DataGridProps as MUIDataGridProps, |
||||||
|
gridClasses as muiGridClasses, |
||||||
|
} from '@mui/x-data-grid'; |
||||||
|
import { v4 as uuidv4 } from 'uuid'; |
||||||
|
|
||||||
|
import API_BASE_URL from '../lib/consts/API_BASE_URL'; |
||||||
|
import { BLUE, GREY, TEXT } from '../lib/consts/DEFAULT_THEME'; |
||||||
|
|
||||||
|
import BriefNetworkInterface from './BriefNetworkInterface'; |
||||||
|
import Decorator from './Decorator'; |
||||||
|
import OutlinedInputWithLabel from './OutlinedInputWithLabel'; |
||||||
|
import pad from '../lib/pad'; |
||||||
|
import { InnerPanel, InnerPanelHeader } from './Panels'; |
||||||
|
import periodicFetch from '../lib/fetchers/periodicFetch'; |
||||||
|
import SelectWithLabel from './SelectWithLabel'; |
||||||
|
import Spinner from './Spinner'; |
||||||
|
import sumstring from '../lib/sumstring'; |
||||||
|
import { BodyText, DataGridCellText } from './Text'; |
||||||
|
|
||||||
|
export type NetworkInterfaceInputMap = Record< |
||||||
|
string, |
||||||
|
{ |
||||||
|
isApplied?: boolean; |
||||||
|
} |
||||||
|
>; |
||||||
|
|
||||||
|
export type NetworkInput = { |
||||||
|
inputUUID: string; |
||||||
|
interfaces: NetworkInterfaceOverviewMetadata[]; |
||||||
|
ipAddress: string; |
||||||
|
name: string; |
||||||
|
subnetMask: string; |
||||||
|
type: string; |
||||||
|
}; |
||||||
|
|
||||||
|
const MOCK_NICS: NetworkInterfaceOverviewMetadata[] = [ |
||||||
|
{ |
||||||
|
networkInterfaceUUID: 'fe299134-c8fe-47bd-ab7a-3aa95eada1f6', |
||||||
|
networkInterfaceMACAddress: '52:54:00:d2:31:36', |
||||||
|
networkInterfaceName: 'ens10', |
||||||
|
networkInterfaceState: 'up', |
||||||
|
networkInterfaceSpeed: 10000, |
||||||
|
networkInterfaceOrder: 1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
networkInterfaceUUID: 'a652bfd5-61ac-4495-9881-185be8a2ac74', |
||||||
|
networkInterfaceMACAddress: '52:54:00:d4:4d:b5', |
||||||
|
networkInterfaceName: 'ens11', |
||||||
|
networkInterfaceState: 'up', |
||||||
|
networkInterfaceSpeed: 10000, |
||||||
|
networkInterfaceOrder: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
networkInterfaceUUID: 'b8089b40-0969-49c3-ad65-2470ddb420ef', |
||||||
|
networkInterfaceMACAddress: '52:54:00:ba:f5:a3', |
||||||
|
networkInterfaceName: 'ens3', |
||||||
|
networkInterfaceState: 'up', |
||||||
|
networkInterfaceSpeed: 10000, |
||||||
|
networkInterfaceOrder: 3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
networkInterfaceUUID: '42a17465-31b1-4e47-9a91-f803f22ffcc1', |
||||||
|
networkInterfaceMACAddress: '52:54:00:ae:31:70', |
||||||
|
networkInterfaceName: 'ens9', |
||||||
|
networkInterfaceState: 'up', |
||||||
|
networkInterfaceSpeed: 10000, |
||||||
|
networkInterfaceOrder: 4, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const NETWORK_TYPES: Record<string, string> = { |
||||||
|
bcn: 'Back-Channel Network', |
||||||
|
ifn: 'Internet-Facing Network', |
||||||
|
}; |
||||||
|
|
||||||
|
const REQUIRED_NETWORKS = [ |
||||||
|
{ |
||||||
|
inputUUID: '30dd2ac5-8024-4a7e-83a1-6a3df7218972', |
||||||
|
interfaces: [], |
||||||
|
ipAddress: '10.200.1.1', |
||||||
|
name: `${NETWORK_TYPES.bcn} 01`, |
||||||
|
subnetMask: '255.255.0.0', |
||||||
|
type: 'bcn', |
||||||
|
}, |
||||||
|
{ |
||||||
|
inputUUID: 'e7ef3af5-5602-440c-87f8-69c242e3d7f3', |
||||||
|
interfaces: [], |
||||||
|
ipAddress: '10.201.1.1', |
||||||
|
name: `${NETWORK_TYPES.ifn} 01`, |
||||||
|
subnetMask: '255.255.0.0', |
||||||
|
type: 'ifn', |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const createNetworkInterfaceTableColumns = ( |
||||||
|
handleDragMouseDown: ( |
||||||
|
row: NetworkInterfaceOverviewMetadata, |
||||||
|
...eventArgs: Parameters<Exclude<MUIBoxProps['onMouseDown'], undefined>> |
||||||
|
) => void, |
||||||
|
networkInterfaceInputMap: NetworkInterfaceInputMap, |
||||||
|
): MUIDataGridProps['columns'] => [ |
||||||
|
{ |
||||||
|
align: 'center', |
||||||
|
field: '', |
||||||
|
renderCell: ({ row }) => { |
||||||
|
const { isApplied } = |
||||||
|
networkInterfaceInputMap[row.networkInterfaceUUID] || false; |
||||||
|
|
||||||
|
let cursor = 'grab'; |
||||||
|
let handleMouseDown: MUIBoxProps['onMouseDown'] = (...eventArgs) => { |
||||||
|
handleDragMouseDown(row, ...eventArgs); |
||||||
|
}; |
||||||
|
let icon = <MUIDragHandleIcon />; |
||||||
|
|
||||||
|
if (isApplied) { |
||||||
|
cursor = 'auto'; |
||||||
|
handleMouseDown = undefined; |
||||||
|
icon = <MUICheckIcon sx={{ color: BLUE }} />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<MUIBox |
||||||
|
onMouseDown={handleMouseDown} |
||||||
|
sx={{ |
||||||
|
alignItems: 'center', |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'row', |
||||||
|
|
||||||
|
'&:hover': { cursor }, |
||||||
|
}} |
||||||
|
> |
||||||
|
{icon} |
||||||
|
</MUIBox> |
||||||
|
); |
||||||
|
}, |
||||||
|
sortable: false, |
||||||
|
width: 1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'networkInterfaceName', |
||||||
|
flex: 1, |
||||||
|
headerName: 'Name', |
||||||
|
renderCell: ({ row: { networkInterfaceState } = {}, value }) => ( |
||||||
|
<MUIBox |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'row', |
||||||
|
'& > :not(:first-child)': { marginLeft: '.5em' }, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Decorator |
||||||
|
colour={networkInterfaceState === 'up' ? 'ok' : 'off'} |
||||||
|
sx={{ height: 'auto' }} |
||||||
|
/> |
||||||
|
<DataGridCellText text={value} /> |
||||||
|
</MUIBox> |
||||||
|
), |
||||||
|
sortComparator: (v1, v2) => sumstring(v1) - sumstring(v2), |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'networkInterfaceMACAddress', |
||||||
|
flex: 1, |
||||||
|
headerName: 'MAC', |
||||||
|
renderCell: ({ value }) => <DataGridCellText monospaced text={value} />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'networkInterfaceState', |
||||||
|
headerName: 'State', |
||||||
|
renderCell: ({ value }) => { |
||||||
|
const state = String(value); |
||||||
|
|
||||||
|
return ( |
||||||
|
<DataGridCellText |
||||||
|
text={`${state.charAt(0).toUpperCase()}${state.substring(1)}`} |
||||||
|
/> |
||||||
|
); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'networkInterfaceSpeed', |
||||||
|
flex: 1, |
||||||
|
headerName: 'Speed', |
||||||
|
renderCell: ({ value }) => ( |
||||||
|
<DataGridCellText text={`${parseFloat(value).toLocaleString()} Mbps`} /> |
||||||
|
), |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'networkInterfaceOrder', |
||||||
|
flex: 1, |
||||||
|
headerName: 'Order', |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const NetworkInitForm: FC = () => { |
||||||
|
const [dragMousePosition, setDragMousePosition] = useState<{ |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
}>({ x: 0, y: 0 }); |
||||||
|
const [networkInterfaceInputMap, setNetworkInterfaceInputMap] = |
||||||
|
useState<NetworkInterfaceInputMap>({}); |
||||||
|
const [networkInputs, setNetworkInputs] = |
||||||
|
useState<NetworkInput[]>(REQUIRED_NETWORKS); |
||||||
|
const [networkInterfaceHeld, setNetworkInterfaceHeld] = useState< |
||||||
|
NetworkInterfaceOverviewMetadata | undefined |
||||||
|
>(); |
||||||
|
|
||||||
|
const optionalNetworkInputsLength = networkInputs.length - 2; |
||||||
|
|
||||||
|
const { data: networkInterfaces = MOCK_NICS, isLoading } = periodicFetch< |
||||||
|
NetworkInterfaceOverviewMetadata[] |
||||||
|
>(`${API_BASE_URL}/network-interface`, { |
||||||
|
refreshInterval: 2000, |
||||||
|
onSuccess: (data) => { |
||||||
|
if (data instanceof Array) { |
||||||
|
const map = data.reduce<NetworkInterfaceInputMap>( |
||||||
|
(reduceContainer, { networkInterfaceUUID }) => { |
||||||
|
reduceContainer[networkInterfaceUUID] = |
||||||
|
networkInterfaceInputMap[networkInterfaceUUID] || {}; |
||||||
|
|
||||||
|
return reduceContainer; |
||||||
|
}, |
||||||
|
{}, |
||||||
|
); |
||||||
|
|
||||||
|
setNetworkInterfaceInputMap(map); |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const clearNetworkInterfaceHeld = () => { |
||||||
|
setNetworkInterfaceHeld(undefined); |
||||||
|
}; |
||||||
|
|
||||||
|
const getNetworkTypeCount = (targetType: string, lastIndex = 0) => { |
||||||
|
let count = 0; |
||||||
|
|
||||||
|
for (let index = networkInputs.length - 1; index >= lastIndex; index -= 1) { |
||||||
|
if (networkInputs[index].type === targetType) { |
||||||
|
count += 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return count; |
||||||
|
}; |
||||||
|
|
||||||
|
let createDropMouseUpHandler: ( |
||||||
|
interfaces: NetworkInterfaceOverviewMetadata[], |
||||||
|
) => MUIBoxProps['onMouseUp']; |
||||||
|
let floatingNetworkInterface: JSX.Element = <></>; |
||||||
|
let handleCreateNetworkMouseUp: MUIBoxProps['onMouseUp']; |
||||||
|
let handleDragAreaMouseLeave: MUIBoxProps['onMouseLeave']; |
||||||
|
let handleDragAreaMouseMove: MUIBoxProps['onMouseMove']; |
||||||
|
let handleDragAreaMouseUp: MUIBoxProps['onMouseUp']; |
||||||
|
|
||||||
|
if (networkInterfaceHeld) { |
||||||
|
const { networkInterfaceUUID } = networkInterfaceHeld; |
||||||
|
|
||||||
|
createDropMouseUpHandler = |
||||||
|
(interfaces: NetworkInterfaceOverviewMetadata[]) => () => { |
||||||
|
interfaces.push(networkInterfaceHeld); |
||||||
|
|
||||||
|
networkInterfaceInputMap[networkInterfaceUUID].isApplied = true; |
||||||
|
}; |
||||||
|
|
||||||
|
floatingNetworkInterface = ( |
||||||
|
<BriefNetworkInterface |
||||||
|
networkInterface={networkInterfaceHeld} |
||||||
|
sx={{ |
||||||
|
left: `calc(${dragMousePosition.x}px + .4em)`, |
||||||
|
position: 'absolute', |
||||||
|
top: `calc(${dragMousePosition.y}px - 1em)`, |
||||||
|
zIndex: 10, |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
handleCreateNetworkMouseUp = () => { |
||||||
|
networkInputs.unshift({ |
||||||
|
inputUUID: uuidv4(), |
||||||
|
interfaces: [networkInterfaceHeld], |
||||||
|
ipAddress: '', |
||||||
|
name: '', |
||||||
|
subnetMask: '', |
||||||
|
type: '', |
||||||
|
}); |
||||||
|
|
||||||
|
networkInterfaceInputMap[networkInterfaceUUID].isApplied = true; |
||||||
|
}; |
||||||
|
|
||||||
|
handleDragAreaMouseLeave = () => { |
||||||
|
clearNetworkInterfaceHeld(); |
||||||
|
}; |
||||||
|
|
||||||
|
handleDragAreaMouseMove = ({ |
||||||
|
currentTarget, |
||||||
|
nativeEvent: { clientX, clientY }, |
||||||
|
}) => { |
||||||
|
const { left, top } = currentTarget.getBoundingClientRect(); |
||||||
|
|
||||||
|
setDragMousePosition({ |
||||||
|
x: clientX - left, |
||||||
|
y: clientY - top, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
handleDragAreaMouseUp = () => { |
||||||
|
clearNetworkInterfaceHeld(); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const map = networkInterfaces.reduce<NetworkInterfaceInputMap>( |
||||||
|
(reduceContainer, { networkInterfaceUUID }) => { |
||||||
|
reduceContainer[networkInterfaceUUID] = |
||||||
|
networkInterfaceInputMap[networkInterfaceUUID] || {}; |
||||||
|
|
||||||
|
return reduceContainer; |
||||||
|
}, |
||||||
|
{}, |
||||||
|
); |
||||||
|
|
||||||
|
setNetworkInterfaceInputMap(map); |
||||||
|
|
||||||
|
// This block inits the input map for the MOCK_NICS.
|
||||||
|
// TODO: remove after testing.
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []); |
||||||
|
|
||||||
|
return isLoading ? ( |
||||||
|
<Spinner /> |
||||||
|
) : ( |
||||||
|
<MUIBox |
||||||
|
onMouseDown={({ clientX, clientY, currentTarget }) => { |
||||||
|
const { left, top } = currentTarget.getBoundingClientRect(); |
||||||
|
|
||||||
|
setDragMousePosition({ |
||||||
|
x: clientX - left, |
||||||
|
y: clientY - top, |
||||||
|
}); |
||||||
|
}} |
||||||
|
onMouseLeave={handleDragAreaMouseLeave} |
||||||
|
onMouseMove={handleDragAreaMouseMove} |
||||||
|
onMouseUp={handleDragAreaMouseUp} |
||||||
|
sx={{ position: 'relative' }} |
||||||
|
> |
||||||
|
{floatingNetworkInterface} |
||||||
|
<MUIBox |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
|
||||||
|
'& > :not(:first-child, :nth-child(2))': { |
||||||
|
marginTop: '1em', |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
<MUIDataGrid |
||||||
|
autoHeight |
||||||
|
columns={createNetworkInterfaceTableColumns((row) => { |
||||||
|
setNetworkInterfaceHeld(row); |
||||||
|
}, networkInterfaceInputMap)} |
||||||
|
disableColumnMenu |
||||||
|
disableSelectionOnClick |
||||||
|
getRowId={({ networkInterfaceUUID }) => networkInterfaceUUID} |
||||||
|
hideFooter |
||||||
|
rows={networkInterfaces} |
||||||
|
sx={{ |
||||||
|
color: GREY, |
||||||
|
|
||||||
|
[`& .${muiIconButtonClasses.root}`]: { |
||||||
|
color: 'inherit', |
||||||
|
}, |
||||||
|
|
||||||
|
[`& .${muiGridClasses.cell}:focus`]: { |
||||||
|
outline: 'none', |
||||||
|
}, |
||||||
|
}} |
||||||
|
/> |
||||||
|
<MUIBox |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'row', |
||||||
|
overflowX: 'auto', |
||||||
|
|
||||||
|
'& > *': { |
||||||
|
marginBottom: '1em', |
||||||
|
marginTop: '1em', |
||||||
|
minWidth: '10em', |
||||||
|
width: '25%', |
||||||
|
}, |
||||||
|
|
||||||
|
'& > :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> |
||||||
|
{networkInputs.map((networkInput, networkIndex) => { |
||||||
|
const { inputUUID, interfaces, ipAddress, subnetMask, type } = |
||||||
|
networkInput; |
||||||
|
const isNetworkOptional = |
||||||
|
networkIndex < optionalNetworkInputsLength; |
||||||
|
|
||||||
|
return ( |
||||||
|
<InnerPanel key={`network-input-${inputUUID}`}> |
||||||
|
<InnerPanelHeader> |
||||||
|
<SelectWithLabel |
||||||
|
id={`network-input-${inputUUID}-name`} |
||||||
|
isReadOnly={!isNetworkOptional} |
||||||
|
label="Network name" |
||||||
|
selectItems={Object.entries(NETWORK_TYPES).map( |
||||||
|
([networkType, networkTypeName]) => { |
||||||
|
let count = getNetworkTypeCount( |
||||||
|
networkType, |
||||||
|
networkIndex, |
||||||
|
); |
||||||
|
|
||||||
|
if (networkType !== type) { |
||||||
|
count += 1; |
||||||
|
} |
||||||
|
|
||||||
|
const displayValue = `${networkTypeName} ${pad(count)}`; |
||||||
|
|
||||||
|
return { value: networkType, displayValue }; |
||||||
|
}, |
||||||
|
)} |
||||||
|
selectProps={{ |
||||||
|
onChange: ({ target: { value } }) => { |
||||||
|
networkInput.type = String(value); |
||||||
|
|
||||||
|
setNetworkInputs([...networkInputs]); |
||||||
|
}, |
||||||
|
renderValue: (value) => |
||||||
|
`${String(value).toUpperCase()}${pad( |
||||||
|
getNetworkTypeCount(type, networkIndex), |
||||||
|
)}`,
|
||||||
|
value: type, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</InnerPanelHeader> |
||||||
|
<MUIBox |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
margin: '.6em', |
||||||
|
|
||||||
|
'& > :not(:first-child)': { |
||||||
|
marginTop: '1em', |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
<MUIBox |
||||||
|
onMouseUp={createDropMouseUpHandler?.call(null, interfaces)} |
||||||
|
sx={{ |
||||||
|
borderColor: TEXT, |
||||||
|
borderStyle: 'dashed', |
||||||
|
borderWidth: '4px', |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
padding: '.6em', |
||||||
|
|
||||||
|
'& > :not(:first-child)': { |
||||||
|
marginTop: '.3em', |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
{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; |
||||||
|
|
||||||
|
if ( |
||||||
|
isNetworkOptional && |
||||||
|
interfaces.length === 0 |
||||||
|
) { |
||||||
|
networkInputs.splice(networkIndex, 1); |
||||||
|
} |
||||||
|
|
||||||
|
setNetworkInterfaceInputMap({ |
||||||
|
...networkInterfaceInputMap, |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
}, |
||||||
|
) |
||||||
|
) : ( |
||||||
|
<BodyText text="Drag interfaces here to add to this network." /> |
||||||
|
)} |
||||||
|
</MUIBox> |
||||||
|
<OutlinedInputWithLabel |
||||||
|
label="IP address" |
||||||
|
onChange={({ target: { value } }) => { |
||||||
|
networkInput.ipAddress = String(value); |
||||||
|
|
||||||
|
setNetworkInputs([...networkInputs]); |
||||||
|
}} |
||||||
|
value={ipAddress} |
||||||
|
/> |
||||||
|
<OutlinedInputWithLabel |
||||||
|
label="Subnet mask" |
||||||
|
onChange={({ target: { value } }) => { |
||||||
|
networkInput.subnetMask = String(value); |
||||||
|
|
||||||
|
setNetworkInputs([...networkInputs]); |
||||||
|
}} |
||||||
|
value={subnetMask} |
||||||
|
/> |
||||||
|
</MUIBox> |
||||||
|
</InnerPanel> |
||||||
|
); |
||||||
|
})} |
||||||
|
</MUIBox> |
||||||
|
</MUIBox> |
||||||
|
</MUIBox> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default NetworkInitForm; |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
import { FC, useState } from 'react'; |
||||||
|
import { Box as MUIBox } from '@mui/material'; |
||||||
|
|
||||||
|
import NetworkInitForm from './NetworkInitForm'; |
||||||
|
import OutlinedInputWithLabel from './OutlinedInputWithLabel'; |
||||||
|
import { Panel, PanelHeader } from './Panels'; |
||||||
|
import { HeaderText } from './Text'; |
||||||
|
|
||||||
|
const StrikerInitForm: FC = () => { |
||||||
|
const [organizationNameInput, setOrganizationNameInput] = |
||||||
|
useState<string>(''); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Panel> |
||||||
|
<PanelHeader> |
||||||
|
<HeaderText text="Initialize striker" /> |
||||||
|
</PanelHeader> |
||||||
|
<MUIBox |
||||||
|
sx={{ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
|
||||||
|
'& > :not(:first-child)': { marginTop: '1em' }, |
||||||
|
}} |
||||||
|
> |
||||||
|
<OutlinedInputWithLabel |
||||||
|
label="Organization name" |
||||||
|
onChange={({ target: { value } }) => { |
||||||
|
setOrganizationNameInput(String(value)); |
||||||
|
}} |
||||||
|
value={organizationNameInput} |
||||||
|
/> |
||||||
|
<OutlinedInputWithLabel label="Organization prefix" /> |
||||||
|
<OutlinedInputWithLabel label="Domain name" /> |
||||||
|
<OutlinedInputWithLabel label="Striker number" /> |
||||||
|
<NetworkInitForm /> |
||||||
|
</MUIBox> |
||||||
|
</Panel> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default StrikerInitForm; |
||||||
Loading…
Reference in new issue