feat: service logs full download

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

@@ -1,10 +1,11 @@
 import { Button, ButtonProps, IconButton, IconButtonProps } from "@chakra-ui/react";
 import { FiDownload } from "react-icons/fi";
-import { isDefined } from "../utils";
+import streamsaver from "streamsaver";
+import { isAsyncIterable, isDefined, stripAnsi } from "../utils";
 import { saveTextAsFile } from "../utils/download";
 
 type DownloadButtonProps<IsIconButton extends boolean> = (IsIconButton extends true ? IconButtonProps : ButtonProps) & {
-  valueToDownload?: (() => string) | string | null;
+  valueToDownload?: (() => string) | (() => AsyncIterable<string>) | string | null;
   fileName: string;
   text?: IsIconButton extends true ? string : never;
   isIconButton?: IsIconButton;
@@ -17,9 +18,20 @@ export const DownloadButton = <IsIconButton extends boolean>({
   isIconButton,
   ...buttonProps
 }: DownloadButtonProps<IsIconButton>) => {
-  const handleDownloadClick = () => {
+  const handleDownloadClick = async () => {
     if (isDefined(valueToDownload)) {
       const v = typeof valueToDownload === "string" ? valueToDownload : valueToDownload();
+
+      if (isAsyncIterable(v)) {
+        const writableStream = streamsaver.createWriteStream(fileName);
+        const writer = writableStream.getWriter();
+
+        for await (const part of v) {
+          await writer.write(new TextEncoder().encode(`${stripAnsi(part)}\n`));
+        }
+        await writer.close();
+        return;
+      }
       saveTextAsFile(v, fileName);
     }
   };

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

@@ -120,7 +120,7 @@ const theme = extendTheme({
           const outline = theme.components.Button.variants!.outline(props);
           return {
             ...outline,
-            _hover: { ...outline._hover, bg: "gray.700" },
+            _hover: { ...outline._hover, bg: "gray.600" },
             color: `${props.colorScheme}.400`,
             borderColor: "gray.300",
           };

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

@@ -3,16 +3,14 @@ import { PropsWithChildren } from "react";
 import { IoLogoGithub } from "react-icons/io";
 import { useKurtosisPackageIndexerClient } from "../client/packageIndexer/KurtosisPackageIndexerClientContext";
 import { isDefined, wrapResult } from "../utils";
-import { CopyButton } from "./CopyButton";
 
 type EnclaveSourceProps = PropsWithChildren<
   ButtonProps & {
     source: "loading" | string | null;
-    hideCopy?: boolean;
   }
 >;
 
-export const PackageSourceButton = ({ source, hideCopy, children, ...buttonProps }: EnclaveSourceProps) => {
+export const PackageSourceButton = ({ source, children, ...buttonProps }: EnclaveSourceProps) => {
   const kurtosisIndexer = useKurtosisPackageIndexerClient();
 
   if (!isDefined(source)) {
@@ -63,18 +61,5 @@ export const PackageSourceButton = ({ source, hideCopy, children, ...buttonProps
     }
   }
 
-  return (
-    <ButtonGroup>
-      {button}
-      {!hideCopy && (
-        <CopyButton
-          contentName={"package id"}
-          valueToCopy={source}
-          isIconButton
-          aria-label={"Copy package id"}
-          size={buttonProps.size || "xs"}
-        />
-      )}
-    </ButtonGroup>
-  );
+  return <ButtonGroup>{button}</ButtonGroup>;
 };

enclave-manager/web/src/components/catalog/KurtosisPackageCard.tsx

@@ -1,4 +1,4 @@
-import { Flex, Icon, Image, Text } from "@chakra-ui/react";
+import { Box, Flex, Icon, Image, Text } from "@chakra-ui/react";
 import { IoStar } from "react-icons/io5";
 import { Link } from "react-router-dom";
 import { useKurtosisClient } from "../../client/enclaveManager/KurtosisClientContext";
@@ -41,19 +41,30 @@ export const KurtosisPackageCard = ({ kurtosisPackage }: KurtosisPackageCardProp
             <Text noOfLines={2} fontSize={"lg"}>
               {readablePackageName(kurtosisPackage.name)}
             </Text>
-            <Flex justifyContent={"space-between"} fontSize={"xs"}>
-              <Text as={"span"} textTransform={"capitalize"}>
-                {kurtosisPackage.repositoryMetadata?.owner.replaceAll("-", " ") || "Unknown owner"}
-              </Text>
-              <Flex gap={"4px"} alignItems={"center"}>
-                {kurtosisPackage.stars > 0 && (
-                  <>
-                    <Icon color="gray.500" as={IoStar} />
-                    <Text as={"span"}>{kurtosisPackage.stars.toString()}</Text>
-                  </>
-                )}
+            <Box
+              flex={"1"}
+              sx={{
+                containerType: "size",
+                containerName: "details-container",
+                "@container details-container (min-height: 30px)": {
+                  "> div": { flexDirection: "column", justifyContent: "flex-end", height: "100%" },
+                },
+              }}
+            >
+              <Flex justifyContent={"space-between"} fontSize={"xs"} gap={"8px"}>
+                <Text as={"span"} textTransform={"capitalize"}>
+                  {kurtosisPackage.repositoryMetadata?.owner.replaceAll("-", " ") || "Unknown owner"}
+                </Text>
+                <Flex gap={"4px"} alignItems={"center"}>
+                  {kurtosisPackage.stars > 0 && (
+                    <>
+                      <Icon color="gray.500" as={IoStar} />
+                      <Text as={"span"}>{kurtosisPackage.stars.toString()}</Text>
+                    </>
+                  )}
+                </Flex>
               </Flex>
-            </Flex>
+            </Box>
           </Flex>
         </Flex>
         <Flex gap={"16px"} width={"100%"}>

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

@@ -19,7 +19,7 @@ import {
   Text,
   Tooltip,
 } from "@chakra-ui/react";
-import { debounce, throttle } from "lodash";
+import { throttle } from "lodash";
 import { ChangeEvent, MutableRefObject, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FiSearch } from "react-icons/fi";
 import { MdArrowBackIosNew, MdArrowForwardIos } from "react-icons/md";
@@ -39,6 +39,8 @@ type LogViewerProps = {
   ProgressWidget?: ReactElement;
   logsFileName?: string;
   searchEnabled?: boolean;
+  copyLogsEnabled?: boolean;
+  onGetAllLogs?: () => AsyncIterable<string>;
 };
 
 type SearchBaseState = {
@@ -69,6 +71,8 @@ export const LogViewer = ({
   ProgressWidget,
   logsFileName,
   searchEnabled,
+  copyLogsEnabled,
+  onGetAllLogs,
 }: LogViewerProps) => {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [logLines, setLogLines] = useState(propsLogLines);
@@ -94,7 +98,7 @@ export const LogViewer = ({
     }
   };
 
-  const handleSearchStateChange = (updater: ((prevState: SearchState) => SearchState) | SearchState) => {
+  const handleSearchStateChange = useCallback((updater: ((prevState: SearchState) => SearchState) | SearchState) => {
     setSearchState((prevState) => {
       const newState = typeof updater === "object" ? updater : updater(prevState);
       if (
@@ -106,7 +110,7 @@ export const LogViewer = ({
       }
       return newState;
     });
-  };
+  }, []);
 
   const getLogsValue = () => {
     return logLines
@@ -179,17 +183,19 @@ export const LogViewer = ({
           </FormLabel>
         </FormControl>
         <ButtonGroup>
-          <CopyButton
-            contentName={"logs"}
-            valueToCopy={getLogsValue}
-            size={"sm"}
-            isDisabled={logLines.length === 0}
-            isIconButton
-            aria-label={"Copy logs"}
-            color={"gray.100"}
-          />
+          {copyLogsEnabled && (
+            <CopyButton
+              contentName={"logs"}
+              valueToCopy={getLogsValue}
+              size={"sm"}
+              isDisabled={logLines.length === 0}
+              isIconButton
+              aria-label={"Copy logs"}
+              color={"gray.100"}
+            />
+          )}
           <DownloadButton
-            valueToDownload={getLogsValue}
+            valueToDownload={onGetAllLogs || getLogsValue}
             size={"sm"}
             fileName={logsFileName || `logs.txt`}
             isDisabled={logLines.length === 0}
@@ -213,6 +219,8 @@ const SearchControls = ({ searchState, onChangeSearchState, logLines }: SearchCo
   const searchRef: MutableRefObject<HTMLInputElement | null> = useRef(null);
   const [showSearchForm, setShowSearchForm] = useState(false);
 
+  const maybeCurrentSearchIndex = searchState.type === "success" ? searchState.currentSearchIndex : null;
+
   const updateMatches = useCallback(
     (searchTerm: string) => {
       if (isNotEmpty(searchTerm)) {
@@ -247,44 +255,38 @@ const SearchControls = ({ searchState, onChangeSearchState, logLines }: SearchCo
     [logLines, onChangeSearchState],
   );
 
-  const debouncedUpdateMatches = useMemo(() => debounce(updateMatches, 100), [updateMatches]);
+  const throttledUpdateMatches = useMemo(() => throttle(updateMatches, 300), [updateMatches]);
 
   const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
     onChangeSearchState((state) => ({ ...state, rawSearchTerm: e.target.value }));
-    debouncedUpdateMatches(e.target.value);
+    throttledUpdateMatches(e.target.value);
   };
 
   const updateSearchIndexBounded = useCallback(
     (newIndex: number) => {
-      if (searchState.type !== "success") {
-        return;
-      }
-      if (newIndex > searchState.searchMatchesIndices.length - 1) {
-        newIndex = 0;
-      }
-      if (newIndex < 0) {
-        newIndex = searchState.searchMatchesIndices.length - 1;
-      }
-      onChangeSearchState((state) => ({ ...state, currentSearchIndex: newIndex }));
+      onChangeSearchState((searchState) => {
+        if (searchState.type !== "success" || searchState.searchMatchesIndices.length === 0) {
+          return searchState;
+        }
+        if (newIndex > searchState.searchMatchesIndices.length - 1) {
+          newIndex = 0;
+        }
+        if (newIndex < 0) {
+          newIndex = searchState.searchMatchesIndices.length - 1;
+        }
+        return { ...searchState, currentSearchIndex: newIndex };
+      });
     },
-    [onChangeSearchState, searchState],
+    [onChangeSearchState],
   );
 
   const handlePriorMatchClick = useCallback(() => {
-    updateSearchIndexBounded(
-      searchState.type === "success" && isDefined(searchState.currentSearchIndex)
-        ? searchState.currentSearchIndex - 1
-        : 0,
-    );
-  }, [updateSearchIndexBounded, searchState]);
+    updateSearchIndexBounded(isDefined(maybeCurrentSearchIndex) ? maybeCurrentSearchIndex - 1 : 0);
+  }, [updateSearchIndexBounded, maybeCurrentSearchIndex]);
 
   const handleNextMatchClick = useCallback(() => {
-    updateSearchIndexBounded(
-      searchState.type === "success" && isDefined(searchState.currentSearchIndex)
-        ? searchState.currentSearchIndex + 1
-        : 0,
-    );
-  }, [updateSearchIndexBounded, searchState]);
+    updateSearchIndexBounded(isDefined(maybeCurrentSearchIndex) ? maybeCurrentSearchIndex + 1 : 0);
+  }, [updateSearchIndexBounded, maybeCurrentSearchIndex]);
 
   const handleClearSearch = useCallback(() => {
     onChangeSearchState({ type: "init", rawSearchTerm: "" });
@@ -313,9 +315,12 @@ const SearchControls = ({ searchState, onChangeSearchState, logLines }: SearchCo
             searchRef.current.focus();
           }
         },
-        next: () => {
+        enter: () => {
           handleNextMatchClick();
         },
+        "shift-enter": () => {
+          handlePriorMatchClick();
+        },
         escape: () => {
           if (isDefined(searchRef.current) && searchRef.current === document.activeElement) {
             handleClearSearch();

enclave-manager/web/src/components/enclaves/tables/EnclavesTable.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox } from "@chakra-ui/react";
+import { Button, Checkbox, Text } from "@chakra-ui/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { FilesArtifactNameAndUuid, ServiceInfo } from "enclave-manager-sdk/build/api_container_service_pb";
 import { EnclaveContainersStatus } from "enclave-manager-sdk/build/engine_service_pb";
@@ -93,7 +93,9 @@ export const EnclavesTable = ({ enclavesData, selection, onSelectionChange }: En
         cell: (nameCell) => (
           <Link to={`/enclave/${nameCell.row.original.uuid}/overview`}>
             <Button size={"sm"} variant={"ghost"}>
-              {nameCell.row.original.name}
+              <Text as={"span"} maxW={"200px"} textOverflow={"ellipsis"} overflow={"hidden"}>
+                {nameCell.row.original.name}
+              </Text>
             </Button>
           </Link>
         ),

enclave-manager/web/src/components/enclaves/widgets/DownloadFileArtifactButton.tsx

@@ -16,7 +16,6 @@ export const DownloadFileArtifactButton = ({ file, enclave }: DownloadFileButton
 
   const handleDownloadClick = async () => {
     setIsLoading(true);
-    // todo: get tgz download instead
     const fileParts = await kurtosisClient.downloadFilesArtifact(enclave, file);
     const writableStream = streamsaver.createWriteStream(`${enclave.name}--${file.fileName}.tgz`);
     const writer = writableStream.getWriter();

enclave-manager/web/src/components/useKeyboardAction.ts

@@ -1,33 +1,44 @@
 import { useEffect } from "react";
+import { isDefined } from "../utils";
 
-export type KeyboardActions = "escape" | "find" | "omniFind" | "next";
+export type KeyboardActions = "escape" | "find" | "omniFind" | "enter" | "shift-enter";
 
 export type OnCtrlPressHandlers = Partial<Record<KeyboardActions, () => void>>;
 
-const eventIsType = (e: KeyboardEvent, type: KeyboardActions) => {
+const getEventType = (e: KeyboardEvent): KeyboardActions | null => {
   const ctrlOrMeta = e.ctrlKey || e.metaKey;
 
-  switch (type) {
-    case "find":
-      return ctrlOrMeta && e.keyCode === 70; // F
-    case "next":
-      return ctrlOrMeta && e.keyCode === 71; // G
-    case "omniFind":
-      return ctrlOrMeta && e.keyCode === 75; // K
-    case "escape":
-      return e.key === "Escape" || e.keyCode === 27;
+  if (ctrlOrMeta && e.keyCode === 70) {
+    // F
+    return "find";
   }
+  if (e.shiftKey && e.keyCode === 13) {
+    // shift + enter
+    return "shift-enter";
+  }
+  if (e.keyCode === 13) {
+    // enter
+    return "enter";
+  }
+  if (ctrlOrMeta && e.keyCode === 75) {
+    // K
+    return "omniFind";
+  }
+  if (e.key === "Escape" || e.keyCode === 27) {
+    return "escape";
+  }
+  return null;
 };
 
 export const useKeyboardAction = (handlers: OnCtrlPressHandlers) => {
   useEffect(() => {
     const listener = function (e: KeyboardEvent) {
-      for (const [handlerType, handler] of Object.entries(handlers)) {
-        if (eventIsType(e, handlerType as KeyboardActions)) {
-          e.preventDefault();
-          handler();
-          return;
-        }
+      const eventType = getEventType(e);
+      const handler = isDefined(eventType) ? handlers[eventType] : null;
+      if (isDefined(handler)) {
+        e.preventDefault();
+        handler();
+        return;
       }
     };
     window.addEventListener("keydown", listener);