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>
|
||||
)
|
||||
}
|
||||
172
management-ui/src/pages/RoutingRules/index.tsx
Normal file
172
management-ui/src/pages/RoutingRules/index.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
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 RoutingRule {
|
||||
id: number
|
||||
domain_id: number
|
||||
path_prefix: string
|
||||
backend_id: number
|
||||
priority: number
|
||||
active: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface RuleFormValues {
|
||||
domain_id: number
|
||||
path_prefix: string
|
||||
backend_id: number
|
||||
priority: number
|
||||
active: boolean
|
||||
}
|
||||
|
||||
interface Domain { id: number; name: string }
|
||||
interface Backend { id: number; name: string; address: string; port: number }
|
||||
|
||||
async function listRules(): Promise<RoutingRule[]> {
|
||||
const r = await apiClient.get('/routing-rules')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { routing_rules?: RoutingRule[] }).routing_rules ?? []
|
||||
}
|
||||
async function listDomains(): Promise<Domain[]> {
|
||||
const r = await apiClient.get('/domains')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { domains?: Domain[] }).domains ?? []
|
||||
}
|
||||
async function listBackends(): Promise<Backend[]> {
|
||||
const r = await apiClient.get('/backends')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { backends?: Backend[] }).backends ?? []
|
||||
}
|
||||
|
||||
export default function RoutingRulesPage() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
|
||||
const { data: rules, isLoading } = useQuery({ queryKey: ['routing-rules'], queryFn: listRules })
|
||||
const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })
|
||||
const { data: backends } = useQuery({ queryKey: ['backends'], queryFn: listBackends })
|
||||
|
||||
const domainName = (id: number) => domains?.find((d) => d.id === id)?.name ?? `#${id}`
|
||||
const backendLabel = (id: number) => {
|
||||
const b = backends?.find((x) => x.id === id)
|
||||
return b ? `${b.name} (${b.address}:${b.port})` : `#${id}`
|
||||
}
|
||||
|
||||
const [editing, setEditing] = useState<RoutingRule | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<RuleFormValues>()
|
||||
|
||||
const create = useMutation({
|
||||
mutationFn: async (v: RuleFormValues) => { await apiClient.post('/routing-rules', v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setCreating(false)
|
||||
form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['routing-rules'] })
|
||||
},
|
||||
})
|
||||
const update = useMutation({
|
||||
mutationFn: async ({ id, v }: { id: number; v: RuleFormValues }) => {
|
||||
await apiClient.put(`/routing-rules/${id}`, v)
|
||||
},
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setEditing(null)
|
||||
form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['routing-rules'] })
|
||||
},
|
||||
})
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/routing-rules/${id}`) },
|
||||
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['routing-rules'] }) },
|
||||
})
|
||||
|
||||
const columns: ColumnsType<RoutingRule> = [
|
||||
{ title: t('routing.domain'), dataIndex: 'domain_id', key: 'domain', render: (id: number) => domainName(id) },
|
||||
{ title: t('routing.pathPrefix'), dataIndex: 'path_prefix', key: 'path' },
|
||||
{ title: t('routing.backend'), dataIndex: 'backend_id', key: 'backend', render: (id: number) => backendLabel(id) },
|
||||
{ title: t('routing.priority'), dataIndex: 'priority', key: 'priority' },
|
||||
{ title: t('routing.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => v ? t('common.yes') : t('common.no') },
|
||||
{
|
||||
title: t('routing.actions'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
domain_id: row.domain_id,
|
||||
path_prefix: row.path_prefix,
|
||||
backend_id: row.backend_id,
|
||||
priority: row.priority,
|
||||
active: row.active,
|
||||
})
|
||||
}}>{t('common.edit')}</Button>
|
||||
<Popconfirm
|
||||
title={t('routing.deleteConfirm')}
|
||||
onConfirm={() => del.mutate(row.id)}
|
||||
>
|
||||
<Button size="small" danger>{t('common.delete')}</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title level={3}>{t('routing.title')}</Typography.Title>
|
||||
<Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
|
||||
setCreating(true)
|
||||
form.resetFields()
|
||||
form.setFieldsValue({ priority: 100, path_prefix: '/', active: true })
|
||||
}}>
|
||||
{t('routing.addRule')}
|
||||
</Button>
|
||||
<Table rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} pagination={false} />
|
||||
<Modal
|
||||
title={editing ? t('routing.editRule') : t('routing.addRule')}
|
||||
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('routing.domain')} name="domain_id" rules={[{ required: true }]}>
|
||||
<Select
|
||||
options={(domains ?? []).map((d) => ({ value: d.id, label: d.name }))}
|
||||
placeholder={t('routing.selectDomain')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routing.pathPrefix')} name="path_prefix" rules={[{ required: true }]}>
|
||||
<Input placeholder="/" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routing.backend')} name="backend_id" rules={[{ required: true }]}>
|
||||
<Select
|
||||
options={(backends ?? []).map((b) => ({ value: b.id, label: `${b.name} (${b.address}:${b.port})` }))}
|
||||
placeholder={t('routing.selectBackend')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routing.priority')} name="priority" rules={[{ required: true }]}>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routing.active')} name="active" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
66
management-ui/src/pages/Settings/index.tsx
Normal file
66
management-ui/src/pages/Settings/index.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Card, Descriptions, Spin, Typography } from 'antd'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import apiClient, { isEnvelope } from '../../api/client'
|
||||
|
||||
interface SetupStatus {
|
||||
completed: boolean
|
||||
admin_email: string
|
||||
fqdn: string
|
||||
}
|
||||
|
||||
interface SystemHealth {
|
||||
status: string
|
||||
version: string
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { data: setupStatus, isLoading: loadingSetup } = useQuery({
|
||||
queryKey: ['setup', 'status'],
|
||||
queryFn: async () => {
|
||||
const r = await apiClient.get('/setup/status')
|
||||
if (isEnvelope(r.data)) return r.data.data as SetupStatus
|
||||
return null
|
||||
},
|
||||
})
|
||||
|
||||
const { data: health, isLoading: loadingHealth } = useQuery({
|
||||
queryKey: ['system', 'health'],
|
||||
queryFn: async () => {
|
||||
const r = await apiClient.get('/system/health')
|
||||
if (isEnvelope(r.data)) return r.data.data as SystemHealth
|
||||
return null
|
||||
},
|
||||
})
|
||||
|
||||
if (loadingSetup || loadingHealth) {
|
||||
return <Spin />
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title level={3}>{t('settings.title')}</Typography.Title>
|
||||
<Typography.Paragraph type="secondary">{t('settings.intro')}</Typography.Paragraph>
|
||||
|
||||
<Card title={t('settings.systemInfo')} style={{ marginBottom: 16 }}>
|
||||
<Descriptions column={1}>
|
||||
<Descriptions.Item label={t('settings.version')}>{health?.version ?? '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label={t('settings.status')}>{health?.status ?? '—'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
<Card title={t('settings.setupInfo')}>
|
||||
<Descriptions column={1}>
|
||||
<Descriptions.Item label={t('settings.adminEmail')}>{setupStatus?.admin_email ?? '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label={t('settings.fqdn')}>{setupStatus?.fqdn ?? '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label={t('settings.setupCompleted')}>
|
||||
{setupStatus?.completed ? t('common.yes') : t('common.no')}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user