UI elements for packetlogs

pkg/rest/router.go

@@ -63,7 +63,7 @@ func (c *Context) getRouter(assets fs.FS, indexHtml []byte) *http.ServeMux {
 	mux.Handle("/api/users", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.usersHandler)))))
 	mux.Handle("/api/user/{id}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.userHandler)))))
 	mux.Handle("/api/stats/user/{date}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.userStatsHandler)))))
-	mux.Handle("/api/stats/{user}/{date}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.ipLogsHandler)))))
+	mux.Handle("/api/stats/packetlogs/{user}/{date}", c.authMiddleware(c.injectUserMiddleware(c.isAdminMiddleware(http.HandlerFunc(c.packetLogsHandler)))))
 
 	return mux
 }

pkg/rest/stats.go

@@ -210,7 +210,7 @@ func (c *Context) userStatsHandler(w http.ResponseWriter, r *http.Request) {
 	c.write(w, out)
 }
 
-func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) {
+func (c *Context) packetLogsHandler(w http.ResponseWriter, r *http.Request) {
 	vpnConfig, err := wireguard.GetVPNConfig(c.Storage.Client)
 	if err != nil {
 		c.returnError(w, fmt.Errorf("get vpn config error: %s", err), http.StatusBadRequest)
@@ -252,7 +252,7 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) {
 	for _, user := range users {
 		userMap[user.ID] = user.Login
 	}
-	// calculate stats
+	// logs
 	statsFiles := []string{
 		path.Join(wireguard.VPN_STATS_DIR, wireguard.VPN_PACKETLOGGER_DIR, userID+"-"+date.Format("2006-01-02")+".log"),
 	}
@@ -265,6 +265,8 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) {
 				return
 			}
 			logInputData.Write(fileLogData)
+		} else {
+			fmt.Printf("File does not exist: %s", statsFile)
 		}
 	}
 
@@ -281,9 +283,10 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) {
 				"Destination":      "string",
 			},
 		},
+		Data: []LogRow{},
 	}
 
