make sled policy column display the right data

oxidecomputer · Dec 14, 2024 · 1b44e4c · 1b44e4c
1 parent c1ebd8d
commit 1b44e4c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 26 deletions.
diff --git a/app/pages/system/inventory/SledsTab.tsx b/app/pages/system/inventory/SledsTab.tsx
@@ -11,7 +11,7 @@ import {
   getListQFn,
   queryClient,
   type Sled,
-  type SledPolicy,
+  type SledProvisionPolicy,
   type SledState,
 } from '@oxide/api'
 import { Servers24Icon } from '@oxide/design-system/icons/react'
@@ -22,26 +22,16 @@ 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 PROV_POLICY_DISP: Record<SledProvisionPolicy, [string, BadgeColor]> = {
+  provisionable: ['Provisionable', 'default'],
+  non_provisionable: ['Not provisionable', 'neutral'],
 }
 
 const STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
   active: 'default',
   decommissioned: 'neutral',
 }
 
-const EmptyState = () => {
-  return (
-    <EmptyMessage
-      icon={<Servers24Icon />}
-      title="Something went wrong"
-      body="We expected some racks here, but none were found"
-    />
-  )
-}
-
 const sledList = getListQFn('sledList', {})
 
 export async function loader() {
@@ -58,13 +48,21 @@ 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', {
+  colHelper.accessor('policy', {
     header: 'policy',
-    cell: (info) => (
-      <Badge color={POLICY_KIND_BADGE_COLORS[info.getValue()]}>
-        {info.getValue().replace(/_/g, ' ')}
-      </Badge>
-    ),
+    cell: (info) => {
+      const policy = info.getValue()
+      if (policy.kind === 'expunged') return <Badge color="neutral">Expunged</Badge>
+      const [label, color] = PROV_POLICY_DISP[policy.provisionPolicy]
+      return (
+        <div className="space-x-0.5">
+          <Badge>In service</Badge>
+          <Badge variant="solid" color={color}>
+            {label}
+          </Badge>
+        </div>
+      )
+    },
   }),
   colHelper.accessor('state', {
     cell: (info) => (
@@ -75,7 +73,7 @@ const staticCols = [
 
 Component.displayName = 'SledsTab'
 export function Component() {
-  const emptyState = <EmptyState />
+  const emptyState = <EmptyMessage icon={<Servers24Icon />} title="No sleds found" />
   const { table } = useQueryTable({ query: sledList, columns: staticCols, emptyState })
   return table
 }
diff --git a/mock-api/sled.ts b/mock-api/sled.ts
@@ -35,7 +35,7 @@ export const sleds: Json<Sled[]> = [
     rack_id: '759a1c80-4bff-4d0b-97ce-b482ca936724',
     policy: {
       kind: 'in_service',
-      provision_policy: 'provisionable',
+      provision_policy: 'non_provisionable',
     },
     state: 'active',
     baseboard: {

diff --git a/test/e2e/inventory.e2e.ts b/test/e2e/inventory.e2e.ts
@@ -20,29 +20,34 @@ test('Sled inventory page', async ({ page }) => {
   await expect(sledsTab).toHaveClass(/is-selected/)
 
   const sledsTable = page.getByRole('table')
+  await expectRowVisible(sledsTable, {
+    id: sleds[0].id,
+    'serial number': sleds[0].baseboard.serial,
+    policy: 'In serviceProvisionable',
+    state: 'active',
+  })
   await expectRowVisible(sledsTable, {
     id: sleds[1].id,
     'serial number': sleds[1].baseboard.serial,
-    policy: 'in service',
+    policy: 'In serviceNot provisionable',
     state: 'active',
   })
   await expectRowVisible(sledsTable, {
     id: sleds[2].id,
     'serial number': sleds[2].baseboard.serial,
-    policy: 'expunged',
+    policy: 'Expunged',
     state: 'active',
   })
   await expectRowVisible(sledsTable, {
     id: sleds[3].id,
     'serial number': sleds[3].baseboard.serial,
-    policy: 'expunged',
+    policy: 'Expunged',
     state: 'decommissioned',
   })
 
   // Visit the sled detail page of the first sled
   await sledsTable.getByRole('link').first().click()
 
-  // TODO: Once sled location is piped through this'll need to be dynamic
   await expectVisible(page, ['role=heading[name*="Sled"]'])
 
   const instancesTab = page.getByRole('tab', { name: 'Instances' })