add and populate 'VPC IPv4 Ranges' column to inner Subnet table

linode · Jan 26, 2024 · 4ae0234 · 4ae0234
1 parent 28d5c2d
commit 4ae0234
Showing 1 changed file with 39 additions and 0 deletions.
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
@@ -22,6 +22,7 @@ import {
   useLinodeQuery,
 } from 'src/queries/linodes/linodes';
 import { capitalizeAllWords } from 'src/utilities/capitalize';
+import { determineNoneSingleOrMultipleWithChip } from 'src/utilities/noneSingleOrMultipleWithChip';
 
 import {
   NETWORK_INTERFACES_GUIDE_URL,
@@ -204,6 +205,16 @@ export const SubnetLinodeRow = (props: Props) => {
           )}
         </StyledTableCell>
       </Hidden>
+      <Hidden smDown>
+        <StyledTableCell>
+          {getIPRangesCellContents(
+            configs ?? [],
+            configsLoading,
+            subnetId,
+            configsError ?? undefined
+          )}
+        </StyledTableCell>
+      </Hidden>
       <Hidden smDown>
         <StyledTableCell>
           {getFirewallsCellString(
@@ -294,6 +305,31 @@ const getIPv4Link = (configInterface: Interface | undefined): JSX.Element => {
   );
 };
 
+// determineNoneSingleOrMultipleWithChip
+const getIPRangesCellContents = (
+  configs: Config[],
+  loading: boolean,
+  subnetId: number,
+  error?: APIError[]
+): JSX.Element | string => {
+  if (loading) {
+    return 'Loading...';
+  }
+
+  if (error) {
+    return 'Error retrieving VPC IPv4s';
+  }
+
+  if (configs.length === 0) {
+    return 'None';
+  }
+
+  const configInterface = getSubnetInterfaceFromConfigs(configs, subnetId);
+  return determineNoneSingleOrMultipleWithChip(
+    configInterface?.ip_ranges ?? []
+  );
+};
+
 const getFirewallLinks = (data: Firewall[]): JSX.Element => {
   const firstThreeFirewalls = data.slice(0, 3);
   return (
@@ -325,6 +361,9 @@ export const SubnetLinodeTableRowHead = (
     <Hidden smDown>
       <StyledTableHeadCell>VPC IPv4</StyledTableHeadCell>
     </Hidden>
+    <Hidden smDown>
+      <StyledTableHeadCell>VPC IPv4 Ranges</StyledTableHeadCell>
+    </Hidden>
     <Hidden smDown>
       <StyledTableHeadCell>Firewalls</StyledTableHeadCell>
     </Hidden>