Merge pull request #39 from Pwnzer0tt1/dev

integrated more tooltips

frontend/src/components/PyFilterView/index.tsx

@@ -38,12 +38,16 @@ export default function PyFilterView({ filterInfo }:{ filterInfo:PyFilter }) {
         </Group>
 
         <Group gap="xs" wrap="nowrap">
+          <Tooltip label="Packets blocked by this filter" position="bottom" color="yellow">
             <Badge size="sm" color="yellow" variant="light" leftSection={<FaFilter size={10} style={{ marginTop: 2 }} />}>
               {filterInfo.blocked_packets}
             </Badge>
+          </Tooltip>
+          <Tooltip label="Packets mangled (modified) by this filter" position="bottom" color="orange">
             <Badge size="sm" color="orange" variant="light" leftSection={<FaPencilAlt size={10} style={{ marginTop: 2 }} />}>
               {filterInfo.edited_packets}
             </Badge>
+          </Tooltip>
           <Space w="xs" />
           <Tooltip label={filterInfo.active ? "Deactivate" : "Activate"} color={filterInfo.active ? "orange" : "teal"}>
             <ActionIcon 

frontend/src/components/RegexView/index.tsx

@@ -105,9 +105,11 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
       </Group>
 
       <Group gap="sm" mt="md">
+        <Tooltip label="Packets blocked by this regex" position="bottom" color="yellow">
           <Badge size="md" color="yellow" variant="light" leftSection={<FaFilter size={12} style={{ marginTop: 2 }} />}>
             {regexInfo.n_packets} packets
           </Badge>
+        </Tooltip>
         <Badge size="md" color={regexInfo.active ? "lime" : "red"} variant="light">
           {regexInfo.active ? "ACTIVE" : "DISABLED"}
         </Badge>

frontend/src/pages/Firewall/index.tsx

@@ -338,7 +338,9 @@ export const Firewall = () => {
       {isMedium ? <Box className='flex-spacer' /> : <Space h="sm" />}
       <Box className='center-flex'>
         <Space w="xs" />
+        <Tooltip label="Total number of firewall rules configured" position="bottom" color="green">
           <Badge size="md" radius="sm" color="green" variant="filled"><FaDirections style={{ marginBottom: -1, marginRight: 4 }} />Rules: {rules.isLoading ? 0 : rules.data?.rules.length}</Badge>
+        </Tooltip>
         <Space w="md" />
         <Tooltip label="Add a new rule" position='bottom' color="blue">
           <ActionIcon color="blue" onClick={emptyRuleAdd} size="lg" radius="md" variant="filled"><BsPlusLg size={18} /></ActionIcon>

frontend/src/pages/NFProxy/ServiceDetails.tsx

@@ -160,15 +160,21 @@ export default function ServiceDetailsNFProxy() {
                 <Box style={{ flexGrow: 1, minWidth: isMedium ? 'auto' : '100%' }}>
                     <Group gap="xl" justify={isMedium ? "flex-start" : "space-between"}>
                         <Group gap="xs">
+                            <Tooltip label="Packets blocked by this service's filters" position="bottom" color="yellow">
                                 <Badge color="yellow" radius="sm" size="lg" variant="light" leftSection={<FaFilter size={12} style={{ marginTop: 2 }} />}>
                                     {serviceInfo.blocked_packets}
                                 </Badge>
+                            </Tooltip>
+                            <Tooltip label="Packets mangled (modified) by this service's filters" position="bottom" color="orange">
                                 <Badge color="orange" radius="sm" size="lg" variant="light" leftSection={<FaPencilAlt size={12} style={{ marginTop: 2 }} />}>
                                     {serviceInfo.edited_packets}
                                 </Badge>
+                            </Tooltip>
+                            <Tooltip label="Number of Python filters attached to this service" position="bottom" color="violet">
                                 <Badge color="violet" radius="sm" size="lg" variant="light" leftSection={<TbPlugConnected size={12} style={{ marginTop: 2 }} />}>
                                     {serviceInfo.n_filters}
                                 </Badge>
+                            </Tooltip>
                         </Group>
 
                         <Group gap="sm" justify="flex-end" style={{ flexGrow: 1 }}>

frontend/src/pages/NFProxy/index.tsx

@@ -42,13 +42,21 @@ export default function NFProxy({ children }: { children: any }) {
         <Box className='center-flex' >
             {isMedium?"General stats:":null}
             <Space w="xs" />
+            <Tooltip label="Total number of NFProxy services configured" position="bottom" color="green">
                 <Badge size="md" radius="sm" color="green" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:Array.isArray(services.data)?services.data.length:0}</Badge>
+            </Tooltip>
             <Space w="xs" />
+            <Tooltip label="Total packets blocked by all services' filters" position="bottom" color="yellow">
                 <Badge color="yellow" radius="sm" size="md" variant="filled"><FaFilter style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:Array.isArray(services.data)?services.data.reduce((acc, s)=> acc+=s.blocked_packets, 0):0}</Badge>
+            </Tooltip>
             <Space w="xs" />
+            <Tooltip label="Total packets mangled (modified) by all services' filters" position="bottom" color="orange">
                 <Badge color="orange" radius="sm" size="md" variant="filled"><FaPencilAlt style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:Array.isArray(services.data)?services.data.reduce((acc, s)=> acc+=s.edited_packets, 0):0}</Badge>
+            </Tooltip>
             <Space w="xs" />
+            <Tooltip label="Total number of Python filters attached across all services" position="bottom" color="violet">
                 <Badge size="md" radius="sm" color="violet" variant="filled"><TbPlugConnected style={{ marginBottom: -2, marginRight: 4}} size={13} />{services.isLoading?0:Array.isArray(services.data)?services.data.reduce((acc, s)=> acc+=s.n_filters, 0):0}</Badge>
+            </Tooltip>
             <Space w="xs" />
         </Box>
         {isMedium?null:<Space h="md" />}

frontend/src/pages/NFRegex/ServiceDetails.tsx

@@ -131,12 +131,16 @@ export default function ServiceDetailsNFRegex() {
                 <Box style={{ flexGrow: 1, minWidth: isMedium ? 'auto' : '100%' }}>
                     <Group gap="xl" justify={isMedium ? "flex-start" : "space-between"}>
                         <Group gap="xs">
+                            <Tooltip label="Packets blocked by this service's regexes" position="bottom" color="yellow">
                                 <Badge color="yellow" radius="sm" size="lg" variant="light" leftSection={<FaFilter size={12} style={{ marginTop: 2 }} />}>
                                     {serviceInfo.n_packets}
                                 </Badge>
+                            </Tooltip>
+                            <Tooltip label="Number of regexes configured for this service" position="bottom" color="violet">
                                 <Badge color="violet" radius="sm" size="lg" variant="light" leftSection={<VscRegex size={12} style={{ marginTop: 2 }} />}>
                                     {serviceInfo.n_regex}
                                 </Badge>
+                            </Tooltip>
                         </Group>
 
                         <Group gap="sm" justify="flex-end" style={{ flexGrow: 1 }}>

frontend/src/pages/NFRegex/index.tsx

@@ -38,11 +38,17 @@ function NFRegex({ children }: { children: any }) {
         <Box className='center-flex' >
             {isMedium?"General stats:":null}
             <Space w="xs" />
+            <Tooltip label="Total number of NFRegex services configured" position="bottom" color="green">
                 <Badge size="md" radius="sm" color="green" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:Array.isArray(services.data)?services.data.length:0}</Badge>
+            </Tooltip>
             <Space w="xs" />
+            <Tooltip label="Total packets blocked by all services' regexes" position="bottom" color="yellow">
                 <Badge color="yellow" radius="sm" size="md" variant="filled"><FaFilter style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:Array.isArray(services.data)?services.data.reduce((acc, s)=> acc+=s.n_packets, 0):0}</Badge>
+            </Tooltip>
             <Space w="xs" />
+            <Tooltip label="Total number of regexes configured across all services" position="bottom" color="violet">
                 <Badge size="md" radius="sm" color="violet" variant="filled"><VscRegex style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:Array.isArray(services.data)?services.data.reduce((acc, s)=> acc+=s.n_regex, 0):0}</Badge>
+            </Tooltip>
             <Space w="xs" />
         </Box>
         {isMedium?null:<Space h="md" />}

frontend/src/pages/PortHijack/index.tsx

@@ -33,7 +33,9 @@ function PortHijack() {
             <Title order={5} className="center-flex"><ThemeIcon radius="md" size="md" variant='filled' color='blue' ><GrDirections size={20} /></ThemeIcon><Space w="xs" />Hijack port to proxy</Title>
             {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
             <Box className='center-flex'>
+                <Tooltip label="Total number of port-hijack services configured" position="bottom" color="yellow">
                     <Badge size="md" radius="sm" color="yellow" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:services.data?.length}</Badge>
+                </Tooltip>
                 <Space w="xs" />
                 <Tooltip label="Add a new service" position='bottom' color="blue">
                     <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"><BsPlusLg size={18} /></ActionIcon>