Add dashboard name configuration

cmd/traefik/traefik.go

@@ -231,6 +231,7 @@ func setupServer(staticConfiguration *static.Configuration) (*server.Server, err
 
 	if staticConfiguration.API != nil {
 		version.DisableDashboardAd = staticConfiguration.API.DisableDashboardAd
+		version.DashboardName = staticConfiguration.API.DashboardName
 	}
 
 	// Plugins

docs/content/reference/install-configuration/configuration-options.md

@@ -40,6 +40,7 @@ THIS FILE MUST NOT BE EDITED BY HAND
 | <a id="opt-api" href="#opt-api" title="#opt-api">api</a> | Enable api/dashboard. | false |
 | <a id="opt-api-basepath" href="#opt-api-basepath" title="#opt-api-basepath">api.basepath</a> | Defines the base path where the API and Dashboard will be exposed. | / |
 | <a id="opt-api-dashboard" href="#opt-api-dashboard" title="#opt-api-dashboard">api.dashboard</a> | Activate dashboard. | true |
+| <a id="opt-api-dashboardname" href="#opt-api-dashboardname" title="#opt-api-dashboardname">api.dashboardname</a> | Custom name for the dashboard. | |
 | <a id="opt-api-debug" href="#opt-api-debug" title="#opt-api-debug">api.debug</a> | Enable additional endpoints for debugging and profiling. | false |
 | <a id="opt-api-disabledashboardad" href="#opt-api-disabledashboardad" title="#opt-api-disabledashboardad">api.disabledashboardad</a> | Disable ad in the dashboard. | false |
 | <a id="opt-api-insecure" href="#opt-api-insecure" title="#opt-api-insecure">api.insecure</a> | Activate API directly on the entryPoint named traefik. | false |

pkg/config/static/static_config.go

@@ -159,6 +159,7 @@ type API struct {
 	Dashboard          bool   `description:"Activate dashboard." json:"dashboard,omitempty" toml:"dashboard,omitempty" yaml:"dashboard,omitempty" export:"true"`
 	Debug              bool   `description:"Enable additional endpoints for debugging and profiling." json:"debug,omitempty" toml:"debug,omitempty" yaml:"debug,omitempty" export:"true"`
 	DisableDashboardAd bool   `description:"Disable ad in the dashboard." json:"disableDashboardAd,omitempty" toml:"disableDashboardAd,omitempty" yaml:"disableDashboardAd,omitempty" export:"true"`
+	DashboardName      string `description:"Custom name for the dashboard." json:"dashboardName,omitempty" toml:"dashboardName,omitempty" yaml:"dashboardName,omitempty" export:"true"`
 	// TODO: Re-enable statistics
 	// Statistics      *types.Statistics `description:"Enable more detailed statistics." json:"statistics,omitempty" toml:"statistics,omitempty" yaml:"statistics,omitempty" label:"allowEmpty" file:"allowEmpty" export:"true"`
 }
@@ -167,6 +168,7 @@ type API struct {
 func (a *API) SetDefaults() {
 	a.BasePath = "/"
 	a.Dashboard = true
+	a.DashboardName = ""
 }
 
 // RespondingTimeouts contains timeout configurations for incoming requests to the Traefik instance.

pkg/version/version.go

@@ -24,6 +24,8 @@ var (
 	StartDate = time.Now()
 	// DisableDashboardAd disables ad in the dashboard.
 	DisableDashboardAd = false
+	// DashboardName holds the custom name for the dashboard.
+	DashboardName = ""
 )
 
 // Handler expose version routes.
@@ -43,11 +45,13 @@ func (v Handler) Append(router *mux.Router) {
 				StartDate          time.Time `json:"startDate"`
 				UUID               string    `json:"uuid,omitempty"`
 				DisableDashboardAd bool      `json:"disableDashboardAd,omitempty"`
+				DashboardName      string    `json:"dashboardName,omitempty"`
 			}{
 				Version:            Version,
 				Codename:           Codename,
 				StartDate:          StartDate,
 				DisableDashboardAd: DisableDashboardAd,
+				DashboardName:      DashboardName,
 			}
 
 			if err := templatesRenderer.JSON(response, http.StatusOK, v); err != nil {

webui/src/components/middlewares/MiddlewareDetail.tsx

@@ -1,6 +1,5 @@
 import { Card, Flex, H1, Skeleton, Text } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 
 import MiddlewareDefinition from './MiddlewareDefinition'
 import { RenderUnknownProp } from './RenderUnknownProp'
@@ -8,6 +7,7 @@ import { RenderUnknownProp } from './RenderUnknownProp'
 import { DetailsCardSkeleton } from 'components/resources/DetailsCard'
 import ResourceErrors, { ResourceErrorsSkeleton } from 'components/resources/ResourceErrors'
 import { UsedByRoutersSection, UsedByRoutersSkeleton } from 'components/resources/UsedByRoutersSection'
+import PageTitle from 'layout/PageTitle'
 import { NotFound } from 'pages/NotFound'
 
 type MiddlewareDetailProps = {
@@ -42,9 +42,7 @@ export const MiddlewareDetail = ({ data, error, name, protocol }: MiddlewareDeta
   if (error) {
     return (
       <>
-        <Helmet>
+        <PageTitle title={data?.name || name} />
-          <title>{name} - Traefik Proxy</title>
-        </Helmet>
         <Text data-testid="error-text">
           Sorry, we could not fetch detail information for this Middleware right now. Please, try again later.
         </Text>
@@ -55,9 +53,7 @@ export const MiddlewareDetail = ({ data, error, name, protocol }: MiddlewareDeta
   if (!data) {
     return (
       <>
-        <Helmet>
+        <PageTitle title={name} />
-          <title>{name} - Traefik Proxy</title>
-        </Helmet>
         <Skeleton css={{ height: '$7', width: '320px', mb: '$7' }} data-testid="skeleton" />
         <Flex direction="column" gap={6}>
           <DetailsCardSkeleton />
@@ -74,9 +70,7 @@ export const MiddlewareDetail = ({ data, error, name, protocol }: MiddlewareDeta
 
   return (
     <>
-      <Helmet>
+      <PageTitle title={data.name} />
-        <title>{data.name} - Traefik Proxy</title>
-      </Helmet>
       <H1 css={{ mb: '$7' }}>{data.name}</H1>
       <Flex direction="column" gap={6}>
         <MiddlewareDefinition data={data} testId="middleware-card" />

webui/src/components/routers/RouterDetail.tsx

@@ -1,11 +1,11 @@
 import { Flex, H1, Skeleton, Text } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 
 import { DetailsCardSkeleton } from 'components/resources/DetailsCard'
 import ResourceErrors, { ResourceErrorsSkeleton } from 'components/resources/ResourceErrors'
 import RouterFlowDiagram, { RouterFlowDiagramSkeleton } from 'components/routers/RouterFlowDiagram'
 import TlsSection from 'components/routers/TlsSection'
+import PageTitle from 'layout/PageTitle'
 import { NotFound } from 'pages/NotFound'
 
 type RouterDetailProps = {
@@ -21,9 +21,7 @@ export const RouterDetail = ({ data, error, name, protocol }: RouterDetailProps)
   if (error) {
     return (
       <>
-        <Helmet>
+        <PageTitle title={data?.name || name} />
-          <title>{name} - Traefik Proxy</title>
-        </Helmet>
         <Text data-testid="error-text">
           Sorry, we could not fetch detail information for this Router right now. Please, try again later.
         </Text>
@@ -34,9 +32,7 @@ export const RouterDetail = ({ data, error, name, protocol }: RouterDetailProps)
   if (!data) {
     return (
       <>
-        <Helmet>
+        <PageTitle title={name} />
-          <title>{name} - Traefik Proxy</title>
-        </Helmet>
         <Skeleton css={{ height: '$7', width: '320px', mb: '$7' }} data-testid="skeleton" />
         <Flex direction="column" gap={6}>
           <RouterFlowDiagramSkeleton />
@@ -53,9 +49,7 @@ export const RouterDetail = ({ data, error, name, protocol }: RouterDetailProps)
 
   return (
     <>
-      <Helmet>
+      <PageTitle title={data.name} />
-        <title>{data.name} - Traefik Proxy</title>
-      </Helmet>
       <H1 css={{ mb: '$7' }}>{data.name}</H1>
       <Flex direction="column" gap={6}>
         <RouterFlowDiagram data={data} protocol={protocol} />

webui/src/components/services/ServiceDetail.tsx

@@ -1,5 +1,4 @@
 import { Box, Flex, H1, Skeleton, Text } from '@traefiklabs/faency'
-import { Helmet } from 'react-helmet-async'
 
 import MirrorServices from './MirrorServices'
 import Servers from './Servers'
@@ -10,6 +9,7 @@ import WeightedServices from './WeightedServices'
 import { DetailsCardSkeleton } from 'components/resources/DetailsCard'
 import { UsedByRoutersSection, UsedByRoutersSkeleton } from 'components/resources/UsedByRoutersSection'
 import AriaTableSkeleton from 'components/tables/AriaTableSkeleton'
+import PageTitle from 'layout/PageTitle'
 import { NotFound } from 'pages/NotFound'
 
 type ServiceDetailProps = {
@@ -23,9 +23,7 @@ export const ServiceDetail = ({ data, error, name, protocol }: ServiceDetailProp
   if (error) {
     return (
       <>
-        <Helmet>
+        <PageTitle title={data?.name || name} />
-          <title>{name} - Traefik Proxy</title>
-        </Helmet>
         <Text data-testid="error-text">
           Sorry, we could not fetch detail information for this Service right now. Please, try again later.
         </Text>
@@ -36,9 +34,7 @@ export const ServiceDetail = ({ data, error, name, protocol }: ServiceDetailProp
   if (!data) {
     return (
       <>
-        <Helmet>
+        <PageTitle title={name} />
-          <title>{name} - Traefik Proxy</title>
-        </Helmet>
         <Skeleton css={{ height: '$7', width: '320px', mb: '$7' }} data-testid="skeleton" />
         <Flex direction="column" gap={4}>
           <DetailsCardSkeleton />
@@ -65,9 +61,7 @@ export const ServiceDetail = ({ data, error, name, protocol }: ServiceDetailProp
 
   return (
     <>
-      <Helmet>
+      <PageTitle title={data.name} />
-        <title>{data.name} - Traefik Proxy</title>
-      </Helmet>
       <H1 css={{ mb: '$7' }}>{data.name}</H1>
       <Flex direction="column" gap={6}>
         <ServiceDefinition data={data} testId="service-details" />

webui/src/contexts/version.tsx

@@ -5,11 +5,13 @@ import { BASE_PATH } from 'libs/utils'
 type VersionContextProps = {
   showHubButton: boolean
   version: string
+  dashboardName: string
 }
 
 export const VersionContext = createContext<VersionContextProps>({
   showHubButton: false,
   version: '',
+  dashboardName: '',
 })
 
 type VersionProviderProps = {
@@ -19,6 +21,7 @@ type VersionProviderProps = {
 export const VersionProvider = ({ children }: VersionProviderProps) => {
   const [showHubButton, setShowHubButton] = useState(false)
   const [version, setVersion] = useState('')
+  const [dashboardName, setDashboardName] = useState('')
 
   useEffect(() => {
     const fetchVersion = async () => {
@@ -30,6 +33,7 @@ export const VersionProvider = ({ children }: VersionProviderProps) => {
         const data: API.Version = await response.json()
         setShowHubButton(!data.disableDashboardAd)
         setVersion(data.Version)
+        setDashboardName(data.dashboardName || '')
       } catch (err) {
         console.error(err)
       }
@@ -38,5 +42,5 @@ export const VersionProvider = ({ children }: VersionProviderProps) => {
     fetchVersion()
   }, [])
 
-  return <VersionContext.Provider value={{ showHubButton, version }}>{children}</VersionContext.Provider>
+  return <VersionContext.Provider value={{ showHubButton, version, dashboardName }}>{children}</VersionContext.Provider>
 }

webui/src/hooks/use-hub-upgrade-button.spec.tsx

@@ -12,7 +12,9 @@ const mockVerifySignature = vi.mocked(verifySignature)
 
 const createWrapper = (showHubButton: boolean) => {
   return ({ children }: { children: ReactNode }) => (
-    <VersionContext.Provider value={{ showHubButton, version: '1.0.0' }}>{children}</VersionContext.Provider>
+    <VersionContext.Provider value={{ showHubButton, version: '1.0.0', dashboardName: '' }}>
+      {children}
+    </VersionContext.Provider>
   )
 }
 

webui/src/layout/Page.tsx

@@ -1,9 +1,9 @@
 import { Flex, globalCss, styled } from '@traefiklabs/faency'
 import { ReactNode, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
 import Container from './Container'
+import PageTitle from './PageTitle'
 
 import { ToastPool } from 'components/ToastPool'
 import { ToastProvider } from 'contexts/toasts'
@@ -64,9 +64,7 @@ const Page = ({ children }: Props) => {
   return (
     <ToastProvider>
       {globalStyles()}
-      <Helmet>
+      <PageTitle />
-        <title>Traefik Proxy</title>
-      </Helmet>
       <Flex>
         <SideBarPanel isOpen={isSideBarPanelOpen} onOpenChange={setIsSideBarPanelOpen} />
         <SideNav isExpanded={isSideBarPanelOpen} onSidePanelToggle={() => setIsSideBarPanelOpen(true)} isResponsive />

webui/src/layout/PageTitle.spec.tsx

@@ -0,0 +1,48 @@
+import { waitFor } from '@testing-library/react'
+
+import PageTitle from './PageTitle'
+
+import { VersionContext } from 'contexts/version'
+import { renderWithProviders } from 'utils/test'
+
+describe('<PageTitle />', () => {
+  it('should render default title without page title or dashboard name', async () => {
+    renderWithProviders(<PageTitle />)
+
+    await waitFor(() => {
+      expect(document.title).toBe('Traefik Proxy')
+    })
+  })
+
+  it('should render with page title', async () => {
+    renderWithProviders(<PageTitle title="Dashboard" />)
+
+    await waitFor(() => {
+      expect(document.title).toBe('Dashboard - Traefik Proxy')
+    })
+  })
+
+  it('should render with dashboard name', async () => {
+    renderWithProviders(
+      <VersionContext.Provider value={{ showHubButton: false, version: '', dashboardName: 'MyDashboard' }}>
+        <PageTitle />
+      </VersionContext.Provider>,
+    )
+
+    await waitFor(() => {
+      expect(document.title).toBe('Traefik Proxy [MyDashboard]')
+    })
+  })
+
+  it('should render with page title and dashboard name', async () => {
+    renderWithProviders(
+      <VersionContext.Provider value={{ showHubButton: false, version: '', dashboardName: 'MyDashboard' }}>
+        <PageTitle title="Dashboard" />
+      </VersionContext.Provider>,
+    )
+
+    await waitFor(() => {
+      expect(document.title).toBe('Dashboard - Traefik Proxy [MyDashboard]')
+    })
+  })
+})

webui/src/layout/PageTitle.tsx

@@ -0,0 +1,21 @@
+import { useContext, useMemo } from 'react'
+import { Helmet } from 'react-helmet-async'
+
+import { VersionContext } from 'contexts/version'
+
+const PageTitle = ({ title }: { title?: string }) => {
+  const { dashboardName } = useContext(VersionContext)
+
+  const pageTitle = useMemo(
+    () => `${title ? `${title} - ` : ''}Traefik Proxy${dashboardName ? ` [${dashboardName}]` : ''}`,
+    [dashboardName, title],
+  )
+
+  return (
+    <Helmet>
+      <title>{pageTitle}</title>
+    </Helmet>
+  )
+}
+
+export default PageTitle

webui/src/mocks/data/api-version.json

@@ -2,5 +2,6 @@
   "Version": "3.6.0",
   "Codename": "ramequin",
   "disableDashboardAd": false,
-  "startDate": "2025-03-28T14:58:25.8937758+01:00"
+  "startDate": "2025-03-28T14:58:25.8937758+01:00",
-}
+  "dashboardName": "Pre-prod"
+}

webui/src/pages/NotFound.tsx

@@ -1,15 +1,14 @@
 import { Box, Button, Flex, H1, Text } from '@traefiklabs/faency'
-import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
+import PageTitle from 'layout/PageTitle'
+
 export const NotFound = () => {
   const navigate = useNavigate()
 
   return (
     <Flex css={{ flexDirection: 'column', alignItems: 'center', p: '$6' }} data-testid="Not found page">
-      <Helmet>
+      <PageTitle title="Not found" />
-        <title>Not found - Traefik Proxy</title>
-      </Helmet>
       <Box>
         <H1 style={{ fontSize: '80px', lineHeight: '120px' }}>404</H1>
       </Box>

webui/src/pages/dashboard/Dashboard.tsx

@@ -1,12 +1,12 @@
 import { Card, CSS, Flex, Grid, H2, Text } from '@traefiklabs/faency'
 import { ReactNode, useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useSWR from 'swr'
 
 import ProviderIcon from 'components/icons/providers'
 import FeatureCard, { FeatureCardSkeleton } from 'components/resources/FeatureCard'
 import ResourceCard from 'components/resources/ResourceCard'
 import TraefikResourceStatsCard, { StatsCardSkeleton } from 'components/resources/TraefikResourceStatsCard'
+import PageTitle from 'layout/PageTitle'
 import { capitalizeFirstLetter } from 'utils/string'
 
 const RESOURCES = ['routers', 'services', 'middlewares']
@@ -77,9 +77,7 @@ export const Dashboard = () => {
 
   return (
     <Flex direction="column" gap={6}>
-      <Helmet>
+      <PageTitle title="Dashboard" />
-        <title>Dashboard - Traefik Proxy</title>
-      </Helmet>
       <SectionContainer title="Entrypoints" css={{ mt: 0 }}>
         {entrypoints?.map((i, idx) => (
           <ResourceCard

webui/src/pages/http/HttpMiddlewares.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Flex } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -14,6 +13,7 @@ import { searchParamsToState, TableFilter } from 'components/tables/TableFilter'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 import { parseMiddlewareType } from 'libs/parsers'
 
 export const makeRowRender = (): RenderRowType => {
@@ -99,9 +99,7 @@ export const HttpMiddlewares = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="HTTP Middlewares" />
-        <title>HTTP Middlewares - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <HttpMiddlewaresRender
         error={error}

webui/src/pages/http/HttpRouters.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Box, Flex } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -17,6 +16,7 @@ import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 
 export const makeRowRender = (protocol = 'http'): RenderRowType => {
   const HttpRoutersRenderRow = (row) => (
@@ -132,9 +132,7 @@ export const HttpRouters = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="HTTP Routers" />
-        <title>HTTP Routers - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <HttpRoutersRender
         error={error}

webui/src/pages/http/HttpServices.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Flex, Text } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -14,6 +13,7 @@ import { searchParamsToState, TableFilter } from 'components/tables/TableFilter'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 
 export const makeRowRender = (): RenderRowType => {
   const HttpServicesRenderRow = (row) => (
@@ -98,9 +98,7 @@ export const HttpServices = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="HTTP Services" />
-        <title>HTTP Services - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <HttpServicesRender
         error={error}

webui/src/pages/tcp/TcpMiddlewares.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Flex } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -14,6 +13,7 @@ import { searchParamsToState, TableFilter } from 'components/tables/TableFilter'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 import { parseMiddlewareType } from 'libs/parsers'
 
 export const makeRowRender = (): RenderRowType => {
@@ -99,9 +99,7 @@ export const TcpMiddlewares = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="TCP Middlewares" />
-        <title>TCP Middlewares - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <TcpMiddlewaresRender
         error={error}

webui/src/pages/tcp/TcpRouters.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Box, Flex } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -17,6 +16,7 @@ import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 
 export const makeRowRender = (): RenderRowType => {
   const TcpRoutersRenderRow = (row) => (
@@ -117,9 +117,7 @@ export const TcpRouters = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="TCP Routers" />
-        <title>TCP Routers - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <TcpRoutersRender
         error={error}

webui/src/pages/tcp/TcpServices.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Flex, Text } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -14,6 +13,7 @@ import { searchParamsToState, TableFilter } from 'components/tables/TableFilter'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 
 export const makeRowRender = (): RenderRowType => {
   const TcpServicesRenderRow = (row) => (
@@ -98,9 +98,7 @@ export const TcpServices = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="TCP Services" />
-        <title>TCP Services - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <TcpServicesRender
         error={error}

webui/src/pages/udp/UdpRouters.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Flex } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -15,6 +14,7 @@ import { searchParamsToState, TableFilter } from 'components/tables/TableFilter'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 
 export const makeRowRender = (): RenderRowType => {
   const UdpRoutersRenderRow = (row) => (
@@ -101,9 +101,7 @@ export const UdpRouters = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="UDP Routers" />
-        <title>UDP Routers - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <UdpRoutersRender
         error={error}

webui/src/pages/udp/UdpServices.tsx

@@ -1,6 +1,5 @@
 import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Flex, Text } from '@traefiklabs/faency'
 import { useMemo } from 'react'
-import { Helmet } from 'react-helmet-async'
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { useSearchParams } from 'react-router-dom'
 
@@ -14,6 +13,7 @@ import { searchParamsToState, TableFilter } from 'components/tables/TableFilter'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
 import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
+import PageTitle from 'layout/PageTitle'
 
 export const makeRowRender = (): RenderRowType => {
   const UdpServicesRenderRow = (row) => (
@@ -98,9 +98,7 @@ export const UdpServices = () => {
 
   return (
     <>
-      <Helmet>
+      <PageTitle title="UDP Services" />
-        <title>UDP Services - Traefik Proxy</title>
-      </Helmet>
       <TableFilter />
       <UdpServicesRender
         error={error}

webui/src/types/API.d.ts

@@ -4,5 +4,6 @@ namespace API {
     Version: string
     disableDashboardAd: boolean
     startDate: string
+    dashboardName?: string
   }
 }