feat(firewall): Enterprise-UI-Redesign — KPI-Strip, Zone-Badges, Filter-Bar (v1.1.136)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

management-ui/src/pages/Firewall/Rules.tsx

@@ -1,9 +1,14 @@
 import { useMemo, useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, Tooltip, Typography, message } from 'antd'
+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 { ArrowDownOutlined, ArrowUpOutlined, FireOutlined } from '@ant-design/icons'
+import {
+  ArrowDownOutlined, ArrowUpOutlined, EyeOutlined, FireOutlined, PlusOutlined,
+} from '@ant-design/icons'
 
 const { Text } = Typography
 
@@ -37,12 +42,6 @@ interface FormValues {
   comment?: string
 }
 
-const ACTION_COLORS: Record<FwRule['action'], string> = {
-  accept: 'green',
-  drop:   'red',
-  reject: 'orange',
-}
-
 interface RuleCounter { rule_id: number; packets: number; bytes: number }
 
 async function listCounters(): Promise<RuleCounter[]> {
@@ -110,10 +109,28 @@ function buildPayload(v: FormValues) {
   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 })
@@ -127,8 +144,6 @@ export default function RulesTab() {
   })
   const counterByID = new Map((counters ?? []).map(c => [c.rule_id, c]))
 
-  // Picker options: 'any' (special) + every zone the operator has
-  // declared. Fallback to the seed list while the query is loading.
   const zoneOptions: Zone[] = zones && zones.length > 0
     ? ['any', ...zones.map((z) => z.name)]
     : ZONES_FALLBACK
