From 0e34805b4c06349e1731663aef92dd9e335bae43 Mon Sep 17 00:00:00 2001 From: Domingo Dirutigliano Date: Thu, 12 Oct 2023 20:01:48 +0200 Subject: [PATCH] gui: reposive? yeah responsive --- frontend/src/components/Header/index.tsx | 11 +- .../components/NFRegex/ServiceRow/index.tsx | 50 ++----- .../PortHijack/ServiceRow/index.module.scss | 5 + .../PortHijack/ServiceRow/index.tsx | 14 +- .../RegexProxy/ServiceRow/index.tsx | 49 ++----- frontend/src/js/utils.tsx | 9 ++ frontend/src/pages/Firewall/index.tsx | 130 ++++++++++-------- frontend/src/pages/NFRegex/index.tsx | 65 +++++---- frontend/src/pages/PortHijack/index.tsx | 42 +++--- 9 files changed, 189 insertions(+), 186 deletions(-) diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx index 5d568c4..7e28a08 100644 --- a/frontend/src/components/Header/index.tsx +++ b/frontend/src/components/Header/index.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; -import { ActionIcon, Divider, Image, Menu, Tooltip, MediaQuery, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core'; +import { ActionIcon, Divider, Image, Menu, Tooltip, Burger, Space, Header, Button, ThemeIcon } from '@mantine/core'; import style from "./index.module.scss"; -import { errorNotify, getmainpath, logout } from '../../js/utils'; +import { errorNotify, getmainpath, isLargeScreen, logout } from '../../js/utils'; import { AiFillHome } from "react-icons/ai" import { useNavigate } from 'react-router-dom'; import { FaLock } from 'react-icons/fa'; @@ -32,10 +32,11 @@ function HeaderPage({navOpen, setNav, ...other}: { navOpen: boolean, setNav:Reac const [resetFiregexModal, setResetFiregexModal] = useState(false); const [tooltipHomeOpened, setTooltipHomeOpened] = useState(false); const [tooltipLogoutOpened,setTooltipLogoutOpened] = useState(false); - + const isLarge = isLargeScreen() + console.log(isLarge) return
-
+ {isLarge?null:
-
+
}
Firegex logonavigator("/")}/> diff --git a/frontend/src/components/NFRegex/ServiceRow/index.tsx b/frontend/src/components/NFRegex/ServiceRow/index.tsx index dff4293..8c2d47f 100644 --- a/frontend/src/components/NFRegex/ServiceRow/index.tsx +++ b/frontend/src/components/NFRegex/ServiceRow/index.tsx @@ -1,11 +1,11 @@ -import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core'; +import { ActionIcon, Badge, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core'; import { useState } from 'react'; import { FaPlay, FaStop } from 'react-icons/fa'; import { nfregex, Service, serviceQueryKey } from '../utils'; import { MdOutlineArrowForwardIos } from "react-icons/md" import style from "./index.module.scss"; import YesNoModal from '../../YesNoModal'; -import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils'; +import { errorNotify, isMediumScreen, okNotify, regex_ipv4 } from '../../../js/utils'; import { BsTrashFill } from 'react-icons/bs'; import { BiRename } from 'react-icons/bi' import RenameForm from './RenameForm'; @@ -25,6 +25,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) const [tooltipStopOpened, setTooltipStopOpened] = useState(false); const [deleteModal, setDeleteModal] = useState(false) const [renameModal, setRenameModal] = useState(false) + const isMedium = isMediumScreen() const stopService = async () => { setButtonLoading(true) @@ -73,32 +74,17 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) return <> -
-
-
{service.name} :{service.port}
- Status: {service.status} -
-
-
-
-
{service.name} :{service.port}
- Status: {service.status} - -
-
- - - - + +
+
{service.name} :{service.port}
+ Status: {service.status} + {isMedium?null:} +
+ {!isMedium?:null} - -
- - - <> - + {!isMedium?
:<>}
Connections Blocked: {service.n_packets} @@ -107,12 +93,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {service.ip_int} on {service.proto}
- -
- - - <> - + {isMedium?
:<>}
Rename service @@ -145,13 +126,10 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
:null} - - <> - - + {isMedium?<>:null} -
+ () + const isMedium = isMediumScreen() const form = useForm({ initialValues: { proxy_port:service.proxy_port }, @@ -89,7 +90,7 @@ function ServiceRow({ service }:{ service:Service }) { } return <> -
+
@@ -105,6 +106,8 @@ function ServiceRow({ service }:{ service:Service }) {
+ {isMedium?null:} +
FROM {service.ip_src} : {service.public_port} @@ -119,7 +122,7 @@ function ServiceRow({ service }:{ service:Service }) { size="xs" variant="unstyled" style={{ - width: (6+form.values.proxy_port.toString().length*6.2) +"px" + width: (10+form.values.proxy_port.toString().length*6.2) +"px" }} className={style.portInput} onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}} @@ -161,10 +164,13 @@ function ServiceRow({ service }:{ service:Service }) {
+
+ {isMedium?null:}
-
+ + void }) const [choosePortModal, setChoosePortModal] = useState(false) const [renameModal, setRenameModal] = useState(false) + const isMedium = isMediumScreen() + const stopService = async () => { setButtonLoading(true) await regexproxy.servicestop(service.id).then(res => { @@ -101,44 +103,21 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) return <> -
-
-
{service.name} :{service.public_port}
- {service.internal_port} {"->"} {service.public_port} -
-
-
-
-
{service.name} :{service.public_port}
- - {service.internal_port} {"->"} {service.public_port} -
-
- - - - +
+
{service.name} :{service.public_port}
+ {service.internal_port} {"->"} {service.public_port} +
+ {!isMedium?:null} - -
- - - <> - - + {!isMedium?
:<>}
Status: {service.status} Regex: {service.n_regex} Connections Blocked: {service.n_packets}
- -
- - - <> - + {isMedium?
:<>}
Rename service @@ -185,9 +164,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
:null} - - <> - + {!isMedium?<>:null} @@ -198,7 +175,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) action={stopService} opened={stopModal} /> -
+ { const [applyChangeModal, setApplyChangeModal] = useState(false) const [settingsModal, setSettingsModal] = useState(false) const theme = useMantineTheme(); + const isMedium = useMediaQuery(`(min-width: 950px)`) + const isSmall = useMediaQuery(`(max-width: 600px)`) const [updateMevalueinternal, internalUpdateme] = useState(false) const updateMe = () => { @@ -100,6 +102,13 @@ export const Firewall = () => { } } + const condDiv = (val:React.ReactNode, cond:boolean) => { + if (cond) + return
{val}
+ else + return val + } + const emptyRuleAdd = () => { handlers.insert(0,{ rule_id: makeid(30), @@ -201,6 +210,7 @@ export const Firewall = () => {
+
{
-
+
{
-
- {item.action = value as ActionType;updateMe()}} + {!isMedium?:null} +
+ {condDiv(<>{condDiv({item.mode = value as RuleMode;updateMe()}} style={{width:"100%"}} - /> - - {item.mode = value as RuleMode;updateMe()}} - style={{width:"100%"}} - /> + />, !isMedium)} - {item.proto = value as Protocol;updateMe()}} style={{width:"100%"}} - /> + />, !isMedium)}, isSmall)} + + {condDiv({item.action = value as ActionType;updateMe()}} + style={{width:"100%"}} + />, !isMedium)} +
@@ -329,55 +341,59 @@ export const Firewall = () => { return <> -
+
Firewall Rules -
- Enabled: - - Policy: - - setCurrentPolicy(value as ActionType)} - /> - - Rules: {rules.isLoading?0:rules.data?.rules.length} - - - setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} - onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> - - - - queryClient.invalidateQueries(["firewall"])} size="lg" radius="md" variant="filled" - loading={rules.isFetching} - onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} - onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}> - - - - setSettingsModal(true)} size="lg" radius="md" variant="filled" - onFocus={() => setTooltipSettingsOpened(false)} onBlur={() => setTooltipSettingsOpened(false)} - onMouseEnter={() => setTooltipSettingsOpened(true)} onMouseLeave={() => setTooltipSettingsOpened(false)}> - - - - setTooltipApplyOpened(false)} onBlur={() => setTooltipApplyOpened(false)} - onMouseEnter={() => setTooltipApplyOpened(true)} onMouseLeave={() => setTooltipApplyOpened(false)} - disabled={!valuesChanged} - > - + {isMedium?
:} +
+ Enabled: + + Policy: + + setCurrentPolicy(value as ActionType)} + /> +
+ {isMedium?
:} +
+ + Rules: {rules.isLoading?0:rules.data?.rules.length} + + + setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} + onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> + + + + queryClient.invalidateQueries(["firewall"])} size="lg" radius="md" variant="filled" + loading={rules.isFetching} + onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} + onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}> + + + + setSettingsModal(true)} size="lg" radius="md" variant="filled" + onFocus={() => setTooltipSettingsOpened(false)} onBlur={() => setTooltipSettingsOpened(false)} + onMouseEnter={() => setTooltipSettingsOpened(true)} onMouseLeave={() => setTooltipSettingsOpened(false)}> + + + + setTooltipApplyOpened(false)} onBlur={() => setTooltipApplyOpened(false)} + onMouseEnter={() => setTooltipApplyOpened(true)} onMouseLeave={() => setTooltipApplyOpened(false)} + disabled={!valuesChanged} + > + +
- + {items.length > 0? handlers.reorder({ from: source.index, to: destination?.index || 0 }) } > - {(provided) => ( diff --git a/frontend/src/pages/NFRegex/index.tsx b/frontend/src/pages/NFRegex/index.tsx index dabcb05..e7430d6 100644 --- a/frontend/src/pages/NFRegex/index.tsx +++ b/frontend/src/pages/NFRegex/index.tsx @@ -1,10 +1,10 @@ -import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core'; +import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core'; import { useEffect, useState } from 'react'; import { BsPlusLg } from "react-icons/bs"; import { useNavigate, useParams } from 'react-router-dom'; import ServiceRow from '../../components/NFRegex/ServiceRow'; import { nfregexServiceQuery } from '../../components/NFRegex/utils'; -import { errorNotify, getErrorMessage } from '../../js/utils'; +import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils'; import AddNewService from '../../components/NFRegex/AddNewService'; import AddNewRegex from '../../components/AddNewRegex'; import { useQueryClient } from '@tanstack/react-query'; @@ -20,7 +20,7 @@ function NFRegex({ children }: { children: any }) { const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false); const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false); const [tooltipAddOpened, setTooltipAddOpened] = useState(false); - + const isMedium = isMediumScreen() const services = nfregexServiceQuery() useEffect(()=> { @@ -32,35 +32,42 @@ function NFRegex({ children }: { children: any }) { return <> -
+
Netfilter Regex -
- Services: {services.isLoading?0:services.data?.length} + {isMedium?
:} +
+ Services: {services.isLoading?0:services.data?.length} + + Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)} + + Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)} + +
+ {isMedium?null:} +
+ { srv? + + setOpen(true)} size="lg" radius="md" variant="filled" + onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} + onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> + + : + setOpen(true)} size="lg" radius="md" variant="filled" + onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} + onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> + + } - Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)} - - Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)} - - { srv? - - setOpen(true)} size="lg" radius="md" variant="filled" - onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} - onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> - - : - setOpen(true)} size="lg" radius="md" variant="filled" - onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} - onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> - - } - - - queryClient.invalidateQueries(["nfregex"])} size="lg" radius="md" variant="filled" - loading={services.isFetching} - onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} - onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}> - + + queryClient.invalidateQueries(["nfregex"])} size="lg" radius="md" variant="filled" + loading={services.isFetching} + onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} + onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}> + +
+ +
{srv?null:<> diff --git a/frontend/src/pages/PortHijack/index.tsx b/frontend/src/pages/PortHijack/index.tsx index 4b991a3..ccf586d 100644 --- a/frontend/src/pages/PortHijack/index.tsx +++ b/frontend/src/pages/PortHijack/index.tsx @@ -1,9 +1,9 @@ -import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core'; +import { ActionIcon, Badge, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core'; import { useEffect, useState } from 'react'; import { BsPlusLg } from "react-icons/bs"; import ServiceRow from '../../components/PortHijack/ServiceRow'; import { porthijackServiceQuery } from '../../components/PortHijack/utils'; -import { errorNotify, getErrorMessage } from '../../js/utils'; +import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils'; import AddNewService from '../../components/PortHijack/AddNewService'; import { useQueryClient } from '@tanstack/react-query'; import { TbReload } from 'react-icons/tb'; @@ -16,7 +16,7 @@ function PortHijack() { const [tooltipAddOpened, setTooltipAddOpened] = useState(false); const queryClient = useQueryClient() const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false); - + const isMedium = isMediumScreen() const services = porthijackServiceQuery() @@ -29,26 +29,30 @@ function PortHijack() { return <> -
+
Hijack port to proxy -
- Services: {services.isLoading?0:services.data?.length} - - - setOpen(true)} size="lg" radius="md" variant="filled" - onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} - onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> - - - - queryClient.invalidateQueries(["porthijack"])} size="lg" radius="md" variant="filled" - loading={services.isFetching} - onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} - onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}> - + {isMedium?
:} +
+ Services: {services.isLoading?0:services.data?.length} + + + setOpen(true)} size="lg" radius="md" variant="filled" + onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)} + onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}> + + + + queryClient.invalidateQueries(["porthijack"])} size="lg" radius="md" variant="filled" + loading={services.isFetching} + onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)} + onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}> + +
+
+ {(services.data && services.data.length > 0) ?services.data.map( srv => ):<> No services found! Add one clicking the "+" buttons