diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/LocalRunModal.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/LocalRunModal.tsx new file mode 100644 index 0000000000..a09b9f817d --- /dev/null +++ b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/LocalRunModal.tsx @@ -0,0 +1,76 @@ +import React, { useEffect, useState } from 'react'; +import { + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + Text, + Box, + IconButton, + CloseButton, +} from '@chakra-ui/react'; +import { CopyIcon } from '@chakra-ui/icons'; +import { v4 as uuidv4 } from 'uuid'; + +const LocalRunModal: React.FC = () => { + const { isOpen, onOpen, onClose } = useDisclosure(); + const [uniqueId, setUniqueId] = useState(''); + + useEffect(() => { + if (isOpen) { + setUniqueId(uuidv4()); + } + }, [isOpen]); + + const codeSnippets = [ + 'brew install kurtosis', + `kurtosis run local ${uniqueId}` + ]; + + const handleCopy = (snippet: string): void => { + navigator.clipboard.writeText(snippet) + .then(() => console.log('Code copied to clipboard!')) + .catch(err => console.error('Failed to copy: ', err)); + }; + + return ( + <> + + + + + + Setup local environment + + + Follow the steps below deploy a local copy: + {codeSnippets.map((snippet, index) => ( + + {snippet} + } + size="sm" + position="absolute" + right="1" + top="1" + onClick={() => handleCopy(snippet)} + /> + + ))} + + + + + ); +}; + +export default LocalRunModal; + diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/EnclavesTable.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/EnclavesTable.tsx index f5a78b2798..fb764c724b 100644 --- a/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/EnclavesTable.tsx +++ b/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/EnclavesTable.tsx @@ -10,6 +10,7 @@ import { Link } from "react-router-dom"; import { Result } from "true-myth"; import { useKurtosisPackageIndexerClient } from "../../../../client/packageIndexer/KurtosisPackageIndexerClientContext"; import { EnclaveFullInfo } from "../../types"; +import LocalRunModal from "../modals/LocalRunModal"; import { EnclaveServicesSummary } from "../widgets/EnclaveServicesSummary"; import { EnclaveStatus } from "../widgets/EnclaveStatus"; import { PackageLinkButton } from "../widgets/PackageLinkButton"; @@ -37,17 +38,17 @@ const enclaveToRow = (enclave: EnclaveFullInfo, catalog?: Result kurtosisPackage.name === starlarkRun.value.packageId) || null - : null, + ? catalog.value.packages.find((kurtosisPackage) => kurtosisPackage.name === starlarkRun.value.packageId) || null + : null, services: !isDefined(enclave.services) ? "loading" : enclave.services.isOk - ? Object.values(enclave.services.value.serviceInfo) - : null, + ? Object.values(enclave.services.value.serviceInfo) + : null, ports: !isDefined(enclave.services) ? "loading" : enclave.services.isOk - ? Object.values(enclave.services.value.serviceInfo).flatMap((service) => + ? Object.values(enclave.services.value.serviceInfo).flatMap((service) => getPortTableRows( enclave.enclaveUuid, service.serviceUuid, @@ -57,7 +58,7 @@ const enclaveToRow = (enclave: EnclaveFullInfo, catalog?: Result , meta: { centerAligned: true }, }), + columnHelper.accessor("status", { + header: "Run Locally", + cell: (statusCell) => , + }), columnHelper.accessor("ports", { header: "Endpoints", cell: (portsCell) => ,