diff --git a/static/app/types/project.tsx b/static/app/types/project.tsx index f06bb7e427ae07..08c5fd2bc4404e 100644 --- a/static/app/types/project.tsx +++ b/static/app/types/project.tsx @@ -112,6 +112,7 @@ export type ProjectKey = { cdn: string; crons: string; csp: string; + integration: string; minidump: string; otlp_logs: string; otlp_traces: string; diff --git a/static/app/views/settings/project/loaderScript.spec.tsx b/static/app/views/settings/project/loaderScript.spec.tsx index 1b2f5656da8bdb..3a33b9ae8d0708 100644 --- a/static/app/views/settings/project/loaderScript.spec.tsx +++ b/static/app/views/settings/project/loaderScript.spec.tsx @@ -100,6 +100,7 @@ describe('LoaderScript', () => { crons: '', playstation: 'http://dev.getsentry.net:8000/api/1/playstation?sentry_key=188ee45a58094d939428d8585aa6f662', + integration: 'http://dev.getsentry.net:8000/api/1/integration/', otlp_traces: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/traces', otlp_logs: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/logs', }, @@ -242,6 +243,7 @@ describe('LoaderScript', () => { crons: '', playstation: 'http://dev.getsentry.net:8000/api/1/playstation?sentry_key=188ee45a58094d939428d8585aa6f662', + integration: 'http://dev.getsentry.net:8000/api/1/integration/', otlp_traces: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/traces', otlp_logs: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/logs', }, diff --git a/static/app/views/settings/project/projectKeys/projectKeyCredentials.tsx b/static/app/views/settings/project/projectKeys/credentials/index.tsx similarity index 72% rename from static/app/views/settings/project/projectKeys/projectKeyCredentials.tsx rename to static/app/views/settings/project/projectKeys/credentials/index.tsx index f11989a1943e90..c59ca8122c7354 100644 --- a/static/app/views/settings/project/projectKeys/projectKeyCredentials.tsx +++ b/static/app/views/settings/project/projectKeys/credentials/index.tsx @@ -1,7 +1,6 @@ import {Fragment, useMemo} from 'react'; import styled from '@emotion/styled'; -import {CodeBlock} from 'sentry/components/core/code/codeBlock'; import {ExternalLink, Link} from 'sentry/components/core/link'; import {TabList, Tabs} from 'sentry/components/core/tabs'; import FieldGroup from 'sentry/components/forms/fieldGroup'; @@ -11,6 +10,8 @@ import type {ProjectKey} from 'sentry/types/project'; import {decodeScalar} from 'sentry/utils/queryString'; import {useLocation} from 'sentry/utils/useLocation'; import {useNavigate} from 'sentry/utils/useNavigate'; +import {OtlpTab} from 'sentry/views/settings/project/projectKeys/credentials/otlp'; +import {VercelTab} from 'sentry/views/settings/project/projectKeys/credentials/vercel'; type Props = { data: ProjectKey; @@ -25,9 +26,10 @@ type Props = { showSecretKey?: boolean; showSecurityEndpoint?: boolean; showUnreal?: boolean; + showVercelLogDrainEndpoint?: boolean; }; -type TabValue = 'otlp' | 'security' | 'minidump' | 'unreal' | 'credentials'; +type TabValue = 'otlp' | 'security' | 'minidump' | 'unreal' | 'vercel' | 'credentials'; interface TabConfig { key: TabValue; @@ -35,132 +37,6 @@ interface TabConfig { visible: boolean; } -interface OtlpTabProps { - logsEndpoint: string; - publicKey: string; - showOtlpLogs: boolean; - showOtlpTraces: boolean; - tracesEndpoint: string; -} - -function OtlpTab({ - logsEndpoint, - tracesEndpoint, - publicKey, - showOtlpLogs, - showOtlpTraces, -}: OtlpTabProps) { - // Build the OTEL collector config example - const buildCollectorConfig = useMemo(() => { - const lines = ['exporters:', ' otlphttp:']; - - if (showOtlpLogs) { - lines.push(` logs_endpoint: ${logsEndpoint}`); - } - - if (showOtlpTraces) { - lines.push(` traces_endpoint: ${tracesEndpoint}`); - } - - lines.push( - ' headers:', - ` x-sentry-auth: "sentry sentry_key=${publicKey}"`, - ' compression: gzip', - ' encoding: proto', - ' timeout: 30s' - ); - - return lines.join('\n'); - }, [showOtlpLogs, showOtlpTraces, logsEndpoint, tracesEndpoint, publicKey]); - - if (!showOtlpLogs && !showOtlpTraces) { - return undefined; - } - - return ( - - {showOtlpLogs && ( - - - ), - } - )} - inline={false} - flexibleControlStateSize - > - - {logsEndpoint} - - - - - - {`x-sentry-auth=sentry sentry_key=${publicKey}`} - - - - )} - - {showOtlpTraces && ( - - - ), - } - )} - inline={false} - flexibleControlStateSize - > - - {tracesEndpoint} - - - - - - {`x-sentry-auth=sentry sentry_key=${publicKey}`} - - - - )} - - - - {buildCollectorConfig} - - - - ); -} - interface SecurityTabProps { securityEndpoint: string; } @@ -299,6 +175,7 @@ function ProjectKeyCredentials({ showSecretKey = false, showOtlpTraces = false, showOtlpLogs = false, + showVercelLogDrainEndpoint = false, showSecurityEndpoint = true, showUnreal = true, }: Props) { @@ -333,12 +210,18 @@ function ProjectKeyCredentials({ label: t('Unreal Engine'), visible: showUnreal, }, + { + key: 'vercel', + label: t('Vercel Drains'), + visible: showVercelLogDrainEndpoint || showOtlpTraces, + }, ]; return tabs.filter(tab => tab.visible); }, [ showOtlpTraces, showOtlpLogs, showSecurityEndpoint, + showVercelLogDrainEndpoint, showMinidump, showUnreal, showPublicKey, @@ -399,6 +282,16 @@ function ProjectKeyCredentials({ showProjectId={showProjectId} /> ); + case 'vercel': + return ( + + ); default: return undefined; } diff --git a/static/app/views/settings/project/projectKeys/credentials/otlp.tsx b/static/app/views/settings/project/projectKeys/credentials/otlp.tsx new file mode 100644 index 00000000000000..f0dd1e67aafdb2 --- /dev/null +++ b/static/app/views/settings/project/projectKeys/credentials/otlp.tsx @@ -0,0 +1,134 @@ +import {Fragment, useMemo} from 'react'; + +import {CodeBlock} from '@sentry/scraps/code'; + +import {ExternalLink} from 'sentry/components/core/link'; +import FieldGroup from 'sentry/components/forms/fieldGroup'; +import TextCopyInput from 'sentry/components/textCopyInput'; +import {t, tct} from 'sentry/locale'; + +interface OtlpTabProps { + logsEndpoint: string; + publicKey: string; + showOtlpLogs: boolean; + showOtlpTraces: boolean; + tracesEndpoint: string; +} + +export function OtlpTab({ + logsEndpoint, + tracesEndpoint, + publicKey, + showOtlpLogs, + showOtlpTraces, +}: OtlpTabProps) { + // Build the OTEL collector config example + const buildCollectorConfig = useMemo(() => { + const lines = ['exporters:', ' otlphttp:']; + + if (showOtlpLogs) { + lines.push(` logs_endpoint: ${logsEndpoint}`); + } + + if (showOtlpTraces) { + lines.push(` traces_endpoint: ${tracesEndpoint}`); + } + + lines.push( + ' headers:', + ` x-sentry-auth: "sentry sentry_key=${publicKey}"`, + ' compression: gzip', + ' encoding: proto', + ' timeout: 30s' + ); + + return lines.join('\n'); + }, [showOtlpLogs, showOtlpTraces, logsEndpoint, tracesEndpoint, publicKey]); + + if (!showOtlpLogs && !showOtlpTraces) { + return undefined; + } + + return ( + + {showOtlpLogs && ( + + + ), + } + )} + inline={false} + flexibleControlStateSize + > + + {logsEndpoint} + + + + + + {`x-sentry-auth=sentry sentry_key=${publicKey}`} + + + + )} + + {showOtlpTraces && ( + + + ), + } + )} + inline={false} + flexibleControlStateSize + > + + {tracesEndpoint} + + + + + + {`x-sentry-auth=sentry sentry_key=${publicKey}`} + + + + )} + + + + {buildCollectorConfig} + + + + ); +} diff --git a/static/app/views/settings/project/projectKeys/credentials/vercel.tsx b/static/app/views/settings/project/projectKeys/credentials/vercel.tsx new file mode 100644 index 00000000000000..d0d74a4c84aa78 --- /dev/null +++ b/static/app/views/settings/project/projectKeys/credentials/vercel.tsx @@ -0,0 +1,95 @@ +import {Fragment} from 'react'; + +import {ExternalLink} from 'sentry/components/core/link'; +import FieldGroup from 'sentry/components/forms/fieldGroup'; +import TextCopyInput from 'sentry/components/textCopyInput'; +import {t, tct} from 'sentry/locale'; + +interface VercelTabProps { + integrationEndpoint: string; + publicKey: string; + showOtlpTraces: boolean; + showVercelLogDrainEndpoint: boolean; + tracesEndpoint: string; +} + +export function VercelTab({ + showVercelLogDrainEndpoint, + integrationEndpoint, + publicKey, + showOtlpTraces, + tracesEndpoint, +}: VercelTabProps) { + return ( + + {showVercelLogDrainEndpoint && ( + + + ), + } + )} + inline={false} + flexibleControlStateSize + > + + {`${integrationEndpoint}vercel/logs`} + + + + + + {`x-sentry-auth: sentry sentry_key=${publicKey}`} + + + + )} + {showOtlpTraces && ( + + + ), + } + )} + inline={false} + flexibleControlStateSize + > + + {tracesEndpoint} + + + + + + {`x-sentry-auth: sentry sentry_key=${publicKey}`} + + + + )} + + ); +} diff --git a/static/app/views/settings/project/projectKeys/details/keySettings.tsx b/static/app/views/settings/project/projectKeys/details/keySettings.tsx index 95efdd2c4e3c11..e80982a379f8f2 100644 --- a/static/app/views/settings/project/projectKeys/details/keySettings.tsx +++ b/static/app/views/settings/project/projectKeys/details/keySettings.tsx @@ -22,9 +22,9 @@ import type {Organization} from 'sentry/types/organization'; import type {Project, ProjectKey} from 'sentry/types/project'; import useApi from 'sentry/utils/useApi'; import {useOTelFriendlyUI} from 'sentry/views/performance/otlp/useOTelFriendlyUI'; +import ProjectKeyCredentials from 'sentry/views/settings/project/projectKeys/credentials'; import KeyRateLimitsForm from 'sentry/views/settings/project/projectKeys/details/keyRateLimitsForm'; import {LoaderSettings} from 'sentry/views/settings/project/projectKeys/details/loaderSettings'; -import ProjectKeyCredentials from 'sentry/views/settings/project/projectKeys/projectKeyCredentials'; type Props = { data: ProjectKey; @@ -72,6 +72,9 @@ export function KeySettings({ const showOtlpTraces = useOTelFriendlyUI() && organization.features.includes('relay-otlp-traces-endpoint'); const showOtlpLogs = organization.features.includes('relay-otel-logs-endpoint'); + const showVercelLogDrainEndpoint = organization.features.includes( + 'relay-vercel-log-drain-endpoint' + ); return ( @@ -153,6 +156,7 @@ export function KeySettings({ data={data} showOtlpTraces={showOtlpTraces} showOtlpLogs={showOtlpLogs} + showVercelLogDrainEndpoint={showVercelLogDrainEndpoint} showPublicKey showSecretKey showProjectId diff --git a/static/app/views/settings/project/projectKeys/list/index.spec.tsx b/static/app/views/settings/project/projectKeys/list/index.spec.tsx index 0adf8fae44146c..447840d404617c 100644 --- a/static/app/views/settings/project/projectKeys/list/index.spec.tsx +++ b/static/app/views/settings/project/projectKeys/list/index.spec.tsx @@ -176,6 +176,7 @@ describe('ProjectKeys', () => { crons: '', playstation: 'http://dev.getsentry.net:8000/api/1/playstation?sentry_key=188ee45a58094d939428d8585aa6f662', + integration: 'http://dev.getsentry.net:8000/api/1/integration/', otlp_traces: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/traces', otlp_logs: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/logs', }, diff --git a/static/app/views/settings/project/projectKeys/list/keyRow.tsx b/static/app/views/settings/project/projectKeys/list/keyRow.tsx index feb4d98cae310c..6fdf6cca794f68 100644 --- a/static/app/views/settings/project/projectKeys/list/keyRow.tsx +++ b/static/app/views/settings/project/projectKeys/list/keyRow.tsx @@ -16,8 +16,8 @@ import type {Organization} from 'sentry/types/organization'; import type {Project, ProjectKey} from 'sentry/types/project'; import recreateRoute from 'sentry/utils/recreateRoute'; import {useOTelFriendlyUI} from 'sentry/views/performance/otlp/useOTelFriendlyUI'; +import ProjectKeyCredentials from 'sentry/views/settings/project/projectKeys/credentials'; import {LoaderScript} from 'sentry/views/settings/project/projectKeys/list/loaderScript'; -import ProjectKeyCredentials from 'sentry/views/settings/project/projectKeys/projectKeyCredentials'; type Props = { data: ProjectKey; @@ -50,6 +50,9 @@ function KeyRow({ const showOtlpTraces = useOTelFriendlyUI() && organization.features.includes('relay-otlp-traces-endpoint'); const showOtlpLogs = organization.features.includes('relay-otel-logs-endpoint'); + const showVercelLogDrainEndpoint = organization.features.includes( + 'relay-vercel-log-drain-endpoint' + ); return ( @@ -104,6 +107,7 @@ function KeyRow({ data={data} showOtlpTraces={showOtlpTraces} showOtlpLogs={showOtlpLogs} + showVercelLogDrainEndpoint={showVercelLogDrainEndpoint} showMinidump={!isJsPlatform} showUnreal={!isJsPlatform} showSecurityEndpoint={!isJsPlatform} diff --git a/tests/js/fixtures/projectKeys.ts b/tests/js/fixtures/projectKeys.ts index 24038873bffca2..4197606b62b781 100644 --- a/tests/js/fixtures/projectKeys.ts +++ b/tests/js/fixtures/projectKeys.ts @@ -17,6 +17,7 @@ export function ProjectKeysFixture(params: ProjectKey[] = []): ProjectKey[] { 'http://dev.getsentry.net:8000/api/1/security-report/?sentry_key=188ee45a58094d939428d8585aa6f661', playstation: 'http://dev.getsentry.net:8000/api/1/playstation/?sentry_key=188ee45a58094d939428d8585aa6f661', + integration: 'http://dev.getsentry.net:8000/api/1/integration/', otlp_traces: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/traces', otlp_logs: 'http://dev.getsentry.net:8000/api/1/integration/otlp/v1/logs', }, diff --git a/tests/js/sentry-test/onboarding/renderWithOnboardingLayout.tsx b/tests/js/sentry-test/onboarding/renderWithOnboardingLayout.tsx index 9b18e3b71eee12..6629e1e374b7a3 100644 --- a/tests/js/sentry-test/onboarding/renderWithOnboardingLayout.tsx +++ b/tests/js/sentry-test/onboarding/renderWithOnboardingLayout.tsx @@ -77,6 +77,7 @@ export function renderWithOnboardingLayout< minidump: 'test-minidump', unreal: 'test-unreal', playstation: 'test-playstation', + integration: 'test-integration', otlp_traces: 'test-otlp_traces', otlp_logs: 'test-otlp_logs', }}