Create base network filter details page

This commit is contained in:
Pierre HUBERT 2024-01-03 19:34:17 +01:00
parent 85dcb06014
commit 0710c61909

View File

@ -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>
);
} }