ICMPv4 + v6 in firewall rules (#3212)

Closes #3207 

This uses `ICMPv4` and `ICMPv6`. Generally we try to follow what the API
calls things, but the strings in the API are `icmp` and `icmp6`, while
all the human-readable stuff like doc comments, PR titles, and docs use
the ICMPv6 version.

<img width="489" height="256" alt="Screenshot 2026-05-04 at 6 45 34 PM"
src="https://github.com/user-attachments/assets/87a332a7-1431-426a-a990-462308ea82b1"
/>

<img width="482" height="492" alt="Screenshot 2026-05-04 at 6 45 47 PM"
src="https://github.com/user-attachments/assets/ec2ac598-8fe0-44db-b758-13a7159343c2"
/>

<img width="476" height="489" alt="image"
src="https://github.com/user-attachments/assets/ae4ecae3-8666-4df9-b191-5f3f81b1e35d"
/>

<img width="487" height="265" alt="Screenshot 2026-05-04 at 6 48 05 PM"
src="https://github.com/user-attachments/assets/d7933e48-6baf-495c-97a0-a57005e6efb6"
/>

Author: david-crespo

app/components/ProtocolBadge.tsx

@@ -6,38 +6,36 @@
  * Copyright Oxide Computer Company
  */
 
+import { match } from 'ts-pattern'
+
 import { Badge } from '@oxide/design-system/ui'
 
 import type { VpcFirewallRuleProtocol } from '~/api'
+import { PROTOCOL_LABELS } from '~/util/protocol'
 
-type ProtocolBadgeProps = {
-  protocol: VpcFirewallRuleProtocol
-}
-
-export const ProtocolBadge = ({ protocol }: ProtocolBadgeProps) => {
-  if (protocol.type === 'tcp' || protocol.type === 'udp') {
-    return <Badge>{protocol.type.toUpperCase()}</Badge>
-  }
-
-  if (protocol.value === null) {
-    // All ICMP types
-    return <Badge>ICMP</Badge>
-  }
-
+export const ProtocolBadge = ({ protocol }: { protocol: VpcFirewallRuleProtocol }) => {
+  // only ICMP v4/v6 carry a nullable type/code value; tcp/udp have none
+  const value = match(protocol)
+    .with({ type: 'tcp' }, { type: 'udp' }, () => null)
+    .with({ type: 'icmp' }, { type: 'icmp6' }, (p) => p.value)
+    .exhaustive()
   return (
     <div className="space-x-0.5">
-      <Badge>ICMP</Badge>
-      <Badge variant="solid">
-        <span className="flex items-center gap-1.5">
-          <span>type {protocol.value.icmpType}</span>
-          {protocol.value.code && (
-            <>
-              <span className="border-l-accent-secondary h-[10px] border-l" />
-              <span>code {protocol.value.code}</span>
-            </>
-          )}
-        </span>
-      </Badge>
+      <Badge>{PROTOCOL_LABELS[protocol.type]}</Badge>
+      {/* null value (or tcp/udp) means all types, so there's no type/code badge */}
+      {value !== null && (
+        <Badge variant="solid">
+          <span className="flex items-center gap-1.5">
+            <span>type {value.icmpType}</span>
+            {value.code && (
+              <>
+                <span className="border-l-accent-secondary h-2.5 border-l" />
+                <span>code {value.code}</span>
+              </>
+            )}
+          </span>
+        </Badge>
+      )}
     </div>
   )
 }

app/forms/firewall-rules-common.tsx

@@ -52,7 +52,12 @@ import { KEYS } from '~/ui/util/keys'
 import { ALL_ISH } from '~/util/consts'
 import { validateIp, validateIpNet } from '~/util/ip'
 import { links } from '~/util/links'
-import { getProtocolDisplayName, getProtocolKey, ICMP_TYPES } from '~/util/protocol'
+import {
+  getProtocolDisplayName,
+  getProtocolKey,
+  ICMP_TYPES,
+  PROTOCOL_LABELS,
+} from '~/util/protocol'
 import { capitalize, normalizeDashes } from '~/util/str'
 
 import { type FirewallRuleValues } from './firewall-rules-util'
@@ -289,22 +294,27 @@ const directionItems: Array<{ value: VpcFirewallRuleDirection; label: string }>
   { value: 'outbound', label: 'Outbound' },
 ]
 
-const protocolTypeItems: Array<{ value: VpcFirewallRuleProtocol['type']; label: string }> =
-  [
-    { value: 'tcp', label: 'TCP' },
-    { value: 'udp', label: 'UDP' },
-    { value: 'icmp', label: 'ICMP' },
-  ]
+const protocolTypeItems = [
+  { value: 'tcp', label: 'TCP' },
+  { value: 'udp', label: 'UDP' },
+  { value: 'icmp', label: 'ICMPv4' },
+  { value: 'icmp6', label: 'ICMPv6' },
+] satisfies Array<{ value: VpcFirewallRuleProtocol['type']; label: string }>
 
-const icmpTypeItems = [
+const buildIcmpTypeItems = (types: Record<number, string>) => [
   { value: '', label: 'All types', selectedLabel: 'All types' },
-  ...Object.entries(ICMP_TYPES).map(([type, name]) => ({
+  ...Object.entries(types).map(([type, name]) => ({
     value: type,
     label: `${type} - ${name}`,
     selectedLabel: type,
   })),
 ]
 
+const icmpTypeItems = {
+  icmp: buildIcmpTypeItems(ICMP_TYPES.icmp),
+  icmp6: buildIcmpTypeItems(ICMP_TYPES.icmp6),
+}
+
 const targetAndHostTableColumns = [
   {
     header: 'Type',
@@ -343,13 +353,13 @@ const isDuplicateProtocol = (
     return existingProtocols.some((p) => p.type === newProtocol.type)
   }
 
-  if (newProtocol.type === 'icmp') {
+  if (newProtocol.type === 'icmp' || newProtocol.type === 'icmp6') {
     if (newProtocol.value === null) {
-      return existingProtocols.some((p) => p.type === 'icmp' && p.value === null)
+      return existingProtocols.some((p) => p.type === newProtocol.type && p.value === null)
     }
     return existingProtocols.some(
       (p) =>
-        p.type === 'icmp' &&
+        p.type === newProtocol.type &&
         p.value?.icmpType === newProtocol.value?.icmpType &&
         p.value?.code === newProtocol.value?.code
     )
@@ -361,9 +371,15 @@ const isDuplicateProtocol = (
 type ParseResult<T> = { success: true; data: T } | { success: false; message: string }
 
 const parseIcmpType = (value: string | undefined): ParseResult<number | undefined> => {
-  if (value === undefined || value === '') return { success: true, data: undefined }
-  const parsed = parseInt(value, 10)
-  if (isNaN(parsed) || parsed < 0 || parsed > 255) {
+  const trimmedValue = value?.trim()
+  if (trimmedValue === undefined || trimmedValue === '') {
+    return { success: true, data: undefined }
+  }
+  if (!/^\d+$/.test(trimmedValue)) {
+    return { success: false, message: `ICMP type must be a number between 0 and 255` }
+  }
+  const parsed = parseInt(trimmedValue, 10)
+  if (parsed < 0 || parsed > 255) {
     return { success: false, message: `ICMP type must be a number between 0 and 255` }
   }
   return { success: true, data: parsed }
@@ -423,7 +439,7 @@ const ProtocolFilters = ({ control }: { control: Control<FirewallRuleValues> })
   const submitProtocol = protocolForm.handleSubmit((values) => {
     if (values.protocolType === 'tcp' || values.protocolType === 'udp') {
       addProtocolIfUnique({ type: values.protocolType })
-    } else if (values.protocolType === 'icmp') {
+    } else if (values.protocolType === 'icmp' || values.protocolType === 'icmp6') {
       // this parse should never fail because we've already validated, but doing
       // it this way keeps the just-in-case early return logic consistent
       const parseResult = parseIcmpType(values.icmpType)
@@ -432,14 +448,15 @@ const ProtocolFilters = ({ control }: { control: Control<FirewallRuleValues> })
       const icmpType = parseResult.data
       if (icmpType === undefined) {
         // All ICMP types
-        addProtocolIfUnique({ type: 'icmp', value: null })
+        addProtocolIfUnique({ type: values.protocolType, value: null })
       } else {
         // Specific ICMP type
         const icmpValue: VpcFirewallIcmpFilter = { icmpType }
-        if (values.icmpCode) {
-          icmpValue.code = values.icmpCode
+        const icmpCode = values.icmpCode?.trim()
+        if (icmpCode) {
+          icmpValue.code = icmpCode
         }
-        addProtocolIfUnique({ type: 'icmp', value: icmpValue })
+        addProtocolIfUnique({ type: values.protocolType, value: icmpValue })
       }
     }
     protocolForm.reset()
@@ -461,19 +478,28 @@ const ProtocolFilters = ({ control }: { control: Control<FirewallRuleValues> })
             control={protocolForm.control}
             placeholder=""
             items={protocolTypeItems}
+            // ICMPv4 and ICMPv6 type numbers mean different things, so clear the
+            // selected ICMP type/code when switching protocol. Also clear errors:
+            // setValue doesn't revalidate, so a stale type error would otherwise
+            // linger on the now-empty field.
+            onChange={() => {
+              protocolForm.setValue('icmpType', '')
+              protocolForm.setValue('icmpCode', '')
+              protocolForm.clearErrors(['icmpType', 'icmpCode'])
+            }}
           />
 
-          {selectedProtocolType === 'icmp' && (
+          {(selectedProtocolType === 'icmp' || selectedProtocolType === 'icmp6') && (
             <>
               <ComboboxField
-                label="ICMP type"
+                label={`${PROTOCOL_LABELS[selectedProtocolType]} type`}
                 name="icmpType"
                 control={protocolForm.control}
                 description="Leave blank to match any type"
                 placeholder=""
                 allowArbitraryValues
                 onInputChange={(value) => protocolForm.setValue('icmpType', value)}
-                items={icmpTypeItems}
+                items={icmpTypeItems[selectedProtocolType]}
                 validate={(value) => {
                   const result = parseIcmpType(value)
                   if (!result.success) return result.message
@@ -482,7 +508,7 @@ const ProtocolFilters = ({ control }: { control: Control<FirewallRuleValues> })
 
               {selectedIcmpType !== undefined && selectedIcmpType !== '' && (
                 <TextField
-                  label="ICMP code"
+                  label={`${PROTOCOL_LABELS[selectedProtocolType]} code`}
                   name="icmpCode"
                   control={protocolForm.control}
                   description={

app/table/cells/ProtocolCell.tsx

@@ -10,23 +10,23 @@ import { Badge } from '@oxide/design-system/ui'
 
 import type { VpcFirewallRuleProtocol } from '~/api'
 import { Tooltip } from '~/ui/lib/Tooltip'
+import { PROTOCOL_LABELS } from '~/util/protocol'
 
 import { EmptyCell } from './EmptyCell'
 
 export const ProtocolCell = ({ protocol }: { protocol: VpcFirewallRuleProtocol }) => (
-  <Badge>{protocol.type.toUpperCase()}</Badge>
+  <Badge>{PROTOCOL_LABELS[protocol.type]}</Badge>
 )
 
 /** Generate tooltip content for empty protocol cells in the mini table */
 const protocolEmptyCellTooltipContent = (protocol: VpcFirewallRuleProtocol): string => {
-  if (protocol.type === 'tcp') return 'This firewall rule will match all TCP traffic'
-  if (protocol.type === 'udp') return 'This firewall rule will match all UDP traffic'
-  // in this case, the user could be looking at the type column or the code column, but both get the same tooltip
-  if (protocol.value === null) {
-    return 'This firewall rule will match all ICMP traffic'
+  const label = PROTOCOL_LABELS[protocol.type]
+  if (protocol.type === 'tcp' || protocol.type === 'udp' || protocol.value === null) {
+    return `This firewall rule will match all ${label} traffic`
   }
-  // in this case, there's an icmpType but no code, which means the user is looking at the code column
-  return `This firewall rule will match all ICMP traffic of type ${protocol.value.icmpType}`
+  // type column shows nothing only when value is null (handled above), so
+  // reaching here means we're in the code column and there is a type but no code
+  return `This firewall rule will match all ${label} traffic of type ${protocol.value.icmpType}`
 }
 
 export const ProtocolEmptyCell = ({ protocol }: { protocol: VpcFirewallRuleProtocol }) => (
@@ -39,15 +39,17 @@ export const ProtocolEmptyCell = ({ protocol }: { protocol: VpcFirewallRuleProto
 
 export const ProtocolTypeCell = ({ protocol }: { protocol: VpcFirewallRuleProtocol }) =>
   // icmpType could be zero, so we check for `not undefined`
-  protocol.type === 'icmp' && protocol.value?.icmpType !== undefined ? (
+  (protocol.type === 'icmp' || protocol.type === 'icmp6') &&
+  protocol.value?.icmpType !== undefined ? (
     protocol.value.icmpType
   ) : (
     <ProtocolEmptyCell protocol={protocol} />
   )
 
 export const ProtocolCodeCell = ({ protocol }: { protocol: VpcFirewallRuleProtocol }) =>
   // code could be zero, so we check for `not undefined`
-  protocol.type === 'icmp' && protocol.value?.code !== undefined ? (
+  (protocol.type === 'icmp' || protocol.type === 'icmp6') &&
+  protocol.value?.code !== undefined ? (
     protocol.value.code
   ) : (
     <ProtocolEmptyCell protocol={protocol} />

app/util/protocol.ts

@@ -8,7 +8,10 @@
 
 import type { VpcFirewallRuleProtocol } from '~/api'
 
-export const ICMP_TYPES: Record<number, string> = {
+// Common suggestions from the IANA ICMP Type Numbers registry. Users may enter
+// any valid type number, including types not listed here.
+// https://www.iana.org/assignments/icmp-parameters/icmp-parameters.xhtml#icmp-parameters-types
+const ICMPV4_TYPES: Record<number, string> = {
   0: 'Echo Reply',
   3: 'Destination Unreachable',
   5: 'Redirect Message',
@@ -21,26 +24,47 @@ export const ICMP_TYPES: Record<number, string> = {
   14: 'Timestamp Reply',
 }
 
-/**
- * Get the human-readable name for an ICMP type
- */
-export const getIcmpTypeName = (type: number): string | undefined => ICMP_TYPES[type]
+// Common suggestions from the IANA ICMPv6 Type Numbers registry. Users may enter
+// any valid type number, including types not listed here.
+// https://www.iana.org/assignments/icmpv6-parameters/icmpv6-parameters.xhtml#icmpv6-parameters-2
+const ICMPV6_TYPES: Record<number, string> = {
+  1: 'Destination Unreachable',
+  2: 'Packet Too Big',
+  3: 'Time Exceeded',
+  4: 'Parameter Problem',
+  128: 'Echo Request',
+  129: 'Echo Reply',
+  130: 'Multicast Listener Query',
+  131: 'Multicast Listener Report',
+  132: 'Multicast Listener Done',
+  133: 'Router Solicitation',
+  134: 'Router Advertisement',
+  135: 'Neighbor Solicitation',
+  136: 'Neighbor Advertisement',
+  137: 'Redirect Message',
+}
 
-/**
- * Get a display name for a protocol, including ICMP types and codes
- */
+export const ICMP_TYPES: Record<'icmp' | 'icmp6', Record<number, string>> = {
+  icmp: ICMPV4_TYPES,
+  icmp6: ICMPV6_TYPES,
+}
+
+export const PROTOCOL_LABELS = {
+  tcp: 'TCP',
+  udp: 'UDP',
+  icmp: 'ICMPv4',
+  icmp6: 'ICMPv6',
+} as const satisfies Record<VpcFirewallRuleProtocol['type'], string>
+
+/** Get a display name for a protocol, including ICMP types and codes */
 export const getProtocolDisplayName = (protocol: VpcFirewallRuleProtocol): string => {
-  if (protocol.type === 'icmp') {
-    if (protocol.value === null) {
-      return 'ICMP (All types)'
-    } else {
-      const typeName =
-        ICMP_TYPES[protocol.value.icmpType] || `Type ${protocol.value.icmpType}`
-      const codePart = protocol.value.code ? ` | Code ${protocol.value.code}` : ''
-      return `ICMP ${protocol.value.icmpType} - ${typeName}${codePart}`
-    }
-  }
-  return protocol.type.toUpperCase()
+  const label = PROTOCOL_LABELS[protocol.type]
+  if (protocol.type === 'tcp' || protocol.type === 'udp') return label
+  if (protocol.value === null) return `${label} (All types)`
+  const typeName =
+    ICMP_TYPES[protocol.type][protocol.value.icmpType] || `Type ${protocol.value.icmpType}`
+  const codePart = protocol.value.code ? ` | Code ${protocol.value.code}` : ''
+  return `${label} ${protocol.value.icmpType} - ${typeName}${codePart}`
 }
 
 /**
@@ -52,6 +76,6 @@ export const getProtocolKey = (protocol: VpcFirewallRuleProtocol): string => {
     return protocol.type
   }
   return protocol.value === null
-    ? 'icmp|all'
-    : `icmp|${protocol.value.icmpType}|${protocol.value.code || 'all'}`
+    ? `${protocol.type}|all`
+    : `${protocol.type}|${protocol.value.icmpType}|${protocol.value.code || 'all'}`
 }

mock-api/vpc.ts

@@ -321,7 +321,11 @@ export const firewallRules: Json<VpcFirewallRule[]> = [
     description: 'we just want to test with lots of filters',
     filters: {
       ports: ['3389', '45-89'],
-      protocols: [{ type: 'tcp' }, { type: 'icmp', value: { icmp_type: 5, code: '1-3' } }],
+      protocols: [
+        { type: 'tcp' },
+        { type: 'icmp', value: { icmp_type: 5, code: '1-3' } },
+        { type: 'icmp6', value: { icmp_type: 128 } },
+      ],
       hosts: [
         { type: 'instance', value: 'hello-friend' },
         { type: 'subnet', value: 'my-subnet' },