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

added tooltips and buttons

Browse Source
This commit is contained in:
linoe97
2022-06-14 22:43:48 +02:00
committed by DomySh
parent 826f92f9e3
commit 3f56a2cb3b
9 changed files with 581 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/globals.d.ts vendored Executable file
View File

@@ -0,0 +1,5 @@
// declaration.d.ts
declare module '*.scss' {
const content: Record<string, string>;
export default content;
}

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

@@ -1,4 +1,4 @@
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect } from '@mantine/core';
import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useState } from 'react';
import { RegexAddForm } from '../js/models';
@@ -78,13 +78,16 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri
{...form.getInputProps('regex')}
/>
<Space h="md" />
<Switch
label="Use percentage encoding for binary values"
{...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
/>
<Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" transitionDuration={300} transitionTimingFunction="ease"
color="gray" wrapLines width={220} withArrow position='right'>
<Switch
label="Use percentage encoding for binary values"
{...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
/>
</Tooltip>
<Space h="md" />
<Switch
label="Match the exactly the regex"
label="Match exactly the regex"
{...form.getInputProps('regex_exact', { type: 'checkbox' })}
/>
<Space h="md" />

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

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput } from '@mantine/core';
import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip } from '@mantine/core';
import style from "./Header.module.scss";
import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils';
import { ChangePassword, GeneralStats, update_freq } from '../../js/models';
@@ -72,19 +72,16 @@ function Header() {
setLoadingBtn(false)
}
const {srv_id} = useParams()
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);}
return <div id="header-page" className={style.header}>
<div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px" }}>
<Image src="/header-logo.png" alt="Firegex logo" />
</div>
<FloatingTooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="dark" position="right" >
<div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
<Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
</div>
</FloatingTooltip>
<div className="flex-spacer" />
<Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
<Badge style={{marginLeft:"10px"}} size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
@@ -98,13 +95,23 @@ function Header() {
</Menu>
<div style={{marginLeft:"20px"}}></div>
{ location.pathname !== "/"?
<Tooltip label="Home" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" style={{marginRight:"10px"}}
size="xl" radius="md" variant="filled"
onClick={()=>navigator("/")}>
<AiFillHome size="25px" />
</ActionIcon>
</Tooltip>
:null}
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
{ location.pathname !== "/"?
<Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
: <Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
}
{srv_id?
<Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
<AddNewRegex closePopup={closeModal} service={srv_id} />

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

@@ -1,4 +1,4 @@
import { Grid, Text, Title, Badge, Space, ActionIcon } from '@mantine/core';
import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { RegexFilter } from '../../js/models';
import { deleteregex, errorNotify, getHumanReadableRegex, okNotify } from '../../js/utils';
@@ -43,8 +43,10 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
<Text className={style.regex_text}> {regex_expr}</Text>
</Grid.Col>
<Grid.Col span={2}>
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
</Grid.Col>
<Tooltip label="Delete regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
</Tooltip>
</Grid.Col>
<Grid.Col span={2} />
<Grid.Col className='center-flex-row' span={4}>
<Space h="xs" />

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

@@ -1,4 +1,4 @@
import { ActionIcon, Badge, Grid, Space, Title } from '@mantine/core';
import { ActionIcon, Badge, Grid, Space, Title, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
import { Service } from '../../js/models';
@@ -8,7 +8,7 @@ import YesNoModal from '../YesNoModal';
import { errorNotify, okNotify, pauseservice, startservice, stopservice } from '../../js/utils';
//"status":"stop"/"wait"/"active"/"pause",
function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) {
function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ service:Service, onClick?:()=>void, additional_buttons?:any, add_new_regex?:any }) {
let status_color = "gray";
switch(service.status){
@@ -73,6 +73,9 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
</div>
</Grid.Col>
<Grid.Col className="center-flex" span={8}>
<div className="center-flex">
{add_new_regex}
</div>
<div className='flex-spacer'></div>
<div className="center-flex-row">
<Badge style={{marginBottom:"20px"}} color={status_color} radius="sm" size="xl" variant="filled">Status: <u>{service.status}</u></Badge>
@@ -83,23 +86,30 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
<div className="center-flex">
{additional_buttons}
{["pause","wait"].includes(service.status)?
<ActionIcon color="yellow" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}>
<FaStop size="20px" />
</ActionIcon>:
<ActionIcon color="red" loading={buttonLoading}
onClick={pauseService} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}>
<FaPause size="20px" />
</ActionIcon>
<Tooltip label="Stop service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="orange">
<ActionIcon color="yellow" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}>
<FaStop size="20px" />
</ActionIcon>
</Tooltip>:
<Tooltip label="Pause service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" loading={buttonLoading}
onClick={pauseService} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}>
<FaPause size="20px" />
</ActionIcon>
</Tooltip>
}
<Space w="md"/>
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
<FaPlay size="20px" />
</ActionIcon>
<Tooltip label="Start service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
<FaPlay size="20px" />
</ActionIcon>
</Tooltip>
</div>
<Space w="xl" /><Space w="xl" />
{onClick?<MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size="45px" />:null}
@@ -107,8 +117,8 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
</Grid.Col>
</Grid>
<YesNoModal
title='Are you sure to stop this service!'
description={`You are going to delete the service '${service.id}', causing the stopping of the firewall. This will cause the shutdown of your 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 ⚠️!`}
onClose={()=>setStopModal(false)}
action={stopService}
opened={stopModal}

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

