Restructurated frontend

2022-07-21 10:20:54 +02:00
parent 0ed8bb635e
commit acf9642f54
21 changed files with 183 additions and 181 deletions
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { ActionIcon, Badge, Divider, Image, Menu, Space, Tooltip, FloatingTooltip, MediaQuery } from '@mantine/core';
 import style from "./index.module.scss";
-import { errorNotify, eventUpdateName, generalstats, logout } from '../../js/utils';
+import { errorNotify, eventUpdateName, logout, nfregex } from '../../js/utils';
 import { GeneralStats } from '../../js/models';
 import { BsPlusLg } from "react-icons/bs"
 import { AiFillHome } from "react-icons/ai"
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import AddNewRegex from '../AddNewRegex';
-import AddNewService from '../AddNewService';
+import { useNavigate, useParams } from 'react-router-dom';
+import AddNewRegex from '../NFRegex/AddNewRegex';
+import AddNewService from '../NFRegex/AddNewService';
 import { FaLock } from 'react-icons/fa';
 import { MdOutlineSettingsBackupRestore } from 'react-icons/md';
 import { ImExit } from 'react-icons/im';
@@ -19,12 +19,11 @@ import ResetModal from './ResetModal';
 function Header() {
  
  const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
-  const location = useLocation()

  const navigator = useNavigate()

  const updateInfo = () => {
-    generalstats().then(res => {
+    nfregex.stats().then(res => {
      setGeneralStats(res)
    }).catch(
      err => errorNotify("General Info Auto-Update failed!", err.toString())
@@ -92,18 +91,16 @@ function Header() {
          
        </Menu>
        <div style={{marginLeft:"20px"}}></div>
-        { location.pathname !== "/"?
-          <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"}}
-              size="xl" radius="md" variant="filled"
-              onClick={()=>navigator("/")}
-              aria-describedby="tooltip-home-id"
-              onFocus={() => setTooltipHomeOpened(false)} onBlur={() => setTooltipHomeOpened(false)}
-              onMouseEnter={() => setTooltipHomeOpened(true)} onMouseLeave={() => setTooltipHomeOpened(false)}>
-              <AiFillHome size="25px" />
-            </ActionIcon>
-          </Tooltip>
-        :null}
+        <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"}}
+            size="xl" radius="md" variant="filled"
+            onClick={()=>navigator("/")}
+            aria-describedby="tooltip-home-id"
+            onFocus={() => setTooltipHomeOpened(false)} onBlur={() => setTooltipHomeOpened(false)}
+            onMouseEnter={() => setTooltipHomeOpened(true)} onMouseLeave={() => setTooltipHomeOpened(false)}>
+            <AiFillHome size="25px" />
+          </ActionIcon>
+        </Tooltip>
        { srv?
          <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"
--- a/frontend/src/components/NFRegex/AddNewRegex.tsx
+++ b/frontend/src/components/NFRegex/AddNewRegex.tsx
@@ -1,10 +1,10 @@
 import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
-import { RegexAddForm } from '../js/models';
-import { addregex, b64decode, b64encode, okNotify } from '../js/utils';
+import { RegexAddForm } from '../../js/models';
+import { b64decode, b64encode, nfregex, okNotify } from '../../js/utils';
 import { ImCross } from "react-icons/im"
-import FilterTypeSelector from './FilterTypeSelector';
+import FilterTypeSelector from '../FilterTypeSelector';


 type RegexAddInfo = {
@@ -54,7 +54,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
            active: !values.deactive
        }
        setSubmitLoading(false)
-        addregex(request).then( res => {
+        nfregex.regexesadd(request).then( res => {
            if (!res){
                setSubmitLoading(false)
                close();
--- a/frontend/src/components/NFRegex/AddNewService.tsx
+++ b/frontend/src/components/NFRegex/AddNewService.tsx
@@ -1,7 +1,7 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, SelectItemProps, Autocomplete, AutocompleteItem } from '@mantine/core';
+import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete, AutocompleteItem } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useEffect, useState } from 'react';
-import { addservice, okNotify, startservice, regex_ipv4, regex_ipv6, getipinterfaces } from '../js/utils';
+import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces, nfregex } from '../../js/utils';
 import { ImCross } from "react-icons/im"

 type ServiceAddForm = {
@@ -59,11 +59,11 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
 
    const submitRequest = ({ name, port, autostart, proto, ip_int }:ServiceAddForm) =>{
        setSubmitLoading(true)
-        addservice({name, port, proto, ip_int }).then( res => {
+        nfregex.servicesadd({name, port, proto, ip_int }).then( res => {
            if (res.status === "ok" && res.service_id){
                setSubmitLoading(false)
                close();
-                if (autostart) startservice(res.service_id)
+                if (autostart) nfregex.servicestart(res.service_id)
                okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
            }else{
                setSubmitLoading(false)
--- a/frontend/src/components/NFRegex/RegexView/index.module.scss
+++ b/frontend/src/components/NFRegex/RegexView/index.module.scss
@@ -1,5 +1,5 @@

-@use "../../vars" as *;
+@use "../../../vars" as *;

 .box{
    padding:30px;
--- a/frontend/src/components/NFRegex/RegexView/index.tsx
+++ b/frontend/src/components/NFRegex/RegexView/index.tsx
@@ -1,11 +1,11 @@
 import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
-import { RegexFilter } from '../../js/models';
-import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, okNotify } from '../../js/utils';
+import { RegexFilter } from '../../../js/models';
+import { b64decode, errorNotify, nfregex, okNotify } from '../../../js/utils';
 import style from "./index.module.scss";
 import { BsTrashFill } from "react-icons/bs"
-import YesNoModal from '../YesNoModal';
-import FilterTypeSelector from '../FilterTypeSelector';
+import YesNoModal from '../../YesNoModal';
+import FilterTypeSelector from '../../FilterTypeSelector';
 import { FaPause, FaPlay } from 'react-icons/fa';


@@ -22,7 +22,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
  const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);

  const deleteRegex = () => {
-    deleteregex(regexInfo.id).then(res => {
+    nfregex.regexdelete(regexInfo.id).then(res => {
      if(!res){
        okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
      }else{
@@ -33,7 +33,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {

  const changeRegexStatus = () => {
    
-    (regexInfo.active?deactivateregex:activateregex)(regexInfo.id).then(res => {
+    (regexInfo.active?nfregex.regexdisable:nfregex.regexenable)(regexInfo.id).then(res => {
      if(!res){
        okNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivated":"activated"} successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been ${regexInfo.active?"deactivated":"activated"}!`)
      }else{
--- a/frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
+++ b/frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
@@ -1,9 +1,9 @@
 import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useEffect, useState } from 'react';
-import { okNotify, renameservice } from '../../js/utils';
+import { nfregex, okNotify } from '../../../js/utils';
 import { ImCross } from "react-icons/im"
-import { Service } from '../../js/models';
+import { Service } from '../../../js/models';

 function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) { 

@@ -25,7 +25,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v

    const submitRequest = ({ name }:{ name:string }) => {
        setSubmitLoading(true)
-        renameservice(service.service_id, name).then( res => {
+        nfregex.servicerename(service.service_id, name).then( res => {
            if (!res){
                setSubmitLoading(false)
                close();
--- a/frontend/src/components/NFRegex/ServiceRow/index.module.scss
+++ b/frontend/src/components/NFRegex/ServiceRow/index.module.scss
@@ -1,5 +1,5 @@

-@use "../../index.scss" as *;
+@use "../../../index.scss" as *;

 .row{
    width: 95%;
--- a/frontend/src/components/NFRegex/ServiceRow/index.tsx
+++ b/frontend/src/components/NFRegex/ServiceRow/index.tsx
@@ -1,11 +1,11 @@
 import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
-import { Service } from '../../js/models';
+import { Service } from '../../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./index.module.scss";
-import YesNoModal from '../YesNoModal';
-import { deleteservice, errorNotify, okNotify, regex_ipv4, startservice, stopservice } from '../../js/utils';
+import YesNoModal from '../../YesNoModal';
+import { errorNotify, nfregex, okNotify, regex_ipv4 } from '../../../js/utils';
 import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
@@ -25,7 +25,8 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })

    const stopService = async () => {
        setButtonLoading(true)
-        await stopservice(service.service_id).then(res => {
+        
+        await nfregex.servicestop(service.service_id).then(res => {
            if(!res){
                okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
            }else{
@@ -39,7 +40,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })

    const startService = async () => {
        setButtonLoading(true)
-        await startservice(service.service_id).then(res => {
+        await nfregex.servicestart(service.service_id).then(res => {
            if(!res){
                okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
            }else{
@@ -52,7 +53,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
    }

    const deleteService = () => {
-        deleteservice(service.service_id).then(res => {
+        nfregex.servicedelete(service.service_id).then(res => {
            if (!res){
                okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
            }else