From 7107259aa5ff363e564d240a33dc23c75082bec1 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Mon, 16 Jun 2025 11:06:16 -0700 Subject: [PATCH 1/3] Add sled provision data to sled page --- app/pages/system/inventory/SledsTab.tsx | 40 +++---------------- .../system/inventory/sled/SledBadges.tsx | 35 ++++++++++++++++ app/pages/system/inventory/sled/SledPage.tsx | 20 +++++++--- 3 files changed, 54 insertions(+), 41 deletions(-) create mode 100644 app/pages/system/inventory/sled/SledBadges.tsx diff --git a/app/pages/system/inventory/SledsTab.tsx b/app/pages/system/inventory/SledsTab.tsx index 3358a78d8..1651058c7 100644 --- a/app/pages/system/inventory/SledsTab.tsx +++ b/app/pages/system/inventory/SledsTab.tsx @@ -7,26 +7,15 @@ */ 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 = { - active: 'default', - decommissioned: 'neutral', -} +import { ProvisionPolicyBadge, SledKindBadge, SledStateBadge } from './sled/SledBadges' const sledList = getListQFn('sledList', {}) @@ -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' ? ( - Expunged - ) : ( - In service - ) - }, + cell: (info) => , }), colHelper.accessor('policy', { header: 'Provision policy', - cell: (info) => { - const policy: SledPolicy = info.getValue() - if (policy.kind === 'expunged') return - return policy.provisionPolicy === 'provisionable' ? ( - Provisionable - ) : ( - Not provisionable - ) - }, + cell: (info) => , }), ], }), colHelper.accessor('state', { - cell: (info) => ( - {info.getValue()} - ), + cell: (info) => , }), ] diff --git a/app/pages/system/inventory/sled/SledBadges.tsx b/app/pages/system/inventory/sled/SledBadges.tsx new file mode 100644 index 000000000..a53d73199 --- /dev/null +++ b/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' ? ( + Expunged + ) : ( + In service + ) + +export const ProvisionPolicyBadge = ({ policy }: { policy: SledPolicy }) => { + if (policy.kind === 'expunged') return + return policy.provisionPolicy === 'provisionable' ? ( + Provisionable + ) : ( + Not provisionable + ) +} + +const STATE_BADGE_COLORS: Record = { + active: 'default', + decommissioned: 'neutral', +} + +export const SledStateBadge = ({ state }: { state: SledState }) => ( + {state} +) diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx index 116961691..8687028ff 100644 --- a/app/pages/system/inventory/sled/SledPage.tsx +++ b/app/pages/system/inventory/sled/SledPage.tsx @@ -19,6 +19,8 @@ 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', { @@ -47,24 +49,30 @@ export default function SledPage() { {sled.id} + + + {sled.baseboard.part} + + + {sled.baseboard.serial} + + + {sled.baseboard.revision} - - {sled.rackId} - - - Coming soon - {sled.usableHardwareThreads} + + {sled.rackId} + {ram.value} {ram.unit} From b9ae0ca9868eb0a7334226d886a428c7c6fbe0af Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Mon, 16 Jun 2025 15:19:27 -0700 Subject: [PATCH 2/3] prefetchQuery -> fetchQuery for affected files --- app/pages/system/inventory/SledsTab.tsx | 2 +- app/pages/system/inventory/sled/SledPage.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/pages/system/inventory/SledsTab.tsx b/app/pages/system/inventory/SledsTab.tsx index 1651058c7..543c55069 100644 --- a/app/pages/system/inventory/SledsTab.tsx +++ b/app/pages/system/inventory/SledsTab.tsx @@ -20,7 +20,7 @@ import { ProvisionPolicyBadge, SledKindBadge, SledStateBadge } from './sled/Sled const sledList = getListQFn('sledList', {}) export async function clientLoader() { - await queryClient.prefetchQuery(sledList.optionsFn()) + await queryClient.fetchQuery(sledList.optionsFn()) return null } diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx index 8687028ff..f3ec01000 100644 --- a/app/pages/system/inventory/sled/SledPage.tsx +++ b/app/pages/system/inventory/sled/SledPage.tsx @@ -23,9 +23,7 @@ import { ProvisionPolicyBadge, SledKindBadge, SledStateBadge } from './SledBadge 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( From 2fee1cd6d2a338c4e0c131f6494dfa5f42d8596a Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Wed, 2 Jul 2025 14:47:25 -0700 Subject: [PATCH 3/3] Update attribute name to policy kind --- app/pages/system/inventory/sled/SledPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx index f3ec01000..aa2d04d17 100644 --- a/app/pages/system/inventory/sled/SledPage.tsx +++ b/app/pages/system/inventory/sled/SledPage.tsx @@ -47,7 +47,7 @@ export default function SledPage() { {sled.id} - +