Skip to content

Commit 3f854b0

Browse files
saroojbkharisaroojbkhari
authored
Add support to network routes with peer group (#275)
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
1 parent 303d51e commit 3f854b0

File tree

12 files changed

+1132
-604
lines changed

12 files changed

+1132
-604
lines changed

‎src/components/PeerUpdate.tsx‎

Lines changed: 206 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
LockOutlined,
3636
EditOutlined,
3737
ExclamationCircleOutlined,
38+
ExclamationCircleFilled,
3839
} from "@ant-design/icons";
3940
import { RuleObject } from "antd/lib/form";
4041
import { useGetTokenSilently } from "../utils/token";
@@ -145,10 +146,22 @@ const PeerUpdate = (props: any) => {
145146

146147
useEffect(() => {
147148
setPeerRoutes([]);
149+
const temp: any[] = [];
150+
if (peer && peer.groups) {
151+
peer?.groups?.forEach((pg: any) => {
152+
routes.forEach((route: any) => {
153+
if (route.peer_groups?.includes(pg.id)) {
154+
temp.push(route);
155+
}
156+
});
157+
});
158+
}
159+
148160
const filterPeerRoutes: any = routes.filter(
149161
(route) => route.peer === peer.id
150162
);
151-
setPeerRoutes(filterPeerRoutes);
163+
let mergeArr: any = [...filterPeerRoutes, ...temp];
164+
setPeerRoutes(mergeArr);
152165
const filterNotPeerRoutes: any = routes.filter(
153166
(route) => route.peer !== peer.id
154167
);
@@ -180,11 +193,13 @@ const PeerUpdate = (props: any) => {
180193
useEffect(() => {}, [users]);
181194

182195
const routeAddAllowed = (os: string): boolean => {
183-
return os !== ""
184-
&& !os.toLowerCase().startsWith("darwin")
185-
&& !os.toLowerCase().startsWith("windows")
186-
&& !os.toLowerCase().startsWith("android")
187-
}
196+
return (
197+
os !== "" &&
198+
!os.toLowerCase().startsWith("darwin") &&
199+
!os.toLowerCase().startsWith("windows") &&
200+
!os.toLowerCase().startsWith("android")
201+
);
202+
};
188203

189204
const toggleEditName = (status: boolean, value?: string) => {
190205
setEditName(status);
@@ -396,13 +411,13 @@ const PeerUpdate = (props: any) => {
396411
const style = { marginTop: 85 };
397412
if (savedGroups.loading) {
398413
message.loading({
399-
content: "Updating peer groups...",
414+
content: "Updating peer group...",
400415
key: saveGroupsKey,
401416
style,
402417
});
403418
} else if (savedGroups.success) {
404419
message.success({
405-
content: "Peer groups have been successfully updated.",
420+
content: "Peer group have been successfully updated.",
406421
key: saveGroupsKey,
407422
duration: 2,
408423
style,
@@ -415,7 +430,7 @@ const PeerUpdate = (props: any) => {
415430
} else if (savedGroups.error) {
416431
message.error({
417432
content:
418-
"Failed to update peer groups. You might not have enough permissions.",
433+
"Failed to update peer group. You might not have enough permissions.",
419434
key: saveGroupsKey,
420435
duration: 2,
421436
style,
@@ -659,6 +674,48 @@ const PeerUpdate = (props: any) => {
659674
}
660675
}, [deletedRoute]);
661676

677+
const renderGroupRouting = (rowGroups: string[] | null) => {
678+
let groupsMap = new Map<string, Group>();
679+
groups.forEach((g) => {
680+
groupsMap.set(g.id!, g);
681+
});
682+
683+
let displayGroups: Group[] = [];
684+
if (rowGroups) {
685+
displayGroups = rowGroups
686+
.filter((g) => groupsMap.get(g))
687+
.map((g) => groupsMap.get(g)!);
688+
}
689+
690+
const groupToCompare =
691+
peer &&
692+
peer.groups &&
693+
peer?.groups.map((element1) => {
694+
return element1.id;
695+
});
696+
697+
return (
698+
<div className="gp-main-wrapper">
699+
{displayGroups &&
700+
displayGroups.length > 0 &&
701+
displayGroups.map((group) => {
702+
if (group.id && !groupToCompare?.includes(group?.id)) {
703+
return null;
704+
}
705+
return (
706+
<div className="g-r-wrapper">
707+
<span className="f-r-name">
708+
<Tag color={"blue"} style={{ marginRight: 3 }}>
709+
{group.name}
710+
</Tag>
711+
</span>{" "}
712+
</div>
713+
);
714+
})}
715+
</div>
716+
);
717+
};
718+
662719
return (
663720
<>
664721
{peer && (
@@ -972,133 +1029,151 @@ const PeerUpdate = (props: any) => {
9721029
{/* --- */}
9731030
{!isGroupUpdateView && (
9741031
<>
975-
{routeAddAllowed(peer.os) &&
976-
<Card
977-
bordered={true}
978-
// loading={loading}ƒ
979-
style={{ marginBottom: "7px" }}
980-
>
981-
<div style={{ maxWidth: "800px" }}>
982-
<Paragraph
983-
style={{
984-
textAlign: "left",
985-
whiteSpace: "pre-line",
986-
fontSize: "16px",
987-
fontWeight: "500",
988-
}}
989-
>
990-
Network routes
991-
</Paragraph>
992-
<Row
993-
gutter={21}
994-
style={{ marginTop: "-16px", marginBottom: "10px" }}
995-
>
996-
<Col
997-
xs={24}
998-
sm={24}
999-
md={20}
1000-
lg={20}
1001-
xl={20}
1002-
xxl={20}
1003-
span={20}
1004-
>
1005-
<Paragraph
1006-
type={"secondary"}
1007-
style={{ textAlign: "left", whiteSpace: "pre-line" }}
1008-
>
1009-
Access other networks without installing NetBird on
1010-
every resource.
1011-
</Paragraph>
1012-
</Col>
1013-
<Col
1014-
xs={24}
1015-
sm={24}
1016-
md={1}
1017-
lg={1}
1018-
xl={1}
1019-
xxl={1}
1020-
span={1}
1021-
style={{ marginTop: "-16px" }}
1032+
{routeAddAllowed(peer.os) && (
1033+
<Card
1034+
bordered={true}
1035+
// loading={loading}ƒ
1036+
style={{ marginBottom: "7px" }}
1037+
>
1038+
<div style={{ maxWidth: "800px" }}>
1039+
<Paragraph
1040+
style={{
1041+
textAlign: "left",
1042+
whiteSpace: "pre-line",
1043+
fontSize: "16px",
1044+
fontWeight: "500",
1045+
}}
10221046
>
1023-
{peerRoutes && peerRoutes.length > 0 && (
1024-
<Button type="primary" onClick={onClickAddNewRoute}>
1025-
Add route
1026-
</Button>
1027-
)}
1028-
</Col>
1029-
</Row>
1030-
{peerRoutes && peerRoutes.length > 0 && (
1031-
<Table
1032-
size={"small"}
1033-
style={{ marginTop: "-10px" }}
1034-
showHeader={false}
1035-
scroll={{ x: 800 }}
1036-
pagination={false}
1037-
dataSource={peerRoutes}
1047+
Network routes
1048+
</Paragraph>
1049+
<Row
1050+
gutter={21}
1051+
style={{ marginTop: "-16px", marginBottom: "10px" }}
10381052
>
1039-
<Column title="Name" dataIndex="network_id" />
1040-
<Column title="Name" dataIndex="network" />
1041-
<Column
1042-
title="enabled"
1043-
dataIndex="network"
1044-
render={(e, record: any, index) => {
1045-
return (
1046-
<>
1047-
<Switch
1048-
defaultChecked={record.enabled}
1049-
size="small"
1050-
onChange={(checked) =>
1051-
onRouteEnableChange(checked, record)
1052-
}
1053-
/>
1054-
</>
1055-
);
1056-
}}
1057-
/>
1053+
<Col
1054+
xs={24}
1055+
sm={24}
1056+
md={20}
1057+
lg={20}
1058+
xl={20}
1059+
xxl={20}
1060+
span={20}
1061+
>
1062+
<Paragraph
1063+
type={"secondary"}
1064+
style={{ textAlign: "left", whiteSpace: "pre-line" }}
1065+
>
1066+
Access other networks without installing NetBird on
1067+
every resource.
1068+
</Paragraph>
1069+
</Col>
1070+
<Col
1071+
xs={24}
1072+
sm={24}
1073+
md={1}
1074+
lg={1}
1075+
xl={1}
1076+
xxl={1}
1077+
span={1}
1078+
style={{ marginTop: "-16px" }}
1079+
>
1080+
{peerRoutes && peerRoutes.length > 0 && (
1081+
<Button type="primary" onClick={onClickAddNewRoute}>
1082+
Add route
1083+
</Button>
1084+
)}
1085+
</Col>
1086+
</Row>
1087+
{peerRoutes && peerRoutes.length > 0 && (
1088+
<Table
1089+
size={"small"}
1090+
style={{ marginTop: "-10px" }}
1091+
showHeader={false}
1092+
scroll={{ x: 800 }}
1093+
pagination={false}
1094+
dataSource={peerRoutes}
1095+
>
1096+
<Column title="Name" dataIndex="network_id" />
1097+
<Column title="Name" dataIndex="network" />
1098+
<Column
1099+
title="enabled"
1100+
dataIndex="network"
1101+
render={(e, record: any, index) => {
1102+
return record.peer_groups ? (
1103+
renderGroupRouting(record.peer_groups)
1104+
) : (
1105+
<>
1106+
<Switch
1107+
defaultChecked={record.enabled}
1108+
size="small"
1109+
onChange={(checked) =>
1110+
onRouteEnableChange(checked, record)
1111+
}
1112+
/>
1113+
</>
1114+
);
1115+
}}
1116+
/>
10581117

1059-
<Column
1060-
align="right"
1061-
render={(text, record: any, index) => {
1062-
return (
1063-
<Button
1064-
danger={true}
1065-
type={"text"}
1066-
onClick={() => {
1067-
showConfirmDelete(record.id, record.network_id);
1068-
}}
1069-
>
1070-
Delete
1071-
</Button>
1072-
);
1118+
<Column
1119+
align="right"
1120+
render={(text, record: any, index) => {
1121+
return record.peer_groups ? (
1122+
<Tooltip
1123+
color="#fff"
1124+
overlayClassName="peer-avail-tooltip"
1125+
title={`Peer "${formPeer.name}" is a part of a group used in a network route.
1126+
To remove this peer from the network route, you need to disassociate
1127+
this peer from the groups used in this route.`}
1128+
>
1129+
<Button type={"text"} disabled={true}>
1130+
Delete
1131+
</Button>
1132+
</Tooltip>
1133+
) : (
1134+
<Button
1135+
danger={true}
1136+
type={"text"}
1137+
onClick={() => {
1138+
showConfirmDelete(
1139+
record.id,
1140+
record.network_id
1141+
);
1142+
}}
1143+
>
1144+
Delete
1145+
</Button>
1146+
);
1147+
}}
1148+
/>
1149+
</Table>
1150+
)}
1151+
<Divider style={{ marginTop: "-12px" }}></Divider>
1152+
{(peerRoutes === null || peerRoutes.length === 0) && (
1153+
<Space
1154+
direction="vertical"
1155+
size="small"
1156+
align="start"
1157+
style={{
1158+
display: "flex",
1159+
padding: "35px 0px",
1160+
marginTop: "-40px",
1161+
justifyContent: "center",
10731162
}}
1074-
/>
1075-
</Table>
1076-
)}
1077-
<Divider style={{ marginTop: "-12px" }}></Divider>
1078-
{(peerRoutes === null || peerRoutes.length === 0) && (
1079-
<Space
1080-
direction="vertical"
1081-
size="small"
1082-
align="start"
1083-
style={{
1084-
display: "flex",
1085-
padding: "35px 0px",
1086-
marginTop: "-40px",
1087-
justifyContent: "center",
1088-
}}
1089-
>
1090-
<Paragraph
1091-
style={{ textAlign: "start", whiteSpace: "pre-line" }}
10921163
>
1093-
You don't have any routes yet
1094-
</Paragraph>
1095-
<Button type="primary" onClick={onClickAddNewRoute}>
1096-
Add route
1097-
</Button>
1098-
</Space>
1099-
)}
1100-
</div>
1101-
</Card>}
1164+
<Paragraph
1165+
style={{ textAlign: "start", whiteSpace: "pre-line" }}
1166+
>
1167+
You don't have any routes yet
1168+
</Paragraph>
1169+
<Button type="primary" onClick={onClickAddNewRoute}>
1170+
Add route
1171+
</Button>
1172+
</Space>
1173+
)}
1174+
</div>
1175+
</Card>
1176+
)}
11021177

11031178
<Card bordered={true} style={{ marginBottom: "50px" }}>
11041179
<Col span={24}>

0 commit comments

Comments
 (0)