upcoming: [M3-7401] - AGLB Load Balancer and Configuration Refinements

packages/manager/.changeset/pr-9903-upcoming-features-1699989572934.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix Configuration creation by fixing port type and other refinement ([#9903](https://github.com/linode/manager/pull/9903))

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

@@ -10,7 +10,10 @@ import { makeFeatureFlagData } from 'support/util/feature-flags';
 import { loadbalancerFactory, configurationFactory } from '@src/factories';
 import { ui } from 'support/ui';
 import { randomLabel } from 'support/util/random';
-import { mockGetLoadBalancers } from 'support/intercepts/load-balancers';
+import {
+  mockGetLoadBalancer,
+  mockGetLoadBalancers,
+} from 'support/intercepts/load-balancers';
 import type { Loadbalancer } from '@linode/api-v4';
 import { chooseRegion } from 'support/util/regions';
 import { getRegionById } from 'support/util/regions';
@@ -58,6 +61,7 @@ describe('Akamai Global Load Balancer landing page', () => {
     }).as('getFeatureFlags');
     mockGetFeatureFlagClientstream().as('getClientStream');
     mockGetLoadBalancers(loadbalancerMocks).as('getLoadBalancers');
+    mockGetLoadBalancer(loadbalancerMocks[0]);
 
     cy.visitWithLogin('/loadbalancers');
     cy.wait(['@getFeatureFlags', '@getClientStream', '@getLoadBalancers']);
@@ -77,6 +81,8 @@ describe('Akamai Global Load Balancer landing page', () => {
             );
           });
 
+          cy.findByText(loadbalancerMock.hostname).should('be.visible');
+
           // Confirm that clicking label navigates to details page.
           cy.findByText(loadbalancerMock.label).should('be.visible').click();
         });

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

@@ -5,7 +5,6 @@ import { Accordion } from 'src/components/Accordion';
 
 import { ConfigurationAccordionHeader } from './ConfigurationAccordionHeader';
 import { ConfigurationForm } from './ConfigurationForm';
-import { UnusedConfigurationNotice } from './UnusedConfigurationNotice';
 
 import type { Configuration } from '@linode/api-v4';
 
@@ -16,22 +15,13 @@ interface Props {
 export const ConfigurationAccordion = (props: Props) => {
   const { configuration } = props;
   const { configurationId } = useParams<{ configurationId: string }>();
-  const { loadbalancerId: _loadbalancerId } = useParams<{
-    loadbalancerId: string;
-  }>();
-
-  const loadbalancerId = Number(_loadbalancerId);
 
   return (
     <Accordion
       defaultExpanded={configuration.id === Number(configurationId)}
       heading={<ConfigurationAccordionHeader configuration={configuration} />}
       headingProps={{ sx: { width: '100%' } }}
     >
-      <UnusedConfigurationNotice
-        configurationId={configuration.id}
-        loadbalancerId={loadbalancerId}
-      />
       <ConfigurationForm configuration={configuration} mode="edit" />
     </Accordion>
   );

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

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { Box } from 'src/components/Box';
 import { Stack } from 'src/components/Stack';
-import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Typography } from 'src/components/Typography';
 import { pluralize } from 'src/utilities/pluralize';
 
@@ -30,20 +28,7 @@ export const ConfigurationAccordionHeader = ({ configuration }: Props) => {
           {pluralize('Route', 'Routes', configuration.routes.length)}
         </Typography>
       </Stack>
-      {/* TODO: AGLB - Hook up endpoint status */}
-      <Stack direction="row" spacing={2}>
-        <Stack alignItems="center" direction="row" spacing={1}>
-          <Typography>Endpoints:</Typography>
-          <StatusIcon status="active" />
-          <Typography>4 up</Typography>
-          <Typography>&mdash;</Typography>
-          <StatusIcon status="error" />
-          <Typography>6 down</Typography>
-        </Stack>
-        <Box>
-          <Typography>ID: {configuration.id}</Typography>
-        </Box>
-      </Stack>
+      <Typography>ID: {configuration.id}</Typography>
     </Stack>
   );
 };

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

@@ -20,10 +20,6 @@ import {
   useLoadBalancerConfigurationCreateMutation,
   useLoadBalancerConfigurationMutation,
 } from 'src/queries/aglb/configurations';
-import {
-  useLoadBalancerMutation,
-  useLoadBalancerQuery,
-} from 'src/queries/aglb/loadbalancers';
 import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';
 
 import { AddRouteDrawer } from '../Routes/AddRouteDrawer';
