edgeguard-native/management-ui/src/pages/Networks/index.tsx

import { useState } from 'react'
import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, 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 apiClient, { isEnvelope } from '../../api/client'

interface NetworkInterface {
  id: number
  name: string
  type: 'ethernet' | 'vlan' | 'bond' | 'bridge' | 'wireguard'
  parent?: string | null
  vlan_id?: number | null
  role: 'wan' | 'lan' | 'dmz' | 'mgmt' | 'cluster'
  mtu?: number | null
  active: boolean
  description?: string | null
  created_at: string
  updated_at: string
}

interface IfaceFormValues {
  name: string
  type: NetworkInterface['type']
  parent?: string
  vlan_id?: number
  role: NetworkInterface['role']
  mtu?: number
  active: boolean
  description?: string
}

interface SystemInterface {
  ifname: string
  link_type?: string
  address?: string
  flags?: string[]
  addr_info?: Array<{ family: 'inet' | 'inet6'; local: string; prefixlen: number }>
}

async function listInterfaces(): Promise<NetworkInterface[]> {
  const r = await apiClient.get('/network-interfaces')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { interfaces?: NetworkInterface[] }).interfaces ?? []
}

async function listSystemInterfaces(): Promise<SystemInterface[]> {
  const r = await apiClient.get('/system/interfaces')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { interfaces?: SystemInterface[] }).interfaces ?? []
}

