[Enhancement]: Logs are not fetched in cloud

agenta-web/src/components/Playground/ViewNavigation.tsx

@@ -81,6 +81,10 @@ const ViewNavigation: React.FC<Props> = ({
     const retriedOnce = useRef(false)
     const netWorkError = (error as any)?.code === "ERR_NETWORK"
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const stopperRef = useRef<Function | null>(null)
+    const [isDelayed, setIsDelayed] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const [isLogsLoading, setIsLogsLoading] = useState(false)
 
     let prevKey = ""
     const showNotification = (config: Parameters<typeof notification.open>[0]) => {
@@ -94,8 +98,17 @@ const ViewNavigation: React.FC<Props> = ({
             retriedOnce.current = true
             setRetrying(true)
             waitForAppToStart({appId, variant, timeout: isDemo() ? 40000 : 6000})
-                .then(() => {
-                    refetch()
+                .then((result) => {
+                    if (result) {
+                        stopperRef.current = result.stopper
+                        return result.promise
+                    }
+                    return null
+                })
+                .then((promise: any) => {
+                    if (promise) {
+                        return promise.then(() => refetch())
+                    }
                 })
                 .catch(() => {
                     showNotification({
@@ -106,25 +119,65 @@ const ViewNavigation: React.FC<Props> = ({
                 })
                 .finally(() => {
                     setRetrying(false)
+                    setIsDelayed(false)
                 })
         }
 
         if (isError) {
+            setLoading(false)
             const getLogs = async () => {
-                const logs = await fetchVariantLogs(variant.variantId)
-                setVariantErrorLogs(logs)
+                try {
+                    setIsLogsLoading(true)
+                    const logs = await fetchVariantLogs(variant.variantId)
+                    setVariantErrorLogs(logs)
+                } catch (error) {
+                    console.error(error)
+                    showNotification({
+                        type: "error",
+                        message: "Variant logs unreachable",
+                        description: `Unable to fetch variant logs.`,
+                    })
+                } finally {
+                    setIsLogsLoading(false)
+                }
             }
             getLogs()
         }
     }, [netWorkError, isError, variant.variantId])
 
+    useEffect(() => {
+        if (retrying && variantErrorLogs) {
+            const timeout = setTimeout(() => {
+                setIsDelayed(true)
+            }, 6000)
+            return () => clearTimeout(timeout)
+        }
+    }, [retrying, variantErrorLogs])
+
+    const handleStopPolling = () => {
+        setLoading(true)
+        if (stopperRef.current) {
+            stopperRef.current()
+        }
+    }
+
     if (retrying || (!retriedOnce.current && netWorkError)) {
         return (
-            <ResultComponent
-                status={"info"}
-                title="Waiting for the variant to start"
-                spinner={retrying}
-            />
+            <>
+                <div className="grid place-items-center">
+                    <ResultComponent
+                        status={"info"}
+                        title="Waiting for the variant to start"
+                        subtitle={isDelayed ? "This is taking longer than expected" : ""}
+                        spinner={retrying}
+                    />
+                    {isDelayed && (
+                        <Button loading={loading} onClick={handleStopPolling} type="primary">
+                            Show Logs
+                        </Button>
+                    )}
+                </div>
+            </>
         )
     }
 
@@ -176,7 +229,11 @@ const ViewNavigation: React.FC<Props> = ({
         const apiAddress = `${containerURI}/openapi.json`
         return (
             <div>
-                {error ? (
+                {!error ? null : isLogsLoading || !variantErrorLogs ? (
+                    <div className="grid place-items-center mt-10">
+                        <Spin />
+                    </div>
+                ) : (
                     <div>
                         <p>
                             Error connecting to the variant {variant.variantName}.{" "}
@@ -237,7 +294,7 @@ const ViewNavigation: React.FC<Props> = ({
                             </Tooltip>
                         </Button>
                     </div>
-                ) : null}
+                )}
             </div>
         )
     }

agenta-web/src/lib/services/api.ts

@@ -580,17 +580,25 @@ export const waitForAppToStart = async ({
 }) => {
     const _variant = variant || (await fetchVariants(appId, true))[0]
     if (_variant) {
+        let stopperFunc: Function | null = null
+
         const {stopper, promise} = shortPoll(
             () =>
                 getVariantParametersFromOpenAPI(
                     appId,
                     _variant.variantId,
                     _variant.baseId,
                     true,
-                ).then(() => stopper()),
+                ).then(() => {
+                    if (stopperFunc) stopperFunc()
+                    stopper()
+                }),
             {delayMs: interval, timeoutMs: timeout},
         )
-        await promise
+
+        stopperFunc = stopper
+
+        return {stopper: stopperFunc, promise}
     }
 }