feat: umfangreiches UI+API-Polish (v1.1.36–1.1.42)
Backend: - Audit-Log: Search-Endpoint mit ILIKE-Filter (actor/action/subject/date) - NTP: /ntp/status via chronyc tracking (Stratum, Offset, Quelle) - System: /service-restart mit Allowlist (haproxy/squid/unbound/chrony/scheduler) - Domain-Response-Headers + Rate-Limit (Migration 0024) - Join-Tokens (Migration 0025), Cluster-mTLS, Aggregator-Fan-Out - apt-Service für Update-Banner (apt-get update + Versionsprüfung) - Backup-Retry mit exponential backoff (retry_apt 3×) - publish.sh fail-fast + cleanup-old.sh (max 10 Versionen) Frontend: - Audit-Log-Page (/audit) mit Filter + Pagination - ErrorBoundary an React-Root + Vite build-target festgenagelt (iOS 15+) - Storage-Schema-Stamp: auto-wipe bei Versions-Mismatch (blank-page-Fix) - EmptyState-Komponente überall ausgerollt - SSL: Aggregate-Karte (total/expiring/expired/errors) - Backups: Aggregate-Karte (letzter Backup/Größe/Fehlschläge 24h) + Backup-Now - NTP: Sync-Status-Karte (chronyc tracking live) - Domains: Backend-UP/DOWN-Chip aus HAProxy-Stats - Backends: HAProxy-Status-Spalte (UP/DEGRADED/DOWN) - Settings: Service-Neustart-Karte (haproxy/squid/unbound/chrony/scheduler) - Settings: Upgrade-Status-Card, Wartungsmodus, Auto-Update, Retention - Dashboard: Recent-Alerts, Cluster-Health, License-Chip, Onboarding-Hint - System-Regeln im Firewall als eigener Tab Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,14 +1,15 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Alert, Button, Form, Input, InputNumber, Modal, Select, Space, Switch, Tabs, Tag, Typography, message,
|
||||
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 { ClockCircleOutlined, DatabaseOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'
|
||||
import { ClockCircleOutlined, DatabaseOutlined, PlusOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import apiClient, { isEnvelope } from '../../api/client'
|
||||
import DataTable from '../../components/DataTable'
|
||||
import EmptyState from '../../components/EmptyState'
|
||||
import PageHeader from '../../components/PageHeader'
|
||||
import ActionButtons from '../../components/ActionButtons'
|
||||
import StatusDot from '../../components/StatusDot'
|
||||
@@ -46,6 +47,24 @@ interface SystemIface {
|
||||
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 []
|
||||
@@ -63,6 +82,12 @@ async function listSystemInterfaces(): Promise<SystemIface[]> {
|
||||
|
||||
export default function NTPPage() {
|
||||
const { t } = useTranslation()
|
||||
const { data: ntpStatus, refetch: refetchStatus } = useQuery({
|
||||
queryKey: ['ntp', 'status'],
|
||||
queryFn: fetchNTPStatus,
|
||||
refetchInterval: 30_000,
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
@@ -70,6 +95,58 @@ export default function NTPPage() {
|
||||
title={t('ntp.title')}
|
||||
subtitle={t('ntp.intro')}
|
||||
/>
|
||||
|
||||
<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={[
|
||||
@@ -141,6 +218,11 @@ function PoolsTab() {
|
||||
},
|
||||
]
|
||||
|
||||
const openCreate = () => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({ kind: 'pool', iburst: true, prefer: false, active: true } as Pool)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable
|
||||
@@ -149,13 +231,22 @@ function PoolsTab() {
|
||||
dataSource={data ?? []}
|
||||
columns={cols}
|
||||
extraActions={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({ kind: 'pool', iburst: true, prefer: false, active: true } as Pool)
|
||||
}}>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
|
||||
{t('ntp.pool.add')}
|
||||
</Button>
|
||||
}
|
||||
emptyContent={
|
||||
<EmptyState
|
||||
icon={<ClockCircleOutlined />}
|
||||
title={t('ntp.pool.emptyTitle')}
|
||||
description={t('ntp.pool.emptyDesc')}
|
||||
action={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
|
||||
{t('ntp.pool.add')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
|
||||
Reference in New Issue
Block a user