[OPIK-902] share config building logic (#1168)

* [OPIK-902] share config building logic * [OPIK-902] build URL via constructor --------- Co-authored-by: Yaroslav Boiko <[email protected]>
comet-ml · Jan 30, 2025 · ea154af · ea154af
1 parent 309aa4f
commit ea154af
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/...frontend/src/components/pages-shared/onboarding/ConfigureEnvCode/ConfigureEnvCodeCore.tsx b/...frontend/src/components/pages-shared/onboarding/ConfigureEnvCode/ConfigureEnvCodeCore.tsx
@@ -1,20 +1,17 @@
-import { BASE_API_URL } from "@/api/api";
 import CodeHighlighter from "@/components/shared/CodeHighlighter/CodeHighlighter";
-import { maskAPIKey } from "@/lib/utils";
+import { OPIK_URL_OVERRIDE_CONFIG } from "@/constants/shared";
+import { buildApiKeyConfig, buildWorkspaceNameConfig } from "@/lib/utils";
 import useAppStore from "@/store/AppStore";
 
 const getConfigCode = (
   workspaceName: string,
   apiKey?: string,
   shouldMaskApiKey = false,
 ) => {
-  if (!apiKey)
-    return `os.environ["OPIK_URL_OVERRIDE"] = "${window.location.origin}${BASE_API_URL}"`;
+  if (!apiKey) return OPIK_URL_OVERRIDE_CONFIG;
 
-  const apiKeyConfig = `os.environ["OPIK_API_KEY"] = "${
-    shouldMaskApiKey ? maskAPIKey(apiKey) : apiKey
-  }"`;
-  const workspaceConfig = `os.environ["OPIK_WORKSPACE"] = "${workspaceName}"`;
+  const apiKeyConfig = buildApiKeyConfig(apiKey, shouldMaskApiKey);
+  const workspaceConfig = buildWorkspaceNameConfig(workspaceName);
 
   return `${apiKeyConfig} \n${workspaceConfig}`;
 };

diff --git a/...tend/src/components/pages-shared/onboarding/FrameworkIntegrations/IntegrationTemplate.tsx b/...tend/src/components/pages-shared/onboarding/FrameworkIntegrations/IntegrationTemplate.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import CodeHighlighter from "@/components/shared/CodeHighlighter/CodeHighlighter";
 import useAppStore from "@/store/AppStore";
-import { BASE_API_URL, CODE_EXECUTOR_SERVICE_URL } from "@/api/api";
-import { maskAPIKey } from "@/lib/utils";
+import { CODE_EXECUTOR_SERVICE_URL } from "@/api/api";
+import { buildApiKeyConfig, buildWorkspaceNameConfig } from "@/lib/utils";
 import CodeExecutor from "../CodeExecutor/CodeExecutor";
+import { OPIK_URL_OVERRIDE_CONFIG } from "@/constants/shared";
 
 const CODE_BLOCK_1 = "pip install opik";
 
@@ -22,18 +23,16 @@ const putConfigInCode = ({
   maskApiKey,
 }: PutConfigInCodeArgs): string => {
   if (apiKey) {
+    const apiKeyConfig = buildApiKeyConfig(apiKey, maskApiKey);
+    const workspaceConfig = buildWorkspaceNameConfig(workspaceName);
+
     return code.replace(
       OPIK_API_KEY_TEMPLATE,
-      `os.environ["OPIK_API_KEY"] = "${
-        maskApiKey ? maskAPIKey(apiKey) : apiKey
-      }"\nos.environ["OPIK_WORKSPACE"] = "${workspaceName}"`,
+      `${apiKeyConfig}\n${workspaceConfig}`,
     );
   }
 
-  return code.replace(
-    OPIK_API_KEY_TEMPLATE,
-    `os.environ["OPIK_URL_OVERRIDE"] = "${window.location.origin}${BASE_API_URL}"`,
-  );
+  return code.replace(OPIK_API_KEY_TEMPLATE, OPIK_URL_OVERRIDE_CONFIG);
 };
 
 type IntegrationTemplateProps = {

diff --git a/apps/opik-frontend/src/constants/shared.ts b/apps/opik-frontend/src/constants/shared.ts
@@ -1,3 +1,4 @@
+import { BASE_API_URL } from "@/api/api";
 import {
   CELL_VERTICAL_ALIGNMENT,
   COLUMN_TYPE,
@@ -32,3 +33,8 @@ export const CELL_HORIZONTAL_ALIGNMENT_MAP: Record<COLUMN_TYPE, string> = {
   [COLUMN_TYPE.dictionary]: "justify-start",
   [COLUMN_TYPE.numberDictionary]: "justify-start",
 };
+
+export const OPIK_URL_OVERRIDE_CONFIG = `os.environ["OPIK_URL_OVERRIDE"] = "${new URL(
+  BASE_API_URL,
+  window.location.origin,
+).toString()}"`;
diff --git a/apps/opik-frontend/src/lib/utils.ts b/apps/opik-frontend/src/lib/utils.ts
@@ -119,3 +119,8 @@ export const extractIdFromLocation = (location: string) =>
 
 export const formatNumericData = (value: number, precision = 3) =>
   String(round(value, precision));
+
+export const buildApiKeyConfig = (apiKey: string, masked = false) =>
+  `os.environ["OPIK_API_KEY"] = "${masked ? maskAPIKey(apiKey) : apiKey}"`;
+export const buildWorkspaceNameConfig = (workspaceName: string) =>
+  `os.environ["OPIK_WORKSPACE"] = "${workspaceName}"`;