ac068bc9dd
Backend: POST /dns/flush-cache (unbound-control flush_zone .)
POST /ntp/force-sync (chronyc makestep)
Beide werden im Audit-Log festgehalten.
UI: Schaltflächen in DNS-Settings und NTP-Settings neben Save,
mit Tooltip-Beschreibung + i18n (de+en).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
452 lines
16 KiB
TypeScript
452 lines
16 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
Alert, Button, Card, Col, Form, Input, InputNumber, Modal, Row, Select, Space, Statistic, Switch, Tabs, Tag, Tooltip, Typography, message,
|
|
} from 'antd'
|
|
import type { ColumnsType } from 'antd/es/table'
|
|
import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, DatabaseOutlined, PlusOutlined, ReloadOutlined, SettingOutlined, ThunderboltOutlined } from '@ant-design/icons'
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import apiClient, { isEnvelope } from '../../api/client'
|
|
import { useAuthStore } from '../../stores/auth'
|
|
import DataTable from '../../components/DataTable'
|
|
import EmptyState from '../../components/EmptyState'
|
|
import PageHeader from '../../components/PageHeader'
|
|
import ActionButtons from '../../components/ActionButtons'
|
|
|
|
const { Text } = Typography
|
|
|
|
interface Pool {
|
|
id: number
|
|
kind: 'pool' | 'server'
|
|
address: string
|
|
iburst: boolean
|
|
prefer: boolean
|
|
minpoll?: number | null
|
|
maxpoll?: number | null
|
|
active: boolean
|
|
description?: string | null
|
|
}
|
|
|
|
interface Settings {
|
|
listen_addresses: string
|
|
allow_acl: string
|
|
serve_clients: boolean
|
|
makestep_secs: number
|
|
makestep_limit: number
|
|
rtcsync: boolean
|
|
leapsectz?: string | null
|
|
}
|
|
|
|
interface SettingsForm extends Omit<Settings, 'listen_addresses'> {
|
|
listen_addresses: string[]
|
|
}
|
|
|
|
interface SystemIface {
|
|
ifname: string
|
|
addr_info?: Array<{ family: 'inet' | 'inet6'; local: string; prefixlen: number }>
|
|
}
|
|
|
|
interface NTPStatus {
|
|
synced: boolean
|
|
reference?: string
|
|
stratum?: number
|
|
offset_ms?: number
|
|
freq_ppm?: number
|
|
rms_offset_ms?: number
|
|
error?: string
|
|
}
|
|
|
|
async function fetchNTPStatus(): Promise<NTPStatus | null> {
|
|
try {
|
|
const r = await apiClient.get('/ntp/status')
|
|
if (!isEnvelope(r.data)) return null
|
|
return r.data.data as NTPStatus
|
|
} catch { return null }
|
|
}
|
|
|
|
async function listPools(): Promise<Pool[]> {
|
|
const r = await apiClient.get('/ntp/pools')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { pools?: Pool[] }).pools ?? []
|
|
}
|
|
async function getSettings(): Promise<Settings | null> {
|
|
const r = await apiClient.get('/ntp/settings')
|
|
return isEnvelope(r.data) ? (r.data.data as Settings) : null
|
|
}
|
|
async function listSystemInterfaces(): Promise<SystemIface[]> {
|
|
const r = await apiClient.get('/system/interfaces')
|
|
if (!isEnvelope(r.data)) return []
|
|
return (r.data.data as { interfaces?: SystemIface[] }).interfaces ?? []
|
|
}
|
|
|
|
export default function NTPPage() {
|
|
const { t } = useTranslation()
|
|
const { data: ntpStatus, refetch: refetchStatus } = useQuery({
|
|
queryKey: ['ntp', 'status'],
|
|
queryFn: fetchNTPStatus,
|
|
refetchInterval: 30_000,
|
|
})
|
|
const { data: services } = useQuery({
|
|
queryKey: ['system', 'services'],
|
|
queryFn: async () => {
|
|
const r = await apiClient.get('/system/services')
|
|
return isEnvelope(r.data) ? (r.data.data as Array<{ unit: string; active: boolean; state: string }>) : []
|
|
},
|
|
refetchInterval: 30_000,
|
|
})
|
|
const chrony = services?.find(s => s.unit === 'chrony' || s.unit === 'chronyd')
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
icon={<ClockCircleOutlined />}
|
|
title={t('ntp.title')}
|
|
subtitle={t('ntp.intro')}
|
|
extra={chrony && (
|
|
<Tag
|
|
icon={chrony.active ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
|
|
color={chrony.active ? 'green' : 'red'}
|
|
>
|
|
<Space size={4}>
|
|
<span>chrony</span>
|
|
<span style={{ fontWeight: 400, opacity: 0.85 }}>{chrony.state}</span>
|
|
</Space>
|
|
</Tag>
|
|
)}
|
|
/>
|
|
|
|
<Card
|
|
size="small"
|
|
className="mb-12"
|
|
title={<><ClockCircleOutlined /> {t('ntp.statusCard.title')}</>}
|
|
extra={<Button size="small" icon={<ReloadOutlined />} onClick={() => refetchStatus()}>{t('common.refresh')}</Button>}
|
|
>
|
|
{ntpStatus?.error ? (
|
|
<Alert type="warning" showIcon message={ntpStatus.error} />
|
|
) : ntpStatus ? (
|
|
<Row gutter={12}>
|
|
<Col xs={12} sm={6}>
|
|
<Statistic
|
|
title={t('ntp.statusCard.sync')}
|
|
value={ntpStatus.synced ? t('ntp.statusCard.synced') : t('ntp.statusCard.notSynced')}
|
|
valueStyle={{ color: ntpStatus.synced ? '#16a34a' : '#cf1322', fontSize: 14 }}
|
|
/>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Statistic
|
|
title={t('ntp.statusCard.source')}
|
|
value={ntpStatus.reference || '—'}
|
|
valueStyle={{ fontSize: 13, fontFamily: 'monospace' }}
|
|
/>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Statistic
|
|
title={t('ntp.statusCard.stratum')}
|
|
value={ntpStatus.stratum ?? '—'}
|
|
/>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Tooltip title={t('ntp.statusCard.offsetHint')}>
|
|
<Statistic
|
|
title={t('ntp.statusCard.offset')}
|
|
value={ntpStatus.offset_ms != null
|
|
? (ntpStatus.offset_ms >= 0 ? '+' : '') + ntpStatus.offset_ms.toFixed(3) + ' ms'
|
|
: '—'}
|
|
valueStyle={{
|
|
fontSize: 13,
|
|
color: ntpStatus.offset_ms != null && Math.abs(ntpStatus.offset_ms) > 100
|
|
? '#d48806' : undefined,
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</Col>
|
|
</Row>
|
|
) : (
|
|
<Typography.Text type="secondary">{t('ntp.statusCard.loading')}</Typography.Text>
|
|
)}
|
|
</Card>
|
|
|
|
<Tabs
|
|
defaultActiveKey="pools"
|
|
items={[
|
|
{ key: 'pools', label: <span><DatabaseOutlined /> {t('ntp.tabs.pools')}</span>, children: <PoolsTab /> },
|
|
{ key: 'settings', label: <span><SettingOutlined /> {t('ntp.tabs.settings')}</span>, children: <SettingsTab /> },
|
|
]}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function PoolsTab() {
|
|
const { t } = useTranslation()
|
|
const qc = useQueryClient()
|
|
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
|
|
const { data, isLoading } = useQuery({ queryKey: ['ntp', 'pools'], queryFn: listPools })
|
|
|
|
const [editing, setEditing] = useState<Pool | null>(null)
|
|
const [creating, setCreating] = useState(false)
|
|
const [form] = Form.useForm<Pool>()
|
|
|
|
const upsert = useMutation({
|
|
mutationFn: async (v: Pool) => {
|
|
if (editing) return (await apiClient.put(`/ntp/pools/${editing.id}`, v)).data
|
|
return (await apiClient.post('/ntp/pools', v)).data
|
|
},
|
|
onSuccess: () => {
|
|
message.success(t('common.save'))
|
|
setEditing(null); setCreating(false); form.resetFields()
|
|
void qc.invalidateQueries({ queryKey: ['ntp', 'pools'] })
|
|
},
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
const del = useMutation({
|
|
mutationFn: async (id: number) => { await apiClient.delete(`/ntp/pools/${id}`) },
|
|
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ntp', 'pools'] }) },
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
const quickToggle = useMutation({
|
|
mutationFn: async ({ id, row, checked }: { id: number; row: Pool; checked: boolean }) => {
|
|
const { id: _id, ...body } = row
|
|
await apiClient.put(`/ntp/pools/${id}`, { ...body, active: checked })
|
|
},
|
|
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ntp', 'pools'] }) },
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
|
|
const cols: ColumnsType<Pool> = [
|
|
{ title: t('ntp.pool.kind'), dataIndex: 'kind', key: 'kind',
|
|
render: (s: string) => <Tag color={s === 'pool' ? 'blue' : 'purple'}>{s}</Tag> },
|
|
{ title: t('ntp.pool.address'), dataIndex: 'address', key: 'address',
|
|
render: (s: string) => <code>{s}</code> },
|
|
{ title: t('ntp.pool.options'), key: 'options',
|
|
render: (_, row) => (
|
|
<Space size={4}>
|
|
{row.iburst && <Tag>iburst</Tag>}
|
|
{row.prefer && <Tag color="gold">prefer</Tag>}
|
|
{row.minpoll != null && <Text type="secondary">minpoll {row.minpoll}</Text>}
|
|
{row.maxpoll != null && <Text type="secondary">maxpoll {row.maxpoll}</Text>}
|
|
</Space>
|
|
) },
|
|
{ title: t('ntp.pool.description'), dataIndex: 'description', key: 'description',
|
|
render: (v?: string | null) => v ?? '—' },
|
|
{
|
|
title: t('common.active'), dataIndex: 'active', key: 'active', width: 80,
|
|
render: (v: boolean, row: Pool) => (
|
|
<Switch
|
|
size="small"
|
|
checked={v}
|
|
disabled={isViewer}
|
|
loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
|
|
onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
title: t('common.actions'), key: 'actions',
|
|
render: (_, row) => (
|
|
<ActionButtons
|
|
onEdit={() => {
|
|
setEditing(row)
|
|
form.setFieldsValue(row)
|
|
}}
|
|
onDelete={() => del.mutate(row.id)}
|
|
deleteConfirm={t('ntp.pool.deleteConfirm', { addr: row.address })}
|
|
/>
|
|
),
|
|
},
|
|
]
|
|
|
|
const openCreate = () => {
|
|
setCreating(true); form.resetFields()
|
|
form.setFieldsValue({ kind: 'pool', iburst: true, prefer: false, active: true } as Pool)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<DataTable
|
|
rowKey="id"
|
|
loading={isLoading}
|
|
dataSource={data ?? []}
|
|
columns={cols}
|
|
extraActions={
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
|
|
<Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
|
|
{t('ntp.pool.add')}
|
|
</Button>
|
|
</Tooltip>
|
|
}
|
|
emptyContent={
|
|
<EmptyState
|
|
icon={<ClockCircleOutlined />}
|
|
title={t('ntp.pool.emptyTitle')}
|
|
description={t('ntp.pool.emptyDesc')}
|
|
action={
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
|
|
<Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
|
|
{t('ntp.pool.add')}
|
|
</Button>
|
|
</Tooltip>
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<Modal
|
|
title={editing ? t('ntp.pool.edit') : t('ntp.pool.add')}
|
|
open={editing !== null || creating}
|
|
onCancel={() => { setEditing(null); setCreating(false); form.resetFields() }}
|
|
onOk={() => { void form.submit() }}
|
|
confirmLoading={upsert.isPending}
|
|
width={580}
|
|
destroyOnClose
|
|
>
|
|
<Form form={form} layout="vertical" onFinish={(v) => upsert.mutate(v)}>
|
|
<Form.Item label={t('ntp.pool.kind')} name="kind" rules={[{ required: true }]}>
|
|
<Select options={[
|
|
{ value: 'pool', label: t('ntp.pool.kindPool') },
|
|
{ value: 'server', label: t('ntp.pool.kindServer') },
|
|
]} />
|
|
</Form.Item>
|
|
<Form.Item label={t('ntp.pool.address')} name="address" rules={[{ required: true }]}
|
|
extra={t('ntp.pool.addressExtra')}>
|
|
<Input placeholder={t('ntp.pool.addressPlaceholder')} />
|
|
</Form.Item>
|
|
<Space>
|
|
<Form.Item label={t('ntp.pool.iburst')} name="iburst" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item label={t('ntp.pool.prefer')} name="prefer" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
</Space>
|
|
<Space>
|
|
<Form.Item label={t('ntp.pool.minpoll')} name="minpoll">
|
|
<InputNumber min={0} max={17} style={{ width: 100 }} />
|
|
</Form.Item>
|
|
<Form.Item label={t('ntp.pool.maxpoll')} name="maxpoll">
|
|
<InputNumber min={0} max={17} style={{ width: 100 }} />
|
|
</Form.Item>
|
|
</Space>
|
|
<Form.Item label={t('ntp.pool.description')} name="description">
|
|
<Input.TextArea rows={2} />
|
|
</Form.Item>
|
|
<Form.Item label={t('common.active')} name="active" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function SettingsTab() {
|
|
const { t } = useTranslation()
|
|
const qc = useQueryClient()
|
|
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
|
|
const { data, isLoading } = useQuery({ queryKey: ['ntp', 'settings'], queryFn: getSettings })
|
|
const { data: sys } = useQuery({ queryKey: ['system', 'interfaces'], queryFn: listSystemInterfaces })
|
|
const [form] = Form.useForm<SettingsForm>()
|
|
|
|
const ipOptions: { value: string; label: string }[] = [
|
|
{ value: '0.0.0.0', label: `0.0.0.0 — ${t('dns.settings.allIPv4')}` },
|
|
{ value: '::', label: `:: — ${t('dns.settings.allIPv6')}` },
|
|
{ value: '127.0.0.1', label: `127.0.0.1 — ${t('dns.settings.loopback')} IPv4` },
|
|
{ value: '::1', label: `::1 — ${t('dns.settings.loopback')} IPv6` },
|
|
]
|
|
for (const i of sys ?? []) {
|
|
if (i.ifname === 'lo') continue
|
|
for (const a of i.addr_info ?? []) {
|
|
ipOptions.push({
|
|
value: a.local,
|
|
label: `${a.local} — ${i.ifname} (${a.family === 'inet' ? 'IPv4' : 'IPv6'})`,
|
|
})
|
|
}
|
|
}
|
|
|
|
const initial: SettingsForm | undefined = data ? {
|
|
...data,
|
|
listen_addresses: data.listen_addresses.split(',').map(s => s.trim()).filter(Boolean),
|
|
} : undefined
|
|
|
|
const save = useMutation({
|
|
mutationFn: async (v: SettingsForm) => {
|
|
const body: Settings = { ...v, listen_addresses: v.listen_addresses.join(', ') }
|
|
return (await apiClient.put('/ntp/settings', body)).data
|
|
},
|
|
onSuccess: () => {
|
|
message.success(t('common.save'))
|
|
void qc.invalidateQueries({ queryKey: ['ntp', 'settings'] })
|
|
},
|
|
onError: (e: Error) => message.error(e.message),
|
|
})
|
|
|
|
const forceSync = useMutation({
|
|
mutationFn: async () => { await apiClient.post('/ntp/force-sync') },
|
|
onSuccess: () => message.success(t('ntp.settings.forceSyncOk')),
|
|
onError: (e: Error) => message.error(t('ntp.settings.forceSyncFailed') + ': ' + e.message),
|
|
})
|
|
|
|
if (isLoading) return null
|
|
return (
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
initialValues={initial}
|
|
onFinish={(v) => save.mutate(v)}
|
|
style={{ maxWidth: 720 }}
|
|
>
|
|
<Alert type="info" showIcon className="mb-12" message={t('ntp.settings.intro')} />
|
|
<Form.Item label={t('ntp.settings.serveClients')} name="serve_clients" valuePropName="checked"
|
|
extra={t('ntp.settings.serveClientsExtra')}>
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item label={t('ntp.settings.listenAddresses')} name="listen_addresses"
|
|
rules={[{ required: true, type: 'array', min: 1 }]}
|
|
extra={t('ntp.settings.listenAddressesExtra')}>
|
|
<Select mode="tags" options={ipOptions} showSearch optionFilterProp="value"
|
|
placeholder={t('ntp.settings.listenAddressesPlaceholder')} />
|
|
</Form.Item>
|
|
<Form.Item label={t('ntp.settings.allowACL')} name="allow_acl" rules={[{ required: true }]}
|
|
extra={t('ntp.settings.allowACLExtra')}>
|
|
<Input placeholder="127.0.0.0/8, 10.0.0.0/8" />
|
|
</Form.Item>
|
|
<Space>
|
|
<Form.Item label={t('ntp.settings.makestepSecs')} name="makestep_secs"
|
|
extra={t('ntp.settings.makestepSecsExtra')}>
|
|
<InputNumber min={0} step={0.1} style={{ width: 120 }} />
|
|
</Form.Item>
|
|
<Form.Item label={t('ntp.settings.makestepLimit')} name="makestep_limit">
|
|
<InputNumber min={-1} max={100} style={{ width: 120 }} />
|
|
</Form.Item>
|
|
</Space>
|
|
<Form.Item label={t('ntp.settings.rtcsync')} name="rtcsync" valuePropName="checked"
|
|
extra={t('ntp.settings.rtcsyncExtra')}>
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item label={t('ntp.settings.leapsectz')} name="leapsectz"
|
|
extra={t('ntp.settings.leapsectzExtra')}>
|
|
<Input placeholder="right/UTC" allowClear />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Space>
|
|
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
|
|
<Button type="primary" htmlType="submit" disabled={isViewer} loading={save.isPending}>
|
|
{t('common.save')}
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip title={t('ntp.settings.forceSyncTooltip')}>
|
|
<Button
|
|
icon={<ThunderboltOutlined />}
|
|
loading={forceSync.isPending}
|
|
onClick={() => forceSync.mutate()}
|
|
>
|
|
{t('ntp.settings.forceSyncBtn')}
|
|
</Button>
|
|
</Tooltip>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
)
|
|
}
|