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

add: frontend update

Browse Source
This commit is contained in:
Domingo Dirutigliano
2024-10-13 01:50:52 +02:00
parent fffc9e3b89
commit cbf2c5a43d
53 changed files with 778 additions and 1255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/Firewall/SettingsModal.tsx
View File

@@ -48,7 +48,7 @@ export function SettingsModal({ opened, onClose }:{ opened:boolean, onClose:()=>
<Switch label="Drop invalid packet" checked={settings.drop_invalid} onChange={v => setSettings({...settings, drop_invalid:v.target.checked})}/>
<Space h="md" />
<Switch label="Allow DHCP" checked={settings.allow_dhcp} onChange={v => setSettings({...settings, allow_dhcp:v.target.checked})}/>
<Group position="right" mt="md">
<Group align="right" mt="md">
<Button loading={submitLoading} onClick={submitRequest}>Save Setting</Button>
</Group>
</Modal>

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

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Button, Divider, LoadingOverlay, Space, Switch, TextInput, Title, Tooltip, useMantineTheme } from "@mantine/core"
import { ActionIcon, Badge, Box, Button, Divider, LoadingOverlay, Space, Switch, TextInput, Title, Tooltip, useMantineTheme } from "@mantine/core"
import { useEffect, useState } from "react";
import { BsPlusLg, BsTrashFill } from "react-icons/bs"
import { rem } from '@mantine/core';
@@ -37,8 +37,8 @@ export const Firewall = () => {
const [applyChangeModal, setApplyChangeModal] = useState(false)
const [settingsModal, setSettingsModal] = useState(false)
const theme = useMantineTheme();
const isMedium = useMediaQuery(`(min-width: 950px)`)
const isSmall = useMediaQuery(`(max-width: 600px)`)
const isMedium = useMediaQuery(`(min-width: 950px)`)??true
const isSmall = useMediaQuery(`(max-width: 600px)`)??false
const [updateMevalueinternal, internalUpdateme] = useState(false)
const updateMe = () => {
@@ -104,7 +104,7 @@ export const Firewall = () => {
const condDiv = (val:React.ReactNode, cond:boolean) => {
if (cond)
return <div>{val}</div>
return <Box>{val}</Box>
else
return val
}
@@ -201,18 +201,18 @@ export const Firewall = () => {
dst_port: disabletab.dst_port?disable_style:{}
}
return <div
return <Box
ref={provided.innerRef}
{...provided.draggableProps}
>
<div className='center-flex' style={{width:"100%"}}>
<div {...provided.dragHandleProps}>
<Box className='center-flex' style={{width:"100%"}}>
<Box {...provided.dragHandleProps}>
<TbGripVertical style={{ width: rem(30), height: rem(40) }} />
</div>
</Box>
<Space w="sm" />
<div className={isMedium?"center-flex":"center-flex-row"} style={{width:"100%"}}>
<div className="center-flex-row" style={{width:"100%"}}>
<div className="center-flex" style={{width:"97%"}}>
<Box className={isMedium?"center-flex":"center-flex-row"} style={{width:"100%"}}>
<Box className="center-flex-row" style={{width:"100%"}}>
<Box className="center-flex" style={{width:"97%"}}>
<Switch
checked={item.active}
onChange={() =>{
@@ -239,10 +239,10 @@ export const Firewall = () => {
<ActionIcon color="red" onClick={()=>handlers.remove(index)} size="lg" radius="md" variant="filled"><BsTrashFill size={18} /></ActionIcon>
<Space w="sm" />
<TextInput defaultValue={item.name} onChange={(v)=>{item.name = v.target.value;updateMe()}} style={{width:"100%"}}/>
</div>
</Box>
<Space h="sm" />
<div className="center-flex" style={{width:"97%"}}>
<div style={{width:"100%"}}>
<Box className="center-flex" style={{width:"97%"}}>
<Box style={{width:"100%"}}>
<InterfaceInput
initialCustomInterfaces={[...src_custom_int, ...customInt]}
value={item.src}
@@ -250,7 +250,7 @@ export const Firewall = () => {
includeInterfaceNames
/>
<Space h="sm" />
<div className="center-flex" style={{width:"100%"}}>
<Box className="center-flex" style={{width:"100%"}}>
<OnOffButton value={srcPortEnabled} onClick={() =>{
const value = !srcPortEnabled
setSrcPortEnabled(value)
@@ -270,12 +270,12 @@ export const Firewall = () => {
error={!disabletab.src_port && !srcPortValue}
style={{width:"100%", ...additionalStyle.src_port}}
/>
</div>
</div>
</Box>
</Box>
<Space w="lg" />
<LuArrowBigRightDash size={100} />
<Space w="lg" />
<div style={{width:"100%"}}>
<Box style={{width:"100%"}}>
<InterfaceInput
initialCustomInterfaces={[...dst_custom_int, ...customInt]}
defaultValue={item.dst}
@@ -283,7 +283,7 @@ export const Firewall = () => {
includeInterfaceNames
/>
<Space h="sm" />
<div className="center-flex" style={{width:"100%"}}>
<Box className="center-flex" style={{width:"100%"}}>
<OnOffButton value={dstPortEnabled} onClick={() =>{
const value = !dstPortEnabled
setDstPortEnabled(value)
@@ -303,12 +303,12 @@ export const Firewall = () => {
error={!disabletab.dst_port && !dstPortValue}
style={{width:"100%", ...additionalStyle.dst_port}}
/>
</div>
</div>
</div>
</div>
</Box>
</Box>
</Box>
</Box>
{!isMedium?<Space h="sm" />:null}
<div className={isMedium?"center-flex-row":"center-flex"} style={isMedium?{}:{width:"100%", justifyContent:"space-around"}}>
<Box className={isMedium?"center-flex-row":"center-flex"} style={isMedium?{}:{width:"100%", justifyContent:"space-around"}}>
{condDiv(<>{condDiv(<ModeSelector
value={item.mode}
onChange={(value)=>{item.mode = value as RuleMode;updateMe()}}
@@ -326,13 +326,13 @@ export const Firewall = () => {
onChange={(value)=>{item.action = value as ActionType;updateMe()}}
style={{width:"100%"}}
/>, !isMedium)}
</div>
</div>
</div>
</Box>
</Box>
</Box>
<Space h="md" />
<Divider />
<Space h="md" />
</div>
</Box>
}}
</Draggable>
));
@@ -341,10 +341,10 @@ export const Firewall = () => {
return <>
<Space h="sm" />
<LoadingOverlay visible={rules.isLoading} />
<div className={isMedium?'center-flex':'center-flex-row'}>
<Box className={isMedium?'center-flex':'center-flex-row'}>
<Title order={3}>Firewall Rules</Title>
{isMedium?<div className='flex-spacer' />:<Space h="sm" />}
<div className='center-flex'>
{isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
<Box className='center-flex'>
Enabled: <Space w="sm" /> <Switch checked={fwEnabled} onChange={switchState} />
<Space w="sm" />
Policy:
@@ -353,9 +353,9 @@ export const Firewall = () => {
value={currentPolicy}
onChange={(value)=>setCurrentPolicy(value as ActionType)}
/>
</div>
{isMedium?<div className='flex-spacer' />:<Space h="sm" />}
<div className='center-flex'>
</Box>
{isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
<Box className='center-flex'>
<Space w="xs" />
<Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
<Space w="xs" />
@@ -385,8 +385,8 @@ export const Firewall = () => {
disabled={!valuesChanged}
><TiTick size={22} /></ActionIcon>
</Tooltip>
</div>
</div>
</Box>
</Box>
<Space h="xl" />
<Divider />
{items.length > 0?<DragDropContext
@@ -397,22 +397,22 @@ export const Firewall = () => {
<Space h="md" />
<Droppable droppableId="dnd-list" direction="vertical">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
<Box {...provided.droppableProps} ref={provided.innerRef}>
{items}
{provided.placeholder}
</div>
</Box>
)}
</Droppable>
</DragDropContext>:<>
<Space h="xl"/> <Title className='center-flex' align='center' order={3}>No rule found! Add one clicking the "+" buttons</Title>
<Space h="xl"/> <Title className='center-flex' style={{textAlign:"center"}} order={3}>No rule found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Box className='center-flex'>
<Tooltip label="Add a new rule" color="blue" opened={tooltipAddRulOpened}>
<ActionIcon color="blue" onClick={emptyRuleAdd} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddRulOpened(false)} onBlur={() => setTooltipAddRulOpened(false)}
onMouseEnter={() => setTooltipAddRulOpened(true)} onMouseLeave={() => setTooltipAddRulOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</Box>
</>}
<YesNoModal

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

@@ -1,4 +1,4 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Box, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { useState } from 'react';
import { Navigate, useParams } from 'react-router-dom';
import RegexView from '../../components/RegexView';
@@ -23,19 +23,19 @@ function ServiceDetailsNFRegex() {
<ServiceRow service={serviceInfo} />
{(!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>
<Title className='center-flex' style={{textAlign:"center"}} order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Box className='center-flex'>
<Tooltip label="Add a new regex" zIndex={0} color="blue" opened={tooltipAddRegexOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-AddRegex-id"
onFocus={() => setTooltipAddRegexOpened(false)} onBlur={() => setTooltipAddRegexOpened(false)}
onMouseEnter={() => setTooltipAddRegexOpened(true)} onMouseLeave={() => setTooltipAddRegexOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</Box>
</>:
<Grid>
{regexesList.data?.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} span={{ lg:6, xs: 12 }}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
</Grid>
}

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

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Badge, Box, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
@@ -32,19 +32,19 @@ function NFRegex({ children }: { children: any }) {
return <>
<Space h="sm" />
<div className={isMedium?'center-flex':'center-flex-row'}>
<Box className={isMedium?'center-flex':'center-flex-row'}>
<Title order={4}>Netfilter Regex</Title>
{isMedium?<div className='flex-spacer' />:<Space h="sm" />}
<div className='center-flex' >
{isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
<Box className='center-flex' >
<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: {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: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
<Space w="xs" />
</div>
</Box>
{isMedium?null:<Space h="md" />}
<div className='center-flex' >
<Box className='center-flex' >
{ srv?
<Tooltip label="Add a new regex" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
@@ -64,28 +64,26 @@ function NFRegex({ children }: { children: any }) {
onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
</Tooltip>
</div>
</div>
</Box>
</Box>
<Space h="md" />
<Divider size="md" style={{width:"100%"}}/>
<div id="service-list" className="center-flex-row">
<Box className="center-flex-row" style={{gap: 20}}>
{srv?null:<>
<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" />
<div className='center-flex'>
}} />):<><Space h="xl"/> <Title className='center-flex' style={{textAlign:"center"}} order={3}>No services found! Add one clicking the "+" buttons</Title>
<Box className='center-flex'>
<Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</Box>
</>}
<AddNewService opened={open} onClose={closeModal} />
</>}
</div>
</Box>
{srv?children:null}
{srv?
<AddNewRegex opened={open} onClose={closeModal} service={srv} />:

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

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Badge, Box, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import ServiceRow from '../../components/PortHijack/ServiceRow';
@@ -29,10 +29,10 @@ function PortHijack() {
return <>
<Space h="sm" />
<div className={isMedium?'center-flex':'center-flex-row'}>
<Box className={isMedium?'center-flex':'center-flex-row'}>
<Title order={4}>Hijack port to proxy</Title>
{isMedium?<div className='flex-spacer' />:<Space h="sm" />}
<div className='center-flex'>
{isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
<Box className='center-flex'>
<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}>
@@ -47,25 +47,23 @@ function PortHijack() {
onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
</Tooltip>
</div>
</div>
<Space h="md" /><Divider size="sm" style={{width:"100%"}}/>
<div id="service-list" className="center-flex-row">
</Box>
</Box>
<Space h="md" />
<Box className="center-flex-row" style={{gap: 20}}>
<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" />
<div className='center-flex'>
<Space h="xl"/> <Title className='center-flex' style={{textAlign:"center"}} order={3}>No services found! Add one clicking the "+" buttons</Title>
<Box className='center-flex'>
<Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</Box>
</>}
<AddNewService opened={open} onClose={closeModal} />
</div>
</Box>
</>
}

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

@@ -1,4 +1,4 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Box, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { useState } from 'react';
import { Navigate, useParams } from 'react-router-dom';
import { BsPlusLg } from "react-icons/bs";
@@ -18,31 +18,31 @@ function ServiceDetailsProxyRegex() {
if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
return <div>
return <Box>
<LoadingOverlay visible={regexesList.isLoading} />
<ServiceRow service={serviceInfo} />
{(!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>
<Title className='center-flex' style={{textAlign:"center"}} order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Box className='center-flex'>
<Tooltip label="Add a new regex" zIndex={0} color="blue" opened={tooltipAddRegexOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-AddRegex-id"
onFocus={() => setTooltipAddRegexOpened(false)} onBlur={() => setTooltipAddRegexOpened(false)}
onMouseEnter={() => setTooltipAddRegexOpened(true)} onMouseLeave={() => setTooltipAddRegexOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</Box>
</>:
<Grid>
{regexesList.data.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} span={{ lg:6, xs: 12 }}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
</Grid>
}
{srv?<AddNewRegex opened={open} onClose={() => {setOpen(false)}} service={srv} />:null}
</div>
</Box>
}
export default ServiceDetailsProxyRegex;

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

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Badge, Box, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
@@ -33,9 +33,9 @@ function RegexProxy({ children }: { children: any }) {
return <>
<Space h="sm" />
<div className='center-flex'>
<Box className='center-flex'>
<Title order={4}>TCP Proxy Regex Filter (IPv4 Only)</Title>
<div className='flex-spacer' />
<Box className='flex-spacer' />
<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: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
@@ -61,25 +61,25 @@ function RegexProxy({ children }: { children: any }) {
onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
</Tooltip>
</div>
<div id="service-list" className="center-flex-row">
</Box>
<Box className="center-flex-row">
{srv?null:<>
<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"/> <Title className='center-flex' style={{textAlign:"center"}} order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" />
<div className='center-flex'>
<Box className='center-flex'>
<Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</Box>
</>}
<AddNewService opened={open} onClose={closeModal} />
</>}
</div>
</Box>
{srv?children:null}
{srv?
<AddNewRegex opened={open} onClose={closeModal} service={srv} />: