feat(ui): (a) Backends + Routing-Rules + Settings pages + Sidebar
CRUD-Pages analog Domains: * Backends: AntD Table + Modal-Form mit name, scheme, address, port, health_check_path, active. TanStack-Query gegen /api/v1/backends. * RoutingRules: Table mit Domain-Name- und Backend-Label-Resolution, Modal mit Select-Pickern für Domain + Backend, Path-Prefix, Priority, Active. Drei parallele Queries (rules, domains, backends) liefern die Listen. * Settings: read-only Descriptions-Cards mit /system/health und /setup/status. Editable Werte folgen später. Sidebar erweitert um Backends, Routing-Rules, Settings (mit AntD- Icons). i18n de/en für alle drei neuen Seiten. bun run build + npx tsc -b strict (0 errors). Live-Smoke gegen API: SPA-Routes /backends, /routing-rules, /settings antworten 200 mit index.html (NoRoute fallback wirkt). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Debian
159
management-ui/src/pages/Backends/index.tsx
Normal file
159
management-ui/src/pages/Backends/index.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, 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 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>
|
||||
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user