Initial Commit

frontend/src/App.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import MainLayout from './components/MainLayout';
+import HomePage from './pages/HomePage';
+import Service from './pages/Service';
+
+function App() {
+  return <MainLayout>
+    <Routes>
+      <Route index element={<HomePage />} />
+      <Route path=":srv_id" element={<Service />} />
+      <Route path="*" element={<Navigate to="/" />} />
+    </Routes>
+  </MainLayout>
+}
+
+export default App;

frontend/src/_vars.scss

@@ -0,0 +1,2 @@
+
+$primary_color: #242a33;

frontend/src/components/Footer/Footer.module.scss

@@ -0,0 +1,9 @@
+@use "../../vars" as *;
+@use "../../index.scss" as *;
+
+.footer{
+    height: 150px;
+    margin-top: 50px;
+    background-color: $primary_color;
+    @extend .center-flex;
+}

frontend/src/components/Footer/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import style from "./Footer.module.scss";
+
+
+function Footer() {
+  return <div id="footer" className={style.footer}>
+        Made by Pwnzer0tt1
+  </div>
+}
+
+export default Footer;

frontend/src/components/Header/Header.module.scss

@@ -0,0 +1,17 @@
+
+@use "../../vars" as *;
+
+.header{
+    width: 100%;
+    height: 140px;
+    background-color: $primary_color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo{
+    width: 200px;
+    margin-left: 40px;
+    height: 70%;
+}

frontend/src/components/Header/index.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { ActionIcon, Badge } from '@mantine/core';
+import style from "./Header.module.scss";
+import { generalstats } from '../../js/utils';
+import { GeneralStats, update_freq } from '../../js/models';
+import { BsPlusLg } from "react-icons/bs"
+import { AiFillHome } from "react-icons/ai"
+import { useLocation, useNavigate } from 'react-router-dom';
+
+function Header() {
+  
+  const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regex:0, services:0});
+  const location = useLocation()
+
+  const navigator = useNavigate()
+
+  const updateInfo = () => {
+    generalstats().then(res => {
+      setGeneralStats(res)
+      setTimeout(updateInfo, update_freq)
+    }).catch(
+      err =>{
+        setTimeout(updateInfo, update_freq)}
+    )
+  }
+
+  useEffect(updateInfo,[]);
+
+  return <div id="header-page" className={style.header}>
+        <div className={style.logo} >LOGO</div>
+        <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>
+        <Badge style={{marginLeft:"10px"}} size="lg" color="violet" variant="filled">Regexes: {generalStats.regex}</Badge>
+        <div style={{marginLeft:"20px"}}></div>
+        { location.pathname !== "/"?
+            <ActionIcon color="teal" style={{marginRight:"10px"}}
+              size="xl" radius="md" variant="filled"
+              onClick={()=>navigator("/")}>
+              <AiFillHome size="25px" />
+            </ActionIcon>
+        :null}
+        <ActionIcon color="blue" size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+        <div style={{marginLeft:"40px"}}></div>
+  </div>
+}
+
+export default Header;

frontend/src/components/MainLayout.tsx

@@ -0,0 +1,38 @@
+import { Container, MantineProvider } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { Service, update_freq } from '../js/models';
+import { servicelist } from '../js/utils';
+import Footer from './Footer';
+import Header from './Header';
+
+function MainLayout({ children }:{ children:any }) {
+
+    const [services, setServices] = useState<Service[]>([]);
+  
+    const updateInfo = () => {
+      servicelist().then(res => {
+        setServices(res)
+        setTimeout(updateInfo, update_freq)
+      }).catch(
+        err =>{
+          setTimeout(updateInfo, update_freq)}
+      )
+    }
+  
+    useEffect(updateInfo,[]);
+
+  return <>
+    <MantineProvider theme={{ colorScheme: 'dark' }} withGlobalStyles withNormalizeCSS>
+        <Header />
+        <div style={{marginTop:"50px"}}/>
+        <Container size="xl" style={{minHeight:"58vh"}}>
+            {children}
+        </Container>
+        <div style={{marginTop:"50px"}}/>
+        <Footer />
+    </MantineProvider>
+        
+  </>
+}
+
+export default MainLayout;

frontend/src/components/ServiceRow/ServiceRow.module.scss

@@ -0,0 +1,17 @@
+
+@use "../../index.scss" as *;
+
+.row{
+    width: 95%;
+    padding: 30px 0px;
+    border-radius: 20px;
+    margin: 10px;
+    @extend .center-flex;
+}
+
+.name{
+    font-size: 2.3em;
+    font-weight: bolder;
+    margin-right: 10px;
+    margin-bottom: 13px;
+}

frontend/src/components/ServiceRow/index.tsx

