88 lines
3.4 KiB
TypeScript
Executable File
88 lines
3.4 KiB
TypeScript
Executable File
import { Center, Grid, SegmentedControl, Text, Title, Box, Badge, Space, ActionIcon } from '@mantine/core';
|
|
import React 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"
|
|
|
|
|
|
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 = 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;
|
|
}
|
|
|
|
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}>
|
|
<ActionIcon color="red" onClick={()=>{}} 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>
|
|
),
|
|
},
|
|
]}
|
|
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}>
|
|
<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>
|
|
|
|
</Grid>
|
|
|
|
</div>
|
|
}
|
|
|
|
export default RegexView;
|