Add columns on SledsTab for sled Policy and State (#2337)

* Add columns on SledsTab for Policy and State

* set enum for policy colors

* don't be so DRY with the component

* refactoring a few UI bits; adding extra examples to mock api

* enhance tests

Author: charliepark

.eslintrc.cjs

@@ -45,6 +45,7 @@ module.exports = {
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-duplicate-type-constituents': 'off',
     '@typescript-eslint/no-unused-vars': [
       'error',
       { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },

app/pages/system/inventory/DisksTab.tsx

@@ -7,13 +7,28 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 
-import { apiQueryClient, type PhysicalDisk } from '@oxide/api'
+import {
+  apiQueryClient,
+  type PhysicalDisk,
+  type PhysicalDiskPolicy,
+  type PhysicalDiskState,
+} from '@oxide/api'
 import { Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
-import { Badge } from '~/ui/lib/Badge'
+import { Badge, type BadgeColor } from '~/ui/lib/Badge'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 
+const POLICY_KIND_BADGE_COLORS: Record<PhysicalDiskPolicy['kind'], BadgeColor> = {
+  in_service: 'default',
+  expunged: 'neutral',
+}
+
+const STATE_BADGE_COLORS: Record<PhysicalDiskState, BadgeColor> = {
+  active: 'default',
+  decommissioned: 'neutral',
+}
+
 const EmptyState = () => (
   <EmptyMessage
     icon={<Servers24Icon />}
@@ -36,19 +51,18 @@ const staticCols = [
   }),
   colHelper.accessor('model', { header: 'model number' }),
   colHelper.accessor('serial', { header: 'serial number' }),
-  colHelper.accessor('policy', {
-    cell: (info) => {
-      const policy = info.getValue().kind
-      const color = policy === 'in_service' ? 'default' : 'neutral'
-      return <Badge color={color}>{policy.replace(/_/g, ' ')}</Badge>
-    },
+  colHelper.accessor('policy.kind', {
+    header: 'policy',
+    cell: (info) => (
+      <Badge color={POLICY_KIND_BADGE_COLORS[info.getValue()]}>
+        {info.getValue().replace(/_/g, ' ')}
+      </Badge>
+    ),
   }),
   colHelper.accessor('state', {
-    cell: (info) => {
-      const state = info.getValue()
-      const color = state === 'active' ? 'default' : 'neutral'
-      return <Badge color={color}>{state}</Badge>
-    },
+    cell: (info) => (
+      <Badge color={STATE_BADGE_COLORS[info.getValue()]}>{info.getValue()}</Badge>
+    ),
   }),
 ]
 

app/pages/system/inventory/SledsTab.tsx

@@ -7,14 +7,25 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 
-import { apiQueryClient, type Sled } from '@oxide/api'
+import { apiQueryClient, type Sled, type SledPolicy, type SledState } from '@oxide/api'
 import { Servers24Icon } from '@oxide/design-system/icons/react'
 
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
+import { Badge, type BadgeColor } from '~/ui/lib/Badge'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { pb } from '~/util/path-builder'
 
+const POLICY_KIND_BADGE_COLORS: Record<SledPolicy['kind'], BadgeColor> = {
+  in_service: 'default',
+  expunged: 'neutral',
+}
+
+const STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
+  active: 'default',
+  decommissioned: 'neutral',
+}
+
 const EmptyState = () => {
   return (
     <EmptyMessage
@@ -41,6 +52,19 @@ const staticCols = [
   colHelper.accessor('baseboard.part', { header: 'part number' }),
   colHelper.accessor('baseboard.serial', { header: 'serial number' }),
   colHelper.accessor('baseboard.revision', { header: 'revision' }),
+  colHelper.accessor('policy.kind', {
+    header: 'policy',
+    cell: (info) => (
+      <Badge color={POLICY_KIND_BADGE_COLORS[info.getValue()]}>
+        {info.getValue().replace(/_/g, ' ')}
+      </Badge>
+    ),
+  }),
+  colHelper.accessor('state', {
+    cell: (info) => (
+      <Badge color={STATE_BADGE_COLORS[info.getValue()]}>{info.getValue()}</Badge>
+    ),
+  }),
 ]
 
 export function SledsTab() {

mock-api/sled.ts

@@ -9,23 +9,75 @@ import type { Sled } from '@oxide/api'
 
 import type { Json } from './json-type'
 
-export const sled: Json<Sled> = {
-  id: 'c2519937-44a4-493b-9b38-5c337c597d08',
-  time_created: new Date(2021, 0, 1).toISOString(),
-  time_modified: new Date(2021, 0, 2).toISOString(),
-  rack_id: '6fbafcc7-1626-4785-be65-e212f8ad66d0',
-  policy: {
-    kind: 'in_service',
-    provision_policy: 'provisionable',
+export const sleds: Json<Sled[]> = [
+  {
+    id: 'c2519937-44a4-493b-9b38-5c337c597d08',
+    time_created: new Date(2023, 0, 1).toISOString(),
+    time_modified: new Date(2023, 0, 2).toISOString(),
+    rack_id: '6fbafcc7-1626-4785-be65-e212f8ad66d0',
+    policy: {
+      kind: 'in_service',
+      provision_policy: 'provisionable',
+    },
+    state: 'active',
+    baseboard: {
+      part: '913-0000108',
+      serial: 'BRM02222869',
+      revision: 0,
+    },
+    usable_hardware_threads: 128,
+    usable_physical_ram: 1_099_511_627_776,
   },
-  state: 'active',
-  baseboard: {
-    part: '913-0000008',
-    serial: 'BRM02222867',
-    revision: 0,
+  {
+    id: '1ec7df9d-a6de-423c-8bf8-01557e8e5aea',
+    time_created: new Date(2024, 0, 1).toISOString(),
+    time_modified: new Date(2024, 0, 2).toISOString(),
+    rack_id: '759a1c80-4bff-4d0b-97ce-b482ca936724',
+    policy: {
+      kind: 'in_service',
+      provision_policy: 'provisionable',
+    },
+    state: 'active',
+    baseboard: {
+      part: '913-0001008',
+      serial: 'BRM02222870',
+      revision: 0,
+    },
+    usable_hardware_threads: 128,
+    usable_physical_ram: 1_099_511_627_776,
   },
-  usable_hardware_threads: 128,
-  usable_physical_ram: 1_099_511_627_776,
-}
-
-export const sleds: Json<Sled[]> = [sled]
+  {
+    id: 'fca81647-868a-4aa5-b8c3-84364d4b4dc9',
+    time_created: new Date(2022, 0, 1).toISOString(),
+    time_modified: new Date(2022, 0, 2).toISOString(),
+    rack_id: 'ebe9a4c0-248b-491c-9448-04ddb10ef648',
+    policy: {
+      kind: 'expunged',
+    },
+    state: 'active',
+    baseboard: {
+      part: '913-0000018',
+      serial: 'BRM02222868',
+      revision: 0,
+    },
+    usable_hardware_threads: 128,
+    usable_physical_ram: 1_099_511_627_776,
+  },
+  {
+    id: 'a4ed0c62-cb3a-48bc-a7a8-ee544a8a8869',
+    time_created: new Date(2021, 0, 1).toISOString(),
+    time_modified: new Date(2021, 0, 2).toISOString(),
+    rack_id: '64f712fe-4320-407d-835a-d63b0455d89c',
+    policy: {
+      kind: 'expunged',
+    },
+    state: 'decommissioned',
+    baseboard: {
+      part: '913-0000008',
+      serial: 'BRM02222867',
+      revision: 0,
+    },
+    usable_hardware_threads: 128,
+    usable_physical_ram: 1_099_511_627_776,
+  },
+]

test/e2e/inventory.e2e.ts

@@ -5,7 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
-import { physicalDisks } from '@oxide/api-mocks'
+
+import { physicalDisks, sleds } from '@oxide/api-mocks'
 
 import { expect, expectRowVisible, expectVisible, test } from './utils'
 
@@ -19,6 +20,25 @@ test('Sled inventory page', async ({ page }) => {
   await expect(sledsTab).toHaveClass(/is-selected/)
 
   const sledsTable = page.getByRole('table')
+  await expectRowVisible(sledsTable, {
+    id: sleds[1].id,
+    'serial number': sleds[1].baseboard.serial,
+    policy: 'in service',
+    state: 'active',
+  })
+  await expectRowVisible(sledsTable, {
+    id: sleds[2].id,
+    'serial number': sleds[2].baseboard.serial,
+    policy: 'expunged',
+    state: 'active',
+  })
+  await expectRowVisible(sledsTable, {
+    id: sleds[3].id,
+    'serial number': sleds[3].baseboard.serial,
+    policy: 'expunged',
+    state: 'decommissioned',
+  })
+
   // Visit the sled detail page of the first sled
   await sledsTable.getByRole('link').first().click()
 
@@ -54,11 +74,13 @@ test('Disk inventory page', async ({ page }) => {
   })
   await expectRowVisible(table, {
     id: physicalDisks[4].id,
+    'Form factor': 'M.2',
     policy: 'expunged',
     state: 'active',
   })
   await expectRowVisible(table, {
     id: physicalDisks[5].id,
+    'Form factor': 'M.2',
     policy: 'expunged',
     state: 'decommissioned',
   })