Add flag for logs explorer showing metadata (#39171)

* Add flag for logs explorer showing metadata

* Simplify

* Flip

* Check logs metadata in useSingleLog

* Update unified logs

* remove comment

* Shortcircuit earlier on logsMetadata boolean

---------

Co-authored-by: Matt Linkous <matthew.linkous@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>

apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx

@@ -15,7 +15,7 @@ import {
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import DefaultPreviewSelectionRenderer from './LogSelectionRenderers/DefaultPreviewSelectionRenderer'
 import type { LogData, QueryType } from './Logs.types'
-import { jwtAPIKey, apiKey, role as extractRole } from './Logs.utils'
+import { apiKey, role as extractRole, jwtAPIKey } from './Logs.utils'
 
 export interface LogSelectionProps {
   log?: LogData
@@ -97,6 +97,7 @@ const LogSelection = ({ log, onClose, queryType, isLoading, error }: LogSelectio
             <TabsTrigger_Shadcn_ disabled={!log} className="px-3" value="raw">
               Raw
             </TabsTrigger_Shadcn_>
+
             <div className="*:px-1.5 *:text-foreground-lighter ml-auto flex gap-1 absolute right-2 top-2">
               <ButtonTooltip
                 disabled={!log || isLoading}

apps/studio/components/interfaces/Settings/Logs/LogTable.tsx

@@ -444,6 +444,7 @@ const LogTable = ({
               document.body
             )}
         </ResizablePanel>
+
         <ResizableHandle withHandle />
 
         {selectionOpen && (

apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { useParams } from 'common'
 import { useDataTable } from 'components/ui/DataTable/providers/DataTableProvider'
 import { ServiceFlowType, useUnifiedLogInspectionQuery } from 'data/logs'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import {
   CodeBlock,
   ResizableHandle,
@@ -43,6 +44,8 @@ export function ServiceFlowPanel({
   const { ref: projectRef } = useParams()
   const [activeTab, setActiveTab] = useState('service-flow')
 
+  const { logsMetadata } = useIsFeatureEnabled(['logs:metadata'])
+
   const logType = selectedRow?.log_type
   const serviceFlowType: ServiceFlowType | undefined =
     logType === 'edge function' ? 'edge-function' : (logType as ServiceFlowType)
@@ -69,6 +72,14 @@ export function ServiceFlowPanel({
   const jsonData =
     shouldShowServiceFlow && serviceFlowData?.result?.[0] ? serviceFlowData.result[0] : selectedRow
 
+  const formattedJsonData =
+    !logsMetadata && 'raw_log_data' in jsonData && 'metadata' in jsonData.raw_log_data
+      ? {
+          ...jsonData,
+          raw_log_data: { ...jsonData.raw_log_data, metadata: undefined },
+        }
+      : jsonData
+
   if (selectedRowKey) {
     return (
       <>
@@ -218,7 +229,7 @@ export function ServiceFlowPanel({
                     language="json"
                     className="max-h-[800px] overflow-auto border-none rounded-none [&_pre]:!leading-tight [&_code]:!leading-tight"
                   >
-                    {JSON.stringify(jsonData, null, 2)}
+                    {JSON.stringify(formattedJsonData, null, 2)}
                   </CodeBlock>
                 </TabsContent>
               </Tabs>

apps/studio/hooks/analytics/useLogsQuery.tsx

@@ -16,6 +16,7 @@ import {
   checkForWithClause,
 } from 'components/interfaces/Settings/Logs/Logs.utils'
 import { get } from 'data/fetchers'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { DOCS_URL } from 'lib/constants'
 
 export interface LogsQueryHook {
@@ -46,6 +47,8 @@ const useLogsQuery = (
       : defaultHelper.calcTo(),
   })
 
+  const { logsMetadata } = useIsFeatureEnabled(['logs:metadata'])
+
   useEffect(() => {
     setParams((prev) => ({
       ...prev,
@@ -113,10 +116,19 @@ const useLogsQuery = (
     setParams((prev) => ({ ...prev, sql: newQuery }))
   }
 
+  const logData = (data?.result ?? []).map((x) => {
+    if (logsMetadata) {
+      return x
+    } else {
+      const { metadata, ...log } = x
+      return log
+    }
+  })
+
   return {
     params,
     isLoading: (_enabled && isLoading) || isRefetching,
-    logData: data?.result ?? [],
+    logData: logData,
     error,
     changeQuery,
     runQuery: () => refetch(),

apps/studio/hooks/analytics/useSingleLog.tsx

@@ -8,6 +8,7 @@ import type {
 } from 'components/interfaces/Settings/Logs/Logs.types'
 import { genSingleLogQuery } from 'components/interfaces/Settings/Logs/Logs.utils'
 import { get } from 'data/fetchers'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 
 interface SingleLogHook {
   data: LogData | undefined
@@ -35,6 +36,8 @@ function useSingleLog({
 
   const enabled = Boolean(id && table)
 
+  const { logsMetadata } = useIsFeatureEnabled(['logs:metadata'])
+
   const {
     data,
     error: rcError,
@@ -67,8 +70,11 @@ function useSingleLog({
 
   let error: null | string | object = rcError ? (rcError as any).message : null
   const result = data?.result ? data.result[0] : undefined
+
   return {
-    data: result,
+    data: !!result
+      ? { ...result, metadata: logsMetadata ? result?.metadata : undefined }
+      : undefined,
     isLoading: (enabled && isLoading) || isRefetching,
     error,
     refresh: () => refetch(),

packages/common/enabled-features/enabled-features.json

@@ -68,6 +68,7 @@
 
   "logs:templates": true,
   "logs:collections": true,
+  "logs:metadata": true,
   "logs:show_metadata_ip_template": true,
 
   "organization:show_sso_settings": true,

packages/common/enabled-features/enabled-features.schema.json

@@ -245,6 +245,10 @@
       "type": "boolean",
       "description": "Enable the logs collections page"
     },
+    "logs:metadata": {
+      "type": "boolean",
+      "description": "Show the metadata field for logs in logs explorer"
+    },
     "logs:show_metadata_ip_template": {
       "type": "boolean",
       "description": "Show the Metadata IP template in the logs explorer"
@@ -449,6 +453,7 @@
     "profile:show_account_deletion",
     "logs:templates",
     "logs:collections",
+    "logs:metadata",
     "logs:show_metadata_ip_template",
     "organization:show_sso_settings",
     "project_creation:show_advanced_config",