From 9aeba87619d57b91877111eebffbd509ff079a92 Mon Sep 17 00:00:00 2001 From: Ben Gazzard Date: Wed, 14 Feb 2024 11:52:18 +0000 Subject: [PATCH] Fix perf --- .../enclaveBuilder/KurtosisArtifactNode.tsx | 44 ++-- .../enclaveBuilder/KurtosisServiceNode.tsx | 174 +++++++------ .../enclaveBuilder/KurtosisShellNode.tsx | 245 +++++++++--------- 3 files changed, 237 insertions(+), 226 deletions(-) diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisArtifactNode.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisArtifactNode.tsx index 612ab842f9..0855d43f09 100644 --- a/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisArtifactNode.tsx +++ b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisArtifactNode.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { NodeProps } from "reactflow"; import { KurtosisFormControl } from "../../form/KurtosisFormControl"; import { StringArgumentInput } from "../../form/StringArgumentInput"; @@ -6,24 +7,27 @@ import { KurtosisNode } from "./KurtosisNode"; import { KurtosisArtifactNodeData } from "./types"; import { useVariableContext } from "./VariableContextProvider"; -export const KurtosisArtifactNode = ({ id, selected }: NodeProps) => { - const { data } = useVariableContext(); +export const KurtosisArtifactNode = memo( + ({ id, selected }: NodeProps) => { + const { data } = useVariableContext(); - return ( - - name={"artifactName"} label={"Artifact Name"} isRequired> - - - - - - - ); -}; + return ( + + name={"artifactName"} label={"Artifact Name"} isRequired> + + + + + + + ); + }, + (oldProps, newProps) => oldProps.id !== newProps.id && oldProps.selected !== newProps.selected, +); diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisServiceNode.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisServiceNode.tsx index 4a75d92041..20bf341087 100644 --- a/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisServiceNode.tsx +++ b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisServiceNode.tsx @@ -1,4 +1,5 @@ import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"; +import { memo } from "react"; import { NodeProps } from "reactflow"; import { DictArgumentInput } from "../../form/DictArgumentInput"; import { KurtosisFormControl } from "../../form/KurtosisFormControl"; @@ -12,91 +13,94 @@ import { KurtosisNode } from "./KurtosisNode"; import { KurtosisFileMount, KurtosisPort, KurtosisServiceNodeData } from "./types"; import { useVariableContext } from "./VariableContextProvider"; -export const KurtosisServiceNode = ({ id, selected }: NodeProps) => { - const { data } = useVariableContext(); +export const KurtosisServiceNode = memo( + ({ id, selected }: NodeProps) => { + const { data } = useVariableContext(); - return ( - - - name={"serviceName"} label={"Service Name"} isRequired> - - - name={"image"} label={"Container Image"} isRequired> - { - if (typeof val !== "string") { - return "Value should be a string"; - } - if ( - !val.match( - /^(?[\w.\-_]+((?::\d+|)(?=\/[a-z0-9._-]+\/[a-z0-9._-]+))|)(?:\/|)(?[a-z0-9.\-_]+(?:\/[a-z0-9.\-_]+|))(:(?[\w.\-_]{1,127})|)$/gim, - ) - ) { - return "Value does not look like a docker image"; - } - }} - /> - - - - - Environment - Ports - Files - + return ( + + + name={"serviceName"} label={"Service Name"} isRequired> + + + name={"image"} label={"Container Image"} isRequired> + { + if (typeof val !== "string") { + return "Value should be a string"; + } + if ( + !val.match( + /^(?[\w.\-_]+((?::\d+|)(?=\/[a-z0-9._-]+\/[a-z0-9._-]+))|)(?:\/|)(?[a-z0-9.\-_]+(?:\/[a-z0-9.\-_]+|))(:(?[\w.\-_]{1,127})|)$/gim, + ) + ) { + return "Value does not look like a docker image"; + } + }} + /> + + + + + Environment + Ports + Files + - - - name={"env"} label={"Environment Variables"}> - - name={"env"} - KeyFieldComponent={StringArgumentInput} - ValueFieldComponent={MentionStringArgumentInput} - /> - - - - name={"ports"} label={"Ports"}> - ({ - portName: "", - applicationProtocol: "", - transportProtocol: "TCP", - port: 0, - })} - /> - - - - - name={"files"} - label={"Files"} - helperText={"Choose where to mount artifacts on this services filesystem"} - > - + + name={"env"} label={"Environment Variables"}> + + name={"env"} + KeyFieldComponent={StringArgumentInput} + ValueFieldComponent={MentionStringArgumentInput} + /> + + + + name={"ports"} label={"Ports"}> + ({ + portName: "", + applicationProtocol: "", + transportProtocol: "TCP", + port: 0, + })} + /> + + + + name={"files"} - FieldComponent={MountArtifactFileInput} - createNewValue={(): KurtosisFileMount => ({ - mountPoint: "", - artifactName: "", - })} - /> - - - - - - ); -}; + label={"Files"} + helperText={"Choose where to mount artifacts on this services filesystem"} + > + ({ + mountPoint: "", + artifactName: "", + })} + /> + + + + + + ); + }, + (oldProps, newProps) => oldProps.id !== newProps.id || oldProps.selected !== newProps.selected, +); diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisShellNode.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisShellNode.tsx index 798e5875f2..023e2a3d0e 100644 --- a/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisShellNode.tsx +++ b/enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisShellNode.tsx @@ -1,6 +1,6 @@ import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"; import { isDefined } from "kurtosis-ui-components"; -import { useMemo } from "react"; +import { memo, useMemo } from "react"; import { NodeProps } from "reactflow"; import { BooleanArgumentInput } from "../../form/BooleanArgumentInput"; import { CodeEditorInput } from "../../form/CodeEditorInput"; @@ -17,134 +17,137 @@ import { KurtosisNode } from "./KurtosisNode"; import { KurtosisFileMount, KurtosisShellNodeData } from "./types"; import { useVariableContext } from "./VariableContextProvider"; -export const KurtosisShellNode = ({ id, selected }: NodeProps) => { - const { data, variables } = useVariableContext(); - const artifactVariableOptions = useMemo((): SelectOption[] => { - return variables - .filter((variable) => variable.id.startsWith("artifact")) - .map((variable) => ({ display: variable.displayName, value: `{{${variable.id}}}` })); - }, [variables]); - const nodeData = data[id] as KurtosisShellNodeData; +export const KurtosisShellNode = memo( + ({ id, selected }: NodeProps) => { + const { data, variables } = useVariableContext(); + const artifactVariableOptions = useMemo((): SelectOption[] => { + return variables + .filter((variable) => variable.id.startsWith("artifact")) + .map((variable) => ({ display: variable.displayName, value: `{{${variable.id}}}` })); + }, [variables]); + const nodeData = data[id] as KurtosisShellNodeData; - const MemodMentionStringValueArgumentInput = useMemo( - () => (props: KurtosisFormInputProps) => ( - - ), - [], - ); + const MemodMentionStringValueArgumentInput = useMemo( + () => (props: KurtosisFormInputProps) => ( + + ), + [], + ); - if (!isDefined(nodeData)) { - // Node has probably been deleted. - return null; - } + if (!isDefined(nodeData)) { + // Node has probably been deleted. + return null; + } - return ( - - - name={"shellName"} label={"Shell Name"} isRequired> - - - name={"image"} label={"Container Image"}> - - - - - - Script - Environment - Files - Advanced - + return ( + + + name={"shellName"} label={"Shell Name"} isRequired> + + + name={"image"} label={"Container Image"}> + + + + + + Script + Environment + Files + Advanced + - - - name={"command"} label={"Script to run"} isRequired> - - - - - name={"env"} label={"Environment Variables"}> - - name={"env"} - KeyFieldComponent={StringArgumentInput} - ValueFieldComponent={MentionStringArgumentInput} - /> - - - - - name={"files"} - label={"Input Files"} - helperText={"Choose where to mount artifacts on this execution tasks filesystem"} - > - ({ - mountPoint: "", - artifactName: "", - })} - /> - - - name={"files"} - label={"Output Files"} - helperText={"Choose which files to expose from this execution task"} - > - - name={"store"} - FieldComponent={MemodMentionStringValueArgumentInput} - createNewValue={() => ({ - value: "", - })} - /> - - - - + + + name={"command"} label={"Script to run"} isRequired> + + + + + name={"env"} label={"Environment Variables"}> + + name={"env"} + KeyFieldComponent={StringArgumentInput} + ValueFieldComponent={MentionStringArgumentInput} + /> + + + - name={"wait_enabled"} - label={"Wait enabled"} - isRequired - helperText={"Whether kurtosis should wait a preset time for this step to complete."} + name={"files"} + label={"Input Files"} + helperText={"Choose where to mount artifacts on this execution tasks filesystem"} > - name={"wait_enabled"} /> + ({ + mountPoint: "", + artifactName: "", + })} + /> - name={"wait"} - label={"Wait"} - isDisabled={nodeData.wait_enabled === "false"} - helperText={"Whether kurtosis should wait a preset time for this step to complete."} + name={"files"} + label={"Output Files"} + helperText={"Choose which files to expose from this execution task"} > - - name={"wait"} - isDisabled={nodeData.wait_enabled === "false"} - size={"sm"} - placeholder={"180s"} - validate={nodeData.wait_enabled === "false" ? undefined : validateDurationString} + + name={"store"} + FieldComponent={MemodMentionStringValueArgumentInput} + createNewValue={() => ({ + value: "", + })} /> - - - - - - ); -}; + + + + + name={"wait_enabled"} + label={"Wait enabled"} + isRequired + helperText={"Whether kurtosis should wait a preset time for this step to complete."} + > + name={"wait_enabled"} /> + + + name={"wait"} + label={"Wait"} + isDisabled={nodeData.wait_enabled === "false"} + helperText={"Whether kurtosis should wait a preset time for this step to complete."} + > + + name={"wait"} + isDisabled={nodeData.wait_enabled === "false"} + size={"sm"} + placeholder={"180s"} + validate={nodeData.wait_enabled === "false" ? undefined : validateDurationString} + /> + + + + + + + ); + }, + (oldProps, newProps) => oldProps.id !== newProps.id || oldProps.selected !== newProps.selected, +);