mirrors/netbird-dashboard
1
0
Fork 0
mirror of https://github.com/netbirdio/dashboard.git synced 2026-01-26 01:21:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add support to network routes with peer group (#275)

Browse Source 
support to routes with peer group
updated the view logic to support the new type
updated peer view as well
for now, we are supporting a single group, but that can be extended
This commit is contained in:
Sarooj bukhari
2023-10-04 14:37:23 +05:00
committed by GitHub
parent 303d51eff8
commit 3f854b01a0
12 changed files with 1132 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
src/components/PeerUpdate.tsx
View File

@@ -35,6 +35,7 @@ import {
LockOutlined,
EditOutlined,
ExclamationCircleOutlined,
ExclamationCircleFilled,
} from "@ant-design/icons";
import { RuleObject } from "antd/lib/form";
import { useGetTokenSilently } from "../utils/token";
@@ -145,10 +146,22 @@ const PeerUpdate = (props: any) => {
useEffect(() => {
setPeerRoutes([]);
const temp: any[] = [];
if (peer && peer.groups) {
peer?.groups?.forEach((pg: any) => {
routes.forEach((route: any) => {
if (route.peer_groups?.includes(pg.id)) {
temp.push(route);
}
});
});
}
const filterPeerRoutes: any = routes.filter(
(route) => route.peer === peer.id
);
setPeerRoutes(filterPeerRoutes);
let mergeArr: any = [...filterPeerRoutes, ...temp];
setPeerRoutes(mergeArr);
const filterNotPeerRoutes: any = routes.filter(
(route) => route.peer !== peer.id
);
@@ -180,11 +193,13 @@ const PeerUpdate = (props: any) => {
useEffect(() => {}, [users]);
const routeAddAllowed = (os: string): boolean => {
return os !== ""
&& !os.toLowerCase().startsWith("darwin")
&& !os.toLowerCase().startsWith("windows")
&& !os.toLowerCase().startsWith("android")
}
return (
os !== "" &&
!os.toLowerCase().startsWith("darwin") &&
!os.toLowerCase().startsWith("windows") &&
!os.toLowerCase().startsWith("android")
);
};
const toggleEditName = (status: boolean, value?: string) => {
setEditName(status);
@@ -396,13 +411,13 @@ const PeerUpdate = (props: any) => {
const style = { marginTop: 85 };
if (savedGroups.loading) {
message.loading({
content: "Updating peer groups...",
content: "Updating peer group...",
key: saveGroupsKey,
style,
});
} else if (savedGroups.success) {
message.success({
content: "Peer groups have been successfully updated.",
content: "Peer group have been successfully updated.",
key: saveGroupsKey,
duration: 2,
style,
@@ -415,7 +430,7 @@ const PeerUpdate = (props: any) => {
} else if (savedGroups.error) {
message.error({
content:
"Failed to update peer groups. You might not have enough permissions.",
"Failed to update peer group. You might not have enough permissions.",
key: saveGroupsKey,
duration: 2,
style,
@@ -659,6 +674,48 @@ const PeerUpdate = (props: any) => {
}
}, [deletedRoute]);
const renderGroupRouting = (rowGroups: string[] | null) => {
let groupsMap = new Map<string, Group>();
groups.forEach((g) => {
groupsMap.set(g.id!, g);
});
let displayGroups: Group[] = [];
if (rowGroups) {
displayGroups = rowGroups
.filter((g) => groupsMap.get(g))
.map((g) => groupsMap.get(g)!);
}
const groupToCompare =
peer &&
peer.groups &&
peer?.groups.map((element1) => {
return element1.id;
});
return (
<div className="gp-main-wrapper">
{displayGroups &&
displayGroups.length > 0 &&
displayGroups.map((group) => {
if (group.id && !groupToCompare?.includes(group?.id)) {
return null;
}
return (
<div className="g-r-wrapper">
<span className="f-r-name">
<Tag color={"blue"} style={{ marginRight: 3 }}>
{group.name}
</Tag>
</span>{" "}
</div>
);
})}
</div>
);
};
return (
<>
{peer && (
@@ -972,133 +1029,151 @@ const PeerUpdate = (props: any) => {
{/* --- */}
{!isGroupUpdateView && (
<>
{routeAddAllowed(peer.os) &&
<Card
bordered={true}
// loading={loading}ƒ
style={{ marginBottom: "7px" }}
>
<div style={{ maxWidth: "800px" }}>
<Paragraph
style={{
textAlign: "left",
whiteSpace: "pre-line",
fontSize: "16px",
fontWeight: "500",
}}
>
Network routes
</Paragraph>
<Row
gutter={21}
style={{ marginTop: "-16px", marginBottom: "10px" }}
>
<Col
xs={24}
sm={24}
md={20}
lg={20}
xl={20}
xxl={20}
span={20}
{routeAddAllowed(peer.os) && (
<Card
bordered={true}
// loading={loading}ƒ
style={{ marginBottom: "7px" }}
>
<div style={{ maxWidth: "800px" }}>
<Paragraph
style={{
textAlign: "left",
whiteSpace: "pre-line",
fontSize: "16px",
fontWeight: "500",
}}
>
<Paragraph
type={"secondary"}
style={{ textAlign: "left", whiteSpace: "pre-line" }}
Network routes
</Paragraph>
<Row
gutter={21}
style={{ marginTop: "-16px", marginBottom: "10px" }}
>
<Col
xs={24}
sm={24}
md={20}
lg={20}
xl={20}
xxl={20}
span={20}
>
Access other networks without installing NetBird on
every resource.
</Paragraph>
</Col>
<Col
xs={24}
sm={24}
md={1}
lg={1}
xl={1}
xxl={1}
span={1}
style={{ marginTop: "-16px" }}
>
{peerRoutes && peerRoutes.length > 0 && (
<Paragraph
type={"secondary"}
style={{ textAlign: "left", whiteSpace: "pre-line" }}
>
Access other networks without installing NetBird on
every resource.
</Paragraph>
</Col>
<Col
xs={24}
sm={24}
md={1}
lg={1}
xl={1}
xxl={1}
span={1}
style={{ marginTop: "-16px" }}
>
{peerRoutes && peerRoutes.length > 0 && (
<Button type="primary" onClick={onClickAddNewRoute}>
Add route
</Button>
)}
</Col>
</Row>
{peerRoutes && peerRoutes.length > 0 && (
<Table
size={"small"}
style={{ marginTop: "-10px" }}
showHeader={false}
scroll={{ x: 800 }}
pagination={false}
dataSource={peerRoutes}
>
<Column title="Name" dataIndex="network_id" />
<Column title="Name" dataIndex="network" />
<Column
title="enabled"
dataIndex="network"
render={(e, record: any, index) => {
return record.peer_groups ? (
renderGroupRouting(record.peer_groups)
) : (
<>
<Switch
defaultChecked={record.enabled}
size="small"
onChange={(checked) =>
onRouteEnableChange(checked, record)
}
/>
</>
);
}}
/>
<Column
align="right"
render={(text, record: any, index) => {
return record.peer_groups ? (
<Tooltip
color="#fff"
overlayClassName="peer-avail-tooltip"
title={`Peer "${formPeer.name}" is a part of a group used in a network route.
To remove this peer from the network route, you need to disassociate
this peer from the groups used in this route.`}
>
<Button type={"text"} disabled={true}>
Delete
</Button>
</Tooltip>
) : (
<Button
danger={true}
type={"text"}
onClick={() => {
showConfirmDelete(
record.id,
record.network_id
);
}}
>
Delete
</Button>
);
}}
/>
</Table>
)}
<Divider style={{ marginTop: "-12px" }}></Divider>
{(peerRoutes === null || peerRoutes.length === 0) && (
<Space
direction="vertical"
size="small"
align="start"
style={{
display: "flex",
padding: "35px 0px",
marginTop: "-40px",
justifyContent: "center",
}}
>
<Paragraph
style={{ textAlign: "start", whiteSpace: "pre-line" }}
>
You don't have any routes yet
</Paragraph>
<Button type="primary" onClick={onClickAddNewRoute}>
Add route
</Button>
)}
</Col>
</Row>
{peerRoutes && peerRoutes.length > 0 && (
<Table
size={"small"}
style={{ marginTop: "-10px" }}
showHeader={false}
scroll={{ x: 800 }}
pagination={false}
dataSource={peerRoutes}
>
<Column title="Name" dataIndex="network_id" />
<Column title="Name" dataIndex="network" />
<Column
title="enabled"
dataIndex="network"
render={(e, record: any, index) => {
return (
<>
<Switch
defaultChecked={record.enabled}
size="small"
onChange={(checked) =>
onRouteEnableChange(checked, record)
}
/>
</>
);
}}
/>
<Column
align="right"
render={(text, record: any, index) => {
return (
<Button
danger={true}
type={"text"}
onClick={() => {
showConfirmDelete(record.id, record.network_id);
}}
>
Delete
</Button>
);
}}
/>
</Table>
)}
<Divider style={{ marginTop: "-12px" }}></Divider>
{(peerRoutes === null || peerRoutes.length === 0) && (
<Space
direction="vertical"
size="small"
align="start"
style={{
display: "flex",
padding: "35px 0px",
marginTop: "-40px",
justifyContent: "center",
}}
>
<Paragraph
style={{ textAlign: "start", whiteSpace: "pre-line" }}
>
You don't have any routes yet
</Paragraph>
<Button type="primary" onClick={onClickAddNewRoute}>
Add route
</Button>
</Space>
)}
</div>
</Card>}
</Space>
)}
</div>
</Card>
)}
<Card bordered={true} style={{ marginBottom: "50px" }}>
<Col span={24}>

240
src/components/RouteAddNew.tsx
View File

@@ -17,7 +17,9 @@ import {
Switch,
Modal,
Typography,
Tabs,
} from "antd";
import type { TabsProps } from "antd";
import CreatableSelect from "react-select/creatable";
import { Route, RouteToSave } from "../store/route/types";
import { Header } from "antd/es/layout/layout";
@@ -38,6 +40,7 @@ const { Panel } = Collapse;
interface FormRoute extends Route {}
const RouteAddNew = (selectedPeer: any) => {
const [activeTab, setActiveTab] = useState<string | null>(null);
const {
blueTagRender,
handleChangeTags,
@@ -75,6 +78,10 @@ const RouteAddNew = (selectedPeer: any) => {
const [peerNameToIP, peerIPToName, peerIPToID] = initPeerMaps(peers);
const [newRoute, setNewRoute] = useState(false);
useEffect(() => {
if (setupNewRouteVisible) setActiveTab("routingPeer");
}, [setupNewRouteVisible]);
useEffect(() => {
if (editName)
inputNameRef.current!.focus({
@@ -159,6 +166,12 @@ const RouteAddNew = (selectedPeer: any) => {
}
const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
if (inputRoute.peer_groups) {
inputRoute = {
...inputRoute,
peer_groups: [inputRoute.peer_groups[inputRoute.peer_groups.length - 1]],
};
}
let peerIDList = inputRoute.peer.split(routePeerSeparator);
let peerID: string;
if (peerIDList.length === 1) {
@@ -175,24 +188,70 @@ const RouteAddNew = (selectedPeer: any) => {
inputRoute.groups
);
return {
const payload = {
id: inputRoute.id,
network: inputRoute.network,
network_id: inputRoute.network_id,
description: inputRoute.description,
peer: peerID,
enabled: inputRoute.enabled,
masquerade: inputRoute.masquerade,
metric: inputRoute.metric,
groups: existingGroups,
groupsToCreate: groupsToCreate,
} as RouteToSave;
if (activeTab === "routingPeer") {
let pay = { ...payload, peer: peerID };
return pay;
}
if (activeTab === "groupOfPeers") {
if (inputRoute.peer_groups) {
let [currentPeersGroup, peerGroupsToCreate] =
getExistingAndToCreateGroupsLists(inputRoute.peer_groups);
let pay = {
...payload,
peer_groups: currentPeersGroup,
peerGroupsToCreate: peerGroupsToCreate,
};
return pay;
}
}
return payload;
};
const handleFormSubmit = () => {
form
.validateFields()
.then(() => {
const t = routes.filter((route) => {
if (
route.network_id === formRoute.network_id &&
route.network === formRoute.network
) {
return route;
}
});
if (
formRoute.peer_groups &&
formRoute.peer_groups.length > 0 &&
t &&
t.length > 0
) {
const style = { marginTop: 85 };
const duplicateNetworkIdKey = "duplicateKey";
return message.error({
content:
"A route with this network identifier and network range already exists. Please use a different network identifier or network range.",
key: duplicateNetworkIdKey,
duration: 5,
style,
});
}
if (!setupNewRouteHA || formRoute.peer != "") {
const routeToSave = createRouteToSave(formRoute);
dispatch(
@@ -243,6 +302,7 @@ const RouteAddNew = (selectedPeer: any) => {
const onCancel = () => {
if (savedRoute.loading) return;
setActiveTab(null);
setEditName(false);
dispatch(
routeActions.setRoute({
@@ -254,6 +314,7 @@ const RouteAddNew = (selectedPeer: any) => {
masquerade: false,
enabled: true,
groups: [],
peer_groups: [],
} as Route)
);
setVisibleNewRoute(false);
@@ -300,8 +361,15 @@ const RouteAddNew = (selectedPeer: any) => {
return Promise.resolve();
};
const peerGroupsValidaton = (_: RuleObject, value: string) => {
if (value.length < 1) {
return Promise.reject(new Error("Please select a peer group"));
}
return Promise.resolve();
};
const selectPreValidator = (obj: RuleObject, value: string[]) => {
if (setupNewRouteHA && formRoute.peer == "") {
if (setupNewRouteHA && formRoute.peer === "") {
let [, newGroups] = getExistingAndToCreateGroupsLists(value);
if (newGroups.length > 0) {
return Promise.reject(
@@ -361,56 +429,95 @@ const RouteAddNew = (selectedPeer: any) => {
}
};
const styleNotification = { marginTop: 85 };
const onTabChange = (key: string) => {
setActiveTab(key);
};
const saveKey = "saving";
useEffect(() => {
if (savedRoute.loading) {
message.loading({
content: "Saving...",
key: saveKey,
duration: 0,
style: styleNotification,
const handleSingleChangeTags = (values: any) => {
const lastValue = values[values.length - 1];
if (values.length > 0) {
form.setFieldsValue({
peer_groups: [lastValue],
});
} else if (savedRoute.success) {
message.success({
content: "Route has been successfully added.",
key: saveKey,
duration: 2,
style: styleNotification,
});
dispatch(routeActions.setSetupNewRouteVisible(false));
dispatch(routeActions.setSetupEditRouteVisible(false));
dispatch(routeActions.setSetupEditRoutePeerVisible(false));
dispatch(routeActions.setSavedRoute({ ...savedRoute, success: false }));
dispatch(routeActions.resetSavedRoute(null));
} else if (savedRoute.error) {
let errorMsg = "Failed to update network route";
switch (savedRoute.error.statusCode) {
case 403:
errorMsg =
"Failed to update network route. You might not have enough permissions.";
break;
default:
errorMsg = savedRoute.error.data.message
? savedRoute.error.data.message
: errorMsg;
break;
}
message.error({
content: errorMsg,
key: saveKey,
duration: 5,
style: styleNotification,
});
dispatch(routeActions.setSavedRoute({ ...savedRoute, error: null }));
dispatch(routeActions.resetSavedRoute(null));
}
}, [savedRoute]);
};
const items: TabsProps["items"] = [
{
key: "routingPeer",
label: "Routing Peer",
children: (
<>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign a peer as a routing peer for the Network CIDR
</Paragraph>
{activeTab === "routingPeer" && (
<Form.Item name="peer" rules={[{ validator: peerValidator }]}>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Select Peer"
dropdownRender={peerDropDownRender}
options={options}
allowClear={true}
disabled={!!selectedPeer.selectedPeer}
/>
</Form.Item>
)}{" "}
</>
),
},
{
key: "groupOfPeers",
label: "Peer group",
children: (
<>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign peer group with Linux machines to be used as routing peers
</Paragraph>
{activeTab === "groupOfPeers" && (
<Form.Item
name="peer_groups"
rules={[{ validator: peerGroupsValidaton }]}
>
<Select
mode="tags"
style={{ width: "100%" }}
tagRender={blueTagRender}
onChange={handleSingleChangeTags}
dropdownRender={dropDownRender}
optionFilterProp="serchValue"
>
{tagGroups.map((m, index) => (
<Option key={index} value={m.id} serchValue={m.name}>
{optionRender(m.name, m.id)}
</Option>
))}
</Select>
</Form.Item>
)}
</>
),
},
];
return (
<>
{route && (
{route && setupNewRouteVisible && (
<Modal
open={setupNewRouteVisible}
onCancel={onCancel}
@@ -558,7 +665,7 @@ const RouteAddNew = (selectedPeer: any) => {
marginBottom: "5px",
}}
>
Add a unique cryptographic key that is assigned
Add a unique network identifier that is assigned
to each device
</Paragraph>
<Form.Item
@@ -667,36 +774,15 @@ const RouteAddNew = (selectedPeer: any) => {
{!!!selectedPeer.selectedPeer && (
<Col span={24}>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
Routing Peer
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign a peer as a routing peer for the Network CIDR
</Paragraph>
<Form.Item name="peer" rules={[{ validator: peerValidator }]}>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Select Peer"
dropdownRender={peerDropDownRender}
options={options}
allowClear={true}
disabled={!!selectedPeer.selectedPeer}
{activeTab ? (
<Tabs
defaultActiveKey={activeTab}
items={items}
onChange={onTabChange}
/>
</Form.Item>
) : (
""
)}
</Col>
)}
<Col span={24}>

183
src/components/RoutePeerUpdate.tsx
View File

@@ -17,10 +17,13 @@ import {
Switch,
Card,
Typography,
Tabs,
} from "antd";
import type { TabsProps } from "antd";
import { Route, RouteToSave } from "../store/route/types";
import { Header } from "antd/es/layout/layout";
import { RuleObject } from "antd/lib/form";
import { isEmpty } from "lodash";
import {
initPeerMaps,
peerToPeerIP,
@@ -61,6 +64,16 @@ const RoutePeerUpdate = () => {
const [form] = Form.useForm();
const inputDescriptionRef = useRef<any>(null);
const [peerNameToIP, peerIPToName, peerIPToID] = initPeerMaps(peers);
const [activeTab, setActiveTab] = useState<string | null>(null);
useEffect(() => {
if (!isEmpty(formRoute))
if (formRoute.peer_groups) {
setActiveTab("groupOfPeers");
} else {
setActiveTab("routingPeer");
}
}, [formRoute]);
useEffect(() => {
if (editDescription)
@@ -100,7 +113,25 @@ const RoutePeerUpdate = () => {
}
});
const handleSingleChangeTags = (values: any) => {
const lastValue = values[values.length - 1];
if (values.length > 0) {
form.setFieldsValue({
peer_groups: [lastValue],
});
}
};
const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
if (inputRoute.peer_groups) {
inputRoute = {
...inputRoute,
peer_groups: [
inputRoute.peer_groups[inputRoute.peer_groups.length - 1],
],
};
}
let peerIDList = inputRoute.peer.split(routePeerSeparator);
let peerID: string;
if (peerIDList.length === 1) {
@@ -116,18 +147,38 @@ const RoutePeerUpdate = () => {
inputRoute.groups
);
return {
const payload = {
id: inputRoute.id,
network: inputRoute.network,
network_id: inputRoute.network_id,
description: inputRoute.description,
peer: peerID,
enabled: inputRoute.enabled,
masquerade: inputRoute.masquerade,
metric: inputRoute.metric,
groups: existingGroups,
groupsToCreate: groupsToCreate,
} as RouteToSave;
if (activeTab === "routingPeer") {
let pay = { ...payload, peer: peerID };
return pay;
}
if (activeTab === "groupOfPeers") {
if (inputRoute.peer_groups) {
let [currentPeersGroup, peerGroupsToCreate] =
getExistingAndToCreateGroupsLists(inputRoute.peer_groups);
let pay = {
...payload,
peer_groups: currentPeersGroup,
peerGroupsToCreate: peerGroupsToCreate,
};
return pay;
}
}
return payload;
};
const handleFormSubmit = () => {
@@ -165,6 +216,7 @@ const RoutePeerUpdate = () => {
masquerade: false,
enabled: true,
groups: [],
peer_groups: [],
} as Route)
);
setVisibleNewRoute(false);
@@ -269,6 +321,95 @@ const RoutePeerUpdate = () => {
}
}, [savedRoute]);
const onTabChange = (key: string) => {
console.log(key);
// setActiveTab(key);
};
const items: TabsProps["items"] = [
{
key: "routingPeer",
label: "Routing Peer",
disabled: true,
children: (
<>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign a peer as a routing peer for the Network CIDR
</Paragraph>
<Form.Item
name="peer"
rules={[
{
required: true,
message: "Please select routing one peer",
},
]}
style={{ maxWidth: "400px" }}
>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Select Peer"
dropdownRender={peerDropDownRender}
options={options}
allowClear={true}
/>
</Form.Item>
</>
),
},
{
key: "groupOfPeers",
label: "Peer group",
disabled: true,
children: (
<>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign peer group with Linux machines to be used as routing peers
</Paragraph>
<Form.Item
name="peer_groups"
rules={[
{
required: true,
message: "Please select peer group",
},
]}
>
<Select
mode="tags"
style={{ maxWidth: "400px" }}
tagRender={blueTagRender}
onChange={handleSingleChangeTags}
dropdownRender={dropDownRender}
optionFilterProp="serchValue"
>
{tagGroups.map((m, index) => (
<Option key={index} value={m.id} serchValue={m.name}>
{optionRender(m.name, m.id)}
</Option>
))}
</Select>
</Form.Item>
</>
),
},
];
return (
<>
<Container style={{ paddingTop: "40px", paddingBottom: "50px" }}>
@@ -409,39 +550,13 @@ const RoutePeerUpdate = () => {
</Col>
<Col span={24}>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
Routing Peer
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign a peer as a routing peer for the Network CIDR
</Paragraph>
<Form.Item
name="peer"
rules={[{ validator: peerValidator }]}
style={{ maxWidth: "400px" }}
>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Select Peer"
dropdownRender={peerDropDownRender}
options={options}
allowClear={true}
{activeTab && (
<Tabs
defaultActiveKey={activeTab}
items={items}
onChange={onTabChange}
/>
</Form.Item>
)}
</Col>
<Col span={24}>
<label

219
src/components/RouteUpdate.tsx
View File

@@ -110,6 +110,14 @@ const RouteAddNew = () => {
});
const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
if (inputRoute.peer_groups) {
inputRoute = {
...inputRoute,
peer_groups: [
inputRoute.peer_groups[inputRoute.peer_groups.length - 1],
],
};
}
let peerIDList = inputRoute.peer.split(routePeerSeparator);
let peerID: string;
if (peerIDList.length === 1) {
@@ -126,20 +134,47 @@ const RouteAddNew = () => {
inputRoute.groups
);
return {
const payload = {
id: inputRoute.id,
network: inputRoute.network,
network_id: inputRoute.network_id,
description: inputRoute.description,
peer: peerID,
enabled: inputRoute.enabled,
masquerade: inputRoute.masquerade,
metric: inputRoute.metric,
groups: existingGroups,
groupsToCreate: groupsToCreate,
} as RouteToSave;
if (inputRoute.peer_groups) {
let [currentPeersGroup, peerGroupsToCreate] =
getExistingAndToCreateGroupsLists(inputRoute.peer_groups);
let pay = {
...payload,
peer_groups: currentPeersGroup,
peerGroupsToCreate: peerGroupsToCreate,
};
return pay;
}
if (inputRoute.peer) {
let pay = { ...payload, peer: peerID };
return pay;
}
return payload;
};
const handleSingleChangeTags = (values: any) => {
const lastValue = values[values.length - 1];
if (values.length > 0) {
form.setFieldsValue({
peer_groups: [lastValue],
});
}
};
const handleFormSubmit = () => {
form
.validateFields()
@@ -232,7 +267,7 @@ const RouteAddNew = () => {
};
const selectPreValidator = (obj: RuleObject, value: string[]) => {
if (setupNewRouteHA && formRoute.peer == "") {
if (setupNewRouteHA && formRoute.peer == "" && !formRoute.peer_groups) {
let [, newGroups] = getExistingAndToCreateGroupsLists(value);
if (newGroups.length > 0) {
return Promise.reject(
@@ -247,53 +282,6 @@ const RouteAddNew = () => {
return selectValidator(obj, value);
};
const styleNotification = { marginTop: 85 };
const saveKey = "saving";
useEffect(() => {
if (savedRoute.loading) {
message.loading({
content: "Saving...",
key: saveKey,
duration: 0,
style: styleNotification,
});
} else if (savedRoute.success) {
message.success({
content: "Route has been successfully added.",
key: saveKey,
duration: 2,
style: styleNotification,
});
dispatch(routeActions.setSetupNewRouteVisible(false));
dispatch(routeActions.setSetupEditRouteVisible(false));
dispatch(routeActions.setSetupEditRoutePeerVisible(false));
dispatch(routeActions.setSavedRoute({ ...savedRoute, success: false }));
dispatch(routeActions.resetSavedRoute(null));
} else if (savedRoute.error) {
let errorMsg = "Failed to update network route";
switch (savedRoute.error.statusCode) {
case 403:
errorMsg =
"Failed to update network route. You might not have enough permissions.";
break;
default:
errorMsg = savedRoute.error.data.message
? savedRoute.error.data.message
: errorMsg;
break;
}
message.error({
content: errorMsg,
key: saveKey,
duration: 5,
style: styleNotification,
});
dispatch(routeActions.setSavedRoute({ ...savedRoute, error: null }));
dispatch(routeActions.resetSavedRoute(null));
}
}, [savedRoute]);
return (
<>
{route && (
@@ -310,7 +298,7 @@ const RouteAddNew = () => {
disabled={savedRoute.loading}
onClick={handleFormSubmit}
>
Add route
{formRoute.peer_groups ? "Save" : "Add route"}
</Button>
</Space>
}
@@ -337,7 +325,9 @@ const RouteAddNew = () => {
fontWeight: 500,
}}
>
Add new routing peer
{formRoute.peer_groups
? "Configure peer group"
: "Add new routing peer"}
</Paragraph>
<Paragraph
type={"secondary"}
@@ -350,8 +340,9 @@ const RouteAddNew = () => {
marginBottom: "4px",
}}
>
When you add multiple routing peers, NetBird enables high
availability
{formRoute.peer_groups
? "Add peer group with multiple peers to enable high availability"
: "When you add multiple routing peers, NetBird enables high availability"}
</Paragraph>
<Row align="top">
@@ -377,7 +368,6 @@ const RouteAddNew = () => {
Network name and CIDR that you are adding the route to
</Paragraph>
<Form.Item
// name="network_id"
label=""
rules={[
{
@@ -411,36 +401,95 @@ const RouteAddNew = () => {
</Col>
<Col span={24}>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
Routing Peer
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign a routing peer to the network. This peer has to reside
in the network
</Paragraph>
<Form.Item name="peer" rules={[{ validator: peerValidator }]}>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Select Peer"
dropdownRender={peerDropDownRender}
options={options}
allowClear={true}
/>
</Form.Item>
{formRoute.peer_groups ? (
<>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
Peer group
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign peer group with Linux machines to be used as
routing peers
</Paragraph>
<Form.Item
name="peer_groups"
rules={[
{
required: true,
message: "Please select peer group",
},
]}
>
<Select
mode="tags"
style={{ maxWidth: "100%" }}
tagRender={blueTagRender}
onChange={handleSingleChangeTags}
dropdownRender={dropDownRender}
optionFilterProp="serchValue"
>
{tagGroups.map((m, index) => (
<Option key={index} value={m.id} serchValue={m.name}>
{optionRender(m.name, m.id)}
</Option>
))}
</Select>
</Form.Item>
</>
) : (
<>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
Routing Peer
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Assign a routing peer to the network. This peer has to
reside in the network
</Paragraph>
<Form.Item
name="peer"
rules={[
{
required: true,
message: "Please select routing one peer",
},
]}
>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Select Peer"
dropdownRender={peerDropDownRender}
options={options}
allowClear={true}
/>
</Form.Item>
</>
)}
</Col>
<Col span={24}>
<label

2
src/components/SetupKeyEdit.tsx
View File

@@ -364,7 +364,7 @@ const SetupKeyNew = (props: any) => {
<Tooltip title="Peers that are offline for over 10 minutes will be removed automatically">
<Tag>
<Text type="secondary" style={{ fontSize: 10 }}>
Ephemeral
ephemeral
</Text>
</Tag>
</Tooltip>

71
src/index.css
View File

@@ -513,13 +513,15 @@ ul.ant-list-items {
box-shadow: none !important;
}
.d-none{
display: none!important;
.d-none {
display: none !important;
}
.nohover {
background: transparent!important;
cursor: text;
background: transparent !important;
cursor: text;
}
.emp-wrapper {
display: flex;
align-items: center;
@@ -528,4 +530,65 @@ ul.ant-list-items {
.emp-wrapper p {
margin: 0;
}
.g-r-wrapper {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.gp-main-wrapper .g-r-wrapper {
margin: 0;
}
.gp-main-wrapper {
display: flex;
gap: 5px;
align-items: center;
}
.availtooltip a {
padding: 5px 0 0;
display: inline-block;
font-size: 14px;
}
.availtooltip {
padding: 5px;
}
.availtooltip p {
color: #000;
font-size: 13.5px;
margin: 0;
}
.avail-inner {
display: flex;
align-items: flex-start;
gap: 10px;
}
.avail-inner span {
color: #1890FF;
font-size: 24px;
}
.avail-icon {
font-size: 24px;
}
.peer-avail-tooltip .ant-tooltip-inner {
color: #000;
font-size: 14px;
line-height: 24px;
padding: 25px;
}
.peer-avail-tooltip {
min-width: 400px;
}
.info-icon {
font-size: 22px;
color: #FD9349;
}

23
src/store/route/sagas.ts
View File

@@ -56,12 +56,16 @@ export function* saveRoute(
);
const routeToSave = action.payload.payload;
let groupsToCreate = routeToSave.groupsToCreate;
if (!groupsToCreate) {
groupsToCreate = [];
}
let peerGroupsToCreate = routeToSave.peerGroupsToCreate;
if (!peerGroupsToCreate) {
peerGroupsToCreate = [];
}
// first, create groups that were newly added by user
const responsesGroup = yield all(
groupsToCreate.map((g) =>
@@ -72,12 +76,28 @@ export function* saveRoute(
)
);
const responsesPeerGroup = yield all(
peerGroupsToCreate.map((g) =>
call(serviceGroup.createGroup, {
getAccessTokenSilently: action.payload.getAccessTokenSilently,
payload: { name: g },
})
)
);
const resGroups = (responsesGroup as ApiResponse<Group>[])
.filter((r) => r.statusCode === 200)
.map((g) => g.body as Group)
.map((g) => g.id);
const newGroups = [...routeToSave.groups, ...resGroups];
const resPeersGroups = (responsesPeerGroup as ApiResponse<Group>[])
.filter((r) => r.statusCode === 200)
.map((g) => g.body as Group)
.map((g) => g.id);
const newPeerGroups = [...routeToSave?.peer_groups || [], ...resPeersGroups];
const payloadToSave = {
getAccessTokenSilently: action.payload.getAccessTokenSilently,
payload: {
@@ -89,6 +109,7 @@ export function* saveRoute(
network: routeToSave.network,
network_id: routeToSave.network_id,
peer: routeToSave.peer,
peer_groups: newPeerGroups,
groups: newGroups,
} as Route,
};

24
src/store/route/types.ts
View File

@@ -1,18 +1,22 @@
export interface Route {
id?: string | null
description: string
enabled: boolean
peer: string
network: string
network_id: string
network_type?: string
metric?: number
masquerade: boolean
groups: string[]
id?: string | null;
description: string;
enabled: boolean;
peer: string;
network: string;
network_id: string;
network_type?: string;
metric?: number;
masquerade: boolean;
groups: string[];
peer_groups?: string[];
routesGroups?: string[];
groupedRoutes?: Array<any>;
}
export interface RouteToSave extends Route
{
groupsToCreate: string[]
peerGroupsToCreate: string[]
}

180
src/utils/routes.ts
View File

@@ -1,95 +1,119 @@
import {Peer, PeerIPToID, PeerIPToName, PeerNameToIP} from "../store/peer/types";
import {Route} from "../store/route/types";
import {
Peer,
PeerIPToID,
PeerIPToName,
PeerNameToIP,
} from "../store/peer/types";
import { Route } from "../store/route/types";
export const routePeerSeparator = " - "
export const routePeerSeparator = " - ";
export const masqueradeDisabledMSG = "Enabling this option hides other NetBird network IPs behind the routing peer local address when accessing the target Network CIDR. This option allows access to your private networks without configuring routes on your local routers or other devices."
export const masqueradeDisabledMSG =
"Enabling this option hides other NetBird network IPs behind the routing peer local address when accessing the target Network CIDR. This option allows access to your private networks without configuring routes on your local routers or other devices.";
export const masqueradeEnabledMSG = "Disabling this option stops hiding all traffic coming from other NetBird peers behind the routing peer local address when accessing the target Network CIDR. You will need to configure routes for your NetBird network pointing to your routing peer on your local routers or other devices."
export const masqueradeEnabledMSG =
"Disabling this option stops hiding all traffic coming from other NetBird peers behind the routing peer local address when accessing the target Network CIDR. You will need to configure routes for your NetBird network pointing to your routing peer on your local routers or other devices.";
export const peerToPeerIP = (name: string, ip: string): string => {
return name + routePeerSeparator + ip
}
return name + routePeerSeparator + ip;
};
export const initPeerMaps = (peers: Peer[]): [PeerNameToIP, PeerIPToName, PeerIPToID] => {
let peerNameToIP = {} as PeerNameToIP
let peerIPToName = {} as PeerIPToName
let peerIPToID = {} as PeerIPToID
peers.forEach((p) => {
peerNameToIP[p.name] = p.ip
peerIPToName[p.ip] = p.name
peerIPToID[p.ip] = p.id ? p.id : ""
})
return [peerNameToIP, peerIPToName, peerIPToID]
}
export const initPeerMaps = (
peers: Peer[]
): [PeerNameToIP, PeerIPToName, PeerIPToID] => {
let peerNameToIP = {} as PeerNameToIP;
let peerIPToName = {} as PeerIPToName;
let peerIPToID = {} as PeerIPToID;
peers.forEach((p) => {
peerNameToIP[p.name] = p.ip;
peerIPToName[p.ip] = p.name;
peerIPToID[p.ip] = p.id ? p.id : "";
});
return [peerNameToIP, peerIPToName, peerIPToID];
};
export interface RouteDataTable extends Route {
key: string;
peer_ip: string;
peer_name: string;
key: string;
peer_ip: string;
peer_name: string;
peer_groups: Array<string>;
}
export interface GroupedDataTable {
key: string
network_id: any
network: string
enabled: boolean
masquerade: boolean
description: string
routesCount: number
groupedRoutes: RouteDataTable[]
routesGroups: string[]
key: string;
network_id: any;
network: string;
enabled: boolean;
masquerade: boolean;
description: string;
routesCount: number;
groupedRoutes: RouteDataTable[];
routesGroups: string[];
peer_groups?: Array<string>;
}
export const transformDataTable = (routes: Route[], peers: Peer[]): RouteDataTable[] => {
export const transformDataTable = (
routes: Route[],
peers: Peer[]
): RouteDataTable[] => {
let peerMap = Object.fromEntries(peers.map((p) => [p.id, p]));
return routes.map((route) => {
return {
key: route.id,
...route,
peer: route.peer,
peer_ip: peerMap[route.peer] ? peerMap[route.peer].ip : route.peer,
peer_name: peerMap[route.peer] ? peerMap[route.peer].name : route.peer,
} as RouteDataTable;
});
};
let peerMap = Object.fromEntries(peers.map(p => [p.id, p]));
return routes.map(route => {
return {
key: route.id,
...route,
peer: route.peer,
peer_ip: peerMap[route.peer] ? peerMap[route.peer].ip : route.peer,
peer_name: peerMap[route.peer] ? peerMap[route.peer].name : route.peer,
} as RouteDataTable
export const transformGroupedDataTable = (
routes: Route[],
peers: Peer[]
): GroupedDataTable[] => {
let keySet = new Set(
routes.map((r) => {
return r.network_id + r.network;
})
}
);
export const transformGroupedDataTable = (routes: Route[], peers: Peer[]): GroupedDataTable[] => {
let keySet = new Set(routes.map(r => {
return r.network_id + r.network
}))
let groupedRoutes: GroupedDataTable[] = [];
let groupedRoutes: GroupedDataTable[] = []
keySet.forEach((p) => {
let hasEnabled = false
let lastRoute: Route
let listedRoutes: Route[] = []
let groupList: string[] = []
routes.forEach((r) => {
if (p === r.network_id + r.network) {
lastRoute = r
if (r.enabled) {
hasEnabled = true
}
listedRoutes.push(r)
groupList = groupList.concat(r.groups)
}
})
groupList = groupList.filter((value, index, arrary) => arrary.indexOf(value) === index)
let groupDataTableRoutes = transformDataTable(listedRoutes, peers)
groupedRoutes.push({
key: p.toString(),
network_id: lastRoute!.network_id,
network: lastRoute!.network,
masquerade: lastRoute!.masquerade,
description: lastRoute!.description,
enabled: hasEnabled,
routesCount: groupDataTableRoutes.length,
groupedRoutes: groupDataTableRoutes,
routesGroups: groupList,
})
})
return groupedRoutes
}
keySet.forEach((p) => {
let hasEnabled = false;
let lastRoute: Route;
let listedRoutes: Route[] = [];
let groupList: string[] = [];
routes.forEach((r) => {
if (p === r.network_id + r.network) {
lastRoute = r;
if (r.enabled) {
hasEnabled = true;
}
listedRoutes.push(r);
groupList = groupList.concat(r.groups);
}
});
groupList = groupList.filter(
(value, index, arrary) => arrary.indexOf(value) === index
);
let groupDataTableRoutes = transformDataTable(listedRoutes, peers);
const filterEnabledRoutes = groupDataTableRoutes.filter(
(route) => route.enabled
);
groupedRoutes.push({
key: p.toString(),
network_id: lastRoute!.network_id,
network: lastRoute!.network,
masquerade: lastRoute!.masquerade,
description: lastRoute!.description,
enabled: hasEnabled,
routesCount: filterEnabledRoutes.length,
groupedRoutes: groupDataTableRoutes,
routesGroups: groupList,
peer_groups: lastRoute!.peer_groups,
});
});
return groupedRoutes;
};

22
src/views/Peers.tsx
View File

@@ -248,7 +248,7 @@ export const Peers = () => {
const t = searchText
? searchText.toLowerCase().trim()
: textToSearch.toLowerCase().trim();
let f: Peer[] = filter(peers, (f: Peer) => {
let userEmail: string | null;
const u = users?.find((u) => u.id === f.user_id)?.email;
@@ -399,11 +399,7 @@ export const Peers = () => {
};
function handleSwitchSSH(record: PeerDataTable, checked: boolean) {
const peer = {
id: record.id,
ssh_enabled: checked,
name: record.name,
} as Peer;
const peer = { ...record, ssh_enabled: checked };
dispatch(
peerActions.updatePeer.request({
getAccessTokenSilently: getTokenSilently,
@@ -635,16 +631,20 @@ export const Peers = () => {
<Container style={{ paddingTop: "40px" }}>
<Row>
<Col span={24}>
<Title className="page-heading">{isAdmin ? "Peers" : "My peers"}</Title>
<Title className="page-heading">
{isAdmin ? "Peers" : "My peers"}
</Title>
{peers.length ? (
<Paragraph style={{ marginTop: "5px" }}>
{isAdmin ? "A list of all machines and devices connected to your private network. Use this view to manage peers" :
"A list of all your machines and devices that you connected to NetBird."}
{isAdmin
? "A list of all machines and devices connected to your private network. Use this view to manage peers"
: "A list of all your machines and devices that you connected to NetBird."}
</Paragraph>
) : (
<Paragraph style={{ marginTop: "5px" }} type={"secondary"}>
{isAdmin ? "A list of all machines and devices connected to your private network. Use this view to manage peers" :
"A list of all your machines and devices that you connected to NetBird."}
{isAdmin
? "A list of all machines and devices connected to your private network. Use this view to manage peers"
: "A list of all your machines and devices that you connected to NetBird."}
</Paragraph>
)}

433
src/views/Routes.tsx
View File

@@ -21,6 +21,7 @@ import {
Collapse,
Typography,
Badge,
Tooltip,
} from "antd";
import { Container } from "../components/Container";
import { useDispatch, useSelector } from "react-redux";
@@ -28,10 +29,15 @@ import { RootState } from "typesafe-actions";
import { Route, RouteToSave } from "../store/route/types";
import { actions as routeActions } from "../store/route";
import { actions as peerActions } from "../store/peer";
import { filter, sortBy } from "lodash";
import { EllipsisOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import { filter, sortBy, uniqBy } from "lodash";
import {
EllipsisOutlined,
ExclamationCircleOutlined,
ExclamationCircleFilled,
} from "@ant-design/icons";
import { storeFilterState, getFilterState } from "../utils/filterState";
import RouteAddNew from "../components/RouteAddNew";
import { Link } from "react-router-dom";
import {
GroupedDataTable,
initPeerMaps,
@@ -59,11 +65,14 @@ export const Routes = () => {
const { getTokenSilently } = useGetTokenSilently();
const dispatch = useDispatch();
const { getGroupNamesFromIDs } = useGetGroupTagHelpers();
const [isUpdating, setIsUpdating] = useState(false);
const groups = useSelector((state: RootState) => state.group.data);
const routes = useSelector((state: RootState) => state.route.data);
const failed = useSelector((state: RootState) => state.route.failed);
const loading = useSelector((state: RootState) => state.route.loading);
const route = useSelector((state: RootState) => state.route.route);
const deletedRoute = useSelector(
(state: RootState) => state.route.deletedRoute
);
@@ -76,6 +85,9 @@ export const Routes = () => {
const setupNewRouteVisible = useSelector(
(state: RootState) => state.route.setupNewRouteVisible
);
const setupEditRouteVisible = useSelector(
(state: RootState) => state.route.setupEditRouteVisible
);
const [showTutorial, setShowTutorial] = useState(true);
const [textToSearch, setTextToSearch] = useState("");
const [optionAllEnable, setOptionAllEnable] = useState("enabled");
@@ -229,7 +241,7 @@ export const Routes = () => {
useEffect(() => {
setGroupedDataTable(
filterGroupedDataTable(transformGroupedDataTable(routes, peers),"")
filterGroupedDataTable(transformGroupedDataTable(routes, peers), "")
);
}, [textToSearch, optionAllEnable]);
@@ -272,6 +284,61 @@ export const Routes = () => {
}
}, [deletedRoute]);
const styleNotification = { marginTop: 85 };
const saveKey = isUpdating ? "Updating" : "Saving";
useEffect(() => {
if (!route || setupEditRouteVisible || setupNewRouteVisible) {
if (savedRoute.loading) {
message.loading({
content: isUpdating ? "Updating..." : "Saving...",
key: saveKey,
duration: 0,
style: styleNotification,
});
} else if (savedRoute.success) {
message.success({
content: `Route has been successfully ${
isUpdating ? "updated" : "added"
}`,
key: saveKey,
duration: 2,
style: styleNotification,
});
dispatch(routeActions.setSetupNewRouteVisible(false));
dispatch(routeActions.setSetupEditRouteVisible(false));
dispatch(routeActions.setSetupEditRoutePeerVisible(false));
dispatch(routeActions.setSavedRoute({ ...savedRoute, success: false }));
dispatch(routeActions.resetSavedRoute(null));
setIsUpdating(false);
} else if (savedRoute.error) {
let errorMsg = `Failed to ${
isUpdating ? "update" : "added"
} network route`;
switch (savedRoute.error.statusCode) {
case 403:
errorMsg =
"Failed to update network route. You might not have enough permissions.";
break;
default:
errorMsg = savedRoute.error.data.message
? savedRoute.error.data.message
: errorMsg;
break;
}
message.error({
content: errorMsg,
key: saveKey,
duration: 5,
style: styleNotification,
});
dispatch(routeActions.setSavedRoute({ ...savedRoute, error: null }));
dispatch(routeActions.resetSavedRoute(null));
setIsUpdating(false);
}
}
}, [savedRoute]);
const onChangeTextToSearch = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
@@ -331,6 +398,7 @@ export const Routes = () => {
metric: 9999,
enabled: true,
groups: [],
peer_groups: [],
} as Route)
);
};
@@ -349,6 +417,7 @@ export const Routes = () => {
masquerade: selectedRoute?.masquerade,
enabled: selectedRoute?.enabled,
groups: selectedRoute?.groups,
peer_groups: selectedRoute?.peer_groups,
} as Route)
);
dispatch(routeActions.setSetupEditRoutePeerVisible(true));
@@ -370,7 +439,10 @@ export const Routes = () => {
metric: route.metric ? route.metric : 9999,
masquerade: route.masquerade,
enabled: route.enabled,
groups: route.groups,
groups: route.peer_groups
? route && route?.groupedRoutes && route?.groupedRoutes[0].groups
: route.groups,
peer_groups: route.peer_groups,
} as Route)
);
dispatch(routeActions.setSetupEditRouteVisible(true));
@@ -388,6 +460,41 @@ export const Routes = () => {
}
};
const renderGroupRouting = (rowGroups: string[] | null) => {
let groupsMap = new Map<string, Group>();
groups.forEach((g) => {
groupsMap.set(g.id!, g);
});
let displayGroups: Group[] = [];
if (rowGroups) {
displayGroups = rowGroups
.filter((g) => groupsMap.get(g))
.map((g) => groupsMap.get(g)!);
}
return (
displayGroups &&
displayGroups.length > 0 &&
displayGroups.map((group) => {
return (
<div className="g-r-wrapper">
<span className="f-r-name">
<Tag color={"blue"} style={{ marginRight: 3 }}>
{group.name}
</Tag>
</span>{" "}
<span className="f-r-count">
<Tag color={""} style={{ marginRight: 3 }}>
{group.peers_count} peers
</Tag>
</span>
</div>
);
})
);
};
const renderPopoverGroups = (
rowGroups: string[] | null,
userToAction: RouteDataTable
@@ -403,6 +510,14 @@ export const Routes = () => {
.filter((g) => groupsMap.get(g))
.map((g) => groupsMap.get(g)!);
}
if (userToAction.peer_groups) {
const groupedRoutes = [
{
groups: userToAction.groups,
},
];
userToAction = { ...userToAction, groupedRoutes: groupedRoutes };
}
let btn = (
<Button
@@ -465,12 +580,45 @@ export const Routes = () => {
};
const callback = (key: any) => {};
const availabilityTooltip = () => {
return (
<>
<div className="availtooltip">
<div className="avail-inner">
<div className="avail-icon">
<ExclamationCircleFilled />
</div>
<p className="avail-para">
To configure High Availability, you must add more peers to a group
in this route. You can do it in the Peers menu.
<br />
<Link to="/peers" className="peer-lnk">
Go to Peers
</Link>
</p>
</div>
</div>
</>
);
};
const getAccordianHeader = (record: any) => {
const selectedPeersOfGroups: any = [];
if (record.peer_groups) {
peers.forEach((peer) => {
peer.groups?.forEach((pg) => {
if (record.peer_groups.includes(pg.id)) {
selectedPeersOfGroups.push(peer);
}
});
});
}
const getUniquePeerGroups = uniqBy(selectedPeersOfGroups, "id");
return (
<div className="headerInner">
<p className="font-500">
{record.network_id}
<Badge
size={"small"}
style={{ marginLeft: "5px" }}
@@ -479,7 +627,41 @@ export const Routes = () => {
</p>
<p>{record.network}</p>
<p>
{record.routesCount > 1 ? (
{record.peer_groups ? (
getUniquePeerGroups.length > 1 ? (
<>
<Tag color="green">on</Tag>{" "}
<Button
type="link"
style={{ padding: "0" }}
onClick={(event) => setRouteAndView(record, event)}
>
Configure
</Button>
</>
) : (
<Tooltip
color="#fff"
title={availabilityTooltip}
overlayInnerStyle={{ width: "350px" }}
className="avail-tooltip"
>
<Tag color="default">
<Text type="secondary" style={{ fontSize: 12 }}>
off
</Text>
</Tag>
<Button
type="link"
style={{ padding: "0" }}
onClick={(event) => setRouteAndView(record, event)}
>
Configure
</Button>
</Tooltip>
)
) : record.routesCount > 1 ? (
<>
<Tag color="green">on</Tag>
<Button
@@ -497,6 +679,7 @@ export const Routes = () => {
off
</Text>
</Tag>
<Button
type="link"
style={{ padding: "0" }}
@@ -506,6 +689,8 @@ export const Routes = () => {
</Button>
</>
)}
{}
</p>
<p className="text-right">
<Button
@@ -526,6 +711,19 @@ export const Routes = () => {
event.preventDefault();
event.stopPropagation();
let name = selectedGroup ? selectedGroup.network_id : "";
let groupsMap = new Map<string, Group>();
groups.forEach((g) => {
groupsMap.set(g.id!, g);
});
let displayGroups: Group[] = [];
if (selectedGroup.peer_groups) {
displayGroups = selectedGroup.peer_groups
.filter((g: any) => groupsMap.get(g))
.map((g: any) => groupsMap.get(g)!);
}
confirm({
icon: <ExclamationCircleOutlined />,
title: <span className="font-500">Delete routes to network {name}</span>,
@@ -538,7 +736,19 @@ export const Routes = () => {
</Paragraph>
<Alert
message={
<>
selectedGroup.peer_groups ? (
<List
dataSource={displayGroups}
renderItem={(item: any) => (
<List.Item>
<Text strong>- {item.name}</Text>
</List.Item>
)}
bordered={false}
split={false}
itemLayout={"vertical"}
/>
) : (
<List
dataSource={selectedGroup.groupedRoutes}
renderItem={(item: any) => (
@@ -550,7 +760,7 @@ export const Routes = () => {
split={false}
itemLayout={"vertical"}
/>
</>
)
}
type="warning"
showIcon={false}
@@ -575,6 +785,10 @@ export const Routes = () => {
};
const changeRouteStatus = (record: any, checked: boolean) => {
setIsUpdating(true);
if (record.peer_groups) {
delete record.peer;
}
const updateReponse = { ...record, enabled: checked };
dispatch(
routeActions.saveRoute.request({
@@ -689,149 +903,6 @@ export const Routes = () => {
closable
/>
)}
{/* <Card bodyStyle={{ padding: 0 }}>
{!showTutorial && (
<Table
pagination={{
current: currentPage,
hideOnSinglePage: showTutorial,
disabled: showTutorial,
pageSize,
responsive: true,
showSizeChanger: false,
showTotal: (total, range) =>
`Showing ${range[0]} to ${range[1]} of ${total} routes`,
onChange: (page) => {
setCurrentPage(page);
},
}}
className={`access-control-table ${
showTutorial
? "card-table card-table-no-placeholder"
: "card-table"
}`}
showSorterTooltip={false}
scroll={{ x: true }}
loading={tableSpin(loading || loadingPeer)}
dataSource={groupedDataTable}
expandable={{
expandedRowRender,
expandRowByClick: expandRowsOnClick,
onExpandedRowsChange: (r) => {
setExpandRowsOnClick(!r.length);
},
}}
>
<Column
title={() => (
<span>
Network Identifier
<Tooltip title="You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes">
<QuestionCircleOutlined
style={{ marginLeft: "0.25em", color: "gray" }}
/>
</Tooltip>
</span>
)}
dataIndex="network_id"
onFilter={(value: string | number | boolean, record) =>
(record as any).name.includes(value)
}
defaultSortOrder="ascend"
align="center"
sorter={(a, b) =>
(a as any).network_id.localeCompare(
(b as any).network_id
)
}
render={(text, record) => {
const desc = (
record as RouteDataTable
).description.trim();
return (
<Tooltip
title={desc !== "" ? desc : "no description"}
arrowPointAtCenter
>
<Text className="font-500">{text}</Text>
</Tooltip>
);
}}
/>
<Column
title="Network Range"
dataIndex="network"
align="center"
onFilter={(value: string | number | boolean, record) =>
(record as any).network.includes(value)
}
sorter={(a, b) =>
(a as any).network.localeCompare((b as any).network)
}
// defaultSortOrder='ascend'
/>
<Column
title="Route status"
dataIndex="enabled"
align="center"
render={(text: Boolean) => {
return text ? (
<Tag color="green">enabled</Tag>
) : (
<Tag color="red">disabled</Tag>
);
}}
/>
<Column
title="Masquerade Traffic"
dataIndex="masquerade"
align="center"
render={(e, record: GroupedDataTable) => {
let toggle = (
<Switch
size={"small"}
checked={e}
onClick={(checked: boolean) => {
showConfirmEnableMasquerade(record, checked);
}}
/>
);
return (
<Tooltip title="Hides the traffic with the routing peer address">
{toggle}
</Tooltip>
);
}}
/>
<Column
title="High Availability"
align="center"
dataIndex="routesCount"
render={(count, record: RouteDataTable) => {
let tag = <Tag color="red">off</Tag>;
if (count > 1) {
tag = <Tag color="green">on</Tag>;
}
return (
<div>
{tag}
<Divider type="vertical" />
<Button
type="link"
onClick={(event) =>
setRouteAndView(record, event)
}
>
Configure
</Button>
</div>
);
}}
/>
</Table>
)}
</Card> */}
</Space>
</Col>
</Row>
@@ -896,10 +967,15 @@ export const Routes = () => {
return (
<Panel header={getAccordianHeader(record)} key={index}>
<div className="accordian-inner-header">
<p>Routing Peer</p>
<p>
{record.groupedRoutes[0].peer_groups &&
record.groupedRoutes[0].peer_groups.length > 0
? "Routing Group"
: "Routing Peer"}
</p>
<p>Metric</p>
<p>Enabled</p>
<p>Groups</p>
<p>Distribution groups</p>
</div>
{record.groupedRoutes &&
record.groupedRoutes.length &&
@@ -910,23 +986,37 @@ export const Routes = () => {
key={index2}
>
<p>
<span
className="cursor-pointer"
onClick={() => {
onClickViewRoute(route);
}}
>
{route.peer_name}
</span>
<Badge
size={"small"}
style={{ marginLeft: "5px" }}
color={
route.enabled
? "green"
: "rgb(211,211,211)"
}
></Badge>
{route.peer_groups &&
route.peer_groups.length > 0 ? (
<span
className="cursor-pointer"
onClick={() => {
onClickViewRoute(route);
}}
>
{renderGroupRouting(route.peer_groups)}
</span>
) : (
<>
<span
className="cursor-pointer"
onClick={() => {
onClickViewRoute(route);
}}
>
{route.peer_name}
</span>
<Badge
size={"small"}
style={{ marginLeft: "5px" }}
color={
route.enabled
? "green"
: "rgb(211,211,211)"
}
></Badge>
</>
)}
</p>
<p>{route.metric}</p>
<p>
@@ -966,8 +1056,9 @@ export const Routes = () => {
</div>
)}
</Container>
<RouteAddNew />
<RouteUpdate />
{setupNewRouteVisible && <RouteAddNew />}
{setupEditRouteVisible && <RouteUpdate />}
</>
) : (
<RoutePeerUpdate />

2
src/views/SetupKeys.tsx
View File

@@ -623,7 +623,7 @@ export const SetupKeys = () => {
<Tooltip title="Peers that are offline for over 10 minutes will be removed automatically">
<Tag>
<Text type="secondary" style={{ fontSize: 10 }}>
Ephemeral
ephemeral
</Text>
</Tag>
</Tooltip>