Fix toggle for p2p policies (#501)

* Add control center

* Update rdp doc link

.github/workflows/build_and_push.yml

@@ -28,6 +28,33 @@ jobs:
 
       - run: echo '{}' > .local-config.json
 
+      - name: Download IronRDP release TS files
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "*.ts"
+          out-file-path: 'public/ironrdp-pkg'
+
+      - name: Download IronRDP release JS files
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "*.js"
+          out-file-path: 'public/ironrdp-pkg'
+
+      - name: Download IronRDP release WASM file
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "ironrdp_web_bg.wasm"
+          out-file-path: 'public/ironrdp-pkg'
+
       - name: Build
         run: npm run build
       -
@@ -44,7 +71,6 @@ jobs:
           images: ${{ env.IMAGE_NAME }}
       -
         name: Login to DockerHub
-        if: github.event_name != 'pull_request'
         uses: docker/login-action@v2
         with:
           username: ${{ secrets.NB_DOCKER_USER }}
@@ -55,7 +81,7 @@ jobs:
         with:
           context: .
           file: docker/Dockerfile
-          push: ${{ github.event_name != 'pull_request' }}
+          push: true
           platforms: linux/amd64,linux/arm64,linux/arm
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -41,3 +41,8 @@ next-env.d.ts
 .configs/.staging-config.json
 .configs/.temp-config.json
 .configs
+
+/public/ironrdp-pkg/
+/public/netbird.wasm
+.idea
+src/.local-config*

README.md

@@ -26,6 +26,7 @@ The dashboard makes it possible to:
 - NextJS
 - ReactJS
 - Tailwind CSS
+- [React Flow](https://reactflow.dev/) for the Control Center
 - Auth0
 - Nginx
 - Docker

config.json

@@ -13,5 +13,6 @@
   "dragQueryParams": "$NETBIRD_DRAG_QUERY_PARAMS",
   "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
   "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID",
-  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID"
+  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID",
+  "wasmPath": "$NETBIRD_WASM_PATH"
 }

docker/default.conf

@@ -3,6 +3,14 @@ server {
 	listen [::]:80 default_server;
 
     root /usr/share/nginx/html;
+    location = /netbird.wasm {
+        root /usr/share/nginx/html;
+        default_type application/wasm;
+    }
+    location = /ironrdp-pkg/ironrdp_web_bg.wasm {
+        root /usr/share/nginx/html;
+        default_type application/wasm;
+    }
 
     location / {
       try_files $uri $uri.html $uri/ =404;

docker/init_react_envs.sh

@@ -61,11 +61,12 @@ export NETBIRD_GOOGLE_ANALYTICS_ID=${NETBIRD_GOOGLE_ANALYTICS_ID}
 export NETBIRD_GOOGLE_TAG_MANAGER_ID=${NETBIRD_GOOGLE_TAG_MANAGER_ID}
 export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
 export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
+export NETBIRD_WASM_PATH=${NETBIRD_WASM_PATH:-https://pkgs.netbird.io/wasm/client}
 
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS \$\$NETBIRD_WASM_PATH"
 
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"

docker/nginx.conf

@@ -101,6 +101,7 @@ http {
     application/rss+xml
     application/vnd.geo+json
     application/vnd.ms-fontobject
+    application/wasm
     application/x-font-ttf
     application/x-web-app-manifest+json
     application/xhtml+xml

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@axa-fr/react-oidc": "^7.22.18",
+    "@dagrejs/dagre": "^1.1.5",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -35,11 +36,15 @@
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.10.7",
     "@types/crypto-js": "^4.2.2",
+    "@types/d3": "^7.4.3",
     "@types/lodash": "^4.14.200",
     "@types/node": "20.10.6",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-window": "^1.8.8",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "@xyflow/react": "^12.8.4",
     "autoprefixer": "^10",
     "chart.js": "^4.4.8",
     "chroma-js": "^3.1.2",
@@ -47,8 +52,10 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "crypto-js": "^4.2.0",
+    "d3": "^7.9.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
+    "elkjs": "^0.10.0",
     "eslint": "^8",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -58,7 +65,7 @@
     "ip-cidr": "^3.1.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.479.0",
+    "lucide-react": "^0.539.0",
     "next": "^14.2.28",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",

src/app/(dashboard)/control-center/layout.tsx

@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Control Center - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/(dashboard)/network-routes/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import Breadcrumbs from "@components/Breadcrumbs";
+import { Callout } from "@components/Callout";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
-import { ExternalLinkIcon } from "lucide-react";
+import { ArrowUpRightIcon, ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeersProvider from "@/contexts/PeersProvider";
@@ -59,6 +60,17 @@ export default function NetworkRoutes() {
               </InlineLink>
               in our documentation.
             </Paragraph>
+
+            <Callout className={"max-w-xl mt-3"} variant={"warning"}>
+              <span>
+                We recommend using the new Networks concept to easier visualise
+                and manage access to your resources.{" "}
+                <InlineLink href={"/networks"}>
+                  Go to Networks
+                  <ArrowUpRightIcon size={14} />
+                </InlineLink>
+              </span>
+            </Callout>
           </div>
 
           <RestrictedAccess hasAccess={permission.routes.read}>

src/app/(dashboard)/network/page.tsx

@@ -1,7 +1,15 @@
 "use client";
 
 import Breadcrumbs from "@components/Breadcrumbs";
+import Button from "@components/Button";
 import Card from "@components/Card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
 import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
 import Separator from "@components/Separator";
@@ -12,12 +20,14 @@ import { cn } from "@utils/helpers";
 import {
   ArrowUpRightIcon,
   HelpCircle,
+  MoreVertical,
   PencilLineIcon,
   ServerIcon,
   ShieldCheckIcon,
   ShieldXIcon,
+  Trash2,
 } from "lucide-react";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
@@ -25,8 +35,10 @@ import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Network } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
 import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
-import NetworkModal from "@/modules/networks/NetworkModal";
-import { NetworkProvider } from "@/modules/networks/NetworkProvider";
+import {
+  NetworkProvider,
+  useNetworksContext,
+} from "@/modules/networks/NetworkProvider";
 import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
 import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
 
@@ -77,35 +89,24 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
 
           <div className={"flex justify-between max-w-6xl"}>
             <div
-              className={cn(
-                "flex items-center",
-                !network.description && "gap-2",
-              )}
+              className={"w-full lg:w-1/2 flex justify-between items-center"}
             >
-              <NetworkInformationSquare
-                name={network.name}
-                active={isActive}
-                size={"lg"}
-                description={network.description}
-              />
-              {permission.networks.update && (
-                <button
-                  className={
-                    "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
-                  }
-                  onClick={() => setNetworkModal(true)}
-                >
-                  <PencilLineIcon size={18} />
-                </button>
-              )}
-              <NetworkModal
-                open={networkModal}
-                setOpen={setNetworkModal}
-                onUpdated={() => {
-                  mutate(`/networks/${network.id}`);
-                }}
-                network={network}
-              />
+              <div
+                className={cn(
+                  "flex items-center w-full",
+                  !network.description && "gap-2",
+                )}
+              >
+                <NetworkInformationSquare
+                  name={network.name}
+                  active={isActive}
+                  size={"lg"}
+                  description={network.description}
+                />
+              </div>
+              <NetworkProvider network={network}>
+                <NetworkActions />
+              </NetworkProvider>
             </div>
           </div>
 
@@ -124,6 +125,56 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
   );
 }
 
+function NetworkActions() {
+  const { permission } = usePermissions();
+  const { deleteNetwork, openEditNetworkModal, network } = useNetworksContext();
+  const router = useRouter();
+
+  if (!network) return;
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        asChild={true}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <Button variant={"secondary"} className={"!px-3"}>
+          <MoreVertical size={16} className={"shrink-0"} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-auto" align="end">
+        <DropdownMenuItem
+          onClick={() => openEditNetworkModal(network)}
+          disabled={!permission.networks.update}
+        >
+          <div className={"flex gap-3 items-center"}>
+            <PencilLineIcon size={14} className={"shrink-0"} />
+            Rename
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onClick={() =>
+            deleteNetwork(network).then(() => router.push("/networks"))
+          }
+          variant={"danger"}
+          disabled={!permission.networks.delete}
+        >
+          <div className={"flex gap-3 items-center"}>
+            <Trash2 size={14} className={"shrink-0"} />
+            Delete
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
   const isHighlyAvailable = !!(
     network?.routing_peers_count && network?.routing_peers_count >= 2
@@ -154,7 +205,7 @@ function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
   const policyCount = network.policies?.length ?? 0;
 
   return (
-    <Card>
+    <Card className={"w-full lg:w-1/2"}>
       <Card.List>
         <Card.ListItem
           tooltip={false}

src/app/(dashboard)/peers/page.tsx

@@ -105,7 +105,7 @@ function PeersBlockedView() {
       <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
         <div
           className={
-            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40"
           }
         >
           <SetupModalContent header={false} footer={false} />

src/app/(dashboard)/settings/page.tsx

@@ -6,6 +6,7 @@ import {
   AlertOctagonIcon,
   FolderGit2Icon,
   LockIcon,
+  MonitorSmartphoneIcon,
   NetworkIcon,
   ShieldIcon,
 } from "lucide-react";
@@ -16,6 +17,7 @@ import { useLoggedInUser } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
 import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
+import ClientSettingsTab from "@/modules/settings/ClientSettingsTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
 import GroupsTab from "@/modules/settings/GroupsTab";
 import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
@@ -63,6 +65,10 @@ export default function NetBirdSettings() {
                 <NetworkIcon size={14} />
                 Networks
               </VerticalTabs.Trigger>
+              <VerticalTabs.Trigger value="clients">
+                <MonitorSmartphoneIcon size={14} />
+                Clients
+              </VerticalTabs.Trigger>
             </>
           )}
 
@@ -77,6 +83,7 @@ export default function NetBirdSettings() {
             {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}
             {account && <NetworkSettingsTab account={account} />}
+            {account && <ClientSettingsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>
         </RestrictedAccess>

src/app/(dashboard)/team/user/page.tsx

@@ -289,6 +289,7 @@ function UserInformationCard({ user }: Readonly<{ user: User }>) {
   const neverLoggedIn = dayjs(user.last_login).isBefore(
     dayjs().subtract(1000, "years"),
   );
+  const isPendingApproval = user?.pending_approval;
 
   return (
     <Card>
@@ -328,18 +329,20 @@ function UserInformationCard({ user }: Readonly<{ user: User }>) {
 
         {!isServiceUser && (
           <>
-            {!user.is_current && user.role != Role.Owner && (
-              <Card.ListItem
-                tooltip={false}
-                label={
-                  <>
-                    <Ban size={16} />
-                    Block User
-                  </>
-                }
-                value={<UserBlockCell user={user} isUserPage={true} />}
-              />
-            )}
+            {!user.is_current &&
+              user.role != Role.Owner &&
+              !isPendingApproval && (
+                <Card.ListItem
+                  tooltip={false}
+                  label={
+                    <>
+                      <Ban size={16} />
+                      Block User
+                    </>
+                  }
+                  value={<UserBlockCell user={user} isUserPage={true} />}
+                />
+              )}
 
             <Card.ListItem
               label={

src/app/(remote-access)/layout.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import UsersProvider from "@/contexts/UsersProvider";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+      <UsersProvider>{children}</UsersProvider>
+  );
+}