upcoming: [M3-9785, M3-9788, M3-10040] - Added NodeBalacer Table and replace Linodes with Resources and remove "Label" text from Subnet and Linode Column

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

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add NodeBalancer Table under VPC Subnets Table and rename "Linodes" column to "Resources" ([#12232](https://github.com/linode/manager/pull/12232))

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/SubnetLinodeRow.tsx

@@ -111,20 +111,20 @@ export const SubnetLinodeRow = (props: Props) => {
       )
     : _hasUnrecommendedConfiguration(config, subnetId);
 
-  if (linodeLoading || !linode) {
+  if (linodeLoading) {
     return (
       <TableRow hover={hover}>
-        <TableCell colSpan={6}>
+        <TableCell colSpan={6} style={{ textAlign: 'center' }}>
           <CircleProgress size="sm" />
         </TableCell>
       </TableRow>
     );
   }
 
-  if (linodeError) {
+  if (linodeError || !linode) {
     return (
       <TableRow data-testid="subnet-linode-row-error" hover={hover}>
-        <TableCell colSpan={5} style={{ paddingLeft: 24 }}>
+        <TableCell colSpan={6} style={{ justifyItems: 'center' }}>
           <Box alignItems="center" display="flex">
             <ErrorOutline
               data-qa-error-icon
@@ -341,7 +341,7 @@ const getIPRangesCellContents = (
 
 export const SubnetLinodeTableRowHead = (
   <TableRow>
-    <TableCell>Linode Label</TableCell>
+    <TableCell>Linode</TableCell>
     <TableCell sx={{ width: '14%' }}>Status</TableCell>
     <Hidden smDown>
       <TableCell>VPC IPv4</TableCell>

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,121 @@
+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) {
+    return (
+      <TableRow hover={hover}>
+        <TableCell colSpan={6} style={{ textAlign: 'center' }}>
+          <CircleProgress size="sm" />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  if (nodebalancerError || !nodebalancer) {
+    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/${nodeBalancerId}/summary`}>
+                Nodebalancer {nodeBalancerId}
+              </Link>
+            </Typography>
+          </Box>
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <TableRow>
+      <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 colSpan={2}>
+        <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

@@ -76,6 +76,43 @@ describe('VPC Detail Summary section', () => {
     getAllByText(vpcFactory1.updated);
   });
 
+  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', () => {
+        return HttpResponse.json(vpcFactory1);
+      })
+    );
+
+    const { getAllByText, queryByTestId } = await renderWithThemeAndRouter(
+      <VPCDetail />,
+      {
+        flags: { nodebalancerVpc: true },
+      }
+    );
+
+    const loadingState = queryByTestId(loadingTestId);
+    if (loadingState) {
+      await waitForElementToBeRemoved(loadingState);
+    }
+
+    getAllByText('Subnets');
+    getAllByText('Resources');
+    getAllByText('0');
+
+    getAllByText('Region');
+    getAllByText('US, Newark, NJ');
+
+    getAllByText('VPC ID');
+    getAllByText(vpcFactory1.id);
+
+    getAllByText('Created');
+    getAllByText(vpcFactory1.created);
+
+    getAllByText('Updated');
+    getAllByText(vpcFactory1.updated);
+  });
+
   it('should display description if one is provided', async () => {
     const vpcFactory1 = vpcFactory.build({
       description: `VPC for webserver and database.`,

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

@@ -16,11 +16,13 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { LKE_ENTERPRISE_VPC_WARNING } from 'src/features/Kubernetes/constants';
+import { useIsNodebalancerVPCEnabled } from 'src/features/NodeBalancers/utils';
 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';
@@ -48,6 +50,8 @@ const VPCDetail = () => {
     isLoading,
   } = useVPCQuery(Number(vpcId) || -1, Boolean(vpcId));
 
+  const flags = useIsNodebalancerVPCEnabled();
+
   const { data: regions } = useRegionsQuery();
 
   const handleEditVPC = (vpc: VPC) => {
@@ -93,7 +97,9 @@ const VPCDetail = () => {
   const regionLabel =
     regions?.find((r) => r.id === vpc.region)?.label ?? vpc.region;
 
-  const numLinodes = getUniqueLinodesFromSubnets(vpc.subnets);
+  const numResources = flags.isNodebalancerVPCEnabled
+    ? getUniqueResourcesFromSubnets(vpc.subnets)
+    : getUniqueLinodesFromSubnets(vpc.subnets);
 
   const summaryData = [
     [
@@ -102,8 +108,8 @@ const VPCDetail = () => {
         value: vpc.subnets.length,
       },
       {
-        label: 'Linodes',
-        value: numLinodes,
+        label: flags.isNodebalancerVPCEnabled ? 'Resources' : 'Linodes',
+        value: numResources,
       },
     ],
     [