From 4a63694fa9183df87f5a203e2a98eff2c692ac32 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 11:34:25 -0500
Subject: [PATCH] feat: [M3-7253] - Add AGLB details - Configurations - Routes
Table (#9811)
* feat: [M3-7253] - Add AGLB details - Configurations - Routes Table
* Organize and reuse Routes table in Configurations tab and Routes Tab
* Update RoutesTable.tsx
* Filter thru API
* Update MSW to support fetching routes with filters
* Update serverHandlers.ts
* Update packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx
Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
* PR - Feedback
---------
Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
---
.../Configurations/ConfigurationAccordion.tsx | 4 +--
.../LoadBalancerDetail/LoadBalancerDetail.tsx | 4 +--
.../RoutesTable.tsx} | 32 +++++++++++++------
packages/manager/src/mocks/serverHandlers.ts | 4 +++
4 files changed, 30 insertions(+), 14 deletions(-)
rename packages/manager/src/features/LoadBalancers/LoadBalancerDetail/{LoadBalancerRoutes.tsx => Routes/RoutesTable.tsx} (90%)
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) => {