From 33324d58acc66ad692f819f244b26a49fc3c1493 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Sat, 25 May 2024 21:26:22 +0100 Subject: [PATCH 1/9] added button to cancel operation and show logs --- .../components/Playground/ViewNavigation.tsx | 105 ++++++++++++++---- agenta-web/src/lib/services/api.ts | 13 ++- 2 files changed, 94 insertions(+), 24 deletions(-) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 902dbdbecc..fb9f33f49a 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -81,6 +81,10 @@ const ViewNavigation: React.FC = ({ const retriedOnce = useRef(false) const netWorkError = (error as any)?.code === "ERR_NETWORK" const [isDrawerOpen, setIsDrawerOpen] = useState(false) + const stopperRef = useRef(null) + const [isDelayed, setIsDelayed] = useState(false) + const [loading, setLoading] = useState(false) + const [isLogsLoading, setIsLogsLoading] = useState(false) let prevKey = "" const showNotification = (config: Parameters[0]) => { @@ -93,38 +97,93 @@ const ViewNavigation: React.FC = ({ if (netWorkError) { retriedOnce.current = true setRetrying(true) - waitForAppToStart({appId, variant, timeout: isDemo() ? 40000 : 6000}) - .then(() => { - refetch() + const startApp = async () => { + const {stopper, promise} = await waitForAppToStart({ + appId, + variant, + timeout: isDemo() ? 40000 : 10000, }) - .catch(() => { - showNotification({ - type: "error", - message: "Variant unreachable", - description: `Unable to connect to the variant.`, + stopperRef.current = stopper + + promise + .then(() => { + if (!isError) { + refetch() + } }) - }) - .finally(() => { - setRetrying(false) - }) + .catch(() => { + showNotification({ + type: "error", + message: "Variant unreachable", + description: `Unable to connect to the variant.`, + }) + }) + .finally(() => { + setRetrying(false) + setIsDelayed(false) + }) + } + startApp() } 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) + }, + isDemo() ? 15000 : 5000, + ) + return () => clearTimeout(timeout) + } + }, [retrying, variantErrorLogs]) + + const handleStopPolling = () => { + setLoading(true) + if (stopperRef.current) { + stopperRef.current() + } + } + if (retrying || (!retriedOnce.current && netWorkError)) { return ( - + <> +
+ + {isDelayed && ( + + )} +
+ ) } @@ -176,7 +235,11 @@ const ViewNavigation: React.FC = ({ const apiAddress = `${containerURI}/openapi.json` return (
- {error ? ( + {!error ? null : isLogsLoading || !variantErrorLogs ? ( +
+ +
+ ) : (

Error connecting to the variant {variant.variantName}.{" "} @@ -237,7 +300,7 @@ const ViewNavigation: React.FC = ({

- ) : null} + )}
) } diff --git a/agenta-web/src/lib/services/api.ts b/agenta-web/src/lib/services/api.ts index 9bdcc66189..3ca427823c 100644 --- a/agenta-web/src/lib/services/api.ts +++ b/agenta-web/src/lib/services/api.ts @@ -577,7 +577,10 @@ export const waitForAppToStart = async ({ variant?: Variant timeout?: number interval?: number -}) => { +}): Promise<{ + stopper: () => void + promise: Promise +}> => { const _variant = variant || (await fetchVariants(appId, true))[0] if (_variant) { const {stopper, promise} = shortPoll( @@ -590,7 +593,10 @@ export const waitForAppToStart = async ({ ).then(() => stopper()), {delayMs: interval, timeoutMs: timeout}, ) - await promise + + return {stopper, promise} + } else { + return {stopper: () => {}, promise: Promise.reject(new Error("Variant not found"))} } } @@ -649,7 +655,8 @@ export const createAndStartTemplate = async ({ onStatusChange?.("starting_app", "", app?.data?.app_id) try { - await waitForAppToStart({appId: app?.data?.app_id, timeout}) + const {promise} = await waitForAppToStart({appId: app?.data?.app_id, timeout}) + await promise } catch (error: any) { if (error.message === "timeout") { onStatusChange?.("timeout", "", app?.data?.app_id) From 267ddc61a8a9c15832b83ae413d292ba6987e1f9 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Tue, 11 Jun 2024 10:18:37 +0100 Subject: [PATCH 2/9] refactor(frontend): improve loading in playground --- .../src/components/Playground/ViewNavigation.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 2012454853..e1178de9c8 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -167,6 +167,9 @@ const ViewNavigation: React.FC = ({ } } + if (isLoading || isLogsLoading || !variantErrorLogs) + return + if (retrying || (!retriedOnce.current && netWorkError)) { return ( <> @@ -235,11 +238,7 @@ const ViewNavigation: React.FC = ({ const apiAddress = `${containerURI}/openapi.json` return (
- {!error ? null : isLogsLoading || !variantErrorLogs ? ( -
- -
- ) : ( + {error ? (

Error connecting to the variant {variant.variantName}.{" "} @@ -302,13 +301,13 @@ const ViewNavigation: React.FC = ({

- )} + ) : null}
) } return ( - + <> = ({ /> - + ) } From dc05337afdadea347805288e8e8e24ccd34fb3c0 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Sat, 15 Jun 2024 00:05:28 +0100 Subject: [PATCH 3/9] perf(frontend): code cleanup and review --- agenta-web/src/components/Playground/ViewNavigation.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 2590256913..2911228927 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useRef} from "react" -import {Col, Row, Divider, Button, Tooltip, Spin, notification, Typography} from "antd" +import {Col, Row, Divider, Button, Tooltip, notification, Typography} from "antd" import TestView from "./Views/TestView" import ParametersView from "./Views/ParametersView" import {useVariant} from "@/lib/hooks/useVariant" @@ -8,7 +8,6 @@ import {useRouter} from "next/router" import {useState} from "react" import axios from "axios" import {createUseStyles} from "react-jss" - import {fetchAppContainerURL, waitForAppToStart} from "@/services/api" import {useAppsData} from "@/contexts/app.context" import {isDemo} from "@/lib/helpers/utils" @@ -167,7 +166,7 @@ const ViewNavigation: React.FC = ({ } } - if (isLoading || isLogsLoading || !variantErrorLogs) + if (isLoading || isLogsLoading) return if (retrying || (!retriedOnce.current && netWorkError)) { From eb4ff70cd439257db11cd0b3f711e09a8a7074f9 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Tue, 9 Jul 2024 14:01:49 +0100 Subject: [PATCH 4/9] minor fix --- agenta-web/src/lib/hooks/useVariant.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/agenta-web/src/lib/hooks/useVariant.ts b/agenta-web/src/lib/hooks/useVariant.ts index 82522d4841..b446522caa 100644 --- a/agenta-web/src/lib/hooks/useVariant.ts +++ b/agenta-web/src/lib/hooks/useVariant.ts @@ -35,7 +35,7 @@ export function useVariant(appId: string, variant: Variant) { setInputParams(inputs) setURIPath(URIPath) setIsChatVariant(isChatVariant) - setHistoryStatus({loading: false, error: true}) + setHistoryStatus({loading: false, error: false}) } catch (error: any) { if (error.message !== PERMISSION_ERR_MSG) { console.log(error) @@ -45,7 +45,6 @@ export function useVariant(appId: string, variant: Variant) { } } finally { setIsLoading(false) - setHistoryStatus({loading: false, error: false}) } } From e923b4245dd4c805fd2c7be1b733fb995a817887 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Tue, 9 Jul 2024 14:18:46 +0100 Subject: [PATCH 5/9] fix(frontend): fetch variant logs --- .../components/Playground/ViewNavigation.tsx | 42 ++++++------------- agenta-web/src/lib/hooks/useVariant.ts | 19 ++++++++- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 2911228927..7c86a0b66d 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -69,12 +69,14 @@ const ViewNavigation: React.FC = ({ historyStatus, setPromptOptParams, setHistoryStatus, + getVariantLogs, + isLogsLoading, + variantErrorLogs, } = useVariant(appId, variant) const [retrying, setRetrying] = useState(false) const [isParamsCollapsed, setIsParamsCollapsed] = useState("1") const [containerURI, setContainerURI] = useState("") - const [variantErrorLogs, setVariantErrorLogs] = useState("") const [restarting, setRestarting] = useState(false) const {currentApp} = useAppsData() const retriedOnce = useRef(false) @@ -82,8 +84,6 @@ const ViewNavigation: React.FC = ({ const [isDrawerOpen, setIsDrawerOpen] = useState(false) const stopperRef = useRef(null) const [isDelayed, setIsDelayed] = useState(false) - const [loading, setLoading] = useState(false) - const [isLogsLoading, setIsLogsLoading] = useState(false) let prevKey = "" const showNotification = (config: Parameters[0]) => { @@ -111,6 +111,8 @@ const ViewNavigation: React.FC = ({ } }) .catch(() => { + getVariantLogs() + showNotification({ type: "error", message: "Variant unreachable", @@ -124,31 +126,10 @@ const ViewNavigation: React.FC = ({ } startApp() } - - if (isError) { - setLoading(false) - const getLogs = async () => { - 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) { + if (retrying) { const timeout = setTimeout( () => { setIsDelayed(true) @@ -157,18 +138,21 @@ const ViewNavigation: React.FC = ({ ) return () => clearTimeout(timeout) } - }, [retrying, variantErrorLogs]) + }, [retrying]) const handleStopPolling = () => { - setLoading(true) if (stopperRef.current) { stopperRef.current() + getVariantLogs() } } - if (isLoading || isLogsLoading) + if (isLoading) return + if (isLogsLoading) + return + if (retrying || (!retriedOnce.current && netWorkError)) { return ( <> @@ -180,7 +164,7 @@ const ViewNavigation: React.FC = ({ spinner={retrying} /> {isDelayed && ( - )} diff --git a/agenta-web/src/lib/hooks/useVariant.ts b/agenta-web/src/lib/hooks/useVariant.ts index b446522caa..53e6049870 100644 --- a/agenta-web/src/lib/hooks/useVariant.ts +++ b/agenta-web/src/lib/hooks/useVariant.ts @@ -2,7 +2,7 @@ import {useState, useEffect} from "react" import {Variant, Parameter} from "@/lib/Types" import {getAllVariantParameters, updateInputParams} from "@/lib/helpers/variantHelper" import {PERMISSION_ERR_MSG} from "../helpers/axiosConfig" -import {createNewVariant, updateVariantParams} from "@/services/playground/api" +import {createNewVariant, fetchVariantLogs, updateVariantParams} from "@/services/playground/api" /** * Hook for using the variant. @@ -21,6 +21,20 @@ export function useVariant(appId: string, variant: Variant) { const [error, setError] = useState(null) const [isParamSaveLoading, setIsParamSaveLoading] = useState(false) const [isChatVariant, setIsChatVariant] = useState(null) + const [isLogsLoading, setIsLogsLoading] = useState(false) + const [variantErrorLogs, setVariantErrorLogs] = useState("") + + const getVariantLogs = async () => { + try { + setIsLogsLoading(true) + const logs = await fetchVariantLogs(variant.variantId) + setVariantErrorLogs(logs) + } catch (error) { + console.error(error) + } finally { + setIsLogsLoading(false) + } + } const fetchParameters = async () => { setIsLoading(true) @@ -111,6 +125,9 @@ export function useVariant(appId: string, variant: Variant) { historyStatus, setPromptOptParams, setHistoryStatus, + getVariantLogs, + isLogsLoading, + variantErrorLogs, } } From e0ded6e82fea581e02961fbc5eaaee822c7efeac Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Wed, 10 Jul 2024 19:07:33 +0100 Subject: [PATCH 6/9] fix(frontend): fetch variant logs in oss --- .../src/components/Playground/ViewNavigation.tsx | 14 +++++++++----- agenta-web/src/lib/hooks/useVariant.ts | 1 + 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 7c86a0b66d..4dcebb1622 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -72,6 +72,7 @@ const ViewNavigation: React.FC = ({ getVariantLogs, isLogsLoading, variantErrorLogs, + setIsLogsLoading, } = useVariant(appId, variant) const [retrying, setRetrying] = useState(false) @@ -84,6 +85,7 @@ const ViewNavigation: React.FC = ({ const [isDrawerOpen, setIsDrawerOpen] = useState(false) const stopperRef = useRef(null) const [isDelayed, setIsDelayed] = useState(false) + const hasError = netWorkError || (isDemo() ? netWorkError : isError) let prevKey = "" const showNotification = (config: Parameters[0]) => { @@ -93,7 +95,7 @@ const ViewNavigation: React.FC = ({ } useEffect(() => { - if (netWorkError) { + if (hasError) { retriedOnce.current = true setRetrying(true) const startApp = async () => { @@ -141,6 +143,7 @@ const ViewNavigation: React.FC = ({ }, [retrying]) const handleStopPolling = () => { + setIsLogsLoading(true) if (stopperRef.current) { stopperRef.current() getVariantLogs() @@ -150,9 +153,6 @@ const ViewNavigation: React.FC = ({ if (isLoading) return - if (isLogsLoading) - return - if (retrying || (!retriedOnce.current && netWorkError)) { return ( <> @@ -164,7 +164,11 @@ const ViewNavigation: React.FC = ({ spinner={retrying} /> {isDelayed && ( - )} diff --git a/agenta-web/src/lib/hooks/useVariant.ts b/agenta-web/src/lib/hooks/useVariant.ts index 53e6049870..5fd65ab689 100644 --- a/agenta-web/src/lib/hooks/useVariant.ts +++ b/agenta-web/src/lib/hooks/useVariant.ts @@ -128,6 +128,7 @@ export function useVariant(appId: string, variant: Variant) { getVariantLogs, isLogsLoading, variantErrorLogs, + setIsLogsLoading, } } From 000fac8047ed7473774fc4f449a2acafe561bc42 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Thu, 11 Jul 2024 04:32:42 +0100 Subject: [PATCH 7/9] improve ui for loading logs state --- agenta-web/src/components/Playground/ViewNavigation.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 4dcebb1622..70c971e189 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -153,6 +153,9 @@ const ViewNavigation: React.FC = ({ if (isLoading) return + if (isLogsLoading && isError) + return + if (retrying || (!retriedOnce.current && netWorkError)) { return ( <> From f3e70cbef1ae87c043e3dab0f75860cbee2f45b4 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Thu, 11 Jul 2024 08:20:49 +0100 Subject: [PATCH 8/9] fix(frontend): enable refetch parameters if promise is resolved --- agenta-web/src/components/Playground/ViewNavigation.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 70c971e189..7c900aa31d 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -108,9 +108,7 @@ const ViewNavigation: React.FC = ({ promise .then(() => { - if (!isError) { - refetch() - } + refetch() }) .catch(() => { getVariantLogs() From a2067c9c3eff3308e9a3d9f195d6a00df57d583a Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Thu, 11 Jul 2024 10:25:33 +0100 Subject: [PATCH 9/9] fix(frontend): minor improvements --- agenta-web/src/components/Playground/ViewNavigation.tsx | 6 +++++- agenta-web/src/lib/hooks/useVariant.ts | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/agenta-web/src/components/Playground/ViewNavigation.tsx b/agenta-web/src/components/Playground/ViewNavigation.tsx index 7c900aa31d..2038aa21cf 100644 --- a/agenta-web/src/components/Playground/ViewNavigation.tsx +++ b/agenta-web/src/components/Playground/ViewNavigation.tsx @@ -73,6 +73,7 @@ const ViewNavigation: React.FC = ({ isLogsLoading, variantErrorLogs, setIsLogsLoading, + onClickShowLogs, } = useVariant(appId, variant) const [retrying, setRetrying] = useState(false) @@ -108,7 +109,9 @@ const ViewNavigation: React.FC = ({ promise .then(() => { - refetch() + if (!onClickShowLogs.current) { + refetch() + } }) .catch(() => { getVariantLogs() @@ -143,6 +146,7 @@ const ViewNavigation: React.FC = ({ const handleStopPolling = () => { setIsLogsLoading(true) if (stopperRef.current) { + onClickShowLogs.current = true stopperRef.current() getVariantLogs() } diff --git a/agenta-web/src/lib/hooks/useVariant.ts b/agenta-web/src/lib/hooks/useVariant.ts index 5fd65ab689..239bc14f26 100644 --- a/agenta-web/src/lib/hooks/useVariant.ts +++ b/agenta-web/src/lib/hooks/useVariant.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from "react" +import {useState, useEffect, useRef} from "react" import {Variant, Parameter} from "@/lib/Types" import {getAllVariantParameters, updateInputParams} from "@/lib/helpers/variantHelper" import {PERMISSION_ERR_MSG} from "../helpers/axiosConfig" @@ -23,6 +23,7 @@ export function useVariant(appId: string, variant: Variant) { const [isChatVariant, setIsChatVariant] = useState(null) const [isLogsLoading, setIsLogsLoading] = useState(false) const [variantErrorLogs, setVariantErrorLogs] = useState("") + const onClickShowLogs = useRef(false) const getVariantLogs = async () => { try { @@ -129,6 +130,7 @@ export function useVariant(appId: string, variant: Variant) { isLogsLoading, variantErrorLogs, setIsLogsLoading, + onClickShowLogs, } }