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

add: graphic improvements

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-09-25 20:09:26 +02:00
parent c0ea0eb331
commit 7c324a90c2
4 changed files with 102 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
backend/routers/porthijack.py
View File

@@ -122,11 +122,11 @@ async def service_delete(service_id: str):
async def service_rename(service_id: str, form: RenameForm):
"""Request to change the name of a specific service"""
form.name = refactor_name(form.name)
if not form.name: return {'status': 'The name cannot be empty!'}
if not form.name: raise HTTPException(status_code=400, detail="The name cannot be empty!")
try:
db.query('UPDATE services SET name=? WHERE service_id = ?;', form.name, service_id)
except sqlite3.IntegrityError:
return {'status': 'This name is already used'}
raise HTTPException(status_code=400, detail="This name is already used")
await refresh_frontend()
return {'status': 'ok'}
@@ -141,14 +141,14 @@ async def service_change_destination(service_id: str, form: ChangeDestination):
try:
form.ip_dst = addr_parse(form.ip_dst)
except ValueError:
return {"status":"Invalid address"}
raise HTTPException(status_code=400, detail="Invalid address")
srv = Service.from_dict(db.query('SELECT * FROM services WHERE service_id = ?;', service_id)[0])
if ip_family(form.ip_dst) != ip_family(srv.ip_src):
return {'status': 'The destination ip is not of the same family as the source ip'}
raise HTTPException(status_code=400, detail="The destination ip is not of the same family as the source ip")
try:
db.query('UPDATE services SET proxy_port=?, ip_dst=? WHERE service_id = ?;', form.proxy_port, form.ip_dst, service_id)
except sqlite3.IntegrityError:
return {'status': 'Invalid proxy port or service'}
raise HTTPException(status_code=400, detail="Invalid proxy port or service")
srv.ip_dst = form.ip_dst
srv.proxy_port = form.proxy_port
@@ -164,12 +164,12 @@ async def add_new_service(form: ServiceAddForm):
form.ip_src = addr_parse(form.ip_src)
form.ip_dst = addr_parse(form.ip_dst)
except ValueError:
return {"status":"Invalid address"}
raise HTTPException(status_code=400, detail="Invalid address")
if ip_family(form.ip_dst) != ip_family(form.ip_src):
return {"status":"Destination and source addresses must be of the same family"}
raise HTTPException(status_code=400, detail="Destination and source addresses must be of the same family")
if form.proto not in ["tcp", "udp"]:
return {"status":"Invalid protocol"}
raise HTTPException(status_code=400, detail="Invalid protocol")
srv_id = None
try:
@@ -177,7 +177,7 @@ async def add_new_service(form: ServiceAddForm):
db.query("INSERT INTO services (service_id, active, public_port, proxy_port, name, proto, ip_src, ip_dst) VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
srv_id, False, form.public_port, form.proxy_port , form.name, form.proto, form.ip_src, form.ip_dst)
except sqlite3.IntegrityError:
return {'status': 'This type of service already exists'}
raise HTTPException(status_code=400, detail="This type of service already exists")
await firewall.reload()
await refresh_frontend()

14
backend/routers/regexproxy.py
View File

@@ -163,7 +163,7 @@ class ChangePortForm(BaseModel):
async def change_service_ports(service_id: str, change_port:ChangePortForm):
"""Choose and change the ports of the service"""
if change_port.port is None and change_port.internalPort is None:
return {'status': 'Invalid Request!'}
raise HTTPException(status_code=400, detail="Invalid Request!")
try:
sql_inj = ""
query:list[str|int] = []
@@ -178,7 +178,7 @@ async def change_service_ports(service_id: str, change_port:ChangePortForm):
query.append(service_id)
db.query(f'UPDATE services SET {sql_inj} WHERE service_id = ?;', *query)
except sqlite3.IntegrityError:
return {'status': 'Port of the service has been already assigned to another service'}
raise HTTPException(status_code=400, detail="Port of the service has been already assigned to another service")
await firewall.get(service_id).update_port()
await refresh_frontend()
return {'status': 'ok'}
@@ -260,12 +260,12 @@ async def add_new_regex(form: RegexAddForm):
try:
re.compile(b64decode(form.regex))
except Exception:
return {"status":"Invalid regex"}
raise HTTPException(status_code=400, detail="Invalid regex")
try:
db.query("INSERT INTO regexes (service_id, regex, is_blacklist, mode, is_case_sensitive, active ) VALUES (?, ?, ?, ?, ?, ?);",
form.service_id, form.regex, form.is_blacklist, form.mode, form.is_case_sensitive, True if form.active is None else form.active )
except sqlite3.IntegrityError:
return {'status': 'An identical regex already exists'}
raise HTTPException(status_code=400, detail="An identical regex already exists")
await firewall.get(form.service_id).update_filters()
await refresh_frontend()
return {'status': 'ok'}
@@ -286,11 +286,11 @@ class RenameForm(BaseModel):
async def service_rename(service_id: str, form: RenameForm):
"""Request to change the name of a specific service"""
form.name = refactor_name(form.name)
if not form.name: return {'status': 'The name cannot be empty!'}
if not form.name: raise HTTPException(status_code=400, detail="The name cannot be empty!")
try:
db.query('UPDATE services SET name=? WHERE service_id = ?;', form.name, service_id)
except sqlite3.IntegrityError:
return {'status': 'The name is already used!'}
raise HTTPException(status_code=400, detail="The name is already used!")
await refresh_frontend()
return {'status': 'ok'}
@@ -304,7 +304,7 @@ async def add_new_service(form: ServiceAddForm):
db.query("INSERT INTO services (name, service_id, internal_port, public_port, status) VALUES (?, ?, ?, ?, ?)",
form.name, serv_id, internal_port, form.port, 'stop')
except sqlite3.IntegrityError:
return {'status': 'Name or/and ports of the service has been already assigned to another service'}
raise HTTPException(status_code=400, detail="Name or/and ports of the service has been already assigned to another service")
await firewall.reload()
await refresh_frontend()
return {'status': 'ok', "id": serv_id }

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

