diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx index 55f10da2a0b..b1f92762810 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx @@ -17,6 +17,7 @@ import { useLoadBalancerConfigurationMutation } from 'src/queries/aglb/configura import { getErrorMap } from 'src/utilities/errorUtils'; import { pluralize } from 'src/utilities/pluralize'; +import { RoutesTable } from '../Routes/RoutesTable'; import { ApplyCertificatesDrawer } from './ApplyCertificatesDrawer'; import { CertificateTable } from './CertificateTable'; import { DeleteConfigurationDialog } from './DeleteConfigurationDialog'; @@ -165,8 +166,7 @@ export const ConfigurationAccordion = (props: Props) => { Routes - {/* @TODO Add AGLB routes table */} - Routes Table will go here ⚠️🔜 + })) ); const LoadBalancerRoutes = React.lazy(() => - import('./LoadBalancerRoutes').then((module) => ({ - default: module.LoadBalancerRoutes, + import('./Routes/RoutesTable').then((module) => ({ + default: module.RoutesTable, })) ); diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx similarity index 90% rename from packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx rename to packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx index 99b5109f460..7eb2503a461 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx @@ -24,17 +24,21 @@ import { useOrder } from 'src/hooks/useOrder'; import { usePagination } from 'src/hooks/usePagination'; import { useLoadBalancerRoutesQuery } from 'src/queries/aglb/routes'; -import { CreateRouteDrawer } from './Routes/CreateRouteDrawer'; -import { DeleteRouteDialog } from './Routes/DeleteRouteDialog'; -import { DeleteRuleDialog } from './Routes/DeleteRuleDialog'; -import { RuleDrawer } from './Routes/RuleDrawer'; -import { RulesTable } from './RulesTable'; +import { RulesTable } from '../RulesTable'; +import { CreateRouteDrawer } from './CreateRouteDrawer'; +import { DeleteRouteDialog } from './DeleteRouteDialog'; +import { DeleteRuleDialog } from './DeleteRuleDialog'; +import { RuleDrawer } from './RuleDrawer'; -import type { Filter, Route } from '@linode/api-v4'; +import type { Configuration, Filter, Route } from '@linode/api-v4'; const PREFERENCE_KEY = 'loadbalancer-routes'; -export const LoadBalancerRoutes = () => { +interface Props { + configuredRoutes?: Configuration['routes']; +} + +export const RoutesTable = ({ configuredRoutes }: Props) => { const { loadbalancerId } = useParams<{ loadbalancerId: string }>(); const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false); const [isAddRuleDrawerOpen, setIsAddRuleDrawerOpen] = useState(false); @@ -64,6 +68,14 @@ export const LoadBalancerRoutes = () => { filter['label'] = { '+contains': query }; } + /** + * If configuredRoutes is passed, it filters the configured routes form API + * Otherwise, it fetches routes without filter in the routes table. + */ + if (configuredRoutes) { + filter['+or'] = configuredRoutes.map((route) => ({ id: route.id })); + } + const { data: routes, isLoading } = useLoadBalancerRoutesQuery( Number(loadbalancerId), { @@ -73,7 +85,7 @@ export const LoadBalancerRoutes = () => { filter ); - const selectedRoute = routes?.data.find( + const selectedRoute = routes?.data?.find( (route) => route.id === selectedRouteId ); @@ -104,10 +116,10 @@ export const LoadBalancerRoutes = () => { } const getTableItems = (): TableItem[] => { - if (!routes) { + if (!routes?.data) { return []; } - return routes.data?.map((route) => { + return routes?.data?.map((route) => { const OuterTableCells = ( <> diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts index 63c5b3c5652..356726bde14 100644 --- a/packages/manager/src/mocks/serverHandlers.ts +++ b/packages/manager/src/mocks/serverHandlers.ts @@ -354,6 +354,10 @@ const aglb = [ }), // Routes rest.get('*/v4beta/aglb/:id/routes', (req, res, ctx) => { + const headers = JSON.parse(req.headers.get('x-filter') || '{}'); + if (headers['+or']) { + return res(ctx.json(makeResourcePage(routeFactory.buildList(2)))); + } return res(ctx.json(makeResourcePage(routeFactory.buildList(5)))); }), rest.post('*/v4beta/aglb/:id/routes', (req, res, ctx) => {