Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: enclave builder imagespec support (#2206)
## Description: This PR adds support for more complex Image definitions for services/tasks. ### Demo: https://github.com/kurtosis-tech/kurtosis/assets/4419574/9dacd252-6c7f-4de2-8312-2b1b547e3dcb ## Is this change user facing? YES ## References (if applicable): * https://www.notion.so/kurtosistech/Picasso-Prototype-Refinement-Burndown-5eecbc699d8d41c2b4fe8748f3411f74 * https://docs.kurtosis.com/api-reference/starlark-reference/service-config
- Loading branch information
Showing
8 changed files
with
286 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
192 changes: 192 additions & 0 deletions
192
...r/web/packages/app/src/emui/enclaves/components/enclaveBuilder/input/ImageConfigInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| import { | ||
| Code, | ||
| Flex, | ||
| IconButton, | ||
| InputGroup, | ||
| InputLeftAddon, | ||
| InputRightElement, | ||
| Popover, | ||
| PopoverArrow, | ||
| PopoverBody, | ||
| PopoverContent, | ||
| PopoverHeader, | ||
| PopoverTrigger, | ||
| Portal, | ||
| Tab, | ||
| TabList, | ||
| TabPanel, | ||
| TabPanels, | ||
| Tabs, | ||
| Text, | ||
| } from "@chakra-ui/react"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { useFormContext } from "react-hook-form"; | ||
| import { FiSettings } from "react-icons/fi"; | ||
| import { KurtosisFormControl } from "../../form/KurtosisFormControl"; | ||
| import { StringArgumentInput } from "../../form/StringArgumentInput"; | ||
| import { KurtosisImageConfig, KurtosisImageType } from "../types"; | ||
| import { validateDockerLocator } from "./validators"; | ||
|
|
||
| const tabs: { display: string; value: KurtosisImageType }[] = [ | ||
| { display: "Image", value: "image" }, | ||
| { display: "Dockerfile", value: "dockerfile" }, | ||
| { display: "Nix", value: "nix" }, | ||
| ]; | ||
|
|
||
| export const ImageConfigInput = () => { | ||
| const { setValue, watch } = useFormContext<{ image: KurtosisImageConfig }>(); | ||
| const imageName = watch("image.image"); | ||
| const imageType = watch("image.type"); | ||
| const [activeTabIndex, setActiveTabIndex] = useState(tabs.findIndex((v) => v.value === imageType)); | ||
|
|
||
| const handleTabsChange = (newTabIndex: number) => { | ||
| setActiveTabIndex(newTabIndex); | ||
| setValue("image.type", tabs[activeTabIndex].value); | ||
| }; | ||
|
|
||
| return ( | ||
| <InputGroup size={"sm"}> | ||
| <InputLeftAddon>{tabs[activeTabIndex].display}</InputLeftAddon> | ||
| <StringArgumentInput | ||
| name={"image.image"} | ||
| validate={validateDockerLocator} | ||
| placeholder={"Default: python:3.11-alpine"} | ||
| paddingInlineEnd={8} | ||
| /> | ||
| <InputRightElement> | ||
| <Popover placement={"right-end"} isLazy> | ||
| <PopoverTrigger> | ||
| <IconButton | ||
| icon={<FiSettings />} | ||
| bg={"gray.850"} | ||
| aria-label={"Image Configuration"} | ||
| variant={"ghost"} | ||
| size={"xs"} | ||
| /> | ||
| </PopoverTrigger> | ||
| <Portal> | ||
| <PopoverContent fontSize={"sm"} minW={"500px"} minH={"520px"}> | ||
| <PopoverArrow /> | ||
| <PopoverHeader>Image Configuration</PopoverHeader> | ||
| <PopoverBody> | ||
| <Flex flexDirection={"column"} gap={"8px"}> | ||
| <Text> | ||
| Configuration for the container with <Code>{imageName}</Code> | ||
| </Text> | ||
| <Text>Select the image type:</Text> | ||
| <Tabs index={activeTabIndex} onChange={handleTabsChange}> | ||
| <TabList> | ||
| {tabs.map((tab, i) => ( | ||
| <Tab key={i}>{tab.display}</Tab> | ||
| ))} | ||
| </TabList> | ||
| <TabPanels> | ||
| <TabPanel> | ||
| <KurtosisFormControl | ||
| size={"xs"} | ||
| name={"image.username"} | ||
| label={"Username"} | ||
| helperText={"The username that will be used to pull the image from the given registry"} | ||
| > | ||
| <StringArgumentInput size={"xs"} name={"imageConfig.username"} /> | ||
| </KurtosisFormControl> | ||
| <KurtosisFormControl | ||
| name={"image.password"} | ||
| label={"Username"} | ||
| size={"xs"} | ||
| helperText={"The pasword that will be used to pull the image from the given registry"} | ||
| > | ||
| <StringArgumentInput name={"imageConfig.password"} size={"xs"} type={"password"} /> | ||
| </KurtosisFormControl> | ||
| <KurtosisFormControl | ||
| size={"xs"} | ||
| name={"image.registry"} | ||
| label={"Registry"} | ||
| helperText={"The URL of the registry"} | ||
| > | ||
| <StringArgumentInput | ||
| name={"image.username"} | ||
| size={"xs"} | ||
| placeholder={"http://my.registry.io"} | ||
| /> | ||
| </KurtosisFormControl> | ||
| </TabPanel> | ||
| <TabPanel> | ||
| <KurtosisFormControl | ||
| size={"xs"} | ||
| name={"image.buildContextDir"} | ||
| label={"Build Context Dir"} | ||
| helperText={ | ||
| "Locator to build context within the Kurtosis package. As of now, Kurtosis expects a Dockerfile at the root of the build context" | ||
| } | ||
| isRequired={activeTabIndex === 1} | ||
| > | ||
| <StringArgumentInput | ||
| size={"xs"} | ||
| name={"imageConfig.buildContextDir"} | ||
| isRequired={activeTabIndex === 1} | ||
| /> | ||
| </KurtosisFormControl> | ||
| <KurtosisFormControl | ||
| name={"imageConfig.targetStage"} | ||
| label={"Target Stage"} | ||
| size={"xs"} | ||
| helperText={"Stage of image build to target for multi-stage container image"} | ||
| > | ||
| <StringArgumentInput name={"imageConfig.targetStage"} size={"xs"} /> | ||
| </KurtosisFormControl> | ||
| </TabPanel> | ||
| <TabPanel> | ||
| <KurtosisFormControl | ||
| size={"xs"} | ||
| name={"image.buildContextDir"} | ||
| label={"Build Context Dir"} | ||
| helperText={"Locator to build context within the Kurtosis package."} | ||
| isRequired={activeTabIndex === 2} | ||
| > | ||
| <StringArgumentInput | ||
| size={"xs"} | ||
| name={"image.buildContextDir"} | ||
| isRequired={activeTabIndex === 2} | ||
| placeholder={"./"} | ||
| /> | ||
| </KurtosisFormControl> | ||
| <KurtosisFormControl | ||
| name={"image.flakeLocationDir"} | ||
| label={"Flake Location Dir"} | ||
| size={"xs"} | ||
| helperText={ | ||
| "The relative path (from the `build_context_dir`) to the folder containing the flake.nix file" | ||
| } | ||
| isRequired={activeTabIndex === 2} | ||
| > | ||
| <StringArgumentInput | ||
| name={"image.flakeLocationDir"} | ||
| size={"xs"} | ||
| placeholder={"./hello-go"} | ||
| isRequired={activeTabIndex === 2} | ||
| /> | ||
| </KurtosisFormControl> | ||
| <KurtosisFormControl | ||
| name={"image.flakeOutput"} | ||
| label={"Flake Output"} | ||
| size={"xs"} | ||
| helperText={ | ||
| "The selector for the Flake output with the image derivation. Fallbacks to the default package." | ||
| } | ||
| > | ||
| <StringArgumentInput name={"image.flakeOutput"} size={"xs"} /> | ||
| </KurtosisFormControl> | ||
| </TabPanel> | ||
| </TabPanels> | ||
| </Tabs> | ||
| </Flex> | ||
| </PopoverBody> | ||
| </PopoverContent> | ||
| </Portal> | ||
| </Popover> | ||
| </InputRightElement> | ||
| </InputGroup> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.