feat: [M3-7031] - Add AGLB Create Service Target Drawer

packages/api-v4/src/aglb/service-targets.ts

@@ -8,6 +8,7 @@ import Request, {
 import { Filter, Params, ResourcePage } from '../types';
 import { BETA_API_ROOT } from '../constants';
 import type { ServiceTarget, ServiceTargetPayload } from './types';
+import { CreateServiceTargetSchema } from '@linode/validation';
 
 /**
  * getLoadbalancerServiceTargets
@@ -63,7 +64,7 @@ export const createLoadbalancerServiceTarget = (
         loadbalancerId
       )}/service-targets`
     ),
-    setData(data),
+    setData(data, CreateServiceTargetSchema),
     setMethod('POST')
   );
 

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

@@ -115,6 +115,7 @@ export interface ServiceTargetPayload {
 }
 
 interface HealthCheck {
+  protocol: 'tcp' | 'http';
   interval: number;
   timeout: number;
   unhealthy_threshold: number;
@@ -128,7 +129,7 @@ export interface ServiceTarget extends ServiceTargetPayload {
 }
 
 export interface Endpoint {
-  ip?: string;
+  ip: string;
   host?: string;
   port: number;
   rate_capacity: number;

packages/manager/.changeset/pr-9657-upcoming-features-1694451006203.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add AGLB Create Service Target Drawer ([#9657](https://github.com/linode/manager/pull/9657))

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

@@ -0,0 +1,230 @@
+/**
+ * @file Integration tests related to Cloud Manager AGLB Service Target management.
+ */
+
+import {
+  linodeFactory,
+  loadbalancerFactory,
+  serviceTargetFactory,
+  certificateFactory,
+} from '@src/factories';
+import {
+  mockAppendFeatureFlags,
+  mockGetFeatureFlagClientstream,
+} from 'support/intercepts/feature-flags';
+import {
+  mockGetLoadBalancer,
+  mockGetLoadBalancerCertificates,
+  mockGetServiceTargets,
+  mockCreateServiceTarget,
+} from 'support/intercepts/load-balancers';
+import { makeFeatureFlagData } from 'support/util/feature-flags';
+import type { Linode, ServiceTarget } from '@linode/api-v4';
+import { randomLabel, randomIp, randomNumber } from 'support/util/random';
+import { ui } from 'support/ui';
+import { chooseRegion } from 'support/util/regions';
+import { mockGetLinodes } from 'support/intercepts/linodes';
+
+describe('Akamai Global Load Balancer service targets', () => {
+  // TODO Remove this `beforeEach()` hook and related `cy.wait()` calls when `aglb` feature flag goes away.
+  beforeEach(() => {
+    mockAppendFeatureFlags({
+      aglb: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+  });
+
+  /*
+   * - Confirms that Load Balancer service targets are listed in the "Service Targets" tab.
+   */
+  it('lists Load Balancer service targets', () => {
+    const mockLoadBalancer = loadbalancerFactory.build();
+    // const mockServiceTargets = serviceTargetFactory.buildList(5);
+    const mockServiceTargets = new Array(5).fill(null).map(
+      (_item: null, i: number): ServiceTarget => {
+        return serviceTargetFactory.build({
+          label: randomLabel(),
+        });
+      }
+    );
+
+    mockGetLoadBalancer(mockLoadBalancer).as('getLoadBalancer');
+    mockGetServiceTargets(mockLoadBalancer, mockServiceTargets).as(
+      'getServiceTargets'
+    );
+
+    cy.visitWithLogin(`/loadbalancers/${mockLoadBalancer.id}/service-targets`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientStream',
+      '@getLoadBalancer',
+      '@getServiceTargets',
+    ]);
+
+    // Confirm that each service target is listed as expected.
+    mockServiceTargets.forEach((serviceTarget: ServiceTarget) => {
+      cy.findByText(serviceTarget.label).should('be.visible');
+      // TODO Assert that endpoints, health checks, algorithm, and certificates are listed.
+    });
+  });
+
+  /**
+   * - Confirms that service target page shows empty state when there are no service targets.
+   * - Confirms that clicking "Create Service Target" opens "Add a Service Target" drawer.
+   * - Confirms that "Add a Service Target" drawer can be cancelled.
+   * - Confirms that endpoints can be selected via Linode label and via IP address.
+   * - Confirms that health check can be disabled or re-enabled, and UI responds to toggle.
+   * - [TODO] Confirms that service target list updates to reflect created service target.
+   */
+  it('can create a Load Balancer service target', () => {
+    const loadBalancerRegion = chooseRegion();
+    const mockLinodes = new Array(2).fill(null).map(
+      (_item: null, _i: number): Linode => {
+        return linodeFactory.build({
+          label: randomLabel(),
+          region: loadBalancerRegion.id,
+          ipv4: [randomIp()],
+        });
+      }
+    );
+
+    const mockLoadBalancer = loadbalancerFactory.build({
+      regions: [loadBalancerRegion.id],
+    });
+    const mockServiceTarget = serviceTargetFactory.build({
+      label: randomLabel(),
+    });
+    const mockCertificate = certificateFactory.build({
+      label: randomLabel(),
+    });
+
+    mockGetLinodes(mockLinodes);
+    mockGetLoadBalancer(mockLoadBalancer).as('getLoadBalancer');
+    mockGetServiceTargets(mockLoadBalancer, []).as('getServiceTargets');
+    mockGetLoadBalancerCertificates(mockLoadBalancer.id, [mockCertificate]);
+
+    cy.visitWithLogin(`/loadbalancers/${mockLoadBalancer.id}/service-targets`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientStream',
+      '@getLoadBalancer',
+      '@getServiceTargets',
+    ]);
+
+    cy.findByText('No items to display.');
+
+    ui.button
+      .findByTitle('Create Service Target')
+      .should('be.visible')
+      .should('be.enabled')
+      .click();
+
+    // Confirm that drawer can be closed.
+    ui.drawer
+      .findByTitle('Add a Service Target')
+      .should('be.visible')
+      .within(() => {
+        ui.button
+          .findByTitle('Cancel')
+          .scrollIntoView()
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+      });
+
+    cy.get('[data-qa-drawer]').should('not.exist');
+
+    // Re-open "Add a Service Target" drawer.
+    ui.button
+      .findByTitle('Create Service Target')
+      .should('be.visible')
+      .should('be.enabled')
+      .click();
+
+    // Fill out service target drawer, click "Create Service Target".
+    mockCreateServiceTarget(mockLoadBalancer, mockServiceTarget).as(
+      'createServiceTarget'
+    );
+
+    ui.drawer
+      .findByTitle('Add a Service Target')
+      .should('be.visible')
+      .within(() => {
+        cy.findByText('Service Target Label')
+          .should('be.visible')
+          .click()
+          .type(mockServiceTarget.label);
+
+        // Fill out the first endpoint using the mocked Linode's label.
+        cy.findByText('Linode or Public IP Address')
+          .should('be.visible')
+          .click()
+          .type(mockLinodes[0].label);
+
+        ui.autocompletePopper
+          .findByTitle(mockLinodes[0].label)
+          .should('be.visible')
+          .click();
+
+        ui.button.findByTitle('Add Endpoint').should('be.visible').click();
+
+        // Verify the first endpoint was added to the table
+        cy.findByText(mockLinodes[0].label, { exact: false })
+          .scrollIntoView()
+          .should('be.visible');
+
+        // Create another endpoint
+        cy.findByText('Linode or Public IP Address')
+          .should('be.visible')
+          .click()
+          .type(mockLinodes[1].ipv4[0]);
+
+        ui.autocompletePopper
+          .findByTitle(mockLinodes[1].label)
+          .should('be.visible')
+          .click();
+
+        ui.button.findByTitle('Add Endpoint').should('be.visible').click();
+
+        // Verify the second endpoint was added to the table
+        cy.findByText(mockLinodes[1].label, { exact: false })
+          .scrollIntoView()
+          .should('be.visible');
+
+        // Select the certificate mocked for this load balancer.
+        cy.findByText('Certificate').click().type(mockCertificate.label);
+
+        ui.autocompletePopper
+          .findByTitle(mockCertificate.label)
+          .should('be.visible')
+          .click();
+
+        // Confirm that health check options are hidden when health check is disabled.
+        cy.findByText('Use Health Checks').should('be.visible').click();
+
+        cy.get('[data-qa-healthcheck-options]').should('not.exist');
+
+        // Re-enable health check, fill out form.
+        cy.findByText('Use Health Checks')
+          .scrollIntoView()
+          .should('be.visible')
+          .click();
+
+        cy.get('[data-qa-healthcheck-options]')
+          .scrollIntoView()
+          .should('be.visible');
+
+        ui.button
+          .findByTitle('Create Service Target')
+          .scrollIntoView()
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+      });
+    cy.wait('@createServiceTarget');
+
+    // TODO Assert that new service target is listed.
+    // cy.findByText('No items to display.').should('not.exist');
+    // cy.findByText(mockServiceTarget.label).should('not.exist');
+  });
+});

packages/manager/cypress/support/intercepts/load-balancers.ts

@@ -102,10 +102,13 @@ export const mockUploadLoadBalancerCertificate = (
  *
  * @returns Cypress chainable.
  */
-export const mockGetServiceTargets = (serviceTargets: ServiceTarget[]) => {
+export const mockGetServiceTargets = (
+  loadBalancer: Loadbalancer,
+  serviceTargets: ServiceTarget[]
+) => {
   return cy.intercept(
     'GET',
-    apiMatcher('/aglb/service-targets*'),
+    apiMatcher(`/aglb/${loadBalancer.id}/service-targets*`),
     paginateResponse(serviceTargets)
   );
 };
@@ -125,3 +128,22 @@ export const mockGetServiceTargetsError = (message?: string) => {
     makeErrorResponse(message ?? defaultMessage, 500)
   );
 };
+
+/**
+ * Intercepts POST request to create a service target and mocks response.
+ *
+ * @param loadBalancer - Load balancer for mocked service target.
+ * @param serviceTarget - Service target with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockCreateServiceTarget = (
+  loadBalancer: Loadbalancer,
+  serviceTarget: ServiceTarget
+) => {
+  return cy.intercept(
+    'POST',
+    apiMatcher(`/aglb/${loadBalancer.id}/service-targets`),
+    makeResponse(serviceTarget)
+  );
+};

packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx

@@ -51,7 +51,6 @@ export const CustomPopper = (props: PopperProps) => {
         ? `calc(${style.width} + 2px)`
         : style.width + 2
       : undefined,
-    zIndex: 1,
   };
 
   return (

packages/manager/src/components/TextField.tsx

@@ -1,5 +1,4 @@
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import { Box } from 'src/components/Box';
 import {
   default as _TextField,
   StandardTextFieldProps,
@@ -9,6 +8,7 @@ import { clamp } from 'ramda';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
+import { Box } from 'src/components/Box';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { FormHelperText } from 'src/components/FormHelperText';
 import { InputAdornment } from 'src/components/InputAdornment';
@@ -296,7 +296,7 @@ export const TextField = (props: TextFieldProps) => {
     inputId || (label ? convertToKebabCase(`${label}`) : undefined);
 
   return (
-    <div
+    <Box
       className={cx({
         [classes.helpWrapper]: Boolean(tooltipText),
         [errorScrollClassName]: !!errorText,
@@ -443,6 +443,6 @@ export const TextField = (props: TextFieldProps) => {
             {helperText}
           </FormHelperText>
         )}
-    </div>
+    </Box>
   );
 };