From e2baca387aea3ca031c426705e829a389fbcd740 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 25 Feb 2023 14:23:21 -0700
Subject: [PATCH] Format vainfo display

---
 web/src/components/Dialog.jsx |  2 +-
 web/src/routes/System.jsx     | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Dialog.jsx b/web/src/components/Dialog.jsx
index ad4f57d72..6bf9e3105 100644
--- a/web/src/components/Dialog.jsx
+++ b/web/src/components/Dialog.jsx
@@ -21,7 +21,7 @@ export default function Dialog({ children, portalRootID = 'dialogs' }) {
       >
         <div
           role="modal"
-          className={`absolute rounded shadow-2xl bg-white dark:bg-gray-700 max-w-sm text-gray-900 dark:text-white transition-transform transition-opacity duration-75 transform scale-90 opacity-0 ${
+          className={`absolute rounded shadow-2xl bg-white dark:bg-gray-700 sm:max-w-sm md:max-w-md lg:max-w-lg text-gray-900 dark:text-white transition-transform transition-opacity duration-75 transform scale-90 opacity-0 ${
             show ? 'scale-100 opacity-100' : ''
           }`}
         >
diff --git a/web/src/routes/System.jsx b/web/src/routes/System.jsx
index e1bacff95..1a394f5e7 100644
--- a/web/src/routes/System.jsx
+++ b/web/src/routes/System.jsx
@@ -68,7 +68,11 @@ export default function System() {
     const response = await axios.get('vainfo');
 
     if (response.status === 200) {
-      setState({ ...state, showVainfo: true, vainfo: JSON.stringify(response.data, null, 2) });
+      setState({
+        ...state,
+        showVainfo: true,
+        vainfo: response.data,
+      });
     } else {
       setState({ ...state, showVainfo: true, vainfo: 'There was an error getting the vainfo output.' });
     }
@@ -128,10 +132,22 @@ export default function System() {
 
       {state.showVainfo && (
         <Dialog>
-          <div className="p-4">
+          <div className="p-4 overflow-scroll whitespace-pre-line">
             <Heading size="lg">Vainfo Output</Heading>
             {state.vainfo != '' ? (
-              <p className="mb-2 max-h-96 overflow-scroll">{state.vainfo}</p>
+              <div className="mb-2 max-h-96 whitespace-pre-line">
+                <div className="">Return Code:</div>
+                <br />
+                <div>{state.vainfo.return_code}</div>
+                <br />
+                <div className="">Process Error:</div>
+                <br />
+                <div>{state.vainfo.stderr}</div>
+                <br />
+                <div className="">Process Output:</div>
+                <br />
+                {state.vainfo.stdout}
+              </div>
             ) : (
               <ActivityIndicator />
             )}