Create base network filter details page
This commit is contained in:
parent
85dcb06014
commit
0710c61909
@ -1,5 +1,17 @@
|
|||||||
import { ReactElement } from "react";
|
import { Button } from "@mui/material";
|
||||||
import { NWFilter } from "../../api/NWFilterApi";
|
import React, { ReactElement } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
NWFilter,
|
||||||
|
NWFilterApi,
|
||||||
|
NWFilterIsBuiltin,
|
||||||
|
} from "../../api/NWFilterApi";
|
||||||
|
import { useAlert } from "../../hooks/providers/AlertDialogProvider";
|
||||||
|
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
|
||||||
|
import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
|
||||||
|
import { AsyncWidget } from "../AsyncWidget";
|
||||||
|
import { TabsWidget } from "../TabsWidget";
|
||||||
|
import { XMLAsyncWidget } from "../XMLWidget";
|
||||||
|
|
||||||
interface DetailsProps {
|
interface DetailsProps {
|
||||||
nwfilter: NWFilter;
|
nwfilter: NWFilter;
|
||||||
@ -8,5 +20,127 @@ interface DetailsProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function NWFilterDetails(p: DetailsProps): ReactElement {
|
export function NWFilterDetails(p: DetailsProps): ReactElement {
|
||||||
return <>todo</>;
|
const [nwFiltersList, setNwFiltersList] = React.useState<NWFilter[] | any>();
|
||||||
|
|
||||||
|
const load = async () => {
|
||||||
|
setNwFiltersList(await NWFilterApi.GetList());
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AsyncWidget
|
||||||
|
loadKey={p.nwfilter.uuid}
|
||||||
|
load={load}
|
||||||
|
errMsg="Failed to load the list of network filters!"
|
||||||
|
build={() => (
|
||||||
|
<NetworkFilterDetailsInner nwFiltersList={nwFiltersList} {...p} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type InnerDetailsProps = DetailsProps & { nwFiltersList: NWFilter[] };
|
||||||
|
|
||||||
|
enum NetFilterTab {
|
||||||
|
General = 0,
|
||||||
|
Rules,
|
||||||
|
XML,
|
||||||
|
Danger,
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NetworkFilterDetailsInner(
|
||||||
|
p: InnerDetailsProps
|
||||||
|
): React.ReactElement {
|
||||||
|
const [currTab, setCurrTab] = React.useState(NetFilterTab.General);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TabsWidget
|
||||||
|
currTab={currTab}
|
||||||
|
onTabChange={setCurrTab}
|
||||||
|
options={[
|
||||||
|
{ label: "General", value: NetFilterTab.General, visible: true },
|
||||||
|
{
|
||||||
|
label: "Rules",
|
||||||
|
value: NetFilterTab.Rules,
|
||||||
|
visible: p.editable || p.nwfilter.rules.length > 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "XML",
|
||||||
|
value: NetFilterTab.XML,
|
||||||
|
visible: !p.editable,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Danger zone",
|
||||||
|
value: NetFilterTab.Danger,
|
||||||
|
color: "red",
|
||||||
|
visible: !p.editable && !NWFilterIsBuiltin(p.nwfilter),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{currTab === NetFilterTab.General && (
|
||||||
|
<NetworkFilterDetailsTabGeneral {...p} />
|
||||||
|
)}
|
||||||
|
{currTab === NetFilterTab.Rules && (
|
||||||
|
<NetworkFilterDetailsTabRules {...p} />
|
||||||
|
)}
|
||||||
|
{currTab === NetFilterTab.XML && <NetworkFilterDetailsTabXML {...p} />}
|
||||||
|
{currTab === NetFilterTab.Danger && (
|
||||||
|
<NetworkFilterDetailsTabDanger {...p} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NetworkFilterDetailsTabGeneral(
|
||||||
|
p: InnerDetailsProps
|
||||||
|
): React.ReactElement {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function NetworkFilterDetailsTabXML(p: InnerDetailsProps): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<XMLAsyncWidget
|
||||||
|
errMsg="Failed to load network filter XML definition!"
|
||||||
|
identifier={p.nwfilter.uuid!}
|
||||||
|
load={() => NWFilterApi.GetSingleXML(p.nwfilter.uuid!)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NetworkFilterDetailsTabDanger(
|
||||||
|
p: InnerDetailsProps
|
||||||
|
): React.ReactElement {
|
||||||
|
const confirm = useConfirm();
|
||||||
|
const snackbar = useSnackbar();
|
||||||
|
const alert = useAlert();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const requestDelete = async () => {
|
||||||
|
try {
|
||||||
|
if (
|
||||||
|
!(await confirm(
|
||||||
|
"Do you really want to delete this network filter?",
|
||||||
|
`Delete network filter ${p.nwfilter.name}`,
|
||||||
|
"Delete"
|
||||||
|
))
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
|
await NWFilterApi.Delete(p.nwfilter);
|
||||||
|
|
||||||
|
navigate("/nwfilter");
|
||||||
|
snackbar("The network filter was successfully deleted!");
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
alert(`Failed to delete the network filter!\n${e}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button color="error" onClick={requestDelete}>
|
||||||
|
Delete this network filter
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user