[OPIK-539]: add a config tab and proxy; (#921)

* [OPIK-516]: add a configuration page and a proxy support; * [OPIK-516]: eslint issues; * [OPIK-516]: update the name of a variable; --------- Co-authored-by: Sasha <[email protected]>
comet-ml · Dec 18, 2024 · def0955 · def0955
1 parent 3f42cb6
commit def0955
Show file tree

Hide file tree

Showing 43 changed files with 1,535 additions and 684 deletions.
diff --git a/apps/opik-frontend/e2e/fixtures/pages.ts b/apps/opik-frontend/e2e/fixtures/pages.ts
@@ -1,7 +1,7 @@
 import {
   DatasetItemsPage,
   DatasetsPage,
-  FeedbackDefinitionsPage,
+  FeedbackDefinitionsTab,
   ProjectsPage,
   TracesPage,
 } from "@e2e/pages";
@@ -11,13 +11,15 @@ import {
   PlaywrightWorkerArgs,
   PlaywrightWorkerOptions,
 } from "@playwright/test";
+import { ConfigurationPage } from "@e2e/pages/ConfigurationPage/ConfigurationPage";
 
 export type PagesFixtures = {
   datasetsPage: DatasetsPage;
   datasetItemsPage: DatasetItemsPage;
-  feedbackDefinitionsPage: FeedbackDefinitionsPage;
   projectsPage: ProjectsPage;
   tracesPage: TracesPage;
+  configurationPage: ConfigurationPage;
+  feedbackDefinitionsTab: FeedbackDefinitionsTab;
 };
 
 export const pagesFixtures: Fixtures<
@@ -32,13 +34,20 @@ export const pagesFixtures: Fixtures<
   datasetItemsPage: async ({ page }, use) => {
     await use(new DatasetItemsPage(page));
   },
-  feedbackDefinitionsPage: async ({ page }, use) => {
-    await use(new FeedbackDefinitionsPage(page));
-  },
+
   projectsPage: async ({ page }, use) => {
     await use(new ProjectsPage(page));
   },
+
   tracesPage: async ({ page }, use) => {
     await use(new TracesPage(page));
   },
+
+  configurationPage: async ({ page }, use) => {
+    await use(new ConfigurationPage(page));
+  },
+
+  feedbackDefinitionsTab: async ({ page }, use) => {
+    await use(new FeedbackDefinitionsTab(page));
+  },
 };
diff --git a/apps/opik-frontend/e2e/pages/ConfigurationPage/ConfigurationPage.ts b/apps/opik-frontend/e2e/pages/ConfigurationPage/ConfigurationPage.ts
@@ -0,0 +1,9 @@
+import { Page } from "@playwright/test";
+
+export class ConfigurationPage {
+  constructor(readonly page: Page) {}
+
+  async goto() {
+    await this.page.goto(`/default/configuration`);
+  }
+}
diff --git a/...tend/e2e/pages/FeedbackDefinitionsPage.ts → ...nfigurationPage/FeedbackDefinitionsTab.ts b/...tend/e2e/pages/FeedbackDefinitionsPage.ts → ...nfigurationPage/FeedbackDefinitionsTab.ts
@@ -6,25 +6,23 @@ import {
   FeedbackDefinitionData,
   FeedbackDefinitionNumericalDetails,
 } from "@e2e/entities";
-import { Search } from "./components/Search";
-import { Table } from "./components/Table";
+import { Search } from "../components/Search";
+import { Table } from "../components/Table";
 import { Columns } from "@e2e/pages/components/Columns";
 
