push: code changes

2025-02-25 23:53:04 +01:00
parent 8652f40235
commit 6a11dd0d16
37 changed files with 1306 additions and 640 deletions
--- a/frontend/src/components/NFProxy/AddEditService.tsx
+++ b/frontend/src/components/NFProxy/AddEditService.tsx
@@ -26,7 +26,7 @@ function AddEditService({ opened, onClose, edit }:{ opened:boolean, onClose:()=>
        validate:{
            name: (value) => edit? null : value !== "" ? null : "Service name is required",
            port: (value) => (value>0 && value<65536) ? null : "Invalid port",
-            proto: (value) => ["tcp","udp"].includes(value) ? null : "Invalid protocol",
+            proto: (value) => ["tcp","http"].includes(value) ? null : "Invalid protocol",
            ip_int: (value) => (value.match(regex_ipv6) || value.match(regex_ipv4)) ? null : "Invalid IP address",
        }
    })
@@ -50,7 +50,7 @@ function AddEditService({ opened, onClose, edit }:{ opened:boolean, onClose:()=>
    const submitRequest = ({ name, port, autostart, proto, ip_int, fail_open }:ServiceAddForm) =>{
        setSubmitLoading(true)
        if (edit){
-            nfproxy.settings(edit.service_id, { port, proto, ip_int, fail_open }).then( res => {
+            nfproxy.settings(edit.service_id, { port, ip_int, fail_open }).then( res => {
                if (!res){
                    setSubmitLoading(false)
                    close();
@@ -111,13 +111,13 @@ function AddEditService({ opened, onClose, edit }:{ opened:boolean, onClose:()=>
                    />
                </Box>
                <Box className="flex-spacer"></Box>
-                <SegmentedControl
+                {edit?null:<SegmentedControl
                    data={[
                        { label: 'TCP', value: 'tcp' },
-                        { label: 'UDP', value: 'udp' },
+                        { label: 'HTTP', value: 'http' },
                    ]}
                    {...form.getInputProps('proto')}
-                />
+                />}
            </Box>      

            <Group justify='flex-end' mt="md" mb="sm">
--- a/frontend/src/components/NFProxy/UploadFilterModal.tsx
+++ b/frontend/src/components/NFProxy/UploadFilterModal.tsx
@@ -0,0 +1,54 @@
+import { Button, FileButton, Group, Modal, Notification, Space } from "@mantine/core";
+import { nfproxy, Service } from "./utils";
+import { useEffect, useState } from "react";
+import { ImCross } from "react-icons/im";
+import { okNotify } from "../../js/utils";
+
+export const UploadFilterModal = ({ opened, onClose, service }: { opened: boolean, onClose: () => void, service?: Service }) => {
+    const close = () =>{
+        onClose()
+        setError(null)
+    }
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+    const [file, setFile] = useState<File | null>(null);
+    
+    useEffect(() => {
+        if (opened && file){
+            file.bytes().then( code => {
+                console.log(code.toString())
+                setSubmitLoading(true)
+                nfproxy.setpyfilterscode(service?.service_id??"",code.toString()).then( res => {
+                    if (!res){
+                        setSubmitLoading(false)
+                        close();
+                        okNotify(`Service ${name} code updated`, `Successfully updated code for service ${name}`)
+                    }
+                }).catch( err => {
+                    setSubmitLoading(false)
+                    setError("Error: "+err)
+                })
+            })
+        }
+    }, [opened, file])
+    
+    return <Modal opened={opened && service != null} onClose={onClose} title="Upload filter Code" size="xl" closeOnClickOutside={false} centered>
+            <Space h="md" />
+            <Group justify="center">
+                <FileButton onChange={setFile} accept=".py" multiple={false}>
+                {(props) => <Button {...props}>Upload filter python code</Button>}
+                </FileButton>
+            </Group>
+
+            {error?<>
+                <Space h="md" />
+                <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                    Error: {error}
+                </Notification>
+            </>:null}
+            <Space h="md" />
+
+    </Modal>
+
+}
--- a/frontend/src/components/NFProxy/utils.ts
+++ b/frontend/src/components/NFProxy/utils.ts
@@ -25,7 +25,6 @@ export type ServiceAddForm = {

 export type ServiceSettings = {
    port?:number,
-    proto?:string,
    ip_int?:string,
    fail_open?: boolean,
 }
@@ -55,12 +54,12 @@ export const nfproxy = {
    serviceinfo: async (service_id:string) => {
        return await getapi(`nfproxy/services/${service_id}`) as Service;
    },
-    pyfilterenable: async (regex_id:number) => {
-        const { status } = await postapi(`nfproxy/pyfilters/${regex_id}/enable`) as ServerResponse;
+    pyfilterenable: async (filter_name:string) => {
+        const { status } = await postapi(`nfproxy/pyfilters/${filter_name}/enable`) as ServerResponse;
        return status === "ok"?undefined:status
    },
-    pyfilterdisable: async (regex_id:number) => {
-        const { status } = await postapi(`nfproxy/pyfilters/${regex_id}/disable`) as ServerResponse;
+    pyfilterdisable: async (filter_name:string) => {
+        const { status } = await postapi(`nfproxy/pyfilters/${filter_name}/disable`) as ServerResponse;
        return status === "ok"?undefined:status
    },
    servicestart: async (service_id:string) => {
--- a/frontend/src/components/PyFilterView/index.tsx
+++ b/frontend/src/components/PyFilterView/index.tsx
@@ -1,7 +1,7 @@
 import { Text, Badge, Space, ActionIcon, Tooltip, Box } from '@mantine/core';
 import { useState } from 'react';
 import { PyFilter } from '../../js/models';
-import { errorNotify, okNotify } from '../../js/utils';
+import { errorNotify, isMediumScreen, okNotify } from '../../js/utils';
 import { FaPause, FaPlay } from 'react-icons/fa';
 import { FaFilter } from "react-icons/fa";
 import { nfproxy } from '../NFProxy/utils';
@@ -9,42 +9,39 @@ import { FaPencilAlt } from 'react-icons/fa';

 export default function PyFilterView({ filterInfo }:{ filterInfo:PyFilter }) {

-  const [deleteTooltipOpened, setDeleteTooltipOpened] = useState(false);
  const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
+  const isMedium = isMediumScreen()

  const changeRegexStatus = () => {
-    (filterInfo.active?nfproxy.pyfilterdisable:nfproxy.pyfilterenable)(filterInfo.filter_id).then(res => {
+    (filterInfo.active?nfproxy.pyfilterdisable:nfproxy.pyfilterenable)(filterInfo.name).then(res => {
      if(!res){
-        okNotify(`Filter ${filterInfo.name} ${filterInfo.active?"deactivated":"activated"} successfully!`,`Filter with id '${filterInfo.filter_id}' has been ${filterInfo.active?"deactivated":"activated"}!`)
+        okNotify(`Filter ${filterInfo.name} ${filterInfo.active?"deactivated":"activated"} successfully!`,`Filter '${filterInfo.name}' has been ${filterInfo.active?"deactivated":"activated"}!`)
      }else{
        errorNotify(`Filter ${filterInfo.name} ${filterInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
      }
    }).catch( err => errorNotify(`Filter ${filterInfo.name} ${filterInfo.active?"deactivation":"activation"} failed!`,`Error: ${err}`))
  }

-  return <Box className="firegex__regexview__box">
-        <Box>
-          <Box className='center-flex' style={{width: "100%"}}>
-            <Box className="firegex__regexview__outer_regex_text">
-              <Text className="firegex__regexview__regex_text">{filterInfo.name}</Text>
-            </Box>
-            <Space w="xs" />
-            <Tooltip label={filterInfo.active?"Deactivate":"Activate"} zIndex={0} color={filterInfo.active?"orange":"teal"} opened={statusTooltipOpened}>
-              <ActionIcon color={filterInfo.active?"orange":"teal"} onClick={changeRegexStatus} size="xl" radius="md" variant="filled"
-              onFocus={() => setStatusTooltipOpened(false)} onBlur={() => setStatusTooltipOpened(false)}
-              onMouseEnter={() => setStatusTooltipOpened(true)} onMouseLeave={() => setStatusTooltipOpened(false)}
-              >{filterInfo.active?<FaPause size="20px" />:<FaPlay size="20px" />}</ActionIcon>
-            </Tooltip>
-          </Box>
-          <Box display="flex" mt="sm" ml="xs">
-            <Badge size="md" color="yellow" variant="filled"><FaFilter style={{ marginBottom: -2}} /> {filterInfo.blocked_packets}</Badge>
-            <Space w="xs" />
-            <Badge size="md" color="orange" variant="filled"><FaPencilAlt size={18} /> {filterInfo.edited_packets}</Badge>
-            <Space w="xs" />
-            <Badge size="md" color={filterInfo.active?"lime":"red"} variant="filled">{filterInfo.active?"ACTIVE":"DISABLED"}</Badge>
-            
-          </Box>
-        </Box>
-        
+  return <Box my="sm" display="flex" style={{alignItems:"center"}}>
+      
+      <Text className="firegex__regexview__pyfilter_text" style={{ width: "100%", alignItems: "center"}} display="flex" >
+      <Badge size="sm" radius="lg" mr="sm" color={filterInfo.active?"lime":"red"} variant="filled" />
+        {filterInfo.name}
+        <Box className='flex-spacer' />
+        <Space w="xs" />
+        {isMedium?<>
+          <Badge size="md" radius="md" color="yellow" variant="filled"><FaFilter style={{ marginBottom: -2, marginRight: 2}} /> {filterInfo.blocked_packets}</Badge>
+          <Space w="xs" />
+          <Badge size="md" radius="md" color="orange" variant="filled"><FaPencilAlt style={{ marginBottom: -1, marginRight: 2}} /> {filterInfo.edited_packets}</Badge>
+          <Space w="lg" />
+        </>:null}
+        <Tooltip label={filterInfo.active?"Deactivate":"Activate"} zIndex={0} color={filterInfo.active?"orange":"teal"} opened={statusTooltipOpened}>
+          <ActionIcon color={filterInfo.active?"orange":"teal"} onClick={changeRegexStatus} size="lg" radius="md" variant="filled"
+          onFocus={() => setStatusTooltipOpened(false)} onBlur={() => setStatusTooltipOpened(false)}
+          onMouseEnter={() => setStatusTooltipOpened(true)} onMouseLeave={() => setStatusTooltipOpened(false)}
+          >{filterInfo.active?<FaPause size="20px" />:<FaPlay size="20px" />}</ActionIcon>
+        </Tooltip>
+      </Text>
+
  </Box>
 }