feat: improve logs, links and fonts (#1713)

## Description:
feat: improve logs, links and fonts

## Is this change user facing?
YES

## References (if applicable):

enclave-manager/api/typescript/src/kurtosis_enclave_manager_api_connect.ts

@@ -1,4 +1,4 @@
-// @generated by protoc-gen-connect-es v0.12.0 with parameter "target=ts"
+// @generated by protoc-gen-connect-es v0.13.2 with parameter "target=ts"
 // @generated from file kurtosis_enclave_manager_api.proto (package kurtosis_enclave_manager, syntax proto3)
 /* eslint-disable */
 // @ts-nocheck

enclave-manager/api/typescript/src/kurtosis_enclave_manager_api_pb.ts

@@ -1,4 +1,4 @@
-// @generated by protoc-gen-es v1.3.1 with parameter "target=ts"
+// @generated by protoc-gen-es v1.3.3 with parameter "target=ts"
 // @generated from file kurtosis_enclave_manager_api.proto (package kurtosis_enclave_manager, syntax proto3)
 /* eslint-disable */
 // @ts-nocheck

enclave-manager/web/public/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="The Kurtosis Enclave Manager Web UI." />
+    <meta name="description" content="Kurtosis Enclave Manager" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

enclave-manager/web/src/client/enclaveManager/KurtosisClient.ts

@@ -29,34 +29,32 @@ export abstract class KurtosisClient {
    *
    * This URL is primarily used to generate links to the EM UI (where the hostname is included).
    * */
-  protected readonly parentUrl: URL;
+  protected readonly cloudUrl: URL;
 
   /* Full URL of the EM UI, covering two use cases:
    * In local-mode this is the same as the `parentUrl`
    * In authenticated mode : https://cloud.kurtosis.com/enclave-manager/gateway/ips/1-2-3-4/ports/1234/?searchparams... (this data/url is provided as a search param when the code loads)
    *
    * This URL is primarily used to set the React router basename so that the router is able to ignore any leading subdirectories.
    * */
-  protected readonly childUrl: URL;
+  protected readonly baseApplicationUrl: URL;
 
   constructor(client: PromiseClient<typeof KurtosisEnclaveManagerServer>, parentUrl: URL, childUrl: URL) {
     this.client = client;
-    this.parentUrl = parentUrl;
-    this.childUrl = childUrl;
+    this.cloudUrl = parentUrl;
+    this.baseApplicationUrl = childUrl;
+    console.log("cloudUrl", this.cloudUrl)
+    console.log("baseApplicationUrl", this.baseApplicationUrl)
   }
 
   abstract getHeaderOptions(): { headers?: Headers };
 
-  getParentBasePathUrl() {
-    return `${this.parentUrl.origin}${this.parentUrl.pathname}`;
+  getCloudBasePathUrl() {
+    return `${this.cloudUrl.origin}${this.cloudUrl.pathname}`;
   }
 
-  getChildPath() {
-    return this.childUrl.pathname;
-  }
-
-  getChildUrl() {
-    return this.childUrl;
+  getBaseApplicationUrl() {
+    return this.baseApplicationUrl;
   }
 
   async checkHealth() {

enclave-manager/web/src/client/enclaveManager/KurtosisClientContext.tsx

@@ -73,8 +73,8 @@ export const KurtosisClientProvider = ({ children }: PropsWithChildren) => {
         let newClient: KurtosisClient | null = null;
 
         if (requireAuth) {
-          const requestedApiHost = searchParams.get("api-host");
-          assertDefined(requestedApiHost, `The parameter 'requestedApiHost' is not defined`);
+          const requestedGatewayHost = searchParams.get("api-host");
+          assertDefined(requestedGatewayHost, `The parameter 'api-host' is not defined`);
 
           // Get the parent location and path:
           let parentLocationPath = paramToUrl(searchParams, "parent-location-path") || new URL(window.location.href);
@@ -83,7 +83,7 @@ export const KurtosisClientProvider = ({ children }: PropsWithChildren) => {
 
           if (isDefined(jwtToken)) {
             newClient = new AuthenticatedKurtosisClient(
-              requestedApiHost,
+              requestedGatewayHost,
               jwtToken,
               parentLocationPath,
               childLocationPath,

enclave-manager/web/src/components/Navigation.tsx

@@ -1,7 +1,8 @@
 import { Flex, IconButton, IconButtonProps, Image, Tooltip } from "@chakra-ui/react";
 import { PropsWithChildren } from "react";
+import { NavbarProps } from "../emui/Navbar";
 
-export const Navigation = ({ children }: PropsWithChildren) => {
+export const Navigation = ({ baseApplicationUrl, children }: PropsWithChildren & NavbarProps) => {
   return (
     <Flex
       as={"nav"}
@@ -15,7 +16,7 @@ export const Navigation = ({ children }: PropsWithChildren) => {
       p={"20px 16px"}
     >
       <Flex width={"40px"} height={"40px"} alignItems={"center"}>
-        <Image src={"/logo.png"} />
+        <Image src={baseApplicationUrl+"/logo.png"} />
       </Flex>
       <Flex flexDirection={"column"} gap={"16px"}>
         {children}

enclave-manager/web/src/components/ValueCard.tsx

@@ -20,7 +20,7 @@ export const ValueCard = ({ title, value, copyEnabled, copyValue }: ValueCardPro
         {copyEnabled && (
           <CopyButton
             valueToCopy={isDefined(copyValue) ? copyValue : typeof value === "string" ? value : null}
-            contentName={"url"}
+            contentName={title}
           />
         )}
       </Flex>

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

@@ -10,6 +10,8 @@ export type LogLineProps = {
   status?: LogStatus;
 };
 
+const logFontFamily = "Menlo, Monaco, Inconsolata, Consolas, Courier, monospace"
+
 export const LogLine = ({ timestamp, message, status }: LogLineProps) => {
   const statusToColor = (status?: LogStatus) => {
     switch (status) {
@@ -30,11 +32,11 @@ export const LogLine = ({ timestamp, message, status }: LogLineProps) => {
           whiteSpace={"pre-wrap"}
           fontSize={"xs"}
           lineHeight="2"
-          fontWeight={700}
-          fontFamily="Ubuntu Mono"
-          color={"white"}
+          fontWeight={600}
+          fontFamily={logFontFamily}
+          color={"grey"}
         >
-          {timestamp.toLocal().toFormat("yyyy-MM-dd hh:mm:ss.SSS ZZZZ")}
+          {timestamp.toLocal().toFormat("yyyy-MM-dd HH:MM:ss.SSS ZZZZ")} |
         </Box>
       )}
       <Box
@@ -43,7 +45,7 @@ export const LogLine = ({ timestamp, message, status }: LogLineProps) => {
         fontSize={"xs"}
         lineHeight="2"
         fontWeight={400}
-        fontFamily="Ubuntu Mono"
+        fontFamily={logFontFamily}
         color={statusToColor(status)}
       >
         {message || <i>No message</i>}

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

@@ -128,7 +128,7 @@ export const ConfigureEnclaveModal = ({
       [KURTOSIS_PACKAGE_PARAMS_URL_ARG]: btoa(JSON.stringify(formRef.current?.getValues())),
     });
 
-    return `${kurtosisClient.getParentBasePathUrl()}?${params}`;
+    return `${kurtosisClient.getCloudBasePathUrl()}?${params}`;
   };
 
   const handleClose = () => {

enclave-manager/web/src/components/theme/Fonts.tsx

@@ -1,17 +1,24 @@
 import { Global } from "@emotion/react";
 
+/*
+* Source: https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap
+* */
 const Fonts = () => (
   <Global
     styles={`
-      @font-face {
-        font-family: "Inter";
-        src: url("/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations");
-        font-weight: 125 950;
-        font-stretch: 75% 125%;
-        font-style: normal;
-      }
+        @font-face {
+          font-family: 'Inter';
+          font-stretch: 75% 125%;
+          font-style: normal;
+          font-weight: 500;
+          font-display: swap;
+          src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZJhiJ-Ek-_EeAmM.woff2) format('woff2');
+          unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+        }
       `}
   />
 );
 
 export default Fonts;
+
+

enclave-manager/web/src/emui/App.tsx

@@ -34,7 +34,7 @@ const KurtosisRouter = () => {
         [
           {
             element: (
-              <AppLayout Nav={<Navbar />}>
+              <AppLayout Nav={<Navbar baseApplicationUrl={kurtosisClient.getBaseApplicationUrl()}/>}>
                 <Outlet />
                 <CreateEnclave />
               </AppLayout>
@@ -46,7 +46,7 @@ const KurtosisRouter = () => {
           },
         ],
         {
-          basename: kurtosisClient.getChildPath(),
+          basename: kurtosisClient.getBaseApplicationUrl().pathname,
         },
       ),
     [kurtosisClient],

enclave-manager/web/src/emui/Navbar.tsx

@@ -2,21 +2,25 @@ import { FiHome, FiPackage } from "react-icons/fi";
 import { Link, useLocation } from "react-router-dom";
 import { NavButton, Navigation } from "../components/Navigation";
 
-export const Navbar = () => {
+export type NavbarProps ={
+  baseApplicationUrl: URL
+}
+
+export const Navbar = ({ baseApplicationUrl}: NavbarProps) => {
   const location = useLocation();
 
   return (
-    <Navigation>
+    <Navigation baseApplicationUrl={baseApplicationUrl}>
       <Link to={"/"}>
         <NavButton
           label={"View enclaves"}
           Icon={<FiHome />}
           isActive={location.pathname === "/" || location.pathname.startsWith("/enclave")}
         />
       </Link>
-      <Link to={"/catalog"}>
-        <NavButton label={"View catalog"} Icon={<FiPackage />} isActive={location.pathname.startsWith("/catalog")} />
-      </Link>
+      {/*<Link to={"/catalog"}>*/}
+      {/*  <NavButton label={"View catalog"} Icon={<FiPackage />} isActive={location.pathname.startsWith("/catalog")} />*/}
+      {/*</Link>*/}
     </Navigation>
   );
 };

engine/server/webapp/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "./static/js/main.90108866.js",
+    "main.js": "./static/js/main.18bfd64f.js",
     "index.html": "./index.html",
-    "main.90108866.js.map": "./static/js/main.90108866.js.map"
+    "main.18bfd64f.js.map": "./static/js/main.18bfd64f.js.map"
   },
   "entrypoints": [
-    "static/js/main.90108866.js"
+    "static/js/main.18bfd64f.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="The Kurtosis Enclave Manager Web UI."/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.90108866.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.18bfd64f.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>