Initial Commit

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;