Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(auth): UI guidance on how to set api keys for tracing and experi… #4578

Merged
merged 5 commits into from
Sep 11, 2024
Merged

feat(auth): UI guidance on how to set api keys for tracing and experi… #4578

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0a55b81
feat(auth): UI guidance on how to set api keys for tracing and experi…
mikeldking Sep 11, 2024
92554f8
remove hook
mikeldking Sep 11, 2024
3fac872
Update app/src/components/project/PythonProjectGuide.tsx
mikeldking Sep 11, 2024
83c7e40
Update app/src/components/project/TypeScriptProjectGuide.tsx
mikeldking Sep 11, 2024
19bd9b0
Update app/src/pages/dataset/RunExperimentButton.tsx
mikeldking Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 43 additions & 16 deletions app/src/components/project/PythonProjectGuide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import { CodeWrap } from "@phoenix/components/code/CodeWrap";
import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
import { BASE_URL } from "@phoenix/config";

import { IsAdmin } from "../auth";

import { HOSTED_PHOENIX_URL, IS_HOSTED_DEPLOYMENT } from "./hosting";
import { PythonIntegrations } from "./Integrations";

const PHOENIX_OTEL_DOC_LINK =
Expand All @@ -27,13 +30,20 @@ const PHOENIX_ENVIRONMENT_VARIABLES_LINK =
const INSTALL_PHOENIX_OTEL_PYTHON = `pip install arize-phoenix-otel`;
const INSTALL_OPENAI_INSTRUMENTATION_PYTHON = `pip install openinference-instrumentation-openai openai`;

const HOSTED_PHOENIX_URL = "https://app.phoenix.arize.com";
const LLAMATRACE_URL = "https://llamatrace.com";

const HOSTED_BASE_URLS = [HOSTED_PHOENIX_URL, LLAMATRACE_URL];

// Environment variables
const HOSTED_PHOENIX_ENVIRONMENT_VARIABLES_PYTHON = `PHOENIX_CLIENT_HEADERS='api_key=<your-api-key>'\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`;
function getEnvironmentVariablesPython({
isAuthEnabled,
isHosted,
}: {
isAuthEnabled: boolean;
isHosted: boolean;
}): string {
if (isHosted) {
return `PHOENIX_CLIENT_HEADERS='api_key=<your-api-key>'\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`;
} else if (isAuthEnabled) {
return `PHOENIX_API_KEY='<your-api-key>'\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`;
}
return `PHOENIX_COLLECTOR_ENDPOINT='${BASE_URL}'`;
}

