upcoming: [M3-9785, M3-9788] - Added NodeBalacer Table and replace Linodes with Resources

packages/manager/.changeset/pr-12232-upcoming-features-1747645656510.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Added NodeBalacer Table under Subnets Table and replace Linodes Text with Resources ([#12232](https://github.com/linode/manager/pull/12232))

packages/manager/cypress/e2e/core/vpc/vpc-create.spec.ts

@@ -27,7 +27,7 @@ import {
 import { extendRegion } from 'support/util/regions';
 
 import { accountUserFactory } from 'src/factories';
-import { getUniqueLinodesFromSubnets } from 'src/features/VPCs/utils';
+import { getUniqueResourcesFromSubnets } from 'src/features/VPCs/utils';
 
 import type { Subnet, VPC } from '@linode/api-v4';
 
@@ -78,7 +78,7 @@ describe('VPC create flow', () => {
     const ipValidationErrorMessage1 = 'A subnet must have an IPv4 range.';
     const ipValidationErrorMessage2 = 'The IPv4 range must be in CIDR format.';
     const vpcCreationErrorMessage = 'An unknown error has occurred.';
-    const totalSubnetUniqueLinodes = getUniqueLinodesFromSubnets(mockSubnets);
+    const totalSubnetUniqueLinodes = getUniqueResourcesFromSubnets(mockSubnets);
 
     mockGetRegions([mockVPCRegion]).as('getRegions');
 
@@ -238,7 +238,9 @@ describe('VPC create flow', () => {
       .should('be.visible')
       .within(() => {
         cy.contains(`Subnets ${mockVpc.subnets.length}`).should('be.visible');
-        cy.contains(`Linodes ${totalSubnetUniqueLinodes}`).should('be.visible');
+        cy.contains(`Resources ${totalSubnetUniqueLinodes}`).should(
+          'be.visible'
+        );
         cy.contains(`VPC ID ${mockVpc.id}`).should('be.visible');
         cy.contains(`Region ${mockVPCRegion.label}`).should('be.visible');
       });
@@ -276,7 +278,7 @@ describe('VPC create flow', () => {
       subnets: [],
     });
 
-    const totalSubnetUniqueLinodes = getUniqueLinodesFromSubnets([]);
+    const totalSubnetUniqueLinodes = getUniqueResourcesFromSubnets([]);
 
     mockGetRegions([mockVPCRegion]).as('getRegions');
 
@@ -326,7 +328,9 @@ describe('VPC create flow', () => {
       .should('be.visible')
       .within(() => {
         cy.contains(`Subnets ${mockVpc.subnets.length}`).should('be.visible');
-        cy.contains(`Linodes ${totalSubnetUniqueLinodes}`).should('be.visible');
+        cy.contains(`Resources ${totalSubnetUniqueLinodes}`).should(
+          'be.visible'
+        );
         cy.contains(`VPC ID ${mockVpc.id}`).should('be.visible');
         cy.contains(`Region ${mockVPCRegion.label}`).should('be.visible');
       });

packages/manager/src/factories/subnets.ts

@@ -3,6 +3,7 @@ import { Factory } from '@linode/utilities';
 import type {
   Subnet,
   SubnetAssignedLinodeData,
+  SubnetAssignedNodeBalancerData,
 } from '@linode/api-v4/lib/vpcs/types';
 
 // NOTE: Changing to fixed array length for the interfaces and linodes fields of the
@@ -20,6 +21,12 @@ export const subnetAssignedLinodeDataFactory =
     ),
   });
 
+export const subnetAssignedNodebalancerDataFactory =
+  Factory.Sync.makeFactory<SubnetAssignedNodeBalancerData>({
+    id: Factory.each((i) => i),
+    ipv4_range: Factory.each((i) => `192.168.${i}.0/30`),
+  });
+
 export const subnetFactory = Factory.Sync.makeFactory<Subnet>({
   created: '2023-07-12T16:08:53',
   id: Factory.each((i) => i),
@@ -32,6 +39,12 @@ export const subnetFactory = Factory.Sync.makeFactory<Subnet>({
       })
     )
   ),
-  nodebalancers: [],
+  nodebalancers: Factory.each((i) =>
+    Array.from({ length: 3 }, (_, arrIdx) =>
+      subnetAssignedNodebalancerDataFactory.build({
+        id: i * 10 + arrIdx,
+      })
+    )
+  ),
   updated: '2023-07-12T16:08:53',
 });

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

@@ -0,0 +1,97 @@
+import { waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import * as React from 'react';
+import { afterAll, afterEach, beforeAll, describe, it } from 'vitest';
+
+import {
+  firewallFactory,
+  subnetAssignedNodebalancerDataFactory,
+} from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { http, HttpResponse, server } from 'src/mocks/testServer';
+import {
+  mockMatchMedia,
+  renderWithTheme,
+  wrapWithTableBody,
+} from 'src/utilities/testHelpers';
+
+import { SubnetNodeBalancerRow } from './SubnetNodebalancerRow';
+
+const LOADING_TEST_ID = 'circle-progress';
+
+beforeAll(() => mockMatchMedia());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('SubnetNodeBalancerRow', () => {
+  const nodebalancer = {
+    id: 123,
+    label: 'test-nodebalancer',
+  };
+
+  const configs = [
+    { nodes_status: { up: 3, down: 1 } },
+    { nodes_status: { up: 2, down: 2 } },
+  ];
+
+  const firewalls = makeResourcePage(
+    firewallFactory.buildList(1, { label: 'mock-firewall' })
+  );
+
+  const subnetNodebalancer = subnetAssignedNodebalancerDataFactory.build({
+    id: nodebalancer.id,
+    ipv4_range: '192.168.99.0/30',
+  });
+
+  it('renders loading state', async () => {
+    const { getByTestId } = renderWithTheme(
+      wrapWithTableBody(
+        <SubnetNodeBalancerRow
+          ipv4={subnetNodebalancer.ipv4_range}
+          nodeBalancerId={subnetNodebalancer.id}
+        />
+      )
+    );
+
+    expect(getByTestId(LOADING_TEST_ID)).toBeInTheDocument();
+    await waitForElementToBeRemoved(() => getByTestId(LOADING_TEST_ID));
+  });
+
+  it('renders nodebalancer row with data', async () => {
+    server.use(
+      http.get('*/nodebalancers/:id', () => {
+        return HttpResponse.json(nodebalancer);
+      }),
+      http.get('*/nodebalancers/:id/configs', () => {
+        return HttpResponse.json(configs);
+      }),
+      http.get('*/nodebalancers/:id/firewalls', () => {
+        return HttpResponse.json(firewalls);
+      })
+    );
+
+    const { getByText, getByRole } = renderWithTheme(
+      wrapWithTableBody(
+        <SubnetNodeBalancerRow
+          ipv4={subnetNodebalancer.ipv4_range}
+          nodeBalancerId={nodebalancer.id}
+        />
+      )
+    );
+
+    await waitFor(() => {
+      expect(getByText(nodebalancer.label)).toBeInTheDocument();
+    });
+
+    expect(getByText(subnetNodebalancer.ipv4_range)).toBeInTheDocument();
+    expect(getByText('mock-firewall')).toBeInTheDocument();
+
+    const nodebalancerLink = getByRole('link', {
+      name: nodebalancer.label,
+    });
+
+    expect(nodebalancerLink).toHaveAttribute(
+      'href',
+      `/nodebalancers/${nodebalancer.id}/summary`
+    );
+  });
+});

packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx

@@ -0,0 +1,124 @@
+import {
+  useAllNodeBalancerConfigsQuery,
+  useNodeBalancerQuery,
+  useNodeBalancersFirewallsQuery,
+} from '@linode/queries';
+import { Box, CircleProgress, Hidden } from '@linode/ui';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import { Typography } from '@mui/material';
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
+import { TableCell } from 'src/components/TableCell';
+import { TableRow } from 'src/components/TableRow';
+
+interface Props {
+  hover?: boolean;
+  ipv4: string;
+  nodeBalancerId: number;
+}
+
+export const SubnetNodeBalancerRow = ({
+  nodeBalancerId,
+  hover = false,
+  ipv4,
+}: Props) => {
+  const {
+    data: nodebalancer,
+    error: nodebalancerError,
+    isLoading: nodebalancerLoading,
+  } = useNodeBalancerQuery(nodeBalancerId);
+  const { data: attachedFirewallData } = useNodeBalancersFirewallsQuery(
+    Number(nodeBalancerId)
+  );
+  const { data: configs } = useAllNodeBalancerConfigsQuery(
+    Number(nodeBalancerId)
+  );
+
+  const firewallLabel = attachedFirewallData?.data[0]?.label;
+  const firewallId = attachedFirewallData?.data[0]?.id;
+
+  const down = configs?.reduce((acc: number, config) => {
+    return acc + config.nodes_status.down;
+  }, 0); // add the downtime for each config together
+
+  const up = configs?.reduce((acc: number, config) => {
+    return acc + config.nodes_status.up;
+  }, 0); // add the uptime for each config together
+
+  if (nodebalancerLoading || !nodebalancer) {
+    return (
+      <TableRow hover={hover}>
+        <TableCell colSpan={6} style={{ justifyItems: 'center' }}>
+          <CircleProgress size="sm" />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  if (nodebalancerError) {
+    return (
+      <TableRow data-testid="subnet-nodebalancer-row-error" hover={hover}>
+        <TableCell colSpan={6} style={{ justifyItems: 'center' }}>
+          <Box alignItems="center" display="flex">
+            <ErrorOutline
+              data-qa-error-icon
+              sx={(theme) => ({ color: theme.color.red, marginRight: 1 })}
+            />
+            <Typography>
+              There was an error loading{' '}
+              <Link to={`/nodebalancers/${nodebalancer?.id}/summary`}>
+                Nodebalancer {nodeBalancerId}
+              </Link>
+            </Typography>
+          </Box>
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <TableRow key={nodeBalancerId}>
+      <TableCell>
+        <Link
+          className="secondaryLink"
+          to={`/nodebalancers/${nodebalancer?.id}/summary`}
+        >
+          {nodebalancer?.label}
+        </Link>
+      </TableCell>
+      <TableCell statusCell>
+        <StatusIcon
+          aria-label={`Nodebalancer status active`}
+          status={'active'}
+        />
+        {`${up} up, ${down} down`}
+      </TableCell>
+      <TableCell>{ipv4}</TableCell>
+      <TableCell>
+        <Link
+          accessibleAriaLabel={`Firewall ${firewallLabel}`}
+          className="secondaryLink"
+          to={`/firewalls/${firewallId}`}
+        >
+          {firewallLabel}
+        </Link>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export const SubnetNodebalancerTableRowHead = (
+  <TableRow>
+    <TableCell>NodeBalancer</TableCell>
+    <TableCell>Backend Status</TableCell>
+    <Hidden smDown>
+      <TableCell>VPC IPv4 Range</TableCell>
+    </Hidden>
+    <Hidden smDown>
+      <TableCell>Firewalls</TableCell>
+    </Hidden>
+    <TableCell />
+  </TableRow>
+);

packages/manager/src/features/VPCs/VPCDetail/VPCDetail.test.tsx

@@ -42,7 +42,7 @@ describe('VPC Detail Summary section', () => {
     });
   });
 
-  it('should display number of subnets and linodes, region, id, creation and update dates', async () => {
+  it('should display number of subnets and resources, region, id, creation and update dates', async () => {
     const vpcFactory1 = vpcFactory.build({ id: 1, subnets: [] });
     server.use(
       http.get('*/vpcs/:vpcId', () => {
@@ -60,7 +60,7 @@ describe('VPC Detail Summary section', () => {
     }
 
     getAllByText('Subnets');
-    getAllByText('Linodes');
+    getAllByText('Resources');
     getAllByText('0');
 
     getAllByText('Region');

packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx

@@ -20,7 +20,7 @@ import { VPC_DOCS_LINK, VPC_LABEL } from 'src/features/VPCs/constants';
 
 import {
   getIsVPCLKEEnterpriseCluster,
-  getUniqueLinodesFromSubnets,
+  getUniqueResourcesFromSubnets,
 } from '../utils';
 import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog';
 import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer';
@@ -93,7 +93,7 @@ const VPCDetail = () => {
   const regionLabel =
     regions?.find((r) => r.id === vpc.region)?.label ?? vpc.region;
 
-  const numLinodes = getUniqueLinodesFromSubnets(vpc.subnets);
+  const numLinodes = getUniqueResourcesFromSubnets(vpc.subnets);
 
   const summaryData = [
     [
@@ -102,7 +102,7 @@ const VPCDetail = () => {
         value: vpc.subnets.length,
       },
       {
-        label: 'Linodes',
+        label: 'Resources',
         value: numLinodes,
       },
     ],