Support Auto Groups when updating setup keys (#75)

* fix missing peer when disabling route

and passing peer to modal view

* group rows by HA routes

* Adjust high availability and show fields disabled

* add groupedRoutes to GroupedDataTable

* remove unused fields

* filter by grouped routes

* group routes by network id and network

* use better check for save button

docker/init_react_envs.sh

@@ -1,19 +1,39 @@
 #!/bin/bash
 set -e
 
-if [[ -z "${AUTH0_DOMAIN}" ]]; then
-    echo "AUTH0_DOMAIN environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUTHORITY}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "AUTH_AUTHORITY or AUTH0_DOMAIN environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
-    echo "AUTH0_CLIENT_ID environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_CLIENT_ID}" ]]; then
+    if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
+        echo "AUTH_CLIENT_ID or AUTH0_CLIENT_ID environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_AUDIENCE}" ]]; then
-    echo "AUTH0_AUDIENCE environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUDIENCE}" ]]; then
+    if [[ -z "${AUTH0_AUDIENCE}" ]]; then
+        echo "AUTH_AUDIENCE or AUTH0_AUDIENCE environment variable must be set"
+        exit 1
+    fi
+fi
+
+if [[ -z "${AUTH_SUPPORTED_SCOPES}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "AUTH_SUPPORTED_SCOPES environment variable must be set"
+        exit 1
+    fi
+fi
+
+if [[ -z "${USE_AUTH0}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "USE_AUTH0 environment variable must be set"
+        exit 1
+    fi
 fi
 
 if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
@@ -21,11 +41,14 @@ if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
     exit 1
 fi
 
-AUTH0_DOMAIN=${AUTH0_DOMAIN}
-AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
-AUTH0_AUDIENCE=${AUTH0_AUDIENCE}
-NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(:80|:443)$//')
-NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
+export AUTH_AUTHORITY=${AUTH_AUTHORITY:-https://$AUTH0_DOMAIN}
+export AUTH_CLIENT_ID=${AUTH_CLIENT_ID:-$AUTH0_CLIENT_ID}
+export AUTH_AUDIENCE=${AUTH_AUDIENCE:-$AUTH0_AUDIENCE}
+export USE_AUTH0=${USE_AUTH0:-true}
+export AUTH_SUPPORTED_SCOPES=${AUTH_SUPPORTED_SCOPES:-openid profile email api offline_access email_verified}
+
+export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(:80|:443)$//')
+export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
 
 REPO="https://github.com/netbirdio/netbird/"
 # this command will fetch the latest release e.g. v0.6.3
@@ -33,7 +56,7 @@ export NETBIRD_LATEST_VERSION=$(basename $(curl -fs -o/dev/null -w %{redirect_ur
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$AUTH0_DOMAIN \$\$AUTH0_CLIENT_ID \$\$AUTH0_AUDIENCE \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
 MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 cp "$MAIN_JS" "$MAIN_JS".copy

package.json

@@ -21,6 +21,7 @@
     "antd": "^4.20.6",
     "autoprefixer": "^10.4.4",
     "axios": "^0.27.2",
+    "cidr-regex": "^3.1.1",
     "copyfiles": "^2.4.1",
     "heroicons": "^1.0.6",
     "highlight.js": "^11.2.0",

run-local-keycloak.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+  -p 3000:80 -p 443:443 \
+  -e AUTH_AUDIENCE=netbird-client  \
+  -e AUTH_AUTHORITY=http://localhost:8080/realms/netbird  \
+  -e AUTH_CLIENT_ID=netbird-client \
+  -e USE_AUTH0=false  \
+  -e AUTH_SUPPORTED_SCOPES='openid profile email api offline_access' \
+  -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+  -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT \
+  netbird/dashboard-local:latest

run-local-legacy.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+ -p 3000:80 -p 443:443  \
+ -e AUTH0_AUDIENCE=http://localhost:3000/ \
+ -e AUTH0_DOMAIN=netbird-localdev.eu.auth0.com  \
+ -e AUTH0_CLIENT_ID=kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt  \
+ -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+ -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+ netbird/dashboard-local:latest

run-local.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+  -p 3000:80 -p 443:443 \
+  -e AUTH_AUDIENCE=http://localhost:3000/ \
+  -e AUTH_AUTHORITY=https://netbird-localdev.eu.auth0.com \
+  -e AUTH_CLIENT_ID=kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt  \
+  -e USE_AUTH0=true \
+  -e AUTH_SUPPORTED_SCOPES='openid profile email api offline_access email_verified' \
+  -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+  -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT \
+  netbird/dashboard-local:latest

src/App.tsx

@@ -8,6 +8,7 @@ import SetupKeys from "./views/SetupKeys";
 import AddPeer from "./views/AddPeer";
 import Users from './views/Users';
 import AccessControl from './views/AccessControl';
+import Routes from './views/Routes';
 import Banner from "./components/Banner";
 import {store} from "./store";
 import { Col, Layout, Row} from 'antd';
@@ -38,7 +39,7 @@ function App() {
     return (
         <Provider store={store}>
                 <Layout>
-                    {/*<Banner/>*/}
+                    <Banner/>
                     <Header className="header" style={{
                         display: "flex",
                         flexDirection: "column",
@@ -68,6 +69,7 @@ function App() {
                             <Route path="/add-peer" component={withOidcSecure(AddPeer)}/>
                             <Route path="/setup-keys" component={withOidcSecure(SetupKeys)}/>
                             <Route path="/acls" component={withOidcSecure(AccessControl)}/>
+                            <Route path="/routes" component={withOidcSecure(Routes)}/>
                             <Route path="/users" component={withOidcSecure(Users)}/>
                         </Switch>
                     </Content>

src/components/AccessControlNew.tsx

@@ -308,14 +308,7 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="disabled"
                                     label="Status"
-                                    //valuePropName="checked"
                                 >
-                                    {/*<Switch
-                                        checkedChildren={<CheckOutlined />}
-                                        unCheckedChildren={<CloseOutlined />}
-
-                                        onChange={handleChangeDisabled}
-                                    />*/}
 
                                     <Radio.Group
                                         options={optionsDisabledEnabled}
@@ -330,7 +323,6 @@ const AccessControlNew = () => {
                                     name="tagSourceGroups"
                                     label="Source groups"
                                     rules={[{ validator: selectValidator }]}
-                                    style={{display: 'flex'}}
                                 >
                                     <Select mode="tags"
                                             style={{ width: '100%' }}
@@ -352,7 +344,6 @@ const AccessControlNew = () => {
                                     name="tagDestinationGroups"
                                     label="Destination groups"
                                     rules={[{ validator: selectValidator }]}
-                                    style={{display: 'flex'}}
                                 >
                                     <Select
                                         mode="tags" style={{ width: '100%' }}

src/components/Banner.tsx

@@ -14,7 +14,7 @@ const Banner = () => {
 	const linkLearnMore = () => {
 		return (
 			<a
-				href="https://netbird.io/blog/introducing-access-control"
+				href="https://netbird.io/docs/how-to-guides/network-routes"
 				className="font-bold underline"
 				target="_blank"
 				rel="noreferrer"
@@ -27,7 +27,7 @@ const Banner = () => {
 			<Row>
 				<Col xs={24} sm={0} lg={0}>
 					<Text className="ant-col-md-0" style={{color: "#ffffff"}}>
-						Big news! Introducing NetBird Access Control.
+						New Release! Access private networks with the Network Routes feature.
 					</Text>
 				</Col>
 				<Col xs={24} sm={0} lg={0}>
@@ -38,7 +38,7 @@ const Banner = () => {
 				<Col xs={0} sm={24}>
 					<Space align="center" style={{display: "flex", justifyContent: "center"}}>
 						<Text style={{color: "#ffffff"}}>
-							Big news! Introducing NetBird Access Control.
+							New Release! Access private networks with the Network Routes feature.
 						</Text>
 						<span>
 							{linkLearnMore()}

src/components/Navbar.tsx

@@ -34,10 +34,11 @@ const Navbar = () => {
         { label: (<Link  to="/add-peer">Add Peer</Link>), key: '/add-peer' },
         { label: (<Link  to="/setup-keys">Setup Keys</Link>), key: '/setup-keys' },
         { label: (<Link  to="/acls">Access Control</Link>), key: '/acls' },
+        { label: (<Link  to="/routes">Network Routes</Link>), key: '/routes' },
         { label: (<Link  to="/users">Users</Link>), key: '/users' }
     ] as ItemType[])
     const logoutWithRedirect = () =>
-        logout("",{client_id:config.clientId});
+        logout("/",{client_id:config.clientId});
     useEffect(() => {
         const fs = menuItems.filter(m => m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
         if (screens.xs === true) {

src/components/PeerUpdate.tsx

@@ -295,7 +295,7 @@ const PeerUpdate = () => {
                                             ) : (
                                                 <Form.Item
                                                     name="name"
-                                                    label="Update Name"
+                                                    label="Name"
                                                     rules={[{
                                                         required: true,
                                                         message: 'Please add a new name for this peer',

src/components/RouteUpdate.tsx

@@ -0,0 +1,373 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "typesafe-actions";
+import { actions as routeActions } from '../store/route';
+import {
+    Col,
+    Row,
+    Input,
+    InputNumber,
+    Space,
+    Switch,
+    SelectProps,
+    Button, Drawer, Form, Divider, Select, Radio, Typography
+} from "antd";
+import {CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
+import {Route} from "../store/route/types";
+import {Header} from "antd/es/layout/layout";
+import {RuleObject} from "antd/lib/form";
+import {useOidcAccessToken} from "@axa-fr/react-oidc";
+import cidrRegex from 'cidr-regex';
+import {
+    masqueradeDisabledMSG,
+    peerToPeerIP,
+    initPeerMaps,
+    routePeerSeparator,
+    transformGroupedDataTable
+} from '../utils/routes'
+
+const { Paragraph } = Typography;
+
+interface FormRoute extends Route {
+}
+
+const RouteUpdate = () => {
+    const {accessToken} = useOidcAccessToken()
+    const dispatch = useDispatch()
+    const setupNewRouteVisible = useSelector((state: RootState) => state.route.setupNewRouteVisible)
+    const setupNewRouteHA = useSelector((state: RootState) => state.route.setupNewRouteHA)
+    const peers =  useSelector((state: RootState) => state.peer.data)
+    const route =  useSelector((state: RootState) => state.route.route)
+    const routes =  useSelector((state: RootState) => state.route.data)
+    const savedRoute = useSelector((state: RootState) => state.route.savedRoute)
+    // const [groupedDataTable, setGroupedDataTable] = useState([] as GroupedDataTable[]);
+    const [previousRouteKey, setPreviousRouteKey] = useState("")
+    const [editName, setEditName] = useState(false)
+    const [editDescription, setEditDescription] = useState(false)
+    const options: SelectProps['options'] = [];
+    const [formRoute, setFormRoute] = useState({} as FormRoute)
+    const [form] = Form.useForm()
+    const inputNameRef = useRef<any>(null)
+    const inputDescriptionRef = useRef<any>(null)
+
+    const defaultRoutingPeerMSG = "Routing Peer"
+    const [routingPeerMSG, setRoutingPeerMSG] = useState(defaultRoutingPeerMSG)
+    const defaultMasqueradeMSG = "Masquerade"
+    const [masqueradeMSG, setMasqueradeMSG] = useState(defaultMasqueradeMSG)
+    const defaultStatusMSG = "Status"
+    const [statusMSG, setStatusMSG] = useState(defaultStatusMSG)
+    const [peerNameToIP, peerIPToName] = initPeerMaps(peers);
+
+    const optionsDisabledEnabled = [{label: 'Enabled', value: true}, {label: 'Disabled', value: false}]
+
+    useEffect(() => {
+        if (setupNewRouteHA) {
+            setRoutingPeerMSG("Add additional routing peer")
+            setMasqueradeMSG("Update Masquerade")
+            setStatusMSG("Update Status")
+        } else {
+            setRoutingPeerMSG(defaultRoutingPeerMSG)
+            setMasqueradeMSG(defaultMasqueradeMSG)
+            setStatusMSG(defaultStatusMSG)
+            setPreviousRouteKey("")
+        }
+    }, [setupNewRouteHA])
+
+    useEffect(() => {
+        if (editName) inputNameRef.current!.focus({
+            cursor: 'end',
+        });
+    }, [editName]);
+
+    useEffect(() => {
+        if (editDescription) inputDescriptionRef.current!.focus({
+            cursor: 'end',
+        });
+    }, [editDescription]);
+
+    useEffect(() => {
+        if (!route) return
+
+        const fRoute = {
+            ...route,
+        } as FormRoute
+        setFormRoute(fRoute)
+        setPreviousRouteKey(fRoute.network_id+fRoute.network)
+        form.setFieldsValue(fRoute)
+    }, [route])
+
+    peers.forEach((p) => {
+        let os:string
+        os = p.os
+        if (!os.toLowerCase().startsWith("darwin") && !os.toLowerCase().startsWith("windows")) {
+            options?.push({
+                label: peerToPeerIP(p.name,p.ip),
+                value: peerToPeerIP(p.name,p.ip),
+                disabled: false
+            })
+        }
+    })
+
+    const createRouteToSave = (inputRoute:FormRoute):Route => {
+        let peerIDList = inputRoute.peer.split(routePeerSeparator)
+        let peerID:string
+        if (peerIDList[1]) {
+            peerID = peerIDList[1]
+        } else {
+            peerID = peerNameToIP[inputRoute.peer]
+        }
+
+        return {
+            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
+        } as Route
+    }
+
+    const handleFormSubmit = () => {
+        form.validateFields()
+            .then(() => {
+                if (!setupNewRouteHA || formRoute.peer != '') {
+                    const routeToSave = createRouteToSave(formRoute)
+                    dispatch(routeActions.saveRoute.request({getAccessTokenSilently:accessToken, payload: routeToSave}))
+                } else {
+                    let groupedDataTable = transformGroupedDataTable(routes,peerIPToName)
+                    groupedDataTable.forEach((group) => {
+                        if (group.key == previousRouteKey) {
+                            group.groupedRoutes.forEach((route) => {
+                                let updateRoute:FormRoute = {
+                                    ...formRoute,
+                                    id: route.id,
+                                    peer: route.peer,
+                                    metric: route.metric,
+                                    enabled: (formRoute.enabled != group.enabled) ? formRoute.enabled : route.enabled
+                                }
+                                const routeToSave = createRouteToSave(updateRoute)
+                                dispatch(routeActions.saveRoute.request({getAccessTokenSilently:accessToken, payload: routeToSave}))
+                            })
+                        }
+                    })
+                }
+
+            })
+            .catch((errorInfo) => {
+                console.log('errorInfo', errorInfo)
+            });
+    };
+
+    const setVisibleNewRoute = (status:boolean) => {
+        dispatch(routeActions.setSetupNewRouteVisible(status));
+    }
+
+    const setSetupNewRouteHA = (status:boolean) => {
+        dispatch(routeActions.setSetupNewRouteHA(status));
+    }
+
+    const onCancel = () => {
+        if (savedRoute.loading) return
+        setEditName(false)
+        dispatch(routeActions.setRoute({
+            network: '',
+            network_id: '',
+            description: '',
+            peer: "",
+            metric: 9999,
+            masquerade: false,
+            enabled: true
+        } as Route))
+        setVisibleNewRoute(false)
+        setSetupNewRouteHA(false)
+        setPreviousRouteKey("")
+    }
+
+    const onChange = (data:any) => {
+        setFormRoute({...formRoute, ...data})
+    }
+
+    const dropDownRender = (menu: React.ReactElement) => (
+        <>
+            {menu}
+        </>
+    )
+
+    const toggleEditName = (status:boolean) => {
+        setEditName(status);
+    }
+
+    const toggleEditDescription = (status:boolean) => {
+        setEditDescription(status);
+    }
+
+    const networkRangeValidator = (_: RuleObject, value: string) => {
+        if (!cidrRegex().test(value)) {
+            return Promise.reject(new Error("Please enter a valid CIDR, e.g. 192.168.1.0/24"))
+        }
+
+        if (Number(value.split("/")[1]) < 7) {
+            return Promise.reject(new Error("Please enter a network mask larger than /7"))
+        }
+
+        return Promise.resolve()
+    }
+
+    return (
+        <>
+            {route &&
+                <Drawer
+                    headerStyle={{display: "none"}}
+                    forceRender={true}
+                    visible={setupNewRouteVisible}
+                    bodyStyle={{paddingBottom: 80}}
+                    onClose={onCancel}
+                    autoFocus={true}
+                    footer={
+                        <Space style={{display: 'flex', justifyContent: 'end'}}>
+                            <Button onClick={onCancel} disabled={savedRoute.loading}>Cancel</Button>
+                            <Button type="primary" disabled={savedRoute.loading} onClick={handleFormSubmit}>{`${formRoute.network_id ? 'Save' : 'Create'}`}</Button>
+                        </Space>
+                    }
+                >
+                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                        <Row gutter={16}>
+                            <Col span={24}>
+                                <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
+                                    <Row align="top">
+                                        <Col flex="none" style={{display: "flex"}}>
+                                            {!editName && !editDescription && formRoute.id  &&
+                                                <button type="button" aria-label="Close" className="ant-drawer-close"
+                                                        style={{paddingTop: 3}}
+                                                        onClick={onCancel}>
+                                                    <span role="img" aria-label="close" className="anticon anticon-close">
+                                                        <CloseOutlined size={16}/>
+                                                    </span>
+                                                </button>
+                                            }
+                                        </Col>
+                                        <Col flex="auto">
+                                            { !editName && formRoute.id ? (
+                                                <div className={"access-control input-text ant-drawer-title"} onClick={() => toggleEditName(true)}>{formRoute.id ? formRoute.network_id : 'New Route'}</div>
+                                            ) : (
+                                                <Form.Item
+                                                    name="network_id"
+                                                    label="Network Identifier"
+                                                    tooltip="You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes"
+                                                    rules={[{required: true, message: 'Please add an identifier for this access route', whitespace: true}]}
+                                                >
+                                                    <Input placeholder="e.g. aws-eu-central-1-vpc" ref={inputNameRef} disabled={!setupNewRouteHA} onPressEnter={() => toggleEditName(false)} onBlur={() => toggleEditName(false)} autoComplete="off" maxLength={40}/>
+                                                </Form.Item>
+                                            )}
+                                            { !editDescription ? (
+                                                <div className={"access-control input-text ant-drawer-subtitle"} onClick={() => toggleEditDescription(true)}>{formRoute.description && formRoute.description.trim() !== "" ? formRoute.description : 'Add description...'}</div>
+                                            ) : (
+                                                <Form.Item
+                                                    name="description"
+                                                    label="Description"
+                                                    style={{marginTop: 24}}
+                                                >
+                                                    <Input placeholder="Add description..." ref={inputDescriptionRef} disabled={!setupNewRouteHA} onPressEnter={() => toggleEditDescription(false)} onBlur={() => toggleEditDescription(false)} autoComplete="off" maxLength={200}/>
+                                                </Form.Item>
+                                            )}
+
+                                        </Col>
+                                    </Row>
+                                    <Row align="top">
+                                        <Col flex="auto">
+
+                                        </Col>
+                                    </Row>
+
+                                </Header>
+                            </Col>
+                            <Col span={24}>
+
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="network"
+                                    label="Network Range"
+                                    tooltip="Use CIDR notation. e.g. 192.168.10.0/24 or 172.16.0.0/16"
+                                    rules={[{validator: networkRangeValidator}]}
+                                >
+                                    <Input placeholder="e.g. 172.16.0.0/16" disabled={!setupNewRouteHA} autoComplete="off" minLength={9} maxLength={43}/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="enabled"
+                                    label={statusMSG}
+                                >
+                                    <Radio.Group
+                                        options={optionsDisabledEnabled}
+                                        optionType="button"
+                                        buttonStyle="solid"
+                                    />
+                                </Form.Item>
+                            </Col>
+
+                            <Col span={24}>
+                                <Form.Item
+                                    name="peer"
+                                    label={routingPeerMSG}
+                                    tooltip="Assign a peer as a routing peer for the Network CIDR"
+                                >
+                                    <Select
+                                            showSearch
+                                            style={{ width: '100%' }}
+                                            placeholder="Select Peer"
+                                            dropdownRender={dropDownRender}
+                                            options={options}
+                                            allowClear={true}
+                                    />
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="masquerade"
+                                    label={masqueradeMSG}
+                                    tooltip={masqueradeDisabledMSG}
+                                >
+                                    <Switch size={"small"} disabled={!setupNewRouteHA} checked={formRoute.masquerade}/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="metric"
+                                    label="Metric"
+                                    tooltip="Choose from 1 to 9999. Lower number has higher priority"
+                                >
+                                    <InputNumber min={1} max={9999} autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Row wrap={false} gutter={12}>
+                                    <Col flex="none">
+                                        <FlagFilled/>
+                                    </Col>
+                                    <Col flex="auto">
+                                        <Paragraph>
+                                            You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes.
+                                        </Paragraph>
+                                    </Col>
+                                </Row>
+                            </Col>
+                            <Col span={24}>
+                                <Divider></Divider>
+                                <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
+                                        href="https://netbird.io/docs/how-to-guides/network-routes" style={{color: 'rgb(07, 114, 128)'}}>Learn
+                                    more about network routes</Button>
+                            </Col>
+                        </Row>
+                    </Form>
+
+                </Drawer>
+            }
+        </>
+    )
+}
+
+export default RouteUpdate

src/config.json

@@ -1,7 +1,10 @@
 {
-  "domain": "$AUTH0_DOMAIN",
-  "clientId": "$AUTH0_CLIENT_ID",
-  "audience": "$AUTH0_AUDIENCE",
+  "auth0Auth": "$USE_AUTH0",
+  "authAuthority": "$AUTH_AUTHORITY",
+  "authClientId": "$AUTH_CLIENT_ID",
+  "authScopesSupported": "$AUTH_SUPPORTED_SCOPES",
+  "authAudience": "$AUTH_AUDIENCE",
+
   "apiOrigin": "$NETBIRD_MGMT_API_ENDPOINT",
   "grpcApiOrigin": "$NETBIRD_MGMT_GRPC_API_ENDPOINT",
   "latestVersion": "$NETBIRD_LATEST_VERSION"

src/config.ts

@@ -8,23 +8,15 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 export function getConfig() {
-  // Configure the audience here. By default, it will take whatever is in the config
-  // (specified by the `audience` key) unless it's the default value of "YOUR_API_IDENTIFIER" (which
-  // is what you get sometimes by using the Auth0 sample download tool from the quickstart page, if you
-  // don't have an API).
-  // If this resolves to `null`, the API page changes to show some helpful info about what to do
-  // with the audience.
-  const audience =
-    configJson.audience && configJson.audience !== "YOUR_API_IDENTIFIER"
-      ? configJson.audience
-      : null;
 
   return {
-    domain: configJson.domain,
-    clientId: configJson.clientId,
+    auth0Auth: configJson.auth0Auth == "true", //due to substitution we can't use boolean in the config
+    authority: configJson.authAuthority,
+    clientId: configJson.authClientId,
+    scopesSupported: configJson.authScopesSupported,
     apiOrigin: configJson.apiOrigin,
     grpcApiOrigin: configJson.grpcApiOrigin,
     latestVersion: configJson.latestVersion,
-    ...(audience ? { audience } : null),
+    audience: configJson.authAudience,
   };
 }

src/index.tsx

@@ -4,33 +4,37 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import history from "./utils/history";
-import { getConfig } from "./config";
-import {OidcProvider, useOidc} from '@axa-fr/react-oidc';
+import {getConfig} from "./config";
+import {OidcProvider} from '@axa-fr/react-oidc';
 import {BrowserRouter} from "react-router-dom";
 import Loading from "./components/Loading";
 import LoginError from "./components/LoginError";
+import {AuthorityConfiguration} from "@axa-fr/react-oidc/dist/vanilla/oidc";
 
 const config = getConfig();
 
-const authority = 'https://' + config.domain
+// Unfortunately Auth0 https://<DOMAIN>/.well-known/openid-configuration doesn't contain end_session_endpoint that
+// is required for doing logout. Therefore, we need to hardcode the config for auth
+const auth0AuthorityConfig: AuthorityConfiguration = {
+    authorization_endpoint: new URL("authorize", config.authority).href,
+    token_endpoint:  new URL("oauth/token", config.authority).href,
+    revocation_endpoint: new URL("oauth/revoke", config.authority).href,
+    end_session_endpoint: new URL("v2/logout", config.authority).href,
+    userinfo_endpoint: new URL("userinfo", config.authority).href,
+} as AuthorityConfiguration
+
 const providerConfig = {
-    authority: authority,
+    authority: config.authority,
     client_id: config.clientId,
-    redirect_uri: window.location.origin+'#callback',
+    redirect_uri: window.location.origin + '/#callback',
     refresh_time_before_tokens_expiration_in_second: 30,
-    silent_redirect_uri: window.location.origin + '#silent-callback',
-    scope: 'openid profile email api offline_access email_verified',
+    silent_redirect_uri: window.location.origin + '/#silent-callback',
+    scope: config.scopesSupported,
     // disabling service worker
     // service_worker_relative_url:'/OidcServiceWorker.js',
     service_worker_only: false,
-    authority_configuration: {
-        authorization_endpoint: authority + "/authorize",
-        token_endpoint: authority + "/oauth/token",
-        revocation_endpoint: authority + "/oauth/revoke",
-        end_session_endpoint: authority + "/v2/logout",
-        userinfo_endpoint: authority + "/userinfo"
-    },
-    ...(config.audience ? {extras:{ audience: config.audience}} : null)
+    authority_configuration: config.auth0Auth ? auth0AuthorityConfig : undefined,
+    ...(config.audience ? {extras: {audience: config.audience}} : null)
 };
 
 const root = ReactDOM.createRoot(
@@ -40,23 +44,21 @@ const root = ReactDOM.createRoot(
 const loadingComponent = () => <Loading padding="3em" width="50px" height="50px"/>
 
 root.render(
-
-        <OidcProvider
-            configuration={providerConfig}
-            callbackSuccessComponent={loadingComponent}
-            authenticatingErrorComponent={LoginError}
-            authenticatingComponent={loadingComponent}
-            sessionLostComponent={loadingComponent}
-            loadingComponent={loadingComponent}
-            onSessionLost={()=>{
-                history.push("/peers")
-            }}
-        >
-            <BrowserRouter>
-              <App/>
-            </BrowserRouter>
-        </OidcProvider>
-
+    <OidcProvider
+        configuration={providerConfig}
+        callbackSuccessComponent={loadingComponent}
+        authenticatingErrorComponent={LoginError}
+        authenticatingComponent={loadingComponent}
+        sessionLostComponent={loadingComponent}
+        loadingComponent={loadingComponent}
+        onSessionLost={() => {
+            history.push("/peers")
+        }}
+    >
+        <BrowserRouter>
+            <App/>
+        </BrowserRouter>
+    </OidcProvider>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/store/index.ts

@@ -7,6 +7,7 @@ import { sagas as setupKeySagas } from './setup-key';
 import { sagas as userSagas } from './user';
 import { sagas as ruleSagas } from './rule';
 import { sagas as groupSagas } from './group';
+import { sagas as routeSagas } from './route';
 
 import rootReducer from './root-reducer';
 import { apiClient } from '../services/api-client';
@@ -23,5 +24,6 @@ sagaMiddleware.run(setupKeySagas);
 sagaMiddleware.run(userSagas);
 sagaMiddleware.run(ruleSagas);
 sagaMiddleware.run(groupSagas);
+sagaMiddleware.run(routeSagas);
 
 export { apiClient, rootReducer, store };

src/store/peer/types.ts

@@ -21,4 +21,12 @@ export interface PeerGroupsToSave {
   groupsToRemove: string[];
   groupsToAdd: string[];
   groupsNoId: string[];
-}
+}
+
+export interface PeerNameToIP {
+  [key: string]: string;
+}
+
+export interface PeerIPToName {
+  [key: string]: string;
+}

src/store/root-action.ts

@@ -3,11 +3,13 @@ import { actions as SetupKeyActions } from './setup-key';
 import { actions as UserActions } from './user';
 import { actions as GroupActions } from './group';
 import { actions as RuleActions } from './rule';
+import { actions as RouteActions } from './route';
 
 export default {
   peer: PeerActions,
   setupKey: SetupKeyActions,
   user: UserActions,
   group: GroupActions,
-  rule: RuleActions
+  rule: RuleActions,
+  route: RouteActions
 };

src/store/root-reducer.ts

@@ -5,11 +5,13 @@ import { reducer as setupKey } from './setup-key';
 import { reducer as user } from './user';
 import { reducer as group } from './group';
 import { reducer as rule } from './rule';
+import { reducer as route } from './route';
 
 export default combineReducers({
   peer,
   setupKey,
   user,
   group,
-  rule
+  rule,
+  route
 });