feat: improve logging part 1 (#1728)

## Description:
* service logs file name is now
`<enclave-name>--<service-name>-logs.txt`
* Focus input box on Create an Enclave so you can type without clicking
* Change the logging layout so it's more compact, no borders
* Removed error messages from the logs themselves, will need to revisit
how we should be displaying that.
* removed dropdown on the New Enclave button so it goes straight to the
Create new Enclave modal

## Is this change user facing?
YES

## References (if applicable):
<!-- Add relevant Github Issues, Discord threads, or other helpful
information. -->

---------

Co-authored-by: Ben Gazzard <ben@dartoxia.com>

enclave-manager/web/src/components/enclaves/CreateEnclaveButton.tsx

@@ -8,17 +8,22 @@ export const CreateEnclaveButton = () => {
   return (
     <>
       <Menu matchWidth>
-        <MenuButton as={Button} colorScheme={"kurtosisGreen"} leftIcon={<FiPlus />} size={"md"}>
+        <MenuButton
+          as={Button}
+          colorScheme={"kurtosisGreen"}
+          leftIcon={<FiPlus />} size={"md"}
+          onClick={() => navigate(`#${KURTOSIS_CREATE_ENCLAVE_URL_ARG}`)}
+        >
           New Enclave
         </MenuButton>
-        <MenuList>
-          <MenuItem onClick={() => navigate(`#${KURTOSIS_CREATE_ENCLAVE_URL_ARG}`)} icon={<FiSettings />}>
-            Manual
-          </MenuItem>
-          <MenuItem onClick={() => navigate("/catalog")} icon={<FiPackage />}>
-            Catalog
-          </MenuItem>
-        </MenuList>
+        {/*<MenuList>*/}
+        {/*  <MenuItem onClick={() => navigate(`#${KURTOSIS_CREATE_ENCLAVE_URL_ARG}`)} icon={<FiSettings />}>*/}
+        {/*    Manual*/}
+        {/*  </MenuItem>*/}
+        {/*  <MenuItem onClick={() => navigate("/catalog")} icon={<FiPackage />}>*/}
+        {/*    Catalog*/}
+        {/*  </MenuItem>*/}
+        {/*</MenuList>*/}
       </Menu>
     </>
   );

enclave-manager/web/src/components/enclaves/logs/LogLine.tsx

@@ -25,7 +25,7 @@ export const LogLine = ({ timestamp, message, status }: LogLineProps) => {
   };
 
   return (
-    <Flex borderBottom={"1px solid #444444"} p={"14px 0"} m={"0 16px"} gap={"8px"} alignItems={"center"}>
+    <Flex p={"2px 0"} m={"0 16px"} gap={"8px"} alignItems={"top"}>
       {isDefined(timestamp) && (
         <Box
           as={"pre"}
@@ -35,8 +35,11 @@ export const LogLine = ({ timestamp, message, status }: LogLineProps) => {
           fontWeight={600}
           fontFamily={logFontFamily}
           color={"grey"}
+          minW={"200px"}
         >
-          {timestamp.toLocal().toFormat("yyyy-MM-dd HH:MM:ss.SSS ZZZZ")} |
+          <>
+          {timestamp.toLocal().toFormat("yyyy-MM-dd HH:mm:ss.SSS ZZZZ")}
+          </>
         </Box>
       )}
       <Box
@@ -48,7 +51,7 @@ export const LogLine = ({ timestamp, message, status }: LogLineProps) => {
         fontFamily={logFontFamily}
         color={statusToColor(status)}
       >
-        {message || <i>No message</i>}
+        {message}
       </Box>
     </Flex>
   );

enclave-manager/web/src/components/enclaves/logs/LogViewer.tsx

@@ -56,7 +56,7 @@ export const LogViewer = ({
 
   return (
     <Flex flexDirection={"column"} gap={"32px"}>
-      <Flex flexDirection={"column"} position={"relative"} bg={"gray.800"} borderRadius={"8px"}>
+      <Flex flexDirection={"column"} position={"relative"} bg={"gray.800"}>
         {isDefined(ProgressWidget) && (
           <Box
             display={"inline-flex"}
@@ -84,7 +84,7 @@ export const LogViewer = ({
           isScrolling={setUserIsScrolling}
           style={{ height: "660px" }}
           data={logLines.filter(({ message }) => isDefined(message))}
-          itemContent={(index, line) => <LogLine {...line} />}
+          itemContent={(_, line) => <LogLine {...line} />}
         />
         {isDefined(progressPercent) && (
           <Progress

enclave-manager/web/src/components/enclaves/modals/ManualCreateEnclaveModal.tsx

@@ -83,6 +83,7 @@ export const ManualCreateEnclaveModal = ({ isOpen, onClose, onConfirm }: ManualC
                     disabled: isLoading,
                     required: true,
                   })}
+                  autoFocus={true}
                 />
               </InputGroup>
               <FormErrorMessage>{errors.url?.message}</FormErrorMessage>

enclave-manager/web/src/emui/enclaves/enclave/service/logs/ServiceLogs.tsx

@@ -45,7 +45,8 @@ export const ServiceLogs = ({ enclave, service }: ServiceLogsProps) => {
         if (cancelled) {
           return;
         }
-        setLogLines((logLines) => [...logLines, { message: `Error: ${stringifyError(error)}`, status: "error" }]);
+        // TODO: We need a way to show this error
+        alert (`Error: ${stringifyError(error)}`)
       }
     })();
     return () => {
@@ -54,5 +55,6 @@ export const ServiceLogs = ({ enclave, service }: ServiceLogsProps) => {
     };
   }, [enclave, service, kurtosisClient]);
 
-  return <LogViewer logLines={logLines} />;
+  const logsFileName = `${enclave.name}--${service.name}-logs.txt`
+  return <LogViewer logLines={logLines} logsFileName={logsFileName}/>;
 };

engine/server/webapp/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "./static/js/main.9849104e.js",
+    "main.js": "./static/js/main.f42abf2e.js",
     "index.html": "./index.html",
-    "main.9849104e.js.map": "./static/js/main.9849104e.js.map"
+    "main.f42abf2e.js.map": "./static/js/main.f42abf2e.js.map"
   },
   "entrypoints": [
-    "static/js/main.9849104e.js"
+    "static/js/main.f42abf2e.js"
   ]
 }

engine/server/webapp/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.9849104e.js"></script></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"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.f42abf2e.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>