improve advanced console to better rendering/reading of JSON outputs

Author: santteegt

build/ui/package.json

@@ -16,6 +16,7 @@
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@uiw/react-json-view": "^2.0.0-alpha.38",
     "axios": "^1.3.4",
     "bignumber.js": "^9.1.1",
     "react": "^18.2.0",

build/ui/src/components/Advanced/AdvancedTab.tsx

@@ -7,14 +7,15 @@ import {
   Button,
   CircularProgress,
 } from "@mui/material";
+import JsonView from "@uiw/react-json-view";
 import { AppService } from "../../services/AppService";
-import { escapeNewLine } from "../../utils/Utils";
 
 interface AdvancedTabProps {}
 
 const AdvancedTab: React.FC<AdvancedTabProps> = (): JSX.Element => {
   const [command, setCommand] = useState<string>("");
-  const [output, setOutput] = useState<string>("");
+  const [commandHistory, setCommandHistory] = useState<string[]>([]);
+  const [outputLines, setOutputLines] = useState<Array<string | object>>([]);
   const [loadingCommand, setLoadingCommand] = useState<boolean>(false);
   const appService = new AppService();
 
@@ -25,7 +26,7 @@ const AdvancedTab: React.FC<AdvancedTabProps> = (): JSX.Element => {
     if (outputRef.current) {
       outputRef.current.scrollTop = outputRef.current.scrollHeight;
     }
-  }, [output]);
+  }, [outputLines]);
 
   const handleCommandChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCommand(event.target.value);
@@ -36,9 +37,15 @@ const AdvancedTab: React.FC<AdvancedTabProps> = (): JSX.Element => {
     event.preventDefault();
 
     const output = await appService.runCustomCommand(command);
-
+    
     // Append the command and output to the output box
-    setOutput((prevOutput) => prevOutput + `>> ${command}\n${output}\n\n`);
+    try {
+      const jsonOutput = JSON.parse(output);
+      setOutputLines((prevOutputLines) => [...prevOutputLines, jsonOutput]);
+    } catch (error) {
+      setOutputLines((prevOutputLines) => [...prevOutputLines, output]);
+    }
+    setCommandHistory((prevCommandHistory) => [...prevCommandHistory, command]);
 
     // Clear the input field
     setCommand("");
@@ -52,7 +59,8 @@ const AdvancedTab: React.FC<AdvancedTabProps> = (): JSX.Element => {
           <Alert severity="warning" variant="filled">
             <AlertTitle>Advanced Users Only</AlertTitle>
             This tab is designed for advanced users. It allows sending commands
-            to the rocketpool binary and displays the output obtained.
+            to the rocketpool binary and displays the output obtained. Type --help
+            for a list of available commands.
           </Alert>
         </Box>
       </div>
@@ -71,21 +79,48 @@ const AdvancedTab: React.FC<AdvancedTabProps> = (): JSX.Element => {
           sx={{ backgroundColor: "grey.200" }}
           ref={outputRef}
         >
-          <pre
-            style={{
-              whiteSpace: "pre-wrap",
-              margin: 0,
-              fontFamily: "Ubuntu Mono, monospace",
-              fontSize: "14px",
-              lineHeight: "1.4",
-              color: "#555555",
-              textAlign: "left",
-              overflowWrap: "break-word",
-              wordBreak: "break-all",
-            }}
-          >
-            {escapeNewLine(output)}
-          </pre>
+          {outputLines.map((line, index) => (
+            <div key={`output-line-${index}`}>
+              <pre
+                style={{
+                  margin: 0,
+                  fontFamily: "Ubuntu Mono, monospace",
+                  fontSize: "14px",
+                  color: "#555555",
+                  textAlign: "left",
+                  fontWeight: "bold",
+                }}
+              >
+                rocketpoold-api:~$ {commandHistory[index]}
+              </pre>
+              {typeof line === "object" ? (
+                <JsonView
+                  value={line}
+                  displayDataTypes={false}
+                  collapsed
+                  shortenTextAfterLength={100}
+                  style={{
+                    textAlign: "left"
+                  }}
+                />
+              ) : (
+                <pre
+                style={{
+                  whiteSpace: "pre-wrap",
+                  margin: 0,
+                  fontFamily: "Ubuntu Mono, monospace",
+                  fontSize: "14px",
+                  lineHeight: "1.4",
+                  color: "#555555",
+                  textAlign: "left",
+                  overflowWrap: "break-word",
+                  wordBreak: "break-all",
+                }}>
+                  {line || "Error: Invalid command"}
+                </pre>
+              )}
+            </div>
+          ))}
         </Box>
         <form
           onSubmit={handleSubmit}