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

gui: reposive? yeah responsive

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-10-12 20:01:48 +02:00
parent 13a8711d13
commit 0e34805b4c
9 changed files with 189 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/Header/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ActionIcon, Divider, Image, Menu, Tooltip, MediaQuery, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core'; import { ActionIcon, Divider, Image, Menu, Tooltip, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core';
import style from "./index.module.scss"; import style from "./index.module.scss";
import { errorNotify, getmainpath, logout } from '../../js/utils'; import { errorNotify, getmainpath, isLargeScreen, logout } from '../../js/utils';
import { AiFillHome } from "react-icons/ai" import { AiFillHome } from "react-icons/ai"
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { FaLock } from 'react-icons/fa'; import { FaLock } from 'react-icons/fa';
@@ -32,10 +32,11 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
const [resetFiregexModal, setResetFiregexModal] = useState(false); const [resetFiregexModal, setResetFiregexModal] = useState(false);
const [tooltipHomeOpened, setTooltipHomeOpened] = useState(false); const [tooltipHomeOpened, setTooltipHomeOpened] = useState(false);
const [tooltipLogoutOpened,setTooltipLogoutOpened] = useState(false); const [tooltipLogoutOpened,setTooltipLogoutOpened] = useState(false);
const isLarge = isLargeScreen()
console.log(isLarge)
return <Header height={100} className={style.header} {...other}> return <Header height={100} className={style.header} {...other}>
<Space w="lg" /> <Space w="lg" />
<MediaQuery largerThan="md" styles={{ display: 'none' }}><div> {isLarge?null:<div>
<Burger <Burger
opened={navOpen} opened={navOpen}
className={style.navbtn} className={style.navbtn}
@@ -43,7 +44,7 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
size="sm" size="sm"
mr="xl" mr="xl"
/> />
</div></MediaQuery> </div>}
<div className={style.divlogo}> <div className={style.divlogo}>
<Tooltip zIndex={0} label="Home" openDelay={1000}color="dark" position="right" > <Tooltip zIndex={0} label="Home" openDelay={1000}color="dark" position="right" >
<Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/> <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>

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

