configurable numInCell on ListPlusCell, use for firewall rule filters

Author: david-crespo

app/components/ListPlusCell.tsx

@@ -13,22 +13,30 @@ import { Tooltip } from '~/ui/lib/Tooltip'
 type ListPlusCellProps = {
   tooltipTitle: string
   children: React.ReactNode
+  /** The number of items to show in the cell vs. in the popup */
+  numInCell?: number
 }
 
 /**
  * Gives a count with a tooltip that expands to show details when the user hovers over it
  */
-export const ListPlusCell = ({ tooltipTitle, children }: ListPlusCellProps) => {
-  const [first, ...rest] = React.Children.toArray(children)
+export const ListPlusCell = ({
+  tooltipTitle,
+  children,
+  numInCell = 1,
+}: ListPlusCellProps) => {
+  const array = React.Children.toArray(children)
+  const inCell = array.slice(0, numInCell)
+  const rest = array.slice(numInCell)
   const content = (
     <div>
       <div className="mb-2">{tooltipTitle}</div>
-      {...rest}
+      <div className="flex flex-col items-start gap-2">{...rest}</div>
     </div>
   )
   return (
     <div className="flex items-baseline gap-2">
-      {first}
+      {inCell}
       {rest.length > 0 && (
         <Tooltip content={content} placement="bottom">
           <div className="text-mono-sm">+{rest.length}</div>

app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx

@@ -151,7 +151,7 @@ export const VpcFirewallRulesTab = () => {
           />
         )}
       </div>
-      {rules.length > 0 ? <Table table={table} rowHeight="large" /> : emptyState}
+      {rules.length > 0 ? <Table table={table} /> : emptyState}
     </>
   )
 }

app/table/cells/FirewallFilterCell.tsx

@@ -7,22 +7,24 @@
  */
 import type { VpcFirewallRuleFilter } from '@oxide/api'
 
+import { ListPlusCell } from '~/components/ListPlusCell'
 import { Badge } from '~/ui/lib/Badge'
 
 import { TypeValueCell } from './TypeValueCell'
 
-export const FirewallFilterCell = ({ hosts, ports, protocols }: VpcFirewallRuleFilter) => (
-  <div className="flex flex-col gap-1">
-    <div className="flex flex-wrap gap-1">
-      {hosts?.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} {...tv} />)}
+export const FirewallFilterCell = ({ hosts, ports, protocols }: VpcFirewallRuleFilter) => {
+  const children = [
+    ...(hosts || []).map((tv, i) => <TypeValueCell key={`${tv}-${i}`} {...tv} />),
+    ...(protocols || []).map((p, i) => <Badge key={`${p}-${i}`}>{p}</Badge>),
+    ...(ports || []).map((p, i) => (
+      <TypeValueCell key={`port-${p}-${i}`} type="Port" value={p} />
+    )),
+  ]
+  return (
+    <div className="flex flex-col gap-1">
+      <ListPlusCell numInCell={2} tooltipTitle="Other filters">
+        {children}
+      </ListPlusCell>
     </div>
-    <div className="flex gap-1">
-      {protocols?.map((p, i) => <Badge key={`${p}-${i}`}>{p}</Badge>)}
-      {ports?.map((p, i) => (
-        <Badge key={`${p}-${i}`} variant="solid">
-          {p}
-        </Badge>
-      ))}
-    </div>
-  </div>
-)
+  )
+}

mock-api/msw/db.ts

@@ -286,8 +286,8 @@ const initDb = {
   snapshots: [...mock.snapshots],
   sshKeys: [...mock.sshKeys],
   users: [...mock.users],
-  vpcFirewallRules: [...mock.defaultFirewallRules],
-  vpcs: [mock.vpc],
+  vpcFirewallRules: [...mock.firewallRules],
+  vpcs: [...mock.vpcs],
   vpcSubnets: [mock.vpcSubnet],
 }
 

mock-api/vpc.ts

@@ -9,7 +9,7 @@
 import type { Vpc, VpcFirewallRule, VpcSubnet } from '@oxide/api'
 
 import type { Json } from './json-type'
-import { project } from './project'
+import { project, project2 } from './project'
 
 const time_created = new Date(2021, 0, 1).toISOString()
 const time_modified = new Date(2021, 0, 2).toISOString()
@@ -28,6 +28,20 @@ export const vpc: Json<Vpc> = {
   time_modified,
 }
 
+export const vpc2: Json<Vpc> = {
+  id: 'e54078df-fe72-4673-b36c-a362e3b4e38b',
+  name: 'mock-vpc-2',
+  description: 'a fake vpc',
+  dns_name: 'mock-vpc-2',
+  project_id: project2.id,
+  system_router_id: systemRouterId,
+  ipv6_prefix: 'fdf6:1818:b6e2::/48',
+  time_created,
+  time_modified,
+}
+
+export const vpcs: Json<Vpc[]> = [vpc, vpc2]
+
 export const vpcSubnet: Json<VpcSubnet> = {
   // this is supposed to be flattened into the top level. will fix in API
   id: 'd12bf934-d2bf-40e9-8596-bb42a7793749',
@@ -49,7 +63,7 @@ export const vpcSubnet2: Json<VpcSubnet> = {
   ipv4_block: '10.1.1.2/24',
 }
 
-export const defaultFirewallRules: Json<VpcFirewallRule[]> = [
+export const firewallRules: Json<VpcFirewallRule[]> = [
   {
     id: 'b74aeea8-1201-4efd-b6ec-011f10a0b176',
     name: 'allow-internal-inbound',
@@ -117,4 +131,26 @@ export const defaultFirewallRules: Json<VpcFirewallRule[]> = [
     time_modified,
     vpc_id: vpc.id,
   },
+  {
+    id: '097c849e-68c8-43f7-9ceb-b1855c51f178',
+    name: 'lots-of-filters',
+    status: 'enabled',
+    direction: 'inbound',
+    targets: [{ type: 'vpc', value: 'default' }],
+    description: 'we just want to test with lots of filters',
+    filters: {
+      ports: ['3389', '45-89'],
+      protocols: ['TCP'],
+      hosts: [
+        { type: 'instance', value: 'hello-friend' },
+        { type: 'subnet', value: 'my-subnet' },
+        { type: 'ip', value: '148.38.89.5' },
+      ],
+    },
+    action: 'allow',
+    priority: 65534,
+    time_created,
+    time_modified,
+    vpc_id: vpc2.id,
+  },
 ]