Support for Functions Environment Vars on connection level

epuluikis · Nov 11, 2024 · cb3f659 · cb3f659
1 parent 3d39d85
commit cb3f659
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 19 deletions.
diff --git a/cli/jitsu-cli/src/templates/functions.ts b/cli/jitsu-cli/src/templates/functions.ts
@@ -50,7 +50,7 @@ export const config = {
     description: ""
 };
 
-const helloWorldFunction: JitsuFunction<AnalyticsServerEvent, any> = async (event, { log, fetch, props, store, geo, ...meta }) => {
+const helloWorldFunction: JitsuFunction<AnalyticsServerEvent, any> = async (event, { log, fetch, store, geo, ...meta }) => {
     //output "Hello World!" to logs and return unchanged event
     log.info("Hello World!");
     return event

diff --git a/services/profiles/src/lib/functions-chain.ts b/services/profiles/src/lib/functions-chain.ts
@@ -107,7 +107,7 @@ export function buildFunctionChain(
   }
   udfCache.ttl(pbLongId, udfTTL);
 
-  const udfPipelineFunc = (chainCtx: FunctionChainContext, funcCtx: FunctionContext): ProfileFunctionWrapper => {
+  const udfPipelineFunc = (chainCtx: FunctionChainContext): ProfileFunctionWrapper => {
     return async (events, user, ctx) => {
       try {
         return await cached.wrapper.userFunction(events, user, ctx);
@@ -142,7 +142,7 @@ export function buildFunctionChain(
     {
       id: "udf.PIPELINE",
       context: funcCtx,
-      exec: udfPipelineFunc(chainCtx, funcCtx),
+      exec: udfPipelineFunc(chainCtx),
     },
   ];
 

diff --git a/services/rotor/src/lib/functions-chain.ts b/services/rotor/src/lib/functions-chain.ts
@@ -152,7 +152,14 @@ export function buildFunctionChain(
     anonymousEventsStore,
     connectionOptions: connectionData,
   };
-
+  const funcCtx = {
+    function: {
+      id: "PIPELINE",
+      type: "udf",
+      debugTill: connectionData.debugTill ? new Date(connectionData.debugTill) : undefined,
+    },
+    props: connectionData.functionsEnv || {},
+  };
   const udfFuncs: FunctionConfig[] = (connectionData?.functions || [])
     .filter(f => f.functionId.startsWith("udf."))
     .map(f => {
@@ -180,14 +187,7 @@ export function buildFunctionChain(
       const wrapper = UDFWrapper(
         connection.id,
         chainCtx,
-        {
-          function: {
-            id: "PIPELINE",
-            type: "udf",
-            debugTill: connectionData.debugTill ? new Date(connectionData.debugTill) : undefined,
-          },
-          props: {},
-        },
+        funcCtx,
         udfFuncs.map(f => ({ id: f.id, name: f.name, code: f.code }))
       );
       const oldWrapper = cached?.wrapper;
@@ -207,7 +207,7 @@ export function buildFunctionChain(
     mainFunction,
   ];
 
-  const udfPipelineFunc = (chainCtx: FunctionChainContext, funcCtx: FunctionContext): JitsuFunctionWrapper => {
+  const udfPipelineFunc = (chainCtx: FunctionChainContext): JitsuFunctionWrapper => {
     return async (event: AnyEvent, ctx: EventContext) => {
       try {
         return await cached.wrapper.userFunction(event, ctx);
@@ -262,7 +262,7 @@ export function buildFunctionChain(
       return {
         id: f.functionId as string,
         context: funcCtx,
-        exec: udfPipelineFunc(chainCtx, funcCtx),
+        exec: udfPipelineFunc(chainCtx),
       };
     } else {
       throw newError(`Function of unknown type: ${f.functionId}`);

diff --git a/webapps/console/components/ConnectionEditorPage/ConnectionEditorPage.tsx b/webapps/console/components/ConnectionEditorPage/ConnectionEditorPage.tsx
@@ -20,6 +20,7 @@ import { Expandable } from "../Expandable/Expandable";
 import { useStoreReload } from "../../lib/store";
 import { DestinationSelector } from "../Selectors/DestinationSelector";
 import { SourceSelector } from "../Selectors/SourceSelector";
+import { FunctionVariables } from "../FunctionsDebugger/FunctionVariables";
 
 const log = getLog("ConnectionEditorPage");
 
@@ -678,7 +679,6 @@ function ConnectionEditor({
         <FieldListEditorLayout
           groups={{
             Advanced: { expandable: true },
-            Functions: { expandable: true },
           }}
           items={configItems}
         />
@@ -699,6 +699,23 @@ function ConnectionEditor({
             }}
           />
         </Expandable>
+        <Expandable
+          initiallyExpanded={!!connectionOptions.functions?.length}
+          title={<h2 className="font-bold my-4 text-xl text-textDark">Environment Variables</h2>}
+          hideArrow={false}
+          caretSize="1.5em"
+          contentLeftPadding={false}
+        >
+          <div className={"text-textLight px-1 mb-2"}>
+            Provided variables can be used inside functions via <code>process.env</code> object. For example:{" "}
+            <code>process.env.DEBUG</code>
+          </div>
+          <FunctionVariables
+            className={"!px-0"}
+            value={connectionOptions.functionsEnv || {}}
+            onChange={functionsEnv => updateOptions({ functionsEnv })}
+          />
+        </Expandable>
       </div>
       <div className="flex justify-between pt-6">
         <div>

diff --git a/webapps/console/components/FunctionsDebugger/FunctionVariables.tsx b/webapps/console/components/FunctionsDebugger/FunctionVariables.tsx
@@ -11,7 +11,7 @@ const Var: React.FC<{
   const [editing, setEditing] = React.useState(false);
 
   return (
-    <div className={"flex px-4 gap-2"}>
+    <div className={"flex gap-2"}>
       <Input
         value={name}
         className={"flex-auto h-10 p-2 basis-1/2 border "}
@@ -85,17 +85,17 @@ export const FunctionVariables: React.FC<{
     <div
       className={`${
         className ?? ""
-      } flex-auto flex flex-col pt-2 gap-2 place-content-start flex-nowrap pb-4 bg-backgroundLight w-full h-full`}
+      } flex-auto px-4 flex flex-col pt-2 gap-2 place-content-start flex-nowrap pb-4 bg-backgroundLight w-full h-full`}
     >
-      <div className={"flex px-4 gap-2"}>
+      <div className={"flex gap-2"}>
         <div className={"flex-auto text-textLight basis-1/2 px-0.5 text-xs"}>Name</div>
         <div className={"flex-auto text-textLight basis-1/2 px-0.5 text-xs"}>Value</div>
         <div className={"w-16 flex-shrink-0"}></div>
       </div>
       {array.map(([n, v], index) => {
         return <Var key={index} name={n} value={v} onChange={(nm, vl) => change(index, nm, vl)} />;
       })}
-      <div className="flex justify-start px-4">
+      <div className="flex justify-start">
         <Button
           icon={<CirclePlusIcon className={"w-4 h-4"} />}
           onClick={() => setArray([...array, ["", ""]])}

diff --git a/webapps/console/lib/schema/destinations.tsx b/webapps/console/lib/schema/destinations.tsx
@@ -94,6 +94,7 @@ export type SchemaUI = Record<string, PropertyUI>;
 
 export const FunctionsConnectionOptions = z.object({
   functions: z.array(z.object({ functionId: z.string(), functionOptions: z.any() })).optional(),
+  functionsEnv: z.record(z.string()).optional(),
   debugTill: z.string().optional(),
 });