Skip to content

Commit

Permalink
Fix perf
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dartoxian
Dartoxian committed Feb 14, 2024
1 parent 7438bdd commit 9aeba87
Show file tree
Hide file tree
Showing 3 changed files with 237 additions and 226 deletions.
44 changes: 24 additions & 20 deletions .../packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisArtifactNode.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { memo } from "react";
import { NodeProps } from "reactflow";
import { KurtosisFormControl } from "../../form/KurtosisFormControl";
import { StringArgumentInput } from "../../form/StringArgumentInput";
Expand All @@ -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 (
<KurtosisNode
id={id}
selected={selected}
name={(data[id] as KurtosisArtifactNodeData).artifactName}
color={"yellow.900"}
minWidth={300}
maxWidth={800}
>
<KurtosisFormControl<KurtosisArtifactNodeData> name={"artifactName"} label={"Artifact Name"} isRequired>
<StringArgumentInput size={"sm"} name={"artifactName"} isRequired />
</KurtosisFormControl>
<KurtosisFormControl name={"files"} label={"Files"}>
<FileTreeArgumentInput name={"files"} />
</KurtosisFormControl>
</KurtosisNode>
);
};
return (
<KurtosisNode
id={id}
selected={selected}
name={(data[id] as KurtosisArtifactNodeData).artifactName}
color={"yellow.900"}
minWidth={300}
maxWidth={800}
>
<KurtosisFormControl<KurtosisArtifactNodeData> name={"artifactName"} label={"Artifact Name"} isRequired>
<StringArgumentInput size={"sm"} name={"artifactName"} isRequired />
</KurtosisFormControl>
<KurtosisFormControl name={"files"} label={"Files"}>
<FileTreeArgumentInput name={"files"} />
</KurtosisFormControl>
</KurtosisNode>
);
},
(oldProps, newProps) => oldProps.id !== newProps.id && oldProps.selected !== newProps.selected,
);
174 changes: 89 additions & 85 deletions ...b/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisServiceNode.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 (
<KurtosisNode
id={id}
selected={selected}
name={(data[id] as KurtosisServiceNodeData)?.serviceName}
minWidth={650}
maxWidth={800}
color={"blue.900"}
>
<Flex gap={"16px"}>
<KurtosisFormControl<KurtosisServiceNodeData> name={"serviceName"} label={"Service Name"} isRequired>
<StringArgumentInput name={"serviceName"} size={"sm"} isRequired validate={validateDockerLocator} />
</KurtosisFormControl>
<KurtosisFormControl<KurtosisServiceNodeData> name={"image"} label={"Container Image"} isRequired>
<StringArgumentInput
size={"sm"}
name={"image"}
isRequired
validate={(val) => {
if (typeof val !== "string") {
return "Value should be a string";
}
if (
!val.match(
/^(?<repository>[\w.\-_]+((?::\d+|)(?=\/[a-z0-9._-]+\/[a-z0-9._-]+))|)(?:\/|)(?<image>[a-z0-9.\-_]+(?:\/[a-z0-9.\-_]+|))(:(?<tag>[\w.\-_]{1,127})|)$/gim,
)
) {
return "Value does not look like a docker image";
}
}}
/>
</KurtosisFormControl>
</Flex>
<Tabs>
<TabList>
<Tab>Environment</Tab>
<Tab>Ports</Tab>
<Tab>Files</Tab>
</TabList>
return (
<KurtosisNode
id={id}
selected={selected}
name={(data[id] as KurtosisServiceNodeData)?.serviceName}
minWidth={650}
maxWidth={800}
color={"blue.900"}
>
<Flex gap={"16px"}>
<KurtosisFormControl<KurtosisServiceNodeData> name={"serviceName"} label={"Service Name"} isRequired>
<StringArgumentInput name={"serviceName"} size={"sm"} isRequired validate={validateDockerLocator} />
</KurtosisFormControl>
<KurtosisFormControl<KurtosisServiceNodeData> name={"image"} label={"Container Image"} isRequired>
<StringArgumentInput
size={"sm"}
name={"image"}
isRequired
validate={(val) => {
if (typeof val !== "string") {
return "Value should be a string";
}
if (
!val.match(
/^(?<repository>[\w.\-_]+((?::\d+|)(?=\/[a-z0-9._-]+\/[a-z0-9._-]+))|)(?:\/|)(?<image>[a-z0-9.\-_]+(?:\/[a-z0-9.\-_]+|))(:(?<tag>[\w.\-_]{1,127})|)$/gim,
)
) {
return "Value does not look like a docker image";
}
}}
/>
</KurtosisFormControl>
</Flex>
<Tabs>
<TabList>
<Tab>Environment</Tab>
<Tab>Ports</Tab>
<Tab>Files</Tab>
</TabList>

<TabPanels>
<TabPanel>
<KurtosisFormControl<KurtosisServiceNodeData> name={"env"} label={"Environment Variables"}>
<DictArgumentInput<KurtosisServiceNodeData>
name={"env"}
KeyFieldComponent={StringArgumentInput}
ValueFieldComponent={MentionStringArgumentInput}
/>
</KurtosisFormControl>
</TabPanel>
<TabPanel>
<KurtosisFormControl<KurtosisServiceNodeData> name={"ports"} label={"Ports"}>
<ListArgumentInput
name={"ports"}
FieldComponent={PortConfigurationField}
createNewValue={(): KurtosisPort => ({
portName: "",
applicationProtocol: "",
transportProtocol: "TCP",
port: 0,
})}
/>
</KurtosisFormControl>
</TabPanel>
<TabPanel>
<KurtosisFormControl<KurtosisServiceNodeData>
name={"files"}
label={"Files"}
helperText={"Choose where to mount artifacts on this services filesystem"}
>
<ListArgumentInput
<TabPanels>
<TabPanel>
<KurtosisFormControl<KurtosisServiceNodeData> name={"env"} label={"Environment Variables"}>
<DictArgumentInput<KurtosisServiceNodeData>
name={"env"}
KeyFieldComponent={StringArgumentInput}
ValueFieldComponent={MentionStringArgumentInput}
/>
</KurtosisFormControl>
</TabPanel>
<TabPanel>
<KurtosisFormControl<KurtosisServiceNodeData> name={"ports"} label={"Ports"}>
<ListArgumentInput
name={"ports"}
FieldComponent={PortConfigurationField}
createNewValue={(): KurtosisPort => ({
portName: "",
applicationProtocol: "",
transportProtocol: "TCP",
port: 0,
})}
/>
</KurtosisFormControl>
</TabPanel>
<TabPanel>
<KurtosisFormControl<KurtosisServiceNodeData>
name={"files"}
FieldComponent={MountArtifactFileInput}
createNewValue={(): KurtosisFileMount => ({
mountPoint: "",
artifactName: "",
})}
/>
</KurtosisFormControl>
</TabPanel>
</TabPanels>
</Tabs>
</KurtosisNode>
);
};
label={"Files"}
helperText={"Choose where to mount artifacts on this services filesystem"}
>
<ListArgumentInput
name={"files"}
FieldComponent={MountArtifactFileInput}
createNewValue={(): KurtosisFileMount => ({
mountPoint: "",
artifactName: "",
})}
/>
</KurtosisFormControl>
</TabPanel>
</TabPanels>
</Tabs>
</KurtosisNode>
);
},
(oldProps, newProps) => oldProps.id !== newProps.id || oldProps.selected !== newProps.selected,
);
Loading

0 comments on commit 9aeba87

Please sign in to comment.