mirror of
https://github.com/dec0dOS/zero-ui.git
synced 2025-07-15 01:23:12 -07:00
refactor: squash commits
This commit is contained in:
dec0dOS
parent
63ebcb5915
commit
1e6e237aa3
107 changed files with 20077 additions and 0 deletions
141
frontend/src/components/NetworkSettings/NetworkSettings.jsx
Normal file
141
frontend/src/components/NetworkSettings/NetworkSettings.jsx
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
import {
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Grid,
|
||||
Typography,
|
||||
TextField,
|
||||
Select,
|
||||
} from "@material-ui/core";
|
||||
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
||||
|
||||
import ManagedRoutes from "./components/ManagedRoutes";
|
||||
import IPv4AutoAssign from "./components/IPv4AutoAssign";
|
||||
|
||||
import API from "utils/API";
|
||||
import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
|
||||
|
||||
function NetworkSettings({ network, setNetwork }) {
|
||||
const sendReq = async (data) => {
|
||||
try {
|
||||
const req = await API.post("/network/" + network["config"]["id"], data);
|
||||
console.log("Action", req);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (key1, key2, mode = "text", additionalData = null) => (
|
||||
event
|
||||
) => {
|
||||
const value = parseValue(event, mode, additionalData);
|
||||
|
||||
let updatedNetwork = replaceValue({ ...network }, key1, key2, value);
|
||||
setNetwork(updatedNetwork);
|
||||
|
||||
let data = setValue({}, key1, key2, value);
|
||||
|
||||
sendReq(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography>General settings</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Grid container direction="column" spacing={3}>
|
||||
<Grid item>
|
||||
<Typography>Network ID</Typography>
|
||||
<Typography variant="h5">
|
||||
<span>{network["config"]["id"]}</span>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
value={network["config"]["name"]}
|
||||
onChange={handleChange("config", "name")}
|
||||
label="Name"
|
||||
variant="filled"
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
value={network["description"]}
|
||||
onChange={handleChange("description")}
|
||||
multiline
|
||||
rows={2}
|
||||
rowsMax={Infinity}
|
||||
label="Description"
|
||||
variant="filled"
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Divider />
|
||||
<Grid item>
|
||||
<Typography>Access Control</Typography>
|
||||
<Select
|
||||
native
|
||||
value={network["config"]["private"]}
|
||||
onChange={handleChange("config", "private", "json")}
|
||||
>
|
||||
<option value={true}>Private</option>
|
||||
<option value={false}>Public</option>
|
||||
</Select>
|
||||
</Grid>
|
||||
<Divider />
|
||||
<Grid item>
|
||||
<ManagedRoutes
|
||||
routes={network["config"]["routes"]}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</Grid>
|
||||
<Divider />
|
||||
<Grid item>
|
||||
<IPv4AutoAssign
|
||||
ipAssignmentPools={network["config"]["ipAssignmentPools"]}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</Grid>
|
||||
{/* TODO: */}
|
||||
{/* <Grid item>
|
||||
<Typography>IPv6 Auto-Assign</Typography>
|
||||
</Grid> */}
|
||||
<Divider />
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="Multicast Recipient Limit"
|
||||
type="number"
|
||||
value={network["config"]["multicastLimit"]}
|
||||
onChange={handleChange("config", "multicastLimit", "json")}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Checkbox
|
||||
checked={network["config"]["enableBroadcast"]}
|
||||
color="primary"
|
||||
onChange={handleChange("config", "enableBroadcast", "checkbox")}
|
||||
/>
|
||||
<span>Enable Broadcast</span>
|
||||
</Grid>
|
||||
{/* TODO: */}
|
||||
{/* <Grid item>
|
||||
<Typography>DNS</Typography>
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
|
||||
export default NetworkSettings;
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Divider,
|
||||
Grid,
|
||||
List,
|
||||
Typography,
|
||||
TextField,
|
||||
IconButton,
|
||||
} from "@material-ui/core";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
||||
|
||||
import DataTable from "react-data-table-component";
|
||||
|
||||
import { addressPool } from "utils/NetworkConfig";
|
||||
import { getCIDRAddress, validateIP, normilizeIP } from "utils/IP";
|
||||
|
||||
function IPv4AutoAssign({ ipAssignmentPools, handleChange }) {
|
||||
const [start, setStart] = useState("");
|
||||
const [end, setEnd] = useState("");
|
||||
|
||||
const handleStartInput = (event) => {
|
||||
setStart(event.target.value);
|
||||
};
|
||||
|
||||
const handleEndInput = (event) => {
|
||||
setEnd(event.target.value);
|
||||
};
|
||||
|
||||
const setDefaultPool = (index) => {
|
||||
addPoolReq(addressPool[index]["start"], addressPool[index]["end"], true);
|
||||
|
||||
handleChange("config", "routes", "custom", [
|
||||
{
|
||||
target: getCIDRAddress(
|
||||
addressPool[index]["start"],
|
||||
addressPool[index]["end"]
|
||||
),
|
||||
},
|
||||
])(null);
|
||||
};
|
||||
|
||||
const addPoolReq = (localStart, localEnd, reset = false) => {
|
||||
let data = {};
|
||||
console.log(localStart, localEnd);
|
||||
if (validateIP(localStart) && validateIP(localEnd)) {
|
||||
data["ipRangeStart"] = normilizeIP(localStart);
|
||||
data["ipRangeEnd"] = normilizeIP(localEnd);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
let newPool = [];
|
||||
if (ipAssignmentPools && !reset) {
|
||||
newPool = [...ipAssignmentPools];
|
||||
}
|
||||
newPool.push(data);
|
||||
console.log(newPool);
|
||||
|
||||
handleChange("config", "ipAssignmentPools", "custom", newPool)(null);
|
||||
|
||||
setStart("");
|
||||
setEnd("");
|
||||
};
|
||||
|
||||
const removePoolReq = (index) => {
|
||||
let newPool = [...ipAssignmentPools];
|
||||
newPool.splice(index, 1);
|
||||
|
||||
handleChange("config", "ipAssignmentPools", "custom", newPool)(null);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
id: "remove",
|
||||
width: "10px",
|
||||
cell: (_, index) => (
|
||||
<IconButton
|
||||
size="small"
|
||||
color="secondary"
|
||||
onClick={() => removePoolReq(index)}
|
||||
>
|
||||
<DeleteOutlineIcon style={{ fontSize: 14 }} />
|
||||
</IconButton>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "Start",
|
||||
name: "Start",
|
||||
cell: (row) => row["ipRangeStart"],
|
||||
},
|
||||
{
|
||||
id: "End",
|
||||
name: "End",
|
||||
cell: (row) => row["ipRangeEnd"],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography>IPv4 Auto-Assign</Typography>
|
||||
<div
|
||||
style={{
|
||||
padding: "30px",
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={1}>
|
||||
{addressPool.map((item, index) => (
|
||||
<Grid item xs={3} key={item["name"]}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth={true}
|
||||
onClick={() => setDefaultPool(index)}
|
||||
>
|
||||
{item["name"]}
|
||||
</Button>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
<Typography style={{ paddingBottom: "10px" }}>
|
||||
Auto-Assign Pools
|
||||
</Typography>
|
||||
<Box border={1} borderColor="grey.300">
|
||||
<Grid item style={{ margin: "10px" }}>
|
||||
<DataTable
|
||||
noHeader={true}
|
||||
columns={columns}
|
||||
data={ipAssignmentPools}
|
||||
/>
|
||||
<Divider />
|
||||
<Typography>Add IPv4 Pool</Typography>
|
||||
<List
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
value={start}
|
||||
onChange={handleStartInput}
|
||||
placeholder={"Start"}
|
||||
/>
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
style={{
|
||||
margin: "10px",
|
||||
}}
|
||||
flexItem
|
||||
/>
|
||||
<TextField
|
||||
value={end}
|
||||
onChange={handleEndInput}
|
||||
placeholder={"End"}
|
||||
/>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={() => addPoolReq(start, end)}
|
||||
>
|
||||
<AddIcon
|
||||
style={{
|
||||
fontSize: 16,
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</List>
|
||||
</Grid>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default IPv4AutoAssign;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./IPv4AutoAssign";
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Divider,
|
||||
Grid,
|
||||
List,
|
||||
Typography,
|
||||
TextField,
|
||||
IconButton,
|
||||
} from "@material-ui/core";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
|
||||
|
||||
import DataTable from "react-data-table-component";
|
||||
|
||||
import { validateIP, normilizeIP, validateCIDR } from "utils/IP";
|
||||
|
||||
function ManagedRoutes({ routes, handleChange }) {
|
||||
const [destination, setDestination] = useState("");
|
||||
const [via, setVia] = useState("");
|
||||
|
||||
const handleDestinationInput = (event) => {
|
||||
setDestination(event.target.value);
|
||||
};
|
||||
|
||||
const handleViaInput = (event) => {
|
||||
setVia(event.target.value);
|
||||
};
|
||||
|
||||
const addRouteReq = () => {
|
||||
let data = {};
|
||||
if (validateCIDR(destination)) {
|
||||
data["target"] = destination;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
if (via && validateIP(via)) {
|
||||
data["via"] = normilizeIP(via);
|
||||
}
|
||||
|
||||
let newRoutes = [...routes];
|
||||
newRoutes.push(data);
|
||||
|
||||
handleChange("config", "routes", "custom", newRoutes)(null);
|
||||
|
||||
setDestination("");
|
||||
setVia("");
|
||||
};
|
||||
|
||||
const removeRouteReq = (index) => {
|
||||
let newRoutes = [...routes];
|
||||
newRoutes.splice(index, 1);
|
||||
|
||||
handleChange("config", "routes", "custom", newRoutes)(null);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
id: "remove",
|
||||
width: "10px",
|
||||
cell: (_, index) => (
|
||||
<IconButton
|
||||
size="small"
|
||||
color="secondary"
|
||||
onClick={() => removeRouteReq(index)}
|
||||
>
|
||||
<DeleteOutlineIcon style={{ fontSize: 14 }} />
|
||||
</IconButton>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "target",
|
||||
name: "Target",
|
||||
cell: (row) => row["target"],
|
||||
},
|
||||
{
|
||||
id: "via",
|
||||
name: "via",
|
||||
cell: (row) => (row["via"] ? row["via"] : "(LAN)"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography style={{ paddingBottom: "10px" }}>
|
||||
Managed Routes ({routes.length + "/32"})
|
||||
</Typography>
|
||||
<Box border={1} borderColor="grey.300">
|
||||
<Grid item style={{ margin: "10px" }}>
|
||||
<DataTable noHeader={true} columns={columns} data={routes} />
|
||||
<Divider />
|
||||
<Typography>Add Routes</Typography>
|
||||
<List
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
value={destination}
|
||||
onChange={handleDestinationInput}
|
||||
placeholder={"Destination (CIDR)"}
|
||||
/>
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
style={{
|
||||
margin: "10px",
|
||||
}}
|
||||
flexItem
|
||||
/>
|
||||
<TextField
|
||||
value={via}
|
||||
onChange={handleViaInput}
|
||||
placeholder={"Via (Optional)"}
|
||||
/>
|
||||
<IconButton size="small" color="primary" onClick={addRouteReq}>
|
||||
<AddIcon
|
||||
style={{
|
||||
fontSize: 16,
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</List>
|
||||
</Grid>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ManagedRoutes;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./ManagedRoutes";
|
||||
1
frontend/src/components/NetworkSettings/index.jsx
Normal file
1
frontend/src/components/NetworkSettings/index.jsx
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./NetworkSettings";
|
||||
Loading…
Add table
Add a link
Reference in a new issue