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

Fixes, and made firegex responsive

Browse Source
This commit is contained in:
DomySh
2022-06-15 01:23:54 +02:00
parent 3f56a2cb3b
commit c639b43448
10 changed files with 211 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
backend/proxy/__init__.py
View File

@@ -74,9 +74,11 @@ class Proxy:
def compile_filters(self): def compile_filters(self):
res = {} res = {}
for filter_obj in self.filters: for filter_obj in self.filters:
raw_filters = filter_obj.compile() try:
for filter in raw_filters: raw_filters = filter_obj.compile()
res[filter] = filter_obj for filter in raw_filters:
res[filter] = filter_obj
except Exception: pass
return res return res
def add_filter(self, filter): def add_filter(self, filter):

2
frontend/package-lock.json generated
View File

@@ -29141,4 +29141,4 @@
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
} }
} }
} }

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

@@ -1,4 +1,4 @@
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip } from '@mantine/core'; import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks'; import { useForm } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { RegexAddForm } from '../js/models'; import { RegexAddForm } from '../js/models';
@@ -15,7 +15,7 @@ type RegexAddInfo = {
percentage_encoding:boolean percentage_encoding:boolean
} }
function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:string }) { function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) {
const form = useForm({ const form = useForm({
initialValues: { initialValues: {
@@ -32,6 +32,11 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
} }
}) })
const close = () =>{
onClose()
form.reset()
}
const [submitLoading, setSubmitLoading] = useState(false) const [submitLoading, setSubmitLoading] = useState(false)
const [error, setError] = useState<string|null>(null) const [error, setError] = useState<string|null>(null)
@@ -57,7 +62,7 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
addregex(request).then( res => { addregex(request).then( res => {
if (!res){ if (!res){
setSubmitLoading(false) setSubmitLoading(false)
closePopup(); close();
okNotify(`Regex ${getHumanReadableRegex(request.regex)} has been added`, `Successfully added ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`) okNotify(`Regex ${getHumanReadableRegex(request.regex)} has been added`, `Successfully added ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
}else{ }else{
setSubmitLoading(false) setSubmitLoading(false)
@@ -71,50 +76,52 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
} }
return <form onSubmit={form.onSubmit(submitRequest)}> return <Modal size="xl" title="Add a new regex filter" opened={opened} onClose={close} closeOnClickOutside={false} centered>
<TextInput <form onSubmit={form.onSubmit(submitRequest)}>
label="Regex" <TextInput
placeholder="[A-Z0-9]{31}=" label="Regex"
{...form.getInputProps('regex')} placeholder="[A-Z0-9]{31}="
/> {...form.getInputProps('regex')}
<Space h="md" />
<Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" transitionDuration={300} transitionTimingFunction="ease"
color="gray" wrapLines width={220} withArrow position='right'>
<Switch
label="Use percentage encoding for binary values"
{...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
/> />
</Tooltip> <Space h="md" />
<Space h="md" /> <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" openDelay={600} transitionDuration={250} transitionTimingFunction="ease"
<Switch color="gray" wrapLines width={220} withArrow position='right'>
label="Match exactly the regex" <Switch
{...form.getInputProps('regex_exact', { type: 'checkbox' })} label="Use percentage encoding for binary values"
/> {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
<Space h="md" /> />
<NativeSelect </Tooltip>
data={['C -> S', 'S -> C', 'C <-> S']} <Space h="md" />
label="Choose the source of the packets to filter" <Switch
variant="filled" label="Match exactly the regex"
{...form.getInputProps('mode')} {...form.getInputProps('regex_exact', { type: 'checkbox' })}
/> />
<Space h="md" /> <Space h="md" />
<FilterTypeSelector <NativeSelect
size="md" data={['C -> S', 'S -> C', 'C <-> S']}
color="gray" label="Choose the source of the packets to filter"
{...form.getInputProps('type')} variant="filled"
/> {...form.getInputProps('mode')}
<Group position="right" mt="md"> />
<Button loading={submitLoading} type="submit">Add Filter</Button> <Space h="md" />
</Group> <FilterTypeSelector
size="md"
color="gray"
{...form.getInputProps('type')}
/>
<Group position="right" mt="md">
<Button loading={submitLoading} type="submit">Add Filter</Button>
</Group>
<Space h="md" /> <Space h="md" />
{error?<> {error?<>
<Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}> <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
Error: {error} Error: {error}
</Notification><Space h="md" /></>:null} </Notification><Space h="md" /></>:null}
</form> </form>
</Modal>
} }

65
frontend/src/components/AddNewService.tsx
View File

@@ -1,11 +1,11 @@
import { Button, Group, NumberInput, Space, TextInput, Notification } from '@mantine/core'; import { Button, Group, NumberInput, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks'; import { useForm } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ServiceAddForm } from '../js/models'; import { ServiceAddForm } from '../js/models';
import { addservice, okNotify } from '../js/utils'; import { addservice, okNotify } from '../js/utils';
import { ImCross } from "react-icons/im" import { ImCross } from "react-icons/im"
function AddNewService({ closePopup }:{ closePopup:()=>void }) { function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
const form = useForm({ const form = useForm({
initialValues: { initialValues: {
@@ -18,6 +18,11 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
} }
}) })
const close = () =>{
onClose()
form.reset()
}
const [submitLoading, setSubmitLoading] = useState(false) const [submitLoading, setSubmitLoading] = useState(false)
const [error, setError] = useState<string|null>(null) const [error, setError] = useState<string|null>(null)
@@ -26,7 +31,7 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
addservice(values).then( res => { addservice(values).then( res => {
if (!res){ if (!res){
setSubmitLoading(false) setSubmitLoading(false)
closePopup(); close();
okNotify(`Service ${values.name} has been added`, `Successfully added ${values.name} with port ${values.port}`) okNotify(`Service ${values.name} has been added`, `Successfully added ${values.name} with port ${values.port}`)
}else{ }else{
setSubmitLoading(false) setSubmitLoading(false)
@@ -39,37 +44,39 @@ function AddNewService({ closePopup }:{ closePopup:()=>void }) {
} }
return <form onSubmit={form.onSubmit(submitRequest)}> return <Modal size="xl" title="Add a new service" opened={opened} onClose={close} closeOnClickOutside={false} centered>
<TextInput <form onSubmit={form.onSubmit(submitRequest)}>
label="Service name" <TextInput
placeholder="Challenge 01" label="Service name"
{...form.getInputProps('name')} placeholder="Challenge 01"
/> {...form.getInputProps('name')}
<Space h="md" /> />
<Space h="md" />
<NumberInput <NumberInput
placeholder="8080" placeholder="8080"
min={1} min={1}
max={65535} max={65535}
label="Service port" label="Service port"
{...form.getInputProps('port')} {...form.getInputProps('port')}
/> />
<Space h="md" /> <Space h="md" />
<Group position="right" mt="md"> <Group position="right" mt="md">
<Button loading={submitLoading} type="submit">Add Service</Button> <Button loading={submitLoading} type="submit">Add Service</Button>
</Group> </Group>
<Space h="md" /> <Space h="md" />
{error?<> {error?<>
<Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}> <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
Error: {error} Error: {error}
</Notification><Space h="md" /></>:null} </Notification><Space h="md" /></>:null}
</form> </form>
</Modal>
} }

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

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip } from '@mantine/core'; import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
import style from "./Header.module.scss"; import style from "./Header.module.scss";
import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils'; import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils';
import { ChangePassword, GeneralStats, update_freq } from '../../js/models'; import { ChangePassword, GeneralStats, update_freq } from '../../js/models';
@@ -77,15 +77,35 @@ function Header() {
const closeModal = () => {setOpen(false);} const closeModal = () => {setOpen(false);}
return <div id="header-page" className={style.header}> return <div id="header-page" className={style.header}>
<FloatingTooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="dark" position="right" > <FloatingTooltip label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
<div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}> <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
<Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/> <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
</div> </div>
</FloatingTooltip> </FloatingTooltip>
<div className="flex-spacer" /> <div className="flex-spacer" />
<Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
<Badge style={{marginLeft:"10px"}} size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge> <MediaQuery largerThan="md" styles={{ display: 'none' }}>
<Badge style={{marginLeft:"10px"}} size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge> <div>
<Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
<Space h="xs" />
<Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Space h="xs" />
<Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
</div>
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
<div className="center-flex">
<Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
<Space w="xs" />
<Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Space w="xs" />
<Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
</div>
</div></MediaQuery>
<div style={{marginLeft:"20px"}}></div> <div style={{marginLeft:"20px"}}></div>
<Menu> <Menu>
<Menu.Label>Firewall Access</Menu.Label> <Menu.Label>Firewall Access</Menu.Label>
@@ -95,7 +115,7 @@ function Header() {
</Menu> </Menu>
<div style={{marginLeft:"20px"}}></div> <div style={{marginLeft:"20px"}}></div>
{ location.pathname !== "/"? { location.pathname !== "/"?
<Tooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal"> <Tooltip label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" style={{marginRight:"10px"}} <ActionIcon color="teal" style={{marginRight:"10px"}}
size="xl" radius="md" variant="filled" size="xl" radius="md" variant="filled"
onClick={()=>navigator("/")}> onClick={()=>navigator("/")}>
@@ -103,22 +123,18 @@ function Header() {
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
:null} :null}
{ location.pathname !== "/"? { srv_id?
<Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue"> <Tooltip label="Add a new regex" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
: <Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue"> : <Tooltip label="Add a new service" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
} }
{srv_id? {srv_id?
<Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered> <AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:
<AddNewRegex closePopup={closeModal} service={srv_id} /> <AddNewService opened={open} onClose={closeModal} />
</Modal>:
<Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
<AddNewService closePopup={closeModal} />
</Modal>
} }
<Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered> <Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered>

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

@@ -43,7 +43,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
<Text className={style.regex_text}> {regex_expr}</Text> <Text className={style.regex_text}> {regex_expr}</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col span={2}>
<Tooltip label="Delete regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red"> <Tooltip label="Delete regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon> <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
</Tooltip> </Tooltip>
</Grid.Col> </Grid.Col>

67
frontend/src/components/ServiceRow/index.tsx
View File

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Grid, Space, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Badge, Grid, MediaQuery, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FaPause, FaPlay, FaStop } from 'react-icons/fa'; import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { Service } from '../../js/models'; import { Service } from '../../js/models';
@@ -8,7 +8,7 @@ import YesNoModal from '../YesNoModal';
import { errorNotify, okNotify, pauseservice, startservice, stopservice } from '../../js/utils'; import { errorNotify, okNotify, pauseservice, startservice, stopservice } from '../../js/utils';
//"status":"stop"/"wait"/"active"/"pause", //"status":"stop"/"wait"/"active"/"pause",
function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ service:Service, onClick?:()=>void, additional_buttons?:any, add_new_regex?:any }) { function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) {
let status_color = "gray"; let status_color = "gray";
switch(service.status){ switch(service.status){
@@ -63,38 +63,59 @@ function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ se
setButtonLoading(false) setButtonLoading(false)
} }
return <> return <>
<Grid className={style.row} style={{width:"100%"}}> <Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
<Grid.Col span={4}> <Grid.Col md={4} xs={12}>
<div className="center-flex-row"> <MediaQuery smallerThan="md" styles={{ display: 'none' }}><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> <div className="center-flex-row">
<Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge> <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> <Badge color={status_color} size="xl" 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="xl" 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" span={8}>
<div className="center-flex"> <Grid.Col className="center-flex" md={8} xs={12}>
{add_new_regex} <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
</div> <div className='flex-spacer' />
<div className='flex-spacer'></div> </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="xl" variant="filled">Status: <u>{service.status}</u></Badge> <Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="xl" variant="filled">Status: <u>{service.status}</u></Badge>
<Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="lg" variant="filled">Regex: {service.n_regex}</Badge> <Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="lg" variant="filled">Regex: {service.n_regex}</Badge>
<Badge color="yellow" radius="sm" size="lg" variant="filled">Connections Blocked: {service.n_packets}</Badge> <Badge color="yellow" radius="sm" size="lg" variant="filled">Connections Blocked: {service.n_packets}</Badge>
</div> </div>
<Space w="xl" /><Space w="xl" /> <MediaQuery largerThan="md" styles={{ display: 'none' }}>
<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">
{additional_buttons} {additional_buttons}
{["pause","wait"].includes(service.status)? {["pause","wait"].includes(service.status)?
<Tooltip label="Stop service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="orange"> <Tooltip label="Stop service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange">
<ActionIcon color="yellow" loading={buttonLoading} <ActionIcon color="yellow" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled" onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}> disabled={service.status === "stop"}>
<FaStop size="20px" /> <FaStop size="20px" />
</ActionIcon> </ActionIcon>
</Tooltip>: </Tooltip>:
<Tooltip label="Pause service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red"> <Tooltip label="Pause service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" loading={buttonLoading} <ActionIcon color="red" loading={buttonLoading}
onClick={pauseService} size="xl" radius="md" variant="filled" onClick={pauseService} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}> disabled={service.status === "stop"}>
@@ -104,7 +125,7 @@ function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ se
} }
<Space w="md"/> <Space w="md"/>
<Tooltip label="Start service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal"> <Tooltip label="Start service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading} <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}> variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
<FaPlay size="20px" /> <FaPlay size="20px" />
@@ -112,8 +133,14 @@ function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ se
</Tooltip> </Tooltip>
</div> </div>
<Space w="xl" /><Space w="xl" /> <Space w="xl" /><Space w="xl" />
{onClick?<MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size="45px" />:null} {onClick?<div>
<Space w="xl" /> <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>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<YesNoModal <YesNoModal

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

@@ -160,15 +160,9 @@ export function okNotify(title:string, description:string ){
} }
export function validateRegex(pattern:string) { export function validateRegex(pattern:string) {
var parts = pattern.split('/'), return true; // TO TEST
regex = pattern,
options = "";
if (parts.length > 1) {
regex = parts[1];
options = parts[2];
}
try { try {
new RegExp(regex, options); new RegExp(pattern);
return true; return true;
} }
catch(e) { catch(e) {
@@ -178,4 +172,4 @@ export function validateRegex(pattern:string) {
export function b64encode(data:string){ export function b64encode(data:string){
return Buffer.from(data).toString('base64') return Buffer.from(data).toString('base64')
} }

23
frontend/src/pages/HomePage.tsx
View File

@@ -1,9 +1,11 @@
import { LoadingOverlay, Space, Title } from '@mantine/core'; import { ActionIcon, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import ServiceRow from '../components/ServiceRow'; import ServiceRow from '../components/ServiceRow';
import { Service, update_freq } from '../js/models'; import { Service, update_freq } from '../js/models';
import { errorNotify, servicelist } from '../js/utils'; import { errorNotify, servicelist } from '../js/utils';
import AddNewService from '../components/AddNewService';
function HomePage() { function HomePage() {
@@ -11,6 +13,8 @@ function HomePage() {
const [services, setServices] = useState<Service[]>([]); const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true); const [loader, setLoader] = useState(true);
const navigator = useNavigate() const navigator = useNavigate()
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);}
const updateInfo = async () => { const updateInfo = async () => {
await servicelist().then(res => { await servicelist().then(res => {
@@ -33,7 +37,22 @@ function HomePage() {
<LoadingOverlay visible={loader} /> <LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{ {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/"+srv.id) navigator("/"+srv.id)
}} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title></>} }} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>}
<Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
<AddNewService closePopup={closeModal} />
</Modal>
</div> </div>
} }

43
frontend/src/pages/ServiceDetails.tsx
View File

@@ -84,47 +84,32 @@ function ServiceDetails() {
return <div> return <div>
<LoadingOverlay visible={loader} /> <LoadingOverlay visible={loader} />
<ServiceRow service={serviceInfo} additional_buttons={<> <ServiceRow service={serviceInfo} additional_buttons={<>
<Tooltip label="Delete service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red"> <Tooltip label="Delete service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon> <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
</Tooltip> </Tooltip>
<Space w="md"/> <Space w="md"/>
<Tooltip label="Change proxy port" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue"> <Tooltip label="Change proxy port" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon> <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
</Tooltip> </Tooltip>
<Space w="md"/> <Space w="md"/>
</>} add_new_regex={<>
<Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</>}></ServiceRow> </>}></ServiceRow>
{regexesList.length === 0? {regexesList.length === 0?<>
<><Space h="xl" /> <Title className='center-flex' order={3}>No regex found for this service! Add one by clicking the "+" button</Title> <Space h="xl" />
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" button</Title>
<div style={{ <Space h="xl" /> <Space h="xl" />
display: 'flex', <div className='center-flex'>
alignItems: 'center', <Tooltip label="Add a new regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
justifyContent: 'center', <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
}}> </Tooltip>
<Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue"> </div>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> </>:
</Tooltip>
</div>
</>
:
<Grid> <Grid>
{regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} span={6}><RegexView regexInfo={regexInfo}/></Grid.Col>)} {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo}/></Grid.Col>)}
</Grid> </Grid>
} }
{srv_id? {srv_id?<AddNewRegex opened={open} onClose={closeModal} service={srv_id} />:null}
<Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
<AddNewRegex closePopup={closeModal} service={srv_id} />
</Modal>:
null
}
<YesNoModal <YesNoModal
title='Are you sure to delete this service?' title='Are you sure to delete this service?'