-export class FeedbackDefinitionsPage {
-  readonly title: Locator;
+export class FeedbackDefinitionsTab {
   readonly search: Search;
   readonly table: Table;
   readonly columns: Columns;
 
   constructor(readonly page: Page) {
-    this.title = page.getByRole("heading", { name: "Feedback definitions" });
     this.search = new Search(page);
     this.table = new Table(page);
     this.columns = new Columns(page);
   }
 
   async goto() {
-    await this.page.goto("/default/feedback-definitions");
+    await this.page.goto("/default/configuration?tab=feedback-definitions");
   }
 
   async fillCategoricalData(details: FeedbackDefinitionCategoricalDetails) {
@@ -121,7 +119,7 @@ export class FeedbackDefinitionsPage {
       .getRowLocatorByCellText(data.name)
       .locator("[data-cell-id$='_values']");
     const details = data.details as FeedbackDefinitionNumericalDetails;
-    await expect(cell).toHaveText(`Min${details.min}Max${details.max}`);
+    await expect(cell).toHaveText(`Min: ${details.min}, Max: ${details.max}`);
   }
 
   async checkCategoricalValueColumn(data: FeedbackDefinitionData) {
@@ -130,7 +128,7 @@ export class FeedbackDefinitionsPage {
       .locator("[data-cell-id$='_values']");
     const details = data.details as FeedbackDefinitionCategoricalDetails;
     await expect(cell).toHaveText(
-      Object.keys(details.categories).sort().join(""),
+      Object.keys(details.categories).sort().join(", "),
     );
   }
 

diff --git a/apps/opik-frontend/e2e/pages/index.ts b/apps/opik-frontend/e2e/pages/index.ts
@@ -1,5 +1,6 @@
 export * from "./DatasetsPage";
 export * from "./DatasetItemsPage";
-export * from "./FeedbackDefinitionsPage";
+export * from "./ConfigurationPage/ConfigurationPage";
+export * from "./ConfigurationPage/FeedbackDefinitionsTab";
 export * from "./ProjectsPage";
 export * from "./TracesPage";
diff --git a/...k-definitions/feedback-definition.spec.ts → ...configuration/feedback-definition.spec.ts b/...k-definitions/feedback-definition.spec.ts → ...configuration/feedback-definition.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@e2e/fixtures";
+import { test } from "@e2e/fixtures";
 import {
   CATEGORICAL_FEEDBACK_DEFINITION,
   CATEGORICAL_FEEDBACK_DEFINITION_MODIFIED,
@@ -9,108 +9,102 @@ import {
 test.describe("Feedback definitions page", () => {
   test("Check search", async ({
     categoricalFeedbackDefinition,
-    feedbackDefinitionsPage,
+    feedbackDefinitionsTab,
     numericalFeedbackDefinition,
   }) => {
-    await feedbackDefinitionsPage.goto();
+    await feedbackDefinitionsTab.goto();
+    await feedbackDefinitionsTab.table.hasRowCount(2);
 
-    await expect(feedbackDefinitionsPage.title).toBeVisible();
-
-    // search and validate feedback definitions
-    await feedbackDefinitionsPage.table.hasRowCount(2);
-
-    await feedbackDefinitionsPage.search.search(
+    await feedbackDefinitionsTab.search.search(
       categoricalFeedbackDefinition.name,
     );
-    await feedbackDefinitionsPage.table.hasRowCount(1);
+    await feedbackDefinitionsTab.table.hasRowCount(1);
 
-    await feedbackDefinitionsPage.search.search(
+    await feedbackDefinitionsTab.search.search(
       numericalFeedbackDefinition.name,
     );
-    await feedbackDefinitionsPage.table.hasRowCount(1);
+    await feedbackDefinitionsTab.table.hasRowCount(1);
 
-    await feedbackDefinitionsPage.search.search("invalid_search_string");
-    await feedbackDefinitionsPage.table.hasNoData();
+    await feedbackDefinitionsTab.search.search("invalid_search_string");
+    await feedbackDefinitionsTab.table.hasNoData();
   });
 
-  test("Check adding/deleting of items", async ({
-    feedbackDefinitionsPage,
-  }) => {
-    await feedbackDefinitionsPage.goto();
+  test("Check adding/deleting of items", async ({ feedbackDefinitionsTab }) => {
+    await feedbackDefinitionsTab.goto();
 
     // create and validate categorical feedback definition
-    await feedbackDefinitionsPage.addFeedbackDefinition(
+    await feedbackDefinitionsTab.addFeedbackDefinition(
       CATEGORICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.table.checkIsExist(
+    await feedbackDefinitionsTab.table.checkIsExist(
       CATEGORICAL_FEEDBACK_DEFINITION.name,
     );
 
     // create and validate numerical feedback definition
-    await feedbackDefinitionsPage.addFeedbackDefinition(
+    await feedbackDefinitionsTab.addFeedbackDefinition(
       NUMERICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.table.checkIsExist(
+    await feedbackDefinitionsTab.table.checkIsExist(
       NUMERICAL_FEEDBACK_DEFINITION.name,
     );
 
     // delete and validate feedback definitions
-    await feedbackDefinitionsPage.deleteFeedbackDefinition(
+    await feedbackDefinitionsTab.deleteFeedbackDefinition(
       CATEGORICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.table.checkIsNotExist(
+    await feedbackDefinitionsTab.table.checkIsNotExist(
       CATEGORICAL_FEEDBACK_DEFINITION.name,
     );
 
-    await feedbackDefinitionsPage.deleteFeedbackDefinition(
+    await feedbackDefinitionsTab.deleteFeedbackDefinition(
       NUMERICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.table.checkIsNotExist(
+    await feedbackDefinitionsTab.table.checkIsNotExist(
       NUMERICAL_FEEDBACK_DEFINITION.name,
     );
   });
 
   test("Check editing of items", async ({
     categoricalFeedbackDefinition,
-    feedbackDefinitionsPage,
+    feedbackDefinitionsTab,
     numericalFeedbackDefinition,
   }) => {
-    await feedbackDefinitionsPage.goto();
+    await feedbackDefinitionsTab.goto();
 
     // modify and validate numeric to categorical feedback definition
-    await feedbackDefinitionsPage.editFeedbackDefinition(
+    await feedbackDefinitionsTab.editFeedbackDefinition(
       numericalFeedbackDefinition.name,
       CATEGORICAL_FEEDBACK_DEFINITION_MODIFIED,
     );
 
-    await feedbackDefinitionsPage.table.checkIsExist(
+    await feedbackDefinitionsTab.table.checkIsExist(
       CATEGORICAL_FEEDBACK_DEFINITION_MODIFIED.name,
     );
 
     // modify and validate categorical to numeric feedback definition
-    await feedbackDefinitionsPage.editFeedbackDefinition(
+    await feedbackDefinitionsTab.editFeedbackDefinition(
       categoricalFeedbackDefinition.name,
       NUMERICAL_FEEDBACK_DEFINITION_MODIFIED,
     );
 
-    await feedbackDefinitionsPage.table.checkIsExist(
+    await feedbackDefinitionsTab.table.checkIsExist(
       NUMERICAL_FEEDBACK_DEFINITION_MODIFIED.name,
     );
   });
 
   test("Check values column", async ({
     categoricalFeedbackDefinition,
-    feedbackDefinitionsPage,
+    feedbackDefinitionsTab,
     numericalFeedbackDefinition,
   }) => {
-    await feedbackDefinitionsPage.goto();
+    await feedbackDefinitionsTab.goto();
 
-    await feedbackDefinitionsPage.columns.selectAll();
+    await feedbackDefinitionsTab.columns.selectAll();
 
-    await feedbackDefinitionsPage.checkNumericValueColumn(
+    await feedbackDefinitionsTab.checkNumericValueColumn(
       numericalFeedbackDefinition,
     );
-    await feedbackDefinitionsPage.checkCategoricalValueColumn(
+    await feedbackDefinitionsTab.checkCategoricalValueColumn(
       categoricalFeedbackDefinition,
     );
   });

diff --git a/apps/opik-frontend/src/api/api.ts b/apps/opik-frontend/src/api/api.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions } from "@tanstack/react-query";
 import axios from "axios";
 
-const BASE_API_URL = import.meta.env.VITE_BASE_API_URL || "/api";
+export const BASE_API_URL = import.meta.env.VITE_BASE_API_URL || "/api";
 const axiosInstance = axios.create({
   baseURL: BASE_API_URL,
 });
@@ -16,11 +16,13 @@ export const FEEDBACK_DEFINITIONS_REST_ENDPOINT =
 export const TRACES_REST_ENDPOINT = "/v1/private/traces/";
 export const SPANS_REST_ENDPOINT = "/v1/private/spans/";
 export const PROMPTS_REST_ENDPOINT = "/v1/private/prompts/";
+export const PROVIDER_KEYS_REST_ENDPOINT = "/v1/private/llm-provider-key/";
 
 export const COMPARE_EXPERIMENTS_KEY = "compare-experiments";
 export const SPANS_KEY = "spans";
 export const TRACES_KEY = "traces";
 export const TRACE_KEY = "trace";
+export const PROVIDERS_KEYS_KEY = "providerKeys";
 
 // stats for feedback
 export const STATS_COMET_ENDPOINT = "https://stats.comet.com/notify/event/";