Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: [M3-7021] - Added Firewall panel to create NodeBalancer flow #9733

Merged
merged 3 commits into from
Oct 12, 2023
Merged

feat: [M3-7021] - Added Firewall panel to create NodeBalancer flow #9733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51084a8
merged with upstream
TylerWJ Oct 11, 2023
422d048
Added changeset: Added Firewall Panel to NodeBalancer Create flow
TylerWJ Oct 11, 2023
aeadfe2
Merge remote-tracking branch 'upstream/feature/firewall-nodebalancer'…
TylerWJ Oct 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/api-v4/src/nodebalancers/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,7 @@ export interface CreateNodeBalancerConfigNode {
weight?: number;
}

export type UpdateNodeBalancerConfigNode = Partial<
CreateNodeBalancerConfigNode
>;
export type UpdateNodeBalancerConfigNode = Partial<CreateNodeBalancerConfigNode>;

export interface NodeBalancerConfigNode {
address: string;
Expand All @@ -119,6 +117,7 @@ export interface NodeBalancerConfigNode {
nodebalancer_id: number;
status: 'unknown' | 'UP' | 'DOWN';
weight: number;
firewall_id?: number;
}

export interface NodeBalancerConfigNodeWithPort extends NodeBalancerConfigNode {
Expand Down
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-9733-upcoming-features-1697041470658.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

Added Firewall Panel to NodeBalancer Create flow ([#9733](https://github.com/linode/manager/pull/9733))
53 changes: 42 additions & 11 deletions packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor Author

@tyler-akamai tyler-akamai Sep 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is from Dajahi's most recent PR: #9635

import { SelectRegionPanel } from 'src/components/SelectRegionPanel/SelectRegionPanel';
import { Tag, TagsInput } from 'src/components/TagsInput/TagsInput';
import { TextField } from 'src/components/TextField';
Expand Down Expand Up @@ -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[];
Expand Down Expand Up @@ -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 = [];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cleaned up summary item logic so its consistent with the Linode create flow.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its also easier this way to conditionally add items (like "Firewall Assigned")


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` });
Expand Down Expand Up @@ -472,6 +486,23 @@ const NodeBalancerCreate = () => {
regions={regions ?? []}
selectedID={nodeBalancerFields.region}
/>
<SelectFirewallPanel
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also decided to keep the "Create Firewall" link below the input for consistency with the Linode Create flow, also I think its a useful feature.

handleFirewallChange={(firewallId: number) => {
setNodeBalancerFields((prev) => ({
...prev,
firewall_id: firewallId > 0 ? firewallId : undefined,
}));
}}
helperText={
<Typography>
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 <Link to="/firewalls">Firewalls</Link>.{' '}
{/* @TODO Firewall-NodeBalancer: Update link */}
<Link to="">Learn more about creating Firewalls</Link>.
</Typography>
}
/>
<Box marginBottom={2} marginTop={2}>
{nodeBalancerFields.configs.map((nodeBalancerConfig, idx) => {
const onChange = (key: keyof NodeBalancerConfigFieldsWithStatus) => (
Expand Down