firewall Frontend Improvements

frontend/src/pages/PortHijack/index.tsx

@@ -5,6 +5,8 @@ import ServiceRow from '../../components/PortHijack/ServiceRow';
 import { porthijackServiceQuery } from '../../components/PortHijack/utils';
 import { errorNotify, getErrorMessage } from '../../js/utils';
 import AddNewService from '../../components/PortHijack/AddNewService';
+import { useQueryClient } from '@tanstack/react-query';
+import { TbReload } from 'react-icons/tb';
 
 
 function PortHijack() {
@@ -12,14 +14,15 @@ function PortHijack() {
     const [open, setOpen] = useState(false);
     const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
     const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
+    const queryClient = useQueryClient()
+    const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false);
 
 
     const services = porthijackServiceQuery()
 
     useEffect(()=>{
-        if(services.isError){
+        if(services.isError)
             errorNotify("Porthijack Update failed!", getErrorMessage(services.error))
-        }
     },[services.isError])
 
     const closeModal = () => {setOpen(false);}
@@ -36,6 +39,13 @@ function PortHijack() {
                     onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
                     onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
             </Tooltip>
+            <Space w="xs" />
+            <Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}>
+                <ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["porthijack"])} size="lg" radius="md" variant="filled"
+                loading={services.isFetching}
+                onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
+                onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
+            </Tooltip>
         </div>
         <div id="service-list" className="center-flex-row">
             <LoadingOverlay visible={services.isLoading} />
@@ -52,7 +62,6 @@ function PortHijack() {
             </>}
             <AddNewService opened={open} onClose={closeModal} />
         </div>
-        <AddNewService opened={open} onClose={closeModal} />
     </>
 }