@@ -49,7 +45,7 @@ interface CreateProps {
   configuration?: never;
   mode: 'create';
   onCancel: () => void;
-  onSuccess: () => void;
+  onSuccess: (configuration: Configuration) => void;
 }
 
 export const ConfigurationForm = (props: CreateProps | EditProps) => {
@@ -81,11 +77,6 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => {
     configuration?.id ?? -1
   );
 
-  const { data: loadbalancer } = useLoadBalancerQuery(loadbalancerId);
-  const { mutateAsync: updateLoadbalancer } = useLoadBalancerMutation(
-    loadbalancerId
-  );
-
   const formValues = useMemo(() => {
     if (mode === 'edit') {
       return getConfigurationPayloadFromConfiguration(configuration);
@@ -103,19 +94,7 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => {
       try {
         const configuration = await mutateAsync(values);
         if (onSuccess) {
-          onSuccess();
-        }
-        if (mode === 'create') {
-          if (!loadbalancer) {
-            return;
-          }
-          const existingConfigs = loadbalancer?.configurations.map(
-            (config) => config.id
-          );
-          // Silently associate the new configuration with the Load Balancer
-          updateLoadbalancer({
-            configuration_ids: [...existingConfigs, configuration.id],
-          });
+          onSuccess(configuration);
         }
       } catch (error) {
         helpers.setErrors(getFormikErrorsFromAPIErrors(error));
@@ -196,6 +175,7 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => {
             labelTooltipText="TODO: AGLB"
             name="port"
             onChange={formik.handleChange}
+            type="number"
             value={formik.values.port}
           />
         </Stack>

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import { Waypoint } from 'react-waypoint';
 
 import { Box } from 'src/components/Box';
@@ -15,6 +15,7 @@ import { ConfigurationForm } from './Configurations/ConfigurationForm';
 
 export const LoadBalancerConfigurations = () => {
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
+  const history = useHistory();
 
   const [isCreating, setIsCreating] = useState(false);
 
@@ -56,9 +57,14 @@ export const LoadBalancerConfigurations = () => {
         {isCreating && (
           <Paper>
             <ConfigurationForm
+              onSuccess={(configuration) => {
+                history.push(
+                  `/loadbalancers/${loadbalancerId}/configurations/${configuration.id}`
+                );
+                setIsCreating(false);
+              }}
               mode="create"
               onCancel={() => setIsCreating(false)}
-              onSuccess={() => setIsCreating(false)}
             />
           </Paper>
         )}

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

@@ -7,7 +7,9 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 
+import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { Tabs } from 'src/components/ReachTabs';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
@@ -57,7 +59,7 @@ export const LoadBalancerDetail = () => {
 
   const id = Number(loadbalancerId);
 
-  const { data: loadbalancer } = useLoadBalancerQuery(id);
+  const { data: loadbalancer, isLoading, error } = useLoadBalancerQuery(id);
 
   const tabs = [
     {
@@ -90,6 +92,14 @@ export const LoadBalancerDetail = () => {
     location.pathname.startsWith(`${url}/${tab.path}`)
   );
 
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
+  if (error) {
+    return <ErrorState errorText={error[0].reason} />;
+  }
+
   return (
     <>
       <DocumentTitleSegment segment={loadbalancer?.label ?? ''} />
@@ -108,7 +118,7 @@ export const LoadBalancerDetail = () => {
         docsLabel="Docs"
         docsLink="" // TODO: AGLB - Add docs link
       />
-      <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/LoadBalancerServiceTargets.tsx

@@ -138,7 +138,6 @@ export const LoadBalancerServiceTargets = () => {
             >
               Label
             </TableSortCell>
-            <TableCell>Endpoints</TableCell>
             <TableSortCell
               active={orderBy === 'protocol'}
               direction={order}

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

@@ -1,52 +1,32 @@
-import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Paper } from 'src/components/Paper';
-import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Typography } from 'src/components/Typography';
 import { IPAddress } from 'src/features/Linodes/LinodesLanding/IPAddress';
-import { useLoadBalancerConfigurationsQuery } from 'src/queries/aglb/configurations';
 import { useLoadBalancerQuery } from 'src/queries/aglb/loadbalancers';
 import { useRegionsQuery } from 'src/queries/regions';
 
+import { Ports } from '../LoadBalancerLanding/Ports';
+import { Stack } from 'src/components/Stack';
+
 export const LoadBalancerSummary = () => {
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
 
   const id = Number(loadbalancerId);
 
   const { data: loadbalancer } = useLoadBalancerQuery(id);
-  const { data: configurations } = useLoadBalancerConfigurationsQuery(id);
   const { data: regions } = useRegionsQuery();
 
-  const ports = configurations?.data.map((config) => config.port);
-
   const items = [
-    {
-      title: 'Endpoint Health',
-      value: (
-        <Stack alignItems="center" direction="row" spacing={1}>
-          <StatusIcon status="active" />
-          <Typography>4 up</Typography>
-          <Typography>&mdash;</Typography>
-          <StatusIcon status="error" />
-          <Typography>6 down</Typography>
-        </Stack>
-      ),
-    },
-
     {
       title: 'Hostname',
-      value: (
-        <Typography>
-          <IPAddress ips={[loadbalancer?.hostname ?? '']} isHovered />
-        </Typography>
-      ),
+      value: <IPAddress ips={[loadbalancer?.hostname ?? '']} isHovered />,
     },
     {
       title: 'Ports',
-      value: <Typography>{ports?.join(', ')}</Typography>,
+      value: <Ports loadbalancerId={id} />,
     },
     {
       title: 'Regions',