diff --git a/packages/api-v4/src/nodebalancers/types.ts b/packages/api-v4/src/nodebalancers/types.ts index c3d9aab28d9..79b35668058 100644 --- a/packages/api-v4/src/nodebalancers/types.ts +++ b/packages/api-v4/src/nodebalancers/types.ts @@ -106,9 +106,7 @@ export interface CreateNodeBalancerConfigNode { weight?: number; } -export type UpdateNodeBalancerConfigNode = Partial< - CreateNodeBalancerConfigNode ->; +export type UpdateNodeBalancerConfigNode = Partial; export interface NodeBalancerConfigNode { address: string; @@ -119,6 +117,7 @@ export interface NodeBalancerConfigNode { nodebalancer_id: number; status: 'unknown' | 'UP' | 'DOWN'; weight: number; + firewall_id?: number; } export interface NodeBalancerConfigNodeWithPort extends NodeBalancerConfigNode { diff --git a/packages/manager/.changeset/pr-9733-upcoming-features-1697041470658.md b/packages/manager/.changeset/pr-9733-upcoming-features-1697041470658.md new file mode 100644 index 00000000000..ff160082d3a --- /dev/null +++ b/packages/manager/.changeset/pr-9733-upcoming-features-1697041470658.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Added Firewall Panel to NodeBalancer Create flow ([#9733](https://github.com/linode/manager/pull/9733)) diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index c4f2d3d219d..d779c3bf602 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -21,8 +21,10 @@ import { CheckoutSummary } from 'src/components/CheckoutSummary/CheckoutSummary' import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; +import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; +import { SelectFirewallPanel } from 'src/components/SelectFirewallPanel/SelectFirewallPanel'; import { SelectRegionPanel } from 'src/components/SelectRegionPanel/SelectRegionPanel'; import { Tag, TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; @@ -56,6 +58,7 @@ import type { APIError } from '@linode/api-v4/lib/types'; interface NodeBalancerFieldsState { configs: (NodeBalancerConfigFieldsWithStatus & { errors?: any })[]; + firewall_id?: number; label?: string; region?: string; tags?: string[]; @@ -399,17 +402,28 @@ const NodeBalancerCreate = () => { regionId: nodeBalancerFields.region, }); - const summaryItems = [ - { title: regionLabel }, - { details: nodeBalancerFields.configs.length, title: 'Configs' }, - { - details: nodeBalancerFields.configs.reduce( - (acc, config) => acc + config.nodes.length, - 0 - ), - title: 'Nodes', - }, - ].filter((item) => Boolean(item.title)); + const summaryItems = []; + + if (regionLabel) { + summaryItems.push({ title: regionLabel }); + } + + if (nodeBalancerFields.firewall_id) { + summaryItems.push({ title: 'Firewall Assigned' }); + } + + summaryItems.push({ + details: nodeBalancerFields.configs.length, + title: 'Configs', + }); + + summaryItems.push({ + details: nodeBalancerFields.configs.reduce( + (acc, config) => acc + config.nodes.length, + 0 + ), + title: 'Nodes', + }); if (nodeBalancerFields.region) { summaryItems.unshift({ title: `$${price}/month` }); @@ -472,6 +486,23 @@ const NodeBalancerCreate = () => { regions={regions ?? []} selectedID={nodeBalancerFields.region} /> + { + setNodeBalancerFields((prev) => ({ + ...prev, + firewall_id: firewallId > 0 ? firewallId : undefined, + })); + }} + helperText={ + + Assign an existing Firewall to this NodeBalancer to control inbound + network traffic. If you want to assign a new Firewall to this + NodeBalancer, go to Firewalls.{' '} + {/* @TODO Firewall-NodeBalancer: Update link */} + Learn more about creating Firewalls. + + } + /> {nodeBalancerFields.configs.map((nodeBalancerConfig, idx) => { const onChange = (key: keyof NodeBalancerConfigFieldsWithStatus) => (