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

Frontend Changes

Browse Source
This commit is contained in:
DomySh
2022-06-22 01:31:46 +02:00
parent ede11873c5
commit 34d6b18ec0
10 changed files with 69 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, To
import { useForm } from '@mantine/hooks';
import React, { useState } from 'react';
import { RegexAddForm } from '../js/models';
import { addregex, b64encode, fireUpdateRequest, getHumanReadableRegex, okNotify } from '../js/utils';
import { addregex, b64encode, fireUpdateRequest, getBinaryRegex, getHumanReadableRegex, okNotify } from '../js/utils';
import { ImCross } from "react-icons/im"
import FilterTypeSelector from './FilterTypeSelector';
@@ -12,7 +12,6 @@ type RegexAddInfo = {
type:string,
mode:string,
is_case_insensitive:boolean,
regex_exact:boolean,
percentage_encoding:boolean
}
@@ -24,7 +23,6 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
type:"blacklist",
mode:"C <-> S",
is_case_insensitive:false,
regex_exact:false,
percentage_encoding:false
},
validationRules:{
@@ -47,12 +45,9 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
setSubmitLoading(true)
const filter_mode = ({'C -> S':'C', 'S -> C':'S', 'C <-> S':'B'}[values.mode])
let final_regex = values.regex
let final_regex:string|number[] = values.regex
if (values.percentage_encoding){
final_regex = decodeURIComponent(final_regex)
}
if(!values.regex_exact){
final_regex = ".*"+final_regex+".*"
final_regex = getBinaryRegex(final_regex)
}
const request:RegexAddForm = {
@@ -105,11 +100,6 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
{...form.getInputProps('is_case_insensitive', { type: 'checkbox' })}
/>
<Space h="md" />
<Switch
label="Match exactly the regex"
{...form.getInputProps('regex_exact', { type: 'checkbox' })}
/>
<Space h="md" />
<NativeSelect
data={['C -> S', 'S -> C', 'C <-> S']}
label="Choose the source of the packets to filter"

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

@@ -15,12 +15,6 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
regexInfo.mode === "B"? "S <-> C": "🤔"
let regex_expr = getHumanReadableRegex(regexInfo.regex);
let exact_regex = true;
if (regex_expr.length>=4 && regex_expr.startsWith(".*") && regex_expr.endsWith(".*")){
regex_expr = regex_expr.substring(2,regex_expr.length-2)
exact_regex = false;
}
const [deleteModal, setDeleteModal] = useState(false);
const [tooltipOpened, setTooltipOpened] = useState(false);
@@ -72,9 +66,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
<Grid.Col style={{width:"100%"}} span={6}>
<Space h="xs" />
<div className='center-flex-row'>
<Badge size="md" color={exact_regex?"grape":"pink"} variant="filled">Match: {exact_regex?"EXACT":"FIND"}</Badge>
<Space h="xs" />
<Badge size="md" color={regexInfo.is_case_sensitive?"red":"green"} variant="filled">Case: {regexInfo.is_case_sensitive?"SENSIIVE":"INSENSITIVE"}</Badge>
<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" />