287 lines
12 KiB
TypeScript
287 lines
12 KiB
TypeScript
import { useState, useEffect, Dispatch, SetStateAction } from 'react'
|
|
import { useParams, Link } from 'react-router-dom'
|
|
import Layout from '../components/Layout'
|
|
import DataTable, { Column } from '../components/DataTable'
|
|
import EntityForm, { FieldDef } from '../components/EntityForm'
|
|
import GenerateModal from '../components/GenerateModal'
|
|
import Box from '@mui/material/Box'
|
|
import Button from '@mui/material/Button'
|
|
import Tabs from '@mui/material/Tabs'
|
|
import Tab from '@mui/material/Tab'
|
|
import Typography from '@mui/material/Typography'
|
|
import Breadcrumbs from '@mui/material/Breadcrumbs'
|
|
import AddIcon from '@mui/icons-material/Add'
|
|
import BuildIcon from '@mui/icons-material/Build'
|
|
import { zonesApi, interfacesApi, policiesApi, rulesApi, snatApi, hostsApi, paramsApi, configsApi } from '../api'
|
|
|
|
// ---- Types ----
|
|
interface Zone { id: number; name: string; type: string; options: string }
|
|
interface Iface { id: number; name: string; zone_id: number; options: string }
|
|
interface Policy { id: number; src_zone_id: number; dst_zone_id: number; policy: string; log_level: string; comment: string; position: number }
|
|
interface Rule { id: number; action: string; src_zone_id: number | null; dst_zone_id: number | null; src_ip: string; dst_ip: string; proto: string; dport: string; sport: string; comment: string; position: number }
|
|
interface Snat { id: number; source_network: string; out_interface: string; to_address: string; comment: string }
|
|
interface Host { id: number; zone_id: number; interface: string; subnet: string; options: string }
|
|
interface Param { id: number; name: string; value: string }
|
|
|
|
type AnyEntity = { id: number } & Record<string, unknown>
|
|
|
|
export default function ConfigDetail() {
|
|
const { id } = useParams<{ id: string }>()
|
|
const configId = Number(id)
|
|
|
|
const [configName, setConfigName] = useState('')
|
|
const [tab, setTab] = useState(0)
|
|
const [zones, setZones] = useState<Zone[]>([])
|
|
const [interfaces, setInterfaces] = useState<Iface[]>([])
|
|
const [policies, setPolicies] = useState<Policy[]>([])
|
|
const [rules, setRules] = useState<Rule[]>([])
|
|
const [snat, setSnat] = useState<Snat[]>([])
|
|
const [hosts, setHosts] = useState<Host[]>([])
|
|
const [paramsList, setParamsList] = useState<Param[]>([])
|
|
const [formOpen, setFormOpen] = useState(false)
|
|
const [editing, setEditing] = useState<AnyEntity | null>(null)
|
|
const [generateOpen, setGenerateOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
configsApi.get(configId).then((r) => setConfigName(r.data.name))
|
|
zonesApi.list(configId).then((r) => setZones(r.data))
|
|
interfacesApi.list(configId).then((r) => setInterfaces(r.data))
|
|
policiesApi.list(configId).then((r) => setPolicies(r.data))
|
|
rulesApi.list(configId).then((r) => setRules(r.data))
|
|
snatApi.list(configId).then((r) => setSnat(r.data))
|
|
hostsApi.list(configId).then((r) => setHosts(r.data))
|
|
paramsApi.list(configId).then((r) => setParamsList(r.data))
|
|
}, [configId])
|
|
|
|
const zoneOptions = zones.map((z) => ({ value: z.id, label: z.name }))
|
|
|
|
// ---- Tab configs ----
|
|
const tabConfig = [
|
|
{
|
|
label: 'Zones',
|
|
rows: zones as unknown as AnyEntity[],
|
|
setRows: setZones as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
|
|
api: zonesApi,
|
|
columns: [
|
|
{ key: 'name' as const, label: 'Name' },
|
|
{ key: 'type' as const, label: 'Type' },
|
|
{ key: 'options' as const, label: 'Options' },
|
|
] as Column<AnyEntity>[],
|
|
fields: [
|
|
{ name: 'name', label: 'Name', required: true },
|
|
{ name: 'type', label: 'Type', required: true, type: 'select' as const, options: [{ value: 'ipv4', label: 'ipv4' }, { value: 'ipv6', label: 'ipv6' }, { value: 'firewall', label: 'firewall' }] },
|
|
{ name: 'options', label: 'Options' },
|
|
] as FieldDef[],
|
|
},
|
|
{
|
|
label: 'Interfaces',
|
|
rows: interfaces as unknown as AnyEntity[],
|
|
setRows: setInterfaces as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
|
|
api: interfacesApi,
|
|
columns: [
|
|
{ key: 'name' as const, label: 'Interface' },
|
|
{
|
|
key: 'zone_id' as const,
|
|
label: 'Zone',
|
|
render: (r: AnyEntity) => r['zone_id'] == null ? '-' : (zones.find((z) => z.id === r['zone_id'])?.name ?? String(r['zone_id'])),
|
|
},
|
|
{ key: 'broadcast' as const, label: 'Broadcast' },
|
|
{ key: 'options' as const, label: 'Options' },
|
|
] as Column<AnyEntity>[],
|
|
fields: [
|
|
{ name: 'name', label: 'Interface Name', required: true },
|
|
{ name: 'zone_id', label: 'Zone', type: 'select' as const, options: [{ value: '', label: '- (no zone)' }, ...zoneOptions] },
|
|
{ name: 'broadcast', label: 'Broadcast' },
|
|
{ name: 'options', label: 'Options' },
|
|
] as FieldDef[],
|
|
},
|
|
{
|
|
label: 'Policies',
|
|
rows: policies as unknown as AnyEntity[],
|
|
setRows: setPolicies as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
|
|
api: policiesApi,
|
|
columns: [
|
|
{
|
|
key: 'src_zone_id' as const,
|
|
label: 'Source',
|
|
render: (r: AnyEntity) => zones.find((z) => z.id === r['src_zone_id'])?.name ?? String(r['src_zone_id']),
|
|
},
|
|
{
|
|
key: 'dst_zone_id' as const,
|
|
label: 'Destination',
|
|
render: (r: AnyEntity) => zones.find((z) => z.id === r['dst_zone_id'])?.name ?? String(r['dst_zone_id']),
|
|
},
|
|
{ key: 'policy' as const, label: 'Policy' },
|
|
{ key: 'log_level' as const, label: 'Log Level' },
|
|
{ key: 'position' as const, label: 'Position' },
|
|
] as Column<AnyEntity>[],
|
|
fields: [
|
|
{ name: 'src_zone_id', label: 'Source Zone', required: true, type: 'select' as const, options: zoneOptions },
|
|
{ name: 'dst_zone_id', label: 'Destination Zone', required: true, type: 'select' as const, options: zoneOptions },
|
|
{ name: 'policy', label: 'Policy', required: true, type: 'select' as const, options: [{ value: 'ACCEPT', label: 'ACCEPT' }, { value: 'DROP', label: 'DROP' }, { value: 'REJECT', label: 'REJECT' }, { value: 'CONTINUE', label: 'CONTINUE' }] },
|
|
{ name: 'log_level', label: 'Log Level' },
|
|
{ name: 'comment', label: 'Comment' },
|
|
{ name: 'position', label: 'Position', type: 'number' as const },
|
|
] as FieldDef[],
|
|
},
|
|
{
|
|
label: 'Rules',
|
|
rows: rules as unknown as AnyEntity[],
|
|
setRows: setRules as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
|
|
api: rulesApi,
|
|
columns: [
|
|
{ key: 'action' as const, label: 'Action' },
|
|
{
|
|
key: 'src_zone_id' as const,
|
|
label: 'Source',
|
|
render: (r: AnyEntity) => r['src_zone_id'] ? (zones.find((z) => z.id === r['src_zone_id'])?.name ?? String(r['src_zone_id'])) : 'all',
|
|
},
|
|
{
|
|
key: 'dst_zone_id' as const,
|
|
label: 'Destination',
|
|
render: (r: AnyEntity) => r['dst_zone_id'] ? (zones.find((z) => z.id === r['dst_zone_id'])?.name ?? String(r['dst_zone_id'])) : 'all',
|
|
},
|
|
{ key: 'proto' as const, label: 'Proto' },
|
|
{ key: 'dport' as const, label: 'DPort' },
|
|
{ key: 'position' as const, label: 'Position' },
|
|
] as Column<AnyEntity>[],
|
|
fields: [
|
|
{ name: 'action', label: 'Action', required: true },
|
|
{ name: 'src_zone_id', label: 'Source Zone', type: 'select' as const, options: zoneOptions },
|
|
{ name: 'dst_zone_id', label: 'Dest Zone', type: 'select' as const, options: zoneOptions },
|
|
{ name: 'src_ip', label: 'Source IP/CIDR' },
|
|
{ name: 'dst_ip', label: 'Dest IP/CIDR' },
|
|
{ name: 'proto', label: 'Protocol' },
|
|
{ name: 'dport', label: 'Dest Port' },
|
|
{ name: 'sport', label: 'Source Port' },
|
|
{ name: 'comment', label: 'Comment' },
|
|
{ name: 'position', label: 'Position', type: 'number' as const },
|
|
] as FieldDef[],
|
|
},
|
|
{
|
|
label: 'SNAT',
|
|
rows: snat as unknown as AnyEntity[],
|
|
setRows: setSnat as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
|
|
api: snatApi,
|
|
columns: [
|
|
{ key: 'out_interface' as const, label: 'Out Interface' },
|
|
{ key: 'source_network' as const, label: 'Source Network' },
|
|
{ key: 'to_address' as const, label: 'To Address' },
|
|
{ key: 'comment' as const, label: 'Comment' },
|
|
] as Column<AnyEntity>[],
|
|
fields: [
|
|
{ name: 'out_interface', label: 'Out Interface', required: true },
|
|
{ name: 'source_network', label: 'Source Network', required: true },
|
|
{ name: 'to_address', label: 'To Address' },
|
|
{ name: 'comment', label: 'Comment' },
|
|
] as FieldDef[],
|
|
},
|
|
{
|
|
label: 'Hosts',
|
|
rows: hosts as unknown as AnyEntity[],
|
|
setRows: setHosts as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
|
|
api: hostsApi,
|
|
columns: [
|
|
{ key: 'zone_id' as const, label: 'Zone' },
|
|
{ key: 'interface' as const, label: 'Interface' },
|
|
{ key: 'subnet' as const, label: 'Subnet' },
|
|
{ key: 'options' as const, label: 'Options' },
|
|
] as Column<AnyEntity>[],
|
|
fields: [
|
|
{ name: 'zone_id', label: 'Zone', type: 'select' as const, options: zoneOptions, required: true },
|
|
{ name: 'interface', label: 'Interface', required: true },
|
|
{ name: 'subnet', label: 'Subnet', required: true },
|
|
{ name: 'options', label: 'Options' },
|
|
] as FieldDef[],
|
|
},
|
|
{
|
|
label: 'Params',
|
|
rows: paramsList as unknown as AnyEntity[],
|
|
setRows: setParamsList as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
|
|
api: paramsApi,
|
|
columns: [
|
|
{ key: 'name' as const, label: 'Name' },
|
|
{ key: 'value' as const, label: 'Value' },
|
|
] as Column<AnyEntity>[],
|
|
fields: [
|
|
{ name: 'name', label: 'Name', required: true },
|
|
{ name: 'value', label: 'Value', required: true },
|
|
] as FieldDef[],
|
|
},
|
|
]
|
|
|
|
const current = tabConfig[tab]
|
|
|
|
const handleSubmit = async (values: Record<string, unknown>) => {
|
|
if (editing) {
|
|
await current.api.update(configId, editing.id, values)
|
|
} else {
|
|
await current.api.create(configId, values)
|
|
}
|
|
const res = await current.api.list(configId)
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
current.setRows(res.data as any)
|
|
setFormOpen(false)
|
|
setEditing(null)
|
|
}
|
|
|
|
const handleDelete = async (row: AnyEntity) => {
|
|
if (!confirm('Delete this entry?')) return
|
|
await current.api.delete(configId, row.id)
|
|
const res = await current.api.list(configId)
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
current.setRows(res.data as any)
|
|
}
|
|
|
|
return (
|
|
<Layout title={configName || 'Config Detail'}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
|
<Breadcrumbs>
|
|
<Link to="/configs" style={{ color: 'inherit', textDecoration: 'none' }}>
|
|
<Typography variant="body2" color="text.secondary">Configurations</Typography>
|
|
</Link>
|
|
<Typography variant="body2">{configName}</Typography>
|
|
</Breadcrumbs>
|
|
<Button variant="contained" startIcon={<BuildIcon />} onClick={() => setGenerateOpen(true)}>
|
|
Generate Config
|
|
</Button>
|
|
</Box>
|
|
|
|
<Box sx={{ bgcolor: 'white', borderRadius: 2, border: '1px solid #e2e8f0', overflow: 'hidden' }}>
|
|
<Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ borderBottom: 1, borderColor: 'divider', px: 2 }}>
|
|
{tabConfig.map((tc) => <Tab key={tc.label} label={tc.label} />)}
|
|
</Tabs>
|
|
<Box sx={{ p: 3 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
|
|
<Button size="small" variant="outlined" startIcon={<AddIcon />} onClick={() => { setEditing(null); setFormOpen(true) }}>
|
|
Add {current.label.replace('/NAT', '')}
|
|
</Button>
|
|
</Box>
|
|
<DataTable
|
|
columns={current.columns}
|
|
rows={current.rows}
|
|
onEdit={(row) => { setEditing(row); setFormOpen(true) }}
|
|
onDelete={handleDelete}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
<EntityForm
|
|
open={formOpen}
|
|
title={`${editing ? 'Edit' : 'Add'} ${current.label}`}
|
|
fields={current.fields}
|
|
initialValues={editing ?? undefined}
|
|
onClose={() => { setFormOpen(false); setEditing(null) }}
|
|
onSubmit={handleSubmit}
|
|
/>
|
|
|
|
<GenerateModal
|
|
open={generateOpen}
|
|
configId={configId}
|
|
configName={configName}
|
|
onClose={() => setGenerateOpen(false)}
|
|
/>
|
|
</Layout>
|
|
)
|
|
}
|