From 45c43d7cf56f88ba3c137f9bd7e3011d8cd7b5fd Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 12 Dec 2022 05:28:44 -0700
Subject: [PATCH] UI Cleanup & Optimization (#4673)

* Use prewrap so vainfo output appears normalized

* Move copy button to top so user doesn't need to scroll to copy logs

* Show calculating if no value for stream bandwidth
---
 web/src/routes/Logs.jsx    | 7 ++++---
 web/src/routes/Storage.jsx | 2 +-
 web/src/routes/System.jsx  | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/routes/Logs.jsx b/web/src/routes/Logs.jsx
index b48ae187d..99c0462ed 100644
--- a/web/src/routes/Logs.jsx
+++ b/web/src/routes/Logs.jsx
@@ -40,12 +40,13 @@ export default function Logs() {
 
       <ButtonsTabbed viewModes={['frigate', 'go2rtc', 'nginx']} setViewMode={setLogService} />
 
-      <div className='overflow-auto font-mono text-sm text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 whitespace-pre-wrap'>
-        {logs}
-      </div>
       <Button className="" onClick={handleCopyLogs}>
         Copy to Clipboard
       </Button>
+
+      <div className="overflow-auto font-mono text-sm text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 whitespace-pre-wrap">
+        {logs}
+      </div>
     </div>
   );
 }
diff --git a/web/src/routes/Storage.jsx b/web/src/routes/Storage.jsx
index 213d70a4c..ff2602f7d 100644
--- a/web/src/routes/Storage.jsx
+++ b/web/src/routes/Storage.jsx
@@ -97,7 +97,7 @@ export default function Storage() {
                     <Tbody>
                       <Tr>
                         <Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td>
-                        <Td>{camera['bandwidth']} MB/hr</Td>
+                        <Td>{camera['bandwidth'] ? camera['bandwidth'] : "Calculating..."} MB/hr</Td>
                       </Tr>
                     </Tbody>
                   </Table>
diff --git a/web/src/routes/System.jsx b/web/src/routes/System.jsx
index 9f923bbc7..df21508b8 100644
--- a/web/src/routes/System.jsx
+++ b/web/src/routes/System.jsx
@@ -114,7 +114,7 @@ export default function System() {
               <ActivityIndicator />
             )}
           </div>
-          <div className="p-2 flex justify-start flex-row-reverse space-x-2">
+          <div className="p-2 flex justify-start flex-row-reverse space-x-2 whitespace-pre-wrap">
             <Button className="ml-2" onClick={() => onCopyVainfo()} type="text">
               Copy
             </Button>