323 lines
10 KiB
TypeScript
323 lines
10 KiB
TypeScript
import { Badge, 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'
|
|
|
|
import ProviderIcon from 'components/icons/providers'
|
|
import {
|
|
BooleanState,
|
|
Chips,
|
|
DetailSection,
|
|
DetailSectionSkeleton,
|
|
ItemBlock,
|
|
ItemTitle,
|
|
LayoutTwoCols,
|
|
ProviderName,
|
|
} from 'components/resources/DetailSections'
|
|
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 { NotFound } from 'pages/NotFound'
|
|
|
|
type DetailProps = {
|
|
data: ServiceDetailType
|
|
protocol?: string
|
|
}
|
|
|
|
const SpacedColumns = styled(Flex, {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
|
|
gridGap: '16px',
|
|
})
|
|
|
|
const ServicesGrid = styled(Box, {
|
|
display: 'grid',
|
|
gridTemplateColumns: '2fr 1fr 1fr',
|
|
alignItems: 'center',
|
|
padding: '$3 $5',
|
|
borderBottom: '1px solid $tableRowBorder',
|
|
})
|
|
|
|
const ServersGrid = styled(Box, {
|
|
display: 'grid',
|
|
alignItems: 'center',
|
|
padding: '$3 $5',
|
|
borderBottom: '1px solid $tableRowBorder',
|
|
})
|
|
|
|
const MirrorsGrid = styled(Box, {
|
|
display: 'grid',
|
|
gridTemplateColumns: '2fr 1fr 1fr',
|
|
alignItems: 'center',
|
|
padding: '$3 $5',
|
|
borderBottom: '1px solid $tableRowBorder',
|
|
|
|
'> *:not(:first-child)': {
|
|
justifySelf: 'flex-end',
|
|
},
|
|
})
|
|
|
|
const GridTitle = styled(Text, {
|
|
fontSize: '14px',
|
|
fontWeight: 700,
|
|
color: 'hsl(0, 0%, 56%)',
|
|
})
|
|
|
|
type Server = {
|
|
url: string
|
|
address?: string
|
|
}
|
|
|
|
type ServerStatus = {
|
|
[server: string]: string
|
|
}
|
|
|
|
function getServerStatusList(data: ServiceDetailType): ServerStatus {
|
|
const serversList: ServerStatus = {}
|
|
|
|
data.loadBalancer?.servers?.forEach((server: Server) => {
|
|
serversList[server.address || server.url] = 'DOWN'
|
|
})
|
|
|
|
if (data.serverStatus) {
|
|
Object.entries(data.serverStatus).forEach(([server, status]) => {
|
|
serversList[server] = status
|
|
})
|
|
}
|
|
|
|
return serversList
|
|
}
|
|
|
|
export const ServicePanels = ({ data, protocol = '' }: DetailProps) => {
|
|
const serversList = getServerStatusList(data)
|
|
const getProviderFromName = (serviceName: string): string => {
|
|
const [, provider] = serviceName.split('@')
|
|
return provider || data.provider
|
|
}
|
|
const providerName = useMemo(() => {
|
|
return data.provider
|
|
}, [data.provider])
|
|
|
|
return (
|
|
<SpacedColumns css={{ mb: '$5', pb: '$5' }} data-testid="service-details">
|
|
<DetailSection narrow icon={<FiInfo size={20} />} title="Service Details">
|
|
<LayoutTwoCols>
|
|
{data.type && (
|
|
<ItemBlock title="Type">
|
|
<Text css={{ lineHeight: '32px' }}>{data.type}</Text>
|
|
</ItemBlock>
|
|
)}
|
|
{data.provider && (
|
|
<ItemBlock title="Provider">
|
|
<ProviderIcon name={data.provider} />
|
|
<ProviderName css={{ ml: '$2' }}>{providerName}</ProviderName>
|
|
</ItemBlock>
|
|
)}
|
|
</LayoutTwoCols>
|
|
{data.status && (
|
|
<ItemBlock title="Status">
|
|
<ResourceStatus status={data.status} withLabel />
|
|
</ItemBlock>
|
|
)}
|
|
{data.mirroring && data.mirroring.service && (
|
|
<ItemBlock title="Main Service">
|
|
<Badge>{data.mirroring.service}</Badge>
|
|
</ItemBlock>
|
|
)}
|
|
{data.loadBalancer && (
|
|
<>
|
|
{data.loadBalancer.passHostHeader && (
|
|
<ItemBlock title="Pass Host Header">
|
|
<BooleanState enabled={data.loadBalancer.passHostHeader} />
|
|
</ItemBlock>
|
|
)}
|
|
{data.loadBalancer.terminationDelay && (
|
|
<ItemBlock title="Termination Delay">
|
|
<Text>{`${data.loadBalancer.terminationDelay} ms`}</Text>
|
|
</ItemBlock>
|
|
)}
|
|
</>
|
|
)}
|
|
</DetailSection>
|
|
{data.loadBalancer?.healthCheck && (
|
|
<DetailSection narrow icon={<FiShield size={20} />} title="Health Check">
|
|
<Box data-testid="health-check">
|
|
<LayoutTwoCols>
|
|
{data.loadBalancer.healthCheck.scheme && (
|
|
<ItemBlock title="Scheme">
|
|
<Text>{data.loadBalancer.healthCheck.scheme}</Text>
|
|
</ItemBlock>
|
|
)}
|
|
{data.loadBalancer.healthCheck.interval && (
|
|
<ItemBlock title="Interval">
|
|
<Text>{data.loadBalancer.healthCheck.interval}</Text>
|
|
</ItemBlock>
|
|
)}
|
|
</LayoutTwoCols>
|
|
<LayoutTwoCols>
|
|
{data.loadBalancer.healthCheck.path && (
|
|
<ItemBlock title="Path">
|
|
<Tooltip label={data.loadBalancer.healthCheck.path} action="copy">
|
|
<Text>{data.loadBalancer.healthCheck.path}</Text>
|
|
</Tooltip>
|
|
</ItemBlock>
|
|
)}
|
|
{data.loadBalancer.healthCheck.timeout && (
|
|
<ItemBlock title="Timeout">
|
|
<Text>{data.loadBalancer.healthCheck.timeout}</Text>
|
|
</ItemBlock>
|
|
)}
|
|
</LayoutTwoCols>
|
|
<LayoutTwoCols>
|
|
{data.loadBalancer.healthCheck.port && (
|
|
<ItemBlock title="Port">
|
|
<Text>{data.loadBalancer.healthCheck.port}</Text>
|
|
</ItemBlock>
|
|
)}
|
|
{data.loadBalancer.healthCheck.hostname && (
|
|
<ItemBlock title="Hostname">
|
|
<Tooltip label={data.loadBalancer.healthCheck.hostname} action="copy">
|
|
<Text>{data.loadBalancer.healthCheck.hostname}</Text>
|
|
</Tooltip>
|
|
</ItemBlock>
|
|
)}
|
|
</LayoutTwoCols>
|
|
{data.loadBalancer.healthCheck.headers && (
|
|
<ItemBlock title="Headers">
|
|
<Chips
|
|
variant="neon"
|
|
items={Object.entries(data.loadBalancer.healthCheck.headers).map((entry) => entry.join(': '))}
|
|
/>
|
|
</ItemBlock>
|
|
)}
|
|
</Box>
|
|
</DetailSection>
|
|
)}
|
|
{!!data?.weighted?.services?.length && (
|
|
<DetailSection narrow icon={<FiGlobe size={20} />} title="Services" noPadding>
|
|
<>
|
|
<ServicesGrid css={{ mt: '$2' }}>
|
|
<GridTitle>Name</GridTitle>
|
|
<GridTitle css={{ textAlign: 'center' }}>Weight</GridTitle>
|
|
<GridTitle css={{ textAlign: 'center' }}>Provider</GridTitle>
|
|
</ServicesGrid>
|
|
<Box data-testid="servers-list">
|
|
{data.weighted.services.map((service) => (
|
|
<ServicesGrid key={service.name}>
|
|
<Text>{service.name}</Text>
|
|
<Text css={{ textAlign: 'center' }}>{service.weight}</Text>
|
|
<Flex css={{ justifyContent: 'center' }}>
|
|
<ProviderIcon name={getProviderFromName(service.name)} />
|
|
</Flex>
|
|
</ServicesGrid>
|
|
))}
|
|
</Box>
|
|
</>
|
|
</DetailSection>
|
|
)}
|
|
{Object.keys(serversList).length > 0 && (
|
|
<DetailSection narrow icon={<FiGlobe size={20} />} title="Servers" noPadding>
|
|
<>
|
|
<ServersGrid css={{ gridTemplateColumns: protocol === 'http' ? '25% auto' : 'inherit', mt: '$2' }}>
|
|
{protocol === 'http' && <ItemTitle css={{ mb: 0 }}>Status</ItemTitle>}
|
|
<ItemTitle css={{ mb: 0 }}>URL</ItemTitle>
|
|
</ServersGrid>
|
|
<Box data-testid="servers-list">
|
|
{Object.entries(serversList).map(([server, status]) => (
|
|
<ServersGrid key={server} css={{ gridTemplateColumns: protocol === 'http' ? '25% auto' : 'inherit' }}>
|
|
{protocol === 'http' && <ResourceStatus status={status === 'UP' ? 'enabled' : 'disabled'} />}
|
|
<Box>
|
|
<Tooltip label={server} action="copy">
|
|
<Text>{server}</Text>
|
|
</Tooltip>
|
|
</Box>
|
|
</ServersGrid>
|
|
))}
|
|
</Box>
|
|
</>
|
|
</DetailSection>
|
|
)}
|
|
{data.mirroring?.mirrors && data.mirroring.mirrors.length > 0 && (
|
|
<DetailSection narrow icon={<FiGlobe size={20} />} title="Mirror Services" noPadding>
|
|
<MirrorsGrid css={{ mt: '$2' }}>
|
|
<GridTitle>Name</GridTitle>
|
|
<GridTitle>Percent</GridTitle>
|
|
<GridTitle>Provider</GridTitle>
|
|
</MirrorsGrid>
|
|
<Box data-testid="mirror-services">
|
|
{data.mirroring.mirrors.map((mirror) => (
|
|
<MirrorsGrid key={mirror.name}>
|
|
<Text>{mirror.name}</Text>
|
|
<Text>{mirror.percent}</Text>
|
|
<ProviderIcon name={getProviderFromName(mirror.name)} />
|
|
</MirrorsGrid>
|
|
))}
|
|
</Box>
|
|
</DetailSection>
|
|
)}
|
|
</SpacedColumns>
|
|
)
|
|
}
|
|
|
|
type HttpServiceRenderProps = {
|
|
data?: ResourceDetailDataType
|
|
error?: Error
|
|
name: string
|
|
}
|
|
|
|
export const HttpServiceRender = ({ data, error, name }: HttpServiceRenderProps) => {
|
|
if (error) {
|
|
return (
|
|
<>
|
|
<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>
|
|
</>
|
|
)
|
|
}
|
|
|
|
if (!data) {
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>{name} - Traefik Proxy</title>
|
|
</Helmet>
|
|
<Skeleton css={{ height: '$7', width: '320px', mb: '$8' }} data-testid="skeleton" />
|
|
<SpacedColumns>
|
|
<DetailSectionSkeleton narrow />
|
|
<DetailSectionSkeleton narrow />
|
|
<DetailSectionSkeleton narrow />
|
|
</SpacedColumns>
|
|
<UsedByRoutersSkeleton />
|
|
</>
|
|
)
|
|
}
|
|
|
|
if (!data.name) {
|
|
return <NotFound />
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>{data.name} - Traefik Proxy</title>
|
|
</Helmet>
|
|
<H1 css={{ mb: '$7' }}>{data.name}</H1>
|
|
<ServicePanels data={data} protocol="http" />
|
|
<UsedByRoutersSection data={data} protocol="http" />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const HttpService = () => {
|
|
const { name } = useParams<{ name: string }>()
|
|
const { data, error } = useResourceDetail(name!, 'services')
|
|
return <HttpServiceRender data={data} error={error} name={name!} />
|
|
}
|
|
|
|
export default HttpService
|