supabase/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx

import { Alert } from 'ui'
import React from 'react'
import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
import LogsDivider from '../Logs.Divider'
import { jsonSyntaxHighlight, SeverityFormatter } from '../LogsFormatters'

const DatabasePostgresSelectionRender = ({ log }: any) => {
  const postgresUsername = log?.metadata[0]?.parsed[0]?.user_name
  const sessionId = log?.metadata[0]?.parsed[0]?.session_id
  const hint = log?.metadata[0]?.parsed[0]?.hint

  const DetailedRow = ({ label, value }: { label: string; value: string | React.ReactNode }) => {
    return (
      <div className="grid grid-cols-12">
        <p className="col-span-4 whitespace-pre-wrap text-sm text-scale-900">{label}</p>
        <p className="col-span-8 whitespace-pre-wrap text-base text-scale-1200">{value}</p>
      </div>
    )
  }

  return (
    <>
      <div className={LOGS_TAILWIND_CLASSES.log_selection_x_padding}>
        <span className="col-span-4 text-sm text-scale-900">Event message</span>

        <div className="text-wrap mt-2 overflow-x-auto whitespace-pre-wrap font-mono  text-xs text-scale-1200">
          {log.event_message}
        </div>
      </div>
      <LogsDivider />
      <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
        <DetailedRow label="Severity" value={<SeverityFormatter value={log.error_severity} />} />
        <DetailedRow label="Postgres Username" value={postgresUsername} />
        <DetailedRow label="Session ID" value={sessionId} />
      </div>
      {hint && (
        <div className={`mt-4 ${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
          <Alert variant="warning" withIcon title={log?.metadata[0]?.parsed[0]?.hint} />
        </div>
      )}
      <LogsDivider />
      <div className={LOGS_TAILWIND_CLASSES.log_selection_x_padding}>
        <h3 className="mb-4 text-lg text-scale-1200">Metadata</h3>
        <pre className="syntax-highlight overflow-x-auto text-sm">
          <div
            className="text-wrap"
            dangerouslySetInnerHTML={{
              __html: log.metadata ? jsonSyntaxHighlight(log.metadata[0]) : '',
            }}
          />
        </pre>
      </div>
    </>
  )
}

export const DatabaseApiSelectionHeaderRender = (log: any) => {
  const method = log?.metadata[0]?.request[0]?.method
  const path = log?.metadata[0]?.request[0]?.path

  return `${method} ${path}`
}

export default DatabasePostgresSelectionRender