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

import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, 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 DataTable from '../../components/DataTable'

import apiClient, { isEnvelope } from '../../api/client'

interface Backend {
  id: number
  name: string
  scheme: string
  address: string
  port: number
  health_check_path?: string | null
  active: boolean
  created_at: string
  updated_at: string
}

interface BackendFormValues {
  name: string
  scheme: 'http' | 'https'
  address: string
  port: number
  health_check_path?: string
  active: boolean
}

async function listBackends(): Promise<Backend[]> {
  const r = await apiClient.get('/backends')
  if (!isEnvelope(r.data)) return []
  const payload = r.data.data as { backends?: Backend[] }
  return payload.backends ?? []
}

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

  const { data, isLoading } = useQuery({ queryKey: ['backends'], queryFn: listBackends })

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

  const create = useMutation({
    mutationFn: async (v: BackendFormValues) => {
      await apiClient.post('/backends', v)
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setCreating(false)
      form.resetFields()
      void qc.invalidateQueries({ queryKey: ['backends'] })
    },
  })

  const update = useMutation({
    mutationFn: async ({ id, v }: { id: number; v: BackendFormValues }) => {
      await apiClient.put(`/backends/${id}`, v)
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setEditing(null)
      form.resetFields()
      void qc.invalidateQueries({ queryKey: ['backends'] })
    },
  })

  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/backends/${id}`) },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['backends'] }) },
  })

  const columns: ColumnsType<Backend> = [
    { title: t('backends.name'), dataIndex: 'name', key: 'name' },
    { title: t('backends.scheme'), dataIndex: 'scheme', key: 'scheme' },
    {
      title: t('backends.target'), key: 'target',
      render: (_, row) => `${row.address}:${row.port}`,
    },
    { title: t('backends.healthCheck'), dataIndex: 'health_check_path', key: 'hc', render: (v?: string) => v ?? '—' },
    { title: t('backends.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => v ? t('common.yes') : t('common.no') },
    {
      title: t('backends.actions'), key: 'actions',
      render: (_, row) => (
        <Space>
          <Button size="small" onClick={() => {
            setEditing(row)
            form.setFieldsValue({
              name: row.name,
              scheme: row.scheme as 'http' | 'https',
              address: row.address,
              port: row.port,
              health_check_path: row.health_check_path ?? undefined,
              active: row.active,
            })
          }}>{t('common.edit')}</Button>
          <Popconfirm
            title={t('backends.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('backends.title')}</Typography.Title>
      <Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
        setCreating(true)
        form.resetFields()
        form.setFieldsValue({ scheme: 'http', port: 8080, active: true })
      }}>
        {t('backends.addBackend')}
      </Button>
      <DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns}  />
      <Modal
        title={editing ? t('backends.editBackend') : t('backends.addBackend')}
        open={editing !== null || creating}
        onCancel={() => { setEditing(null); setCreating(false) }}
        onOk={() => { void form.submit() }}
        confirmLoading={create.isPending || update.isPending}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={(v) => {
            if (editing) update.mutate({ id: editing.id, v })
            else create.mutate(v)
          }}
        >
          <Form.Item label={t('backends.name')} name="name" rules={[{ required: true }]}>
            <Input placeholder="upstream-app" />
          </Form.Item>
          <Form.Item label={t('backends.scheme')} name="scheme" rules={[{ required: true }]}>
            <Select options={[{ value: 'http', label: 'http' }, { value: 'https', label: 'https' }]} />
          </Form.Item>
          <Form.Item label={t('backends.address')} name="address" rules={[{ required: true }]}>
            <Input placeholder="10.0.0.10" />
          </Form.Item>
          <Form.Item label={t('backends.port')} name="port" rules={[{ required: true }]}>
            <InputNumber min={1} max={65535} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label={t('backends.healthCheck')} name="health_check_path">
            <Input placeholder="/health" />
          </Form.Item>
          <Form.Item label={t('backends.active')} name="active" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}