Refactored handling of output messages in frontend

src/leo-client-app/src/components/SchedulerTerminal.tsx

@@ -37,6 +37,47 @@ const SchedulerTerminal = ({ disabled = false }: Props) => {
     });
   };
 
+  const commandSendingHandler = async (...args: string[]) => {
+    let commandReq = "";
+
+    // Iterate through each command separated by space
+    for (const message of args) {
+      commandReq += message + " ";
+    }
+
+    // Remove trailing white spaces
+    commandReq = commandReq.trim();
+
+    // Check if command is valid
+    const isValid = validCommands.data?.record[0]?.validCommands.some(
+      (cmd: string) => cmd === commandReq
+    );
+
+    if (!isValid) {
+      return "Invalid command sequence";
+    }
+
+    const res = await sendCommand(commandReq);
+
+    // Refetch commands scheduled
+    await queryClient.invalidateQueries({
+      queryKey: ["useGetCommandsBySchedule"],
+    });
+
+    // Split string by lines
+    const messages = res.output?.toString().split("\n") ?? "";
+
+    return (
+      <Stack gap={1}>
+        {!messages?.length && <Typography>Error</Typography>}
+        {messages?.length &&
+          messages.map((msg: string, index: number) => (
+            <p key={"terminal-message " + index}>{msg}</p>
+          ))}
+      </Stack>
+    );
+  };
+
   const commands = {
     help: (
       <Stack flexWrap={"wrap"} direction={"row"} spacing={4}>
@@ -70,20 +111,7 @@ const SchedulerTerminal = ({ disabled = false }: Props) => {
             },
           }}
           theme="my-custom-theme"
-          defaultHandler={async (request: any) => {
-            const isValid = validCommands.data?.record[0]?.validCommands.some(
-              (cmd: string) => cmd === request
-            );
-            if (!isValid) {
-              return "Invalid command sequence";
-            }
-
-            const res = await sendCommand(request);
-            await queryClient.invalidateQueries({
-              queryKey: ["useGetCommandsBySchedule"],
-            });
-            return res?.output ?? "Error";
-          }}
+          defaultHandler={commandSendingHandler}
         />
       </Box>
     </Stack>

src/leo-client-app/src/constants/hooks.ts

@@ -68,7 +68,5 @@ export const useGetPingSocket = () => {
   return useQuery({
     queryKey: ["useGetPingSocket"],
     queryFn: () => getPingSocket(),
-    // Refetch every 5 seconds
-    refetchInterval: 5000,
   });
 };

src/leo-client-app/src/pages/test-playground/index.tsx

@@ -2,13 +2,13 @@
 import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
 import Navbar from "@/components/navbar/Navbar";
 import EditScheduler from "@/components/EditSchedules";
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useRouter } from "next/router";
 import ExecuteScheduleCard from "@/components/ExecuteScheduleCard";
 import SchedulerTerminal from "@/components/SchedulerTerminal";
 import { ReactTerminal } from "react-terminal";
 import { sendCommandToTestForwarder } from "@/constants/api";
-import { useState } from "react";
+import { Key, useState } from "react";
 import SocketConnection from "@/components/SocketConnection";
 import { useGetPingSocket } from "@/constants/hooks";
 
@@ -52,7 +52,18 @@ function TestPlayground() {
     commandReq = commandReq.trim();
 
     const res = await sendCommand(commandReq);
-    return res?.output ?? "Error";
+
+    const messages = res.output?.toString().split("\n") ?? "";
+
+    return (
+      <Stack gap={1}>
+        {!messages?.length && <Typography>Error</Typography>}
+        {messages?.length &&
+          messages.map((msg: string, index: number) => (
+            <p key={"terminal-message " + index}>{msg}</p>
+          ))}
+      </Stack>
+    );
   };
 
   return (