feat: add Config Detail page with tabbed entity management
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
246
frontend/src/routes/ConfigDetail.tsx
Normal file
246
frontend/src/routes/ConfigDetail.tsx
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
import { useState, useEffect } 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, masqApi, 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 Masq { id: number; source_network: string; out_interface: string; to_address: string; comment: 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 [masq, setMasq] = useState<Masq[]>([])
|
||||||
|
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))
|
||||||
|
masqApi.list(configId).then((r) => setMasq(r.data))
|
||||||
|
}, [configId])
|
||||||
|
|
||||||
|
const zoneOptions = zones.map((z) => ({ value: z.id, label: z.name }))
|
||||||
|
|
||||||
|
// ---- Tab configs ----
|
||||||
|
const tabConfig = [
|
||||||
|
{
|
||||||
|
label: 'Zones',
|
||||||
|
rows: zones as AnyEntity[],
|
||||||
|
setRows: setZones as React.Dispatch<React.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 AnyEntity[],
|
||||||
|
setRows: setInterfaces as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
|
||||||
|
api: interfacesApi,
|
||||||
|
columns: [
|
||||||
|
{ key: 'name' as const, label: 'Interface' },
|
||||||
|
{
|
||||||
|
key: 'zone_id' as const,
|
||||||
|
label: 'Zone',
|
||||||
|
render: (r: AnyEntity) => zones.find((z) => z.id === r['zone_id'])?.name ?? String(r['zone_id']),
|
||||||
|
},
|
||||||
|
{ key: 'options' as const, label: 'Options' },
|
||||||
|
] as Column<AnyEntity>[],
|
||||||
|
fields: [
|
||||||
|
{ name: 'name', label: 'Interface Name', required: true },
|
||||||
|
{ name: 'zone_id', label: 'Zone', required: true, type: 'select' as const, options: zoneOptions },
|
||||||
|
{ name: 'options', label: 'Options' },
|
||||||
|
] as FieldDef[],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Policies',
|
||||||
|
rows: policies as AnyEntity[],
|
||||||
|
setRows: setPolicies as React.Dispatch<React.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 AnyEntity[],
|
||||||
|
setRows: setRules as React.Dispatch<React.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: 'Masq/NAT',
|
||||||
|
rows: masq as AnyEntity[],
|
||||||
|
setRows: setMasq as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
|
||||||
|
api: masqApi,
|
||||||
|
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[],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user