Add firewall rules column to VPCs table (#2218)

add firewall rules column to vpcs table

Author: david-crespo

app/pages/project/vpcs/VpcsPage.tsx

@@ -12,6 +12,7 @@ import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 import {
   apiQueryClient,
   useApiMutation,
+  useApiQuery,
   useApiQueryClient,
   usePrefetchedApiQuery,
   type Vpc,
@@ -21,7 +22,8 @@ import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/r
 import { DocsPopover } from '~/components/DocsPopover'
 import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { makeLinkCell } from '~/table/cells/LinkCell'
+import { SkeletonCell } from '~/table/cells/EmptyCell'
+import { LinkCell, makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
@@ -51,6 +53,14 @@ export const VpcDocsPopover = () => (
   />
 )
 
+const FirewallRuleCount = ({ project, vpc }: { project: string; vpc: string }) => {
+  const { data } = useApiQuery('vpcFirewallRulesView', { query: { project, vpc } })
+
+  if (!data) return <SkeletonCell /> // loading
+
+  return <LinkCell to={pb.vpc({ project, vpc })}>{data.rules.length}</LinkCell>
+}
+
 const colHelper = createColumnHelper<Vpc>()
 
 // just as in the vpcList call for the quick actions menu, include limit to make
@@ -120,6 +130,10 @@ export function VpcsPage() {
       }),
       colHelper.accessor('dnsName', { header: 'DNS name' }),
       colHelper.accessor('description', Columns.description),
+      colHelper.accessor('name', {
+        header: 'Firewall Rules',
+        cell: (info) => <FirewallRuleCount project={project} vpc={info.getValue()} />,
+      }),
       colHelper.accessor('timeCreated', Columns.timeCreated),
       getActionsCol(makeActions),
     ],

test/e2e/vpcs.e2e.ts

@@ -7,15 +7,36 @@
  */
 import { expect, test } from '@playwright/test'
 
+import { expectRowVisible } from './utils'
+
 test('can nav to VpcPage from /', async ({ page }) => {
   await page.goto('/')
   await page.getByRole('table').getByRole('link', { name: 'mock-project' }).click()
   await page.getByRole('link', { name: 'VPCs' }).click()
+
+  await expectRowVisible(page.getByRole('table'), {
+    name: 'mock-vpc',
+    'DNS name': 'mock-vpc',
+    description: 'a fake vpc',
+    'Firewall Rules': '4',
+  })
+
+  // click the vpc name cell to go there
   await page.getByRole('link', { name: 'mock-vpc' }).click()
-  await expect(page.getByText('Jan 1, 202112:00 AM')).toBeVisible()
+
+  await expect(page.getByRole('heading', { name: 'mock-vpc' })).toBeVisible()
   await expect(page.getByRole('tab', { name: 'Firewall rules' })).toBeVisible()
   await expect(page.getByRole('cell', { name: 'allow-icmp' })).toBeVisible()
-  expect(await page.title()).toEqual('mock-vpc / VPCs / mock-project / Oxide Console')
+  await expect(page).toHaveURL('/projects/mock-project/vpcs/mock-vpc')
+  await expect(page).toHaveTitle('mock-vpc / VPCs / mock-project / Oxide Console')
+
+  // we can also click the firewall rules cell to get to the VPC detail
+  await page.goBack()
+  await expect(page.getByRole('heading', { name: 'mock-vpc' })).toBeHidden()
+  await expect(page.getByRole('cell', { name: 'allow-icmp' })).toBeHidden()
+  await page.getByRole('link', { name: '4' }).click()
+  await expect(page.getByRole('heading', { name: 'mock-vpc' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'allow-icmp' })).toBeVisible()
 })
 
 test('can create and delete subnet', async ({ page }) => {