729 lines
30 KiB
TypeScript
729 lines
30 KiB
TypeScript
import { useMemo, useState } from 'react'
|
|
import {
|
|
Button, Form, Input, InputNumber, Modal, Popconfirm, Select,
|
|
Space, Switch, Tag, Tooltip, Typography, message,
|
|
} from 'antd'
|
|
import type { ColumnsType } from 'antd/es/table'
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
AppstoreOutlined, ArrowDownOutlined, ArrowUpOutlined, CopyOutlined, DeleteOutlined, EditOutlined,
|
|
EyeOutlined, FireOutlined, PlusOutlined, UnorderedListOutlined, WarningOutlined,
|
|
} from '@ant-design/icons'
|
|
import { InlineNote, InlineLabels } from './InlineEditors'
|
|
|
|
const { Text } = Typography
|
|
|
|
import DataTable from '../../components/DataTable'
|
|
import EmptyState from '../../components/EmptyState'
|
|
|
|
import apiClient, { isEnvelope } from '../../api/client'
|
|
import { useAuthStore } from '../../stores/auth'
|
|
import type { AddressGroup, AddressObject, FwRule, FwService, FwZone, ServiceGroup, Zone } from './types'
|
|
import { ZONES_FALLBACK } from './types'
|
|
|
|
interface FormValues {
|
|
name?: string
|
|
priority: number
|
|
enabled: boolean
|
|
action: FwRule['action']
|
|
src_zone: Zone
|
|
src_kind: 'object' | 'group' | 'cidr' | 'any'
|
|
src_address_object_id?: number
|
|
src_address_group_id?: number
|
|
src_cidr?: string
|
|
dst_zone: Zone
|
|
dst_kind: 'object' | 'group' | 'cidr' | 'any'
|
|
dst_address_object_id?: number
|
|
dst_address_group_id?: number
|
|
dst_cidr?: string
|
|
service_kind: 'object' | 'group' | 'any'
|
|
service_object_id?: number
|
|
service_group_id?: number
|
|
log: boolean
|
|
comment?: string
|
|
}
|
|
|
|
interface RuleCounter { rule_id: number; packets: number; bytes: number }
|
|
|
|
async function listCounters(): Promise<RuleCounter[]> {
|
|
try {
|
|
const r = await apiClient.get('/firewall/counters')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { counters?: RuleCounter[] }).counters ?? []
|
|
} catch { return [] }
|
|
}
|
|
|
|
function fmtBytes(n: number): string {
|
|
if (n >= 1_073_741_824) return (n / 1_073_741_824).toFixed(1) + ' GB'
|
|
if (n >= 1_048_576) return (n / 1_048_576).toFixed(1) + ' MB'
|
|
if (n >= 1_024) return (n / 1_024).toFixed(0) + ' KB'
|
|
return n + ' B'
|
|
}
|
|
|
|
async function listRules(): Promise<FwRule[]> {
|
|
const r = await apiClient.get('/firewall/rules')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { rules?: FwRule[] }).rules ?? []
|
|
}
|
|
async function listAO(): Promise<AddressObject[]> {
|
|
const r = await apiClient.get('/firewall/address-objects')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { address_objects?: AddressObject[] }).address_objects ?? []
|
|
}
|
|
async function listAG(): Promise<AddressGroup[]> {
|
|
const r = await apiClient.get('/firewall/address-groups')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { address_groups?: AddressGroup[] }).address_groups ?? []
|
|
}
|
|
async function listSv(): Promise<FwService[]> {
|
|
const r = await apiClient.get('/firewall/services')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { services?: FwService[] }).services ?? []
|
|
}
|
|
async function listSG(): Promise<ServiceGroup[]> {
|
|
const r = await apiClient.get('/firewall/service-groups')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { service_groups?: ServiceGroup[] }).service_groups ?? []
|
|
}
|
|
async function listZones(): Promise<FwZone[]> {
|
|
const r = await apiClient.get('/firewall/zones')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { zones?: FwZone[] }).zones ?? []
|
|
}
|
|
|
|
function buildPayload(v: FormValues) {
|
|
const out: Partial<FwRule> = {
|
|
name: v.name, priority: v.priority, enabled: v.enabled, action: v.action,
|
|
src_zone: v.src_zone, dst_zone: v.dst_zone, log: v.log, comment: v.comment,
|
|
src_address_object_id: null, src_address_group_id: null, src_cidr: null,
|
|
dst_address_object_id: null, dst_address_group_id: null, dst_cidr: null,
|
|
service_object_id: null, service_group_id: null,
|
|
}
|
|
if (v.src_kind === 'object') out.src_address_object_id = v.src_address_object_id ?? null
|
|
if (v.src_kind === 'group') out.src_address_group_id = v.src_address_group_id ?? null
|
|
if (v.src_kind === 'cidr') out.src_cidr = v.src_cidr ?? null
|
|
if (v.dst_kind === 'object') out.dst_address_object_id = v.dst_address_object_id ?? null
|
|
if (v.dst_kind === 'group') out.dst_address_group_id = v.dst_address_group_id ?? null
|
|
if (v.dst_kind === 'cidr') out.dst_cidr = v.dst_cidr ?? null
|
|
if (v.service_kind === 'object') out.service_object_id = v.service_object_id ?? null
|
|
if (v.service_kind === 'group') out.service_group_id = v.service_group_id ?? null
|
|
return out
|
|
}
|
|
|
|
// ── Zone badge with semantic colors ──────────────────────────────
|
|
const ZONE_CLASSES: Record<string, string> = {
|
|
wan: 'fw-zone-badge--wan', lan: 'fw-zone-badge--lan',
|
|
dmz: 'fw-zone-badge--dmz', mgmt: 'fw-zone-badge--mgmt',
|
|
cluster: 'fw-zone-badge--cluster', vpn: 'fw-zone-badge--vpn',
|
|
any: 'fw-zone-badge--any',
|
|
}
|
|
|
|
function ZoneBadge({ zone }: { zone: string }) {
|
|
const cls = ZONE_CLASSES[zone] ?? 'fw-zone-badge--default'
|
|
return <span className={`fw-zone-badge ${cls}`}>{zone}</span>
|
|
}
|
|
|
|
function ActionBadge({ action }: { action: FwRule['action'] }) {
|
|
return <span className={`fw-action-badge fw-action-badge--${action}`}>{action.toUpperCase()}</span>
|
|
}
|
|
|
|
export default function RulesTab() {
|
|
const { t } = useTranslation()
|
|
const qc = useQueryClient()
|
|
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
|
|
|
|
const { data: rules, isLoading } = useQuery({ queryKey: ['fw', 'rules'], queryFn: listRules })
|
|
const { data: aos } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listAO })
|
|
const { data: ags } = useQuery({ queryKey: ['fw', 'addr-grp'], queryFn: listAG })
|
|
const { data: svs } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listSv })
|
|
const { data: sgs } = useQuery({ queryKey: ['fw', 'svc-grp'], queryFn: listSG })
|
|
const { data: zones } = useQuery({ queryKey: ['fw', 'zones'], queryFn: listZones })
|
|
const { data: counters } = useQuery({
|
|
queryKey: ['fw', 'counters'],
|
|
queryFn: listCounters,
|
|
refetchInterval: 10_000,
|
|
})
|
|
const counterByID = new Map((counters ?? []).map(c => [c.rule_id, c]))
|
|
|
|
const zoneOptions: Zone[] = zones && zones.length > 0
|
|
? ['any', ...zones.map((z) => z.name)]
|
|
: ZONES_FALLBACK
|
|
|
|
const aoLabel = (id?: number | null) => aos?.find(o => o.id === id)?.name ?? `#${id}`
|
|
const agLabel = (id?: number | null) => ags?.find(g => g.id === id)?.name ?? `#${id}`
|
|
const svLabel = (id?: number | null) => svs?.find(s => s.id === id)?.name ?? `#${id}`
|
|
const sgLabel = (id?: number | null) => sgs?.find(g => g.id === id)?.name ?? `#${id}`
|
|
|
|
const renderAddrCompact = (objID?: number | null, grpID?: number | null, cidr?: string | null): string => {
|
|
if (objID) return aoLabel(objID)
|
|
if (grpID) return `⊂ ${agLabel(grpID)}`
|
|
if (cidr) return cidr
|
|
return 'any'
|
|
}
|
|
|
|
// Auto-generates a human-readable one-liner like "LAN/any → WAN/10.0.0.0/24 · HTTPS"
|
|
const autoDescription = (r: FwRule): string => {
|
|
const src = renderAddrCompact(r.src_address_object_id, r.src_address_group_id, r.src_cidr)
|
|
const dst = renderAddrCompact(r.dst_address_object_id, r.dst_address_group_id, r.dst_cidr)
|
|
const svc = r.service_object_id ? svLabel(r.service_object_id)
|
|
: r.service_group_id ? sgLabel(r.service_group_id)
|
|
: 'any'
|
|
return `${r.src_zone}/${src} → ${r.dst_zone}/${dst} · ${svc}`
|
|
}
|
|
|
|
const renderService = (objID?: number | null, grpID?: number | null) => {
|
|
if (objID) return <Tag style={{ fontFamily: 'monospace', fontSize: 11 }}>{svLabel(objID)}</Tag>
|
|
if (grpID) return <Tag color="purple" style={{ fontFamily: 'monospace', fontSize: 11 }}>⊂ {sgLabel(grpID)}</Tag>
|
|
return <span className="fw-addr-any">any</span>
|
|
}
|
|
|
|
const renderAddr = (objID?: number | null, grpID?: number | null, cidr?: string | null) => {
|
|
const label = renderAddrCompact(objID, grpID, cidr)
|
|
if (label === 'any') return <span className="fw-addr-any">any</span>
|
|
return <Text style={{ fontSize: 11, color: '#475569', fontFamily: 'monospace' }}>{label}</Text>
|
|
}
|
|
|
|
// ── Filter state ─────────────────────────────────────────────
|
|
const [searchText, setSearchText] = useState('')
|
|
const [filterAction, setFilterAction] = useState<string>('')
|
|
const [filterZone, setFilterZone] = useState<string>('')
|
|
|
|
const [groupByZone, setGroupByZone] = useState(true)
|
|
const [editing, setEditing] = useState<FwRule | null>(null)
|
|
const [creating, setCreating] = useState(false)
|
|
const [form] = Form.useForm<FormValues>()
|
|
|
|
const sortedRules = useMemo(
|
|
() => [...(rules ?? [])].sort((a, b) => a.priority - b.priority),
|
|
[rules],
|
|
)
|
|
|
|
const filteredRules = useMemo(() => {
|
|
let r = sortedRules
|
|
if (searchText) {
|
|
const q = searchText.toLowerCase()
|
|
r = r.filter(rule =>
|
|
(rule.name ?? '').toLowerCase().includes(q) ||
|
|
(rule.comment ?? '').toLowerCase().includes(q),
|
|
)
|
|
}
|
|
if (filterAction) r = r.filter(rule => rule.action === filterAction)
|
|
if (filterZone) r = r.filter(rule => rule.src_zone === filterZone || rule.dst_zone === filterZone)
|
|
return r
|
|
}, [sortedRules, searchText, filterAction, filterZone])
|
|
|
|
const groupedSections = useMemo(() => {
|
|
const map = new Map<string, { srcZone: string; dstZone: string; rules: FwRule[] }>()
|
|
for (const r of filteredRules) {
|
|
const key = `${r.src_zone}→${r.dst_zone}`
|
|
if (!map.has(key)) map.set(key, { srcZone: r.src_zone, dstZone: r.dst_zone, rules: [] })
|
|
map.get(key)!.rules.push(r)
|
|
}
|
|
return Array.from(map.entries()).map(([key, v]) => ({ key, ...v }))
|
|
}, [filteredRules])
|
|
|
|
const rowClassFn = (row: FwRule) => {
|
|
const c = counterByID.get(row.id)
|
|
const zeroHit = row.enabled && (!c || c.packets === 0)
|
|
return [
|
|
!row.enabled ? 'fw-rule-row--disabled' : '',
|
|
zeroHit ? 'fw-rule-row--zero-hit' : '',
|
|
].filter(Boolean).join(' ')
|
|
}
|
|
|
|
const create = useMutation({
|
|
mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/rules', buildPayload(v)) },
|
|
onSuccess: () => {
|
|
message.success(t('common.save')); setCreating(false); form.resetFields()
|
|
void qc.invalidateQueries({ queryKey: ['fw', 'rules'] })
|
|
},
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
const update = useMutation({
|
|
mutationFn: async ({ id, v }: { id: number; v: FormValues }) => {
|
|
await apiClient.put(`/firewall/rules/${id}`, buildPayload(v))
|
|
},
|
|
onSuccess: () => {
|
|
message.success(t('common.save')); setEditing(null); form.resetFields()
|
|
void qc.invalidateQueries({ queryKey: ['fw', 'rules'] })
|
|
},
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
const del = useMutation({
|
|
mutationFn: async (id: number) => { await apiClient.delete(`/firewall/rules/${id}`) },
|
|
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'rules'] }) },
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
const quickToggle = useMutation({
|
|
mutationFn: async ({ id, row, checked }: { id: number; row: FwRule; checked: boolean }) => {
|
|
await apiClient.put(`/firewall/rules/${id}`, { ...row, enabled: checked })
|
|
},
|
|
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'rules'] }) },
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
|
|
const swap = useMutation({
|
|
mutationFn: async ({ a, b }: { a: FwRule; b: FwRule }) => {
|
|
await apiClient.put(`/firewall/rules/${a.id}`, { ...a, priority: b.priority })
|
|
await apiClient.put(`/firewall/rules/${b.id}`, { ...b, priority: a.priority })
|
|
},
|
|
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'rules'] }) },
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
|
|
const patchNote = useMutation({
|
|
mutationFn: async ({ id, note }: { id: number; note: string }) => {
|
|
await apiClient.patch(`/firewall/rules/${id}`, { note })
|
|
},
|
|
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'rules'] }) },
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
|
|
const patchLabels = useMutation({
|
|
mutationFn: async ({ id, labels }: { id: number; labels: string[] }) => {
|
|
await apiClient.patch(`/firewall/rules/${id}`, { labels })
|
|
},
|
|
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'rules'] }) },
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
|
|
const duplicate = useMutation({
|
|
mutationFn: async (r: FwRule) => {
|
|
const { id: _id, created_at: _ca, updated_at: _ua, ...rest } = r as FwRule & { created_at?: unknown; updated_at?: unknown }
|
|
await apiClient.post('/firewall/rules', {
|
|
...rest,
|
|
name: r.name ? `${r.name} (copy)` : undefined,
|
|
priority: r.priority + 1,
|
|
enabled: false,
|
|
})
|
|
},
|
|
onSuccess: () => {
|
|
message.success(t('fw.rule.duplicated'))
|
|
void qc.invalidateQueries({ queryKey: ['fw', 'rules'] })
|
|
},
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
|
|
const editFromRow = (r: FwRule) => {
|
|
setEditing(r)
|
|
form.setFieldsValue({
|
|
name: r.name ?? undefined,
|
|
priority: r.priority, enabled: r.enabled, action: r.action,
|
|
src_zone: r.src_zone, dst_zone: r.dst_zone, log: r.log, comment: r.comment ?? undefined,
|
|
src_kind: r.src_address_object_id ? 'object' : r.src_address_group_id ? 'group' : r.src_cidr ? 'cidr' : 'any',
|
|
src_address_object_id: r.src_address_object_id ?? undefined,
|
|
src_address_group_id: r.src_address_group_id ?? undefined,
|
|
src_cidr: r.src_cidr ?? undefined,
|
|
dst_kind: r.dst_address_object_id ? 'object' : r.dst_address_group_id ? 'group' : r.dst_cidr ? 'cidr' : 'any',
|
|
dst_address_object_id: r.dst_address_object_id ?? undefined,
|
|
dst_address_group_id: r.dst_address_group_id ?? undefined,
|
|
dst_cidr: r.dst_cidr ?? undefined,
|
|
service_kind: r.service_object_id ? 'object' : r.service_group_id ? 'group' : 'any',
|
|
service_object_id: r.service_object_id ?? undefined,
|
|
service_group_id: r.service_group_id ?? undefined,
|
|
})
|
|
}
|
|
|
|
const columns: ColumnsType<FwRule> = [
|
|
{
|
|
title: '', key: 'dot', width: 28,
|
|
render: (_, row) => (
|
|
<Tooltip title={row.enabled ? t('fw.rule.enabled') : t('fw.rule.ruleDisabled')}>
|
|
<span className={`fw-rule-dot fw-rule-dot--${row.enabled ? 'on' : 'off'}`} />
|
|
</Tooltip>
|
|
),
|
|
},
|
|
{
|
|
title: '#', dataIndex: 'priority', key: 'priority', width: 52,
|
|
render: (v: number) => (
|
|
<Text style={{ fontFamily: 'monospace', fontSize: 12, color: '#475569' }}>{v}</Text>
|
|
),
|
|
},
|
|
{
|
|
title: t('fw.rule.action'), key: 'action', width: 90,
|
|
render: (_, r) => <ActionBadge action={r.action} />,
|
|
},
|
|
{
|
|
title: t('fw.rule.src'), key: 'src',
|
|
render: (_, r) => (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<ZoneBadge zone={r.src_zone} />
|
|
{renderAddr(r.src_address_object_id, r.src_address_group_id, r.src_cidr)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
title: '', key: 'arrow', width: 24, align: 'center' as const,
|
|
render: () => <span className="fw-flow-arrow">→</span>,
|
|
},
|
|
{
|
|
title: t('fw.rule.dst'), key: 'dst',
|
|
render: (_, r) => (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<ZoneBadge zone={r.dst_zone} />
|
|
{renderAddr(r.dst_address_object_id, r.dst_address_group_id, r.dst_cidr)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
title: t('fw.rule.service'), key: 'svc', width: 130,
|
|
render: (_, r) => renderService(r.service_object_id, r.service_group_id),
|
|
},
|
|
{
|
|
title: t('fw.rule.name'), key: 'name', ellipsis: true,
|
|
render: (_, r) => (
|
|
<div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
|
|
{r.name
|
|
? <span className="fw-rule-name" style={{ fontWeight: 500, fontSize: 12, color: '#0F172A' }}>{r.name}</span>
|
|
: <span className="fw-rule-name" style={{ fontSize: 12, color: '#94A3B8', fontStyle: 'italic' }}>{t('fw.rule.unnamed')}</span>
|
|
}
|
|
<InlineLabels
|
|
labels={r.labels ?? []}
|
|
disabled={isViewer}
|
|
onSave={labels => patchLabels.mutate({ id: r.id, labels })}
|
|
/>
|
|
<InlineNote
|
|
value={r.note}
|
|
disabled={isViewer}
|
|
onSave={note => patchNote.mutate({ id: r.id, note })}
|
|
/>
|
|
</div>
|
|
{r.comment
|
|
? <div style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>{r.comment}</div>
|
|
: <div className="fw-rule-desc">{autoDescription(r)}</div>
|
|
}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
title: t('fw.rule.hits'), key: 'hits', width: 80, align: 'right' as const,
|
|
render: (_, r) => {
|
|
const c = counterByID.get(r.id)
|
|
if (!c || c.packets === 0) return (
|
|
<Tooltip title={r.enabled ? t('fw.rule.zeroHitHint') : undefined}>
|
|
<span style={{ fontSize: 11, color: r.enabled ? '#FAAD14' : '#CBD5E1' }}>
|
|
{r.enabled ? <><WarningOutlined style={{ fontSize: 10, marginRight: 2 }} />0</> : '—'}
|
|
</span>
|
|
</Tooltip>
|
|
)
|
|
return (
|
|
<Tooltip title={`${c.packets.toLocaleString()} pkts · ${fmtBytes(c.bytes)}`}>
|
|
<Text style={{ fontSize: 11, fontVariantNumeric: 'tabular-nums', color: '#0EA5E9' }}>
|
|
{c.packets >= 1_000_000
|
|
? `${(c.packets / 1_000_000).toFixed(1)}M`
|
|
: c.packets >= 1_000
|
|
? `${(c.packets / 1_000).toFixed(1)}k`
|
|
: c.packets.toLocaleString()}
|
|
</Text>
|
|
</Tooltip>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
title: 'Log', key: 'log', width: 38, align: 'center' as const,
|
|
render: (_, r) => r.log
|
|
? <Tooltip title={t('fw.rule.logEnabled')}><EyeOutlined style={{ color: '#0EA5E9', fontSize: 13 }} /></Tooltip>
|
|
: null,
|
|
},
|
|
{
|
|
title: t('fw.rule.enabled'), dataIndex: 'enabled', key: 'enabled', width: 68,
|
|
render: (v: boolean, row: FwRule) => (
|
|
<Switch
|
|
size="small"
|
|
checked={v}
|
|
disabled={isViewer}
|
|
loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
|
|
onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
title: '', key: 'move', width: 52,
|
|
render: (_, row) => {
|
|
const idx = sortedRules.findIndex(r => r.id === row.id)
|
|
const swapping = swap.isPending
|
|
return (
|
|
<Space size={1} className="fw-row-actions">
|
|
<Tooltip title={t('fw.rule.moveUp')}>
|
|
<Button type="text" size="small" icon={<ArrowUpOutlined />}
|
|
disabled={isViewer || idx <= 0 || swapping}
|
|
onClick={() => swap.mutate({ a: row, b: sortedRules[idx - 1] })} />
|
|
</Tooltip>
|
|
<Tooltip title={t('fw.rule.moveDown')}>
|
|
<Button type="text" size="small" icon={<ArrowDownOutlined />}
|
|
disabled={isViewer || idx >= sortedRules.length - 1 || swapping}
|
|
onClick={() => swap.mutate({ a: row, b: sortedRules[idx + 1] })} />
|
|
</Tooltip>
|
|
</Space>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
title: '', key: 'actions', width: 88,
|
|
render: (_, row) => (
|
|
<Space size={0} className="fw-row-actions">
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : t('common.edit')}>
|
|
<Button type="text" size="small" icon={<EditOutlined />}
|
|
disabled={isViewer}
|
|
onClick={() => editFromRow(row)} />
|
|
</Tooltip>
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : t('fw.rule.duplicate')}>
|
|
<Button type="text" size="small" icon={<CopyOutlined />}
|
|
disabled={isViewer}
|
|
loading={duplicate.isPending && duplicate.variables?.id === row.id}
|
|
onClick={() => duplicate.mutate(row)} />
|
|
</Tooltip>
|
|
{isViewer ? (
|
|
<Tooltip title={t('auth.viewerBadge')}>
|
|
<Button type="text" size="small" icon={<DeleteOutlined />} danger disabled />
|
|
</Tooltip>
|
|
) : (
|
|
<Popconfirm title={t('fw.rule.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
|
|
<Button type="text" size="small" icon={<DeleteOutlined />} danger />
|
|
</Popconfirm>
|
|
)}
|
|
</Space>
|
|
),
|
|
},
|
|
]
|
|
|
|
const openCreate = () => {
|
|
setCreating(true); form.resetFields()
|
|
form.setFieldsValue({
|
|
priority: 100, enabled: true, action: 'accept', log: false,
|
|
src_zone: 'any', dst_zone: 'any',
|
|
src_kind: 'any', dst_kind: 'any', service_kind: 'any',
|
|
})
|
|
}
|
|
|
|
const activeFilters = !!(searchText || filterAction || filterZone)
|
|
|
|
return (
|
|
<>
|
|
{/* ── Filter bar ─────────────────────────────────────── */}
|
|
<div className="fw-filter-bar">
|
|
<Input.Search
|
|
placeholder={t('fw.filter.search')}
|
|
allowClear
|
|
style={{ width: 240 }}
|
|
value={searchText}
|
|
onChange={e => setSearchText(e.target.value)}
|
|
onSearch={v => setSearchText(v)}
|
|
/>
|
|
<Select
|
|
style={{ width: 150 }}
|
|
placeholder={t('fw.filter.allActions')}
|
|
allowClear
|
|
value={filterAction || undefined}
|
|
onChange={v => setFilterAction(v ?? '')}
|
|
options={[
|
|
{ value: 'accept', label: 'ACCEPT' },
|
|
{ value: 'drop', label: 'DROP' },
|
|
{ value: 'reject', label: 'REJECT' },
|
|
]}
|
|
/>
|
|
<Select
|
|
style={{ width: 150 }}
|
|
placeholder={t('fw.filter.allZones')}
|
|
allowClear
|
|
value={filterZone || undefined}
|
|
onChange={v => setFilterZone(v ?? '')}
|
|
options={zoneOptions.filter(z => z !== 'any').map(z => ({ value: z, label: z }))}
|
|
/>
|
|
{activeFilters && (
|
|
<Text type="secondary" style={{ fontSize: 12 }}>
|
|
{filteredRules.length} / {sortedRules.length}
|
|
</Text>
|
|
)}
|
|
<div className="fw-filter-bar-right">
|
|
<Tooltip title={groupByZone ? t('fw.filter.flatView') : t('fw.filter.groupView')}>
|
|
<Button
|
|
type={groupByZone ? 'default' : 'text'}
|
|
size="small"
|
|
icon={groupByZone ? <AppstoreOutlined /> : <UnorderedListOutlined />}
|
|
onClick={() => setGroupByZone(v => !v)}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
|
|
<Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
|
|
{t('fw.rule.add')}
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
|
|
{groupByZone ? (
|
|
groupedSections.length === 0 ? (
|
|
<EmptyState
|
|
icon={<FireOutlined />}
|
|
title={activeFilters ? t('fw.filter.noResults') : t('fw.rule.emptyTitle')}
|
|
description={activeFilters ? t('fw.filter.noResultsHint') : t('fw.rule.emptyDesc')}
|
|
action={
|
|
!activeFilters ? (
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
|
|
<Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
|
|
{t('fw.rule.add')}
|
|
</Button>
|
|
</Tooltip>
|
|
) : undefined
|
|
}
|
|
/>
|
|
) : (
|
|
groupedSections.map(({ key, srcZone, dstZone, rules: groupRules }) => (
|
|
<div key={key} className="fw-zone-section">
|
|
<div className="fw-zone-section-header">
|
|
<ZoneBadge zone={srcZone} />
|
|
<span className="fw-zone-section-arrow">→</span>
|
|
<ZoneBadge zone={dstZone} />
|
|
<span className="fw-zone-section-count">
|
|
{groupRules.length} {t('fw.filter.rules')}
|
|
</span>
|
|
</div>
|
|
<DataTable
|
|
rowKey="id"
|
|
loading={isLoading}
|
|
dataSource={groupRules}
|
|
columns={columns}
|
|
rowClassName={rowClassFn}
|
|
/>
|
|
</div>
|
|
))
|
|
)
|
|
) : (
|
|
<DataTable
|
|
rowKey="id"
|
|
loading={isLoading}
|
|
dataSource={filteredRules}
|
|
columns={columns}
|
|
rowClassName={rowClassFn}
|
|
emptyContent={
|
|
<EmptyState
|
|
icon={<FireOutlined />}
|
|
title={activeFilters ? t('fw.filter.noResults') : t('fw.rule.emptyTitle')}
|
|
description={activeFilters ? t('fw.filter.noResultsHint') : t('fw.rule.emptyDesc')}
|
|
action={
|
|
!activeFilters ? (
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
|
|
<Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
|
|
{t('fw.rule.add')}
|
|
</Button>
|
|
</Tooltip>
|
|
) : undefined
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
)}
|
|
|
|
<Modal
|
|
title={editing ? t('fw.rule.edit') : t('fw.rule.add')}
|
|
open={editing !== null || creating}
|
|
onCancel={() => { setEditing(null); setCreating(false) }}
|
|
onOk={() => { void form.submit() }}
|
|
confirmLoading={create.isPending || update.isPending}
|
|
width={620}
|
|
destroyOnHidden
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
onFinish={(v) => { if (editing) update.mutate({ id: editing.id, v }); else create.mutate(v) }}
|
|
>
|
|
<Form.Item label={t('fw.rule.name')} name="name">
|
|
<Input placeholder={t('fw.rule.namePlaceholder')} />
|
|
</Form.Item>
|
|
|
|
<Space size="middle" className="flex-wrap">
|
|
<Form.Item label={t('fw.rule.priority')} name="priority" rules={[{ required: true }]}>
|
|
<InputNumber min={0} max={9999} />
|
|
</Form.Item>
|
|
<Form.Item label={t('fw.rule.action')} name="action" rules={[{ required: true }]}>
|
|
<Select style={{ width: 140 }} options={(['accept','drop','reject'] as const).map(a => ({ value: a, label: t(`fw.rule.actions.${a}`) }))} />
|
|
</Form.Item>
|
|
<Form.Item label={t('fw.rule.enabled')} name="enabled" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item label={t('fw.rule.log')} name="log" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
</Space>
|
|
|
|
{(['src', 'dst'] as const).map((side) => (
|
|
<Space key={side} size="middle" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start' }}>
|
|
<Form.Item label={t(`fw.rule.${side}Zone`)} name={`${side}_zone`} rules={[{ required: true }]}>
|
|
<Select style={{ width: 140 }} options={zoneOptions.map(z => ({ value: z, label: z }))} />
|
|
</Form.Item>
|
|
<Form.Item label={t(`fw.rule.${side}Kind`)} name={`${side}_kind`} rules={[{ required: true }]}>
|
|
<Select style={{ width: 120 }} options={(['any','object','group','cidr'] as const).map(k => ({ value: k, label: t(`fw.rule.kinds.${k}`) }))} />
|
|
</Form.Item>
|
|
<Form.Item noStyle shouldUpdate={(p, c) => p[`${side}_kind`] !== c[`${side}_kind`]}>
|
|
{({ getFieldValue }) => {
|
|
const k = getFieldValue(`${side}_kind`)
|
|
if (k === 'object') {
|
|
return <Form.Item label={t('fw.rule.object')} name={`${side}_address_object_id`} rules={[{ required: true }]}>
|
|
<Select style={{ width: 220 }} showSearch optionFilterProp="label"
|
|
options={(aos ?? []).map(o => ({ value: o.id, label: `${o.name} (${o.kind}: ${o.value})` }))} />
|
|
</Form.Item>
|
|
}
|
|
if (k === 'group') {
|
|
return <Form.Item label={t('fw.rule.group')} name={`${side}_address_group_id`} rules={[{ required: true }]}>
|
|
<Select style={{ width: 220 }} showSearch optionFilterProp="label"
|
|
options={(ags ?? []).map(g => ({ value: g.id, label: g.name }))} />
|
|
</Form.Item>
|
|
}
|
|
if (k === 'cidr') {
|
|
return <Form.Item
|
|
label={t('fw.rule.kinds.cidr')}
|
|
name={`${side}_cidr`}
|
|
rules={[
|
|
{ required: true },
|
|
{ pattern: /^(\d{1,3}\.){3}\d{1,3}\/\d{1,2}$|^[0-9a-fA-F:]+\/\d{1,3}$/, message: t('fw.rule.cidrInvalid') },
|
|
]}
|
|
>
|
|
<Input placeholder="10.0.0.0/24" style={{ width: 200 }} />
|
|
</Form.Item>
|
|
}
|
|
return null
|
|
}}
|
|
</Form.Item>
|
|
</Space>
|
|
))}
|
|
|
|
<Space size="middle" className="flex-wrap">
|
|
<Form.Item label={t('fw.rule.serviceKind')} name="service_kind" rules={[{ required: true }]}>
|
|
<Select style={{ width: 120 }} options={(['any','object','group'] as const).map(k => ({ value: k, label: t(`fw.rule.kinds.${k}`) }))} />
|
|
</Form.Item>
|
|
<Form.Item noStyle shouldUpdate={(p, c) => p.service_kind !== c.service_kind}>
|
|
{({ getFieldValue }) => {
|
|
const k = getFieldValue('service_kind')
|
|
if (k === 'object') {
|
|
return <Form.Item label={t('fw.rule.service')} name="service_object_id" rules={[{ required: true }]}>
|
|
<Select style={{ width: 240 }} showSearch optionFilterProp="label"
|
|
options={(svs ?? []).map(s => ({
|
|
value: s.id,
|
|
label: `${s.name} (${s.proto}${s.port_start ? ' '+s.port_start : ''})`,
|
|
}))} />
|
|
</Form.Item>
|
|
}
|
|
if (k === 'group') {
|
|
return <Form.Item label={t('fw.rule.serviceGroup')} name="service_group_id" rules={[{ required: true }]}>
|
|
<Select style={{ width: 240 }} showSearch optionFilterProp="label"
|
|
options={(sgs ?? []).map(g => ({ value: g.id, label: g.name }))} />
|
|
</Form.Item>
|
|
}
|
|
return null
|
|
}}
|
|
</Form.Item>
|
|
</Space>
|
|
|
|
<Form.Item label={t('fw.rule.comment')} name="comment">
|
|
<Input />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|