change: [UIE-9888] - Display front end IP and backend VPCs for Nodebalancer

[grevanak-akamai]

Description 📝

Display front end IP and backend VPCs for Nodebalancer.

Changes 🔄

1. Update label for IP column in Node balancers table to Frontend IP
2. Update sub panels under summary panel in NB details page based on frontend and backend configuration for node balancer as per figma design
3. Show type of a nodebalancer for all types of nodebalancer. Update type to show for enterprise too when type is premium_40GB (As part of tiktok req - https://akamai.aha.io/features/ECE-380)
4. Update nodebalancer rows under each subnet table in VPC details page to show Frontend and backend IP values and remove backend status column.
5. Update nodebalancer and NodeBalancerVpcConfig object type to reflect new fields.
6. Add CRUD MSW data for node balancers
7. VPCs for a nodebalancer will have new field purpose based on which frontend and backend VPC for a nodebalancer can be distinguished.

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

Feb 2026

Preview 📷

Before	After

How to test 🧪

Note: To test premium and enterprise type nodebalancers, LKE-E cluster needs to be created which will create premium type of nodebalancers to which frontend IP ranges can be assigned. This entire process is not straightforward. So to make the review process simple and to cover all the scenarios, mock data has been setup with MSW CRUD.

• Open DevTools Panel and enable CRUD mocks: Toggle "Enable MSW" to ON -> Select "CRUD" preset
• In DevTools Panel, navigate to "Seeds" section -> Set seed counts: Kubernetes: 1, Nodebalancers: 4, VPCs: 10
• Navigate to /nodebalancers page and take a look at all the nodebalancer to verify all the usecases as in figma design
• To test changes in VPC details page, create a node balancer with VPC attached and then open details page for that VPC.

Verification steps

• Ensure above mentioned changes reflect and existing features work as is without any regression impact.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #4 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	865 Passing	11 Skipped	39m 45s

Details

Failing Tests
	Spec	Test
❌	quotas-storage.spec.ts	Cloud Manager Cypress Tests→Quota workflow tests→Quota storage table » Quotas and quota usages display properly

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/account/quotas-storage.spec.ts"

[Copilot]

Pull request overview

This PR updates the NodeBalancer UI to display frontend IP addresses and backend VPC configurations separately, aligned with new API capabilities. The changes introduce a purpose field to distinguish between frontend and backend VPC configurations, add support for displaying the Enterprise nodebalancer type (premium_40GB), and reorganize the NodeBalancer details page to clearly separate frontend and backend information.

Changes:

• Added purpose, frontend_address_type, and frontend_vpc_subnet_id fields to NodeBalancer and NodeBalancerVpcConfig types
• Updated NodeBalancer details page to show separate "Frontend Configuration" and "Backend Configuration - VPC" panels
• Changed "IP Address" column label to "Frontend IP" in the NodeBalancers landing table
• Updated VPC subnet tables to display frontend and backend IP ranges separately, removing the backend status column
• Added comprehensive MSW CRUD mock data for testing nodebalancer VPC configurations

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
packages/api-v4/src/nodebalancers/types.ts	Added premium_40GB to NodeBalancerType, added frontend_address_type and frontend_vpc_subnet_id to NodeBalancer, added purpose to NodeBalancerVpcConfig
packages/utilities/src/factories/nodebalancer.ts	Updated factory to generate varied nodebalancer types including Enterprise, renamed nodeBalancerConfigVPCFactory to nodeBalancerVPCFactory, added purpose field
packages/manager/src/mocks/types.ts	Added nodeBalancerVPCs to MockState
packages/manager/src/mocks/mockState.ts	Initialized nodeBalancerVPCs array in emptyStore
packages/manager/src/mocks/presets/crud/seeds/nodebalancers.ts	Added seeding logic for nodeBalancerVPCs
packages/manager/src/mocks/presets/crud/handlers/nodebalancers.ts	Added handler for /nodebalancers/:id/vpcs endpoint
packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx	Changed "IP Address" column label to "Frontend IP"
packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerVPC.tsx	Updated to filter and display only backend VPC configs
packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.tsx	Restructured to show separate Frontend Configuration and Backend Configuration panels, displays all nodebalancer types (Basic/Premium/Enterprise)
packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx	Updated to pass subnetId to SubnetNodeBalancerRow
packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx	Replaced backend status with frontend/backend IPv4/IPv6 columns, uses useNodeBalancerVPCConfigsBetaQuery
packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.test.tsx	Updated tests to reflect new component behavior
packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx	Updated test expectations for new column headers
packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx	Added tests for Basic and Enterprise nodebalancer types
packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.test.tsx	Updated test to expect "Frontend IP" column label
packages/manager/.changeset/pr-13394-changed-1770903888397.md	Changeset for manager package
packages/api-v4/.changeset/pr-13394-changed-1770903849543.md	Changeset for api-v4 package

Comments suppressed due to low confidence (1)

packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.test.tsx:96

• The configs variable and its mock return value on line 96 are no longer used since useAllNodeBalancerConfigsQuery was removed from the component. These should be removed to clean up the test.

  const configs = [
    { nodes_status: { up: 3, down: 1 } },
    { nodes_status: { up: 2, down: 2 } },
  ];

  const firewalls = makeResourcePage(
    firewallFactory.buildList(1, { label: 'mock-firewall' })
  );

  const vpcConfigs = makeResourcePage([
    nodeBalancerVPCFactory.build({
      ipv4_range: '192.168.1.0/30',
      ipv6_range: '2001:db8::1/64',
      nodebalancer_id: nodebalancer.id,
      purpose: 'frontend',
      subnet_id: subnetId,
    }),
    nodeBalancerVPCFactory.build({
      ipv4_range: '192.168.2.0/30',
      ipv6_range: '2001:db8::2/64',
      nodebalancer_id: nodebalancer.id,
      purpose: 'backend',
      subnet_id: subnetId,
    }),
  ]);

  it('renders loading state', async () => {
    queryMocks.useNodeBalancerQuery.mockReturnValue({
      isLoading: true,
    });
    const { getByTestId } = renderWithTheme(
      wrapWithTableBody(
        <SubnetNodeBalancerRow
          nodeBalancerId={nodebalancer.id}
          subnetId={subnetId}
        />
      )
    );

    expect(getByTestId(LOADING_TEST_ID)).toBeInTheDocument();
    // now that we're mocking the query to return isLoading, the loading state will not be removed
    // await waitForElementToBeRemoved(() => getByTestId(LOADING_TEST_ID));
  });

  it('renders nodebalancer row with data', async () => {
    queryMocks.useNodeBalancerQuery.mockReturnValue({
      data: nodebalancer,
    });
    queryMocks.useAllNodeBalancerConfigsQuery.mockReturnValue({
      data: configs,

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.