Improve select network filter input

This commit is contained in:
Pierre HUBERT 2024-01-03 22:11:35 +01:00
parent ed48b22f7f
commit fdd005a3ec
3 changed files with 92 additions and 20 deletions

View File

@ -1,5 +1,6 @@
import { Autocomplete, TextField } from "@mui/material";
import { NWFilter } from "../../api/NWFilterApi"; import { NWFilter } from "../../api/NWFilterApi";
import { SelectInput } from "./SelectInput"; import { NWFilterItem } from "../nwfilter/NWFilterItem";
export function NWFilterSelectInput(p: { export function NWFilterSelectInput(p: {
editable: boolean; editable: boolean;
@ -9,24 +10,32 @@ export function NWFilterSelectInput(p: {
onChange?: (name?: string) => void; onChange?: (name?: string) => void;
canBeNull: boolean; canBeNull: boolean;
}): React.ReactElement { }): React.ReactElement {
const selectedValue = p.nwfilters.find((o) => o.name === p.value);
if (!p.editable && !selectedValue) return <></>;
if (selectedValue)
return (
<NWFilterItem
value={selectedValue}
onDelete={p.editable ? () => p.onChange?.(undefined) : undefined}
/>
);
return ( return (
<SelectInput <Autocomplete
editable={p.editable} disablePortal
label={p.label ?? "Network filter"} options={[...(p.canBeNull ? [undefined] : []), ...p.nwfilters]}
value={p.value} getOptionLabel={(o) => o?.name ?? "Unspecified"}
onValueChange={(v) => p.onChange?.(v)} value={selectedValue}
options={[ renderInput={(params) => (
...(p.canBeNull <TextField {...params} variant="standard" label={p.label} />
? [{ label: "No network filer", value: undefined }] )}
: []), renderOption={(_props, option, _state) => (
...p.nwfilters.map((v) => { <NWFilterItem
return { onClick={() => p.onChange?.(option?.name)}
value: v.name, value={option}
label: `${v.name} (${v.chain?.protocol ?? "unspecified"})`, />
description: `${v.rules.length} rules - ${v.join_filters.length} joint filters`, )}
};
}),
]}
/> />
); );
} }

View File

@ -17,11 +17,11 @@ import { ServerApi } from "../../api/ServerApi";
import { VMInfo, VMNetInterface } from "../../api/VMApi"; import { VMInfo, VMNetInterface } from "../../api/VMApi";
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider"; import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { randomMacAddress } from "../../utils/RandUtils"; import { randomMacAddress } from "../../utils/RandUtils";
import { EditSection } from "./EditSection";
import { MACInput } from "./MACInput"; import { MACInput } from "./MACInput";
import { NWFilterSelectInput } from "./NWFilterSelectInput";
import { SelectInput } from "./SelectInput"; import { SelectInput } from "./SelectInput";
import { VMNetworkFilterParameters } from "./VMNetworkFilterParameters"; import { VMNetworkFilterParameters } from "./VMNetworkFilterParameters";
import { EditSection } from "./EditSection";
import { NWFilterSelectInput } from "./NWFilterSelectInput";
export function VMNetworksList(p: { export function VMNetworksList(p: {
vm: VMInfo; vm: VMInfo;

View File

@ -0,0 +1,63 @@
import { mdiSecurityNetwork } from "@mdi/js";
import Icon from "@mdi/react";
import DeleteIcon from "@mui/icons-material/Delete";
import {
Avatar,
IconButton,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemText,
} from "@mui/material";
import { NWFilter } from "../../api/NWFilterApi";
export function NWFilterItem(p: {
value?: NWFilter;
onClick?: () => void;
dense?: boolean;
onDelete?: () => void;
}): React.ReactElement {
const inner = (
<>
{" "}
<ListItemAvatar>
<Avatar>
<Icon path={mdiSecurityNetwork} />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
p.value
? `${p.value.name} (${p.value.chain?.protocol ?? "unspecified"})`
: "Unspecified"
}
secondary={
p.value &&
`${p.value.rules.length} rules - ${p.value.join_filters.length} joint filters`
}
/>
</>
);
if (p.onClick)
return (
<ListItemButton onClick={p.onClick} dense={p.dense}>
{inner}
</ListItemButton>
);
return (
<ListItem
secondaryAction={
p.onDelete ? (
<IconButton onClick={p.onDelete}>
<DeleteIcon />
</IconButton>
) : undefined
}
>
{inner}
</ListItem>
);
}