0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

react-query + enable/disable firewall

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-09-24 05:48:54 +02:00
parent 732680753c
commit 4247dc181d
36 changed files with 283 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/pages/Firewall/index.tsx
View File

@@ -1,48 +1,35 @@
import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from "@mantine/core"
import { useEffect, useState } from "react";
import { BsPlusLg } from "react-icons/bs"
import { ActionType, GeneralStats, RuleInfo, firewall } from "../../components/Firewall/utils";
import { errorNotify, eventUpdateName, fireUpdateRequest } from "../../js/utils";
import { useWindowEvent } from "@mantine/hooks";
import { firewall, firewallRulesQuery } from "../../components/Firewall/utils";
import { errorNotify, getErrorMessage } from "../../js/utils";
export const Firewall = () => {
const [generalStats, setGeneralStats] = useState<GeneralStats>({ rules: 0 });
const [rules, setRules] = useState<RuleInfo>({rules:[], policy:ActionType.ACCEPT});
const [loader, setLoader] = useState(true);
const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
const [open, setOpen] = useState(false);
const rules = firewallRulesQuery()
const updateInfo = async () => {
await Promise.all([
firewall.stats().then(res => {
setGeneralStats(res)
}).catch(
err => errorNotify("General Info Auto-Update failed!", err.toString())
),
firewall.rules().then(res => {
setRules(res)
}).catch(err => {
errorNotify("Home Page Auto-Update failed!", err.toString())
})
])
setLoader(false)
}
useWindowEvent(eventUpdateName, updateInfo)
useEffect(fireUpdateRequest,[])
useEffect(()=> {
if(rules.isError)
errorNotify("Firewall Update failed!", getErrorMessage(rules.error))
},[rules.isError])
return <>
<Space h="sm" />
<div className='center-flex'>
<Title order={4}>Firewall Rules</Title>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Rules: {generalStats.rules}</Badge>
<div className='flex-spacer' />
<Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
<Space w="xs" />
<Badge size="sm" color="yellow" variant="filled">Policy: {rules.isLoading?"unknown":rules.data?.policy}</Badge>
<Space w="xs" />
<Badge size="sm" color="violet" variant="filled">Enabled: {rules.isLoading?"?":(rules.data?.enabled?"🟢":"🔴")}</Badge>
<Space w="xs" />
<Tooltip label="Add a new rule" position='bottom' color="blue" opened={tooltipAddOpened}>
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
@@ -50,6 +37,6 @@ export const Firewall = () => {
onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
</Tooltip>
</div>
<LoadingOverlay visible={loader} />
<LoadingOverlay visible={rules.isLoading} />
</>
}