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

Now on IPv6

Browse Source
This commit is contained in:
DomySh
2022-07-10 15:05:56 +02:00
parent 8cd1b69752
commit ada3a7212b
13 changed files with 208 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@ type RegexAddInfo = {
deactive:boolean
}
function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:number }) {
function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) {
const form = useForm({
initialValues: {
@@ -48,7 +48,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
const request:RegexAddForm = {
is_blacklist:values.type !== "whitelist",
is_case_sensitive: !values.is_case_insensitive,
service_port: service,
service_id: service,
mode: filter_mode?filter_mode:"B",
regex: b64encode(values.regex),
active: !values.deactive
@@ -58,7 +58,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
if (!res){
setSubmitLoading(false)
close();
okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_port} service`)
okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
}else if (res.toLowerCase() === "invalid regex"){
setSubmitLoading(false)
form.setFieldError("regex", "Invalid Regex")

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

@@ -7,6 +7,7 @@ import { ImCross } from "react-icons/im"
type ServiceAddForm = {
name:string,
port:number,
ipv6:boolean,
autostart: boolean,
}
@@ -16,6 +17,7 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
initialValues: {
name:"",
port:8080,
ipv6:false,
autostart: true
},
validationRules:{
@@ -33,13 +35,13 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
const [submitLoading, setSubmitLoading] = useState(false)
const [error, setError] = useState<string|null>(null)
const submitRequest = ({ name, port, autostart }:ServiceAddForm) =>{
const submitRequest = ({ name, port, autostart, ipv6 }:ServiceAddForm) =>{
setSubmitLoading(true)
addservice({name, port}).then( res => {
if (res.status === "ok"){
addservice({name, port, ipv6}).then( res => {
if (res.status === "ok" && res.service_id){
setSubmitLoading(false)
close();
if (autostart) startservice(port)
if (autostart) startservice(res.service_id)
okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
}else{
setSubmitLoading(false)
@@ -76,6 +78,13 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
{...form.getInputProps('autostart', { type: 'checkbox' })}
/>
<Space h="sm" />
<Switch
label="Filter on Ipv6"
{...form.getInputProps('ipv6', { type: 'checkbox' })}
/>
<Group position="right" mt="md">
<Button loading={submitLoading} type="submit">Add Service</Button>
</Group>

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

@@ -70,7 +70,6 @@ function Header() {
}
const {srv} = useParams()
const service_port = srv?parseInt(srv):null
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);}
@@ -125,7 +124,7 @@ function Header() {
</ActionIcon>
</Tooltip>
:null}
{ service_port?
{ srv?
<Tooltip label="Add a new regex" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-add-id"
@@ -140,8 +139,8 @@ function Header() {
</Tooltip>
}
{service_port?
<AddNewRegex opened={open} onClose={closeModal} service={service_port} />:
{srv?
<AddNewRegex opened={open} onClose={closeModal} service={srv} />:
<AddNewService opened={open} onClose={closeModal} />
}
<Modal size="xl" title="Change Firewall Password" opened={changePasswordModal} onClose={()=>setChangePasswordModal(false)} closeOnClickOutside={false} centered>

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

@@ -79,7 +79,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
/>
<Space h="md" />
<div className='center-flex'>
<Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_port}</Badge>
<Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_id}</Badge>
<Space w="xs" />
<Badge size="md" color={regexInfo.active?"lime":"red"} variant="filled">{regexInfo.active?"ACTIVE":"DISABLED"}</Badge>
<Space w="xs" />

2
frontend/src/components/ServiceRow/RenameForm.tsx
View File

@@ -25,7 +25,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
const submitRequest = ({ name }:{ name:string }) => {
setSubmitLoading(true)
renameservice(service.port, name).then( res => {
renameservice(service.service_id, name).then( res => {
if (!res){
setSubmitLoading(false)
close();

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

@@ -25,7 +25,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const stopService = async () => {
setButtonLoading(true)
await stopservice(service.port).then(res => {
await stopservice(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
}else{
@@ -39,7 +39,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const startService = async () => {
setButtonLoading(true)
await startservice(service.port).then(res => {
await startservice(service.service_id).then(res => {
if(!res){
okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
}else{
@@ -52,7 +52,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
}
const deleteService = () => {
deleteservice(service.port).then(res => {
deleteservice(service.service_id).then(res => {
if (!res){
okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
}else
@@ -94,8 +94,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
</MediaQuery>
<div className="center-flex-row">
<Badge style={{marginBottom:"8px"}} 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>
<Space h="xs" />
<Badge color="violet" radius="sm" size="md" variant="filled">Regex: {service.n_regex}</Badge>
<Space h="xs" />
<Badge color={service.ipv6?"pink":"cyan"} radius="sm" size="md" variant="filled">Protocol: {service.ipv6?"IPv6":"IPv4"}</Badge>
</div>
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<div className='flex-spacer' />

12
frontend/src/js/models.ts
View File

@@ -6,8 +6,10 @@ export type GeneralStats = {
export type Service = {
name:string,
service_id:string,
status:string,
port:number,
ipv6:boolean,
n_packets:number,
n_regex:number,
}
@@ -15,9 +17,15 @@ export type Service = {
export type ServiceAddForm = {
name:string,
port:number,
ipv6:boolean,
internalPort?:number
}
export type ServiceAddResponse = {
status: string,
service_id?: string,
}
export type ServerResponse = {
status:string
}
@@ -49,7 +57,7 @@ export type ChangePassword = {
export type RegexFilter = {
id:number,
service_port:number,
service_id:string,
regex:string
is_blacklist:boolean,
is_case_sensitive:boolean,
@@ -59,7 +67,7 @@ export type RegexFilter = {
}
export type RegexAddForm = {
service_port:number,
service_id:string,
regex:string,
is_case_sensitive:boolean,
is_blacklist:boolean,

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

@@ -1,7 +1,7 @@
import { showNotification } from "@mantine/notifications";
import { ImCross } from "react-icons/im";
import { TiTick } from "react-icons/ti"
import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken } from "./models";
import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken, ServiceAddResponse } from "./models";
var Buffer = require('buffer').Buffer
@@ -64,8 +64,8 @@ export async function servicelist(){
return await getapi("services") as Service[];
}
export async function serviceinfo(service_port:number){
return await getapi(`service/${service_port}`) as Service;
export async function serviceinfo(service_id:string){
return await getapi(`service/${service_id}`) as Service;
}
export async function logout(){
@@ -109,27 +109,27 @@ export async function deactivateregex(regex_id:number){
return status === "ok"?undefined:status
}
export async function startservice(service_port:number){
const { status } = await getapi(`service/${service_port}/start`) as ServerResponse;
export async function startservice(service_id:string){
const { status } = await getapi(`service/${service_id}/start`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function renameservice(service_port:number, name: string){
const { status } = await postapi(`service/${service_port}/rename`,{ name }) as ServerResponse;
export async function renameservice(service_id:string, name: string){
const { status } = await postapi(`service/${service_id}/rename`,{ name }) as ServerResponse;
return status === "ok"?undefined:status
}
export async function stopservice(service_port:number){
const { status } = await getapi(`service/${service_port}/stop`) as ServerResponse;
export async function stopservice(service_id:string){
const { status } = await getapi(`service/${service_id}/stop`) as ServerResponse;
return status === "ok"?undefined:status
}
export async function addservice(data:ServiceAddForm) {
return await postapi("services/add",data) as ServerResponse;
return await postapi("services/add",data) as ServiceAddResponse;
}
export async function deleteservice(service_port:number) {
const { status } = await getapi(`service/${service_port}/delete`) as ServerResponse;
export async function deleteservice(service_id:string) {
const { status } = await getapi(`service/${service_id}/delete`) as ServerResponse;
return status === "ok"?undefined:status
}
@@ -139,8 +139,8 @@ export async function addregex(data:RegexAddForm) {
return status === "ok"?undefined:status
}
export async function serviceregexlist(service_port:number){
return await getapi(`service/${service_port}/regexes`) as RegexFilter[];
export async function serviceregexlist(service_id:string){
return await getapi(`service/${service_id}/regexes`) as RegexFilter[];
}

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

@@ -33,8 +33,8 @@ function HomePage() {
return <div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.port} onClick={()=>{
navigator("/"+srv.port)
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
navigator("/"+srv.service_id)
}} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'>

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

@@ -11,12 +11,13 @@ import { useWindowEvent } from '@mantine/hooks';
function ServiceDetails() {
const {srv} = useParams()
const service_port = srv?parseInt(srv):null
const [serviceInfo, setServiceInfo] = useState<Service>({
service_id: "",
port:0,
n_packets:0,
n_regex:0,
name:"",
ipv6:false,
status:"🤔"
})
@@ -26,9 +27,9 @@ function ServiceDetails() {
const closeModal = () => {setOpen(false);updateInfo();}
const updateInfo = async () => {
if (!service_port) return
if (!srv) return
let error = false;
await serviceinfo(service_port).then(res => {
await serviceinfo(srv).then(res => {
setServiceInfo(res)
}).catch(
err =>{
@@ -36,10 +37,10 @@ function ServiceDetails() {
navigator("/")
})
if (error) return
await serviceregexlist(service_port).then(res => {
await serviceregexlist(srv).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${service_port} service failed [Regex list]!`, err.toString())
err => errorNotify(`Updater for ${srv} service failed [Regex list]!`, err.toString())
)
setLoader(false)
}
@@ -73,7 +74,7 @@ function ServiceDetails() {
</Grid>
}
{service_port?<AddNewRegex opened={open} onClose={closeModal} service={service_port} />:null}
{srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
</div>