@@ -33,7 +33,7 @@ function HomePage() {
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/"+srv.id)
}} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the add button above</Title></>}
}} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title></>}
</div>
}

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

@@ -1,9 +1,11 @@
import { ActionIcon, Grid, LoadingOverlay, Space, Title } from '@mantine/core';
import { ActionIcon, Grid, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { BsTrashFill } from 'react-icons/bs';
import { useNavigate, useParams } from 'react-router-dom';
import RegexView from '../components/RegexView';
import ServiceRow from '../components/ServiceRow';
import AddNewRegex from '../components/AddNewRegex';
import { BsPlusLg } from "react-icons/bs";
import YesNoModal from '../components/YesNoModal';
import { RegexFilter, Service, update_freq } from '../js/models';
import { deleteservice, errorNotify, okNotify, regenport, serviceinfo, serviceregexlist } from '../js/utils';
@@ -24,6 +26,8 @@ function ServiceDetails() {
const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
const [loader, setLoader] = useState(true);
const [open, setOpen] = useState(false);
const closeModal = () => {setOpen(false);}
const navigator = useNavigate()
@@ -80,17 +84,48 @@ function ServiceDetails() {
return <div>
<LoadingOverlay visible={loader} />
<ServiceRow service={serviceInfo} additional_buttons={<>
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
<Tooltip label="Delete service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
</Tooltip>
<Space w="md"/>
<ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
<Tooltip label="Change proxy port" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
</Tooltip>
<Space w="md"/>
</>} add_new_regex={<>
<Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</>}></ServiceRow>
{regexesList.length === 0?
<><Space h="xl" /> <Title className='center-flex' order={3}>No regex found for this service! Add one clicking the add button above</Title></>:
<><Space h="xl" /> <Title className='center-flex' order={3}>No regex found for this service! Add one by clicking the "+" button</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<Tooltip label="Add a new regex" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip>
</div>
</>
:
<Grid>
{regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} span={6}><RegexView regexInfo={regexInfo}/></Grid.Col>)}
</Grid>
}
{srv_id?
<Modal size="xl" title="Add a new regex filter" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
<AddNewRegex closePopup={closeModal} service={srv_id} />
</Modal>:
null
}
<YesNoModal
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 ⚠️!`}

3
frontend/tsconfig.json
View File

@@ -21,6 +21,7 @@
"jsx": "react-jsx"
},
"include": [
"src"
"src",
"globals.d.ts" //configured .d.ts file
]
}