List and download Support Bundles

app/api/selectors.ts

@@ -31,6 +31,7 @@ export type IdentityProvider = Readonly<Merge<Silo, { provider: string }>>
 export type SystemUpdate = Readonly<{ version: string }>
 export type SshKey = Readonly<{ sshKey: string }>
 export type Sled = Readonly<{ sledId?: string }>
+export type SupportBundle = Readonly<{ bundleId?: string }>
 export type IpPool = Readonly<{ pool?: string }>
 export type SubnetPool = Readonly<{ subnetPool?: string }>
 export type AlertReceiver = Readonly<{ receiver?: string }>

app/api/util.ts

@@ -23,6 +23,8 @@ import type {
   SiloIpPool,
   SiloUtilization,
   Sled,
+  SnapshotState,
+  SupportBundleState,
   Vpc,
   VpcFirewallRule,
   VpcFirewallRuleUpdate,
@@ -111,6 +113,14 @@ export const MIN_DISK_SIZE_GiB = 1
  */
 export const MAX_DISK_SIZE_GiB = 1023
 
+// the API only enforces this on update, but apply it at create time too so
+// the comment doesn't become uneditable later
+// https://github.com/oxidecomputer/omicron/blob/99249b4/nexus/db-queries/src/db/datastore/support_bundle.rs#L736-L742
+export const MAX_BUNDLE_COMMENT_BYTES = 4096
+
+/** Nexus limits by UTF-8 byte length, not JS string length */
+export const utf8ByteLength = (s: string) => new TextEncoder().encode(s).length
+
 /**
  * The `default_*` network interface attachment types resolve a VPC and VPC
  * subnet both named literally 'default', so they fail with a 404 if that VPC
@@ -250,14 +260,15 @@ export const instanceCan = R.mapValues(instanceActions, (states: InstanceState[]
   return test
 })
 
+/**
+ * States the instance is expected to leave on its own, so the UI should poll
+ * and show a spinner. Exhaustive match so new states have to be classified.
+ */
 export function instanceTransitioning(runState: InstanceState) {
-  return (
-    runState === 'creating' ||
-    runState === 'starting' ||
-    runState === 'rebooting' ||
-    runState === 'migrating' ||
-    runState === 'stopping'
-  )
+  return match(runState)
+    .with('creating', 'starting', 'rebooting', 'migrating', 'stopping', () => true)
+    .with('running', 'stopped', 'repairing', 'failed', 'destroyed', () => false)
+    .exhaustive()
 }
 
 /**
@@ -315,13 +326,42 @@ const canSnapshot = (d: SnapshotDisk) => {
 }
 canSnapshot.states = snapshotStates
 
+/** See {@link instanceTransitioning} */
 export function diskTransitioning(diskState: DiskState['state']) {
-  return (
-    diskState === 'attaching' ||
-    diskState === 'creating' ||
-    diskState === 'detaching' ||
-    diskState === 'finalizing'
-  )
+  return match(diskState)
+    .with('attaching', 'creating', 'detaching', 'finalizing', () => true)
+    .with(
+      'attached',
+      'detached',
+      'destroyed',
+      'faulted',
+      'maintenance',
+      'import_ready',
+      'importing_from_url',
+      'importing_from_bulk_writes',
+      () => false
+    )
+    .exhaustive()
+}
+
+/** See {@link instanceTransitioning} */
+export function snapshotTransitioning(state: SnapshotState) {
+  return match(state)
+    .with('creating', () => true)
+    .with('ready', 'faulted', 'destroyed', () => false)
+    .exhaustive()
+}
+
+/**
+ * See {@link instanceTransitioning}. 'active' and 'failed' are terminal, and
+ * 'destroying' resolves by the bundle record going away.
+ * https://github.com/oxidecomputer/omicron/blob/6db4c7e/nexus/db-model/src/support_bundle.rs#L53-L66
+ */
+export function supportBundleTransitioning(state: SupportBundleState) {
+  return match(state)
+    .with('collecting', 'destroying', () => true)
+    .with('active', 'failed', () => false)
+    .exhaustive()
 }
 
 export const diskCan = {

app/components/StateBadge.tsx

@@ -10,10 +10,13 @@ import cn from 'classnames'
 import {
   diskTransitioning,
   instanceTransitioning,
+  snapshotTransitioning,
+  supportBundleTransitioning,
   type DiskState,
   type DiskType,
   type InstanceState,
   type SnapshotState,
+  type SupportBundleState,
 } from '@oxide/api'
 import { Badge, type BadgeColor } from '@oxide/design-system/ui'
 
@@ -78,13 +81,35 @@ const SNAPSHOT_COLORS: Record<SnapshotState, BadgeColor> = {
 
 export const SnapshotStateBadge = (props: { state: SnapshotState; className?: string }) => (
   <Badge color={SNAPSHOT_COLORS[props.state]} className={cn(props.className, badgeClasses)}>
-    {props.state === 'creating' && (
+    {snapshotTransitioning(props.state) && (
       <Spinner size="sm" variant={SNAPSHOT_COLORS[props.state]} />
     )}
     {props.state}
   </Badge>
 )
 
+const SUPPORT_BUNDLE_COLORS: Record<SupportBundleState, BadgeColor> = {
+  collecting: 'blue',
+  active: 'default',
+  destroying: 'neutral',
+  failed: 'destructive',
+}
+
+export const SupportBundleStateBadge = (props: {
+  state: SupportBundleState
+  className?: string
+}) => (
+  <Badge
+    color={SUPPORT_BUNDLE_COLORS[props.state]}
+    className={cn(props.className, badgeClasses)}
+  >
+    {supportBundleTransitioning(props.state) && (
+      <Spinner size="sm" variant={SUPPORT_BUNDLE_COLORS[props.state]} />
+    )}
+    {props.state}
+  </Badge>
+)
+
 export const DiskTypeBadge = (props: { diskType: DiskType; className?: string }) => (
   <Badge color="neutral" className={props.className}>
     {props.diskType}

app/components/form/SideModalForm.tsx

@@ -77,8 +77,11 @@ export function SideModalForm<TFieldValues extends FieldValues>({
       ? `Update ${resourceName}`
       : submitLabel || title || `Create ${resourceName}`
 
-  // must be destructured up here to subscribe to changes. inlining
-  // form.formState.isDirty does not work
+  // formState is a proxy whose getters register a subscription, and RHF only
+  // re-renders for keys that were read during render. isDirty is used in the
+  // onDismiss callback below, so it has to be read up here first, or the
+  // callback would see a stale value. See the Rules section of the docs:
+  // https://react-hook-form.com/docs/useform/formstate
   const { isDirty, isSubmitting } = form.formState
   const [showNavGuard, setShowNavGuard] = useState(false)
 

app/components/form/fields/BundleCommentField.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 { Control } from 'react-hook-form'
+
+import { MAX_BUNDLE_COMMENT_BYTES, utf8ByteLength } from '@oxide/api'
+
+import { TextField } from './TextField'
+
+/** Support bundle comment textarea, shared by the create and edit forms */
+export function BundleCommentField({
+  control,
+}: {
+  control: Control<{ userComment: string }>
+}) {
+  return (
+    <TextField
+      as="textarea"
+      name="userComment"
+      label="Comment"
+      rows={4}
+      control={control}
+      validate={(value) =>
+        utf8ByteLength(value) > MAX_BUNDLE_COMMENT_BYTES
+          ? `Comment cannot exceed ${MAX_BUNDLE_COMMENT_BYTES} bytes`
+          : true
+      }
+    />
+  )
+}

app/forms/support-bundle-create.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { useForm } from 'react-hook-form'
+import { useNavigate } from 'react-router'
+
+import { api, queryClient, useApiMutation } from '@oxide/api'
+
+import { BundleCommentField } from '~/components/form/fields/BundleCommentField'
+import { SideModalForm } from '~/components/form/SideModalForm'
+import { titleCrumb } from '~/hooks/use-crumbs'
+import { addToast } from '~/stores/toast'
+import { Message } from '~/ui/lib/Message'
+import { pb } from '~/util/path-builder'
+
+const defaultValues = { userComment: '' }
+
+export const handle = titleCrumb('New support bundle')
+
+export default function CreateSupportBundleSideModalForm() {
+  const navigate = useNavigate()
+
+  const createBundle = useApiMutation(api.supportBundleCreate, {
+    onSuccess() {
+      queryClient.invalidateEndpoint('supportBundleList')
+      addToast('Support bundle created')
+      navigate(pb.supportBundles())
+    },
+  })
+
+  const form = useForm({ defaultValues })
+
+  return (
+    <SideModalForm
+      form={form}
+      formType="create"
+      resourceName="support bundle"
+      onDismiss={() => navigate(pb.supportBundles())}
+      onSubmit={({ userComment }) => {
+        createBundle.mutate({ body: { userComment: userComment.trim() || null } })
+      }}
+      loading={createBundle.isPending || createBundle.isSuccess}
+      submitError={createBundle.error}
+    >
+      <Message
+        variant="info"
+        content="Bundle collection runs in the background and can take several minutes. The bundle can be downloaded once collection is complete."
+      />
+      <BundleCommentField control={form.control} />
+    </SideModalForm>
+  )
+}

app/hooks/use-params.ts

@@ -54,6 +54,7 @@ export const requireUpdateParams = requireParams('version')
 export const getIpPoolSelector = requireParams('pool')
 export const getSubnetPoolSelector = requireParams('subnetPool')
 export const getAlertReceiverSelector = requireParams('receiver')
+export const getSupportBundleSelector = requireParams('bundleId')
 export const getAffinityGroupSelector = requireParams('project', 'affinityGroup')
 export const getAntiAffinityGroupSelector = requireParams('project', 'antiAffinityGroup')
 
@@ -106,6 +107,7 @@ export const useUpdateParams = () => useSelectedParams(requireUpdateParams)
 export const useIpPoolSelector = () => useSelectedParams(getIpPoolSelector)
 export const useSubnetPoolSelector = () => useSelectedParams(getSubnetPoolSelector)
 export const useAlertReceiverSelector = () => useSelectedParams(getAlertReceiverSelector)
+export const useSupportBundleSelector = () => useSelectedParams(getSupportBundleSelector)
 export const useAffinityGroupSelector = () => useSelectedParams(getAffinityGroupSelector)
 export const useAntiAffinityGroupSelector = () =>
   useSelectedParams(getAntiAffinityGroupSelector)

app/layouts/SystemLayout.tsx

@@ -10,6 +10,7 @@ import { useLocation } from 'react-router'
 import { api, q, queryClient } from '@oxide/api'
 import {
   Access16Icon,
+  Archive16Icon,
   Cloud16Icon,
   IpGlobal16Icon,
   Logs16Icon,
@@ -60,8 +61,9 @@ export default function SystemLayout() {
       { value: 'Alerting', path: pb.alertReceivers() },
       { value: 'Alerts', path: pb.alerts() },
       { value: 'System Update', path: pb.systemUpdate() },
-      { value: 'Fleet Access', path: pb.fleetAccess() },
+      { value: 'Support Bundles', path: pb.supportBundles() },
       { value: 'Audit Log', path: pb.auditLog() },
+      { value: 'Fleet Access', path: pb.fleetAccess() },
     ]
       // filter out the entry for the path we're currently on
       .filter((i) => i.path !== pathname)
@@ -112,12 +114,15 @@ export default function SystemLayout() {
           <NavLinkItem to={pb.systemUpdate()}>
             <SoftwareUpdate16Icon /> System Update
           </NavLinkItem>
-          <NavLinkItem to={pb.fleetAccess()}>
-            <Access16Icon /> Fleet Access
+          <NavLinkItem to={pb.supportBundles()}>
+            <Archive16Icon /> Support Bundles
           </NavLinkItem>
           <NavLinkItem to={pb.auditLog()}>
             <Logs16Icon /> Audit Log
           </NavLinkItem>
+          <NavLinkItem to={pb.fleetAccess()}>
+            <Access16Icon /> Fleet Access
+          </NavLinkItem>
         </Sidebar.Nav>
       </Sidebar>
       <ContentPane />

app/pages/project/access/ProjectAccessPage.tsx

@@ -104,7 +104,7 @@ export default function ProjectAccessPage() {
   const { data: projectPolicy } = usePrefetchedQuery(projectPolicyView(projectSelector))
   const projectRows = useUserRows(projectPolicy.roleAssignments, 'project')
 
-  const rows = useMemo(() => {
+  const rows: UserRow[] = useMemo(() => {
     return groupBy(siloRows.concat(projectRows), (u) => u.id)
       .map(([userId, userAssignments]) => {
         const { name, identityType } = userAssignments[0]
@@ -123,7 +123,7 @@ export default function ProjectAccessPage() {
           name,
           projectRole: projectAccessRow?.roleName,
           roleBadges,
-        } satisfies UserRow
+        }
       })
       .sort(byGroupThenName)
   }, [siloRows, projectRows])

app/pages/settings/AccessTokensPage.tsx

@@ -103,7 +103,7 @@ export default function AccessTokensPage() {
 
   const emptyState = (
     <EmptyMessage
-      icon={<AccessToken16Icon />}
+      icon={<AccessToken24Icon />}
       title="No access tokens"
       body="Your access tokens will appear here when they are created"
     />

app/pages/settings/SSHKeysPage.tsx

@@ -83,7 +83,7 @@ export default function SSHKeysPage() {
 
   const emptyState = (
     <EmptyMessage
-      icon={<Key16Icon />}
+      icon={<Key24Icon />}
       title="No SSH keys"
       body="Add an SSH key to see it here"
       buttonText="Add SSH key"