diff --git a/ui/src/features/configure/externals/networks/utils/editNetwork.jsx b/ui/src/features/configure/externals/networks/utils/editNetwork.jsx
new file mode 100644
index 0000000..e53ca9c
--- /dev/null
+++ b/ui/src/features/configure/externals/networks/utils/editNetwork.jsx
@@ -0,0 +1,363 @@
+import * as React from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { useSnackbar } from "notistack";
+
+import Draggable from "react-draggable";
+
+import {
+ Box,
+ Button,
+ Tooltip,
+ TextField,
+ Dialog,
+ DialogTitle,
+ DialogActions,
+ DialogContent,
+ Paper
+} from "@mui/material";
+
+import LoadingButton from "@mui/lab/LoadingButton";
+
+import {
+ selectNetworks,
+ updateBlockExternalAsync
+} from "../../../../ipam/ipamSlice";
+
+import {
+ isSubnetOf,
+ isSubnetOverlap
+} from "../../../../tools/planner/utils/iputils";
+
+import {
+ EXTERNAL_NAME_REGEX,
+ EXTERNAL_DESC_REGEX,
+ CIDR_REGEX
+} from "../../../../../global/globals";
+
+function DraggablePaper(props) {
+ const nodeRef = React.useRef(null);
+
+ return (
+
+
+
+ );
+}
+
+export default function EditExtNetwork(props) {
+ const { open, handleClose, space, block, externals, selectedExternal } = props;
+
+ const { enqueueSnackbar } = useSnackbar();
+
+ const [extName, setExtName] = React.useState({ value: "", error: false });
+ const [extDesc, setExtDesc] = React.useState({ value: "", error: false });
+ const [extCidr, setExtCidr] = React.useState({ value: "", error: false });
+
+ const [sending, setSending] = React.useState(false);
+
+ const dispatch = useDispatch();
+
+ const networks = useSelector(selectNetworks);
+
+ function onCancel() {
+ handleClose();
+
+ if(selectedExternal) {
+ setExtName({ value: selectedExternal.name, error: false });
+ setExtDesc({ value: selectedExternal.desc, error: false });
+ setExtCidr({ value: selectedExternal.cidr, error: false });
+ } else {
+ setExtName({ value: "", error: false });
+ setExtDesc({ value: "", error: false });
+ setExtCidr({ value: "", error: false });
+ }
+ }
+
+ function onSubmit() {
+ var body = [
+ {
+ op: "replace",
+ path: "/name",
+ value: extName.value
+ },
+ {
+ op: "replace",
+ path: "/desc",
+ value: extDesc.value,
+ },
+ {
+ op: "replace",
+ path: "/cidr",
+ value: extCidr.value
+ }
+ ];
+
+ (async () => {
+ try {
+ setSending(true);
+ await dispatch(updateBlockExternalAsync({ space: space, block: block.name, external: selectedExternal.name, body: body }));
+ enqueueSnackbar("Successfully updated External Network", { variant: "success" });
+ onCancel();
+ } catch (e) {
+ console.log("ERROR");
+ console.log("------------------");
+ console.log(e);
+ console.log("------------------");
+ enqueueSnackbar(e.message, { variant: "error" });
+ } finally {
+ setSending(false);
+ }
+ })();
+ }
+
+ function onNameChange(event) {
+ const newName = event.target.value;
+
+ if(externals) {
+ const regex = new RegExp(
+ EXTERNAL_NAME_REGEX
+ );
+
+ const nameError = newName ? !regex.test(newName) : false;
+ const nameExists = externals?.reduce((acc, curr) => {
+ curr['name'] !== selectedExternal['name'] && acc.push(curr['name'].toLowerCase());
+
+ return acc;
+ }, []).includes(newName.toLowerCase());
+
+ setExtName({
+ value: newName,
+ error: (nameError || nameExists)
+ });
+ }
+ }
+
+ function onDescChange(event) {
+ const newDesc = event.target.value;
+
+ const regex = new RegExp(
+ EXTERNAL_DESC_REGEX
+ );
+
+ setExtDesc({
+ value: newDesc,
+ error: (newDesc ? !regex.test(newDesc) : false)
+ });
+ }
+
+ function onCidrChange(event) {
+ const newCidr = event.target.value;
+
+ const regex = new RegExp(
+ CIDR_REGEX
+ );
+
+ const cidrError = newCidr ? !regex.test(newCidr) : false;
+
+ var blockNetworks= [];
+ var extNetworks = [];
+
+ var cidrInBlock = false;
+ var resvOverlap = true;
+ var vnetOverlap = true;
+ var extOverlap = true;
+
+ if(!cidrError && newCidr.length > 0) {
+ cidrInBlock = isSubnetOf(newCidr, block.cidr);
+
+ const openResv = block?.resv.reduce((acc, curr) => {
+ if(!curr['settledOn']) {
+ acc.push(curr['cidr']);
+ }
+
+ return acc;
+ }, []);
+
+ if(space && block && networks) {
+ blockNetworks = networks?.reduce((acc, curr) => {
+ if(curr['parent_space'] && curr['parent_block']) {
+ if(curr['parent_space'] === space && curr['parent_block'].includes(block.name)) {
+ acc = acc.concat(curr['prefixes']);
+ }
+ }
+
+ return acc;
+ }, []);
+ }
+
+ if(externals) {
+ extNetworks = externals?.reduce((acc, curr) => {
+ curr['name'] !== selectedExternal['name'] && acc.push(curr['cidr']);
+
+ return acc;
+ }, []);
+ }
+
+ resvOverlap = isSubnetOverlap(newCidr, openResv);
+ vnetOverlap = isSubnetOverlap(newCidr, blockNetworks);
+ extOverlap = isSubnetOverlap(newCidr, extNetworks);
+ }
+
+ setExtCidr({
+ value: newCidr,
+ error: (cidrError || !cidrInBlock || resvOverlap || vnetOverlap || extOverlap)
+ });
+ }
+
+ const unchanged = React.useMemo(() => {
+ if(selectedExternal) {
+ return (
+ extName.value === selectedExternal.name &&
+ extDesc.value === selectedExternal.desc &&
+ extCidr.value === selectedExternal.cidr
+ );
+ } else {
+ return true;
+ }
+ }, [selectedExternal, extName, extDesc, extCidr]);
+
+ const hasError = React.useMemo(() => {
+ var emptyCheck = false;
+ var errorCheck = false;
+
+ errorCheck = (extName.error || extDesc.error || extCidr.error);
+ emptyCheck = (extName.value.length === 0 || extDesc.value.length === 0 || extCidr.value.length === 0);
+
+ return (errorCheck || emptyCheck);
+ }, [extName, extDesc, extCidr]);
+
+ React.useEffect(() => {
+ if (selectedExternal) {
+ setExtName({ value: selectedExternal.name, error: false });
+ setExtDesc({ value: selectedExternal.desc, error: false });
+ setExtCidr({ value: selectedExternal.cidr, error: false });
+ } else {
+ handleClose();
+
+ setExtName({ value: "", error: false });
+ setExtDesc({ value: "", error: false });
+ setExtCidr({ value: "", error: false });
+ }
+ }, [selectedExternal, handleClose]);
+
+ return (
+
+
+
+ );
+}
diff --git a/ui/src/features/configure/externals/subnets/subnets.jsx b/ui/src/features/configure/externals/subnets/subnets.jsx
index 10a2545..a647a36 100644
--- a/ui/src/features/configure/externals/subnets/subnets.jsx
+++ b/ui/src/features/configure/externals/subnets/subnets.jsx
@@ -29,17 +29,19 @@ import {
TaskAltOutlined,
CancelOutlined,
AddOutlined,
- // EditOutlined,
+ EditOutlined,
DeleteOutline,
EditNoteOutlined
} from "@mui/icons-material";
import {
selectViewSetting,
- updateMeAsync
+ updateMeAsync,
+ getAdminStatus
} from "../../../ipam/ipamSlice";
import AddExtSubnet from "./utils/addSubnet";
+import EditExtSubnet from "./utils/editSubnet";
import DeleteExtSubnet from "./utils/deleteSubnet";
import ManageExtEndpoints from "./utils/manageEndpoints";
@@ -59,6 +61,7 @@ function HeaderMenu(props) {
selectedExternal,
selectedSubnet,
setAddExtSubOpen,
+ setEditExtSubOpen,
setDelExtSubOpen,
setManExtEndOpen,
saving,
@@ -72,6 +75,7 @@ function HeaderMenu(props) {
const menuRef = React.useRef(null);
+ const isAdmin = useSelector(getAdminStatus);
const viewSetting = useSelector(state => selectViewSetting(state, setting));
const onClick = () => {
@@ -83,6 +87,11 @@ function HeaderMenu(props) {
setMenuOpen(false);
}
+ const onEditExtSub = () => {
+ setEditExtSubOpen(true);
+ setMenuOpen(false);
+ }
+
const onDelExtSub = () => {
setDelExtSubOpen(true);
setMenuOpen(false);
@@ -183,25 +192,25 @@ function HeaderMenu(props) {
>
- {/*