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:
Debian
@@ -1,7 +1,8 @@
|
||||
import { Alert, Card, Descriptions, Space, Spin, Table, Tag, Typography } from 'antd'
|
||||
import { Alert, Button, Card, Descriptions, Input, Modal, Popconfirm, Space, Spin, Table, Tag, Tooltip, Typography, message } from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { ApartmentOutlined } from '@ant-design/icons'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { ApartmentOutlined, CopyOutlined, DeleteOutlined, KeyOutlined } from '@ant-design/icons'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import apiClient, { isEnvelope } from '../../api/client'
|
||||
@@ -35,6 +36,52 @@ interface ClusterStatus {
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface NodeResources {
|
||||
load_avg_1: number
|
||||
load_avg_5: number
|
||||
load_avg_15: number
|
||||
mem_used_pct: number
|
||||
mem_total_kb: number
|
||||
mem_avail_kb: number
|
||||
disk_used_pct: number
|
||||
disk_total_gb: number
|
||||
disk_free_gb: number
|
||||
conntrack_count: number
|
||||
conntrack_max: number
|
||||
uptime_sec: number
|
||||
}
|
||||
|
||||
interface PeerLoadResult {
|
||||
node_id: string
|
||||
fqdn: string
|
||||
ok: boolean
|
||||
data?: NodeResources
|
||||
error?: string
|
||||
duration_ms: number
|
||||
}
|
||||
|
||||
interface JoinTokenResponse {
|
||||
token: string
|
||||
expires_at: string
|
||||
ca_fingerprint: string
|
||||
}
|
||||
|
||||
interface CertInfo {
|
||||
common_name: string
|
||||
not_before: string
|
||||
not_after: string
|
||||
days_remaining: number
|
||||
is_ca: boolean
|
||||
serial_hex: string
|
||||
}
|
||||
|
||||
interface CertStatus {
|
||||
has_ca: boolean
|
||||
has_peer: boolean
|
||||
ca?: CertInfo
|
||||
peer?: CertInfo
|
||||
}
|
||||
|
||||
function statusTag(s: HANode['status']) {
|
||||
switch (s) {
|
||||
case 'online': return <Tag color="green">online</Tag>
|
||||
@@ -45,16 +92,30 @@ function statusTag(s: HANode['status']) {
|
||||
}
|
||||
}
|
||||
|
||||
function lastSeenRelative(iso?: string | null): string {
|
||||
function lastSeenRelative(iso: string | null | undefined, now: number): string {
|
||||
if (!iso) return '—'
|
||||
const ms = Date.now() - new Date(iso).getTime()
|
||||
const ms = now - new Date(iso).getTime()
|
||||
if (ms < 0) return '—'
|
||||
if (ms < 60_000) return `${Math.round(ms / 1000)}s`
|
||||
if (ms < 3_600_000) return `${Math.round(ms / 60_000)}m`
|
||||
return `${Math.round(ms / 3_600_000)}h`
|
||||
}
|
||||
|
||||
// useTickingNow gibt einen `now`-Wert zurück der jede Sekunde
|
||||
// re-rendert. Damit tickt das Cluster-Last-Seen-Label visuell jede
|
||||
// Sekunde, statt nur alle 30s beim useQuery-Refetch.
|
||||
function useTickingNow(intervalMs = 1000): number {
|
||||
const [now, setNow] = useState(() => Date.now())
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setNow(Date.now()), intervalMs)
|
||||
return () => clearInterval(t)
|
||||
}, [intervalMs])
|
||||
return now
|
||||
}
|
||||
|
||||
export default function ClusterPage() {
|
||||
const { t } = useTranslation()
|
||||
const now = useTickingNow()
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['cluster', 'status'],
|
||||
@@ -65,9 +126,76 @@ export default function ClusterPage() {
|
||||
refetchInterval: 30_000,
|
||||
})
|
||||
|
||||
// Phase 3.3: per-Node Load via mTLS-Aggregator. Single-node = nur die
|
||||
// eigene Zeile. Multi-Node = pro Peer eine. refetchInterval bewusst
|
||||
// langsamer als /cluster/status weil fan-out N×3s Netzwerk-Roundtrips
|
||||
// bedeuten kann.
|
||||
const loadQuery = useQuery({
|
||||
queryKey: ['cluster', 'system-load'],
|
||||
queryFn: async () => {
|
||||
const r = await apiClient.get('/cluster/system/load')
|
||||
const payload = isEnvelope(r.data) ? (r.data.data as { nodes?: PeerLoadResult[] }) : null
|
||||
return payload?.nodes ?? []
|
||||
},
|
||||
refetchInterval: 60_000,
|
||||
})
|
||||
|
||||
const certStatus = useQuery({
|
||||
queryKey: ['cluster', 'cert-status'],
|
||||
queryFn: async () => {
|
||||
const r = await apiClient.get('/cluster/cert-status')
|
||||
return isEnvelope(r.data) ? (r.data.data as CertStatus) : null
|
||||
},
|
||||
refetchInterval: 5 * 60_000,
|
||||
})
|
||||
const qc = useQueryClient()
|
||||
const removePeer = useMutation({
|
||||
mutationFn: async (id: string) => apiClient.delete(`/cluster/nodes/${id}`),
|
||||
onSuccess: () => {
|
||||
message.success(t('cluster.removePeerOk'))
|
||||
void qc.invalidateQueries({ queryKey: ['cluster'] })
|
||||
},
|
||||
onError: (e: Error) => message.error(t('cluster.removePeerFailed') + ': ' + e.message),
|
||||
})
|
||||
|
||||
const renewSelf = useMutation({
|
||||
mutationFn: async () => {
|
||||
const r = await apiClient.post('/cluster/renew-self')
|
||||
return r.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
message.success(t('cluster.certRenewedRestartHint'))
|
||||
void certStatus.refetch()
|
||||
},
|
||||
onError: (e: Error) => {
|
||||
message.error(t('cluster.certRenewFailed') + ': ' + e.message)
|
||||
},
|
||||
})
|
||||
|
||||
const [joinTokenOpen, setJoinTokenOpen] = useState(false)
|
||||
const [joinToken, setJoinToken] = useState<JoinTokenResponse | null>(null)
|
||||
const generateToken = useMutation({
|
||||
mutationFn: async () => {
|
||||
const r = await apiClient.post('/cluster/join-tokens')
|
||||
return isEnvelope(r.data) ? (r.data.data as JoinTokenResponse) : null
|
||||
},
|
||||
onSuccess: (t) => {
|
||||
setJoinToken(t)
|
||||
setJoinTokenOpen(true)
|
||||
},
|
||||
onError: () => {
|
||||
message.error(t('cluster.joinTokenFailed'))
|
||||
},
|
||||
})
|
||||
|
||||
if (isLoading) return <Spin />
|
||||
if (!data) return null
|
||||
|
||||
const primaryFqdn = data.local_node?.fqdn ?? '<primary-fqdn>'
|
||||
const joinCmd = joinToken
|
||||
? `sudo edgeguard-ctl cluster-join ${primaryFqdn} \\\n --token ${joinToken.token}`
|
||||
: ''
|
||||
|
||||
const peerColumns: ColumnsType<HANode> = [
|
||||
{
|
||||
title: t('cluster.col.node'), key: 'node',
|
||||
@@ -103,9 +231,37 @@ export default function ClusterPage() {
|
||||
{ title: t('cluster.col.version'), dataIndex: 'version', width: 100,
|
||||
render: (v?: string | null) => v ? <Tag>{v}</Tag> : <Text type="secondary">—</Text> },
|
||||
{
|
||||
title: t('cluster.col.lastSeen'), dataIndex: 'last_seen', width: 100,
|
||||
render: (v?: string | null) => (
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>{lastSeenRelative(v)}</Text>
|
||||
title: t('cluster.col.lastSeen'), dataIndex: 'last_seen', width: 110,
|
||||
render: (v: string | null | undefined, r: HANode) => {
|
||||
const rel = lastSeenRelative(v, now)
|
||||
const tipText = v ? new Date(v).toLocaleString() : t('cluster.col.lastSeen')
|
||||
const stale = r.status !== 'online'
|
||||
return (
|
||||
<Tooltip title={tipText}>
|
||||
<Text type={stale ? 'danger' : 'secondary'} style={{ fontSize: 12 }}>{rel}</Text>
|
||||
</Tooltip>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('common.actions'), key: 'actions', width: 110,
|
||||
render: (_, r) => (
|
||||
<Popconfirm
|
||||
title={t('cluster.removePeerConfirmTitle')}
|
||||
description={t('cluster.removePeerConfirmDesc', { fqdn: r.fqdn })}
|
||||
okText={t('common.yes')}
|
||||
cancelText={t('common.no')}
|
||||
okButtonProps={{ danger: true }}
|
||||
onConfirm={() => removePeer.mutate(r.id)}
|
||||
>
|
||||
<Button
|
||||
type="text" size="small" danger
|
||||
icon={<DeleteOutlined />}
|
||||
loading={removePeer.isPending && removePeer.variables === r.id}
|
||||
>
|
||||
{t('cluster.removePeerBtn')}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
),
|
||||
},
|
||||
]
|
||||
@@ -118,6 +274,13 @@ export default function ClusterPage() {
|
||||
subtitle={t('cluster.intro', { count: 1 + data.peers.length })}
|
||||
extra={
|
||||
<Space>
|
||||
<Button
|
||||
icon={<KeyOutlined />}
|
||||
loading={generateToken.isPending}
|
||||
onClick={() => generateToken.mutate()}
|
||||
>
|
||||
{t('cluster.generateJoinToken')}
|
||||
</Button>
|
||||
<Tag color={data.mode === 'cluster' ? 'blue' : 'default'}>
|
||||
{data.mode === 'cluster' ? t('cluster.modeCluster') : t('cluster.modeSingle')}
|
||||
</Tag>
|
||||
@@ -171,6 +334,13 @@ export default function ClusterPage() {
|
||||
<Descriptions.Item label={t('cluster.col.version')}>
|
||||
{data.local_node.version ? <Tag>{data.local_node.version}</Tag> : '—'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t('cluster.col.lastSeen')}>
|
||||
<Tooltip title={data.local_node.last_seen ? new Date(data.local_node.last_seen).toLocaleString() : '—'}>
|
||||
<Text type={data.local_node.status === 'online' ? 'secondary' : 'danger'} style={{ fontSize: 12 }}>
|
||||
{lastSeenRelative(data.local_node.last_seen, now)}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t('cluster.col.mgmtIp')}>
|
||||
<Text style={{ fontFamily: 'monospace' }}>
|
||||
{data.local_node.mgmt_ip || '—'}
|
||||
@@ -190,6 +360,46 @@ export default function ClusterPage() {
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{(certStatus.data?.has_ca || certStatus.data?.has_peer) && (
|
||||
<Card size="small" title={t('cluster.certCardTitle')} className="mb-16"
|
||||
extra={certStatus.data?.has_ca && (
|
||||
<Popconfirm
|
||||
title={t('cluster.renewSelfConfirm')}
|
||||
okText={t('common.yes')}
|
||||
cancelText={t('common.no')}
|
||||
onConfirm={() => renewSelf.mutate()}
|
||||
>
|
||||
<Button size="small" loading={renewSelf.isPending}>
|
||||
{t('cluster.renewSelfBtn')}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
>
|
||||
<Descriptions size="small" column={2} bordered>
|
||||
{certStatus.data.ca && (
|
||||
<>
|
||||
<Descriptions.Item label={t('cluster.certCALabel')}>
|
||||
<Text>{certStatus.data.ca.common_name}</Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t('cluster.certExpiry')}>
|
||||
<CertExpiry days={certStatus.data.ca.days_remaining} until={certStatus.data.ca.not_after} />
|
||||
</Descriptions.Item>
|
||||
</>
|
||||
)}
|
||||
{certStatus.data.peer && (
|
||||
<>
|
||||
<Descriptions.Item label={t('cluster.certPeerLabel')}>
|
||||
<Text>{certStatus.data.peer.common_name}</Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t('cluster.certExpiry')}>
|
||||
<CertExpiry days={certStatus.data.peer.days_remaining} until={certStatus.data.peer.not_after} />
|
||||
</Descriptions.Item>
|
||||
</>
|
||||
)}
|
||||
</Descriptions>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{data.peers.length > 0 && (
|
||||
<Card size="small" title={t('cluster.peersTitle', { count: data.peers.length })}>
|
||||
<Table
|
||||
@@ -201,6 +411,159 @@ export default function ClusterPage() {
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Per-Node Resources via mTLS-Aggregator (Phase 3.3). Bei
|
||||
Single-Node 1 Zeile; bei Cluster N. duration_ms zeigt welcher
|
||||
Peer langsam ist (Netzwerk-Latenz oder Last). */}
|
||||
<Card
|
||||
size="small"
|
||||
title={t('cluster.loadTitle')}
|
||||
className="mt-16"
|
||||
loading={loadQuery.isLoading}
|
||||
>
|
||||
<Table<PeerLoadResult>
|
||||
size="small"
|
||||
rowKey="node_id"
|
||||
dataSource={loadQuery.data ?? []}
|
||||
pagination={false}
|
||||
locale={{ emptyText: t('cluster.loadEmpty') }}
|
||||
columns={[
|
||||
{
|
||||
title: t('cluster.col.node'), key: 'node',
|
||||
render: (_, r) => (
|
||||
<Space>
|
||||
<Text strong>{r.fqdn || r.node_id}</Text>
|
||||
{!r.ok && <Tag color="red">{r.error || 'error'}</Tag>}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('cluster.col.load'), key: 'load', width: 110,
|
||||
render: (_, r) => r.ok && r.data
|
||||
? <Text style={{ fontFamily: 'monospace' }}>
|
||||
{r.data.load_avg_1.toFixed(2)} / {r.data.load_avg_5.toFixed(2)} / {r.data.load_avg_15.toFixed(2)}
|
||||
</Text>
|
||||
: <Text type="secondary">—</Text>,
|
||||
},
|
||||
{
|
||||
title: t('cluster.col.mem'), key: 'mem', width: 110,
|
||||
render: (_, r) => r.ok && r.data
|
||||
? <Text>{r.data.mem_used_pct.toFixed(0)}%</Text>
|
||||
: <Text type="secondary">—</Text>,
|
||||
},
|
||||
{
|
||||
title: t('cluster.col.disk'), key: 'disk', width: 110,
|
||||
render: (_, r) => r.ok && r.data
|
||||
? <Text>{r.data.disk_used_pct.toFixed(0)}%</Text>
|
||||
: <Text type="secondary">—</Text>,
|
||||
},
|
||||
{
|
||||
title: t('cluster.col.conntrack'), key: 'ct', width: 130,
|
||||
render: (_, r) => r.ok && r.data
|
||||
? <Text style={{ fontFamily: 'monospace', fontSize: 12 }}>
|
||||
{r.data.conntrack_count}/{r.data.conntrack_max}
|
||||
</Text>
|
||||
: <Text type="secondary">—</Text>,
|
||||
},
|
||||
{
|
||||
title: t('cluster.col.uptime'), key: 'up', width: 100,
|
||||
render: (_, r) => r.ok && r.data
|
||||
? <Text type="secondary" style={{ fontSize: 12 }}>{formatUptime(r.data.uptime_sec)}</Text>
|
||||
: <Text type="secondary">—</Text>,
|
||||
},
|
||||
{
|
||||
title: t('cluster.col.fetchMs'), key: 'ms', width: 80,
|
||||
render: (_, r) => (
|
||||
<Text type="secondary" style={{ fontSize: 11 }}>{r.duration_ms}ms</Text>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={t('cluster.joinTokenTitle')}
|
||||
open={joinTokenOpen}
|
||||
onCancel={() => setJoinTokenOpen(false)}
|
||||
footer={<Button onClick={() => setJoinTokenOpen(false)}>{t('common.close')}</Button>}
|
||||
width={720}
|
||||
>
|
||||
{joinToken ? (
|
||||
<Space direction="vertical" size={12} style={{ width: '100%' }}>
|
||||
<Alert
|
||||
type="warning"
|
||||
showIcon
|
||||
message={t('cluster.joinTokenOneShot')}
|
||||
description={t('cluster.joinTokenOneShotDesc', {
|
||||
expires: new Date(joinToken.expires_at).toLocaleString(),
|
||||
})}
|
||||
/>
|
||||
<Descriptions size="small" column={1} bordered>
|
||||
<Descriptions.Item label="Token">
|
||||
<Input.TextArea
|
||||
value={joinToken.token}
|
||||
readOnly
|
||||
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||
style={{ fontFamily: 'monospace', fontSize: 11 }}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="CA-Fingerprint">
|
||||
<Text code>{joinToken.ca_fingerprint}</Text>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<div>
|
||||
<Text strong>{t('cluster.joinCmdLabel')}</Text>
|
||||
<Input.TextArea
|
||||
value={joinCmd}
|
||||
readOnly
|
||||
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||
style={{ fontFamily: 'monospace', fontSize: 12, marginTop: 6 }}
|
||||
/>
|
||||
<Button
|
||||
icon={<CopyOutlined />}
|
||||
size="small"
|
||||
style={{ marginTop: 6 }}
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(joinCmd)
|
||||
message.success(t('common.copied'))
|
||||
}}
|
||||
>
|
||||
{t('common.copy')}
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
) : null}
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// CertExpiry rendert "<n> Tage" mit Farbcode: rot < 30, orange < 90,
|
||||
// grün sonst. Tooltip zeigt das absolute NotAfter-Datum.
|
||||
function CertExpiry({ days, until }: { days: number; until: string }) {
|
||||
let color: string | undefined
|
||||
if (days < 0) color = '#cf1322' // already expired
|
||||
else if (days < 30) color = '#cf1322' // critical
|
||||
else if (days < 90) color = '#d4651a' // warning
|
||||
else color = '#52c41a' // healthy
|
||||
const label = days < 0 ? `abgelaufen vor ${-days} Tagen` : `${days} Tage`
|
||||
return (
|
||||
<Tooltip title={new Date(until).toLocaleString()}>
|
||||
<Tag color={color === '#52c41a' ? 'green' : color === '#d4651a' ? 'orange' : 'red'}>
|
||||
{label}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
// formatUptime liefert "Xd Yh" oder "Xh Ym" oder "Xm" — kompakter als
|
||||
// die Sekunden-Zahl.
|
||||
function formatUptime(sec: number): string {
|
||||
if (!sec || sec < 0) return '—'
|
||||
const d = Math.floor(sec / 86400)
|
||||
const h = Math.floor((sec % 86400) / 3600)
|
||||
const m = Math.floor((sec % 3600) / 60)
|
||||
if (d > 0) return `${d}d ${h}h`
|
||||
if (h > 0) return `${h}h ${m}m`
|
||||
return `${m}m`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user