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

add: created components for rules visualization

Browse Source
This commit is contained in:
Domingo Dirutigliano
2023-09-24 22:50:42 +02:00
parent 4c4b80fd23
commit d195f2c7cd
8 changed files with 211 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/PortAndInterface.tsx
View File

@@ -1,8 +1,9 @@
import { AutocompleteItem, Select, Space, Title } from "@mantine/core"
import React, { useEffect, useState } from "react"
import { getipinterfaces } from "../js/utils";
import { ipInterfacesQuery } from "../js/utils";
import PortInput from "./PortInput";
import { UseFormReturnType } from "@mantine/form/lib/types";
import { InterfaceInput } from "./InterfaceInput";
interface ItemProps extends AutocompleteItem {
netint: string;
@@ -15,39 +16,21 @@ const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
);
export default function PortAndInterface({ form, int_name, port_name, label }:{ form:UseFormReturnType<any>, int_name:string, port_name:string, label?:string }) {
export default function PortAndInterface({ form, int_name, port_name, label, orientation }:{ form:UseFormReturnType<any>, int_name:string, port_name:string, label?:string, orientation?:"line"|"column" }) {
const [ipInterfaces, setIpInterfaces] = useState<AutocompleteItem[]>([]);
useEffect(()=>{
getipinterfaces().then(data => {
setIpInterfaces(data.map(item => ({netint:item.name, value:item.addr, label:item.addr})));
})
},[])
return <>
{label?<>
<Title order={6}>{label}</Title>
<Space h="xs" /></> :null}
<div className='center-flex' style={{width:"100%"}}>
<Select
placeholder="10.1.1.1"
itemComponent={AutoCompleteItem}
data={ipInterfaces}
searchable
dropdownPosition="bottom"
maxDropdownHeight={200}
creatable
getCreateLabel={(query) => `+ Use this: ${query}`}
onCreate={(query) => {
const item = { value: query, netint: "CUSTOM", label: query };
setIpInterfaces((current) => [...current, item]);
return item;
}}
<div className={(!orientation || orientation == "line")?'center-flex':"center-flex-row"} style={{width:"100%"}}>
<InterfaceInput
{...form.getInputProps(int_name)}
style={{width:"100%"}}
/>
<Space w="sm" /><span style={{marginTop:"-3px", fontSize:"1.5em"}}>:</span><Space w="sm" />
{(!orientation || orientation == "line")?
<><Space w="sm" /><span style={{marginTop:"-3px", fontSize:"1.5em"}}>:</span><Space w="sm" /></>:
<Space h="md" />}
<PortInput {...form.getInputProps(port_name)} />
</div>
</>