From 5476e84bb858a6e34501f7c0e0e52eab366781ca Mon Sep 17 00:00:00 2001
From: Debian <linux@myhorse.netcell-it.de>
Date: Sun, 24 May 2026 11:44:50 +0200
Subject: [PATCH] feat(backends): haproxy-Service-Badge im PageHeader

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

diff --git a/management-ui/src/pages/Backends/index.tsx b/management-ui/src/pages/Backends/index.tsx
index 8f4baac..3e190e8 100644
--- a/management-ui/src/pages/Backends/index.tsx
+++ b/management-ui/src/pages/Backends/index.tsx
@@ -5,7 +5,7 @@ import {
   Select, Space, Switch, Table, Tag, Tooltip, Typography, message,
 } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
-import { DatabaseOutlined, PlusOutlined } from '@ant-design/icons'
+import { CheckCircleOutlined, CloseCircleOutlined, DatabaseOutlined, PlusOutlined } from '@ant-design/icons'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import DataTable from '../../components/DataTable'
@@ -122,6 +122,15 @@ export default function BackendsPage() {
 
   const { data, isLoading } = useQuery({ queryKey: ['backends'], queryFn: listBackends })
   const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })
+  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 }>).filter(Boolean) : []
+    },
+    refetchInterval: 30_000,
+  })
+  const haproxyService = services?.find(s => s.unit === 'haproxy.service' || s.unit === 'haproxy')
   const { data: haproxyStats } = useQuery({
     queryKey: ['haproxy', 'stats'],
     queryFn: listHAProxyStats,
@@ -303,6 +312,17 @@ export default function BackendsPage() {
         icon={<DatabaseOutlined />}
         title={t('backends.title')}
         subtitle={t('backends.intro')}
+        extra={haproxyService && (
+          <Tag
+            icon={haproxyService.active ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+            color={haproxyService.active ? 'green' : 'red'}
+          >
+            <Space size={4}>
+              <span>haproxy</span>
+              <span style={{ fontWeight: 400, opacity: 0.85 }}>{haproxyService.state}</span>
+            </Space>
+          </Tag>
+        )}
       />
       <DataTable
         rowKey="id"