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

React Interface v3

Browse Source
This commit is contained in:
DomySh
2022-06-12 16:44:54 +02:00
parent 98652b0fa9
commit 3139cbf288
10 changed files with 284 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,20 @@
import { Center, Grid, SegmentedControl, Text, Title, Box, Badge, Space, ActionIcon } from '@mantine/core';
import React from 'react';
import React, { useState } from 'react';
import { RegexFilter } from '../../js/models';
import { getHumanReadableRegex } from '../../js/utils';
import style from "./RegexView.module.scss";
import { FaListAlt } from "react-icons/fa"
import { TiCancel } from "react-icons/ti"
import { BsTrashFill } from "react-icons/bs"
import YesNoModal from '../YesNoModal';
import FilterTypeSelector from '../FilterTypeSelector';
function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
const mode_string = regexInfo.mode == "C"? "C -> S":
regexInfo.mode == "S"? "S -> C":
regexInfo.mode == "B"? "S <-> C": "🤔"
const mode_string = regexInfo.mode === "C"? "C -> S":
regexInfo.mode === "S"? "S -> C":
regexInfo.mode === "B"? "S <-> C": "🤔"
let regex_expr = getHumanReadableRegex(regexInfo.regex);
let exact_regex = true;
@@ -22,6 +24,8 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
exact_regex = false;
}
const [deleteModal, setDeleteModal] = useState(false);
return <div className={style.box}>
<Grid>
<Grid.Col span={2}>
@@ -31,55 +35,42 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
<Text className={style.regex_text}> {regex_expr}</Text>
</Grid.Col>
<Grid.Col span={2}>
<ActionIcon color="red" onClick={()=>{}} 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>
</Grid.Col>
<Grid.Col span={2} />
<Grid.Col className='center-flex-row' span={4}>
<Space h="xs" />
<SegmentedControl
data={[
{
value: 'blacklist',
label: (
<Center style={{color:"#FFF"}}>
<TiCancel size={23} color="red"/>
<Box ml={10}>Blacklist</Box>
</Center>
),
},
{
value: 'whitelist',
label: (
<Center style={{color:"#FFF"}}>
<FaListAlt size={16} color="gray"/>
<Box ml={10}>Whitelist</Box>
</Center>
),
},
]}
<FilterTypeSelector
size="md"
color="gray"
disabled
/>
<Space h="md" />
<div className='center-flex'>
<Badge size="md" color="green" variant="filled">Service: {regexInfo.service_id}</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}>
value={regexInfo.is_blacklist?"blacklist":"whitelist"}
/>
<Space h="md" />
<div className='center-flex'>
<Badge size="md" color="green" variant="filled">Service: {regexInfo.service_id}</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={exact_regex?"grape":"pink"} variant="filled">Match: {exact_regex?"EXACT":"FIND"}</Badge>
<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="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>
<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}', causing the restart of the firewall if it is active.`}
onClose={()=>setDeleteModal(false)}
action={()=>console.log("Delete regex please!")}
opened={deleteModal}
/>
</div>
}