-	for scanner.Scan() { // all other entries
+	for scanner.Scan() {
 		inputSplit := strings.Split(scanner.Text(), ",")
 		timestamp, err := time.Parse(wireguard.TIMESTAMP_FORMAT, inputSplit[0])
 		if err != nil {
@@ -301,7 +304,15 @@ func (c *Context) ipLogsHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	out, err := json.Marshal(LogDataResponse{Enabled: true, LogData: logData})
+	// logtypes
+	packetLogTypes := []string{}
+	for k, enabled := range vpnConfig.PacketLogsTypes {
+		if enabled {
+			packetLogTypes = append(packetLogTypes, k)
+		}
+	}
+
+	out, err := json.Marshal(LogDataResponse{Enabled: true, LogData: logData, LogTypes: packetLogTypes})
 	if err != nil {
 		c.returnError(w, fmt.Errorf("user stats response marshal error: %s", err), http.StatusBadRequest)
 		return

pkg/rest/types.go

@@ -209,8 +209,9 @@ type NewUserRequest struct {
 }
 
 type LogDataResponse struct {
-	LogData LogData `json:"logData"`
-	Enabled bool    `json:"enabled"`
+	LogData  LogData  `json:"logData"`
+	Enabled  bool     `json:"enabled"`
+	LogTypes []string `json:"logTypes"`
 }
 
 type LogData struct {

webapp/package.json

@@ -15,7 +15,6 @@
     "@mantine/dates": "^7.12.1",
     "@mantine/form": "^7.10.0",
     "@mantine/hooks": "^7.9.2",
-    "@tabler/icons-react": "^3.4.0",
     "@tanstack/react-query": "^5.36.2",
     "axios": "^1.7.4",
     "base32-encode": "^2.0.0",
@@ -27,6 +26,7 @@
     "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
     "react-hook-qrcode-svg": "^1.5.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {

webapp/src/App.tsx

@@ -18,6 +18,7 @@ import { Users } from "./Routes/Users/Users";
 import { Profile } from "./Routes/Profile/Profile";
 import { Upgrade } from "./Routes/Upgrade/Upgrade";
 import { GetMoreLicenses } from "./Routes/Licenses/GetMoreLicenses";
+import { PacketLogs } from "./Routes/Logs/PacketLogs";
 
 const queryClient = new QueryClient()
 
@@ -44,6 +45,7 @@ export default function App() {
                           <Route path="/" element={<Home />} />
                           <Route path="/users" element={<CheckRole role="admin"><Users /></CheckRole>} />
                           <Route path="/setup" element={<CheckRole role="admin"><Setup /></CheckRole>} />
+                          <Route path="/setup/:page" element={<CheckRole role="admin"><Setup /></CheckRole>} />
                           <Route path="/auth-setup" element={<CheckRole role="admin"><AuthSetup /></CheckRole>} />
                           <Route path="/logout" element={<Logout />} />
                           <Route path="/login/:logintype/:id" element={<Navigate to={"/"} />} />
@@ -52,6 +54,7 @@ export default function App() {
                           <Route path="/profile" element={<Profile />} />
                           <Route path="/upgrade" element={<Upgrade />} />
                           <Route path="/licenses" element={<GetMoreLicenses />} />
+                          <Route path="/packetlogs" element={<PacketLogs />} />
                         </Routes>
                     </AppShell.Main>
                   </AppShell>

webapp/src/Auth/AuthBanner.tsx

@@ -18,7 +18,7 @@ import { AppSettings } from '../Constants/Constants';
 import { useAuthContext } from './Auth';
 import { AuthError } from './AuthError';
 import { MFAInput } from './MFAInput';
-import { IconInfoCircle } from '@tabler/icons-react';
+import { TbInfoCircle } from "react-icons/tb";
 
 
 type LoginResponse = {
@@ -117,7 +117,7 @@ export function AuthBanner() {
         authenticate.mutate({login, password, factorResponse})
       }
     }
-    const alertIcon = <IconInfoCircle />
+    const alertIcon = <TbInfoCircle />
 
     if (error) return 'An backend error has occurred: ' + error.message
 

webapp/src/Auth/AuthError.tsx

@@ -1,9 +1,9 @@
 import { Alert } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
+import { TbInfoCircle } from "react-icons/tb";
 import { useSearchParams } from "react-router-dom";
 
 export function AuthError() {
-    const alertIcon = <IconInfoCircle />;
+    const alertIcon = <TbInfoCircle />;
 
     let [ searchParams, _ ] = useSearchParams();
     if(!searchParams.has("error")) return ''

webapp/src/NavBar/NavBar.tsx

@@ -1,15 +1,18 @@
 import { useState } from 'react';
 import { Group, Code } from '@mantine/core';
 import {
-  IconBellRinging,
-  IconSettings,
-  IconLogout,
-  IconUser,
-  IconPlugConnected,
-  IconCloudDataConnection,
-  IconBook,
-  IconUserCircle,
-} from '@tabler/icons-react';
+  TbBellRinging,
+  TbSettings,
+  TbLogout,
+  TbUser,
+  TbPlugConnected,
+  TbCloudDataConnection,
+  TbBook,
+  TbUserCircle,
+
+} from 'react-icons/tb';
+import { FaStream } from "react-icons/fa";
+
 import classes from './Navbar.module.css';
 import { NavLink, useLocation } from 'react-router-dom';
 import { useAuthContext } from '../Auth/Auth';
@@ -22,16 +25,17 @@ export function NavBar() {
   const [active, setActive] = useState(pathname);
 
   const data = authInfo.role === "admin" ? [
-    { link: '/', label: 'Status', icon: IconBellRinging },
-    { link: '/connection', label: 'VPN Connections', icon: IconPlugConnected },
-    { link: '/users', label: 'Users', icon: IconUser },
-    { link: '/setup', label: 'VPN Setup', icon: IconSettings },
-    { link: '/auth-setup', label: 'Authentication & Provisioning', icon: IconCloudDataConnection },
-    { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: IconBook },
+    { link: '/', label: 'Status', icon: TbBellRinging },
+    { link: '/connection', label: 'VPN Connections', icon: TbPlugConnected },
+    { link: '/users', label: 'Users', icon: TbUser },
+    { link: '/setup', label: 'VPN Setup', icon: TbSettings },
+    { link: '/auth-setup', label: 'Authentication & Provisioning', icon: TbCloudDataConnection },
+    { link: '/packetlogs', label: 'Logging', icon: FaStream },
+    { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: TbBook },
   ] : 
   [
-    { link: '/connection', label: 'VPN Connections', icon: IconPlugConnected },
-    { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: IconBook },
+    { link: '/connection', label: 'VPN Connections', icon: TbPlugConnected },
+    { link: 'https://vpn-documentation.in4it.com', label: 'Documentation', icon: TbBook },
   ];
 
   const links = data.map((item) => (
@@ -45,7 +49,7 @@ export function NavBar() {
         setActive(item.link);
       }}
     >
-      <item.icon className={classes.linkIcon} stroke={1.5} />
+      <item.icon className={classes.linkIcon} />
       <span>{item.label}</span>
     </NavLink>
   ));
@@ -62,14 +66,14 @@ export function NavBar() {
       <div className={classes.footer}>
         {authInfo.userType == "local" ?
           <NavLink to="/profile" className={classes.link} onClick={() => { setActive("/profile"); }} data-active={"/profile" === active || undefined}>
-            <IconUserCircle className={classes.linkIcon} stroke={1.5} />
+            <TbUserCircle className={classes.linkIcon} />
             <span>Profile</span>
           </NavLink>
           :
           null
         }
         <NavLink to="/logout" className={classes.link}>
-          <IconLogout className={classes.linkIcon} stroke={1.5} />
+          <TbLogout className={classes.linkIcon} />
           <span>Logout</span>
         </NavLink>
       </div>

webapp/src/NavBar/Navbar.module.css

@@ -60,4 +60,5 @@
     margin-right: var(--mantine-spacing-sm);
     width: rem(25px);
     height: rem(25px);
+    stroke-width: 1.25px;
   }

webapp/src/Routes/Connection/ListConnections.tsx

@@ -4,7 +4,7 @@ import { Table, ScrollArea, Button } from '@mantine/core';
 import classes from './ListConnections.module.css';
 import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { AppSettings } from '../../Constants/Constants';
-import { IconTrash } from '@tabler/icons-react';
+import { TbTrash } from 'react-icons/tb';
 import axios from 'axios';
 import { useAuthContext } from '../../Auth/Auth';
 import { Download } from './Download';
@@ -49,7 +49,7 @@ export function ListConnections() {
         <Table.Tr key={row.id}>
             <Table.Td>{row.name}</Table.Td>
             <Table.Td><Download id={row.id} name={row.name} /></Table.Td>
-            <Table.Td><Button onClick={() => deleteConnection.mutate(row.id)}><IconTrash size={15} /></Button></Table.Td>
+            <Table.Td><Button onClick={() => deleteConnection.mutate(row.id)}><TbTrash size={15} /></Button></Table.Td>
         </Table.Tr>
     ));
 

webapp/src/Routes/Connection/NewConnection.tsx

@@ -4,13 +4,13 @@ import axios, { AxiosError } from "axios"
 import { useAuthContext } from "../../Auth/Auth";
 import { useState } from "react";
 import { Alert, Button } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
+import { TbInfoCircle } from "react-icons/tb";
 
 export function NewConnection() {
     const queryClient = useQueryClient()
     const {authInfo} = useAuthContext();
     const [newConnectionError, setError] = useState<string>("")
-    const alertIcon = <IconInfoCircle />
+    const alertIcon = <TbInfoCircle />
     const newConnection = useMutation({
         mutationFn: () => {
           return axios.post(AppSettings.url + '/connections', {}, {

webapp/src/Routes/Home/Home.tsx

@@ -6,7 +6,7 @@ import classes from './Home.module.css';
 import { AppSettings } from '../../Constants/Constants';
 import { useQuery } from '@tanstack/react-query';
 import { UpgradeAlert } from './UpgradeAlert';
-import { IconPaperBag } from '@tabler/icons-react';
+import { TbPaperBag } from 'react-icons/tb';
 import { UserStats } from './UserStats';
 
 export function Home() {
@@ -54,7 +54,7 @@ export function Home() {
       {isPending || data.cloudType === "aws-marketplace" || data.cloudType === "azure" ? null : 
       <Card.Section inheritPadding mt="sm" pb="md">
           <Link to="/licenses">
-            <Button leftSection={<IconPaperBag size={14} />} fz="sm" mt="md" radius="md" variant="default" size="sm">
+            <Button leftSection={<TbPaperBag size={14} />} fz="sm" mt="md" radius="md" variant="default" size="sm">
               Get more licenses
             </Button>
           </Link>

webapp/src/Routes/Home/UpgradeAlert.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { AppSettings } from '../../Constants/Constants';
 import { useQuery } from '@tanstack/react-query';
-import { IconInfoCircle } from '@tabler/icons-react';
+import { TbInfoCircle } from "react-icons/tb";
 
 export function UpgradeAlert() {
   const {authInfo} = useAuthContext()
@@ -26,7 +26,7 @@ export function UpgradeAlert() {
   if (error) return ''
   if (isPending) return ''
 
-  const alertIcon = <IconInfoCircle />
+  const alertIcon = <TbInfoCircle />
 
   if (!data.newVersionAvailable) return ''
 

webapp/src/Routes/Licenses/GetMoreLicenses.tsx

@@ -4,7 +4,7 @@ import classes from './GetMoreLicenses.module.css';
 
 import { AppSettings } from '../../Constants/Constants';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { IconInfoCircle } from '@tabler/icons-react';
+import { TbInfoCircle } from "react-icons/tb";
 import { useState } from 'react';
 
 export function GetMoreLicenses() {
@@ -36,7 +36,7 @@ export function GetMoreLicenses() {
   if (error) return 'cannot retrieve licensed users'
   if (isPending) return 'Loading...'
 
-  const alertIcon = <IconInfoCircle />;
+  const alertIcon = <TbInfoCircle />;
 
   return (
     <Container my={40} size="40rem">