@@ -0,0 +1,48 @@
+import { ActionIcon, Badge, Grid, Space, Title } from '@mantine/core';
+import React from 'react';
+import { FaPause, FaPlay } from 'react-icons/fa';
+import { Service } from '../../js/models';
+import { MdOutlineArrowForwardIos } from "react-icons/md"
+import style from "./ServiceRow.module.scss";
+
+//"status":"stop"/"wait"/"active"/"pause",
+function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
+
+    let status_color = "gray";
+    switch(service.status){
+        case "stop": status_color = "red"; break;
+        case "wait": status_color = "yellow"; break;
+        case "active": status_color = "teal"; break;
+        case "pause": status_color = "cyan"; break;
+    }
+    return <>
+        <Grid className={style.row} style={{width:"100%"}}>
+            <Grid.Col span={4}>
+                <div className="center-flex-row">
+                    <div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" variant="filled">:{service.public_port}</Badge></div>
+                    <Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
+                </div>
+            </Grid.Col>
+            <Grid.Col className="center-flex" span={8}>
+                <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>
+                    <Badge style={{marginBottom:"8px"}}color="violet" radius="sm" size="lg" variant="filled">Regex: {service.n_regex}</Badge>
+                    <Badge color="yellow" radius="sm" size="lg" variant="filled">Connections Blocked: {service.n_packets}</Badge>
+                </div>
+                <Space w="xl" /><Space w="xl" />
+                <div className="center-flex">
+                    <ActionIcon color="red" size="xl" radius="md" variant="filled" disabled={!["wait","active"].includes(service.status)?true:false}><FaPause size="20px" /></ActionIcon>
+                    <Space w="md"/>
+                    <ActionIcon color="teal" size="xl" radius="md" variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}><FaPlay size="20px" /></ActionIcon>
+                </div>
+                <Space w="xl" /><Space w="xl" />
+                {onClick?<MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size="45px" />:null}
+                <Space w="xl" />
+            </Grid.Col>
+        </Grid>
+        <hr style={{width:"100%"}}/>
+    </>
+}
+
+export default ServiceRow;

frontend/src/index.scss

@@ -0,0 +1,24 @@
+
+@use "vars" as *;
+
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+
+body {
+  margin: 0;
+  font-family: 'Lato', sans-serif;
+}
+
+.center-flex{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.center-flex-row{
+  @extend .center-flex;
+  flex-direction: column;
+}
+
+.flex-spacer{
+  flex-grow: 1;
+}

frontend/src/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from "react-router-dom"
+import './index.scss';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <BrowserRouter>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </BrowserRouter>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/js/models.ts

@@ -0,0 +1,19 @@
+
+
+export const update_freq = 3000;
+
+export type GeneralStats = {
+    services:number,
+    closed:number,
+    regex:number
+}
+
+export type Service = {
+    id:string,
+    name:string,
+    status:string,
+    public_port:number,
+    internal_port:number,
+    n_packets:number,
+    n_regex:number,
+}

frontend/src/js/utils.ts

@@ -0,0 +1,14 @@
+import { GeneralStats, Service } from "./models";
+
+export async function getapi(path:string):Promise<any>{
+    return await fetch(`/api/${path}`).then( res => res.json() )
+}
+
+
+export async function generalstats():Promise<GeneralStats>{
+    return await getapi("general-stats") as GeneralStats;
+}
+
+export async function servicelist():Promise<Service[]>{
+    return await getapi("services") as Service[];
+}

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate, useNavigate, useRoutes } from 'react-router-dom';
+import ServiceRow from '../components/ServiceRow';
+import { Service, update_freq } from '../js/models';
+import { servicelist } from '../js/utils';
+
+
+function HomePage() {
+
+    const [services, setServices] = useState<Service[]>([
+        {
+            id:"ctfe",
+            internal_port:18080,
+            n_packets: 30,
+            n_regex: 40,
+            name:"CTFe",
+            public_port:80,
+            status:"pause"
+        },
+        {
+            id:"saas",
+            internal_port:18080,
+            n_packets: 30,
+            n_regex: 40,
+            name:"SaaS",
+            public_port:5000,
+            status:"active"
+        }
+    ]);
+    const navigator = useNavigate()
+    
+    const updateInfo = () => {
+    servicelist().then(res => {
+        setServices(res)
+        setTimeout(updateInfo, update_freq)
+    }).catch(
+        err =>{
+        setTimeout(updateInfo, update_freq)}
+    )
+    }
+
+    useEffect(updateInfo,[]);
+
+    return <div id="service-list" className="center-flex-row">
+        {services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
+            navigator("/"+srv.id)
+        }} />)}
+    </div>
+}
+
+export default HomePage;

frontend/src/pages/Service.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+function Service() {
+    const {srv_id} = useParams()
+    return <div>
+        Service: {srv_id}
+    </div>
+}
+
+export default Service;

frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

frontend/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';