feat: added a tool tip to show users new logs are present (#1444)

Co-authored-by: Tedi Mitiku <[email protected]>
kurtosis-tech · Sep 29, 2023 · 82ce14b · 82ce14b
1 parent 4faf12f
commit 82ce14b
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 12 deletions.
diff --git a/engine/frontend/src/component/log/Log.js b/engine/frontend/src/component/log/Log.js
@@ -32,17 +32,22 @@ const Row = ({log}) => {
 };
 
 export const Log = ({logs, fileName}) => {
+  const [mouseOnDownload, setMouseOnDownload] =  useState(false);
   const [displayLogs, setDisplayLogs] = useState(logs)
   const virtuosoRef = useRef(null)
+  const [isScrolling, setIsScrolling] = useState(false)
+  const [atBottom, setAtBottom] = useState(false)
+  const [endReached, setEndReached] = useState(false)
   const {height: windowHeight} = useWindowDimensions();
   const { onCopy, value:copyValue, setValue:setCopyValue, hasCopied } = useClipboard("");
-  
+
   useEffect(() => {
     setDisplayLogs(logs);
     const logsWithoutAnsi = logs.map((log)=> {
       return stripAnsi(log)
     })
     setCopyValue(logsWithoutAnsi.join(os.EOL))
+    setEndReached(false)
   }, [logs]);
 
   const handleDownload = () => {
@@ -59,13 +64,25 @@ export const Log = ({logs, fileName}) => {
     });
   }
 
+  const showToolTip = mouseOnDownload || (!endReached && !isScrolling)
+  const toolTipValue = (!endReached) ? "scroll to see new logs" : "scroll to bottom"
+
   return (
     <div className="flex flex-col bg-black">
       <Virtuoso
         style={{ height: (windowHeight-100)*0.8 , backgroundColor: "black"}}
         ref={virtuosoRef}
         data={displayLogs}
         totalCount={displayLogs.length - 1}
+        endReached={() => {
+          setEndReached(true)
+        }}
+        atBottomStateChange={(bottom) => {
+          setAtBottom(bottom)
+        }}
+        isScrolling={(value)=>{
+          setIsScrolling(value)
+        }}
         itemContent={(index, log) => {
           return (
             <Row index={index} log={log} />
@@ -88,9 +105,13 @@ export const Log = ({logs, fileName}) => {
             <DownloadIcon textColor={"white"}/>
           </Box>
         </Tooltip>
-        <Tooltip label={'scroll to bottom'} placement='top' closeOnClick={false}>
-          <Box p='2' m="4" onClick={handleToBottom} height={"40px"}> 
-            <TriangleDownIcon textColor={"white"}/>
+        <Tooltip label={toolTipValue} placement='top' closeOnClick={true} isOpen={showToolTip}>
+          <Box p='2' m="4" 
+            onClick={handleToBottom} height={"40px"} 
+            onMouseEnter={()=> setMouseOnDownload(true)} 
+            onMouseLeave={()=> setMouseOnDownload(false)}
+          > 
+              <TriangleDownIcon textColor={"white"}/>
           </Box>
         </Tooltip>
       </Flex>

diff --git a/engine/server/webapp/asset-manifest.json b/engine/server/webapp/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "./static/css/main.d26dfda9.css",
-    "main.js": "./static/js/main.51331a9d.js",
+    "main.js": "./static/js/main.f622a552.js",
     "index.html": "./index.html",
     "main.d26dfda9.css.map": "./static/css/main.d26dfda9.css.map",
-    "main.51331a9d.js.map": "./static/js/main.51331a9d.js.map"
+    "main.f622a552.js.map": "./static/js/main.f622a552.js.map"
   },
   "entrypoints": [
     "static/css/main.d26dfda9.css",
-    "static/js/main.51331a9d.js"
+    "static/js/main.f622a552.js"
   ]
 }
diff --git a/engine/server/webapp/index.html b/engine/server/webapp/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.51331a9d.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.f622a552.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/.../server/webapp/static/js/main.51331a9d.js → .../server/webapp/static/js/main.f622a552.js b/.../server/webapp/static/js/main.51331a9d.js → .../server/webapp/static/js/main.f622a552.js
diff --git a/...pp/static/js/main.51331a9d.js.LICENSE.txt → ...pp/static/js/main.f622a552.js.LICENSE.txt b/...pp/static/js/main.51331a9d.js.LICENSE.txt → ...pp/static/js/main.f622a552.js.LICENSE.txt
diff --git a/...ver/webapp/static/js/main.51331a9d.js.map → ...ver/webapp/static/js/main.f622a552.js.map b/...ver/webapp/static/js/main.51331a9d.js.map → ...ver/webapp/static/js/main.f622a552.js.map
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.51331a9d.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.f622a552.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>