Better formatting of runtime logs. Typing logs. Fixing ShipResult bug

Author: madebydavid

src/components/Go.tsx

@@ -1,11 +1,19 @@
 import {useContext, useState} from 'react'
+import {Box, Text} from 'ink'
 
-import {getShortUUID, useProjectJobListener, useStartShipOnMount} from '@cli/utils/index.js'
+import {TruncatedText} from './common/TruncatedText.js'
+import {
+  getRuntimeLogLevelColor,
+  getShortTime,
+  getShortUUID,
+  useGoRuntimeLogListener,
+  useProjectJobListener,
+  useStartShipOnMount,
+} from '@cli/utils/index.js'
 import {getJobBuildsRetry} from '@cli/api/index.js'
 
-import {CommandContext, GameContext, JobProgress, QRCodeTerminal} from './index.js'
+import {CommandContext, GameContext, JobProgress, QRCodeTerminal, Title} from './index.js'
 import {Job, Platform} from '@cli/types/api.js'
-import {useGoRuntimeLogListener} from '@cli/utils/hooks/useGoRuntimeLogListener.js'
 
 interface Props {
   onComplete: () => void
@@ -25,8 +33,27 @@ interface GoCommandProps extends Props {
 }
 
 const LogListener = ({projectId, buildId}: {projectId: string; buildId: string}) => {
-  useGoRuntimeLogListener({projectId, buildId})
-  return null
+  const {tail, messages} = useGoRuntimeLogListener({projectId, buildId})
+
+  return (
+    <>
+      <Box flexDirection="column">
+        {messages.map((log, i) => {
+          const messageColor = getRuntimeLogLevelColor(log.level)
+          return (
+            <Box flexDirection="row" height={1} key={i} overflow="hidden">
+              <Box>
+                <Text>{getShortTime(log.sentAt)}</Text>
+              </Box>
+              <Box height={1} marginLeft={1} marginRight={2} overflow="hidden">
+                <TruncatedText color={messageColor}>{log.message}</TruncatedText>
+              </Box>
+            </Box>
+          )
+        })}
+      </Box>
+    </>
+  )
 }
 
 const GoCommand = ({command, gameId, onComplete, onError}: GoCommandProps): JSX.Element | null => {
@@ -60,15 +87,22 @@ const GoCommand = ({command, gameId, onComplete, onError}: GoCommandProps): JSX.
 
   if (qrCodeData && buildId) {
     return (
-      <>
+      <Box flexDirection='column'>
+        <Title>Go Build QR Code</Title>
         <QRCodeTerminal data={qrCodeData} />
+        <Text>{`Go build ID: ${getShortUUID(buildId)}`}</Text>
         <LogListener projectId={gameId} buildId={buildId} />
-      </>
+      </Box>
     )
   }
 
   if (startedJobs && startedJobs?.length > 0) {
-    return <JobProgress job={startedJobs[0]} />
+    return (
+      <Box flexDirection='column'>
+        <Text>Generating Go build, please wait...</Text>
+        <JobProgress job={startedJobs[0]} />
+      </Box>
+    )
   }
 
   return null

src/components/Ship/ShipResult.tsx

@@ -22,6 +22,7 @@ export const ShipResult = ({gameId, failedJobs, gameFlags}: ShipResultProps) =>
             templateVars={{
               gameBuildsUrl: `${WEB_URL}games/${getShortUUID(gameId)}/builds`,
               wasPublished: !gameFlags?.skipPublish,
+              usedDemoCredentials: !!gameFlags?.useDemoCredentials,
             }}
           />
         )}

src/types/api.ts

@@ -270,3 +270,19 @@ export interface TermsResponse {
   changes: AgreementVersion[]
   current: AgreementVersion[]
 }
+
+export enum RuntimeLogLevel {
+  VERBOSE = 'VERBOSE',
+  DEBUG = 'DEBUG',
+  INFO = 'INFO',
+  WARNING = 'WARNING',
+  ERROR = 'ERROR',
+}
+
+export interface RuntimeLogEntry {
+  buildId: string
+  level: RuntimeLogLevel
+  message: string
+  details?: any
+  sentAt: DateTime
+}

src/utils/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useAndroidServiceAccount.js'
 export * from './useGoogleStatusWatching.js'
+export * from './useGoRuntimeLogListener.js'
 export * from './useJobLogTail.js'
 export * from './useJobWatching.js'
 export * from './useProjectJobListener.js'

src/utils/hooks/useGoRuntimeLogListener.ts

@@ -1,17 +1,44 @@
+import {useState} from 'react'
+import {DateTime} from 'luxon'
+
 import {WebSocketListener, useWebSocket} from './useWebSocket.js'
+import {RuntimeLogEntry} from '@cli/types/api.js'
 
-export interface GoRuntimeLogListenerProps {
+interface Props {
   projectId: string
   buildId: string
+  tailLength?: number
+}
+
+interface Response {
+  messages: RuntimeLogEntry[]
+  tail: RuntimeLogEntry[]
 }
 
-export function useGoRuntimeLogListener({projectId, buildId}: GoRuntimeLogListenerProps) {
+// Listens for Go runtime logs for a build via WebSocket and gives a tail
+export function useGoRuntimeLogListener({projectId, buildId, tailLength = 10}: Props): Response {
+  const [messages, setMessages] = useState<RuntimeLogEntry[]>([])
+  const [tail, setTail] = useState<RuntimeLogEntry[]>([])
+
   const listener: WebSocketListener = {
-    async eventHandler(pattern: string, rawLog: any) {
-      console.log(`[Go Runtime Log] ${JSON.stringify(rawLog)}`)
+    async eventHandler(_: string, rawLog: any) {
+      const log: RuntimeLogEntry = {
+        ...rawLog,
+        sentAt: DateTime.fromISO(rawLog.sentAt),
+      }
+      setMessages((prev) => [...prev, log])
+      setTail((prev) => {
+        const next = [...prev, log]
+        if (next.length > tailLength) next.shift()
+        return next
+      })
+      //console.log(log.message)
     },
+
     getPattern: () => [`project.${projectId}:build.${buildId}:runtime-log`],
   }
 
   useWebSocket([listener])
+
+  return {messages, tail}
 }

src/utils/index.ts

@@ -6,7 +6,7 @@ import {fileURLToPath} from 'node:url'
 
 import readlineSync from 'readline-sync'
 
-import {JobStage, JobStatus, LogLevel, Platform, ScalarDict} from '@cli/types'
+import {JobStage, JobStatus, LogLevel, Platform, RuntimeLogLevel, ScalarDict} from '@cli/types'
 
 export * from './dates.js'
 export * from './dictionary.js'
@@ -85,6 +85,18 @@ export function getJobStatusColor(status: JobStatus) {
   }
 }
 
+// For the "Go" runtime logs
+const RUNTIME_LOG_LEVEL_COLORS: Record<RuntimeLogLevel, string> = {
+  [RuntimeLogLevel.VERBOSE]: '#E8E8FF',
+  [RuntimeLogLevel.DEBUG]:   '#E6F0FF',
+  [RuntimeLogLevel.INFO]:    '#E6FFE6',
+  [RuntimeLogLevel.WARNING]: '#FFF6CC',
+  [RuntimeLogLevel.ERROR]:   '#FFD6D6',
+}
+
+export const getRuntimeLogLevelColor = (level: RuntimeLogLevel) =>
+  RUNTIME_LOG_LEVEL_COLORS[level]
+
 export async function getFileHash(filename: string): Promise<string> {
   return new Promise((resolve, reject) => {
     const hash = crypto.createHash('sha256')