Merge branch 'main' into gyani/service-name

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.85.37](https://github.com/kurtosis-tech/kurtosis/compare/0.85.36...0.85.37) (2023-11-29)
+
+
+### Features
+
+* emui catalog overview ([#1865](https://github.com/kurtosis-tech/kurtosis/issues/1865)) ([2f118d9](https://github.com/kurtosis-tech/kurtosis/commit/2f118d92da40f2f5933c5d8f58a5a08c29b96c9a))
+
 ## [0.85.36](https://github.com/kurtosis-tech/kurtosis/compare/0.85.35...0.85.36) (2023-11-27)
 
 

LICENSE.md

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             Kurtosis Technologies, Inc.
-Licensed Work:        Kurtosis 0.85.36
+Licensed Work:        Kurtosis 0.85.37
 The Licensed Work is (c) 2023 Kurtosis Technologies, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
 you may not use the Licensed Work for an Environment Orchestration Service.
@@ -12,7 +12,7 @@ you may not use the Licensed Work for an Environment Orchestration Service.
                       allows third parties (other than your employees and
                       contractors) to create distributed system environments.
 
-Change Date:          2027-11-27
+Change Date:          2027-11-29
 
 Change License:       AGPLv3 (GNU Affero General Public License Version 3)
 

api/golang/kurtosis_version/kurtosis_version.go

@@ -9,6 +9,6 @@ const (
 	// !!!!!!!!!!! DO NOT UPDATE! WILL BE MANUALLY UPDATED DURING THE RELEASE PROCESS !!!!!!!!!!!!!!!!!!!!!!
 	// This is necessary so that Kurt Core consumers will know if they're compatible with the currently-running
 	//  API container
-	KurtosisVersion = "0.85.36"
+	KurtosisVersion = "0.85.37"
 	// !!!!!!!!!!! DO NOT UPDATE! WILL BE MANUALLY UPDATED DURING THE RELEASE PROCESS !!!!!!!!!!!!!!!!!!!!!!
 )

api/rust/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "kurtosis-sdk"
-version = "0.85.36"
+version = "0.85.37"
 license = "BUSL-1.1"
 description = "Rust SDK for Kurtosis"
 edition = "2021"

api/typescript/package.json

@@ -1,7 +1,7 @@
 {
     "name": "kurtosis-sdk",
     "//": "NOTE: DO NOT UPDATE THIS VERSION MANUALLY - IT WILL BE UPDATED DURING THE RELEASE PROCESS!",
-    "version": "0.85.36",
+    "version": "0.85.37",
     "main": "./build/index",
     "description": "This repo contains a Typescript client for communicating with the Kurtosis Engine server, which is responsible for creating, managing and destroying Kurtosis Enclaves.",
     "types": "./build/index",

api/typescript/src/kurtosis_version/kurtosis_version.ts

@@ -1,5 +1,5 @@
 // !!!!!!!!!!! DO NOT UPDATE! WILL BE MANUALLY UPDATED DURING THE RELEASE PROCESS !!!!!!!!!!!!!!!!!!!!!!
 // This is necessary so that Kurt Core consumers (e.g. modules) will know if they're compatible with the currently-running
 //  API container
-export const KURTOSIS_VERSION: string = "0.85.36"
+export const KURTOSIS_VERSION: string = "0.85.37"
 // !!!!!!!!!!! DO NOT UPDATE! WILL BE MANUALLY UPDATED DURING THE RELEASE PROCESS !!!!!!!!!!!!!!!!!!!!!!

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

@@ -13,3 +13,17 @@ export const FindCommand = (props: TextProps) => {
     </Text>
   );
 };
+
+export const OmniboxCommand = (props: TextProps) => {
+  let text = "^K";
+
+  if (navigator.userAgent.indexOf("Mac") > -1) {
+    text = "⌘K";
+  }
+
+  return (
+    <Text as={"span"} {...props}>
+      {text}
+    </Text>
+  );
+};

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

@@ -16,16 +16,28 @@ import {
 import { ReactElement, useMemo } from "react";
 import { BsCaretDownFill } from "react-icons/bs";
 import { Link, Params, UIMatch, useMatches } from "react-router-dom";
-import { EmuiAppState, useEmuiAppContext } from "../emui/EmuiAppContext";
+import { EnclavesState, useEnclavesContext } from "../emui/enclaves/EnclavesContext";
 import { isDefined } from "../utils";
 import { RemoveFunctions } from "../utils/types";
 import { BREADCRUMBS_HEIGHT, MAIN_APP_MAX_WIDTH_WITHOUT_PADDING } from "./theme/constants";
 
-export type KurtosisBreadcrumbsHandle = {
-  crumb?: (state: RemoveFunctions<EmuiAppState>, params: Params<string>) => KurtosisBreadcrumb | KurtosisBreadcrumb[];
-  extraControls?: (state: RemoveFunctions<EmuiAppState>, params: Params<string>) => ReactElement | null;
+type KurtosisBaseBreadcrumbsHandle = {
+  type: string;
 };
 
+export type KurtosisEnclavesBreadcrumbsHandle = KurtosisBaseBreadcrumbsHandle & {
+  type: "enclavesHandle";
+  crumb?: (state: RemoveFunctions<EnclavesState>, params: Params<string>) => KurtosisBreadcrumb | KurtosisBreadcrumb[];
+  extraControls?: (state: RemoveFunctions<EnclavesState>, params: Params<string>) => ReactElement | null;
+};
+
+export type KurtosisCatalogBreadcrumbsHandle = {
+  type: "catalogHandle";
+  crumb?: () => KurtosisBreadcrumb | KurtosisBreadcrumb[];
+};
+
+export type KurtosisBreadcrumbsHandle = KurtosisEnclavesBreadcrumbsHandle | KurtosisCatalogBreadcrumbsHandle;
+
 type KurtosisBreadcrumbMenuItem = {
   name: string;
   destination: string;
@@ -39,11 +51,42 @@ export type KurtosisBreadcrumb = {
 };
 
 export const KurtosisBreadcrumbs = () => {
-  const { enclaves, filesAndArtifactsByEnclave, starlarkRunsByEnclave, servicesByEnclave, starlarkRunningInEnclaves } =
-    useEmuiAppContext();
-
   const matches = useMatches() as UIMatch<object, KurtosisBreadcrumbsHandle>[];
 
+  const handlers = new Set(matches.map((match) => match.handle?.type).filter(isDefined));
+  if (handlers.size === 0) {
+    throw Error(`Currently routes with no breadcrumb handles are not supported`);
+  }
+  if (handlers.size > 1) {
+    throw Error(`Routes with multiple breadcrumb handles are not supported.`);
+  }
+  const handleType = [...handlers][0];
+  const isEnclavesMatches = (
+    matches: UIMatch<object, KurtosisBreadcrumbsHandle>[],
+    onlyType: KurtosisBreadcrumbsHandle["type"],
+  ): matches is UIMatch<object, KurtosisEnclavesBreadcrumbsHandle>[] => onlyType === "enclavesHandle";
+  const isCatalogMatches = (
+    matches: UIMatch<object, KurtosisBreadcrumbsHandle>[],
+    onlyType: KurtosisBreadcrumbsHandle["type"],
+  ): matches is UIMatch<object, KurtosisCatalogBreadcrumbsHandle>[] => onlyType === "catalogHandle";
+  if (isEnclavesMatches(matches, handleType)) {
+    return <KurtosisEnclavesBreadcrumbs matches={matches} />;
+  }
+  if (isCatalogMatches(matches, handleType)) {
+    return <KurtosisCatalogBreadcrumbs matches={matches} />;
+  }
+
+  throw new Error(`Unable to handle breadcrumbs of type ${handleType}`);
+};
+
+type KurtosisEnclavesBreadcrumbsProps = {
+  matches: UIMatch<object, KurtosisEnclavesBreadcrumbsHandle>[];
+};
+
+const KurtosisEnclavesBreadcrumbs = ({ matches }: KurtosisEnclavesBreadcrumbsProps) => {
+  const { enclaves, filesAndArtifactsByEnclave, starlarkRunsByEnclave, servicesByEnclave, starlarkRunningInEnclaves } =
+    useEnclavesContext();
+
   const matchCrumbs = useMemo(
     () =>
       matches.flatMap((match) => {
@@ -100,6 +143,35 @@ export const KurtosisBreadcrumbs = () => {
     ],
   );
 
+  return <KurtosisBreadcrumbsImpl matchCrumbs={matchCrumbs} extraControls={extraControls} />;
+};
+
+type KurtosisCatalogBreadcrumbsProps = {
+  matches: UIMatch<object, KurtosisCatalogBreadcrumbsHandle>[];
+};
+
+const KurtosisCatalogBreadcrumbs = ({ matches }: KurtosisCatalogBreadcrumbsProps) => {
+  const matchCrumbs = useMemo(
+    () =>
+      matches.flatMap((match) => {
+        if (isDefined(match.handle?.crumb)) {
+          const r = match.handle.crumb();
+          return Array.isArray(r) ? r : [r];
+        }
+        return [];
+      }),
+    [matches],
+  );
+
+  return <KurtosisBreadcrumbsImpl matchCrumbs={matchCrumbs} />;
+};
+
+type KurtosisBreadcrumbsImplProps = {
+  matchCrumbs: KurtosisBreadcrumb[];
+  extraControls?: ReactElement[];
+};
+
+const KurtosisBreadcrumbsImpl = ({ matchCrumbs, extraControls }: KurtosisBreadcrumbsImplProps) => {
   return (
     <Flex h={BREADCRUMBS_HEIGHT}>
       <Flex w={MAIN_APP_MAX_WIDTH_WITHOUT_PADDING} alignItems={"center"} justifyContent={"space-between"}>

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

@@ -36,6 +36,7 @@ const theme = extendTheme({
   },
   colors: {
     kurtosisGreen: {
+      50: "#00371E",
       100: "#005e11",
       200: "#008c19",
       300: "#00bb22",
@@ -126,8 +127,8 @@ const theme = extendTheme({
           };
         },
         solid: defineStyle((props) => ({
-          _hover: { bg: "gray.700" },
-          _active: { bg: "gray.700" },
+          _hover: { bg: "gray.600" },
+          _active: { bg: "gray.600" },
           color: `${props.colorScheme}.400`,
           bg: "gray.700",
         })),

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

@@ -0,0 +1,12 @@
+import { Heading, HeadingProps } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+
+type PageTitleProps = PropsWithChildren<HeadingProps>;
+
+export const PageTitle = ({ children, ...headingProps }: PageTitleProps) => {
+  return (
+    <Heading fontSize={"lg"} fontWeight={"medium"} pl={"8px"} {...headingProps}>
+      {children}
+    </Heading>
+  );
+};

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

@@ -0,0 +1,59 @@
+import { Flex, Icon, Image, Text } from "@chakra-ui/react";
+import { IoStarSharp } from "react-icons/io5";
+import { useKurtosisClient } from "../../client/enclaveManager/KurtosisClientContext";
+import { KurtosisPackage } from "../../client/packageIndexer/api/kurtosis_package_indexer_pb";
+import { isDefined } from "../../utils";
+import { RunKurtosisPackageButton } from "./widgets/RunKurtosisPackageButton";
+import { SaveKurtosisPackageButton } from "./widgets/SaveKurtosisPackageButton";
+
+type KurtosisPackageCardProps = { kurtosisPackage: KurtosisPackage; onClick?: () => void };
+
+export const KurtosisPackageCard = ({ kurtosisPackage }: KurtosisPackageCardProps) => {
+  const client = useKurtosisClient();
+
+  const name = isDefined(kurtosisPackage.repositoryMetadata)
+    ? `${kurtosisPackage.repositoryMetadata.name} ${kurtosisPackage.repositoryMetadata.rootPath.split("/").join(" ")}`
+    : kurtosisPackage.name;
+
+  return (
+    <Flex
+      h={"168px"}
+      p={"0 24px"}
+      bg={"gray.900"}
+      borderColor={"whiteAlpha.300"}
+      borderWidth={"1px"}
+      borderStyle={"solid"}
+      borderRadius={"6px"}
+      flexDirection={"column"}
+      gap={"16px"}
+      justifyContent={"center"}
+      alignItems={"center"}
+    >
+      <Flex h={"80px"} gap={"16px"}>
+        <Image bg={"black"} src={`${client.getBaseApplicationUrl()}/logo.png`} borderRadius={"6px"} />
+        <Flex flexDirection={"column"} flex={"1"} justifyContent={"space-between"}>
+          <Text noOfLines={2} fontSize={"lg"} textTransform={"capitalize"}>
+            {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={IoStarSharp} />
+                  <Text as={"span"}>{kurtosisPackage.stars.toString()}</Text>
+                </>
+              )}
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+      <Flex gap={"16px"} width={"100%"}>
+        <SaveKurtosisPackageButton kurtosisPackage={kurtosisPackage} flex={"1"} />
+        <RunKurtosisPackageButton kurtosisPackage={kurtosisPackage} flex={"1"} />
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { Grid, GridItem } from "@chakra-ui/react";
+import { memo } from "react";
+import { KurtosisPackage } from "../../client/packageIndexer/api/kurtosis_package_indexer_pb";
+import { KurtosisPackageCard } from "./KurtosisPackageCard";
+
+type KurtosisPackageCardGridProps = {
+  packages: KurtosisPackage[];
+  onPackageClicked?: (kurtosisPackage: KurtosisPackage) => void;
+};
+
+export const KurtosisPackageCardGrid = memo(({ packages, onPackageClicked }: KurtosisPackageCardGridProps) => {
+  return (
+    <Grid gridTemplateColumns={"1fr 1fr 1fr"} columnGap={"32px"} rowGap={"32px"}>
+      {packages.map((kurtosisPackage) => (
+        <GridItem
+          key={kurtosisPackage.url}
+          onClick={onPackageClicked ? () => onPackageClicked(kurtosisPackage) : undefined}
+        >
+          <KurtosisPackageCard kurtosisPackage={kurtosisPackage} />
+        </GridItem>
+      ))}
+    </Grid>
+  );
+});

enclave-manager/web/src/components/catalog/widgets/RunKurtosisPackageButton.tsx

@@ -0,0 +1,37 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+import { useState } from "react";
+import { FiDownload } from "react-icons/fi";
+import { KurtosisPackage } from "../../../client/packageIndexer/api/kurtosis_package_indexer_pb";
+import { EnclavesContextProvider } from "../../../emui/enclaves/EnclavesContext";
+import { ConfigureEnclaveModal } from "../../enclaves/modals/ConfigureEnclaveModal";
+
+type RunKurtosisPackageButtonProps = ButtonProps & {
+  kurtosisPackage: KurtosisPackage;
+};
+
+export const RunKurtosisPackageButton = ({ kurtosisPackage, ...buttonProps }: RunKurtosisPackageButtonProps) => {
+  const [configuringEnclave, setConfiguringEnclave] = useState(false);
+
+  return (
+    <>
+      <Button
+        size={"xs"}
+        colorScheme={"kurtosisGreen"}
+        leftIcon={<FiDownload />}
+        onClick={() => setConfiguringEnclave(true)}
+        {...buttonProps}
+      >
+        Run
+      </Button>
+      {configuringEnclave && (
+        <EnclavesContextProvider skipInitialLoad>
+          <ConfigureEnclaveModal
+            isOpen={true}
+            onClose={() => setConfiguringEnclave(false)}
+            kurtosisPackage={kurtosisPackage}
+          />
+        </EnclavesContextProvider>
+      )}
+    </>
+  );
+};

enclave-manager/web/src/components/catalog/widgets/SaveKurtosisPackageButton.tsx

@@ -0,0 +1,46 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+import { memo, MouseEventHandler, useCallback, useMemo } from "react";
+import { MdBookmarkAdd } from "react-icons/md";
+import { KurtosisPackage } from "../../../client/packageIndexer/api/kurtosis_package_indexer_pb";
+import { useCatalogContext } from "../../../emui/catalog/CatalogContext";
+
+type SaveKurtosisPackageButtonProps = ButtonProps & {
+  kurtosisPackage: KurtosisPackage;
+};
+
+export const SaveKurtosisPackageButton = ({ kurtosisPackage, ...buttonProps }: SaveKurtosisPackageButtonProps) => {
+  const { savedPackages, togglePackageSaved } = useCatalogContext();
+  const isPackageSaved = useMemo(
+    () => savedPackages.some((p) => p.name === kurtosisPackage.name),
+    [savedPackages, kurtosisPackage],
+  );
+
+  const handleClick = useCallback(() => togglePackageSaved(kurtosisPackage), [togglePackageSaved, kurtosisPackage]);
+
+  return <SaveKurtosisPackageButtonMemo isPackageSaved={isPackageSaved} onClick={handleClick} {...buttonProps} />;
+};
+
+type SaveKurtosisPackageButtonMemoProps = Omit<SaveKurtosisPackageButtonProps, "kurtosisPackage"> & {
+  isPackageSaved: boolean;
+  onClick: MouseEventHandler;
+};
+
+// this is memo'd to skip unecessary renders, which effectively doubles the performance of this component (as it is
+// displayed a lot.
+const SaveKurtosisPackageButtonMemo = memo(
+  ({ isPackageSaved, onClick, ...buttonProps }: SaveKurtosisPackageButtonMemoProps) => {
+    return (
+      <Button
+        size={"xs"}
+        variant={"solid"}
+        colorScheme={isPackageSaved ? "kurtosisGreen" : "darkBlue"}
+        leftIcon={<MdBookmarkAdd />}
+        onClick={onClick}
+        bg={isPackageSaved ? "#18371E" : undefined}
+        {...buttonProps}
+      >
+        {isPackageSaved ? "Saved" : "Save"}
+      </Button>
+    );
+  },
+);