feat: new em ui enclave logs (#1696)

## Description:
This PR implements the views for showing the logs in the new enclave
manager ui.

This change adds react-virtuoso for buffering the logs in a new
`LogViewer.tsx` component. `lodash` is used to `throttle` the changes -
I believe this solves the issue reported previously with log tailing
failing. Once the service log ui is implemented I'll validate this with
the log spamming package.

A utility `FeatureNotImplemented` modal is added to display more tidy
incomplete ends of exploration (per the mocks).

### Demo


https://github.com/kurtosis-tech/kurtosis/assets/4419574/18782856-5f0a-4e31-835d-6d840bbfda5c

## Is this change user facing?
NO - this is not currently deployed

Author: Dartoxian

enclave-manager/web/package.json

@@ -12,6 +12,7 @@
     "@tanstack/react-table": "^8.10.7",
     "enclave-manager-sdk": "file:../api/typescript",
     "framer-motion": "^10.16.4",
+    "lodash": "^4.17.21",
     "luxon": "^3.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -20,6 +21,7 @@
     "react-markdown": "^9.0.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-virtuoso": "^4.6.2",
     "true-myth": "^7.1.0"
   },
   "devDependencies": {

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

@@ -0,0 +1,35 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+import { FiDownload } from "react-icons/fi";
+import { isDefined } from "../utils";
+import { saveTextAsFile } from "../utils/download";
+
+type DownloadButtonProps = ButtonProps & {
+  valueToDownload?: (() => string) | string | null;
+  fileName: string;
+  text?: string;
+};
+
+export const DownloadButton = ({ valueToDownload, text, fileName, ...buttonProps }: DownloadButtonProps) => {
+  const handleDownloadClick = () => {
+    if (isDefined(valueToDownload)) {
+      const v = typeof valueToDownload === "string" ? valueToDownload : valueToDownload();
+      saveTextAsFile(v, fileName);
+    }
+  };
+
+  if (!isDefined(valueToDownload)) {
+    return null;
+  }
+
+  return (
+    <Button
+      leftIcon={<FiDownload />}
+      size={"xs"}
+      colorScheme={"darkBlue"}
+      onClick={handleDownloadClick}
+      {...buttonProps}
+    >
+      {text || "Download"}
+    </Button>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { KurtosisAlertModal } from "./KurtosisAlertModal";
+
+type FeatureNotImplementedModalProps = {
+  featureName: string;
+  message?: string;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const FeatureNotImplementedModal = ({
+  featureName,
+  message,
+  isOpen,
+  onClose,
+}: FeatureNotImplementedModalProps) => {
+  return (
+    <KurtosisAlertModal
+      title={`${featureName} unavailable`}
+      isOpen={isOpen}
+      onClose={onClose}
+      confirmText={"Submit Request"}
+      onConfirm={() => {
+        onClose();
+        window.open("https://github.com/kurtosis-tech/kurtosis/issues", "_blank");
+      }}
+      confirmButtonProps={{ colorScheme: "kurtosisGreen" }}
+      content={
+        message || `${featureName} is not currently available. Please open a feature request if you'd like to use this.`
+      }
+    />
+  );
+};

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

@@ -16,7 +16,7 @@ type KurtosisAlertModalProps = {
   title: string;
   content: string;
   isOpen: boolean;
-  isLoading: boolean;
+  isLoading?: boolean;
   onClose: () => void;
   onConfirm: () => void;
   confirmText: string;
@@ -45,7 +45,7 @@ export const KurtosisAlertModal = ({
         <ModalFooter>
           <Flex justifyContent={"flex-end"} gap={"12px"}>
             <Button color={"gray.100"} onClick={onClose} disabled={isLoading}>
-              Cancel
+              Dismiss
             </Button>
             <Button onClick={onConfirm} {...confirmButtonProps} isLoading={isLoading}>
               {confirmText}

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

@@ -204,6 +204,9 @@ const theme = extendTheme({
       },
     },
     Switch: {
+      defaultProps: {
+        colorScheme: "green",
+      },
       baseStyle: defineStyle((props) => ({
         track: {
           _checked: {

enclave-manager/web/src/components/enclaves/configuration/inputs/BooleanArgumentInput.tsx

@@ -12,7 +12,6 @@ export const BooleanArgumentInput = ({ inputType, ...props }: BooleanArgumentInp
   if (inputType === "switch") {
     return (
       <Switch
-        colorScheme={"green"}
         {...register(props.name, {
           disabled: props.disabled,
           required: props.isRequired,

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

@@ -0,0 +1,38 @@
+import { Box } from "@chakra-ui/react";
+
+export type LogStatus = "info" | "error";
+
+export type LogLineProps = {
+  message?: string;
+  status?: LogStatus;
+};
+
+export const LogLine = ({ message, status }: LogLineProps) => {
+  const statusToColor = (status?: LogStatus) => {
+    switch (status) {
+      case "error":
+        return "red.400";
+      case "info":
+        return "gray.100";
+      default:
+        return "white";
+    }
+  };
+
+  return (
+    <Box
+      as={"pre"}
+      whiteSpace={"pre-wrap"}
+      borderBottom={"1px solid #444444"}
+      p={"14px 0"}
+      m={"0 16px"}
+      fontSize={"xs"}
+      lineHeight="2"
+      fontWeight={400}
+      fontFamily="Ubuntu Mono"
+      color={statusToColor(status)}
+    >
+      {message || <i>No message</i>}
+    </Box>
+  );
+};

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

@@ -0,0 +1,107 @@
+import { Box, ButtonGroup, Flex, FormControl, FormLabel, Progress, Switch } from "@chakra-ui/react";
+import { throttle } from "lodash";
+import { ChangeEvent, ReactElement, useEffect, useMemo, useRef, useState } from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+import { isDefined, stripAnsi } from "../../../utils";
+import { CopyButton } from "../../CopyButton";
+import { DownloadButton } from "../../DownloadButton";
+import { LogLine, LogLineProps } from "./LogLine";
+
+type LogViewerProps = {
+  logLines: LogLineProps[];
+  progressPercent?: number | "indeterminate" | "failed";
+  ProgressWidget?: ReactElement;
+  logsFileName?: string;
+};
+
+export const LogViewer = ({
+  progressPercent,
+  logLines: propsLogLines,
+  ProgressWidget,
+  logsFileName,
+}: LogViewerProps) => {
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const [logLines, setLogLines] = useState(propsLogLines);
+  const [automaticScroll, setAutomaticScroll] = useState(true);
+
+  const throttledSetLogLines = useMemo(() => throttle(setLogLines, 500), []);
+
+  useEffect(() => {
+    throttledSetLogLines(propsLogLines);
+  }, [propsLogLines, throttledSetLogLines]);
+
+  const handleAutomaticScrollChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setAutomaticScroll(e.target.checked);
+    if (virtuosoRef.current && e.target.checked) {
+      virtuosoRef.current.scrollToIndex({ index: "LAST" });
+    }
+  };
+
+  const getLogsValue = () => {
+    return logLines
+      .map(({ message }) => message)
+      .filter(isDefined)
+      .map(stripAnsi)
+      .join("\n");
+  };
+
+  return (
+    <Flex flexDirection={"column"} gap={"32px"}>
+      <Flex flexDirection={"column"} position={"relative"} bg={"gray.800"} borderRadius={"8px"}>
+        {isDefined(ProgressWidget) && (
+          <Box
+            display={"inline-flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={"8px"}
+            position={"absolute"}
+            top={"16px"}
+            right={"16px"}
+            padding={"24px"}
+            h={"48px"}
+            bg={"gray.650"}
+            borderRadius={"8px"}
+            fontSize={"xl"}
+            fontWeight={"semibold"}
+            zIndex={1}
+          >
+            {ProgressWidget}
+          </Box>
+        )}
+        <Virtuoso
+          ref={virtuosoRef}
+          followOutput={automaticScroll}
+          atBottomStateChange={(atBottom) => setAutomaticScroll(atBottom)}
+          style={{ height: "660px" }}
+          data={logLines.filter(({ message }) => isDefined(message))}
+          itemContent={(index, line) => <LogLine {...line} />}
+        />
+        {isDefined(progressPercent) && (
+          <Progress
+            value={typeof progressPercent === "number" ? progressPercent : progressPercent === "failed" ? 100 : 0}
+            isIndeterminate={progressPercent === "indeterminate"}
+            height={"4px"}
+            colorScheme={progressPercent === "failed" ? "red.500" : "kurtosisGreen"}
+          />
+        )}
+      </Flex>
+      <Flex alignItems={"space-between"} width={"100%"}>
+        <FormControl display={"flex"} alignItems={"center"}>
+          <Switch isChecked={automaticScroll} onChange={handleAutomaticScrollChange} />
+          <FormLabel mb={"0"} marginInlineStart={3}>
+            Automatic Scroll
+          </FormLabel>
+        </FormControl>
+        <ButtonGroup isAttached>
+          <CopyButton valueToCopy={getLogsValue} size={"md"} isDisabled={logLines.length === 0} />
+          <DownloadButton
+            valueToDownload={getLogsValue}
+            size={"md"}
+            fileName={logsFileName || `logs.txt`}
+            isDisabled={logLines.length === 0}
+          />
+        </ButtonGroup>
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -86,7 +86,7 @@ export const ConfigureEnclaveModal = ({
               assertDefined(innerType2, `Cannot parse a dict argument type without knowing innterType2`);
               return isDefined(value)
                 ? Object.entries(value).map(([k, v]) => ({ key: k, value: convertArgValue(innerType2, v) }), {})
-                : {};
+                : [];
             default:
               return value;
           }
@@ -165,7 +165,7 @@ export const ConfigureEnclaveModal = ({
       { config: formData, packageId: kurtosisPackage.name, apicInfo: apicInfo.toJson() },
       {
         method: "post",
-        action: `/enclave/${enclaveUUID}`,
+        action: `/enclave/${enclaveUUID}/logs`,
         encType: "application/json",
       },
     );

enclave-manager/web/src/components/theme/tabsTheme.ts

@@ -22,6 +22,7 @@ export const tabsTheme = defineMultiStyleConfig({
           color: `${props.colorScheme}.400`,
           bg: `gray.800`,
         },
+        textTransform: "capitalize",
       },
       tabpanel: {
         padding: "32px 0px",