Add switches tab to system inventory (#2620)

* Add switches tab

* Add basic test

* Update path snapshots

* Drop Rack ID for now

* womp womp test update

app/pages/system/inventory/InventoryPage.tsx

@@ -43,6 +43,7 @@ export function InventoryPage() {
       <RouteTabs fullWidth>
         <Tab to={pb.sledInventory()}>Sleds</Tab>
         <Tab to={pb.diskInventory()}>Disks</Tab>
+        <Tab to={pb.switchInventory()}>Switches</Tab>
       </RouteTabs>
     </>
   )

app/pages/system/inventory/SwitchesTab.tsx

@@ -0,0 +1,44 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { createColumnHelper } from '@tanstack/react-table'
+
+import { getListQFn, queryClient, type Switch } from '@oxide/api'
+import { Servers24Icon } from '@oxide/design-system/icons/react'
+
+import { useQueryTable } from '~/table/QueryTable'
+import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+
+const EmptyState = () => (
+  <EmptyMessage
+    icon={<Servers24Icon />}
+    title="Something went wrong"
+    body="We expected some switches here, but none were found"
+  />
+)
+
+const switchList = getListQFn('switchList', {})
+
+export async function loader() {
+  await queryClient.prefetchQuery(switchList.optionsFn())
+  return null
+}
+
+const colHelper = createColumnHelper<Switch>()
+const staticCols = [
+  colHelper.accessor('id', {}),
+  colHelper.accessor('baseboard.part', { header: 'part number' }),
+  colHelper.accessor('baseboard.serial', { header: 'serial number' }),
+  colHelper.accessor('baseboard.revision', { header: 'revision' }),
+]
+
+Component.displayName = 'SwitchesTab'
+export function Component() {
+  const emptyState = <EmptyState />
+  const { table } = useQueryTable({ query: switchList, columns: staticCols, emptyState })
+  return table
+}

app/routes.tsx

@@ -83,6 +83,7 @@ import { InventoryPage } from './pages/system/inventory/InventoryPage'
 import * as SledInstances from './pages/system/inventory/sled/SledInstancesTab'
 import * as SledPage from './pages/system/inventory/sled/SledPage'
 import * as SledsTab from './pages/system/inventory/SledsTab'
+import * as SwitchesTab from './pages/system/inventory/SwitchesTab'
 import * as IpPool from './pages/system/networking/IpPoolPage'
 import * as IpPools from './pages/system/networking/IpPoolsPage'
 import * as SiloImages from './pages/system/SiloImagesPage'
@@ -164,6 +165,7 @@ export const routes = createRoutesFromElements(
           <Route index element={<Navigate to="sleds" replace />} loader={SledsTab.loader} />
           <Route path="sleds" {...SledsTab} handle={{ crumb: 'Sleds' }} />
           <Route path="disks" {...DisksTab} handle={{ crumb: 'Disks' }} />
+          <Route path="switches" {...SwitchesTab} handle={{ crumb: 'Switches' }} />
         </Route>
         <Route path="inventory" handle={{ crumb: 'Inventory' }}>
           <Route path="sleds" handle={{ crumb: 'Sleds' }}>

app/util/__snapshots__/path-builder.spec.ts.snap

@@ -581,6 +581,16 @@ exports[`breadcrumbs 2`] = `
       "path": "/settings/ssh-keys",
     },
   ],
+  "switchInventory (/system/inventory/switches)": [
+    {
+      "label": "Inventory",
+      "path": "/system/inventory/sleds",
+    },
+    {
+      "label": "Switches",
+      "path": "/system/inventory/switches",
+    },
+  ],
   "systemUtilization (/system/utilization)": [
     {
       "label": "Utilization",

app/util/path-builder.spec.ts

@@ -87,6 +87,7 @@ test('path builder', () => {
         "sshKeyEdit": "/settings/ssh-keys/ss/edit",
         "sshKeys": "/settings/ssh-keys",
         "sshKeysNew": "/settings/ssh-keys-new",
+        "switchInventory": "/system/inventory/switches",
         "systemUtilization": "/system/utilization",
         "vpc": "/projects/p/vpcs/v/firewall-rules",
         "vpcEdit": "/projects/p/vpcs/v/edit",

app/util/path-builder.ts

@@ -104,6 +104,7 @@ export const pb = {
 
   sledInventory: () => '/system/inventory/sleds',
   diskInventory: () => '/system/inventory/disks',
+  switchInventory: () => '/system/inventory/switches',
   sled: ({ sledId }: PP.Sled) => `/system/inventory/sleds/${sledId}/instances`,
   sledInstances: ({ sledId }: PP.Sled) => `/system/inventory/sleds/${sledId}/instances`,
 

mock-api/index.ts

@@ -22,6 +22,7 @@ export * from './silo'
 export * from './sled'
 export * from './snapshot'
 export * from './sshKeys'
+export * from './switch'
 export * from './user'
 export * from './user-group'
 export * from './user'

mock-api/msw/db.ts

@@ -461,6 +461,7 @@ const initDb = {
   siloProvisioned: [...mock.siloProvisioned],
   identityProviders: [...mock.identityProviders],
   sleds: [...mock.sleds],
+  switches: [...mock.switches],
   snapshots: [...mock.snapshots],
   sshKeys: [...mock.sshKeys],
   users: [...mock.users],

mock-api/msw/handlers.ts

@@ -1521,6 +1521,11 @@ export const handlers = makeHandlers({
     return paginated(query, db.users)
   },
 
+  switchList: ({ query, cookies }) => {
+    requireFleetViewer(cookies)
+    return paginated(query, db.switches)
+  },
+
   systemPolicyView({ cookies }) {
     requireFleetViewer(cookies)
 
@@ -1603,7 +1608,6 @@ export const handlers = makeHandlers({
   sledAdd: NotImplemented,
   sledListUninitialized: NotImplemented,
   sledSetProvisionPolicy: NotImplemented,
-  switchList: NotImplemented,
   switchView: NotImplemented,
   systemPolicyUpdate: NotImplemented,
   systemQuotasList: NotImplemented,

mock-api/switch.ts

@@ -0,0 +1,25 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import type { Switch } from '@oxide/api'
+
+import type { Json } from './json-type'
+import { rack } from './rack'
+
+export const switches: Json<Switch[]> = [
+  {
+    baseboard: {
+      part: '832-0431906',
+      serial: 'BDS02141689',
+      revision: 1,
+    },
+    id: 'ed66617e-4955-465e-b810-0d0dc55d4511',
+    rack_id: rack.id,
+    time_created: rack.time_created,
+    time_modified: rack.time_modified,
+  },
+]

test/e2e/inventory.e2e.ts

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
-import { physicalDisks, sleds } from '@oxide/api-mocks'
+import { physicalDisks, sleds, switches } from '@oxide/api-mocks'
 
 import { expect, expectRowVisible, expectVisible, test } from './utils'
 
@@ -85,3 +85,21 @@ test('Disk inventory page', async ({ page }) => {
     state: 'decommissioned',
   })
 })
+
+test('Switch inventory page', async ({ page }) => {
+  await page.goto('/system/inventory/switches')
+
+  await expectVisible(page, ['role=heading[name*="Inventory"]'])
+
+  const switchesTab = page.getByRole('tab', { name: 'Switches' })
+  await expect(switchesTab).toBeVisible()
+  await expect(switchesTab).toHaveClass(/is-selected/)
+
+  const table = page.getByRole('table')
+  await expectRowVisible(table, {
+    id: switches[0].id,
+    'part number': '832-0431906',
+    'serial number': 'BDS02141689',
+    revision: '1',
+  })
+})