0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

react-query + enable/disable firewall

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-09-24 05:48:54 +02:00
parent 732680753c
commit 4247dc181d
36 changed files with 283 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/App.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Loader, LoadingOverlay, Notification, Space, PasswordInput, Title } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ImCross } from 'react-icons/im';
import { Outlet, Route, Routes } from 'react-router-dom';
import MainLayout from './components/MainLayout';
@@ -52,11 +52,6 @@ function App() {
}
},[])
useEffect(()=>{
const updater = setInterval(fireUpdateRequest,6000)
return () => clearInterval(updater)
},[])
const form = useForm({
initialValues: {
password:"",

2
frontend/src/components/AddNewRegex.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { RegexAddForm } from '../js/models';
import { b64decode, b64encode, getapiobject, okNotify } from '../js/utils';
import { ImCross } from "react-icons/im"

26
frontend/src/components/Firewall/utils.ts
View File

@@ -1,10 +1,7 @@
import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
import { useQuery } from "@tanstack/react-query"
import { ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
export type GeneralStats = {
rules:number,
}
export enum Protocol {
TCP = "tcp",
UDP = "udp",
@@ -37,6 +34,12 @@ export type Rule = {
}
export type RuleInfo = {
rules: Rule[]
policy: ActionType,
enabled: boolean
}
export type RuleAddForm = {
rules: Rule[]
policy: ActionType
}
@@ -46,14 +49,19 @@ export type ServerResponseListed = {
status:(ServerResponse & {rule_id:number})[]|string,
}
export const rulesQueryKey = ["firewall","rules"]
export const firewallRulesQuery = () => useQuery({queryKey:rulesQueryKey, queryFn:firewall.rules})
export const firewall = {
stats: async () => {
return await getapi("firewall/stats") as GeneralStats;
},
rules: async() => {
return await getapi("firewall/rules") as RuleInfo;
},
enable: async() => {
return await getapi("firewall/enable") as ServerResponse;
},
disable: async() => {
return await getapi("firewall/disable") as ServerResponse;
},
rulenable: async (rule_id:number) => {
return await getapi(`firewall/rule/${rule_id}/enable`) as ServerResponse;
},
@@ -64,7 +72,7 @@ export const firewall = {
const { status } = await postapi(`firewall/rule/${rule_id}/rename`,{ name }) as ServerResponse;
return status === "ok"?undefined:status
},
servicesadd: async (data:RuleInfo) => {
servicesadd: async (data:RuleAddForm) => {
return await postapi("firewall/rules/set", data) as ServerResponseListed;
}
}

2
frontend/src/components/Header/ResetModal.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Modal, Notification, Space, Switch, Text } from "@mantine/core";
import { useForm } from "@mantine/form";
import React, { useState } from "react"
import { useState } from "react"
import { ImCross } from "react-icons/im";
import { okNotify, resetfiregex } from "../../js/utils";

2
frontend/src/components/Header/ResetPasswordModal.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Modal, Notification, PasswordInput, Space, Switch } from "@mantine/core";
import { useForm } from "@mantine/form";
import React, { useState } from "react"
import { useState } from "react"
import { ImCross } from "react-icons/im";
import { ChangePassword } from "../../js/models";
import { changepassword, okNotify } from "../../js/utils";

4
frontend/src/components/MainLayout.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { ActionIcon, Container, Menu, Space, ThemeIcon } from '@mantine/core';
import { useEffect, useState } from 'react';
import { ActionIcon, Container, Menu, Space } from '@mantine/core';
import { AppShell } from '@mantine/core';
import NavBar from './NavBar';
import FooterPage from './Footer';

2
frontend/src/components/NFRegex/AddNewService.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { okNotify, regex_ipv4, regex_ipv6 } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { nfregex } from './utils';

2
frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { nfregex, Service } from '../utils';

9
frontend/src/components/NFRegex/ServiceRow/index.tsx
View File

@@ -1,7 +1,7 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { useState } from 'react';
import { FaPlay, FaStop } from 'react-icons/fa';
import { nfregex, Service } from '../utils';
import { nfregex, Service, serviceQueryKey } from '../utils';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./index.module.scss";
import YesNoModal from '../../YesNoModal';
@@ -10,6 +10,7 @@ import { BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm';
import { MenuDropDownWithButton } from '../../MainLayout';
import { useQueryClient } from '@tanstack/react-query';
function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -19,6 +20,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
case "active": status_color = "teal"; break;
}
const queryClient = useQueryClient()
const [buttonLoading, setButtonLoading] = useState(false)
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
const [deleteModal, setDeleteModal] = useState(false)
@@ -30,6 +32,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
await nfregex.servicestop(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
queryClient.invalidateQueries(serviceQueryKey)
}else{
errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
}
@@ -44,6 +47,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
await nfregex.servicestart(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
queryClient.invalidateQueries(serviceQueryKey)
}else{
errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
}
@@ -57,6 +61,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
nfregex.servicedelete(service.service_id).then(res => {
if (!res){
okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
queryClient.invalidateQueries(serviceQueryKey)
}else
errorNotify("An error occurred while deleting a service",`Error: ${res}`)
}).catch(err => {

17
frontend/src/components/NFRegex/utils.ts
View File

@@ -1,12 +1,7 @@
import { RegexFilter, ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
import { RegexAddForm } from "../../js/models"
export type GeneralStats = {
services:number,
closed:number,
regexes:number
}
import { useQuery, useQueryClient } from "@tanstack/react-query"
export type Service = {
name:string,
@@ -31,12 +26,16 @@ export type ServiceAddResponse = {
service_id?: string,
}
export const serviceQueryKey = ["nfregex","services"]
export const statsQueryKey = ["nfregex","stats"]
export const nfregexServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:nfregex.services})
export const nfregexServiceRegexesQuery = (service_id:string) => useQuery({
queryKey:[...serviceQueryKey,service_id,"regexes"],
queryFn:() => nfregex.serviceregexes(service_id)
})
export const nfregex = {
stats: async () => {
return await getapi("nfregex/stats") as GeneralStats;
},
services: async () => {
return await getapi("nfregex/services") as Service[];
},

10
frontend/src/components/NavBar/index.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Collapse, Divider, Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
import { Collapse, Divider, Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
import { useState } from "react";
import { IoMdGitNetwork } from "react-icons/io";
import { MdOutlineExpandLess, MdOutlineExpandMore, MdTransform } from "react-icons/md";
@@ -37,10 +37,8 @@ function NavBarButton({ navigate, closeNav, name, icon, color, disabled, onClick
}
export default function NavBar({ closeNav, opened }: {closeNav: () => void, opened: boolean}) {
const [toggleState, setToggleState] = useState(false);
const advancedPaths = ["regexproxy"]
const advancedSelected = advancedPaths.includes(getmainpath())
const toggle = (toggleState||advancedSelected)
const [toggle, setToggleState] = useState(false);
return <Navbar p="md" hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
<Navbar.Section px="xs" mt="xs">
@@ -53,7 +51,7 @@ export default function NavBar({ closeNav, opened }: {closeNav: () => void, open
<NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="lime" icon={<IoMdGitNetwork />} />
<NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="blue" icon={<GrDirections />} />
<Divider my="xs" label="Advanced" labelPosition="center" />
<NavBarButton closeNav={closeNav} name="Deprecated options" color="gray" icon={toggle ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />} onClick={()=>setToggleState(!toggleState)} disabled={advancedSelected}/>
<NavBarButton closeNav={closeNav} name="Deprecated options" color="gray" icon={toggle ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />} onClick={()=>setToggleState(!toggle)}/>
<Collapse in={toggle}>
<NavBarButton navigate="regexproxy" closeNav={closeNav} name="TCP Proxy Regex Filter" color="grape" icon={<MdTransform />} />
</Collapse>

2
frontend/src/components/PortAndInterface.tsx
View File

@@ -1,4 +1,4 @@
import { Autocomplete, AutocompleteItem, Select, Space, Title } from "@mantine/core"
import { AutocompleteItem, Select, Space, Title } from "@mantine/core"
import React, { useEffect, useState } from "react"
import { getipinterfaces } from "../js/utils";
import PortInput from "./PortInput";

2
frontend/src/components/PortHijack/AddNewService.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { okNotify, regex_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { porthijack } from './utils';

2
frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify, regex_ipv4_no_cidr, regex_ipv6_no_cidr } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { porthijack, Service } from '../utils';

2
frontend/src/components/PortHijack/ServiceRow/RenameForm.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { porthijack, Service } from '../utils';

10
frontend/src/components/PortHijack/utils.ts
View File

@@ -1,5 +1,6 @@
import { ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
import { UseQueryOptions, useQuery } from "@tanstack/react-query"
export type GeneralStats = {
services:number
@@ -27,11 +28,12 @@ export type ServiceAddForm = {
export type ServiceAddResponse = ServerResponse & { service_id: string }
export const queryKey = ["porthijack","services"]
export const porthijackServiceQuery = () => useQuery({queryKey, queryFn:porthijack.services})
export const porthijack = {
stats: async () => {
return await getapi("porthijack/stats") as GeneralStats;
},
services: async () => {
services: async () : Promise<Service[]> => {
return await getapi("porthijack/services") as Service[];
},
serviceinfo: async (service_id:string) => {

2
frontend/src/components/RegexProxy/AddNewService.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useState } from 'react';
import { useState } from 'react';
import { okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { regexproxy } from './utils';

2
frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx
View File

@@ -1,6 +1,6 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { regexproxy, Service } from '../utils';

2
frontend/src/components/RegexProxy/ServiceRow/index.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { useState } from 'react';
import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./ServiceRow.module.scss";

19
frontend/src/components/RegexProxy/utils.ts
View File

@@ -1,12 +1,7 @@
import { useQuery } from "@tanstack/react-query"
import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
export type GeneralStats = {
services:number,
closed:number,
regexes:number
}
export type Service = {
id:string,
name:string,
@@ -33,10 +28,16 @@ export type ChangePort = {
internalPort?: number
}
export const serviceQueryKey = ["regexproxy","services"]
export const regexproxyServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:regexproxy.services})
export const regexproxyServiceRegexesQuery = (service_id:string) => useQuery({
queryKey:[...serviceQueryKey,service_id,"regexes"],
queryFn:() => regexproxy.serviceregexes(service_id)
})
export const regexproxy = {
stats: async () => {
return await getapi("regexproxy/stats") as GeneralStats;
},
services: async() => {
return await getapi("regexproxy/services") as Service[];
},

2
frontend/src/components/RegexView/index.tsx
View File

@@ -1,5 +1,5 @@
import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { useState } from 'react';
import { RegexFilter } from '../../js/models';
import { b64decode, errorNotify, getapiobject, okNotify } from '../../js/utils';
import style from "./index.module.scss";

19
frontend/src/index.tsx
View File

@@ -5,15 +5,22 @@ import './index.scss';
import App from './App';
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import {
QueryClientProvider,
} from '@tanstack/react-query'
import { queryClient } from './js/utils';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles withNormalizeCSS>
<Notifications />
<BrowserRouter>
<App />
</BrowserRouter>
</MantineProvider>
<QueryClientProvider client={queryClient}>
<MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles withNormalizeCSS>
<Notifications />
<BrowserRouter>
<App />
</BrowserRouter>
</MantineProvider>
</QueryClientProvider>
);

31
frontend/src/js/utils.tsx
View File

@@ -6,17 +6,25 @@ import { nfregex } from "../components/NFRegex/utils";
import { regexproxy } from "../components/RegexProxy/utils";
import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
import { Buffer } from "buffer"
import { QueryClient } from "@tanstack/react-query";
export const IS_DEV = import.meta.env.DEV
export const eventUpdateName = "update-info"
export const regex_ipv6 = "^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))?$";
export const regex_ipv6_no_cidr = "^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*$";
export const regex_ipv4 = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\\/(3[0-2]|[1-2][0-9]|[0-9]))?$"
export const regex_ipv4_no_cidr = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
export const DEV_IP_BACKEND = "192.168.230.3:4444"
export const DEV_IP_BACKEND = "192.168.231.3:4444"
export const queryClient = new QueryClient({ defaultOptions: { queries: {
staleTime: Infinity,
refetchInterval: 10*1000,
retry(failureCount, error) {
if (error == "Bad Request") return false;
return failureCount < 3;
},
} }})
export async function getapi(path:string):Promise<any>{
@@ -35,6 +43,19 @@ export async function getapi(path:string):Promise<any>{
});
}
export function getErrorMessage(e: any) {
let error = "Unknown error";
if (e.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
error = e.response.data.error;
} else {
// Something happened in setting up the request that triggered an Error
error = e.message || e.error;
}
return error;
}
export async function postapi(path:string,data:any,is_form:boolean=false):Promise<any>{
return await new Promise((resolve, reject) => {
fetch(`${IS_DEV?`http://${DEV_IP_BACKEND}`:""}/api/${path}`, {
@@ -80,8 +101,8 @@ export function HomeRedirector(){
return <Navigate to={path} />
}
export function fireUpdateRequest(){
window.dispatchEvent(new Event(eventUpdateName))
export function fireUpdateRequest(){ //TODO: change me: specify what to update
queryClient.invalidateQueries({ queryKey: [] })
}

41
frontend/src/pages/Firewall/index.tsx
View File

@@ -1,48 +1,35 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from "@mantine/core"
import { useEffect, useState } from "react";
import { BsPlusLg } from "react-icons/bs"
import { ActionType, GeneralStats, RuleInfo, firewall } from "../../components/Firewall/utils";
import { errorNotify, eventUpdateName, fireUpdateRequest } from "../../js/utils";
import { useWindowEvent } from "@mantine/hooks";
import { firewall, firewallRulesQuery } from "../../components/Firewall/utils";
import { errorNotify, getErrorMessage } from "../../js/utils";
export const Firewall = () => {
const [generalStats, setGeneralStats] = useState<GeneralStats>({ rules: 0 });
const [rules, setRules] = useState<RuleInfo>({rules:[], policy:ActionType.ACCEPT});
const [loader, setLoader] = useState(true);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [open, setOpen] = useState(false);
const rules = firewallRulesQuery()
const updateInfo = async () => {
await Promise.all([
firewall.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
firewall.rules().then(res => {
setRules(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
useEffect(()=> {
if(rules.isError)
errorNotify("Firewall Update failed!", getErrorMessage(rules.error))
},[rules.isError])
return <>
<Space h="sm" />
<div className='center-flex'>
<Title order={4}>Firewall Rules</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Rules: {generalStats.rules}</Badge>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Policy: {rules.isLoading?"unknown":rules.data?.policy}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Enabled: {rules.isLoading?"?":(rules.data?.enabled?"🟢":"🔴")}</Badge>
<Space w="xs" />
<Tooltip label="Add a new rule" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
@@ -50,6 +37,6 @@ export const Firewall = () => {
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
</div>
<LoadingOverlay visible={loader} />
<LoadingOverlay visible={rules.isLoading} />
</>
}

66
frontend/src/pages/NFRegex/ServiceDetails.tsx
View File

@@ -1,65 +1,27 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useState } from 'react';
import { Navigate, useParams } from 'react-router-dom';
import RegexView from '../../components/RegexView';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import AddNewRegex from '../../components/AddNewRegex';
import { BsPlusLg } from "react-icons/bs";
import { nfregex, Service } from '../../components/NFRegex/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { useWindowEvent } from '@mantine/hooks';
import { RegexFilter } from '../../js/models';
import { nfregexServiceQuery, nfregexServiceRegexesQuery } from '../../components/NFRegex/utils';
function ServiceDetailsNFRegex() {
const {srv} = useParams()
const [serviceInfo, setServiceInfo] = useState<Service>({
service_id: "",
port:0,
n_packets:0,
n_regex:0,
name:"",
status:"🤔",
ip_int: "",
proto: "tcp",
})
const [open, setOpen] = useState(false)
const services = nfregexServiceQuery()
const serviceInfo = services.data?.find(s => s.service_id == srv)
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false)
const regexesList = nfregexServiceRegexesQuery(srv??"")
const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
const [loader, setLoader] = useState(true);
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);updateInfo();}
const updateInfo = async () => {
if (!srv) return
let error = false;
await nfregex.serviceinfo(srv).then(res => {
setServiceInfo(res)
}).catch(
err =>{
error = true;
navigator("/")
})
if (error) return
await nfregex.serviceregexes(srv).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${srv} service failed [Regex list]!`, err.toString())
)
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const navigator = useNavigate()
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
return <>
<LoadingOverlay visible={loader} />
<LoadingOverlay visible={regexesList.isLoading} />
<ServiceRow service={serviceInfo} />
{regexesList.length === 0?<>
{(!regexesList.data || regexesList.data.length == 0)?<>
<Space h="xl" />
<Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
@@ -73,11 +35,11 @@ function ServiceDetailsNFRegex() {
</div>
</>:
<Grid>
{regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
{regexesList.data?.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
</Grid>
}
{srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
{srv?<AddNewRegex opened={open} onClose={() => {setOpen(false);}} service={srv} />:null}
</>
}

47
frontend/src/pages/NFRegex/index.tsx
View File

@@ -1,45 +1,30 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import { GeneralStats, nfregex, Service } from '../../components/NFRegex/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { nfregexServiceQuery } from '../../components/NFRegex/utils';
import { errorNotify, getErrorMessage } from '../../js/utils';
import AddNewService from '../../components/NFRegex/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
import AddNewRegex from '../../components/AddNewRegex';
function NFRegex({ children }: { children: any }) {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const navigator = useNavigate()
const [open, setOpen] = useState(false);
const {srv} = useParams()
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const updateInfo = async () => {
await Promise.all([
nfregex.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
nfregex.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const services = nfregexServiceQuery()
useEffect(()=> {
if(services.isError){
errorNotify("NFRegex Update failed!", getErrorMessage(services.error))
}
},[services.isError])
const closeModal = () => {setOpen(false);}
@@ -48,11 +33,11 @@ function NFRegex({ children }: { children: any }) {
<div className='center-flex'>
<Title order={4}>Netfilter Regex</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Services: {generalStats.services}</Badge>
<Badge size="sm" color="green" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
<Badge size="sm" color="violet" variant="filled">Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
<Space w="xs" />
{ srv?
<Tooltip label="Add a new regex" position='bottom' color="blue" opened={tooltipAddOpened}>
@@ -69,8 +54,8 @@ function NFRegex({ children }: { children: any }) {
</div>
<div id="service-list" className="center-flex-row">
{srv?null:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
<LoadingOverlay visible={services.isLoading} />
{(services.data && services.data?.length > 0)?services.data.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
navigator("/nfregex/"+srv.service_id)
}} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />

44
frontend/src/pages/PortHijack/index.tsx
View File

@@ -1,41 +1,26 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import ServiceRow from '../../components/PortHijack/ServiceRow';
import { GeneralStats, porthijack, Service } from '../../components/PortHijack/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { porthijackServiceQuery } from '../../components/PortHijack/utils';
import { errorNotify, getErrorMessage } from '../../js/utils';
import AddNewService from '../../components/PortHijack/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
function PortHijack() {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const [open, setOpen] = useState(false);
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({services:0});
const updateInfo = async () => {
await Promise.all([
porthijack.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
porthijack.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const services = porthijackServiceQuery()
useEffect(()=>{
if(services.isError){
errorNotify("Porthijack Update failed!", getErrorMessage(services.error))
}
},[services.isError])
const closeModal = () => {setOpen(false);}
@@ -44,7 +29,7 @@ function PortHijack() {
<div className='center-flex'>
<Title order={4}>Hijack port to proxy</Title>
<div className='flex-spacer' />
<Badge size="sm" color="yellow" variant="filled">Services: {generalStats.services}</Badge>
<Badge size="sm" color="yellow" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
<Space w="xs" />
<Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
@@ -53,8 +38,9 @@ function PortHijack() {
</Tooltip>
</div>
<div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<LoadingOverlay visible={services.isLoading} />
{(services.data && services.data.length > 0) ?services.data.map( srv => <ServiceRow service={srv} key={srv.service_id} />):<>
<Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>

65
frontend/src/pages/RegexProxy/ServiceDetails.tsx
View File

@@ -1,64 +1,27 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useState } from 'react';
import { Navigate, useParams } from 'react-router-dom';
import { BsPlusLg } from "react-icons/bs";
import { useWindowEvent } from '@mantine/hooks';
import { regexproxy, Service } from '../../components/RegexProxy/utils';
import { RegexFilter } from '../../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { regexproxyServiceQuery, regexproxyServiceRegexesQuery } from '../../components/RegexProxy/utils';
import ServiceRow from '../../components/RegexProxy/ServiceRow';
import AddNewRegex from '../../components/AddNewRegex';
import RegexView from '../../components/RegexView';
function ServiceDetailsProxyRegex() {
const {srv} = useParams()
const [open, setOpen] = useState(false)
const services = regexproxyServiceQuery()
const serviceInfo = services.data?.find(s => s.id == srv)
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false)
const regexesList = regexproxyServiceRegexesQuery(srv??"")
const [serviceInfo, setServiceInfo] = useState<Service>({
id:srv?srv:"",
internal_port:0,
n_packets:0,
n_regex:0,
name:srv?srv:"",
public_port:0,
status:"🤔"
})
const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
const [loader, setLoader] = useState(true);
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);updateInfo();}
const updateInfo = async () => {
if (!srv) return
let error = false;
await regexproxy.serviceinfo(srv).then(res => {
setServiceInfo(res)
}).catch(
err =>{
error = true;
navigator("/")
})
if (error) return
await regexproxy.serviceregexes(srv).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${srv} service failed [Regex list]!`, err.toString())
)
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const navigator = useNavigate()
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
return <div>
<LoadingOverlay visible={loader} />
<LoadingOverlay visible={regexesList.isLoading} />
<ServiceRow service={serviceInfo} />
{regexesList.length === 0?<>
{(!regexesList.data || regexesList.data.length == 0)?<>
<Space h="xl" />
<Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
@@ -72,11 +35,11 @@ function ServiceDetailsProxyRegex() {
</div>
</>:
<Grid>
{regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
{regexesList.data.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
</Grid>
}
{srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
{srv?<AddNewRegex opened={open} onClose={() => {setOpen(false)}} service={srv} />:null}
</div>

45
frontend/src/pages/RegexProxy/index.tsx
View File

@@ -1,46 +1,29 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/RegexProxy/ServiceRow';
import { GeneralStats, regexproxy, Service } from '../../components/RegexProxy/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { regexproxyServiceQuery } from '../../components/RegexProxy/utils';
import { errorNotify, getErrorMessage } from '../../js/utils';
import AddNewService from '../../components/RegexProxy/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
import AddNewRegex from '../../components/AddNewRegex';
function RegexProxy({ children }: { children: any }) {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const navigator = useNavigate()
const [open, setOpen] = useState(false);
const {srv} = useParams()
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const updateInfo = async () => {
await Promise.all([
regexproxy.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
regexproxy.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
const services = regexproxyServiceQuery()
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
useEffect(()=> {
if(services.isError){
errorNotify("RegexProxy Update failed!", getErrorMessage(services.error))
}
},[services.isError])
const closeModal = () => {setOpen(false);}
@@ -49,11 +32,11 @@ function RegexProxy({ children }: { children: any }) {
<div className='center-flex'>
<Title order={4}>TCP Proxy Regex Filter (IPv4 Only)</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Services: {generalStats.services}</Badge>
<Badge size="sm" color="green" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
<Badge size="sm" color="violet" variant="filled">Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
<Space w="xs" />
{ srv?
<Tooltip label="Add a new regex" position='bottom' color="blue" opened={tooltipAddOpened}>
@@ -70,8 +53,8 @@ function RegexProxy({ children }: { children: any }) {
</div>
<div id="service-list" className="center-flex-row">
{srv?null:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
<LoadingOverlay visible={services.isLoading} />
{(services.data && services.data?.length > 0)?services.data.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/regexproxy/"+srv.id)
}} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />