Instance resize

OMICRON_VERSION

@@ -1 +1 @@
-c50cf019cd9be35f98266a7f4acacab0236b3a3d
+fd7e5a1387475d1ebec9880e3bbb854f69e5fcf6

app/pages/project/instances/InstancesPage.tsx

@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { filesize } from 'filesize'
-import { useMemo, useRef } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery, type Instance } from '@oxide/api'
@@ -33,6 +33,7 @@ import { toLocaleTimeString } from '~/util/date'
 import { pb } from '~/util/path-builder'
 
 import { useMakeInstanceActions } from './actions'
+import { ResizeInstanceModal } from './instance/InstancePage'
 
 const EmptyState = () => (
   <EmptyMessage
@@ -64,10 +65,15 @@ const POLL_INTERVAL_SLOW = 60 * sec
 
 export function InstancesPage() {
   const { project } = useProjectSelector()
+  const [resizeInstance, setResizeInstance] = useState<Instance | null>(null)
 
   const makeActions = useMakeInstanceActions(
     { project },
-    { onSuccess: refetchInstances, onDelete: refetchInstances }
+    {
+      onSuccess: refetchInstances,
+      onDelete: refetchInstances,
+      onResizeClick: (instance) => setResizeInstance(instance),
+    }
   )
 
   // this is a whole thing. sit down.
@@ -212,6 +218,14 @@ export function InstancesPage() {
         <CreateLink to={pb.instancesNew({ project })}>New Instance</CreateLink>
       </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
+      {resizeInstance && (
+        <ResizeInstanceModal
+          instance={resizeInstance}
+          project={project}
+          onDismiss={() => setResizeInstance(null)}
+          onListView
+        />
+      )}
     </>
   )
 }

app/pages/project/instances/actions.tsx

@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { instanceCan, useApiMutation, type Instance } from '@oxide/api'
 
@@ -15,7 +14,6 @@ import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import type { MakeActions } from '~/table/columns/action-col'
-import { pb } from '~/util/path-builder'
 
 import { fancifyStates } from './instance/tabs/common'
 
@@ -26,14 +24,13 @@ type Options = {
   // hook has to expand to encompass the sum of all the APIs of these hooks it
   // call internally, the abstraction is not good
   onDelete?: () => void
+  onResizeClick?: (instance: Instance) => void
 }
 
 export const useMakeInstanceActions = (
   { project }: { project: string },
   options: Options = {}
 ): MakeActions<Instance> => {
-  const navigate = useNavigate()
-
   // if you also pass onSuccess to mutate(), this one is not overridden — this
   // one runs first, then the one passed to mutate().
   //
@@ -51,7 +48,6 @@ export const useMakeInstanceActions = (
 
   return useCallback(
     (instance) => {
-      const instanceSelector = { project, instance: instance.name }
       const instanceParams = { path: { instance: instance.name }, query: { project } }
       return [
         {
@@ -118,10 +114,15 @@ export const useMakeInstanceActions = (
           ),
         },
         {
-          label: 'View serial console',
-          onActivate() {
-            navigate(pb.serialConsole(instanceSelector))
+          label: 'Resize',
+          onActivate: () => {
+            if (options.onResizeClick) {
+              options.onResizeClick(instance)
+            }
           },
+          disabled: !instanceCan.update(instance) && (
+            <>Only {fancifyStates(instanceCan.update.states)} instances can be resized</>
+          ),
         },
         {
           label: 'Delete',
@@ -144,11 +145,11 @@ export const useMakeInstanceActions = (
     },
     [
       project,
-      navigate,
       deleteInstanceAsync,
       rebootInstance,
       startInstance,
       stopInstanceAsync,
+      options,
     ]
   )
 }