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 { 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 { errorNotify, getmainpath, logout } from '../../js/utils';
import { errorNotify, getmainpath, isLargeScreen, logout } from '../../js/utils';
import { AiFillHome } from "react-icons/ai"
import { useNavigate } from 'react-router-dom';
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 [tooltipHomeOpened, setTooltipHomeOpened] = useState(false);
const [tooltipLogoutOpened,setTooltipLogoutOpened] = useState(false);
const isLarge = isLargeScreen()
console.log(isLarge)
return <Header height={100} className={style.header} {...other}>
<Space w="lg" />
<MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
{isLarge?null:<div>
<Burger
opened={navOpen}
className={style.navbtn}
@@ -43,7 +44,7 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac
size="sm"
mr="xl"
/>
</div></MediaQuery>
</div>}
<div className={style.divlogo}>
<Tooltip zIndex={0} label="Home" openDelay={1000}color="dark" position="right" >
<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 { FaPlay, FaStop } from 'react-icons/fa';
import { nfregex, Service, serviceQueryKey } from '../utils';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./index.module.scss";
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 { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm';
@@ -25,6 +25,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
const [deleteModal, setDeleteModal] = useState(false)
const [renameModal, setRenameModal] = useState(false)
const isMedium = isMediumScreen()
const stopService = async () => {
setButtonLoading(true)
@@ -73,32 +74,17 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
return <>
<Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
<Grid.Col md={4} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
<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.port}</Badge></div>
<Badge color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
</div>
</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.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>
<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>
<Badge style={isMedium?{}:{marginLeft:"20px"}} color={status_color} radius="sm" size="lg" variant="filled">Status: <u>{service.status}</u></Badge>
{isMedium?null:<Space w="xl" />}
</div>
{!isMedium?<Space h="xl" />:null}
</Grid.Col>
<Grid.Col className="center-flex" md={8} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
{!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<div className="center-flex-row">
<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" />
<Badge color={service.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge>
</div>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
{isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<div className="center-flex">
<MenuDropDownWithButton>
<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} />
<Space w="xl" />
</div>:null}
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
{isMedium?<><Space w="xl" /><Space w="xl" /></>:null}
</Grid.Col>
</Grid>
<hr style={{width:"100%"}}/>
<Divider size="md" style={{width:"100%"}}/>
<YesNoModal
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! ⚠️`}

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

@@ -9,6 +9,11 @@
@extend .center-flex;
}
.row-mobile{
@extend .row;
@extend .center-flex-row;
}
.name{
font-size: 2.3em;
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 style from "./index.module.scss";
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 { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm';
@@ -23,6 +23,7 @@ function ServiceRow({ service }:{ service:Service }) {
const [renameModal, setRenameModal] = useState(false)
const [changeDestModal, setChangeDestModal] = useState(false)
const portInputRef = React.createRef<HTMLInputElement>()
const isMedium = isMediumScreen()
const form = useForm({
initialValues: { proxy_port:service.proxy_port },
@@ -89,7 +90,7 @@ function ServiceRow({ service }:{ service:Service }) {
}
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" />
<div>
<div className="center-flex-row">
@@ -105,6 +106,8 @@ function ServiceRow({ service }:{ service:Service }) {
</div>
<div className='flex-spacer' />
{isMedium?null:<Space h="xl" />}
<div className='center-flex'>
<div className="center-flex-row">
<Badge color="lime" radius="sm" size="md" variant="filled">
FROM {service.ip_src} : {service.public_port}
@@ -119,7 +122,7 @@ function ServiceRow({ service }:{ service:Service }) {
size="xs"
variant="unstyled"
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}
onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}}
@@ -161,10 +164,13 @@ function ServiceRow({ service }:{ service:Service }) {
</ActionIcon>
</Tooltip>
</div>
</div>
{isMedium?null:<Space h="xl" />}
<Space w="xl" /><Space w="xl" />
</div>
<hr style={{width:"100%"}}/>
<Divider size="sm" style={{width:"100%"}}/>
<YesNoModal
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! ⚠️`}

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 { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./ServiceRow.module.scss";
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 { TbNumbers } from 'react-icons/tb';
import { BiRename } from 'react-icons/bi'
@@ -32,6 +32,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const [choosePortModal, setChoosePortModal] = useState(false)
const [renameModal, setRenameModal] = useState(false)
const isMedium = isMediumScreen()
const stopService = async () => {
setButtonLoading(true)
await regexproxy.servicestop(service.id).then(res => {
@@ -101,44 +103,21 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
return <>
<Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
<Grid.Col md={4} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
<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>
<Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
</div>
</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>
<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.public_port}</Badge></div>
<Badge color={status_color} size="lg" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
</div>
{!isMedium?<Space h="xl" />:null}
</Grid.Col>
<Grid.Col className="center-flex" md={8} xs={12}>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
{!isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<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:"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>
</div>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<div className='flex-spacer' />
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
{isMedium?<div className='flex-spacer' />:<><Space w="xl" /><Space w="xl" /></>}
<div className="center-flex">
<MenuDropDownWithButton>
<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} />
<Space w="xl" />
</div>:null}
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<><Space w="xl" /><Space w="xl" /></>
</MediaQuery>
{!isMedium?<><Space w="xl" /><Space w="xl" /></>:null}
</Grid.Col>
</Grid>
@@ -198,7 +175,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
action={stopService}
opened={stopModal}
/>
<hr style={{width:"100%"}}/>
<Divider size="md" style={{width:"100%"}}/>
<YesNoModal
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! ⚠️`}