124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
import { AriaTable, AriaTbody, AriaTd, AriaTfoot, AriaThead, AriaTr, Box, Flex, Text } from '@traefiklabs/faency'
|
|
import { useMemo } from 'react'
|
|
import useInfiniteScroll from 'react-infinite-scroll-hook'
|
|
import { useSearchParams } from 'react-router-dom'
|
|
|
|
import ClickableRow from 'components/ClickableRow'
|
|
import ProviderIcon from 'components/icons/providers'
|
|
import { ResourceStatus } from 'components/resources/ResourceStatus'
|
|
import { ScrollTopButton } from 'components/ScrollTopButton'
|
|
import { SpinnerLoader } from 'components/SpinnerLoader'
|
|
import { searchParamsToState, TableFilter } from 'components/TableFilter'
|
|
import SortableTh from 'components/tables/SortableTh'
|
|
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 HttpServicesRenderRow = (row) => (
|
|
<ClickableRow key={row.name} to={`/http/services/${row.name}`}>
|
|
<AriaTd>
|
|
<Tooltip label={row.status}>
|
|
<Box css={{ width: '32px', height: '32px' }}>
|
|
<ResourceStatus status={row.status} />
|
|
</Box>
|
|
</Tooltip>
|
|
</AriaTd>
|
|
<AriaTd>
|
|
<TooltipText text={row.name} />
|
|
</AriaTd>
|
|
<AriaTd>
|
|
<TooltipText text={row.type} />
|
|
</AriaTd>
|
|
<AriaTd>
|
|
<Text>{row.loadBalancer?.servers?.length || 0}</Text>
|
|
</AriaTd>
|
|
<AriaTd>
|
|
<Tooltip label={row.provider}>
|
|
<Box css={{ width: '32px', height: '32px' }}>
|
|
<ProviderIcon name={row.provider} />
|
|
</Box>
|
|
</Tooltip>
|
|
</AriaTd>
|
|
</ClickableRow>
|
|
)
|
|
return HttpServicesRenderRow
|
|
}
|
|
|
|
export const HttpServicesRender = ({
|
|
error,
|
|
isEmpty,
|
|
isLoadingMore,
|
|
isReachingEnd,
|
|
loadMore,
|
|
pageCount,
|
|
pages,
|
|
}: pagesResponseInterface) => {
|
|
const [infiniteRef] = useInfiniteScroll({
|
|
loading: isLoadingMore,
|
|
hasNextPage: !isReachingEnd && !error,
|
|
onLoadMore: loadMore,
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<AriaTable>
|
|
<AriaThead>
|
|
<AriaTr>
|
|
<SortableTh label="Status" css={{ width: '40px' }} isSortable sortByValue="status" />
|
|
<SortableTh label="Name" isSortable sortByValue="name" />
|
|
<SortableTh label="Type" isSortable sortByValue="type" />
|
|
<SortableTh label="Servers" isSortable sortByValue="servers" />
|
|
<SortableTh label="Provider" css={{ width: '75px' }} isSortable sortByValue="provider" />
|
|
</AriaTr>
|
|
</AriaThead>
|
|
<AriaTbody>{pages}</AriaTbody>
|
|
{(isEmpty || !!error) && (
|
|
<AriaTfoot>
|
|
<AriaTr>
|
|
<AriaTd fullColSpan>
|
|
<EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
|
|
</AriaTd>
|
|
</AriaTr>
|
|
</AriaTfoot>
|
|
)}
|
|
</AriaTable>
|
|
<Flex css={{ height: 60, alignItems: 'center', justifyContent: 'center' }} ref={infiniteRef}>
|
|
{isLoadingMore ? <SpinnerLoader /> : isReachingEnd && pageCount > 1 && <ScrollTopButton />}
|
|
</Flex>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const HttpServices = () => {
|
|
const renderRow = makeRowRender()
|
|
const [searchParams] = useSearchParams()
|
|
|
|
const query = useMemo(() => searchParamsToState(searchParams), [searchParams])
|
|
const { pages, pageCount, isLoadingMore, isReachingEnd, loadMore, error, isEmpty } = useFetchWithPagination(
|
|
'/http/services',
|
|
{
|
|
listContextKey: JSON.stringify(query),
|
|
renderRow,
|
|
renderLoader: () => null,
|
|
query,
|
|
},
|
|
)
|
|
|
|
return (
|
|
<Page title="HTTP Services">
|
|
<TableFilter />
|
|
<HttpServicesRender
|
|
error={error}
|
|
isEmpty={isEmpty}
|
|
isLoadingMore={isLoadingMore}
|
|
isReachingEnd={isReachingEnd}
|
|
loadMore={loadMore}
|
|
pageCount={pageCount}
|
|
pages={pages}
|
|
/>
|
|
</Page>
|
|
)
|
|
}
|