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

fixed tooltip behavior + minor

Browse Source
This commit is contained in:
linoe97
2022-06-16 02:25:41 +02:00
committed by DomySh
parent 591b500a9a
commit 57a81feec8
6 changed files with 65 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/AddNewRegex.tsx
View File

@@ -89,8 +89,8 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
{...form.getInputProps('regex')} {...form.getInputProps('regex')}
/> />
<Space h="md" /> <Space h="md" />
<Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" openDelay={1500} transitionDuration={250} transitionTimingFunction="ease" <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-right" openDelay={500} transitionDuration={500} transitionTimingFunction="ease"
color="gray" wrapLines width={220} withArrow position='right'> color="gray" wrapLines width={220} withArrow position='right' gutter={20}>
<Switch <Switch
label="Use percentage encoding for binary values" label="Use percentage encoding for binary values"
{...form.getInputProps('percentage_encoding', { type: 'checkbox' })} {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}

23
frontend/src/components/Header/index.tsx
View File

@@ -52,6 +52,8 @@ function Header() {
const [loadingBtn, setLoadingBtn] = useState(false) const [loadingBtn, setLoadingBtn] = useState(false)
const [error, setError] = useState<null|string>(null) const [error, setError] = useState<null|string>(null)
const [changePasswordModal, setChangePasswordModal] = useState(false); const [changePasswordModal, setChangePasswordModal] = useState(false);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [tooltipHomeOpened, setTooltipHomeOpened] = useState(false);
const submitRequest = async (values:ChangePassword) => { const submitRequest = async (values:ChangePassword) => {
setLoadingBtn(true) setLoadingBtn(true)
@@ -110,20 +112,29 @@ function Header() {
</Menu> </Menu>
<div style={{marginLeft:"20px"}}></div> <div style={{marginLeft:"20px"}}></div>
{ location.pathname !== "/"? { location.pathname !== "/"?
<Tooltip zIndex={0} label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal"> <Tooltip zIndex={0} label="Home" position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal" opened={tooltipHomeOpened} tooltipId="tooltip-home-id">
<ActionIcon color="teal" style={{marginRight:"10px"}} <ActionIcon color="teal" style={{marginRight:"10px"}}
size="xl" radius="md" variant="filled" size="xl" radius="md" variant="filled"
onClick={()=>navigator("/")}> onClick={()=>navigator("/")}
aria-describedby="tooltip-home-id"
onFocus={() => setTooltipHomeOpened(false)} onBlur={() => setTooltipHomeOpened(false)}
onMouseEnter={() => setTooltipHomeOpened(true)} onMouseLeave={() => setTooltipHomeOpened(false)}>
<AiFillHome size="25px" /> <AiFillHome size="25px" />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
:null} :null}
{ srv_id? { srv_id?
<Tooltip label="Add a new regex" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> <Tooltip label="Add a new regex" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-add-id"
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
: <Tooltip label="Add a new service" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> : <Tooltip label="Add a new service" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-add-id"
onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
} }

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

@@ -23,6 +23,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
} }
const [deleteModal, setDeleteModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false);
const [tooltipOpened, setTooltipOpened] = useState(false);
const deleteRegex = () => { const deleteRegex = () => {
deleteregex(regexInfo.id).then(res => { deleteregex(regexInfo.id).then(res => {
@@ -44,8 +45,12 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
<Text className={style.regex_text}> {regex_expr}</Text> <Text className={style.regex_text}> {regex_expr}</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col span={2}>
<Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red"> <Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={tooltipOpened} tooltipId="tooltip-id">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon> <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-id"
onFocus={() => setTooltipOpened(false)} onBlur={() => setTooltipOpened(false)}
onMouseEnter={() => setTooltipOpened(true)} onMouseLeave={() => setTooltipOpened(false)}
><BsTrashFill size={22} /></ActionIcon>
</Tooltip> </Tooltip>
</Grid.Col> </Grid.Col>
<Grid.Col span={2} /> <Grid.Col span={2} />

14
frontend/src/components/ServiceRow/index.tsx
View File

@@ -20,6 +20,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
const [stopModal, setStopModal] = useState(false); const [stopModal, setStopModal] = useState(false);
const [buttonLoading, setButtonLoading] = useState(false) const [buttonLoading, setButtonLoading] = useState(false)
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
const stopService = async () => { const stopService = async () => {
setButtonLoading(true) setButtonLoading(true)
@@ -112,14 +113,17 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
{additional_buttons} {additional_buttons}
{["pause","wait"].includes(service.status)? {["pause","wait"].includes(service.status)?
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange"> <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="orange" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
<ActionIcon color="yellow" loading={buttonLoading} <ActionIcon color="yellow" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled" onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}> disabled={service.status === "stop"}
aria-describedby="tooltip-stop-id"
onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
<FaStop size="20px" /> <FaStop size="20px" />
</ActionIcon> </ActionIcon>
</Tooltip>: </Tooltip>:
<Tooltip label="Pause service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red"> <Tooltip label="Pause service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red">
<ActionIcon color="red" loading={buttonLoading} <ActionIcon color="red" loading={buttonLoading}
onClick={pauseService} size="xl" radius="md" variant="filled" onClick={pauseService} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}> disabled={service.status === "stop"}>
@@ -129,7 +133,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
} }
<Space w="md"/> <Space w="md"/>
<Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal"> <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading} <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}> variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
<FaPlay size="20px" /> <FaPlay size="20px" />
@@ -149,7 +153,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
</Grid> </Grid>
<YesNoModal <YesNoModal
title='Are you sure to stop this service?' title='Are you sure to stop this service?'
description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service ⚠️!`} description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service! ⚠️`}
onClose={()=>{setStopModal(false);}} onClose={()=>{setStopModal(false);}}
action={stopService} action={stopService}
opened={stopModal} opened={stopModal}

10
frontend/src/pages/HomePage.tsx
View File

@@ -15,6 +15,7 @@ function HomePage() {
const [loader, setLoader] = useState(true); const [loader, setLoader] = useState(true);
const navigator = useNavigate() const navigator = useNavigate()
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const updateInfo = async () => { const updateInfo = async () => {
await servicelist().then(res => { await servicelist().then(res => {
@@ -35,10 +36,13 @@ function HomePage() {
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{ {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/"+srv.id) navigator("/"+srv.id)
}} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title> }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'> <div className='center-flex'>
<Tooltip label="Add a new service" transition="pop" transitionDuration={200} openDelay={500} zIndex={0} transitionTimingFunction="ease" color="blue"> <Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-addSrv-id"
onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
</div> </div>
</>} </>}

32
frontend/src/pages/ServiceDetails.tsx
View File

@@ -56,6 +56,9 @@ function ServiceDetails() {
const [deleteModal, setDeleteModal] = useState(false) const [deleteModal, setDeleteModal] = useState(false)
const [changePortModal, setChangePortModal] = useState(false) const [changePortModal, setChangePortModal] = useState(false)
const [tooltipDeleteOpened, setTooltipDeleteOpened] = useState(false);
const [tooltipChangeOpened, setTooltipChangeOpened] = useState(false);
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
const deleteService = () => { const deleteService = () => {
deleteservice(serviceInfo.id).then(res => { deleteservice(serviceInfo.id).then(res => {
@@ -85,12 +88,20 @@ function ServiceDetails() {
return <div> return <div>
<LoadingOverlay visible={loader} /> <LoadingOverlay visible={loader} />
<ServiceRow service={serviceInfo} additional_buttons={<> <ServiceRow service={serviceInfo} additional_buttons={<>
<Tooltip label="Delete service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red"> <Tooltip label="Delete service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={tooltipDeleteOpened} tooltipId="tooltip-delete-id">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon> <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-delete-id"
onFocus={() => setTooltipDeleteOpened(false)} onBlur={() => setTooltipDeleteOpened(false)}
onMouseEnter={() => setTooltipDeleteOpened(true)} onMouseLeave={() => setTooltipDeleteOpened(false)}
><BsTrashFill size={22} /></ActionIcon>
</Tooltip> </Tooltip>
<Space w="md"/> <Space w="md"/>
<Tooltip label="Change proxy port" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> <Tooltip label="Change proxy port" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipChangeOpened} tooltipId="tooltip-change-id">
<ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon> <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-change-id"
onFocus={() => setTooltipChangeOpened(false)} onBlur={() => setTooltipChangeOpened(false)}
onMouseEnter={() => setTooltipChangeOpened(true)} onMouseLeave={() => setTooltipChangeOpened(false)}
><BsArrowRepeat size={28} /></ActionIcon>
</Tooltip> </Tooltip>
<Space w="md"/> <Space w="md"/>
</>}></ServiceRow> </>}></ServiceRow>
@@ -98,10 +109,13 @@ function ServiceDetails() {
{regexesList.length === 0?<> {regexesList.length === 0?<>
<Space h="xl" /> <Space h="xl" />
<Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title> <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'> <div className='center-flex'>
<Tooltip label="Add a new regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> <Tooltip label="Add a new regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddRegexOpened} tooltipId="tooltip-AddRegex-id">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
aria-describedby="tooltip-AddRegex-id"
onFocus={() => setTooltipAddRegexOpened(false)} onBlur={() => setTooltipAddRegexOpened(false)}
onMouseEnter={() => setTooltipAddRegexOpened(true)} onMouseLeave={() => setTooltipAddRegexOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
</div> </div>
</>: </>:
@@ -114,14 +128,14 @@ function ServiceDetails() {
<YesNoModal <YesNoModal
title='Are you sure to delete this service?' title='Are you sure to delete this service?'
description={`You are going to delete the service '${serviceInfo.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service ⚠️!`} description={`You are going to delete the service '${serviceInfo.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
onClose={()=>setDeleteModal(false) } onClose={()=>setDeleteModal(false) }
action={deleteService} action={deleteService}
opened={deleteModal} opened={deleteModal}
/> />
<YesNoModal <YesNoModal
title='Are you sure to change the proxy internal port?' title='Are you sure to change the proxy internal port?'
description={`You are going to change the proxy port '${serviceInfo.internal_port}'. This will cause the shutdown of your service temporarily ⚠️!`} description={`You are going to change the proxy port '${serviceInfo.internal_port}'. This will cause the shutdown of your service temporarily! ⚠️`}
onClose={()=>setChangePortModal(false)} onClose={()=>setChangePortModal(false)}
action={changePort} action={changePort}
opened={changePortModal} opened={changePortModal}