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={}
title={t('backends.title')}
subtitle={t('backends.intro')}
+ extra={haproxyService && (
+ : }
+ color={haproxyService.active ? 'green' : 'red'}
+ >
+
+ haproxy
+ {haproxyService.state}
+
+
+ )}
/>