export default function NetworksPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()

  const { data: ifs, isLoading } = useQuery({ queryKey: ['network-interfaces'], queryFn: listInterfaces })
  const { data: sys } = useQuery({ queryKey: ['system', 'interfaces'], queryFn: listSystemInterfaces, refetchInterval: 60_000 })

  const [editing, setEditing] = useState<NetworkInterface | null>(null)
  const [creating, setCreating] = useState(false)
  const [form] = Form.useForm<IfaceFormValues>()

  const create = useMutation({
    mutationFn: async (v: IfaceFormValues) => { await apiClient.post('/network-interfaces', v) },
    onSuccess: () => {
      message.success(t('common.save'))
      setCreating(false); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['network-interfaces'] })
    },
  })
  const update = useMutation({
    mutationFn: async ({ id, v }: { id: number; v: IfaceFormValues }) => { await apiClient.put(`/network-interfaces/${id}`, v) },
    onSuccess: () => {
      message.success(t('common.save'))
      setEditing(null); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['network-interfaces'] })
    },
  })
  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/network-interfaces/${id}`) },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) },
  })

  const roleColor: Record<NetworkInterface['role'], string> = {
    wan: 'blue', lan: 'green', dmz: 'orange', mgmt: 'purple', cluster: 'magenta',
  }

  const columns: ColumnsType<NetworkInterface> = [
    { title: t('networks.name'), dataIndex: 'name', key: 'name', render: (s: string) => <code>{s}</code> },
    { title: t('networks.type'), dataIndex: 'type', key: 'type' },
    {
      title: t('networks.vlan'), key: 'vlan',
      render: (_, row) => row.type === 'vlan' ? <span>{row.parent}.{row.vlan_id}</span> : '—',
    },
    {
      title: t('networks.role'), dataIndex: 'role', key: 'role',
      render: (r: NetworkInterface['role']) => <Tag color={roleColor[r]}>{r.toUpperCase()}</Tag>,
    },
    { title: t('networks.mtu'), dataIndex: 'mtu', key: 'mtu', render: (v?: number) => v ?? '—' },
    { title: t('networks.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => v ? t('common.yes') : t('common.no') },
    {
      title: t('networks.actions'), key: 'actions',
      render: (_, row) => (
        <Space>
          <Button size="small" onClick={() => {
            setEditing(row)
            form.setFieldsValue({
              name: row.name, type: row.type, parent: row.parent ?? undefined,
              vlan_id: row.vlan_id ?? undefined, role: row.role,
              mtu: row.mtu ?? undefined, active: row.active,
              description: row.description ?? undefined,
            })
          }}>{t('common.edit')}</Button>
          <Popconfirm
            title={t('networks.deleteConfirm', { name: row.name })}
            onConfirm={() => del.mutate(row.id)}
          >
            <Button size="small" danger>{t('common.delete')}</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <div>
      <Typography.Title level={3}>{t('networks.title')}</Typography.Title>
      <Typography.Paragraph type="secondary">{t('networks.intro')}</Typography.Paragraph>

      <Card title={t('networks.systemDiscovered')} style={{ marginBottom: 16 }} size="small">
        <Space wrap>
          {(sys ?? []).map((i) => {
            const v4 = (i.addr_info ?? []).filter((a) => a.family === 'inet').map((a) => `${a.local}/${a.prefixlen}`)
            const v6 = (i.addr_info ?? []).filter((a) => a.family === 'inet6').map((a) => `${a.local}/${a.prefixlen}`)
            return (
              <Tooltip key={i.ifname} title={[...v4, ...v6].join(' · ') || '—'}>
                <Tag>{i.ifname}{v4[0] ? ` · ${v4[0]}` : ''}</Tag>
              </Tooltip>
            )
          })}
          {(sys ?? []).length === 0 && <Typography.Text type="secondary">—</Typography.Text>}
        </Space>
      </Card>

      <Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
        setCreating(true); form.resetFields()
        form.setFieldsValue({ type: 'ethernet', role: 'lan', active: true })
      }}>
        {t('networks.addInterface')}
      </Button>

      <Table rowKey="id" loading={isLoading} dataSource={ifs ?? []} columns={columns} pagination={false} />

      <Modal
        title={editing ? t('networks.editInterface') : t('networks.addInterface')}
        open={editing !== null || creating}
        onCancel={() => { setEditing(null); setCreating(false) }}
        onOk={() => { void form.submit() }}
        confirmLoading={create.isPending || update.isPending}
        width={560}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={(v) => {
            if (editing) update.mutate({ id: editing.id, v })
            else create.mutate(v)
          }}
        >
          <Form.Item label={t('networks.name')} name="name" rules={[{ required: true }]}>
            <Input placeholder="eth0 / eth0.100 / bond0" />
          </Form.Item>
          <Form.Item label={t('networks.type')} name="type" rules={[{ required: true }]}>
            <Select options={[
              { value: 'ethernet', label: 'ethernet' },
              { value: 'vlan',     label: 'vlan' },
              { value: 'bond',     label: 'bond' },
              { value: 'bridge',   label: 'bridge' },
              { value: 'wireguard',label: 'wireguard' },
            ]} />
          </Form.Item>
          <Form.Item noStyle shouldUpdate={(p, c) => p.type !== c.type}>
            {({ getFieldValue }) => getFieldValue('type') === 'vlan' ? (
              <>
                <Form.Item label={t('networks.parent')} name="parent" rules={[{ required: true }]}>
                  <Input placeholder="eth0" />
                </Form.Item>
                <Form.Item label={t('networks.vlanId')} name="vlan_id" rules={[{ required: true }]}>
                  <InputNumber min={1} max={4094} style={{ width: '100%' }} />
                </Form.Item>
              </>
            ) : null}
          </Form.Item>
          <Form.Item label={t('networks.role')} name="role" rules={[{ required: true }]}>
            <Select options={(['wan','lan','dmz','mgmt','cluster'] as const).map(r => ({ value: r, label: r.toUpperCase() }))} />
          </Form.Item>
          <Form.Item label={t('networks.mtu')} name="mtu">
            <InputNumber min={68} max={9216} style={{ width: '100%' }} placeholder="1500" />
          </Form.Item>
          <Form.Item label={t('networks.description')} name="description">
            <Input.TextArea rows={2} />
          </Form.Item>
          <Form.Item label={t('networks.active')} name="active" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}