From d5bceb8db886afd4a22a872b0b5d0b8efea030d0 Mon Sep 17 00:00:00 2001 From: Jordi Enric <37541088+jordienr@users.noreply.github.com> Date: Thu, 25 Jun 2026 17:46:23 +0200 Subject: [PATCH] feat(studio): route Logs Explorer to OTEL endpoint via flag DEBUG-145 (#47265) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem The Logs Explorer (SQL editor) queries the BigQuery-backed `logs.all` endpoint and exposed a manual "OTEL endpoint" toggle behind a separate flag. ## Fix - Drive the explorer endpoint purely from the `otelLegacyLogs` flag: on -> `logs.all.otel`, off -> `logs.all`. - Remove the manual toggle from `LogsQueryPanel` (and its `showChToggleInLogExplorer` gate). ## Dependencies None. Standalone, behind `otelLegacyLogs` (off by default), so no user-facing change. Part of DEBUG-145 (split from #47087). Note: PR for the deterministic BigQuery->ClickHouse rewrite + banner builds on top of this one. ## How to test - Enable `otelLegacyLogs`, open `/project/[ref]/logs/explorer`, confirm queries hit the OTEL endpoint and run. Toggle off, confirm BigQuery path unchanged. Confirm the old manual OTEL switch is gone. ## Summary by CodeRabbit * **Bug Fixes** * Simplified the Logs Explorer experience by removing the OTEL endpoint toggle from query settings. * OTEL behavior now follows the configured feature flag, driving the editor’s initial placeholder/query shape. * On first load, the editor automatically switches to the OTEL placeholder only if the content is still the untouched default (not after user navigation or custom edits). --------- Co-authored-by: Claude Opus 4.8 (1M context) --- .../Settings/Logs/LogsQueryPanel.tsx | 33 ------------------ .../project/[ref]/logs/explorer/index.tsx | 34 +++++++++++++------ 2 files changed, 23 insertions(+), 44 deletions(-) diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx index 7afed9f5cc4..a6b583f1587 100644 --- a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx @@ -1,4 +1,3 @@ -import { useFlag } from 'common' import { BookOpen, Check, ChevronDown, ChevronsUpDown, Copy, ExternalLink, X } from 'lucide-react' import Link from 'next/link' import { ReactNode, useEffect, useState } from 'react' @@ -18,12 +17,10 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, - Label, Popover, PopoverContent, PopoverTrigger, SidePanel, - Switch, Tooltip, TooltipContent, TooltipTrigger, @@ -48,8 +45,6 @@ export interface LogsQueryPanelProps { onSelectTemplate: (template: LogTemplate) => void onSelectSource: (source: string) => void onDateChange: (value: DatePickerValue) => void - useOtel?: boolean - onUseOtelChange?: (value: boolean) => void } function DropdownMenuItemContent({ name, desc }: { name: ReactNode; desc?: string }) { @@ -68,13 +63,9 @@ const LogsQueryPanel = ({ onSelectTemplate, onSelectSource, onDateChange, - useOtel = false, - onUseOtelChange, }: LogsQueryPanelProps) => { const [showReference, setShowReference] = useState(false) const { logsTemplates } = useIsFeatureEnabled(['logs:templates']) - const showChToggleInLogExplorer = useFlag('showChToggleInLogExplorer') - const otelToggleEnabled = !!showChToggleInLogExplorer && !!onUseOtelChange const { projectAuthAll: authEnabled, @@ -167,30 +158,6 @@ const LogsQueryPanel = ({ helpers={EXPLORER_DATEPICKER_HELPERS} /> - {otelToggleEnabled && ( - - -
- onUseOtelChange?.(checked)} - /> - -
- - - Run this query against the new ClickHouse-backed OTEL endpoint instead of - BigQuery. Use to validate ClickHouse SQL before relying on it. - - - )} -
{ useEditorHints() const monaco = useMonaco() @@ -90,10 +93,14 @@ export const LogsExplorerPage: NextPageWithLayout = () => { }, [timestampStart, timestampEnd, defaultHelper]) const [datePickerValue, setDatePickerValue] = useState(initialDatePickerValue) + const useOtelEndpoint = useFlag('otelLegacyLogs') + const { logsDefaultQuery } = useCustomContent(['logs:default_query']) - const PLACEHOLDER_QUERY = IS_PLATFORM - ? (logsDefaultQuery ?? PLATFORM_PLACEHOLDER_QUERY) - : LOCAL_PLACEHOLDER_QUERY + const PLACEHOLDER_QUERY = useOtelEndpoint + ? OTEL_PLACEHOLDER_QUERY + : IS_PLATFORM + ? (logsDefaultQuery ?? PLATFORM_PLACEHOLDER_QUERY) + : LOCAL_PLACEHOLDER_QUERY const [editorValue, setEditorValue] = useState(PLACEHOLDER_QUERY) const [saveModalOpen, setSaveModalOpen] = useState(false) @@ -105,11 +112,6 @@ export const LogsExplorerPage: NextPageWithLayout = () => { [] ) - const [useOtelEndpoint, setUseOtelEndpoint] = useLocalStorage( - `logs-explorer-use-otel-endpoint-${projectRef}`, - false - ) - const { getEntitlementNumericValue } = useCheckEntitlements('log.retention_days') const entitledToAuditLogDays = getEntitlementNumericValue() @@ -332,6 +334,18 @@ export const LogsExplorerPage: NextPageWithLayout = () => { } }, [q, search, setSearch]) + useEffect(() => { + if (!useOtelEndpoint || q || search || queryId) return + if (editorValue === OTEL_PLACEHOLDER_QUERY) return + const isUntouchedDefault = + editorValue === LOCAL_PLACEHOLDER_QUERY || + editorValue === PLATFORM_PLACEHOLDER_QUERY || + editorValue === logsDefaultQuery + if (!isUntouchedDefault) return + setEditorValue(OTEL_PLACEHOLDER_QUERY) + editorRef.current?.setValue(OTEL_PLACEHOLDER_QUERY) + }, [useOtelEndpoint, q, search, queryId, editorValue, logsDefaultQuery]) + useEffect(() => { // prevents overwriting when the user selects a helper. // without this, if the user selects "last 3 days" it would overwrite it with "last hour" @@ -386,8 +400,6 @@ export const LogsExplorerPage: NextPageWithLayout = () => { templates={allTemplates.filter((template) => template.mode === 'custom')} onSelectTemplate={onSelectTemplate} warnings={warnings} - useOtel={useOtelEndpoint} - onUseOtelChange={setUseOtelEndpoint} />