Merge main into silo-quotas

app/pages/project/instances/instance/SerialConsolePage.tsx

@@ -14,7 +14,7 @@ import {
   apiQueryClient,
   instanceCan,
   usePrefetchedApiQuery,
-  type InstanceState,
+  type Instance,
 } from '@oxide/api'
 import { PrevArrow12Icon } from '@oxide/design-system/icons/react'
 
@@ -53,14 +53,24 @@ SerialConsolePage.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
+function isStarting(i: Instance | undefined) {
+  return i?.runState === 'creating' || i?.runState === 'starting'
+}
+
 export function SerialConsolePage() {
   const instanceSelector = useInstanceSelector()
   const { project, instance } = instanceSelector
 
-  const { data: instanceData } = usePrefetchedApiQuery('instanceView', {
-    query: { project },
-    path: { instance },
-  })
+  const { data: instanceData } = usePrefetchedApiQuery(
+    'instanceView',
+    {
+      query: { project },
+      path: { instance },
+    },
+    // if we land here and the instance is starting, we will not be able to
+    // connect, so we poll and connect as soon as it's running.
+    { refetchInterval: (q) => (isStarting(q.state.data) ? 1000 : false) }
+  )
 
   const ws = useRef<WebSocket | null>(null)
 
@@ -140,7 +150,7 @@ export function SerialConsolePage() {
         {connectionStatus === 'connecting' && <ConnectingSkeleton />}
         {connectionStatus === 'error' && <ErrorSkeleton />}
         {connectionStatus === 'closed' && !canConnect && (
-          <CannotConnect instanceState={instanceData.runState} />
+          <CannotConnect instance={instanceData} />
         )}
         {/* closed && canConnect shouldn't be possible because there's no way to
          * close an open connection other than leaving the page */}
@@ -161,21 +171,20 @@ export function SerialConsolePage() {
   )
 }
 
-function SerialSkeleton({
-  children,
-  connecting,
-}: {
+type SkeletonProps = {
   children: React.ReactNode
-  connecting?: boolean
-}) {
+  animate?: boolean
+}
+
+function SerialSkeleton({ children, animate }: SkeletonProps) {
   return (
     <div className="relative h-full shrink grow overflow-hidden">
       <div className="h-full space-y-2 overflow-hidden">
         {[...Array(200)].map((_e, i) => (
           <div
             key={i}
             className={cn('h-4 rounded bg-tertiary', {
-              'motion-safe:animate-pulse': connecting,
+              'motion-safe:animate-pulse': animate,
             })}
             style={{
               width: `${Math.sin(Math.sin(i)) * 20 + 40}%`,
@@ -198,22 +207,24 @@ function SerialSkeleton({
 }
 
 const ConnectingSkeleton = () => (
-  <SerialSkeleton connecting>
+  <SerialSkeleton animate>
     <Spinner size="lg" />
     <div className="mt-4 text-center">
       <p className="text-sans-xl">Connecting to serial console</p>
     </div>
   </SerialSkeleton>
 )
 
-const CannotConnect = ({ instanceState }: { instanceState: InstanceState }) => (
-  <SerialSkeleton>
+const CannotConnect = ({ instance }: { instance: Instance }) => (
+  <SerialSkeleton animate={isStarting(instance)}>
     <p className="flex items-center justify-center text-sans-xl">
-      <span>The instance is</span>
-      <InstanceStatusBadge className="ml-1" status={instanceState} />
+      <span>The instance is </span>
+      <InstanceStatusBadge className="ml-1.5" status={instance.runState} />
     </p>
-    <p className="mt-2 text-center text-secondary">
-      You can only connect to the serial console on a running instance.
+    <p className="mt-2 text-balance text-center text-secondary">
+      {isStarting(instance)
+        ? 'Waiting for the instance to start before connecting.'
+        : 'You can only connect to the serial console on a running instance.'}
     </p>
   </SerialSkeleton>
 )

mock-api/msw/handlers.ts

@@ -519,11 +519,11 @@ export const handlers = makeHandlers({
 
     setTimeout(() => {
       newInstance.run_state = 'starting'
-    }, 1000)
+    }, 500)
 
     setTimeout(() => {
       newInstance.run_state = 'running'
-    }, 5000)
+    }, 4000)
 
     db.instances.push(newInstance)
 
@@ -687,7 +687,7 @@ export const handlers = makeHandlers({
 
     setTimeout(() => {
       instance.run_state = 'running'
-    }, 1000)
+    }, 3000)
 
     return json(instance, { status: 202 })
   },
@@ -697,7 +697,7 @@ export const handlers = makeHandlers({
 
     setTimeout(() => {
       instance.run_state = 'stopped'
-    }, 1000)
+    }, 3000)
 
     return json(instance, { status: 202 })
   },

mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.1'
+const PACKAGE_VERSION = '2.3.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()