feat(waf): Phase 5 — WAF-UI (per-Domain Konfiguration) — v1.2.71
- pages/WAF/index.tsx: neue WAF-Seite mit Status-Strip, Domänen-Tabelle (Toggle/Mode/PL) + Konfigurations-Drawer pro Domain (enabled, mode, paranoia_level 1-4, rule_exclusions, trusted_proxies, custom_rules). Quick-Toggle ohne Drawer; Hinweis: erst Detection, dann Blocking. - App.tsx: /waf Route + lazy import - Sidebar.tsx: WAF im Security-Bereich - i18n EN + DE Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Debian
400
management-ui/src/pages/WAF/index.tsx
Normal file
400
management-ui/src/pages/WAF/index.tsx
Normal file
@@ -0,0 +1,400 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Alert, Badge, Button, Card, Col, Drawer, Form, Input, Row,
|
||||
Select, Space, Switch, Tag, Tooltip, Typography, message,
|
||||
} from 'antd'
|
||||
import {
|
||||
CheckCircleOutlined, CloseCircleOutlined,
|
||||
SafetyCertificateOutlined, SettingOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
|
||||
import apiClient, { isEnvelope } from '../../api/client'
|
||||
import PageHeader from '../../components/PageHeader'
|
||||
import DataTable from '../../components/DataTable'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
// ---------- Types -----------------------------------------------------------
|
||||
|
||||
interface Domain {
|
||||
id: number
|
||||
name: string
|
||||
active: boolean
|
||||
}
|
||||
|
||||
interface WafConfig {
|
||||
id?: number
|
||||
domain_id: number
|
||||
enabled: boolean
|
||||
mode: 'detection' | 'blocking'
|
||||
paranoia_level: number
|
||||
rule_exclusions: string[]
|
||||
trusted_proxies: string[]
|
||||
custom_rules: string
|
||||
}
|
||||
|
||||
// ---------- API helpers -----------------------------------------------------
|
||||
|
||||
async function fetchDomains(): Promise<Domain[]> {
|
||||
const r = await apiClient.get('/domains')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { domains?: Domain[] }).domains ?? []
|
||||
}
|
||||
|
||||
async function fetchWafConfigs(): Promise<WafConfig[]> {
|
||||
const r = await apiClient.get('/waf/configs')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { configs?: WafConfig[] }).configs ?? []
|
||||
}
|
||||
|
||||
async function fetchWafConfig(domainId: number): Promise<WafConfig> {
|
||||
const r = await apiClient.get(`/waf/configs/${domainId}`)
|
||||
if (isEnvelope(r.data)) return r.data.data.config as WafConfig
|
||||
return defaultConfig(domainId)
|
||||
}
|
||||
|
||||
function defaultConfig(domainId: number): WafConfig {
|
||||
return {
|
||||
domain_id: domainId,
|
||||
enabled: false,
|
||||
mode: 'detection',
|
||||
paranoia_level: 1,
|
||||
rule_exclusions: [],
|
||||
trusted_proxies: [],
|
||||
custom_rules: '',
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Config Drawer ---------------------------------------------------
|
||||
|
||||
interface ConfigDrawerProps {
|
||||
domainName: string
|
||||
domainId: number | null
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function ConfigDrawer({ domainName, domainId, onClose }: ConfigDrawerProps) {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
|
||||
const [form] = Form.useForm<WafConfig>()
|
||||
|
||||
const { data: cfg, isLoading } = useQuery({
|
||||
queryKey: ['waf', 'config', domainId],
|
||||
queryFn: () => fetchWafConfig(domainId!),
|
||||
enabled: domainId !== null,
|
||||
})
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: (values: WafConfig) =>
|
||||
apiClient.put(`/waf/configs/${domainId}`, values),
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
void qc.invalidateQueries({ queryKey: ['waf'] })
|
||||
onClose()
|
||||
},
|
||||
onError: () => message.error(t('waf.config.saveFailed')),
|
||||
})
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={<><SafetyCertificateOutlined style={{ color: '#0EA5E9', marginRight: 8 }} />{domainName}</>}
|
||||
open={domainId !== null}
|
||||
onClose={onClose}
|
||||
width={520}
|
||||
footer={
|
||||
<Space style={{ justifyContent: 'flex-end', width: '100%' }}>
|
||||
<Button onClick={onClose}>{t('common.cancel')}</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={save.isPending}
|
||||
disabled={isViewer}
|
||||
onClick={() => form.submit()}
|
||||
>
|
||||
{t('common.save')}
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{!isLoading && cfg && (
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
...cfg,
|
||||
rule_exclusions_str: (cfg.rule_exclusions ?? []).join(', '),
|
||||
trusted_proxies_str: (cfg.trusted_proxies ?? []).join(', '),
|
||||
}}
|
||||
onFinish={(vals) => {
|
||||
const exclusions = (vals.rule_exclusions_str as unknown as string ?? '')
|
||||
.split(',').map((s: string) => s.trim()).filter(Boolean)
|
||||
const proxies = (vals.trusted_proxies_str as unknown as string ?? '')
|
||||
.split(',').map((s: string) => s.trim()).filter(Boolean)
|
||||
save.mutate({
|
||||
domain_id: domainId!,
|
||||
enabled: vals.enabled,
|
||||
mode: vals.mode,
|
||||
paranoia_level: vals.paranoia_level,
|
||||
rule_exclusions: exclusions,
|
||||
trusted_proxies: proxies,
|
||||
custom_rules: vals.custom_rules ?? '',
|
||||
})
|
||||
}}
|
||||
>
|
||||
<Alert
|
||||
type="info"
|
||||
showIcon
|
||||
className="mb-16"
|
||||
message={t('waf.config.defaultHint')}
|
||||
/>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t('waf.config.enabled')} name="enabled" valuePropName="checked">
|
||||
<Switch disabled={isViewer} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t('waf.config.mode')} name="mode">
|
||||
<Select disabled={isViewer}>
|
||||
<Select.Option value="detection">
|
||||
<Tag color="blue">{t('waf.mode.detection')}</Tag>
|
||||
</Select.Option>
|
||||
<Select.Option value="blocking">
|
||||
<Tag color="red">{t('waf.mode.blocking')}</Tag>
|
||||
</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item label={t('waf.config.paranoia')} name="paranoia_level">
|
||||
<Select disabled={isViewer}>
|
||||
{[1, 2, 3, 4].map(pl => (
|
||||
<Select.Option key={pl} value={pl}>
|
||||
PL{pl} — {t(`waf.pl.${pl}`)}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t('waf.config.exclusions')}
|
||||
name="rule_exclusions_str"
|
||||
help={t('waf.config.exclusionsHint')}
|
||||
>
|
||||
<Input
|
||||
disabled={isViewer}
|
||||
placeholder="920350, 941130"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t('waf.config.trustedProxies')}
|
||||
name="trusted_proxies_str"
|
||||
help={t('waf.config.trustedProxiesHint')}
|
||||
>
|
||||
<Input
|
||||
disabled={isViewer}
|
||||
placeholder="10.0.0.1, 192.168.1.0/24"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t('waf.config.customRules')}
|
||||
name="custom_rules"
|
||||
help={t('waf.config.customRulesHint')}
|
||||
>
|
||||
<Input.TextArea
|
||||
disabled={isViewer}
|
||||
rows={5}
|
||||
placeholder={'SecRule REQUEST_URI "@contains /api/" \\\n "id:9000001,phase:1,pass,nolog"'}
|
||||
style={{ fontFamily: 'monospace', fontSize: 12 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------- Page ------------------------------------------------------------
|
||||
|
||||
export default function WAFPage() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
|
||||
const [drawerDomain, setDrawerDomain] = useState<{ id: number; name: string } | null>(null)
|
||||
|
||||
const { data: domains } = useQuery({
|
||||
queryKey: ['domains'],
|
||||
queryFn: fetchDomains,
|
||||
})
|
||||
const { data: wafConfigs, isLoading } = useQuery({
|
||||
queryKey: ['waf', 'configs'],
|
||||
queryFn: fetchWafConfigs,
|
||||
refetchInterval: 30_000,
|
||||
})
|
||||
|
||||
const quickToggle = useMutation({
|
||||
mutationFn: async ({ domainId, enabled }: { domainId: number; enabled: boolean }) => {
|
||||
const existing = wafConfigs?.find(c => c.domain_id === domainId) ?? defaultConfig(domainId)
|
||||
return apiClient.put(`/waf/configs/${domainId}`, { ...existing, enabled })
|
||||
},
|
||||
onSuccess: () => void qc.invalidateQueries({ queryKey: ['waf'] }),
|
||||
onError: () => message.error(t('waf.toggleFailed')),
|
||||
})
|
||||
|
||||
const configMap = new Map<number, WafConfig>(
|
||||
(wafConfigs ?? []).map(c => [c.domain_id, c])
|
||||
)
|
||||
|
||||
const activeDomains = (domains ?? []).filter(d => d.active)
|
||||
const enabledCount = (wafConfigs ?? []).filter(c => c.enabled).length
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t('waf.col.domain'),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (name: string) => (
|
||||
<Text strong style={{ fontSize: 13 }}>{name}</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('waf.col.status'),
|
||||
key: 'status',
|
||||
width: 80,
|
||||
render: (_: unknown, row: Domain) => {
|
||||
const cfg = configMap.get(row.id)
|
||||
const enabled = cfg?.enabled ?? false
|
||||
return (
|
||||
<Switch
|
||||
size="small"
|
||||
checked={enabled}
|
||||
disabled={isViewer}
|
||||
loading={quickToggle.isPending && quickToggle.variables?.domainId === row.id}
|
||||
onChange={(checked) => quickToggle.mutate({ domainId: row.id, enabled: checked })}
|
||||
/>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('waf.col.mode'),
|
||||
key: 'mode',
|
||||
width: 130,
|
||||
render: (_: unknown, row: Domain) => {
|
||||
const cfg = configMap.get(row.id)
|
||||
if (!cfg?.enabled) return <Text type="secondary">—</Text>
|
||||
return cfg.mode === 'blocking'
|
||||
? <Tag color="red"><CloseCircleOutlined /> {t('waf.mode.blocking')}</Tag>
|
||||
: <Tag color="blue"><CheckCircleOutlined /> {t('waf.mode.detection')}</Tag>
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('waf.col.paranoia'),
|
||||
key: 'paranoia',
|
||||
width: 90,
|
||||
render: (_: unknown, row: Domain) => {
|
||||
const cfg = configMap.get(row.id)
|
||||
if (!cfg?.enabled) return <Text type="secondary">—</Text>
|
||||
return <Tag>PL{cfg.paranoia_level}</Tag>
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
key: 'actions',
|
||||
width: 110,
|
||||
render: (_: unknown, row: Domain) => (
|
||||
<Tooltip title={isViewer ? t('auth.viewerBadge') : t('waf.configure')}>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<SettingOutlined />}
|
||||
disabled={isViewer}
|
||||
onClick={() => setDrawerDomain({ id: row.id, name: row.name })}
|
||||
>
|
||||
{t('waf.configure')}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
icon={<SafetyCertificateOutlined />}
|
||||
title={t('waf.title')}
|
||||
subtitle={t('waf.intro')}
|
||||
/>
|
||||
|
||||
{/* Status strip */}
|
||||
<Row gutter={[12, 12]} className="mb-16">
|
||||
<Col xs={12} sm={8} md={6}>
|
||||
<Card size="small">
|
||||
<Space direction="vertical" size={0}>
|
||||
<Text type="secondary" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.4 }}>
|
||||
{t('waf.stat.protected')}
|
||||
</Text>
|
||||
<div style={{ fontSize: 22, fontWeight: 600, color: enabledCount > 0 ? '#10B981' : '#94A3B8' }}>
|
||||
{enabledCount}
|
||||
<span style={{ fontSize: 13, color: '#94A3B8', fontWeight: 400 }}> / {activeDomains.length}</span>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={8} md={6}>
|
||||
<Card size="small">
|
||||
<Space direction="vertical" size={0}>
|
||||
<Text type="secondary" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.4 }}>
|
||||
{t('waf.stat.blocking')}
|
||||
</Text>
|
||||
<div style={{ fontSize: 22, fontWeight: 600, color: '#EF4444' }}>
|
||||
{(wafConfigs ?? []).filter(c => c.enabled && c.mode === 'blocking').length}
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={8} md={6}>
|
||||
<Card size="small">
|
||||
<Space direction="vertical" size={0}>
|
||||
<Text type="secondary" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.4 }}>
|
||||
{t('waf.stat.detection')}
|
||||
</Text>
|
||||
<div style={{ fontSize: 22, fontWeight: 600, color: '#0EA5E9' }}>
|
||||
{(wafConfigs ?? []).filter(c => c.enabled && c.mode === 'detection').length}
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Alert
|
||||
type="info"
|
||||
showIcon
|
||||
className="mb-16"
|
||||
message={t('waf.defaultOffHint')}
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
rowKey="id"
|
||||
loading={isLoading}
|
||||
dataSource={activeDomains}
|
||||
columns={columns}
|
||||
rowClassName={(row: Domain) => {
|
||||
const cfg = configMap.get(row.id)
|
||||
return cfg?.enabled ? '' : 'fw-rule-row--disabled'
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfigDrawer
|
||||
domainName={drawerDomain?.name ?? ''}
|
||||
domainId={drawerDomain?.id ?? null}
|
||||
onClose={() => setDrawerDomain(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user