|
5 | 5 | *
|
6 | 6 | * Copyright Oxide Computer Company
|
7 | 7 | */
|
8 |
| -import { useEffect, useState, type ReactNode } from 'react' |
| 8 | +import { type ReactNode } from 'react' |
9 | 9 |
|
10 |
| -import { |
11 |
| - instanceTransitioning, |
12 |
| - useApiMutation, |
13 |
| - useApiQuery, |
14 |
| - useApiQueryClient, |
15 |
| - type Instance, |
16 |
| -} from '@oxide/api' |
| 10 | +import { apiQueryClient, useApiMutation, usePrefetchedApiQuery } from '@oxide/api' |
17 | 11 |
|
18 | 12 | import { HL } from '~/components/HL'
|
| 13 | +import { useInstanceSelector } from '~/hooks/use-params' |
19 | 14 | import { addToast } from '~/stores/toast'
|
20 | 15 | import { Button } from '~/ui/lib/Button'
|
21 | 16 | import { Message } from '~/ui/lib/Message'
|
22 | 17 |
|
23 |
| -const POLL_INTERVAL_FAST = 2000 // 2 seconds |
24 |
| - |
25 | 18 | type StopInstancePromptProps = {
|
26 |
| - instance: Instance |
27 | 19 | children: ReactNode
|
28 | 20 | }
|
29 | 21 |
|
30 |
| -export function StopInstancePrompt({ instance, children }: StopInstancePromptProps) { |
31 |
| - const queryClient = useApiQueryClient() |
32 |
| - const [isStoppingInstance, setIsStoppingInstance] = useState(false) |
| 22 | +export function StopInstancePrompt({ children }: StopInstancePromptProps) { |
| 23 | + const instanceSelector = useInstanceSelector() |
| 24 | + const { data: instance } = usePrefetchedApiQuery('instanceView', { |
| 25 | + path: { instance: instanceSelector.instance }, |
| 26 | + query: { project: instanceSelector.project }, |
| 27 | + }) |
33 | 28 |
|
34 |
| - const { data } = useApiQuery( |
35 |
| - 'instanceView', |
36 |
| - { |
37 |
| - path: { instance: instance.name }, |
38 |
| - query: { project: instance.projectId }, |
39 |
| - }, |
40 |
| - { |
41 |
| - refetchInterval: |
42 |
| - isStoppingInstance || instanceTransitioning(instance) ? POLL_INTERVAL_FAST : false, |
43 |
| - } |
44 |
| - ) |
| 29 | + const isStoppingInstance = instance.runState === 'stopping' |
45 | 30 |
|
46 | 31 | const { mutateAsync: stopInstanceAsync } = useApiMutation('instanceStop', {
|
47 | 32 | onSuccess: () => {
|
48 |
| - setIsStoppingInstance(true) |
49 |
| - addToast( |
50 |
| - <> |
51 |
| - Stopping instance <HL>{instance.name}</HL> |
52 |
| - </> |
53 |
| - ) |
| 33 | + addToast(<>Stopping instance <HL>{instance.name}</HL></>) // prettier-ignore |
54 | 34 | },
|
55 | 35 | onError: (error) => {
|
56 | 36 | addToast({
|
57 | 37 | variant: 'error',
|
58 | 38 | title: `Error stopping instance '${instance.name}'`,
|
59 | 39 | content: error.message,
|
60 | 40 | })
|
61 |
| - setIsStoppingInstance(false) |
62 | 41 | },
|
63 | 42 | })
|
64 | 43 |
|
65 |
| - const handleStopInstance = () => { |
66 |
| - stopInstanceAsync({ |
| 44 | + const handleStopInstance = async () => { |
| 45 | + await stopInstanceAsync({ |
67 | 46 | path: { instance: instance.name },
|
68 | 47 | query: { project: instance.projectId },
|
69 | 48 | })
|
70 |
| - } |
71 |
| - |
72 |
| - const currentInstance = data || instance |
73 |
| - |
74 |
| - useEffect(() => { |
75 |
| - if (!data) { |
76 |
| - return |
77 |
| - } |
78 |
| - if (isStoppingInstance && data.runState === 'stopped') { |
79 |
| - queryClient.invalidateQueries('instanceView') |
80 |
| - setIsStoppingInstance(false) |
81 |
| - } |
82 |
| - }, [isStoppingInstance, data, queryClient]) |
83 |
| - |
84 |
| - if ( |
85 |
| - !currentInstance || |
86 |
| - (currentInstance.runState !== 'stopping' && currentInstance.runState !== 'running') |
87 |
| - ) { |
88 |
| - return null |
| 49 | + // doing this after means it triggers polling by the top level InstancePage one |
| 50 | + apiQueryClient.invalidateQueries('instanceView') |
89 | 51 | }
|
90 | 52 |
|
91 | 53 | return (
|
|
0 commit comments