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

Moduled Firegex, Merging pt2 (to finish and test)

Browse Source
This commit is contained in:
DomySh
2022-07-21 21:17:06 +02:00
parent 63ba0e94e7
commit 1399d0e22d
23 changed files with 177 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,11 +2,10 @@ import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Mo
import { useForm } from '@mantine/hooks';
import React, { useState } from 'react';
import { RegexAddForm } from '../js/models';
import { addregex, b64decode, b64encode, fireUpdateRequest, okNotify } from '../js/utils';
import { b64decode, b64encode, getapiobject, okNotify } from '../js/utils';
import { ImCross } from "react-icons/im"
import FilterTypeSelector from './FilterTypeSelector';
type RegexAddInfo = {
regex:string,
type:string,
@@ -54,11 +53,10 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
active: !values.deactive
}
setSubmitLoading(false)
addregex(request).then( res => {
getapiobject().regexesadd(request).then( res => {
if (!res){
setSubmitLoading(false)
close();
fireUpdateRequest();
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)

2
frontend/src/components/FilterTypeSelector.tsx
View File

@@ -3,8 +3,6 @@ import React from "react";
import { FaListAlt } from "react-icons/fa";
import { TiCancel } from "react-icons/ti";
export default function FilterTypeSelector(props:any){
return <SegmentedControl
data={[

123
frontend/src/components/NFRegex/AddNewRegex.tsx
View File

@@ -1,123 +0,0 @@
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useState } from 'react';
import { RegexAddForm } from '../../js/models';
import { b64decode, b64encode, nfregex, okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import FilterTypeSelector from '../FilterTypeSelector';
type RegexAddInfo = {
regex:string,
type:string,
mode:string,
is_case_insensitive:boolean,
deactive:boolean
}
function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) {
const form = useForm({
initialValues: {
regex:"",
type:"blacklist",
mode:"C -> S",
is_case_insensitive:false,
deactive:false
},
validationRules:{
regex: (value) => value !== "",
type: (value) => ["blacklist","whitelist"].includes(value),
mode: (value) => ['C -> S', 'S -> C', 'C <-> S'].includes(value)
}
})
const close = () =>{
onClose()
form.reset()
setError(null)
}
const [submitLoading, setSubmitLoading] = useState(false)
const [error, setError] = useState<string|null>(null)
const submitRequest = (values:RegexAddInfo) => {
setSubmitLoading(true)
const filter_mode = ({'C -> S':'C', 'S -> C':'S', 'C <-> S':'B'}[values.mode])
const request:RegexAddForm = {
is_blacklist:values.type !== "whitelist",
is_case_sensitive: !values.is_case_insensitive,
service_id: service,
mode: filter_mode?filter_mode:"B",
regex: b64encode(values.regex),
active: !values.deactive
}
setSubmitLoading(false)
nfregex.regexesadd(request).then( res => {
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_id} service`)
}else if (res.toLowerCase() === "invalid regex"){
setSubmitLoading(false)
form.setFieldError("regex", "Invalid Regex")
}else{
setSubmitLoading(false)
setError("Error: [ "+res+" ]")
}
}).catch( err => {
setSubmitLoading(false)
setError("Request Failed! [ "+err+" ]")
})
}
return <Modal size="xl" title="Add a new regex filter" opened={opened} onClose={close} closeOnClickOutside={false} centered>
<form onSubmit={form.onSubmit(submitRequest)}>
<TextInput
label="Regex"
placeholder="[A-Z0-9]{31}="
{...form.getInputProps('regex')}
/>
<Space h="md" />
<Switch
label="Case insensitive"
{...form.getInputProps('is_case_insensitive', { type: 'checkbox' })}
/>
<Space h="md" />
<Switch
label="Deactivate"
{...form.getInputProps('deactive', { type: 'checkbox' })}
/>
<Space h="md" />
<NativeSelect
data={['C -> S', 'S -> C', 'C <-> S']}
label="Choose the source of the packets to filter"
variant="filled"
{...form.getInputProps('mode')}
/>
<Space h="md" />
<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" />
{error?<>
<Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
Error: {error}
</Notification><Space h="md" /></>:null}
</form>
</Modal>
}
export default AddNewRegex;

3
frontend/src/components/NFRegex/AddNewService.tsx
View File

@@ -1,8 +1,9 @@
import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete, AutocompleteItem } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces, nfregex } from '../../js/utils';
import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { nfregex } from './utils';
type ServiceAddForm = {
name:string,

4
frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
View File

@@ -1,9 +1,9 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { nfregex, okNotify } from '../../../js/utils';
import { okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { Service } from '../../../js/models';
import { nfregex, Service } from '../utils';
function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) {

4
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 React, { useState } from 'react';
import { FaPlay, FaStop } from 'react-icons/fa';
import { Service } from '../../../js/models';
import { nfregex, Service } from '../utils';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./index.module.scss";
import YesNoModal from '../../YesNoModal';
import { errorNotify, nfregex, okNotify, regex_ipv4 } from '../../../js/utils';
import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils';
import { BsTrashFill } from 'react-icons/bs';
import { BiRename } from 'react-icons/bi'
import RenameForm from './RenameForm';

21
frontend/src/components/NFRegex/utils.ts
View File

@@ -1,5 +1,6 @@
import { ServerResponse } from "../../js/models"
import { RegexFilter, ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
import { RegexAddForm } from "../../js/models"
export type GeneralStats = {
services:number,
@@ -30,25 +31,7 @@ export type ServiceAddResponse = {
service_id?: string,
}
export type RegexFilter = {
id:number,
service_id:string,
regex:string
is_blacklist:boolean,
is_case_sensitive:boolean,
mode:string //C S B => C->S S->C BOTH
n_packets:number,
active:boolean
}
export type RegexAddForm = {
service_id:string,
regex:string,
is_case_sensitive:boolean,
is_blacklist:boolean,
mode:string, // C->S S->C BOTH,
active: boolean
}
export const nfregex = {
stats: async () => {

7
frontend/src/components/RegexProxy/AddNewService.tsx
View File

@@ -1,8 +1,9 @@
import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useState } from 'react';
import { addservice, fireUpdateRequest, okNotify, startservice } from '../js/utils';
import { fireUpdateRequest, okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { regexproxy } from './utils';
type ServiceAddForm = {
name:string,
@@ -40,12 +41,12 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
const submitRequest = ({ name, port, autostart, chosenInternalPort, internalPort }:ServiceAddForm) =>{
setSubmitLoading(true)
addservice(chosenInternalPort?{ internalPort, name, port }:{ name, port }).then( res => {
regexproxy.servicesadd(chosenInternalPort?{ internalPort, name, port }:{ name, port }).then( res => {
if (res.status === "ok"){
setSubmitLoading(false)
close();
fireUpdateRequest();
if (autostart) startservice(res.id)
if (autostart) regexproxy.servicestart(res.id)
okNotify(`Service ${name} has been added`, `Successfully added ${res.id} with port ${port}`)
}else{
setSubmitLoading(false)

13
frontend/src/components/RegexProxy/RegexView/RegexView.module.scss
View File

@@ -1,13 +0,0 @@
@use "../../vars" as *;
.box{
padding:30px;
margin:5px;
}
.regex_text{
padding: 10px;
background-color: $third_color;
border-radius: 15px;
}

114
frontend/src/components/RegexProxy/RegexView/index.tsx
View File

@@ -1,114 +0,0 @@
import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { RegexFilter } from '../../js/models';
import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, fireUpdateRequest, okNotify } from '../../js/utils';
import style from "./RegexView.module.scss";
import { BsTrashFill } from "react-icons/bs"
import YesNoModal from '../YesNoModal';
import FilterTypeSelector from '../FilterTypeSelector';
import { FaPause, FaPlay } from 'react-icons/fa';
function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
const mode_string = regexInfo.mode === "C"? "C -> S":
regexInfo.mode === "S"? "S -> C":
regexInfo.mode === "B"? "S <-> C": "🤔"
let regex_expr = b64decode(regexInfo.regex);
const [deleteModal, setDeleteModal] = useState(false);
const [deleteTooltipOpened, setDeleteTooltipOpened] = useState(false);
const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
const deleteRegex = () => {
deleteregex(regexInfo.id).then(res => {
if(!res){
okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
fireUpdateRequest()
}else{
errorNotify(`Regex ${regex_expr} deleation failed!`,`Error: ${res}`)
}
}).catch( err => errorNotify(`Regex ${regex_expr} deleation failed!`,`Error: ${err}`))
}
const changeRegexStatus = () => {
(regexInfo.active?deactivateregex:activateregex)(regexInfo.id).then(res => {
if(!res){
okNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivated":"activated"} successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been ${regexInfo.active?"deactivated":"activated"}!`)
fireUpdateRequest()
}else{
errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
}
}).catch( err => errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${err}`))
}
return <div className={style.box}>
<Grid>
<Grid.Col span={2}>
<Title order={2} style={{color:"#FFF"}}>Regex:</Title>
</Grid.Col>
<Grid.Col span={8}>
<Text className={style.regex_text}> {regex_expr}</Text>
</Grid.Col>
<Grid.Col span={2} className='center-flex'>
<Space w="xs" />
<Tooltip label={regexInfo.active?"Deactivate":"Activate"} zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color={regexInfo.active?"orange":"teal"} opened={statusTooltipOpened}>
<ActionIcon color={regexInfo.active?"orange":"teal"} onClick={changeRegexStatus} size="xl" radius="md" variant="filled"
onFocus={() => setStatusTooltipOpened(false)} onBlur={() => setStatusTooltipOpened(false)}
onMouseEnter={() => setStatusTooltipOpened(true)} onMouseLeave={() => setStatusTooltipOpened(false)}
>{regexInfo.active?<FaPause size="20px" />:<FaPlay size="20px" />}</ActionIcon>
</Tooltip>
<Space w="xs" />
<Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={deleteTooltipOpened} >
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"
onFocus={() => setDeleteTooltipOpened(false)} onBlur={() => setDeleteTooltipOpened(false)}
onMouseEnter={() => setDeleteTooltipOpened(true)} onMouseLeave={() => setDeleteTooltipOpened(false)}
><BsTrashFill size={22} /></ActionIcon>
</Tooltip>
</Grid.Col>
<Grid.Col span={2} />
<Grid.Col className='center-flex-row' span={4}>
<Space h="xs" />
<FilterTypeSelector
size="md"
color="gray"
disabled
value={regexInfo.is_blacklist?"blacklist":"whitelist"}
/>
<Space h="md" />
<div className='center-flex'>
<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" />
<Badge size="md" color="gray" variant="filled">ID: {regexInfo.id}</Badge>
</div>
</Grid.Col>
<Grid.Col style={{width:"100%"}} span={6}>
<Space h="xs" />
<div className='center-flex-row'>
<Badge size="md" color={regexInfo.is_case_sensitive?"grape":"pink"} variant="filled">Case: {regexInfo.is_case_sensitive?"SENSIIVE":"INSENSITIVE"}</Badge>
<Space h="xs" />
<Badge size="md" color="yellow" variant="filled">Packets filtered: {regexInfo.n_packets}</Badge>
<Space h="xs" />
<Badge size="md" color="blue" variant="filled">Mode: {mode_string}</Badge>
</div>
</Grid.Col>
</Grid>
<YesNoModal
title='Are you sure to delete this regex?'
description={`You are going to delete the regex '${regex_expr}'.`}
onClose={()=>setDeleteModal(false)}
action={deleteRegex}
opened={deleteModal}
/>
</div>
}
export default RegexView;

6
frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx
View File

@@ -1,10 +1,10 @@
import { Button, Group, NumberInput, Space, Notification, Modal, Center, Title } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { changeports, fireUpdateRequest, okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { Service } from '../../js/models';
import { FaLongArrowAltDown } from 'react-icons/fa';
import { regexproxy, Service } from '../utils';
import { fireUpdateRequest, okNotify } from '../../../js/utils';
type InputForm = {
internalPort:number,
@@ -39,7 +39,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
const submitRequest = (data:InputForm) =>{
setSubmitLoading(true)
changeports(service.id, data).then( res => {
regexproxy.servicechangeport(service.id, data).then( res => {
if (!res){
setSubmitLoading(false)
close();

6
frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx
View File

@@ -1,9 +1,9 @@
import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { fireUpdateRequest, okNotify, renameservice } from '../../js/utils';
import { fireUpdateRequest, okNotify } from '../../../js/utils';
import { ImCross } from "react-icons/im"
import { Service } from '../../js/models';
import { regexproxy, Service } from '../utils';
function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) {
@@ -25,7 +25,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
const submitRequest = ({ name }:{ name:string }) => {
setSubmitLoading(true)
renameservice(service.id, name).then( res => {
regexproxy.servicerename(service.id, name).then( res => {
if (!res){
setSubmitLoading(false)
close();

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

@@ -1,16 +1,16 @@
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { Service } from '../../js/models';
import { MdOutlineArrowForwardIos } from "react-icons/md"
import style from "./ServiceRow.module.scss";
import YesNoModal from '../YesNoModal';
import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice, regenport, startservice, stopservice } from '../../js/utils';
import YesNoModal from '../../YesNoModal';
import { errorNotify, fireUpdateRequest, okNotify } from '../../../js/utils';
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
import { TbNumbers } from 'react-icons/tb';
import { BiRename } from 'react-icons/bi'
import ChangePortModal from './ChangePortModal';
import RenameForm from './RenameForm';
import { regexproxy, Service } from '../utils';
//"status":"stop"/"wait"/"active"/"pause",
function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -33,7 +33,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const stopService = async () => {
setButtonLoading(true)
await stopservice(service.id).then(res => {
await regexproxy.servicestop(service.id).then(res => {
if(!res){
okNotify(`Service ${service.id} stopped successfully!`,`The service ${service.name} has been stopped!`)
fireUpdateRequest();
@@ -48,7 +48,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const startService = async () => {
setButtonLoading(true)
await startservice(service.id).then(res => {
await regexproxy.servicestart(service.id).then(res => {
if(!res){
okNotify(`Service ${service.id} started successfully!`,`The service ${service.name} has been started!`)
fireUpdateRequest();
@@ -63,7 +63,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const pauseService = async () => {
setButtonLoading(true)
await pauseservice(service.id).then(res => {
await regexproxy.servicepause(service.id).then(res => {
if(!res){
okNotify(`Service ${service.id} paused successfully!`,`The service ${service.name} has been paused (Transparent mode)!`)
fireUpdateRequest();
@@ -78,7 +78,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
}
const deleteService = () => {
deleteservice(service.id).then(res => {
regexproxy.servicedelete(service.id).then(res => {
if (!res){
okNotify("Service delete complete!",`The service ${service.id} has been deleted!`)
fireUpdateRequest();
@@ -91,7 +91,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
}
const changePort = () => {
regenport(service.id).then(res => {
regexproxy.serviceregenport(service.id).then(res => {
if (!res){
okNotify("Service port regeneration completed!",`The service ${service.id} has changed the internal port!`)
fireUpdateRequest();

22
frontend/src/components/RegexProxy/utils.ts
View File

@@ -1,4 +1,4 @@
import { ServerResponse } from "../../js/models"
import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
import { getapi, postapi } from "../../js/utils"
export type GeneralStats = {
@@ -33,26 +33,6 @@ export type ChangePort = {
internalPort?: number
}
export type RegexFilter = {
id:number,
service_id:string,
regex:string
is_blacklist:boolean,
is_case_sensitive:boolean,
mode:string //C S B => C->S S->C BOTH
n_packets:number,
active:boolean
}
export type RegexAddForm = {
service_id:string,
regex:string,
is_case_sensitive:boolean,
is_blacklist:boolean,
mode:string, // C->S S->C BOTH,
active: boolean
}
export const regexproxy = {
stats: async () => {
return await getapi("regexproxy/stats") as GeneralStats;

2
frontend/src/components/NFRegex/RegexView/index.module.scss → frontend/src/components/RegexView/index.module.scss
View File

@@ -1,5 +1,5 @@
@use "../../../vars" as *;
@use "../../vars" as *;
.box{
padding:30px;

14
frontend/src/components/NFRegex/RegexView/index.tsx → frontend/src/components/RegexView/index.tsx
View File

@@ -1,11 +1,11 @@
import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { RegexFilter } from '../../../js/models';
import { b64decode, errorNotify, nfregex, okNotify } from '../../../js/utils';
import { RegexFilter } from '../../js/models';
import { b64decode, errorNotify, getapiobject, okNotify } from '../../js/utils';
import style from "./index.module.scss";
import { BsTrashFill } from "react-icons/bs"
import YesNoModal from '../../YesNoModal';
import FilterTypeSelector from '../../FilterTypeSelector';
import YesNoModal from '../YesNoModal';
import FilterTypeSelector from '../FilterTypeSelector';
import { FaPause, FaPlay } from 'react-icons/fa';
@@ -22,7 +22,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
const deleteRegex = () => {
nfregex.regexdelete(regexInfo.id).then(res => {
getapiobject().regexdelete(regexInfo.id).then(res => {
if(!res){
okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
}else{
@@ -32,15 +32,13 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
}
const changeRegexStatus = () => {
(regexInfo.active?nfregex.regexdisable:nfregex.regexenable)(regexInfo.id).then(res => {
(regexInfo.active?getapiobject().regexdisable:getapiobject().regexenable)(regexInfo.id).then(res => {
if(!res){
okNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivated":"activated"} successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been ${regexInfo.active?"deactivated":"activated"}!`)
}else{
errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
}
}).catch( err => errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${err}`))
}
return <div className={style.box}>

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

@@ -31,3 +31,23 @@ export type IpInterface = {
name:string,
addr:string
}
export type RegexFilter = {
id:number,
service_id:string,
regex:string
is_blacklist:boolean,
is_case_sensitive:boolean,
mode:string //C S B => C->S S->C BOTH
n_packets:number,
active:boolean
}
export type RegexAddForm = {
service_id:string,
regex:string,
is_case_sensitive:boolean,
is_blacklist:boolean,
mode:string, // C->S S->C BOTH,
active: boolean
}

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

@@ -2,6 +2,7 @@ import { showNotification } from "@mantine/notifications";
import { ImCross } from "react-icons/im";
import { TiTick } from "react-icons/ti"
import { nfregex } from "../components/NFRegex/utils";
import { regexproxy } from "../components/RegexProxy/utils";
import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
var Buffer = require('buffer').Buffer
@@ -57,6 +58,16 @@ export function gatmainpath(){
return ""
}
export function getapiobject(){
switch(gatmainpath()){
case "nfregex":
return nfregex
case "regexproxy":
return regexproxy
}
throw 'No api for this tool!';
}
export function fireUpdateRequest(){
window.dispatchEvent(new Event(eventUpdateName))
}

7
frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
View File

@@ -1,13 +1,14 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import RegexView from '../../components/NFRegex/RegexView';
import RegexView from '../../components/RegexView';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import AddNewRegex from '../../components/NFRegex/AddNewRegex';
import AddNewRegex from '../../components/AddNewRegex';
import { BsPlusLg } from "react-icons/bs";
import { nfregex, RegexFilter, Service } from '../../components/NFRegex/utils';
import { nfregex, Service } from '../../components/NFRegex/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import { useWindowEvent } from '@mantine/hooks';
import { RegexFilter } from '../../js/models';
function ServiceDetails() {
const {srv} = useParams()

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

@@ -7,7 +7,7 @@ import { GeneralStats, nfregex, Service } from '../../components/NFRegex/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import AddNewService from '../../components/NFRegex/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
import AddNewRegex from '../../components/NFRegex/AddNewRegex';
import AddNewRegex from '../../components/AddNewRegex';
function NFRegex({ children }: { children: any }) {

53
frontend/src/pages/RegexProxy/HomePage.tsx
View File

@@ -1,53 +0,0 @@
import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate } from 'react-router-dom';
import ServiceRow from '../components/ServiceRow';
import { Service } from '../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, servicelist } from '../js/utils';
import AddNewService from '../components/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
function HomePage() {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const navigator = useNavigate()
const [open, setOpen] = useState(false);
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const updateInfo = async () => {
await servicelist().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const closeModal = () => {setOpen(false);}
return <div id="service-list" className="center-flex-row">
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/"+srv.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'>
<Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-addSrv-id"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>}
<AddNewService opened={open} onClose={closeModal} />
</div>
}
export default HomePage;

15
frontend/src/pages/RegexProxy/ServiceDetails.tsx
View File

@@ -1,13 +1,14 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import RegexView from '../components/RegexView';
import ServiceRow from '../components/ServiceRow';
import AddNewRegex from '../components/AddNewRegex';
import { BsPlusLg } from "react-icons/bs";
import { RegexFilter, Service } from '../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, serviceinfo, serviceregexlist } from '../js/utils';
import { useWindowEvent } from '@mantine/hooks';
import { regexproxy, Service } from '../../components/RegexProxy/utils';
import { RegexFilter } from '../../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import ServiceRow from '../../components/RegexProxy/ServiceRow';
import AddNewRegex from '../../components/AddNewRegex';
import RegexView from '../../components/RegexView';
function ServiceDetails() {
const {srv_id} = useParams()
@@ -30,7 +31,7 @@ function ServiceDetails() {
const updateInfo = async () => {
if (!srv_id) return
let error = false;
await serviceinfo(srv_id).then(res => {
await regexproxy.serviceinfo(srv_id).then(res => {
setServiceInfo(res)
}).catch(
err =>{
@@ -38,7 +39,7 @@ function ServiceDetails() {
navigator("/")
})
if (error) return
await serviceregexlist(srv_id).then(res => {
await regexproxy.serviceregexes(srv_id).then(res => {
setRegexesList(res)
}).catch(
err => errorNotify(`Updater for ${srv_id} service failed [Regex list]!`, err.toString())

97
frontend/src/pages/RegexProxy/index.tsx Executable file
View File

@@ -0,0 +1,97 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/RegexProxy/ServiceRow';
import { GeneralStats, regexproxy, Service } from '../../components/RegexProxy/utils';
import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
import AddNewService from '../../components/RegexProxy/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
import AddNewRegex from '../../components/AddNewRegex';
function RegexProxy({ children }: { children: any }) {
const [services, setServices] = useState<Service[]>([]);
const [loader, setLoader] = useState(true);
const navigator = useNavigate()
const [open, setOpen] = useState(false);
const {srv} = useParams()
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const updateInfo = async () => {
await Promise.all([
regexproxy.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
regexproxy.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
const closeModal = () => {setOpen(false);}
return <>
<Space h="sm" />
<div className='center-flex'>
<Title order={4}>Netfilter Regex</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Services: {generalStats.services}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
<Space w="xs" />
{ srv?
<Tooltip label="Add a new regex" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" 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' transition="pop" transitionDuration={200} transitionTimingFunction="ease" 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>
}
</div>
<div id="service-list" className="center-flex-row">
{srv?null:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/regexproxy/"+srv.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'>
<Tooltip label="Add a new service" transition="pop" transitionDuration={200} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>}
<AddNewService opened={open} onClose={closeModal} />
</>}
</div>
{srv?children:null}
{srv?
<AddNewRegex opened={open} onClose={closeModal} service={srv} />:
<AddNewService opened={open} onClose={closeModal} />
}
</>
}
export default RegexProxy;