@@ -1,5 +1,5 @@
import { ActionIcon, ActionIconProps } from "@mantine/core"
import { ImCross } from "react-icons/im"
import { ImCheckmark, ImCross } from "react-icons/im"
import { TiTick } from "react-icons/ti"
import {PolymorphicComponentProps} from "@mantine/utils"
@@ -11,6 +11,6 @@ interface IOnOffButtonProps extends Omit<PolymorphicComponentProps<"button",Acti
export const OnOffButton = ({value, ...props}:IOnOffButtonProps) => {
return <ActionIcon color={props.color?props.color:(value?"green":"red")} {...props}>
{value?<TiTick size={20} />:<ImCross size={12} />}
{value?<ImCheckmark size={14} />:<ImCross size={12} />}
</ActionIcon>
}

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

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Button, LoadingOverlay, Space, Switch, TextInput, Title, Tooltip } from "@mantine/core"
import { ActionIcon, Badge, 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';
@@ -17,6 +17,7 @@ import { ProtocolSelector } from "../../components/Firewall/ProtocolSelector";
import { ModeSelector } from "../../components/Firewall/ModeSelector";
import { OnOffButton } from "../../components/OnOffButton";
import { LuArrowBigRightDash } from "react-icons/lu"
import { ImCheckmark, ImCross } from "react-icons/im";
export const Firewall = () => {
@@ -31,6 +32,7 @@ export const Firewall = () => {
const [state, handlers] = useListState<Rule & {rule_id:string}>([]);
const [enableFwModal, setEnableFwModal] = useState(false)
const [applyChangeModal, setApplyChangeModal] = useState(false)
const theme = useMantineTheme();
const [updateMevalueinternal, internalUpdateme] = useState(false)
const updateMe = () => {
@@ -189,7 +191,21 @@ export const Firewall = () => {
updateMe()
}
const disable_style = { opacity:"0.4", cursor:"not-allowed" }
const proto_any = item.proto == Protocol.ANY
const disabletab = {
ips:!ipFilteringEnabled,
port_box: proto_any,
src_port: !srcPortEnabled || proto_any,
dst_port: !dstPortEnabled || proto_any
}
const additionalStyle = {
ips:disabletab.ips?disable_style:{},
port_box: disabletab.port_box?disable_style:{},
src_port: disabletab.src_port?disable_style:{},
dst_port: disabletab.dst_port?disable_style:{}
}
return <div
ref={provided.innerRef}
@@ -202,10 +218,28 @@ export const Firewall = () => {
<Space w="sm" />
<div className="center-flex-row" style={{width:"100%"}}>
<div className="center-flex" style={{width:"97%"}}>
<OnOffButton value={item.active} onClick={() =>{
<Switch
checked={item.active}
onChange={() =>{
item.active = !item.active
updateMe()
}} size="lg" variant="filled" radius="md" />
}}
color="teal"
size="lg"
thumbIcon={
item.active ? (
<ImCheckmark
style={{ width: rem(12), height: rem(12) }}
color={theme.colors.teal[6]}
/>
) : (
<ImCross
style={{ width: rem(12), height: rem(12) }}
color={theme.colors.red[6]}
/>
)
}
/>
<Space w="sm" />
<ActionIcon color="red" onClick={()=>handlers.remove(index)} size="lg" radius="md" variant="filled"><BsTrashFill size={18} /></ActionIcon>
<Space w="sm" />
@@ -214,7 +248,14 @@ export const Firewall = () => {
<Space h="sm" />
<div className="center-flex" style={{width:"97%"}}>
<div style={{width:"100%"}}>
<InterfaceInput initialCustomInterfaces={[...src_custom_int, ...customInt]} value={srcIp} onChange={v => ip_setter(item, v, {src:true})} disabled={!ipFilteringEnabled} />
<InterfaceInput
initialCustomInterfaces={[...src_custom_int, ...customInt]}
value={srcIp}
onChange={v => ip_setter(item, v, {src:true})}
disabled={disabletab.ips}
error={!disabletab.ips && !srcIp}
style={additionalStyle.ips}
/>
<Space h="sm" />
<div className="center-flex" style={{width:"100%"}}>
<OnOffButton value={srcPortEnabled} onClick={() =>{
@@ -227,16 +268,29 @@ export const Firewall = () => {
}else{
port_range_setter(item, srcPortValue, {src:true})
}
}} size="lg" disabled={proto_any} variant="light" />
}} size="lg" disabled={disabletab.port_box} style={additionalStyle.port_box} variant="light" />
<Space w="xs" />
<PortRangeInput onChange={v => port_range_setter(item, v.target.value, {src:true})} value={srcPortValue} disabled={!srcPortEnabled || proto_any} style={{width:"100%"}} />
<PortRangeInput
onChange={v => port_range_setter(item, v.target.value, {src:true})}
value={srcPortValue}
disabled={disabletab.src_port}
error={!disabletab.src_port && !srcPortValue}
style={{width:"100%", ...additionalStyle.src_port}}
/>
</div>
</div>
<Space w="lg" />
<LuArrowBigRightDash size={100} />
<Space w="lg" />
<div style={{width:"100%"}}>
<InterfaceInput initialCustomInterfaces={[...dst_custom_int, ...customInt]} defaultValue={dstIp} onChange={v => ip_setter(item, v, {dst:true})} disabled={!ipFilteringEnabled} />
<InterfaceInput
initialCustomInterfaces={[...dst_custom_int, ...customInt]}
defaultValue={dstIp}
onChange={v => ip_setter(item, v, {dst:true})}
disabled={disabletab.ips}
error={!disabletab.ips && !dstIp}
style={additionalStyle.ips}
/>
<Space h="sm" />
<div className="center-flex" style={{width:"100%"}}>
<OnOffButton value={dstPortEnabled} onClick={() =>{
@@ -249,9 +303,15 @@ export const Firewall = () => {
}else{
port_range_setter(item, dstPortValue, {dst:true})
}
}} size="lg" disabled={proto_any} variant="light" />
}} size="lg" disabled={disabletab.port_box} style={additionalStyle.port_box} variant="light" />
<Space w="xs" />
<PortRangeInput onChange={v => port_range_setter(item, v.target.value, {dst:true})} value={dstPortValue} disabled={!dstPortEnabled || proto_any} style={{width:"100%"}} />
<PortRangeInput
onChange={v => port_range_setter(item, v.target.value, {dst:true})}
value={dstPortValue}
disabled={disabletab.dst_port}
error={!disabletab.dst_port && !dstPortValue}
style={{width:"100%", ...additionalStyle.dst_port}}
/>
</div>
</div>
</div>
@@ -260,23 +320,33 @@ export const Firewall = () => {
<ActionTypeSelector
value={item.action}
onChange={(value)=>{item.action = value as ActionType;updateMe()}}
style={{width:"100%"}}
/>
<Space h="xs" />
<ModeSelector
value={item.mode}
onChange={(value)=>{item.mode = value as RuleMode;updateMe()}}
style={{width:"100%"}}
/>
<Space h="xs" />
<ProtocolSelector
value={item.proto}
onChange={(value)=>{item.proto = value as Protocol;updateMe()}}
style={{width:"100%"}}
/>
<Space h="xs" />
<Button size="xs" variant="light" color={ipFilteringEnabled?"lime":"red"} onClick={()=>set_filtering_ip(!ipFilteringEnabled)} >{ipFilteringEnabled?"IP Filtering ON":"IP Filtering OFF"}</Button>
<Button
size="xs" variant="light"
color={ipFilteringEnabled?"lime":"red"}
onClick={()=>set_filtering_ip(!ipFilteringEnabled)}
style={{width:"100%"}}
>{ipFilteringEnabled?"IP Filtering ON":"IP Filtering OFF"}</Button>
</div>
</div>
<Space h="md" />
<Divider />
<Space h="md" />
</div>
}}
</Draggable>
@@ -328,6 +398,8 @@ export const Firewall = () => {
handlers.reorder({ from: source.index, to: destination?.index || 0 })
}
>
<Divider />
<Space h="md" />
<Droppable droppableId="dnd-list" direction="vertical">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>