diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx index 94f940836..97de119b4 100644 --- a/app/pages/project/instances/InstancesPage.tsx +++ b/app/pages/project/instances/InstancesPage.tsx @@ -64,8 +64,7 @@ const POLL_INTERVAL_SLOW = 60 * sec export function InstancesPage() { const { project } = useProjectSelector() - - const { makeActions } = useMakeInstanceActions( + const { makeButtonActions, makeMenuActions } = useMakeInstanceActions( { project }, { onSuccess: refetchInstances, onDelete: refetchInstances } ) @@ -182,9 +181,12 @@ export function InstancesPage() { } ), colHelper.accessor('timeCreated', Columns.timeCreated), - getActionsCol(makeActions), + getActionsCol((instance: Instance) => [ + ...makeButtonActions(instance), + ...makeMenuActions(instance), + ]), ], - [project, makeActions] + [project, makeButtonActions, makeMenuActions] ) if (!instances) return null diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx index db6c27e1b..0ec1ea684 100644 --- a/app/pages/project/instances/actions.tsx +++ b/app/pages/project/instances/actions.tsx @@ -5,7 +5,7 @@ * * Copyright Oxide Computer Company */ -import { useCallback, useMemo } from 'react' +import { useCallback } from 'react' import { useNavigate } from 'react-router-dom' import { instanceCan, useApiMutation, type Instance } from '@oxide/api' @@ -47,15 +47,14 @@ export const useMakeInstanceActions = ( onSuccess: options.onDelete, }) - const makeActions = useCallback( - (instance: Instance) => { - const instanceSelector = { project, instance: instance.name } - const instanceParams = { path: { instance: instance.name }, query: { project } } - return [ - { - label: 'Start', - onActivate() { - startInstance(instanceParams, { + const makeButtonActions = useCallback( + (instance: Instance) => [ + { + label: 'Start', + onActivate() { + startInstance( + { path: { instance: instance.name }, query: { project } }, + { onSuccess: () => addToast({ title: `Starting instance '${instance.name}'` }), onError: (error) => addToast({ @@ -63,41 +62,54 @@ export const useMakeInstanceActions = ( title: `Error starting instance '${instance.name}'`, content: error.message, }), - }) - }, - disabled: !instanceCan.start(instance) && ( - <>Only {fancifyStates(instanceCan.start.states)} instances can be started> - ), + } + ) }, - { - label: 'Stop', - onActivate() { - confirmAction({ - actionType: 'danger', - doAction: () => - stopInstanceAsync(instanceParams, { + disabled: !instanceCan.start(instance) && ( + <>Only {fancifyStates(instanceCan.start.states)} instances can be started> + ), + }, + { + label: 'Stop', + onActivate() { + confirmAction({ + actionType: 'danger', + doAction: () => + stopInstanceAsync( + { path: { instance: instance.name }, query: { project } }, + { onSuccess: () => addToast({ title: `Stopping instance '${instance.name}'` }), - }), - modalTitle: 'Confirm stop instance', - modalContent: ( -
- Are you sure you want to stop
- Stopped instances retain attached disks and IP addresses, but allocated - CPU and memory are freed. -
-
+ Are you sure you want to stop
+ Stopped instances retain attached disks and IP addresses, but allocated + CPU and memory are freed. +
+