@@ -138,22 +153,46 @@ export default function RulesTab() {
   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 renderSide = (objID?: number | null, grpID?: number | null, cidr?: string | null) => {
-    if (objID) return <Tag>obj:{aoLabel(objID)}</Tag>
-    if (grpID) return <Tag color="purple">grp:{agLabel(grpID)}</Tag>
-    if (cidr)  return <code>{cidr}</code>
-    return <Tag>any</Tag>
+  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'
   }
   const renderService = (objID?: number | null, grpID?: number | null) => {
-    if (objID) return <Tag>{svLabel(objID)}</Tag>
-    if (grpID) return <Tag color="purple">grp:{sgLabel(grpID)}</Tag>
-    return <Tag>any</Tag>
+    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 <Tag style={{ fontSize: 11, color: '#94A3B8' }}>any</Tag>
   }
 
+  // ── Filter state ─────────────────────────────────────────────
+  const [searchText, setSearchText] = useState('')
+  const [filterAction, setFilterAction] = useState<string>('')
+  const [filterZone,   setFilterZone]   = useState<string>('')
+
   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 create = useMutation({
     mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/rules', buildPayload(v)) },
     onSuccess: () => {
@@ -163,7 +202,9 @@ export default function RulesTab() {
     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)) },
+    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'] })
@@ -183,11 +224,6 @@ export default function RulesTab() {
     onError: (e: Error) => message.error(e.message),
   })
 
-  const sortedRules = useMemo(
-    () => [...(rules ?? [])].sort((a, b) => a.priority - b.priority),
-    [rules],
-  )
-
   const swap = useMutation({
     mutationFn: async ({ a, b }: { a: FwRule; b: FwRule }) => {
       await apiClient.put(`/firewall/rules/${a.id}`, { ...a, priority: b.priority })
@@ -218,25 +254,96 @@ export default function RulesTab() {
   }
 
   const columns: ColumnsType<FwRule> = [
-    { title: '#', dataIndex: 'priority', key: 'priority', width: 70 },
     {
-      title: t('fw.rule.action'), dataIndex: 'action', key: 'action',
-      render: (a: FwRule['action']) => <Tag color={ACTION_COLORS[a]}>{a.toUpperCase()}</Tag>,
+      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) => <Space size={4}><Tag>{r.src_zone}</Tag>{renderSide(r.src_address_object_id, r.src_address_group_id, r.src_cidr)}</Space>,
+      render: (_, r) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          <ZoneBadge zone={r.src_zone} />
+          {(r.src_address_object_id || r.src_address_group_id || r.src_cidr) && (
+            <Text style={{ fontSize: 11, color: '#475569', fontFamily: 'monospace' }}>
+              {renderAddrCompact(r.src_address_object_id, r.src_address_group_id, r.src_cidr)}
+            </Text>
+          )}
+        </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) => <Space size={4}><Tag>{r.dst_zone}</Tag>{renderSide(r.dst_address_object_id, r.dst_address_group_id, r.dst_cidr)}</Space>,
+      render: (_, r) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          <ZoneBadge zone={r.dst_zone} />
+          {(r.dst_address_object_id || r.dst_address_group_id || r.dst_cidr) && (
+            <Text style={{ fontSize: 11, color: '#475569', fontFamily: 'monospace' }}>
+              {renderAddrCompact(r.dst_address_object_id, r.dst_address_group_id, r.dst_cidr)}
+            </Text>
+          )}
+        </div>
+      ),
     },
     {
-      title: t('fw.rule.service'), key: 'svc',
+      title: t('fw.rule.service'), key: 'svc', width: 130,
       render: (_, r) => renderService(r.service_object_id, r.service_group_id),
     },
     {
-      title: t('fw.rule.enabled'), dataIndex: 'enabled', key: 'enabled', width: 80,
+      title: t('fw.rule.name'), key: 'name', ellipsis: true,
+      render: (_, r) => (
+        <div>
+          {r.name && <div style={{ fontWeight: 500, fontSize: 12, color: '#0F172A' }}>{r.name}</div>}
+          {r.comment && (
+            <div style={{ fontSize: 11, color: '#94A3B8', marginTop: 1 }}>{r.comment}</div>
+          )}
+          {!r.name && !r.comment && <Text type="secondary" style={{ fontSize: 11 }}>—</Text>}
+        </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 <Text type="secondary" style={{ fontSize: 11 }}>—</Text>
+        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"
@@ -247,52 +354,35 @@ export default function RulesTab() {
         />
       ),
     },
-    { title: t('fw.rule.name'), dataIndex: 'name', key: 'name', render: (v?: string) => v ?? '—' },
     {
-      title: t('fw.rule.hits'), key: 'hits', width: 90,
-      render: (_, r) => {
-        const c = counterByID.get(r.id)
-        if (!c) return <Text type="secondary" style={{ fontSize: 11 }}>—</Text>
-        return (
-          <Tooltip title={`${c.packets.toLocaleString()} pkts · ${fmtBytes(c.bytes)}`}>
-            <Text style={{ fontSize: 11 }}>{c.packets.toLocaleString()}</Text>
-          </Tooltip>
-        )
-      },
-    },
-    {
-      title: '', key: 'move', width: 64,
+      title: '', key: 'move', width: 60,
       render: (_, row) => {
         const idx = sortedRules.findIndex(r => r.id === row.id)
         const swapping = swap.isPending
         return (
           <Space size={2}>
             <Tooltip title={t('fw.rule.moveUp')}>
-              <Button
-                size="small"
-                icon={<ArrowUpOutlined />}
+              <Button size="small" icon={<ArrowUpOutlined />}
                 disabled={isViewer || idx <= 0 || swapping}
-                onClick={() => swap.mutate({ a: row, b: sortedRules[idx - 1] })}
-              />
+                onClick={() => swap.mutate({ a: row, b: sortedRules[idx - 1] })} />
             </Tooltip>
             <Tooltip title={t('fw.rule.moveDown')}>
-              <Button
-                size="small"
-                icon={<ArrowDownOutlined />}
+              <Button size="small" icon={<ArrowDownOutlined />}
                 disabled={isViewer || idx >= sortedRules.length - 1 || swapping}
-                onClick={() => swap.mutate({ a: row, b: sortedRules[idx + 1] })}
-              />
+                onClick={() => swap.mutate({ a: row, b: sortedRules[idx + 1] })} />
             </Tooltip>
           </Space>
         )
       },
     },
     {
-      title: t('common.edit'), key: 'actions',
+      title: '', key: 'actions', width: 100,
       render: (_, row) => (
-        <Space>
-          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-            <Button size="small" disabled={isViewer} onClick={() => editFromRow(row)}>{t('common.edit')}</Button>
+        <Space size={4}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : t('common.edit')}>
+            <Button size="small" disabled={isViewer} onClick={() => editFromRow(row)}>
+              {t('common.edit')}
+            </Button>
           </Tooltip>
           {isViewer ? (
             <Tooltip title={t('auth.viewerBadge')}>
@@ -317,31 +407,78 @@ export default function RulesTab() {
     })
   }
 
+  const activeFilters = !!(searchText || filterAction || filterZone)
+
   return (
     <>
-      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-          {t('fw.rule.add')}
-        </Button>
-      </Tooltip>
+      {/* ── 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={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
+              {t('fw.rule.add')}
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+
       <DataTable
         rowKey="id"
         loading={isLoading}
-        dataSource={rules ?? []}
+        dataSource={filteredRules}
         columns={columns}
+        rowClassName={(row: FwRule) => row.enabled ? '' : 'fw-rule-row--disabled'}
         emptyContent={
           <EmptyState
             icon={<FireOutlined />}
-            title={t('fw.rule.emptyTitle')}
-            description={t('fw.rule.emptyDesc')}
+            title={activeFilters ? t('fw.filter.noResults') : t('fw.rule.emptyTitle')}
+            description={activeFilters ? t('fw.filter.noResultsHint') : t('fw.rule.emptyDesc')}
             action={
-              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.rule.add')}</Button>
-              </Tooltip>
+              !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}
@@ -349,6 +486,7 @@ export default function RulesTab() {
         onOk={() => { void form.submit() }}
         confirmLoading={create.isPending || update.isPending}
         width={620}
+        destroyOnHidden
       >
         <Form
           form={form}

management-ui/src/pages/Firewall/index.tsx

@@ -1,5 +1,5 @@
 import { Space, Tag, Tabs } from 'antd'
-import { CheckCircleOutlined, CloseCircleOutlined, FireOutlined } from '@ant-design/icons'
+import { CheckCircleOutlined, CloseCircleOutlined, FireOutlined, SafetyOutlined } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@tanstack/react-query'
 
@@ -13,9 +13,75 @@ import RulesTab from './Rules'
 import NATRulesTab from './NATRules'
 import SystemRulesCard from './SystemRules'
 import ZonesTab from './Zones'
+import type { FwRule, FwZone, NATRule } from './types'
 
 interface ServiceStatus { label: string; unit: string; active: boolean; state: string }
 
+async function listRulesCount(): Promise<FwRule[]> {
+  try {
+    const r = await apiClient.get('/firewall/rules')
+    if (!isEnvelope(r.data)) return []
+    return (r.data.data as { rules?: FwRule[] }).rules ?? []
+  } catch { return [] }
+}
+async function listNATCount(): Promise<NATRule[]> {
+  try {
+    const r = await apiClient.get('/firewall/nat-rules')
+    if (!isEnvelope(r.data)) return []
+    return (r.data.data as { nat_rules?: NATRule[] }).nat_rules ?? []
+  } catch { return [] }
+}
+async function listZonesCount(): Promise<FwZone[]> {
+  try {
+    const r = await apiClient.get('/firewall/zones')
+    if (!isEnvelope(r.data)) return []
+    return (r.data.data as { zones?: FwZone[] }).zones ?? []
+  } catch { return [] }
+}
+
+function FirewallKPIStrip({ nftablesActive }: { nftablesActive: boolean | undefined }) {
+  const { t } = useTranslation()
+  const { data: rules } = useQuery({ queryKey: ['fw', 'rules'], queryFn: listRulesCount, staleTime: 30_000 })
+  const { data: natRules } = useQuery({ queryKey: ['fw', 'nat-rules'], queryFn: listNATCount, staleTime: 30_000 })
+  const { data: zones } = useQuery({ queryKey: ['fw', 'zones'], queryFn: listZonesCount, staleTime: 30_000 })
+
+  const totalRules  = rules?.length ?? 0
+  const activeRules = rules?.filter(r => r.enabled).length ?? 0
+  const totalNAT    = natRules?.length ?? 0
+  const totalZones  = zones?.length ?? 0
+
+  return (
+    <div className="fw-kpi-strip">
+      <div className="fw-kpi-card">
+        <div className="fw-kpi-label">{t('fw.kpi.policyRules')}</div>
+        <div className="fw-kpi-value">{totalRules}</div>
+        <div className="fw-kpi-sub">
+          {activeRules} {t('fw.kpi.active')} · {totalRules - activeRules} {t('fw.kpi.disabled')}
+        </div>
+      </div>
+      <div className="fw-kpi-card">
+        <div className="fw-kpi-label">{t('fw.kpi.natRules')}</div>
+        <div className="fw-kpi-value">{totalNAT}</div>
+        <div className="fw-kpi-sub">{t('fw.kpi.natHint')}</div>
+      </div>
+      <div className="fw-kpi-card">
+        <div className="fw-kpi-label">{t('fw.kpi.zones')}</div>
+        <div className="fw-kpi-value">{totalZones}</div>
+        <div className="fw-kpi-sub">{t('fw.kpi.zonesHint')}</div>
+      </div>
+      <div className="fw-kpi-card fw-kpi-card--policy">
+        <div className="fw-kpi-label">{t('fw.kpi.defaultPolicy')}</div>
+        <div className="fw-kpi-value--mono">INPUT DROP</div>
+        <div className="fw-kpi-sub" style={{ marginTop: 4 }}>
+          {nftablesActive === true  && <span style={{ color: '#15803D' }}>● {t('fw.kpi.nftActive')}</span>}
+          {nftablesActive === false && <span style={{ color: '#B91C1C' }}>● {t('fw.kpi.nftInactive')}</span>}
+          {nftablesActive === undefined && <span style={{ color: '#94A3B8' }}>···</span>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function FirewallPage() {
   const { t } = useTranslation()
 
@@ -30,7 +96,7 @@ export default function FirewallPage() {
   const nftables = services?.find(s => s.unit === 'nftables.service' || s.unit === 'nftables')
 
   const tabs = [
-    { key: 'rules',    label: t('fw.tabs.rules'),    children: <RulesTab /> },
+    { key: 'rules',    label: <span><SafetyOutlined /> {t('fw.tabs.rules')}</span>,    children: <RulesTab /> },
     { key: 'nat',      label: t('fw.tabs.nat'),      children: <NATRulesTab /> },
     { key: 'zones',    label: t('fw.tabs.zones'),    children: <ZonesTab /> },
     { key: 'addrObj',  label: t('fw.tabs.addrObj'),  children: <AddressObjectsTab /> },
@@ -46,11 +112,7 @@ export default function FirewallPage() {
         icon={<FireOutlined />}
         title={t('fw.title')}
         subtitle={t('fw.intro')}
-      />
-      <Tabs
-        items={tabs}
-        defaultActiveKey="rules"
-        tabBarExtraContent={nftables && (
+        extra={nftables && (
           <Tag
             icon={nftables.active ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
             color={nftables.active ? 'green' : 'red'}
@@ -62,6 +124,11 @@ export default function FirewallPage() {
           </Tag>
         )}
       />
+      <FirewallKPIStrip nftablesActive={nftables?.active} />
+      <Tabs
+        items={tabs}
+        defaultActiveKey="rules"
+      />
     </div>
   )
 }