upcoming: [M3-7520] - AGLB Fixes and Improvements

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

@@ -131,7 +131,7 @@ export interface RuleCreatePayload {
 }
 
 export interface MatchCondition {
-  hostname: string;
+  hostname: string | null;
   match_field: MatchField;
   match_value: string;
   session_stickiness_cookie: string | null;
@@ -159,8 +159,8 @@ interface HealthCheck {
   timeout: number;
   unhealthy_threshold: number;
   healthy_threshold: number;
-  path: string;
-  host: string;
+  path?: string | null;
+  host?: string | null;
 }
 
 export interface ServiceTarget extends ServiceTargetPayload {
@@ -169,7 +169,7 @@ export interface ServiceTarget extends ServiceTargetPayload {
 
 export interface Endpoint {
   ip: string;
-  host?: string;
+  host?: string | null;
   port: number;
   rate_capacity: number;
 }

packages/manager/.changeset/pr-9954-fixed-1701698397297.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+`TableCell` styling for `ActionMenu`s ([#9954](https://github.com/linode/manager/pull/9954))

packages/manager/.changeset/pr-9954-upcoming-features-1701698414248.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+AGLB copy changes and improvments ([#9954](https://github.com/linode/manager/pull/9954))

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

@@ -72,14 +72,14 @@ describe('Akamai Global Load Balancer landing page', () => {
         .should('be.visible')
         .closest('tr')
         .within(() => {
-          // Confirm that regions are listed for load balancer.
-          loadbalancerMock.regions.forEach((loadbalancerRegion: string) => {
-            const regionLabel = getRegionById(loadbalancerRegion).label;
-            cy.findByText(regionLabel, { exact: false }).should('be.visible');
-            cy.findByText(loadbalancerRegion, { exact: false }).should(
-              'be.visible'
-            );
-          });
+          // TODO: AGLB - Confirm that regions from the API are listed for load balancer
+          // loadbalancerMock.regions.forEach((loadbalancerRegion: string) => {
+          //   const regionLabel = getRegionById(loadbalancerRegion).label;
+          //   cy.findByText(regionLabel, { exact: false }).should('be.visible');
+          //   cy.findByText(loadbalancerRegion, { exact: false }).should(
+          //     'be.visible'
+          //   );
+          // });
 
           cy.findByText(loadbalancerMock.hostname).should('be.visible');
 
@@ -94,14 +94,14 @@ describe('Akamai Global Load Balancer landing page', () => {
         .should('be.visible')
         .closest('tr')
         .within(() => {
-          // Confirm that regions are listed for load balancer.
-          loadbalancerMock.regions.forEach((loadbalancerRegion: string) => {
-            const regionLabel = getRegionById(loadbalancerRegion).label;
-            cy.findByText(regionLabel, { exact: false }).should('be.visible');
-            cy.findByText(loadbalancerRegion, { exact: false }).should(
-              'be.visible'
-            );
-          });
+          // TODO: AGLB - Confirm that regions from the API are listed for load balancer
+          // loadbalancerMock.regions.forEach((loadbalancerRegion: string) => {
+          //   const regionLabel = getRegionById(loadbalancerRegion).label;
+          //   cy.findByText(regionLabel, { exact: false }).should('be.visible');
+          //   cy.findByText(loadbalancerRegion, { exact: false }).should(
+          //     'be.visible'
+          //   );
+          // });
 
           ui.actionMenu
             .findByTitle(

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

@@ -539,7 +539,7 @@ describe('Akamai Global Load Balancer routes page', () => {
         .findByTitle('Edit Rule')
         .should('be.visible')
         .within(() => {
-          cy.findByLabelText('Hostname')
+          cy.findByLabelText('Hostname (optional)')
             .should('have.value', routes[0].rules[0].match_condition.hostname)
             .clear()
             .type('example.com');

packages/manager/src/components/TableCell/TableCell.tsx

@@ -10,14 +10,7 @@ import { TooltipIcon } from 'src/components/TooltipIcon';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   actionCell: {
-    // Prevents Safari from adding margins to the ActionMenu button
-    '& > button': {
-      margin: 0,
-    },
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    padding: 0,
+    textAlign: 'right',
   },
   center: {
     '&:last-child': {

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

@@ -81,15 +81,16 @@ export const ConfigurationDetails = ({ index, name }: Props) => {
             <TooltipIcon status="help" text={CONFIGURATION_COPY.Certificates} />
           </Typography>
           <Box sx={{ alignItems: 'center', display: 'flex' }}>
-            <BetaChip
-              sx={(theme) => ({
-                marginLeft: '0 !important',
-                marginRight: `${theme.spacing(1 / 2)} !important`,
-              })}
-            />
             <Typography>
+              <BetaChip
+                sx={(theme) => ({
+                  marginLeft: '0 !important',
+                  marginRight: theme.spacing(),
+                })}
+                component="span"
+              />
               After the load balancer is created, and if the protocol is HTTPS,
-              upload TLS termination certificates.
+              upload TLS termination certificates.{' '}
               <Link to={AGLB_DOCS_TLS_CERTIFICATE}>Learn more.</Link>
             </Typography>
           </Box>

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

@@ -17,9 +17,12 @@ export const LoadBalancerRegions = () => {
             Where this Load Balancer instance will be deployed.
           </Typography>
           <Typography>
-            <BetaChip sx={{ marginLeft: '0 !important' }} /> Load Balancers will
-            be automatically provisioned in these 5 Regions. No charges with be
-            incurred.
+            <BetaChip
+              component="span"
+              sx={{ marginLeft: '0 !important', marginRight: '8px !important' }}
+            />
+            Load Balancers will be automatically provisioned in these 5 Regions.
+            No charges with be incurred.
           </Typography>
         </Stack>
         <Regions />

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

@@ -14,6 +14,7 @@ import {
   CERTIFICATES_COPY,
   exampleCert,
   exampleKey,
+  initialValues,
   labelMap,
   titleMap,
 } from './constants';
@@ -44,12 +45,7 @@ export const CreateCertificateDrawer = (props: Props) => {
 
   const formik = useFormik<CreateCertificatePayload>({
     enableReinitialize: true,
-    initialValues: {
-      certificate: '',
-      key: '',
-      label: '',
-      type,
-    },
+    initialValues: initialValues[type],
     async onSubmit(values) {
       try {
         await createCertificate(values);

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/constants.ts

@@ -1,5 +1,19 @@
 import type { Certificate } from '@linode/api-v4';
 
+export const initialValues = {
+  ca: {
+    certificate: '',
+    label: '',
+    type: 'ca',
+  },
+  downstream: {
+    certificate: '',
+    key: '',
+    label: '',
+    type: 'downstream',
+  },
+} as const;
+
 export const CERTIFICATES_COPY = {
   Create: {
     ca:

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

@@ -38,7 +38,7 @@ export const LoadBalancerCertificates = () => {
         Upload certificates to your Load Balancer for use across your
         Configurations and Service Targets.
       </Typography>
-      <Tabs index={tabIndex === -1 ? 0 : tabIndex}>
+      <Tabs index={tabIndex === -1 ? 0 : tabIndex} onChange={() => null}>
         <TabLinkList
           tabs={tabs.map((t) => ({ ...t, routeName: `${url}/${t.path}` }))}
         />

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

@@ -3,44 +3,51 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { IPAddress } from 'src/features/Linodes/LinodesLanding/IPAddress';
 import { useLoadBalancerQuery } from 'src/queries/aglb/loadbalancers';
-import { useRegionsQuery } from 'src/queries/regions';
+// import { useRegionsQuery } from 'src/queries/regions';
 
 import { Ports } from '../LoadBalancerLanding/Ports';
-import { Stack } from 'src/components/Stack';
+import { LoadBalancerRegions } from './LoadBalancerRegions';
 
 export const LoadBalancerSummary = () => {
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
 
   const id = Number(loadbalancerId);
 
   const { data: loadbalancer } = useLoadBalancerQuery(id);
-  const { data: regions } = useRegionsQuery();
+  // const { data: regions } = useRegionsQuery();
 
   const items = [
     {
       title: 'Hostname',
-      value: <IPAddress ips={[loadbalancer?.hostname ?? '']} isHovered />,
+      value: loadbalancer?.hostname ? (
+        <IPAddress ips={[loadbalancer.hostname]} isHovered />
+      ) : (
+        <Typography>None</Typography>
+      ),
+    },
+    {
+      title: 'Load Balancer ID',
+      value: <Typography>{loadbalancer?.id}</Typography>,
     },
     {
       title: 'Ports',
       value: <Ports loadbalancerId={id} />,
     },
     {
       title: 'Regions',
-      value: (
-        <Typography>
-          {loadbalancer?.regions
-            .map((region) => regions?.find((r) => r.id === region)?.label)
-            .join(', ')}
-        </Typography>
-      ),
-    },
-    {
-      title: 'Load Balancer ID',
-      value: <Typography>{loadbalancer?.id}</Typography>,
+      value: <LoadBalancerRegions />,
+      // Uncomment the line below to show the regions returned by the API.
+      // value: (
+      //   <Typography>
+      //     {loadbalancer?.regions
+      //       .map((region) => regions?.find((r) => r.id === region)?.label)
+      //       .join(', ')}
+      //   </Typography>
+      // ),
     },
   ];
 
@@ -50,7 +57,7 @@ export const LoadBalancerSummary = () => {
         {items.map(({ title, value }) => (
           <Grid key={title} md={4} sm={4} xs={2}>
             <Stack direction="row" spacing={2}>
-              <Typography minWidth="75px" noWrap>
+              <Typography minWidth="70px" noWrap>
                 <strong>{title}</strong>
               </Typography>
               {value}

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

@@ -61,7 +61,9 @@ export const CreateRouteDrawer = (props: Props) => {
   return (
     <Drawer onClose={onClose} open={open} title="Create Route">
       <form onSubmit={formik.handleSubmit}>
-        {generalError && <Notice text={generalError} variant="error" />}
+        {generalError && (
+          <Notice spacingBottom={0} text={generalError} variant="error" />
+        )}
         <TextField
           errorText={formik.touched.label ? formik.errors.label : undefined}
           label="Route Label"

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

@@ -4,6 +4,8 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { useLoadBalancerRouteUpdateMutation } from 'src/queries/aglb/routes';
 
+import { getNormalizedRulePayload } from './utils';
+
 import type { Route } from '@linode/api-v4';
 
 interface Props {
@@ -31,8 +33,12 @@ export const DeleteRuleDialog = (props: Props) => {
 
     newRules.splice(ruleIndex, 1);
 
+    const normalizedRules = newRules.map(getNormalizedRulePayload);
+
     await mutateAsync({
-      rules: newRules,
+      label: route.label,
+      protocol: route.protocol,
+      rules: normalizedRules,
     });
     onClose();
   };