React Interface v2

frontend/src/_vars.scss

@@ -1,2 +1,4 @@
 
 $primary_color: #242a33;
+$second_color: #1A1B1E;
+$third_color:#25262b;

frontend/src/components/RegexView/RegexView.module.scss

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

frontend/src/components/RegexView/index.tsx

@@ -1,17 +1,85 @@
-import { TextInput } from '@mantine/core';
+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}>
-        <TextInput
+        <Grid>
-            disabled
+          <Grid.Col span={2}>
-            value={getHumanReadableRegex(regexInfo.regex)}
+            <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>
 }

frontend/src/components/ServiceRow/ServiceRow.module.scss

@@ -14,4 +14,5 @@
     font-weight: bolder;
     margin-right: 10px;
     margin-bottom: 13px;
+    color:#FFF;
 }

frontend/src/components/ServiceRow/index.tsx

@@ -6,7 +6,7 @@ import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
 
 //"status":"stop"/"wait"/"active"/"pause",
-function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
+function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) {
 
     let status_color = "gray";
     switch(service.status){
@@ -32,6 +32,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                 </div>
                 <Space w="xl" /><Space w="xl" />
                 <div className="center-flex">
+                    {additional_buttons}
                     <ActionIcon color={service.status === "pause"?"yellow":"red"} size="xl" radius="md" variant="filled" disabled={!["wait","active","pause"].includes(service.status)?true:false}>
                         {service.status === "pause"?<FaStop size="20px" />:<FaPause size="20px" />}
                     </ActionIcon>

frontend/src/js/models.ts

@@ -34,5 +34,6 @@ export type RegexFilter = {
     service_id:string,
     regex:string
     is_blacklist:boolean,
-    mode:string // C->S S->C BOTH
+    mode:string //C S B => C->S S->C BOTH
+    n_packets:number
 }

frontend/src/pages/ServiceDetails.tsx

@@ -1,6 +1,7 @@
-import { Grid, Space, Title } from '@mantine/core';
+import { ActionIcon, Grid, Space, Title } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import React, { useEffect, useState } from 'react';
+import { BsTrashFill } from 'react-icons/bs';
 import { ImCross } from 'react-icons/im';
 import { useParams } from 'react-router-dom';
 import RegexView from '../components/RegexView';
@@ -26,22 +27,17 @@ function ServiceDetails() {
             id:3546,
             is_blacklist:true,
             mode:"B",
-            regex:"d2VkcmZoaXdlZGZoYnVp",
+            regex:"LipmbGFnX2NoZWNrLio=",
-            service_id:"ctfe"
+            service_id:"ctfe",
+            n_packets:5,
         },
         {
             id:3546,
             is_blacklist:true,
             mode:"B",
             regex:"d2VkcmZoaXdlZGZoYnVp",
-            service_id:"ctfe"
+            service_id:"ctfe",
-        },
+            n_packets: 54
-        {
-            id:3546,
-            is_blacklist:true,
-            mode:"B",
-            regex:"d2VkcmZoaXdlZGZoYnVp",
-            service_id:"ctfe"
         }
     ])
 
@@ -84,7 +80,10 @@ function ServiceDetails() {
     }, []);
     
     return <>
-        <ServiceRow service={serviceInfo}></ServiceRow>
+        <ServiceRow service={serviceInfo} additional_buttons={<>
+            <ActionIcon color="red" onClick={()=>{}} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
+            <Space w="md"/>
+        </>}></ServiceRow>
         {regexesList.length === 0? 
             <><Space h="xl" /> <Title className='center-flex' order={1}>No regex found for this service! Add one clicking the add button above</Title></>:
             <Grid>