@@ -1,11 +1,11 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Badge, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core';
import { useState } from 'react'; import { useState } from 'react';
import { FaPlay, FaStop } from 'react-icons/fa'; import { FaPlay, FaStop } from 'react-icons/fa';
import { nfregex, Service, serviceQueryKey } from '../utils'; import { nfregex, Service, serviceQueryKey } from '../utils';
import { MdOutlineArrowForwardIos } from "react-icons/md" import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./index.module.scss"; import style from "./index.module.scss";
import YesNoModal from '../../YesNoModal'; import YesNoModal from '../../YesNoModal';
import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils'; import { errorNotify, isMediumScreen, okNotify, regex_ipv4 } from '../../../js/utils';
import { BsTrashFill } from 'react-icons/bs'; import { BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi' import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm'; import RenameForm from './RenameForm';
@@ -25,6 +25,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const [tooltipStopOpened, setTooltipStopOpened] = useState(false); const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
const [deleteModal, setDeleteModal] = useState(false) const [deleteModal, setDeleteModal] = useState(false)
const [renameModal, setRenameModal] = useState(false) const [renameModal, setRenameModal] = useState(false)
const isMedium = isMediumScreen()
const stopService = async () => { const stopService = async () => {
setButtonLoading(true) setButtonLoading(true)
@@ -73,32 +74,17 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
return <> return <>
<Grid className={style.row} justify="flex-end" style={{width:"100%"}}> <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
<Grid.Col md={4} xs={12}> <Grid.Col md={4} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
<div className="center-flex-row"> <div className={isMedium?"center-flex-row":"center-flex"}>
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div> <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
<Badge color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge> <Badge style={isMedium?{}:{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
</div> {isMedium?null:<Space w="xl" />}
</div></MediaQuery> </div>
<MediaQuery largerThan="md" styles={{ display: 'none' }}><div> {!isMedium?<Space h="xl" />:null}
<div className="center-flex">
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
<Badge style={{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
<Space w="xl" />
</div>
</div></MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<Space h="xl" />
</MediaQuery>
</Grid.Col> </Grid.Col>
<Grid.Col className="center-flex" md={8} xs={12}> <Grid.Col className="center-flex" md={8} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}> {!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
<div className="center-flex-row"> <div className="center-flex-row">
<Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge> <Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
@@ -107,12 +93,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<Space h="xs" /> <Space h="xs" />
<Badge color={service.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge> <Badge color={service.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge>
</div> </div>
<MediaQuery largerThan="md" styles={{ display: 'none' }}> {isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
<div className="center-flex"> <div className="center-flex">
<MenuDropDownWithButton> <MenuDropDownWithButton>
<Menu.Label><b>Rename service</b></Menu.Label> <Menu.Label><b>Rename service</b></Menu.Label>
@@ -145,13 +126,10 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} /> <MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} />
<Space w="xl" /> <Space w="xl" />
</div>:null} </div>:null}
<MediaQuery largerThan="md" styles={{ display: 'none' }}> {isMedium?<><Space w="xl" /><Space w="xl" /></>:null}
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<hr style={{width:"100%"}}/> <Divider size="md" style={{width:"100%"}}/>
<YesNoModal <YesNoModal
title='Are you sure to delete this service?' title='Are you sure to delete this service?'
description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`} description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

5
frontend/src/components/PortHijack/ServiceRow/index.module.scss
View File

@@ -9,6 +9,11 @@
@extend .center-flex; @extend .center-flex;
} }
.row-mobile{
@extend .row;
@extend .center-flex-row;
}
.name{ .name{
font-size: 2.3em; font-size: 2.3em;
font-weight: bolder; font-weight: bolder;

14
frontend/src/components/PortHijack/ServiceRow/index.tsx
View File

@@ -4,7 +4,7 @@ import { FaPlay, FaStop } from 'react-icons/fa';
import { porthijack, Service } from '../utils'; import { porthijack, Service } from '../utils';
import style from "./index.module.scss"; import style from "./index.module.scss";
import YesNoModal from '../../YesNoModal'; import YesNoModal from '../../YesNoModal';
import { errorNotify, okNotify } from '../../../js/utils'; import { errorNotify, isMediumScreen, okNotify } from '../../../js/utils';
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs'; import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi' import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm'; import RenameForm from './RenameForm';
@@ -23,6 +23,7 @@ function ServiceRow({ service }:{ service:Service }) {
const [renameModal, setRenameModal] = useState(false) const [renameModal, setRenameModal] = useState(false)
const [changeDestModal, setChangeDestModal] = useState(false) const [changeDestModal, setChangeDestModal] = useState(false)
const portInputRef = React.createRef<HTMLInputElement>() const portInputRef = React.createRef<HTMLInputElement>()
const isMedium = isMediumScreen()
const form = useForm({ const form = useForm({
initialValues: { proxy_port:service.proxy_port }, initialValues: { proxy_port:service.proxy_port },
@@ -89,7 +90,7 @@ function ServiceRow({ service }:{ service:Service }) {
} }
return <> return <>
<div className={style.row} style={{width:"100%"}}> <div className={isMedium?style.row:style.row_mobile} style={{width:"100%"}}>
<Space w="xl" /><Space w="xl" /> <Space w="xl" /><Space w="xl" />
<div> <div>
<div className="center-flex-row"> <div className="center-flex-row">
@@ -105,6 +106,8 @@ function ServiceRow({ service }:{ service:Service }) {
</div> </div>
<div className='flex-spacer' /> <div className='flex-spacer' />
{isMedium?null:<Space h="xl" />}
<div className='center-flex'>
<div className="center-flex-row"> <div className="center-flex-row">
<Badge color="lime" radius="sm" size="md" variant="filled"> <Badge color="lime" radius="sm" size="md" variant="filled">
FROM {service.ip_src} : {service.public_port} FROM {service.ip_src} : {service.public_port}
@@ -119,7 +122,7 @@ function ServiceRow({ service }:{ service:Service }) {
size="xs" size="xs"
variant="unstyled" variant="unstyled"
style={{ style={{
width: (6+form.values.proxy_port.toString().length*6.2) +"px" width: (10+form.values.proxy_port.toString().length*6.2) +"px"
}} }}
className={style.portInput} className={style.portInput}
onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}} onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}}
@@ -161,10 +164,13 @@ function ServiceRow({ service }:{ service:Service }) {
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
</div> </div>
</div>
{isMedium?null:<Space h="xl" />}
<Space w="xl" /><Space w="xl" /> <Space w="xl" /><Space w="xl" />
</div> </div>
<hr style={{width:"100%"}}/> <Divider size="sm" style={{width:"100%"}}/>
<YesNoModal <YesNoModal
title='Are you sure to delete this service?' title='Are you sure to delete this service?'
description={`You are going to delete the service '${service.public_port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`} description={`You are going to delete the service '${service.public_port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

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

@@ -1,10 +1,10 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Badge, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core';
import { useState } from 'react'; import { useState } from 'react';
import { FaPause, FaPlay, FaStop } from 'react-icons/fa'; import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { MdOutlineArrowForwardIos } from "react-icons/md" import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./ServiceRow.module.scss"; import style from "./ServiceRow.module.scss";
import YesNoModal from '../../YesNoModal'; import YesNoModal from '../../YesNoModal';
import { errorNotify, okNotify } from '../../../js/utils'; import { errorNotify, isMediumScreen, okNotify } from '../../../js/utils';
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs'; import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
import { TbNumbers } from 'react-icons/tb'; import { TbNumbers } from 'react-icons/tb';
import { BiRename } from 'react-icons/bi' import { BiRename } from 'react-icons/bi'
@@ -32,6 +32,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const [choosePortModal, setChoosePortModal] = useState(false) const [choosePortModal, setChoosePortModal] = useState(false)
const [renameModal, setRenameModal] = useState(false) const [renameModal, setRenameModal] = useState(false)
const isMedium = isMediumScreen()
const stopService = async () => { const stopService = async () => {
setButtonLoading(true) setButtonLoading(true)
await regexproxy.servicestop(service.id).then(res => { await regexproxy.servicestop(service.id).then(res => {
@@ -101,44 +103,21 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
return <> return <>
<Grid className={style.row} justify="flex-end" style={{width:"100%"}}> <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
<Grid.Col md={4} xs={12}> <Grid.Col md={4} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div> <div className={isMedium?"center-flex-row":"center-flex"}>
<div className="center-flex-row"> <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div> <Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
<Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge> </div>
</div> {!isMedium?<Space h="xl" />:null}
</div></MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
<div className="center-flex">
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
<Space w="xl" />
<Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
</div>
</div></MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<Space h="xl" />
</MediaQuery>
</Grid.Col> </Grid.Col>
<Grid.Col className="center-flex" md={8} xs={12}> <Grid.Col className="center-flex" md={8} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}> {!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
<div className="center-flex-row"> <div className="center-flex-row">
<Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge> <Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
<Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="md" variant="filled">Regex: {service.n_regex}</Badge> <Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="md" variant="filled">Regex: {service.n_regex}</Badge>
<Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge> <Badge color="yellow" radius="sm" size="md" variant="filled">Connections Blocked: {service.n_packets}</Badge>
</div> </div>
<MediaQuery largerThan="md" styles={{ display: 'none' }}> {isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
<div className="center-flex"> <div className="center-flex">
<MenuDropDownWithButton> <MenuDropDownWithButton>
<Menu.Label><b>Rename service</b></Menu.Label> <Menu.Label><b>Rename service</b></Menu.Label>
@@ -185,9 +164,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
<MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} /> <MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={45} />
<Space w="xl" /> <Space w="xl" />
</div>:null} </div>:null}
<MediaQuery largerThan="md" styles={{ display: 'none' }}> {!isMedium?<><Space w="xl" /><Space w="xl" /></>:null}
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
@@ -198,7 +175,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
action={stopService} action={stopService}
opened={stopModal} opened={stopModal}
/> />
<hr style={{width:"100%"}}/> <Divider size="md" style={{width:"100%"}}/>
<YesNoModal <YesNoModal
title='Are you sure to delete this service?' title='Are you sure to delete this service?'
description={`You are going to delete the service '${service.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`} description={`You are going to delete the service '${service.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}

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

@@ -7,6 +7,7 @@ import { regexproxy } from "../components/RegexProxy/utils";
import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models"; import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
import { Buffer } from "buffer" import { Buffer } from "buffer"
import { QueryClient, useQuery } from "@tanstack/react-query"; import { QueryClient, useQuery } from "@tanstack/react-query";
import { useMediaQuery } from "@mantine/hooks";
export const IS_DEV = import.meta.env.DEV export const IS_DEV = import.meta.env.DEV
@@ -201,3 +202,11 @@ export function b64encode(data:number[]|string){
export function b64decode(regexB64:string){ export function b64decode(regexB64:string){
return Buffer.from(regexB64, "base64").toString() return Buffer.from(regexB64, "base64").toString()
} }
export function isMediumScreen(){
return useMediaQuery('(min-width: 600px)');
}
export function isLargeScreen(){
return useMediaQuery('(min-width: 992px)');
}

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

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
import { BsPlusLg, BsTrashFill } from "react-icons/bs" import { BsPlusLg, BsTrashFill } from "react-icons/bs"
import { rem } from '@mantine/core'; import { rem } from '@mantine/core';
import { ActionType, Protocol, Rule, RuleMode, firewall, firewallRulesQuery } from "../../components/Firewall/utils"; import { ActionType, Protocol, Rule, RuleMode, firewall, firewallRulesQuery } from "../../components/Firewall/utils";
import { errorNotify, getErrorMessage, makeid, okNotify } from "../../js/utils"; import { errorNotify, getErrorMessage, isMediumScreen, makeid, okNotify } from "../../js/utils";
import { useListState } from '@mantine/hooks'; import { useListState, useMediaQuery } from '@mantine/hooks';
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'; import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
import { TbGripVertical, TbReload } from "react-icons/tb"; import { TbGripVertical, TbReload } from "react-icons/tb";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
@@ -37,6 +37,8 @@ export const Firewall = () => {
const [applyChangeModal, setApplyChangeModal] = useState(false) const [applyChangeModal, setApplyChangeModal] = useState(false)
const [settingsModal, setSettingsModal] = useState(false) const [settingsModal, setSettingsModal] = useState(false)
const theme = useMantineTheme(); const theme = useMantineTheme();
const isMedium = useMediaQuery(`(min-width: 950px)`)
const isSmall = useMediaQuery(`(max-width: 600px)`)
const [updateMevalueinternal, internalUpdateme] = useState(false) const [updateMevalueinternal, internalUpdateme] = useState(false)
const updateMe = () => { const updateMe = () => {
@@ -100,6 +102,13 @@ export const Firewall = () => {
} }
} }
const condDiv = (val:React.ReactNode, cond:boolean) => {
if (cond)
return <div>{val}</div>
else
return val
}
const emptyRuleAdd = () => { const emptyRuleAdd = () => {
handlers.insert(0,{ handlers.insert(0,{
rule_id: makeid(30), rule_id: makeid(30),
@@ -201,6 +210,7 @@ export const Firewall = () => {
<TbGripVertical style={{ width: rem(30), height: rem(40) }} /> <TbGripVertical style={{ width: rem(30), height: rem(40) }} />
</div> </div>
<Space w="sm" /> <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-row" style={{width:"100%"}}>
<div className="center-flex" style={{width:"97%"}}> <div className="center-flex" style={{width:"97%"}}>
<Switch <Switch
@@ -232,7 +242,7 @@ export const Firewall = () => {
</div> </div>
<Space h="sm" /> <Space h="sm" />
<div className="center-flex" style={{width:"97%"}}> <div className="center-flex" style={{width:"97%"}}>
<div style={{width:"100%"}}> <div style={{width:"100%"}}>
<InterfaceInput <InterfaceInput
initialCustomInterfaces={[...src_custom_int, ...customInt]} initialCustomInterfaces={[...src_custom_int, ...customInt]}
value={item.src} value={item.src}
@@ -297,24 +307,26 @@ export const Firewall = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="center-flex-row"> {!isMedium?<Space h="sm" />:null}
<ActionTypeSelector <div className={isMedium?"center-flex-row":"center-flex"} style={isMedium?{}:{width:"100%", justifyContent:"space-around"}}>
value={item.action} {condDiv(<>{condDiv(<ModeSelector
onChange={(value)=>{item.action = value as ActionType;updateMe()}} value={item.mode}
onChange={(value)=>{item.mode = value as RuleMode;updateMe()}}
style={{width:"100%"}} style={{width:"100%"}}
/> />, !isMedium)}
<Space h="xs" />
<ModeSelector
value={item.mode}
onChange={(value)=>{item.mode = value as RuleMode;updateMe()}}
style={{width:"100%"}}
/>
<Space h="xs" /> <Space h="xs" />
<ProtocolSelector {condDiv(<ProtocolSelector
value={item.proto} value={item.proto}
onChange={(value)=>{item.proto = value as Protocol;updateMe()}} onChange={(value)=>{item.proto = value as Protocol;updateMe()}}
style={{width:"100%"}} style={{width:"100%"}}
/> />, !isMedium)}</>, isSmall)}
<Space h="xs" />
{condDiv(<ActionTypeSelector
value={item.action}
onChange={(value)=>{item.action = value as ActionType;updateMe()}}
style={{width:"100%"}}
/>, !isMedium)}
</div>
</div> </div>
</div> </div>
<Space h="md" /> <Space h="md" />
@@ -329,55 +341,59 @@ export const Firewall = () => {
return <> return <>
<Space h="sm" /> <Space h="sm" />
<LoadingOverlay visible={rules.isLoading} /> <LoadingOverlay visible={rules.isLoading} />
<div className='center-flex'> <div className={isMedium?'center-flex':'center-flex-row'}>
<Title order={3}>Firewall Rules</Title> <Title order={3}>Firewall Rules</Title>
<div className='flex-spacer' /> {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
Enabled: <Space w="sm" /> <Switch checked={fwEnabled} onChange={switchState} /> <div className='center-flex'>
<Space w="sm" /> Enabled: <Space w="sm" /> <Switch checked={fwEnabled} onChange={switchState} />
Policy: <Space w="sm" />
<Space w="xs" /> Policy:
<ActionTypeSelector <Space w="xs" />
value={currentPolicy} <ActionTypeSelector
onChange={(value)=>setCurrentPolicy(value as ActionType)} value={currentPolicy}
/> onChange={(value)=>setCurrentPolicy(value as ActionType)}
<Space w="xs" /> />
<Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge> </div>
<Space w="xs" /> {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
<Tooltip label="Add a new rule" position='bottom' color="blue" opened={tooltipAddOpened}> <div className='center-flex'>
<ActionIcon color="blue" onClick={emptyRuleAdd} size="lg" radius="md" variant="filled" <Space w="xs" />
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} <Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon> <Space w="xs" />
</Tooltip> <Tooltip label="Add a new rule" position='bottom' color="blue" opened={tooltipAddOpened}>
<Space w="xs" /> <ActionIcon color="blue" onClick={emptyRuleAdd} size="lg" radius="md" variant="filled"
<Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}> onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
<ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["firewall"])} size="lg" radius="md" variant="filled" onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
loading={rules.isFetching} </Tooltip>
onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} <Space w="xs" />
onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon> <Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}>
</Tooltip> <ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["firewall"])} size="lg" radius="md" variant="filled"
<Space w="xs" /> loading={rules.isFetching}
<Tooltip label="Settings" position='bottom' color="cyan" opened={tooltipSettingsOpened}> onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
<ActionIcon color="cyan" onClick={()=>setSettingsModal(true)} size="lg" radius="md" variant="filled" onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
onFocus={() => setTooltipSettingsOpened(false)} onBlur={() => setTooltipSettingsOpened(false)} </Tooltip>
onMouseEnter={() => setTooltipSettingsOpened(true)} onMouseLeave={() => setTooltipSettingsOpened(false)}><IoSettingsSharp size={18} /></ActionIcon> <Space w="xs" />
</Tooltip> <Tooltip label="Settings" position='bottom' color="cyan" opened={tooltipSettingsOpened}>
<Space w="xs" /> <ActionIcon color="cyan" onClick={()=>setSettingsModal(true)} size="lg" radius="md" variant="filled"
<Tooltip label="Apply" position='bottom' color="grape" opened={tooltipApplyOpened}> onFocus={() => setTooltipSettingsOpened(false)} onBlur={() => setTooltipSettingsOpened(false)}
<ActionIcon color="grape" onClick={applyChanges} size="lg" radius="md" variant="filled" onMouseEnter={() => setTooltipSettingsOpened(true)} onMouseLeave={() => setTooltipSettingsOpened(false)}><IoSettingsSharp size={18} /></ActionIcon>
onFocus={() => setTooltipApplyOpened(false)} onBlur={() => setTooltipApplyOpened(false)} </Tooltip>
onMouseEnter={() => setTooltipApplyOpened(true)} onMouseLeave={() => setTooltipApplyOpened(false)} <Space w="xs" />
disabled={!valuesChanged} <Tooltip label="Apply" position='bottom' color="grape" opened={tooltipApplyOpened}>
><TiTick size={22} /></ActionIcon> <ActionIcon color="grape" onClick={applyChanges} size="lg" radius="md" variant="filled"
</Tooltip> onFocus={() => setTooltipApplyOpened(false)} onBlur={() => setTooltipApplyOpened(false)}
onMouseEnter={() => setTooltipApplyOpened(true)} onMouseLeave={() => setTooltipApplyOpened(false)}
disabled={!valuesChanged}
><TiTick size={22} /></ActionIcon>
</Tooltip>
</div>
</div> </div>
<Space h="xl" /> <Space h="xl" />
<Divider />
{items.length > 0?<DragDropContext {items.length > 0?<DragDropContext
onDragEnd={({ destination, source }) => onDragEnd={({ destination, source }) =>
handlers.reorder({ from: source.index, to: destination?.index || 0 }) handlers.reorder({ from: source.index, to: destination?.index || 0 })
} }
> >
<Divider />
<Space h="md" /> <Space h="md" />
<Droppable droppableId="dnd-list" direction="vertical"> <Droppable droppableId="dnd-list" direction="vertical">
{(provided) => ( {(provided) => (

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

@@ -1,10 +1,10 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs"; import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/NFRegex/ServiceRow'; import ServiceRow from '../../components/NFRegex/ServiceRow';
import { nfregexServiceQuery } from '../../components/NFRegex/utils'; import { nfregexServiceQuery } from '../../components/NFRegex/utils';
import { errorNotify, getErrorMessage } from '../../js/utils'; import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils';
import AddNewService from '../../components/NFRegex/AddNewService'; import AddNewService from '../../components/NFRegex/AddNewService';
import AddNewRegex from '../../components/AddNewRegex'; import AddNewRegex from '../../components/AddNewRegex';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
@@ -20,7 +20,7 @@ function NFRegex({ children }: { children: any }) {
const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false); const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false);
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false); const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false); const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const isMedium = isMediumScreen()
const services = nfregexServiceQuery() const services = nfregexServiceQuery()
useEffect(()=> { useEffect(()=> {
@@ -32,35 +32,42 @@ function NFRegex({ children }: { children: any }) {
return <> return <>
<Space h="sm" /> <Space h="sm" />
<div className='center-flex'> <div className={isMedium?'center-flex':'center-flex-row'}>
<Title order={4}>Netfilter Regex</Title> <Title order={4}>Netfilter Regex</Title>
<div className='flex-spacer' /> {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
<Badge size="sm" color="green" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge> <div 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>
{isMedium?null:<Space h="md" />}
<div 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"
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
: <Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
}
<Space w="xs" /> <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> <Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}>
<Space w="xs" /> <ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["nfregex"])} size="lg" radius="md" variant="filled"
<Badge size="sm" color="violet" variant="filled">Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge> loading={services.isFetching}
<Space w="xs" /> onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
{ srv? onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
<Tooltip label="Add a new regex" position='bottom' color="blue" opened={tooltipAddOpened}> </Tooltip>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled" </div>
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
: <Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
}
<Space w="xs" />
<Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}>
<ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["nfregex"])} size="lg" radius="md" variant="filled"
loading={services.isFetching}
onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
</Tooltip>
</div> </div>
<Space h="md" />
<Divider size="md" style={{width:"100%"}}/>
<div id="service-list" className="center-flex-row"> <div id="service-list" className="center-flex-row">
{srv?null:<> {srv?null:<>
<LoadingOverlay visible={services.isLoading} /> <LoadingOverlay visible={services.isLoading} />

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

@@ -1,9 +1,9 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs"; import { BsPlusLg } from "react-icons/bs";
import ServiceRow from '../../components/PortHijack/ServiceRow'; import ServiceRow from '../../components/PortHijack/ServiceRow';
import { porthijackServiceQuery } from '../../components/PortHijack/utils'; import { porthijackServiceQuery } from '../../components/PortHijack/utils';
import { errorNotify, getErrorMessage } from '../../js/utils'; import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils';
import AddNewService from '../../components/PortHijack/AddNewService'; import AddNewService from '../../components/PortHijack/AddNewService';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { TbReload } from 'react-icons/tb'; import { TbReload } from 'react-icons/tb';
@@ -16,7 +16,7 @@ function PortHijack() {
const [tooltipAddOpened, setTooltipAddOpened] = useState(false); const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const queryClient = useQueryClient() const queryClient = useQueryClient()
const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false); const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false);
const isMedium = isMediumScreen()
const services = porthijackServiceQuery() const services = porthijackServiceQuery()
@@ -29,26 +29,30 @@ function PortHijack() {
return <> return <>
<Space h="sm" /> <Space h="sm" />
<div className='center-flex'> <div className={isMedium?'center-flex':'center-flex-row'}>
<Title order={4}>Hijack port to proxy</Title> <Title order={4}>Hijack port to proxy</Title>
<div className='flex-spacer' /> {isMedium?<div className='flex-spacer' />:<Space h="sm" />}
<Badge size="sm" color="yellow" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge> <div className='center-flex'>
<Space w="xs" /> <Badge size="sm" color="yellow" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
<Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}> <Space w="xs" />
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled" <Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon> onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
</Tooltip> onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
<Space w="xs" /> </Tooltip>
<Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}> <Space w="xs" />
<ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["porthijack"])} size="lg" radius="md" variant="filled" <Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}>
loading={services.isFetching} <ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["porthijack"])} size="lg" radius="md" variant="filled"
onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} loading={services.isFetching}
onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon> onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
</Tooltip> onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
</Tooltip>
</div>
</div> </div>
<Space h="md" /><Divider size="sm" style={{width:"100%"}}/>
<div id="service-list" className="center-flex-row"> <div id="service-list" className="center-flex-row">
<LoadingOverlay visible={services.isLoading} /> <LoadingOverlay visible={services.isLoading} />
{(services.data && services.data.length > 0) ?services.data.map( srv => <ServiceRow service={srv} key={srv.service_id} />):<> {(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"/> <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" />