From e04fae8ba6c27a6d386bd53bc980424bb8dfc359 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 14 Nov 2023 12:13:56 -0500 Subject: [PATCH 01/15] initial refinements --- .../Configurations/ConfigurationAccordion.tsx | 10 --- .../Configurations/ConfigurationForm.tsx | 26 +------ .../UnusedConfigurationNotice.tsx | 76 ------------------- .../LoadBalancerConfigurations.tsx | 10 ++- .../LoadBalancerLanding/LoadBalancerRow.tsx | 38 ++++++++-- .../src/queries/aglb/configurations.ts | 9 +++ 6 files changed, 52 insertions(+), 117 deletions(-) delete mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/UnusedConfigurationNotice.tsx diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx index 538424e84d8..fb1fc36284e 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx +++ b/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,11 +15,6 @@ 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 ( { heading={} headingProps={{ sx: { width: '100%' } }} > - ); diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx index c714ec1f4fa..69af143bdba 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx +++ b/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} /> diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/UnusedConfigurationNotice.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/UnusedConfigurationNotice.tsx deleted file mode 100644 index dd1964a82e0..00000000000 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/UnusedConfigurationNotice.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { APIError } from '@linode/api-v4'; -import { useSnackbar } from 'notistack'; -import React from 'react'; - -import { Button } from 'src/components/Button/Button'; -import { Notice } from 'src/components/Notice/Notice'; -import { Stack } from 'src/components/Stack'; -import { Typography } from 'src/components/Typography'; -import { - useLoadBalancerMutation, - useLoadBalancerQuery, -} from 'src/queries/aglb/loadbalancers'; - -interface Props { - configurationId: number; - loadbalancerId: number; -} - -export const UnusedConfigurationNotice = (props: Props) => { - const { configurationId, loadbalancerId } = props; - const { enqueueSnackbar } = useSnackbar(); - - const { data: loadbalancer } = useLoadBalancerQuery(loadbalancerId); - const { - isLoading, - mutateAsync: updateLoadbalancer, - } = useLoadBalancerMutation(loadbalancerId); - - const isConfigurationUsed = loadbalancer?.configurations.some( - (config) => config.id === configurationId - ); - - const onAttach = async () => { - if (!loadbalancer) { - return; - } - - const existingConfigs = loadbalancer?.configurations.map( - (config) => config.id - ); - - try { - await updateLoadbalancer({ - configuration_ids: [...existingConfigs, configurationId], - }); - - enqueueSnackbar( - `Successfully enabled configuration ${configurationId}.`, - { - variant: 'success', - } - ); - } catch (error) { - enqueueSnackbar((error as APIError[])[0].reason, { - variant: 'error', - }); - } - }; - - if (isConfigurationUsed) { - return null; - } - - return ( - - - - This Configuration is not in use by your Load Balancer. - - - - - ); -}; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx index f1bb7648612..97079e988aa 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx +++ b/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 && ( { + history.push( + `/loadbalancers/${loadbalancerId}/configurations/${configuration.id}` + ); + setIsCreating(false); + }} mode="create" onCancel={() => setIsCreating(false)} - onSuccess={() => setIsCreating(false)} /> )} diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx index 8aa75000fcd..a50392f91cd 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx @@ -1,9 +1,10 @@ import { Loadbalancer } from '@linode/api-v4'; -import { Stack } from 'src/components/Stack'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { Hidden } from 'src/components/Hidden'; +import { Skeleton } from 'src/components/Skeleton'; +import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; @@ -18,14 +19,12 @@ export interface LoadBalancerHandlers { } interface Props { - loadBalancer: Loadbalancer; handlers: LoadBalancerHandlers; + loadBalancer: Loadbalancer; } -export const LoadBalancerRow = ({ loadBalancer, handlers }: Props) => { +export const LoadBalancerRow = ({ handlers, loadBalancer }: Props) => { const { id, label, regions } = loadBalancer; - const { data: configurations } = useLoadBalancerConfigurationsQuery(id); - const ports = configurations?.data.map((config) => config.port); return ( { - {ports?.join(', ')} + + + @@ -64,3 +65,28 @@ export const LoadBalancerRow = ({ loadBalancer, handlers }: Props) => { ); }; + +interface PortProps { + loadbalancerId: number; +} + +const Ports = ({ loadbalancerId }: PortProps) => { + const { + data: configurations, + error, + isLoading, + } = useLoadBalancerConfigurationsQuery(loadbalancerId); + + const ports = configurations?.data.map((config) => config.port); + + if (isLoading) { + return ; + } + + if (error) { + return Unknown; + } + + // @TODO handle tons of ports + return {ports!.join(', ')}; +}; diff --git a/packages/manager/src/queries/aglb/configurations.ts b/packages/manager/src/queries/aglb/configurations.ts index 644f686e2fc..56c3f0710e6 100644 --- a/packages/manager/src/queries/aglb/configurations.ts +++ b/packages/manager/src/queries/aglb/configurations.ts @@ -73,6 +73,9 @@ export const useLoadBalancerConfigurationMutation = ( loadbalancerId, 'configurations', ]); + // The GET /v4/aglb endpoint also returns configuration data that we must update + queryClient.invalidateQueries([QUERY_KEY, 'paginated']); + queryClient.invalidateQueries([QUERY_KEY, 'aglb', loadbalancerId]); }, } ); @@ -93,6 +96,9 @@ export const useLoadBalancerConfigurationCreateMutation = ( loadbalancerId, 'configurations', ]); + // The GET /v4/aglb endpoint also returns configuration data that we must update + queryClient.invalidateQueries([QUERY_KEY, 'paginated']); + queryClient.invalidateQueries([QUERY_KEY, 'aglb', loadbalancerId]); }, } ); @@ -114,6 +120,9 @@ export const useLoadBalancerConfigurationDeleteMutation = ( loadbalancerId, 'configurations', ]); + // The GET /v4/aglb endpoint also returns configuration data that we must update + queryClient.invalidateQueries([QUERY_KEY, 'paginated']); + queryClient.invalidateQueries([QUERY_KEY, 'aglb', loadbalancerId]); }, } ); From 8a25b02bafd0f3e3c0a14d40728b0d893195c728 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 14 Nov 2023 12:39:17 -0500 Subject: [PATCH 02/15] add loading and error state to details --- .../LoadBalancerDetail/LoadBalancerDetail.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx index f46ef1fee54..1a31dbedc46 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx +++ b/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 ; + } + + if (error) { + return ; + } + return ( <> From 29ac22313a2861e9ed07376202f8f573e38b2c4a Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 14 Nov 2023 12:59:53 -0500 Subject: [PATCH 03/15] add hostname to table --- .../LoadBalancerLanding.tsx | 3 ++ .../LoadBalancerLanding/LoadBalancerRow.tsx | 33 +++---------------- .../LoadBalancerLanding/Ports.tsx | 29 ++++++++++++++++ 3 files changed, 37 insertions(+), 28 deletions(-) create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx index 230259340d9..519cf9ef0e4 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx @@ -122,6 +122,9 @@ export const LoadBalancerLanding = () => { Ports + + Hostname + Regions diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx index a50392f91cd..39eaa589253 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx @@ -3,15 +3,14 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; import { Hidden } from 'src/components/Hidden'; -import { Skeleton } from 'src/components/Skeleton'; import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { Typography } from 'src/components/Typography'; -import { useLoadBalancerConfigurationsQuery } from 'src/queries/aglb/configurations'; import { LoadBalancerActionsMenu } from './LoadBalancerActionsMenu'; +import { Ports } from './Ports'; import { RegionsCell } from './RegionsCell'; export interface LoadBalancerHandlers { @@ -24,7 +23,7 @@ interface Props { } export const LoadBalancerRow = ({ handlers, loadBalancer }: Props) => { - const { id, label, regions } = loadBalancer; + const { hostname, id, label, regions } = loadBalancer; return ( { + + {hostname} + {regions.map((region) => ( @@ -65,28 +67,3 @@ export const LoadBalancerRow = ({ handlers, loadBalancer }: Props) => { ); }; - -interface PortProps { - loadbalancerId: number; -} - -const Ports = ({ loadbalancerId }: PortProps) => { - const { - data: configurations, - error, - isLoading, - } = useLoadBalancerConfigurationsQuery(loadbalancerId); - - const ports = configurations?.data.map((config) => config.port); - - if (isLoading) { - return ; - } - - if (error) { - return Unknown; - } - - // @TODO handle tons of ports - return {ports!.join(', ')}; -}; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx new file mode 100644 index 00000000000..6d3c3862365 --- /dev/null +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import { Skeleton } from 'src/components/Skeleton'; +import { Typography } from 'src/components/Typography'; +import { useLoadBalancerConfigurationsQuery } from 'src/queries/aglb/configurations'; + +interface PortProps { + loadbalancerId: number; +} + +export const Ports = ({ loadbalancerId }: PortProps) => { + const { + data: configurations, + error, + isLoading, + } = useLoadBalancerConfigurationsQuery(loadbalancerId); + + const ports = configurations?.data.map((config) => config.port); + + if (isLoading) { + return ; + } + + if (error || !ports) { + return Unknown; + } + + return {ports.join(', ')}; +}; From 000e2b8a289415b6e3e88286602d5eeae50ce8a3 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 14 Nov 2023 13:58:50 -0500 Subject: [PATCH 04/15] add some very basic testing --- .../LoadBalancerRow.test.tsx | 30 +++++++++++++++++ .../LoadBalancerLanding/Ports.test.tsx | 32 +++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.test.tsx create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.test.tsx diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.test.tsx new file mode 100644 index 00000000000..8c1adb62005 --- /dev/null +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { loadbalancerFactory } from 'src/factories'; +import { + mockMatchMedia, + renderWithTheme, + wrapWithTableBody, +} from 'src/utilities/testHelpers'; + +import { LoadBalancerRow } from './LoadBalancerRow'; + +beforeAll(() => mockMatchMedia()); + +describe('LoadBalancerRow', () => { + it('renders label and hostname', async () => { + const loadbalancer = loadbalancerFactory.build(); + + const { getByText } = renderWithTheme( + wrapWithTableBody( + + ) + ); + + expect(getByText(loadbalancer.label)).toBeVisible(); + expect(getByText(loadbalancer.hostname)).toBeVisible(); + }); +}); diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.test.tsx new file mode 100644 index 00000000000..7c8652be106 --- /dev/null +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.test.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import { configurationFactory } from 'src/factories'; +import { makeResourcePage } from 'src/mocks/serverHandlers'; +import { rest, server } from 'src/mocks/testServer'; +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { Ports } from './Ports'; + +describe('Ports', () => { + it('renders the port of each config', async () => { + const configs = [ + configurationFactory.build({ port: 80 }), + configurationFactory.build({ port: 8080 }), + configurationFactory.build({ port: 443 }), + configurationFactory.build({ port: 22 }), + ]; + + server.use( + rest.get('*/aglb/1/configurations*', (req, res, ctx) => { + return res(ctx.json(makeResourcePage(configs))); + }) + ); + + const { findByText } = renderWithTheme(); + + for (const config of configs) { + // eslint-disable-next-line no-await-in-loop + await findByText(config.port, { exact: false }); + } + }); +}); From 372ed16ebb7a5e0d9c5882b57a99642a34c68622 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 14 Nov 2023 14:19:33 -0500 Subject: [PATCH 05/15] Added changeset: Fix Configuration creation by fixing port type and other refinement --- .../.changeset/pr-9903-upcoming-features-1699989572934.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-9903-upcoming-features-1699989572934.md diff --git a/packages/manager/.changeset/pr-9903-upcoming-features-1699989572934.md b/packages/manager/.changeset/pr-9903-upcoming-features-1699989572934.md new file mode 100644 index 00000000000..dd64aac19b0 --- /dev/null +++ b/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)) From 7c295758bf36d57898fe13881176738461c7f7f7 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 14 Nov 2023 16:21:37 -0500 Subject: [PATCH 06/15] update e2e test --- .../core/loadBalancers/load-balancer-landing-page.spec.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-landing-page.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-landing-page.spec.ts index 9c68f200cb1..87cec38587f 100644 --- a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-landing-page.spec.ts +++ b/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(); }); From e542a1ac83c09c5e30f5e73b7b25e74851e89c1b Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 15 Nov 2023 11:06:30 -0500 Subject: [PATCH 07/15] remove impossible features for alpha --- .../ConfigurationAccordionHeader.tsx | 17 +------------ .../LoadBalancerServiceTargets.tsx | 1 - .../LoadBalancerSummary.tsx | 24 ++++--------------- .../ServiceTargets/ServiceTargetRow.tsx | 14 +---------- .../LoadBalancerLanding.tsx | 1 - .../LoadBalancerLanding/LoadBalancerRow.tsx | 13 ---------- 6 files changed, 6 insertions(+), 64 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordionHeader.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordionHeader.tsx index a5021bb0816..96e574fdf04 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordionHeader.tsx +++ b/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)} - {/* TODO: AGLB - Hook up endpoint status */} - - - Endpoints: - - 4 up - — - - 6 down - - - ID: {configuration.id} - - + ID: {configuration.id} ); }; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx index 5a625a82b7d..1fbcec94796 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx @@ -138,7 +138,6 @@ export const LoadBalancerServiceTargets = () => { > Label - Endpoints { 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: ( - - - 4 up - — - - 6 down - - ), - }, - { title: 'Hostname', value: ( @@ -46,7 +30,7 @@ export const LoadBalancerSummary = () => { }, { title: 'Ports', - value: {ports?.join(', ')}, + value: , }, { title: 'Regions', diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx index e02dbc4c867..9108539fb86 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx @@ -2,14 +2,11 @@ import React from 'react'; import { ActionMenu } from 'src/components/ActionMenu'; import { Hidden } from 'src/components/Hidden'; -import { Stack } from 'src/components/Stack'; -import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; -import { Typography } from 'src/components/Typography'; +import { useLoadbalancerCertificateQuery } from 'src/queries/aglb/certificates'; import type { ServiceTarget } from '@linode/api-v4'; -import { useLoadbalancerCertificateQuery } from 'src/queries/aglb/certificates'; interface Props { loadbalancerId: number; @@ -30,15 +27,6 @@ export const ServiceTargetRow = (props: Props) => { return ( {serviceTarget.label} - - - - 4 up - — - - 6 down - - {serviceTarget.protocol.toUpperCase()} diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx index 519cf9ef0e4..c022a91f970 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx @@ -118,7 +118,6 @@ export const LoadBalancerLanding = () => { > Label - Endpoints Ports diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx index 39eaa589253..79c1484343c 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerRow.tsx @@ -3,11 +3,8 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; import { Hidden } from 'src/components/Hidden'; -import { Stack } from 'src/components/Stack'; -import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; -import { Typography } from 'src/components/Typography'; import { LoadBalancerActionsMenu } from './LoadBalancerActionsMenu'; import { Ports } from './Ports'; @@ -33,16 +30,6 @@ export const LoadBalancerRow = ({ handlers, loadBalancer }: Props) => { {label} - - {/* TODO: AGLB - These are stub values for now*/} - - - 4 up - — - - 6 down - - From 614dbd9a61799551c371983b838417e152ecae85 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 15 Nov 2023 11:28:35 -0500 Subject: [PATCH 08/15] resolve two console errors --- .../LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx | 2 +- .../LoadBalancerDetail/LoadBalancerSummary.tsx | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx index 1a31dbedc46..2eca4f2f9f6 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx @@ -118,7 +118,7 @@ export const LoadBalancerDetail = () => { docsLabel="Docs" docsLink="" // TODO: AGLB - Add docs link /> - + null}> ({ ...t, routeName: `${url}/${t.path}` }))} /> diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx index d2ce5301e99..281f4d35606 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx @@ -22,11 +22,7 @@ export const LoadBalancerSummary = () => { const items = [ { title: 'Hostname', - value: ( - - - - ), + value: , }, { title: 'Ports', From 61508f66641f3ba067a6713fa2cb548558d1dded Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 15 Nov 2023 11:53:52 -0500 Subject: [PATCH 09/15] fix function name --- .../LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx index 50d3546b94d..37aa1036618 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RuleDrawer.tsx @@ -67,7 +67,7 @@ export const RuleDrawer = (props: Props) => { const { error, isLoading, - mutateAsync: updateRule, + mutateAsync: updateRoute, reset, } = useLoadBalancerRouteUpdateMutation(loadbalancerId, route?.id ?? -1); @@ -87,7 +87,7 @@ export const RuleDrawer = (props: Props) => { existingRules[ruleIndexToEdit] = rule; } - await updateRule({ + await updateRoute({ protocol: route?.protocol, // If we are editing, send the updated rules, otherwise // append a new rule to the end. From 8fca31b7905500fc4a7c21c98e32e735eb886b94 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 15 Nov 2023 12:16:17 -0500 Subject: [PATCH 10/15] improve loading state of ports on summary page --- .../src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx index 6d3c3862365..0d484733c35 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/Ports.tsx @@ -18,7 +18,7 @@ export const Ports = ({ loadbalancerId }: PortProps) => { const ports = configurations?.data.map((config) => config.port); if (isLoading) { - return ; + return ; } if (error || !ports) { From 0042f79e4fde7bdd4adc5ded07b6e23e260049b5 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 15 Nov 2023 12:31:58 -0500 Subject: [PATCH 11/15] update validation to match API --- .../Configurations/ConfigurationForm.tsx | 14 +++++++++++++- packages/validation/src/loadbalancers.schema.ts | 12 ++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx index 69af143bdba..fee83fef427 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx @@ -185,6 +185,15 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => { TLS Certificates + {formik.touched.certificates && + typeof formik.errors.certificates === 'string' && ( + + )} { />