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

Modulating frontend

Browse Source
This commit is contained in:
DomySh
2022-07-21 12:39:30 +02:00
parent 29761b71da
commit 6fd2f6b359
16 changed files with 73 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/App.tsx
View File

@@ -9,7 +9,6 @@ import { errorNotify, fireUpdateRequest, getstatus, login, setpassword } from '.
import NFRegex from './pages/NFRegex.tsx';
import ServiceDetails from './pages/NFRegex.tsx/ServiceDetails';
import io from 'socket.io-client';
import HomePage from './pages/HomePage';
const socket = io({transports: ["websocket", "polling"], path:"/sock" });
@@ -146,11 +145,9 @@ function App() {
}else if (systemStatus.status === "run" && systemStatus.loggined){
return <Routes>
<Route element={<MainLayout><Outlet /></MainLayout>}>
<Route element={<HomePage><Outlet /></HomePage>}>
<Route path="nfregex" element={<NFRegex><Outlet /></NFRegex>} >
<Route path=":srv" element={<ServiceDetails />} />
</Route>
</Route>
<Route path="*" element={<Navigate to="/nfregex" />} />
</Route>
</Routes>

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

@@ -1,8 +1,7 @@
import React, { useState } from 'react';
import { ActionIcon, Badge, Divider, Image, Menu, Space, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
import { ActionIcon, Divider, Image, Menu, Tooltip, FloatingTooltip } from '@mantine/core';
import style from "./index.module.scss";
import { errorNotify, eventUpdateName, logout, nfregex } from '../../js/utils';
import { GeneralStats } from '../../js/models';
import { errorNotify, logout } from '../../js/utils';
import { BsPlusLg } from "react-icons/bs"
import { AiFillHome } from "react-icons/ai"
import { useNavigate, useParams } from 'react-router-dom';
@@ -11,26 +10,13 @@ import AddNewService from '../NFRegex/AddNewService';
import { FaLock } from 'react-icons/fa';
import { MdOutlineSettingsBackupRestore } from 'react-icons/md';
import { ImExit } from 'react-icons/im';
import { useWindowEvent } from '@mantine/hooks';
import ResetPasswordModal from './ResetPasswordModal';
import ResetModal from './ResetModal';
function Header() {
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const navigator = useNavigate()
const updateInfo = () => {
nfregex.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
)
}
useWindowEvent(eventUpdateName, updateInfo)
const logout_action = () => {
logout().then(r => {
@@ -51,34 +37,14 @@ function Header() {
const closeModal = () => {setOpen(false);}
return <div id="header-page" className={style.header}>
<FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
<div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
<div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
<FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
<Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
</div>
</FloatingTooltip>
<div className="flex-spacer" />
<MediaQuery largerThan="md" styles={{ display: 'none' }}>
<div>
<Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
<Space h="xs" />
<Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Space h="xs" />
<Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
</div>
</MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
<div className="center-flex">
<Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
<Space w="xs" />
<Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Space w="xs" />
<Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
</div>
</div></MediaQuery>
</FloatingTooltip>
</div>
<div className="flex-spacer" />
<div style={{marginLeft:"20px"}}></div>
<Menu>
@@ -122,7 +88,6 @@ function Header() {
}
<ResetPasswordModal opened={changePasswordModal} onClose={() => setChangePasswordModal(false)} />
<ResetModal opened={resetFiregexModal} onClose={() => setResetFiregexModal(false)} />
<div style={{marginLeft:"40px"}}></div>
</div>
}

25
frontend/src/components/MainLayout.tsx
View File

@@ -1,19 +1,22 @@
import React from 'react';
import { Container, Space } from '@mantine/core';
import { Container, Space, Tabs } from '@mantine/core';
import Footer from './Footer';
import Header from './Header';
function MainLayout({ children }:{ children:any }) {
return <>
<Header/>
<Space h="xl" />
<Container size="xl" style={{minHeight:"57.5vh"}}>
{children}
</Container>
<Space h="xl" />
<Footer />
return <>
<Header/>
<Tabs grow variant="pills">
<Tabs.Tab label="Regex Prox"></Tabs.Tab>
<Tabs.Tab label="Port Hijacking"></Tabs.Tab>
<Tabs.Tab label="Netfilter regex"></Tabs.Tab>
</Tabs>
<Space h="xl" />
<Container size="md" style={{minHeight:"57.5vh"}}>
{children}
</Container>
<Space h="xl" />
<Footer />
</>
}

5
frontend/src/components/NFRegex/RegexView/index.module.scss
View File

@@ -7,7 +7,8 @@
}
.regex_text{
padding: 10px;
padding: 6px;
background-color: $third_color;
border-radius: 15px;
border-radius: 8px;
margin: 6px;
}

4
frontend/src/components/NFRegex/RegexView/index.tsx
View File

@@ -45,8 +45,8 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
return <div className={style.box}>
<Grid>
<Grid.Col span={2}>
<Title order={2} style={{color:"#FFF"}}>Regex:</Title>
<Grid.Col span={2} className="center-flex">
<Title order={4}>Regex:</Title>
</Grid.Col>
<Grid.Col span={8}>
<Text className={style.regex_text}> {regex_expr}</Text>

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

@@ -1,6 +0,0 @@
import React from "react"
export default function HomePage({ children }: { children: any }) {
return children
}

6
frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
View File

@@ -55,7 +55,7 @@ function ServiceDetails() {
const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
return <div>
return <>
<LoadingOverlay visible={loader} />
<ServiceRow service={serviceInfo} />
{regexesList.length === 0?<>
@@ -77,9 +77,7 @@ function ServiceDetails() {
}
{srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
</div>
</>
}
export default ServiceDetails;

39
frontend/src/pages/NFRegex.tsx/index.tsx
View File

@@ -1,9 +1,9 @@
import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { BsPlusLg } from "react-icons/bs";
import { useNavigate, useParams } from 'react-router-dom';
import ServiceRow from '../../components/NFRegex/ServiceRow';
import { Service } from '../../js/models';
import { GeneralStats, Service } from '../../js/models';
import { errorNotify, eventUpdateName, fireUpdateRequest, nfregex } from '../../js/utils';
import AddNewService from '../../components/NFRegex/AddNewService';
import { useWindowEvent } from '@mantine/hooks';
@@ -18,13 +18,22 @@ function NFRegex({ children }: { children: any }) {
const {srv} = useParams()
const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
const updateInfo = async () => {
await nfregex.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
await Promise.all([
nfregex.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
nfregex.services().then(res => {
setServices(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
@@ -33,8 +42,18 @@ function NFRegex({ children }: { children: any }) {
const closeModal = () => {setOpen(false);}
return <div id="service-list" className="center-flex-row">
{srv?children:<>
return <>
<div id="service-list" className="center-flex-row">
<Space h="sm" />
<div className='center-flex'>
<Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
<Space w="xs" />
<Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
<Space w="xs" />
<Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
</div>
{srv?null:<>
<LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
navigator("/nfregex/"+srv.service_id)
@@ -51,6 +70,8 @@ function NFRegex({ children }: { children: any }) {
<AddNewService opened={open} onClose={closeModal} />
</>}
</div>
{srv?children:null}
</>
}
export default NFRegex;