homelab/traefik
1
0
Fork 0
Code Activity

Add Traefik Hub demo in dashboard

Browse source
This commit is contained in:
Gina A. 2025-10-27 17:40:06 +01:00 • committed by GitHub
parent 10be359327
commit db4f262916
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 2481 additions and 622 deletions
Download patch file Download diff file Expand all files Collapse all files

5
webui/src/pages/tcp/TcpMiddleware.spec.tsx
View file

@ -7,6 +7,7 @@ describe('<TcpMiddlewarePage />', () => {
it('should render the error message', () => {
const { getByTestId } = renderWithProviders(
<TcpMiddlewareRender name="mock-middleware" data={undefined} error={new Error('Test error')} />,
{ route: '/tcp/middlewares/mock-middleware', withPage: true },
)
expect(getByTestId('error-text')).toBeInTheDocument()
})
@ -14,6 +15,7 @@ describe('<TcpMiddlewarePage />', () => {
it('should render the skeleton', () => {
const { getByTestId } = renderWithProviders(
<TcpMiddlewareRender name="mock-middleware" data={undefined} error={undefined} />,
{ route: '/tcp/middlewares/mock-middleware', withPage: true },
)
expect(getByTestId('skeleton')).toBeInTheDocument()
})
@ -21,6 +23,7 @@ describe('<TcpMiddlewarePage />', () => {
it('should render the not found page', () => {
const { getByTestId } = renderWithProviders(
<TcpMiddlewareRender name="mock-middleware" data={{} as ResourceDetailDataType} error={undefined} />,
{ route: '/tcp/middlewares/mock-middleware', withPage: true },
)
expect(getByTestId('Not found page')).toBeInTheDocument()
})
@ -53,6 +56,7 @@ describe('<TcpMiddlewarePage />', () => {
const { container, getByTestId } = renderWithProviders(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<TcpMiddlewareRender name="mock-middleware" data={mockData as any} error={undefined} />,
{ route: '/tcp/middlewares/middleware-simple', withPage: true },
)
const headings = Array.from(container.getElementsByTagName('h1'))
@ -103,6 +107,7 @@ describe('<TcpMiddlewarePage />', () => {
const { container, getByTestId } = renderWithProviders(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<TcpMiddlewareRender name="mock-middleware" data={mockData as any} error={undefined} />,
{ route: '/tcp/middlewares/middleware-complex', withPage: true },
)
const headings = Array.from(container.getElementsByTagName('h1'))

23
webui/src/pages/tcp/TcpMiddleware.tsx
View file

@ -1,11 +1,11 @@
import { Card, Box, H1, Skeleton, styled, Text } from '@traefiklabs/faency'
import { Helmet } from 'react-helmet-async'
import { useParams } from 'react-router-dom'
import { DetailSectionSkeleton } from 'components/resources/DetailSections'
import { RenderMiddleware } from 'components/resources/MiddlewarePanel'
import { UsedByRoutersSection, UsedByRoutersSkeleton } from 'components/resources/UsedByRoutersSection'
import { ResourceDetailDataType, useResourceDetail } from 'hooks/use-resource-detail'
import Page from 'layout/Page'
import { NotFound } from 'pages/NotFound'
import breakpoints from 'utils/breakpoints'
@ -27,23 +27,29 @@ type TcpMiddlewareRenderProps = {
export const TcpMiddlewareRender = ({ data, error, name }: TcpMiddlewareRenderProps) => {
if (error) {
return (
<Page title={name}>
<>
<Helmet>
<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>
</Page>
</>
)
}
if (!data) {
return (
<Page title={name}>
<>
<Helmet>
<title>{name} - Traefik Proxy</title>
</Helmet>
<Skeleton css={{ height: '$7', width: '320px', mb: '$4' }} data-testid="skeleton" />
<MiddlewareGrid>
<DetailSectionSkeleton />
</MiddlewareGrid>
<UsedByRoutersSkeleton />
</Page>
</>
)
}
@ -52,7 +58,10 @@ export const TcpMiddlewareRender = ({ data, error, name }: TcpMiddlewareRenderPr
}
return (
<Page title={name}>
<>
<Helmet>
<title>{data.name} - Traefik Proxy</title>
</Helmet>
<H1 css={{ mb: '$7' }}>{data.name}</H1>
<MiddlewareGrid>
<Card css={{ padding: '$5' }} data-testid="middleware-card">
@ -60,7 +69,7 @@ export const TcpMiddlewareRender = ({ data, error, name }: TcpMiddlewareRenderPr
</Card>
</MiddlewareGrid>
<UsedByRoutersSection data-testid="routers-table" data={data} protocol="tcp" />
</Page>
</>
)
}

8
webui/src/pages/tcp/TcpMiddlewares.spec.tsx
View file

@ -29,10 +29,13 @@ describe('<TcpMiddlewaresPage />', () => {
.spyOn(useFetchWithPagination, 'default')
.mockImplementation(() => useFetchWithPaginationMock({ pages }))
const { container, getByTestId } = renderWithProviders(<TcpMiddlewaresPage />)
const { container, getByTestId } = renderWithProviders(<TcpMiddlewaresPage />, {
route: '/tcp/middlewares',
withPage: true,
})
expect(mock).toHaveBeenCalled()
expect(getByTestId('TCP Middlewares page')).toBeInTheDocument()
expect(getByTestId('/tcp/middlewares page')).toBeInTheDocument()
const tbody = container.querySelectorAll('div[role="table"] > div[role="rowgroup"]')[1]
expect(tbody.querySelectorAll('a[role="row"]')).toHaveLength(2)
@ -58,6 +61,7 @@ describe('<TcpMiddlewaresPage />', () => {
pageCount={1}
pages={[]}
/>,
{ route: '/tcp/middlewares', withPage: true },
)
expect(() => getByTestId('loading')).toThrow('Unable to find an element by: [data-testid="loading"]')
const tfoot = container.querySelectorAll('div[role="table"] > div[role="rowgroup"]')[2]

9
webui/src/pages/tcp/TcpMiddlewares.tsx
View file

@ -1,5 +1,6 @@
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'
@ -14,7 +15,6 @@ import Tooltip from 'components/Tooltip'
import TooltipText from 'components/TooltipText'
import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
import Page from 'layout/Page'
import { parseMiddlewareType } from 'libs/parsers'
export const makeRowRender = (): RenderRowType => {
@ -109,7 +109,10 @@ export const TcpMiddlewares = () => {
)
return (
<Page title="TCP Middlewares">
<>
<Helmet>
<title>TCP Middlewares - Traefik Proxy</title>
</Helmet>
<TableFilter />
<TcpMiddlewaresRender
error={error}
@ -120,6 +123,6 @@ export const TcpMiddlewares = () => {
pageCount={pageCount}
pages={pages}
/>
</Page>
</>
)
}

4
webui/src/pages/tcp/TcpRouter.spec.tsx
View file

@ -7,6 +7,7 @@ describe('<TcpRouterPage />', () => {
it('should render the error message', () => {
const { getByTestId } = renderWithProviders(
<TcpRouterRender name="mock-router" data={undefined} error={new Error('Test error')} />,
{ route: '/tcp/routers/mock-router', withPage: true },
)
expect(getByTestId('error-text')).toBeInTheDocument()
})
@ -14,6 +15,7 @@ describe('<TcpRouterPage />', () => {
it('should render the skeleton', () => {
const { getByTestId } = renderWithProviders(
<TcpRouterRender name="mock-router" data={undefined} error={undefined} />,
{ route: '/tcp/routers/mock-router', withPage: true },
)
expect(getByTestId('skeleton')).toBeInTheDocument()
})
@ -21,6 +23,7 @@ describe('<TcpRouterPage />', () => {
it('should render the not found page', () => {
const { getByTestId } = renderWithProviders(
<TcpRouterRender name="mock-router" data={{} as ResourceDetailDataType} error={undefined} />,
{ route: '/tcp/routers/mock-router', withPage: true },
)
expect(getByTestId('Not found page')).toBeInTheDocument()
})
@ -66,6 +69,7 @@ describe('<TcpRouterPage />', () => {
const { getByTestId } = renderWithProviders(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<TcpRouterRender name="mock-router" data={mockData as any} error={undefined} />,
{ route: '/tcp/routers/tcp-all@docker', withPage: true },
)
const routerStructure = getByTestId('router-structure')

23
webui/src/pages/tcp/TcpRouter.tsx
View file

@ -1,4 +1,5 @@
import { Flex, styled, Text } from '@traefiklabs/faency'
import { Helmet } from 'react-helmet-async'
import { useParams } from 'react-router-dom'
import { CardListSection, DetailSectionSkeleton } from 'components/resources/DetailSections'
@ -6,7 +7,6 @@ import MiddlewarePanel from 'components/resources/MiddlewarePanel'
import RouterPanel from 'components/resources/RouterPanel'
import TlsPanel from 'components/resources/TlsPanel'
import { ResourceDetailDataType, useResourceDetail } from 'hooks/use-resource-detail'
import Page from 'layout/Page'
import { RouterStructure } from 'pages/http/HttpRouter'
import { NotFound } from 'pages/NotFound'
@ -37,17 +37,23 @@ type TcpRouterRenderProps = {
export const TcpRouterRender = ({ data, error, name }: TcpRouterRenderProps) => {
if (error) {
return (
<Page title={name}>
<>
<Helmet>
<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>
</Page>
</>
)
}
if (!data) {
return (
<Page title={name}>
<>
<Helmet>
<title>{name} - Traefik Proxy</title>
</Helmet>
<Flex css={{ flexDirection: 'row', mb: '70px' }} data-testid="skeleton">
<CardListSection bigDescription />
<CardListSection />
@ -57,7 +63,7 @@ export const TcpRouterRender = ({ data, error, name }: TcpRouterRenderProps) =>
<DetailSectionSkeleton />
<DetailSectionSkeleton />
</SpacedColumns>
</Page>
</>
)
}
@ -66,10 +72,13 @@ export const TcpRouterRender = ({ data, error, name }: TcpRouterRenderProps) =>
}
return (
<Page title={name}>
<>
<Helmet>
<title>{data.name} - Traefik Proxy</title>
</Helmet>
<RouterStructure data={data} protocol="tcp" />
<RouterDetail data={data} />
</Page>
</>
)
}

8
webui/src/pages/tcp/TcpRouters.spec.tsx
View file

@ -39,10 +39,13 @@ describe('<TcpRoutersPage />', () => {
.spyOn(useFetchWithPagination, 'default')
.mockImplementation(() => useFetchWithPaginationMock({ pages }))
const { container, getByTestId } = renderWithProviders(<TcpRoutersPage />)
const { container, getByTestId } = renderWithProviders(<TcpRoutersPage />, {
route: '/tcp/routers',
withPage: true,
})
expect(mock).toHaveBeenCalled()
expect(getByTestId('TCP Routers page')).toBeInTheDocument()
expect(getByTestId('/tcp/routers page')).toBeInTheDocument()
const tbody = container.querySelectorAll('div[role="table"] > div[role="rowgroup"]')[1]
expect(tbody.querySelectorAll('a[role="row"]')).toHaveLength(3)
@ -76,6 +79,7 @@ describe('<TcpRoutersPage />', () => {
pageCount={1}
pages={[]}
/>,
{ route: '/tcp/routers', withPage: true },
)
expect(() => getByTestId('loading')).toThrow('Unable to find an element by: [data-testid="loading"]')
const tfoot = container.querySelectorAll('div[role="table"] > div[role="rowgroup"]')[2]

9
webui/src/pages/tcp/TcpRouters.tsx
View file

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

6
webui/src/pages/tcp/TcpService.spec.tsx
View file

@ -7,6 +7,7 @@ describe('<TcpServicePage />', () => {
it('should render the error message', () => {
const { getByTestId } = renderWithProviders(
<TcpServiceRender name="mock-service" data={undefined} error={new Error('Test error')} />,
{ route: '/tcp/services/mock-service', withPage: true },
)
expect(getByTestId('error-text')).toBeInTheDocument()
})
@ -14,6 +15,7 @@ describe('<TcpServicePage />', () => {
it('should render the skeleton', () => {
const { getByTestId } = renderWithProviders(
<TcpServiceRender name="mock-service" data={undefined} error={undefined} />,
{ route: '/tcp/services/mock-service', withPage: true },
)
expect(getByTestId('skeleton')).toBeInTheDocument()
})
@ -21,6 +23,7 @@ describe('<TcpServicePage />', () => {
it('should render the not found page', () => {
const { getByTestId } = renderWithProviders(
<TcpServiceRender name="mock-service" data={{} as ResourceDetailDataType} error={undefined} />,
{ route: '/tcp/services/mock-service', withPage: true },
)
expect(getByTestId('Not found page')).toBeInTheDocument()
})
@ -69,6 +72,7 @@ describe('<TcpServicePage />', () => {
const { container, getByTestId } = renderWithProviders(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<TcpServiceRender name="mock-service" data={mockData as any} error={undefined} />,
{ route: '/tcp/services/mock-service', withPage: true },
)
const headings = Array.from(container.getElementsByTagName('h1'))
@ -150,6 +154,7 @@ describe('<TcpServicePage />', () => {
const { getByTestId } = renderWithProviders(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<TcpServiceRender name="mock-service" data={mockData as any} error={undefined} />,
{ route: '/tcp/services/mock-service', withPage: true },
)
const serversList = getByTestId('tcp-servers-list')
@ -176,6 +181,7 @@ describe('<TcpServicePage />', () => {
const { getByTestId } = renderWithProviders(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<TcpServiceRender name="mock-service" data={mockData as any} error={undefined} />,
{ route: '/tcp/services/mock-service', withPage: true },
)
expect(() => {

23
webui/src/pages/tcp/TcpService.tsx
View file

@ -1,5 +1,6 @@
import { Box, Flex, H1, Skeleton, styled, Text } from '@traefiklabs/faency'
import { useMemo } from 'react'
import { Helmet } from 'react-helmet-async'
import { FiGlobe, FiInfo, FiShield } from 'react-icons/fi'
import { useParams } from 'react-router-dom'
@ -16,7 +17,6 @@ import { ResourceStatus } from 'components/resources/ResourceStatus'
import { UsedByRoutersSection, UsedByRoutersSkeleton } from 'components/resources/UsedByRoutersSection'
import Tooltip from 'components/Tooltip'
import { ResourceDetailDataType, ServiceDetailType, useResourceDetail } from 'hooks/use-resource-detail'
import Page from 'layout/Page'
import { NotFound } from 'pages/NotFound'
type TcpDetailProps = {
@ -238,17 +238,23 @@ type TcpServiceRenderProps = {
export const TcpServiceRender = ({ data, error, name }: TcpServiceRenderProps) => {
if (error) {
return (
<Page title={name}>
<>
<Helmet>
<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>
</Page>
</>
)
}
if (!data) {
return (
<Page title={name}>
<>
<Helmet>
<title>{name} - Traefik Proxy</title>
</Helmet>
<Skeleton css={{ height: '$7', width: '320px', mb: '$8' }} data-testid="skeleton" />
<SpacedColumns>
<DetailSectionSkeleton narrow />
@ -256,7 +262,7 @@ export const TcpServiceRender = ({ data, error, name }: TcpServiceRenderProps) =
<DetailSectionSkeleton narrow />
</SpacedColumns>
<UsedByRoutersSkeleton />
</Page>
</>
)
}
@ -265,11 +271,14 @@ export const TcpServiceRender = ({ data, error, name }: TcpServiceRenderProps) =
}
return (
<Page title={name}>
<>
<Helmet>
<title>{data.name} - Traefik Proxy</title>
</Helmet>
<H1 css={{ mb: '$7' }}>{data.name}</H1>
<TcpServicePanels data={data} />
<UsedByRoutersSection data={data} protocol="tcp" />
</Page>
</>
)
}

8
webui/src/pages/tcp/TcpServices.spec.tsx
View file

@ -36,10 +36,13 @@ describe('<TcpServicesPage />', () => {
.spyOn(useFetchWithPagination, 'default')
.mockImplementation(() => useFetchWithPaginationMock({ pages }))
const { container, getByTestId } = renderWithProviders(<TcpServicesPage />)
const { container, getByTestId } = renderWithProviders(<TcpServicesPage />, {
route: '/tcp/services',
withPage: true,
})
expect(mock).toHaveBeenCalled()
expect(getByTestId('TCP Services page')).toBeInTheDocument()
expect(getByTestId('/tcp/services page')).toBeInTheDocument()
const tbody = container.querySelectorAll('div[role="table"] > div[role="rowgroup"]')[1]
expect(tbody.querySelectorAll('a[role="row"]')).toHaveLength(3)
@ -73,6 +76,7 @@ describe('<TcpServicesPage />', () => {
pageCount={1}
pages={[]}
/>,
{ route: '/tcp/services', withPage: true },
)
expect(() => getByTestId('loading')).toThrow('Unable to find an element by: [data-testid="loading"]')
const tfoot = container.querySelectorAll('div[role="table"] > div[role="rowgroup"]')[2]

9
webui/src/pages/tcp/TcpServices.tsx
View file

@ -1,5 +1,6 @@
import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Box, 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,7 +15,6 @@ import Tooltip from 'components/Tooltip'
import TooltipText from 'components/TooltipText'
import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
import Page from 'layout/Page'
export const makeRowRender = (): RenderRowType => {
const TcpServicesRenderRow = (row) => (
@ -108,7 +108,10 @@ export const TcpServices = () => {
)
return (
<Page title="TCP Services">
<>
<Helmet>
<title>TCP Services - Traefik Proxy</title>
</Helmet>
<TableFilter />
<TcpServicesRender
error={error}
@ -119,6 +122,6 @@ export const TcpServices = () => {
pageCount={pageCount}
pages={pages}
/>
</Page>
</>
)
}