feat: [M3-7253] - Add AGLB details - Configurations - Routes Table

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) => {
         <Divider spacingBottom={16} spacingTop={16} />
         <Stack spacing={2}>
           <Typography variant="h2">Routes</Typography>
-          {/* @TODO Add AGLB routes table */}
-          <Typography>Routes Table will go here ⚠️🔜</Typography>
+          <RoutesTable configuredRoutes={configuration.routes} />
         </Stack>
         <Divider spacingBottom={16} spacingTop={16} />
         <ActionsPanel

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx

@@ -32,8 +32,8 @@ const LoadBalancerServiceTargets = React.lazy(() =>
   }))
 );
 const LoadBalancerRoutes = React.lazy(() =>
-  import('./LoadBalancerRoutes').then((module) => ({
-    default: module.LoadBalancerRoutes,
+  import('./Routes/RoutesTable').then((module) => ({
+    default: module.RoutesTable,
   }))
 );
 

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx → 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,9 @@ export const LoadBalancerRoutes = () => {
     filter
   );
 
-  const selectedRoute = routes?.data.find(
+  const routesList = routes?.data;
+
+  const selectedRoute = routesList?.find(
     (route) => route.id === selectedRouteId
   );
 
@@ -104,10 +118,10 @@ export const LoadBalancerRoutes = () => {
   }
 
   const getTableItems = (): TableItem[] => {
-    if (!routes) {
+    if (!routesList) {
       return [];
     }
-    return routes.data?.map((route) => {
+    return routesList?.map((route) => {
       const OuterTableCells = (
         <>
           <Hidden smDown>

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) => {