jaalah-akamai · Jun 11, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 4, 2025 · Jun 6, 2025
diff --git a/packages/manager/.changeset/pr-12315-added-1748958561739.md b/packages/manager/.changeset/pr-12315-added-1748958561739.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Error State for NodeBalancer Table Cells under Subnets Table in VPC Details ([#12315](https://github.com/linode/manager/pull/12315))
diff --git a/packages/manager/src/components/TableCell/TableCell.tsx b/packages/manager/src/components/TableCell/TableCell.tsx
@@ -7,6 +7,7 @@ import type { TableCellProps as _TableCellProps } from '@mui/material/TableCell'
 
 export interface TableCellProps extends _TableCellProps {
   actionCell?: boolean;
+  capitalizationOverride?: boolean;
   center?: boolean;
   className?: string;
   compact?: boolean;
@@ -19,6 +20,7 @@ export interface TableCellProps extends _TableCellProps {
 export const TableCell = (props: TableCellProps) => {
   const {
     actionCell,
+    capitalizationOverride,
     center,
     className,
     errorCell,
@@ -34,7 +36,8 @@ export const TableCell = (props: TableCellProps) => {
       sx={{
         paddingRight: actionCell ? 0 : '',
         textAlign: actionCell ? 'right' : center ? 'center' : '',
-        textTransform: statusCell ? 'capitalize' : '',
+        textTransform:
+          statusCell && !capitalizationOverride ? 'capitalize' : '',
         whiteSpace: noWrap ? 'nowrap' : '',
       }}
       {...rest}

diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
@@ -341,7 +341,7 @@ const getIPRangesCellContents = (
 
 export const SubnetLinodeTableRowHead = (
   <TableRow>
-    <TableCell>Linode</TableCell>
+    <TableCell sx={{ width: '24%' }}>Linode</TableCell>
     <TableCell sx={{ width: '14%' }}>Status</TableCell>
     <Hidden smDown>
       <TableCell>VPC IPv4</TableCell>

diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetNodebalancerRow.tsx
@@ -3,7 +3,7 @@ import {
   useNodeBalancerQuery,
   useNodeBalancersFirewallsQuery,
 } from '@linode/queries';
-import { Box, CircleProgress, Hidden } from '@linode/ui';
+import { Box, CircleProgress } from '@linode/ui';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import { Typography } from '@mui/material';
 import * as React from 'react';
@@ -13,6 +13,7 @@ import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 
+import type { APIError, Firewall, NodeBalancerConfig } from '@linode/api-v4';
 interface Props {
   hover?: boolean;
   ipv4: string;
@@ -29,23 +30,79 @@ export const SubnetNodeBalancerRow = ({
     error: nodebalancerError,
     isLoading: nodebalancerLoading,
   } = useNodeBalancerQuery(nodeBalancerId);
-  const { data: attachedFirewallData } = useNodeBalancersFirewallsQuery(
-    Number(nodeBalancerId)
-  );
-  const { data: configs } = useAllNodeBalancerConfigsQuery(
-    Number(nodeBalancerId)
-  );
+  const {
+    data: configs,
+    isLoading: isConfigsLoading,
+    error: configsError,
+  } = useAllNodeBalancerConfigsQuery(Number(nodeBalancerId));
+  const {
+    data: attachedFirewallData,
+    isLoading,
+    error,
+  } = useNodeBalancersFirewallsQuery(Number(nodeBalancerId));
+
+  const getNodebalancerStatus = (
+    data: NodeBalancerConfig[],
+    loading: boolean,
+    error?: APIError[]
+  ): JSX.Element | string => {
+    if (loading) {
+      return 'Loading...';
+    }
+
+    if (error) {
+      return 'Error retrieving Status';
+    }
+
+    const down = data?.reduce((acc: number, config) => {
+      return acc + config.nodes_status.down;
+    }, 0);
+
+    const up = data?.reduce((acc: number, config) => {
+      return acc + config.nodes_status.up;
+    }, 0);
+
+    return (
+      <>
+        <StatusIcon aria-label="Nodebalancer status active" status="active" />
+        {up} up, {down} down
+      </>
+    );
+  };
+
+  const getFirewallsCellString = (
+    data: Firewall[],
+    loading: boolean,
+    error?: APIError[]
+  ): JSX.Element | string => {
+    if (loading) {
+      return 'Loading...';
+    }
+
+    if (error) {
+      return 'Error retrieving Firewalls';
+    }
 
-  const firewallLabel = attachedFirewallData?.data[0]?.label;
-  const firewallId = attachedFirewallData?.data[0]?.id;
+    if (data.length === 0) {
+      return 'None';
+    }
 
-  const down = configs?.reduce((acc: number, config) => {
-    return acc + config.nodes_status.down;
-  }, 0); // add the downtime for each config together
+    return getFirewallLink(data);
+  };
 
-  const up = configs?.reduce((acc: number, config) => {
-    return acc + config.nodes_status.up;
-  }, 0); // add the uptime for each config together
+  const getFirewallLink = (data: Firewall[]): JSX.Element | string => {
+    const firewall = data[0];
+
+    return (
+      <Link
+        className="link secondaryLink"
+        data-testid="firewall-row-link"
+        to={`/firewalls/${firewall.id}`}
+      >
+        {firewall.label}
+      </Link>
+    );
+  };
 
   if (nodebalancerLoading) {
     return (
@@ -88,34 +145,30 @@ export const SubnetNodeBalancerRow = ({
           {nodebalancer?.label}
         </Link>
       </TableCell>
-      <TableCell statusCell>
-        <StatusIcon aria-label="Nodebalancer status active" status="active" />
-        {`${up} up, ${down} down`}
+      <TableCell capitalizationOverride statusCell>
+        {getNodebalancerStatus(
+          configs ?? [],
+          isConfigsLoading,
+          configsError ?? undefined
+        )}
       </TableCell>
       <TableCell>{ipv4}</TableCell>
       <TableCell colSpan={2}>
-        <Link
-          accessibleAriaLabel={`Firewall ${firewallLabel}`}
-          className="secondaryLink"
-          to={`/firewalls/${firewallId}`}
-        >
-          {firewallLabel}
-        </Link>
+        {getFirewallsCellString(
+          attachedFirewallData?.data ?? [],
+          isLoading,
+          error ?? undefined
+        )}
       </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 />
+    <TableCell sx={{ width: '24%' }}>NodeBalancer</TableCell>
+    <TableCell sx={{ width: '23%' }}>Backend Status</TableCell>
+    <TableCell sx={{ width: '14.25%' }}>VPC IPv4 Range</TableCell>
+    <TableCell>Firewalls</TableCell>
   </TableRow>
 );
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx
@@ -215,40 +215,9 @@ describe('VPC Subnets table', () => {
     getByText('Firewalls');
   });
 
-  it('should display no nodeBalancers text if there are no nodeBalancers associated with the subnet', async () => {
-    const subnet = subnetFactory.build({ nodebalancers: [] });
-
-    server.use(
-      http.get('*/vpcs/:vpcId/subnets', () => {
-        return HttpResponse.json(makeResourcePage([subnet]));
-      }),
-      http.get('*/networking/firewalls/settings', () => {
-        return HttpResponse.json(firewallSettingsFactory.build());
-      })
-    );
-
-    const { getAllByRole, getByText, queryByTestId } =
-      await renderWithThemeAndRouter(
-        <VPCSubnetsTable
-          isVPCLKEEnterpriseCluster={false}
-          vpcId={2}
-          vpcRegion=""
-        />,
-        { flags: { nodebalancerVpc: true } }
-      );
-
-    const loadingState = queryByTestId(loadingTestId);
-    if (loadingState) {
-      await waitForElementToBeRemoved(loadingState);
-    }
-
-    const expandTableButton = getAllByRole('button')[3];
-    await userEvent.click(expandTableButton);
-    getByText('No NodeBalancers');
-  });
-
   it('should show Nodebalancer table head data when table is expanded', async () => {
     const subnet = subnetFactory.build();
+
     server.use(
       http.get('*/vpcs/:vpcId/subnets', () => {
         return HttpResponse.json(makeResourcePage([subnet]));
@@ -257,7 +226,8 @@ describe('VPC Subnets table', () => {
         return HttpResponse.json(firewallSettingsFactory.build());
       })
     );
-    const { getAllByRole, getByText, queryByTestId } =
+
+    const { getAllByRole, findByText, queryByTestId } =
       await renderWithThemeAndRouter(
         <VPCSubnetsTable
           isVPCLKEEnterpriseCluster={false}
@@ -275,9 +245,9 @@ describe('VPC Subnets table', () => {
     const expandTableButton = getAllByRole('button')[3];
     await userEvent.click(expandTableButton);
 
-    getByText('NodeBalancer');
-    getByText('Backend Status');
-    getByText('VPC IPv4 Range');
+    await findByText('NodeBalancer');
+    await findByText('Backend Status');
+    await findByText('VPC IPv4 Range');
   });
 
   it('should disable Create Subnet button if the VPC is associated with a LKE-E cluster', async () => {

diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx
@@ -358,30 +358,27 @@ export const VPCSubnetsTable = (props: Props) => {
               )}
             </TableBody>
           </Table>
-          {flags.isNodebalancerVPCEnabled && (
-            <Table aria-label="NodeBalancers" size="small" striped={false}>
-              <TableHead
-                style={{
-                  color: theme.tokens.color.Neutrals.White,
-                }}
-              >
-                {SubnetNodebalancerTableRowHead}
-              </TableHead>
-              <TableBody>
-                {subnet.nodebalancers?.length > 0 ? (
-                  subnet.nodebalancers.map((nb) => (
+          {flags.isNodebalancerVPCEnabled &&
+            subnet.nodebalancers?.length > 0 && (
+              <Table aria-label="NodeBalancers" size="small" striped={false}>
+                <TableHead
+                  style={{
+                    color: theme.tokens.color.Neutrals.White,
+                  }}
+                >
+                  {SubnetNodebalancerTableRowHead}
+                </TableHead>
+                <TableBody>
+                  {subnet.nodebalancers.map((nb) => (
                     <SubnetNodeBalancerRow
                       ipv4={nb.ipv4_range}
                       key={nb.id}
                       nodeBalancerId={nb.id}
                     />
-                  ))
-                ) : (
-                  <TableRowEmpty colSpan={6} message="No NodeBalancers" />
-                )}
-              </TableBody>
-            </Table>
-          )}
+                  ))}
+                </TableBody>
+              </Table>
+            )}
         </>
       );