push: code changes

frontend/src/pages/NFProxy/ServiceDetails.tsx

@@ -162,22 +162,22 @@ export default function ServiceDetailsNFProxy() {
                 </Tooltip>
             </Box>
         </Box>
+        
         <Divider my="xl" />
+
         {filterCode.data?<>
             <Title order={3} style={{textAlign:"center"}} className="center-flex"><FaPython style={{ marginBottom: -3 }} size={30} /><Space w="xs" />Filter code</Title>
             <CodeHighlight code={filterCode.data} language="python" mt="lg" />
         </>: null}
-        <Space h="xl" />
+
         {(!filtersList.data || filtersList.data.length == 0)?<>
+                <Space h="xl" />
                 <Title className='center-flex' style={{textAlign:"center"}} order={3}>No filters found! Edit the proxy file</Title>
                 <Space h="xs" />
                 <Title className='center-flex' style={{textAlign:"center"}} order={3}>Install the firegex client:<Space w="xs" /><Code mb={-4} >pip install fgex</Code></Title>
                 <Space h="xs" />
                 <Title className='center-flex' style={{textAlign:"center"}} order={3}>Then run the command:<Space w="xs" /><Code mb={-4} >fgex nfproxy</Code></Title>
-            </>:
-            <Grid>
-                {filtersList.data?.map( (filterInfo) => <Grid.Col key={filterInfo.filter_id} span={{ lg:6, xs: 12 }}><PyFilterView filterInfo={filterInfo} /></Grid.Col>)}
-            </Grid>
+            </>:<>{filtersList.data?.map( (filterInfo) => <PyFilterView filterInfo={filterInfo} />)}</>
         }
         <YesNoModal
             title='Are you sure to delete this service?'

frontend/src/pages/NFProxy/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Box, LoadingOverlay, Space, ThemeIcon, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Box, FileButton, LoadingOverlay, Space, ThemeIcon, Title, Tooltip } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { BsPlusLg } from "react-icons/bs";
 import { useNavigate, useParams } from 'react-router-dom';
@@ -7,9 +7,11 @@ import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils';
 import AddEditService from '../../components/NFProxy/AddEditService';
 import { useQueryClient } from '@tanstack/react-query';
 import { TbPlugConnected, TbReload } from 'react-icons/tb';
-import { nfproxyServiceQuery } from '../../components/NFProxy/utils';
+import { nfproxy, nfproxyServiceQuery } from '../../components/NFProxy/utils';
 import { FaFilter, FaPencilAlt, FaServer } from 'react-icons/fa';
-import { VscRegex } from 'react-icons/vsc';
+import { MdUploadFile } from "react-icons/md";
+import { notifications } from '@mantine/notifications';
+import { useFileDialog } from '@mantine/hooks';
 
 
 export default function NFProxy({ children }: { children: any }) {
@@ -23,6 +25,69 @@ export default function NFProxy({ children }: { children: any }) {
     const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
     const isMedium = isMediumScreen()
     const services = nfproxyServiceQuery()
+    const fileDialog = useFileDialog({
+        accept: ".py",
+        multiple: false,
+        resetOnOpen: true,
+        onChange: (files) => {
+            if (files?.length??0 > 0)
+                setFile(files![0])
+        }
+    });
+    const [file, setFile] = useState<File | null>(null);
+    useEffect(() => {
+        if (!srv) return
+        const service = services.data?.find(s => s.service_id === srv)
+        if (!service) return
+        if (file){
+            console.log("Uploading code")
+            const notify_id = notifications.show(
+                {
+                    title: "Uploading code",
+                    message: `Uploading code for service ${service.name}`,
+                    color: "blue",
+                    icon: <MdUploadFile size={20} />,
+                    autoClose: false,
+                    loading: true,
+                }
+            )
+            file.text()
+            .then( code => nfproxy.setpyfilterscode(service?.service_id??"",code.toString()))
+            .then( res => {
+                if (!res){
+                    notifications.update({
+                        id: notify_id,
+                        title: "Code uploaded",
+                        message: `Successfully uploaded code for service ${service.name}`,
+                        color: "green",
+                        icon: <MdUploadFile size={20} />,
+                        autoClose: 5000,
+                        loading: false,
+                    })
+                }else{
+                    notifications.update({
+                        id: notify_id,
+                        title: "Code upload failed",
+                        message: `Error: ${res}`,
+                        color: "red",
+                        icon: <MdUploadFile size={20} />,
+                        autoClose: 5000,
+                        loading: false,
+                    })
+                }
+            }).catch( err => {
+                notifications.update({
+                    id: notify_id,
+                    title: "Code upload failed",
+                    message: `Error: ${err}`,
+                    color: "red",
+                    icon: <MdUploadFile size={20} />,
+                    autoClose: 5000,
+                    loading: false,
+                })
+            }).finally(()=>{setFile(null)})  
+        }
+    }, [file])
 
     useEffect(()=> {
         if(services.isError)
@@ -37,7 +102,7 @@ export default function NFProxy({ children }: { children: any }) {
         <Title order={5} className="center-flex"><ThemeIcon radius="md" size="md" variant='filled' color='lime' ><TbPlugConnected size={20} /></ThemeIcon><Space w="xs" />Netfilter Proxy</Title>
         {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
         <Box className='center-flex' >
-            General stats:
+            {isMedium?"General stats:":null}
             <Space w="xs" />
             <Badge size="md" radius="sm" color="green" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:services.data?.length}</Badge>
             <Space w="xs" />
@@ -50,8 +115,16 @@ export default function NFProxy({ children }: { children: any }) {
         </Box>
         {isMedium?null:<Space h="md" />}
         <Box className='center-flex' >
-            {/* Will become the null a button to edit the source code? TODO  */}
-            { srv?null
+            { srv?
+            <Tooltip label="Upload a new filter code" position='bottom' color="blue" opened={tooltipAddOpened}>
+                    <ActionIcon
+                    color="blue" size="lg" radius="md" variant="filled"
+                    onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
+                    onMouseEnter={() => setTooltipAddOpened(true)}
+                    onMouseLeave={() => setTooltipAddOpened(false)} onClick={fileDialog.open}>
+                        <MdUploadFile size={18} />
+                </ActionIcon>
+            </Tooltip>      
             : <Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
                 <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
                 onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
@@ -85,7 +158,9 @@ export default function NFProxy({ children }: { children: any }) {
         </>}
     </Box>
     {srv?children:null}
-    {!srv?<AddEditService opened={open} onClose={closeModal} />:null}
+    {!srv?
+        <AddEditService opened={open} onClose={closeModal} />:null
+    }
     </>
 }
 

frontend/src/pages/NFRegex/index.tsx

@@ -38,7 +38,7 @@ function NFRegex({ children }: { children: any }) {
         <Title order={5} className="center-flex"><ThemeIcon radius="md" size="md" variant='filled' color='grape' ><BsRegex size={20} /></ThemeIcon><Space w="xs" />Netfilter Regex</Title>
         {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
         <Box className='center-flex' >
-            General stats:
+            {isMedium?"General stats:":null}
             <Space w="xs" />
             <Badge size="md" radius="sm" color="green" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:services.data?.length}</Badge>
             <Space w="xs" />