diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
index 43977566633..6431c8d3808 100644
--- 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) => {
)}
+
+
+ {getIPRangesCellContents(
+ configs ?? [],
+ configsLoading,
+ subnetId,
+ configsError ?? undefined
+ )}
+
+
{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 = (
VPC IPv4
+
+ VPC IPv4 Ranges
+
Firewalls