const INSTRUMENT_OPENAI_PYTHON = `from openinference.instrumentation.openai import OpenAIInstrumentor

Expand Down Expand Up @@ -76,7 +86,12 @@ type PythonProjectGuideProps = {
projectName?: string;
};
export function PythonProjectGuide(props: PythonProjectGuideProps) {
const isHosted = HOSTED_BASE_URLS.includes(BASE_URL);
const isHosted = IS_HOSTED_DEPLOYMENT;
const isAuthEnabled = window.Config.authenticationEnabled;
const environmentVariablesPython = getEnvironmentVariablesPython({
isAuthEnabled,
isHosted,
});

const projectName = props.projectName || "your-next-llm-project";
return (
Expand Down Expand Up @@ -104,19 +119,31 @@ export function PythonProjectGuide(props: PythonProjectGuideProps) {
<View paddingBottom="size-100">
<Text>
<b>arize-phoenix-otel</b> automatically picks up your configuration
from environment variables (e.x. <b>PHOENIX_CLIENT_HEADERS</b> for
authentication). See{" "}
from
<ExternalLink href={PHOENIX_ENVIRONMENT_VARIABLES_LINK}>
environment variables
</ExternalLink>
</Text>
</View>
{isHosted ? (
<CodeWrap>
<PythonBlockWithCopy
value={HOSTED_PHOENIX_ENVIRONMENT_VARIABLES_PYTHON}
/>
</CodeWrap>
<CodeWrap>
<PythonBlockWithCopy value={environmentVariablesPython} />
</CodeWrap>
{isAuthEnabled ? (
<View paddingBottom="size-100" paddingTop="size-100">
<IsAdmin
fallback={
<Text>
Personal API keys can be created and managed on your{""}
mikeldking marked this conversation as resolved.
Show resolved Hide resolved
<ExternalLink href="/profile">Profile</ExternalLink>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these aren't external links are they? not sure if it matters here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's an external link from the perspective that it opens a new tab rather than navigating within the SPA

</Text>
}
>
<Text>
System API keys can be created and managed in{" "}
<ExternalLink href="/settings">Settings</ExternalLink>
</Text>
</IsAdmin>
</View>
) : null}
<View paddingTop="size-200" paddingBottom="size-100">
<Heading level={2} weight="heavy">
Expand Down
33 changes: 28 additions & 5 deletions app/src/components/project/TypeScriptProjectGuide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import React from "react";
import { Heading, Text, View } from "@arizeai/components";

import { ExternalLink } from "@phoenix/components";
import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth";
import { CodeWrap } from "@phoenix/components/code/CodeWrap";
import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";

import { TypeScriptBlockWithCopy } from "../code/TypeScriptBlockWithCopy";

import { IS_HOSTED_DEPLOYMENT } from "./hosting";
import {
TypeScriptIntegrations,
TypeScriptPlatformIntegrations,
Expand All @@ -33,8 +35,8 @@ resource: new Resource({
};

export function TypeScriptProjectGuide(props: PythonProjectGuideProps) {
const isHosted = IS_HOSTED_DEPLOYMENT;
const existingProjectName = props.projectName;

const projectName = existingProjectName || "your-next-llm-project";
return (
<div>
Expand Down Expand Up @@ -62,22 +64,43 @@ export function TypeScriptProjectGuide(props: PythonProjectGuideProps) {
</View>
<View paddingBottom="size-100">
<Text>
If authentication is enabled, set the{" "}
<b>OTEL_EXPORTER_OTLP_TRACES_HEADERS</b>. See{" "}
Set the authentication headers in the environment variable{" "}
<b>OTEL_EXPORTER_OTLP_HEADERS</b>. See{" "}
<ExternalLink
href={
"https://opentelemetry.io/docs/languages/sdk-configuration/otlp-exporter/#otel_exporter_otlp_traces_headers"
}
>
environment variable
environment variables
</ExternalLink>
</Text>
</View>
<CodeWrap>
<PythonBlockWithCopy
value={`OTEL_EXPORTER_OTLP_TRACES_HEADERS='<auth-headers>'`}
value={
isHosted
? `OTEL_EXPORTER_OTLP_HEADERS='<auth-headers>'`
: `OTEL_EXPORTER_OTLP_HEADERS='authorization=Bearer%20<your-api-key>'`
}
/>
</CodeWrap>
<IsAuthenticated>
<View paddingBottom="size-100" paddingTop="size-100">
<IsAdmin
fallback={
<Text>
Your personal API keys can be created and managed on your{""}
mikeldking marked this conversation as resolved.
Show resolved Hide resolved
<ExternalLink href="/profile">Profile</ExternalLink>
</Text>
}
>
<Text>
System API keys can be created and managed in{" "}
<ExternalLink href="/settings">Settings</ExternalLink>
</Text>
</IsAdmin>
</View>
</IsAuthenticated>
<View paddingTop="size-200" paddingBottom="size-100">
<Heading level={2} weight="heavy">
Set the Project Name
Expand Down
8 changes: 8 additions & 0 deletions app/src/components/project/hosting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { BASE_URL } from "@phoenix/config";

export const HOSTED_PHOENIX_URL = "https://app.phoenix.arize.com";
export const LLAMATRACE_URL = "https://llamatrace.com";

export const HOSTED_BASE_URLS = [HOSTED_PHOENIX_URL, LLAMATRACE_URL];

export const IS_HOSTED_DEPLOYMENT = HOSTED_BASE_URLS.includes(BASE_URL);
39 changes: 34 additions & 5 deletions app/src/pages/dataset/RunExperimentButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,27 @@ import {
View,
} from "@arizeai/components";

import { ExternalLink } from "@phoenix/components";
import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth";
import { CodeWrap } from "@phoenix/components/code/CodeWrap";
import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
import { useDatasetContext } from "@phoenix/contexts/DatasetContext";

const INSTALL_PHOENIX_PYTHON = `pip install arize-phoenix>=${window.Config.platformVersion}`;
// TODO: plumb though session URL from the backend
const SET_BASE_URL_PYTHON =
`import os\n` +
`# Set the phoenix collector endpoint. Commonly http://localhost:6060 \n` +
`os.environ["PHOENIX_COLLECTOR_ENDPOINT"] = "<your-phoenix-url>"`;
function getSetBaseUrlPython({ isAuthEnabled }: { isAuthEnabled: boolean }) {
let setBaseURLPython =
`import os\n` +
`# Set the phoenix collector endpoint. Commonly http://localhost:6060 \n` +
`os.environ["PHOENIX_COLLECTOR_ENDPOINT"] = "<your-phoenix-url>"`;
if (isAuthEnabled) {
setBaseURLPython +=
`\n` +
`# Configure access\n` +
`os.environ["PHOENIX_API_KEY"] = "<your-api-key>"`;
}
return setBaseURLPython;
}
const TASK_PYTHON =
`from phoenix.experiments.types import Example\n` +
`# Define your task\n` +
Expand Down Expand Up @@ -75,6 +86,7 @@ export function RunExperimentButton() {
function RunExperimentExample() {
const datasetName = useDatasetContext((state) => state.datasetName);
const version = useDatasetContext((state) => state.latestVersion);
const isAuthEnabled = window.Config.authenticationEnabled;

const getDatasetPythonCode = useMemo(() => {
return (
Expand All @@ -98,8 +110,25 @@ function RunExperimentExample() {
<Text>Point to a running instance of Phoenix</Text>
</View>
<CodeWrap>
<PythonBlockWithCopy value={SET_BASE_URL_PYTHON} />
<PythonBlockWithCopy value={getSetBaseUrlPython({ isAuthEnabled })} />
</CodeWrap>
<IsAuthenticated>
<View paddingBottom="size-100" paddingTop="size-100">
<IsAdmin
fallback={
<Text>
Your personal API keys can be created and managed on your{""}
mikeldking marked this conversation as resolved.
Show resolved Hide resolved
<ExternalLink href="/profile">Profile</ExternalLink>
</Text>
}
>
<Text>
System API keys can be created and managed in{" "}
<ExternalLink href="/settings">Settings</ExternalLink>
</Text>
</IsAdmin>
</View>
</IsAuthenticated>
<View paddingTop="size-100" paddingBottom="size-100">
<Text>Pull down this dataset</Text>
</View>
Expand Down
Loading