feat: manage script return value

engine/frontend/src/component/ServiceInfo.js

@@ -24,7 +24,6 @@ const renderServices = (services, handleClick) => {
 
 const ServiceInfo = () => {
     const navigate = useNavigate();
-    const [viewLog, setViewLog] = useState(false)
     const [logs, setLogs] = useState([])
     const {state} = useLocation();
     const {services, selected} = state;

engine/frontend/src/component/log/CreateEnclaveLog.js

@@ -6,21 +6,24 @@ import {runStarlark} from "../../api/enclave";
 import {getEnclaveInformation} from "../../api/container";
 import LoadingOverlay from "../LoadingOverflow";
 import {Box, Text, Flex, Spacer, Center} from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 
 const SERVICE_IS_ADDED = "added with service";
-const ERROR = "error"
+export const ERROR = "error"
 const INSTRUCTION = "instruction"
 const PROGRESS_INFO = "progressInfo"
 const INSTRUCTION_RESULT = "instructionResult"
-
+export const RUN_FINISHED_EVENT = "runFinishedEvent"
+export const PROCESSING_EVENT = PROGRESS_INFO
 
 export const CreateEnclaveLog = ({packageId, enclave, args, appData}) => {
     const navigate = useNavigate();
     const [loading, setLoading] = useState(false)
     const [logs, setLogs] = useState([])
+    const [logsCurrentExecutionStatus, setLogsCurrentExecutionStatus] = useState("")
+    const [logsErrorExecutionStatus, setLogsErrorExecutionStatus] = useState("")
     const [services, setServices] = useState([])
-    
+
     const getServices = async (enclave) => {
         const {services: newServices} = await getEnclaveInformation(enclave.host, enclave.port, appData.jwtToken, appData.apiHost);
         if (newServices.length > services.length) {
@@ -34,6 +37,7 @@ export const CreateEnclaveLog = ({packageId, enclave, args, appData}) => {
         }
 
         if (result.case === PROGRESS_INFO && result.value.currentStepInfo.length > 0) {
+            setLogsCurrentExecutionStatus(PROCESSING_EVENT)
             if (result.value.currentStepInfo[result.value.currentStepNumber] !== undefined) {
                 setLogs(logs => [...logs, result.value.currentStepInfo[result.value.currentStepNumber]])
             }
@@ -49,6 +53,12 @@ export const CreateEnclaveLog = ({packageId, enclave, args, appData}) => {
         if (result.case === ERROR) {
             const errorMessage = result.value.error.value.errorMessage;
             setLogs(logs => [...logs, errorMessage])
+            setLogsCurrentExecutionStatus(ERROR)
+            setLogsErrorExecutionStatus(ERROR)
+        }
+
+        if (result.case === RUN_FINISHED_EVENT) {
+            setLogsCurrentExecutionStatus(RUN_FINISHED_EVENT)
         }
     }
 
@@ -60,7 +70,7 @@ export const CreateEnclaveLog = ({packageId, enclave, args, appData}) => {
                 stream = await runStarlark(enclave.host, enclave.port, packageId, args, appData.jwtToken, appData.apiHost);
                 for await (const res of stream) {
                     const result = res["runResponseLine"]
-                    readStreamData(result)    
+                    readStreamData(result)
                 }
             } catch (ex) {
                 console.error("Error occurred while reading data from the enclave: ", enclave.name)
@@ -78,7 +88,8 @@ export const CreateEnclaveLog = ({packageId, enclave, args, appData}) => {
     const renderServices = (services, handleClick) => {
         return services.map(service => {
             return (
-                <div className={`flex items-center justify-center h-14 text-base bg-[#24BA27]`} key={service.name} onClick={()=>handleClick(service)}>
+                <div className={`flex items-center justify-center h-14 text-base bg-[#24BA27]`} key={service.name}
+                     onClick={() => handleClick(service)}>
                     <div className='cursor-default text-lg text-white'> {service.name} </div>
                 </div>
             )
@@ -87,32 +98,37 @@ export const CreateEnclaveLog = ({packageId, enclave, args, appData}) => {
 
     const renderLogView = () => {
         return (
-            (logs.length > 0) ? <Log logs={logs} fileName={enclave.name} />: <Center color="white"> No Logs Available</Center>
+            (logs.length > 0) ? <Log
+                logs={logs}
+                fileName={enclave.name}
+                currentExecutionStatus={logsCurrentExecutionStatus}
+                errorStatus={logsErrorExecutionStatus}
+            /> : <Center color="white"> No Logs Available</Center>
         )
     }
 
     return (
         <div className="flex h-full">
             <div className="flex h-full">
-                <LeftPanel 
-                    home={false} 
-                    heading={"Services"} 
+                <LeftPanel
+                    home={false}
+                    heading={"Services"}
                     isServiceInfo={true}
-                    renderList={ ()=> renderServices(services, handleServiceClick)}
+                    renderList={() => renderServices(services, handleServiceClick)}
                 />
                 <div className="flex h-full w-[calc(100vw-39rem)] flex-col space-y-5">
                     <div className='flex flex-col h-full space-y-1 bg-[#171923]'>
-                        <Flex bg={"#171923"} height={`80px`}>    
-                            <Box p='2' m="4"> 
-                                <Text color={"white"} fontSize='xl' as='b'> 
-                                    Logs  for {enclave.name} 
+                        <Flex bg={"#171923"} height={`80px`}>
+                            <Box p='2' m="4">
+                                <Text color={"white"} fontSize='xl' as='b'>
+                                    Logs for {enclave.name}
                                 </Text>
                             </Box>
                             <Spacer/>
                         </Flex>
-                        { (loading && logs.length === 0) ? <LoadingOverlay /> : renderLogView()}
-                    </div>  
-                </div>                    
+                        {(loading && logs.length === 0) ? <LoadingOverlay/> : renderLogView()}
+                    </div>
+                </div>
                 <RightPanel home={false} isServiceInfo={!loading} enclaveName={enclave.name}/>
             </div>
         </div>

engine/frontend/src/component/log/Log.js

@@ -1,12 +1,13 @@
 import React, {useEffect, useRef, useState} from "react";
 import useWindowDimensions from "../../utils/windowDimension";
-import {Box, Flex, Spacer, Tooltip, useClipboard} from "@chakra-ui/react";
-import {DownloadIcon, TriangleDownIcon} from '@chakra-ui/icons'
+import {Box, Flex, Spacer, Spinner, Tooltip, useClipboard} from "@chakra-ui/react";
 import parse from 'html-react-parser';
 import hasAnsi from 'has-ansi';
 import stripAnsi from 'strip-ansi';
 import {saveTextAsFile} from "../../utils/download";
 import {Virtuoso} from "react-virtuoso";
+import {CheckIcon, DownloadIcon, TriangleDownIcon, WarningIcon} from '@chakra-ui/icons'
+import {PROCESSING_EVENT, RUN_FINISHED_EVENT} from "./CreateEnclaveLog";
 
 var os = require('os-browserify/browser')
 const Convert = require('ansi-to-html');
@@ -26,18 +27,54 @@ const Row = ({log}) => {
     return <></>;
 };
 
-export const Log = ({logs, fileName}) => {
+const logsStatus = (event, errorStatus) => {
+    if (event === RUN_FINISHED_EVENT && (errorStatus === "")) {
+        return (
+            <>
+                <Tooltip label='Success! Script finished successfully'>
+                    <CheckIcon color='green'/>
+                </Tooltip>
+            </>
+        )
+    } else if (event === PROCESSING_EVENT) {
+        return (
+            <>
+                <Tooltip label='Script is running...'>
+                    <Spinner/>
+                </Tooltip>
+            </>
+        )
+    } else if (event === RUN_FINISHED_EVENT && errorStatus) {
+        return (
+            <>
+                <Tooltip label='Error! Script finished with an error'>
+                    <WarningIcon color='red'/>
+                </Tooltip>
+            </>
+        )
+    } else {
+        return (
+            <>
+            </>
+        )
+    }
+}
+
+
+export const Log = ({logs, fileName, currentExecutionStatus, errorStatus}) => {
     const [displayLogs, setDisplayLogs] = useState(logs)
     const virtuosoRef = useRef(null)
     const {height: windowHeight} = useWindowDimensions();
     const {onCopy, setValue: setCopyValue, hasCopied} = useClipboard("");
+    const [logsExecutionStatus, setLogsExecutionStatus] = useState(<></>)
 
     useEffect(() => {
         setDisplayLogs(logs);
         const logsWithoutAnsi = logs.map((log) => {
             return stripAnsi(log)
         })
         setCopyValue(logsWithoutAnsi.join(os.EOL))
+        setLogsExecutionStatus(logsStatus(currentExecutionStatus, errorStatus))
     }, [logs]);
 
     const handleDownload = () => {
@@ -68,7 +105,12 @@ export const Log = ({logs, fileName}) => {
             />
             <Flex className="bg-black" style={{height: `80px`}}>
                 <Spacer/>
-                <Tooltip label={`${hasCopied ? "Copied!" : "Copy"}`}
+                <Box p='2' m="4"
+                     height={"40px"}
+                >
+                    <Box>{logsExecutionStatus}</Box>
+                </Box>
+                <Tooltip label={`${hasCopied ? "Copied!" : "Copy to clipboard"}`}
                          placement='top-end'
                          closeOnClick={false}
                 >
@@ -82,7 +124,7 @@ export const Log = ({logs, fileName}) => {
                         </svg>
                     </Box>
                 </Tooltip>
-                <Tooltip label={"Download"}
+                <Tooltip label={"Download to file"}
                          placement='top'
                 >
                     <Box p='2' m="4" onClick={handleDownload} height={"40px"}>