Add sled policy data to sled page (#2838)

* Add sled provision data to sled page

* prefetchQuery -> fetchQuery for affected files

* Update attribute name to policy kind

Author: charliepark

app/pages/system/inventory/SledsTab.tsx

@@ -7,31 +7,20 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 
-import {
-  getListQFn,
-  queryClient,
-  type Sled,
-  type SledPolicy,
-  type SledState,
-} from '@oxide/api'
+import { getListQFn, queryClient, type Sled } from '@oxide/api'
 import { Servers24Icon } from '@oxide/design-system/icons/react'
 
-import { EmptyCell } from '~/table/cells/EmptyCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { 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 STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
-  active: 'default',
-  decommissioned: 'neutral',
-}
+import { ProvisionPolicyBadge, SledKindBadge, SledStateBadge } from './sled/SledBadges'
 
 const sledList = getListQFn('sledList', {})
 
 export async function clientLoader() {
-  await queryClient.prefetchQuery(sledList.optionsFn())
+  await queryClient.fetchQuery(sledList.optionsFn())
   return null
 }
 
@@ -58,35 +47,16 @@ const staticCols = [
     columns: [
       colHelper.accessor('policy', {
         header: 'Kind',
-        cell: (info) => {
-          // need to cast because inference is broken inside groups
-          // https://github.com/TanStack/table/issues/5065
-          const policy: SledPolicy = info.getValue()
-          return policy.kind === 'expunged' ? (
-            <Badge color="neutral">Expunged</Badge>
-          ) : (
-            <Badge>In service</Badge>
-          )
-        },
+        cell: (info) => <SledKindBadge policy={info.getValue()} />,
       }),
       colHelper.accessor('policy', {
         header: 'Provision policy',
-        cell: (info) => {
-          const policy: SledPolicy = info.getValue()
-          if (policy.kind === 'expunged') return <EmptyCell />
-          return policy.provisionPolicy === 'provisionable' ? (
-            <Badge>Provisionable</Badge>
-          ) : (
-            <Badge color="neutral">Not provisionable</Badge>
-          )
-        },
+        cell: (info) => <ProvisionPolicyBadge policy={info.getValue()} />,
       }),
     ],
   }),
   colHelper.accessor('state', {
-    cell: (info) => (
-      <Badge color={STATE_BADGE_COLORS[info.getValue()]}>{info.getValue()}</Badge>
-    ),
+    cell: (info) => <SledStateBadge state={info.getValue()} />,
   }),
 ]
 

app/pages/system/inventory/sled/SledBadges.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { SledPolicy, SledState } from '~/api'
+import { EmptyCell } from '~/table/cells/EmptyCell'
+import { Badge, type BadgeColor } from '~/ui/lib/Badge'
+
+export const SledKindBadge = ({ policy }: { policy: SledPolicy }) =>
+  policy.kind === 'expunged' ? (
+    <Badge color="neutral">Expunged</Badge>
+  ) : (
+    <Badge>In service</Badge>
+  )
+
+export const ProvisionPolicyBadge = ({ policy }: { policy: SledPolicy }) => {
+  if (policy.kind === 'expunged') return <EmptyCell />
+  return policy.provisionPolicy === 'provisionable' ? (
+    <Badge>Provisionable</Badge>
+  ) : (
+    <Badge color="neutral">Not provisionable</Badge>
+  )
+}
+
+const STATE_BADGE_COLORS: Record<SledState, BadgeColor> = {
+  active: 'default',
+  decommissioned: 'neutral',
+}
+
+export const SledStateBadge = ({ state }: { state: SledState }) => (
+  <Badge color={STATE_BADGE_COLORS[state]}>{state}</Badge>
+)

app/pages/system/inventory/sled/SledPage.tsx

@@ -19,11 +19,11 @@ import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 
+import { ProvisionPolicyBadge, SledKindBadge, SledStateBadge } from './SledBadges'
+
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { sledId } = requireSledParams(params)
-  await apiQueryClient.prefetchQuery('sledView', {
-    path: { sledId },
-  })
+  await apiQueryClient.fetchQuery('sledView', { path: { sledId } })
   return null
 }
 export const handle = makeCrumb(
@@ -47,24 +47,30 @@ export default function SledPage() {
         <PropertiesTable.Row label="sled id">
           <span className="text-default">{sled.id}</span>
         </PropertiesTable.Row>
+        <PropertiesTable.Row label="policy kind">
+          <SledKindBadge policy={sled.policy} />
+        </PropertiesTable.Row>
         <PropertiesTable.Row label="part">
           <span className="text-default">{sled.baseboard.part}</span>
         </PropertiesTable.Row>
+        <PropertiesTable.Row label="provision policy">
+          <ProvisionPolicyBadge policy={sled.policy} />
+        </PropertiesTable.Row>
         <PropertiesTable.Row label="serial">
           <span className="text-default">{sled.baseboard.serial}</span>
         </PropertiesTable.Row>
+        <PropertiesTable.Row label="state">
+          <SledStateBadge state={sled.state} />
+        </PropertiesTable.Row>
         <PropertiesTable.Row label="revision">
           <span className="text-default">{sled.baseboard.revision}</span>
         </PropertiesTable.Row>
-        <PropertiesTable.Row label="rack id">
-          <span className="text-default">{sled.rackId}</span>
-        </PropertiesTable.Row>
-        <PropertiesTable.Row label="location">
-          <span className="text-disabled">Coming soon</span>
-        </PropertiesTable.Row>
         <PropertiesTable.Row label="usable hardware threads">
           <span className="text-default">{sled.usableHardwareThreads}</span>
         </PropertiesTable.Row>
+        <PropertiesTable.Row label="rack id">
+          <span className="text-default">{sled.rackId}</span>
+        </PropertiesTable.Row>
         <PropertiesTable.Row label="usable physical ram">
           <span className="pr-0.5 text-default">{ram.value}</span>
           <span className="text-tertiary">{ram.unit}</span>