From 1913a69bb5ca4481e1f1b8f86b89c6ea5319032c Mon Sep 17 00:00:00 2001
From: Debian <linux@myhorse.netcell-it.de>
Date: Sun, 24 May 2026 11:45:39 +0200
Subject: [PATCH] feat(ntp): chrony-Service-Badge im PageHeader

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 management-ui/src/pages/NTP/index.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/management-ui/src/pages/NTP/index.tsx b/management-ui/src/pages/NTP/index.tsx
index 86ad0ce..3fa290d 100644
--- a/management-ui/src/pages/NTP/index.tsx
+++ b/management-ui/src/pages/NTP/index.tsx
@@ -3,7 +3,7 @@ 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 { ClockCircleOutlined, DatabaseOutlined, PlusOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons'
+import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, DatabaseOutlined, PlusOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
@@ -86,6 +86,15 @@ export default function NTPPage() {
     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>
@@ -93,6 +102,17 @@ export default function NTPPage() {
         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