feat: [M3-7351] - AGLB Configurations Add Route Drawer and other refinements

packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add `UpdateConfigurationPayload` ([#9853](https://github.com/linode/manager/pull/9853))

packages/api-v4/src/aglb/configurations.ts

@@ -7,7 +7,12 @@ import Request, {
 } from '../request';
 import { Filter, Params, ResourcePage } from '../types';
 import { BETA_API_ROOT } from '../constants';
-import type { Configuration, ConfigurationPayload } from './types';
+import type {
+  Configuration,
+  ConfigurationPayload,
+  UpdateConfigurationPayload,
+} from './types';
+import { UpdateConfigurationSchema } from '@linode/validation';
 
 /**
  * getLoadbalancerConfigurations
@@ -75,15 +80,15 @@ export const createLoadbalancerConfiguration = (
 export const updateLoadbalancerConfiguration = (
   loadbalancerId: number,
   configurationId: number,
-  data: Partial<Configuration>
+  data: UpdateConfigurationPayload
 ) =>
   Request<Configuration>(
     setURL(
       `${BETA_API_ROOT}/aglb/${encodeURIComponent(
         loadbalancerId
       )}/configurations/${encodeURIComponent(configurationId)}`
     ),
-    setData(data),
+    setData(data, UpdateConfigurationSchema),
     setMethod('PUT')
   );
 

packages/api-v4/src/aglb/types.ts

@@ -111,6 +111,14 @@ export interface Configuration {
   routes: { id: number; label: string }[];
 }
 
+export type UpdateConfigurationPayload = Partial<{
+  label: string;
+  port: number;
+  protocol: Protocol;
+  certificates: CertificateConfig[];
+  routes: number[];
+}>;
+
 export interface CertificateConfig {
   hostname: string;
   id: number;

packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+AGLB Configurations Add Route Drawer and other refinements ([#9853](https://github.com/linode/manager/pull/9853))

packages/manager/cypress/e2e/core/loadBalancers/load-balancer-configurations.spec.ts

@@ -0,0 +1,38 @@
+import {
+  mockAppendFeatureFlags,
+  mockGetFeatureFlagClientstream,
+} from 'support/intercepts/feature-flags';
+import { makeFeatureFlagData } from 'support/util/feature-flags';
+import { loadbalancerFactory, configurationFactory } from '@src/factories';
+import {
+  mockGetLoadBalancer,
+  mockGetLoadBalancerConfigurations,
+} from 'support/intercepts/load-balancers';
+
+describe('Akamai Global Load Balancer configurations page', () => {
+  it('renders configurations', () => {
+    const loadbalancer = loadbalancerFactory.build();
+    const configurations = configurationFactory.buildList(5);
+
+    mockAppendFeatureFlags({
+      aglb: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+    mockGetLoadBalancer(loadbalancer).as('getLoadBalancer');
+    mockGetLoadBalancerConfigurations(loadbalancer.id, configurations).as(
+      'getConfigurations'
+    );
+
+    cy.visitWithLogin(`/loadbalancers/${loadbalancer.id}/configurations`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientStream',
+      '@getLoadBalancer',
+      '@getConfigurations',
+    ]);
+
+    for (const configuration of configurations) {
+      cy.findByText(configuration.label).should('be.visible');
+    }
+  });
+});

packages/manager/src/MainContent.tsx

@@ -134,7 +134,11 @@ const Images = React.lazy(() => import('src/features/Images'));
 const Kubernetes = React.lazy(() => import('src/features/Kubernetes'));
 const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
 const Profile = React.lazy(() => import('src/features/Profile/Profile'));
-const LoadBalancers = React.lazy(() => import('src/features/LoadBalancers'));
+const LoadBalancers = React.lazy(() =>
+  import('src/features/LoadBalancers').then((module) => ({
+    default: module.LoadBalancers,
+  }))
+);
 const NodeBalancers = React.lazy(
   () => import('src/features/NodeBalancers/NodeBalancers')
 );

packages/manager/src/factories/aglb.ts

@@ -258,7 +258,7 @@ export const createRouteFactory = Factory.Sync.makeFactory<CreateRoutePayload>({
 // *************************
 
 export const serviceTargetFactory = Factory.Sync.makeFactory<ServiceTarget>({
-  ca_certificate: 'my-cms-certificate',
+  ca_certificate: 'certificate-0',
   endpoints: [
     {
       ip: '192.168.0.100',
@@ -276,7 +276,7 @@ export const serviceTargetFactory = Factory.Sync.makeFactory<ServiceTarget>({
     unhealthy_threshold: 5,
   },
   id: Factory.each((i) => i),
-  label: Factory.each((i) => `images-backend-aws-${i}`),
+  label: Factory.each((i) => `service-target-${i}`),
   load_balancing_policy: 'round_robin',
 });
 

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

@@ -18,7 +18,7 @@ const initialValues = {
   regions: [],
 };
 
-const LoadBalancerCreate = () => {
+export const LoadBalancerCreate = () => {
   return (
     <>
       <DocumentTitleSegment segment="Create a Load Balancer" />
@@ -54,5 +54,3 @@ const LoadBalancerCreate = () => {
     </>
   );
 };
-
-export default LoadBalancerCreate;

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

@@ -2,18 +2,10 @@ import Stack from '@mui/material/Stack';
 import * as React from 'react';
 
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
-import { Country } from 'src/components/EnhancedSelect/variants/RegionSelect/utils';
-import { Flag } from 'src/components/Flag';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 
-const loadBalancerRegions = [
-  { country: 'us', id: 'us-iad', label: 'Washington, DC' },
-  { country: 'us', id: 'us-lax', label: 'Los Angeles, CA' },
-  { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
-  { country: 'jp', id: 'jp-osa', label: 'Osaka, JP' },
-  { country: 'au', id: 'ap-southeast', label: 'Sydney, AU' },
-];
+import { LoadBalancerRegions as Regions } from '../LoadBalancerDetail/LoadBalancerRegions';
 
 export const LoadBalancerRegions = () => {
   return (
@@ -30,19 +22,7 @@ export const LoadBalancerRegions = () => {
             incurred.
           </Typography>
         </Stack>
-        <Stack py={0.5} spacing={1.25}>
-          {loadBalancerRegions.map((region) => (
-            <Stack
-              alignItems="center"
-              direction="row"
-              key={region.id}
-              spacing={2}
-            >
-              <Flag country={region.country as Lowercase<Country>} />
-              <Typography>{`${region.label} (${region.id})`}</Typography>
-            </Stack>
-          ))}
-        </Stack>
+        <Regions />
       </Stack>
     </Paper>
   );

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

@@ -142,6 +142,14 @@ export const Certificates = () => {
             >
               Label
             </TableSortCell>
+            <TableSortCell
+              active={orderBy === 'id'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label="id"
+            >
+              ID
+            </TableSortCell>
             <TableCell></TableCell>
           </TableRow>
         </TableHead>
@@ -151,6 +159,7 @@ export const Certificates = () => {
           {data?.data.map((certificate) => (
             <TableRow key={`${certificate.label}-${certificate.type}`}>
               <TableCell>{certificate.label}</TableCell>
+              <TableCell>{certificate.id}</TableCell>
               <TableCell actionCell>
                 <ActionMenu
                   actionsList={[

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

@@ -1,5 +1,5 @@
 import { Configuration } from '@linode/api-v4';
-import { certificateConfigSchema } from '@linode/validation';
+import { CertificateConfigSchema } from '@linode/validation';
 import { useFormik } from 'formik';
 import React, { useEffect } from 'react';
 
@@ -39,7 +39,7 @@ export const ApplyCertificatesDrawer = (props: Props) => {
       onClose();
     },
     validateOnChange: false,
-    validationSchema: certificateConfigSchema,
+    validationSchema: CertificateConfigSchema,
   });
 
   useEffect(() => {