supabase/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx

import { cn } from 'ui'

import { LOG_TYPES_LABELS, METHODS, STATUS_CODE_LABELS } from './UnifiedLogs.constants'
import { ColumnSchema } from './UnifiedLogs.schema'
import { getLevelLabel } from './UnifiedLogs.utils'
import { LEVELS } from '@/components/ui/DataTable/DataTable.constants'
import { DataTableFilterField, Option } from '@/components/ui/DataTable/DataTable.types'
import { getLevelColor } from '@/components/ui/DataTable/DataTable.utils'

// instead of filterFields, maybe just 'fields' with a filterDisabled prop?
// that way, we could have 'message' or 'headers' field with label and value as well as type!
export const filterFields = [
  {
    label: 'Time Range',
    value: 'date',
    type: 'timerange',
    defaultOpen: true,
    commandDisabled: true,
  },
  {
    label: 'Log Type',
    value: 'log_type',
    type: 'checkbox',
    defaultOpen: true,
    options: Object.entries(LOG_TYPES_LABELS).map(([value, label]) => ({
      label,
      value,
      options:
        // [Joshen] Nested options are treated as just boolean toggles atm for simplicity
        // Refer to DataTableFilterCheckbox for their logic
        value === 'edge'
          ? [
              { label: 'Auth', value: 'edge_auth' },
              { label: 'Storage', value: 'edge_storage' },
              { label: 'Postgrest', value: 'edge_postgrest' },
            ]
          : value === 'postgres'
            ? [{ label: 'Connection logs', value: 'show_connection_logs' }]
            : [],
    })),
    component: (props: Option) => {
      return (
        <div className="flex items-center w-full justify-between gap-2">
          <span className="text-foreground/70 group-hover:text-accent-foreground text-xs">
            {props.label}
          </span>
        </div>
      )
    },
  },
  {
    label: 'Level',
    value: 'level',
    type: 'checkbox',
    defaultOpen: true,
    options: LEVELS.map((level) => ({ label: level, value: level })),
    component: (props: Option) => {
      // TODO: type `Option` with `options` values via Generics
      const value = props.value as (typeof LEVELS)[number]
      return (
        <div className="flex w-full max-w-28 items-center justify-between gap-2">
          <span className="capitalize text-foreground/70 group-hover:text-accent-foreground text-xs">
            {props.label}
          </span>
          <div className="flex items-center gap-2">
            <div className={cn('h-2.5 w-2.5 rounded-[2px]', getLevelColor(value).bg)} />
            <span className="text-xs text-muted-foreground/70">{getLevelLabel(value)}</span>
          </div>
        </div>
      )
    },
  },
  {
    label: 'Status',
    value: 'status',
    type: 'checkbox',
    defaultOpen: false,
    options: [],
    hasDynamicOptions: true,
    component: (props: Option) => {
      if (typeof props.value === 'boolean') return null
      if (typeof props.value === 'undefined') return null

      const statusValue = String(props.value)
      const statusLabel = STATUS_CODE_LABELS[statusValue as keyof typeof STATUS_CODE_LABELS]

      return (
        <div className="flex items-center gap-2 w-full min-w-0">
          <span className="shrink-0 text-foreground">{statusValue}</span>
          {statusLabel && (
            <span className="text-[0.7rem] text-foreground-lighter truncate" title={statusLabel}>
              {statusLabel}
            </span>
          )}
        </div>
      )
    },
  },
  {
    label: 'Method',
    value: 'method',
    type: 'checkbox',
    defaultOpen: false,
    options: METHODS.map((method) => ({ label: method, value: method })),
    component: (props: Option) => {
      return (
        <span className="truncate block text-[0.75rem]" title={props.value as string}>
          {props.value}
        </span>
      )
    },
  },
  {
    label: 'Pathname',
    value: 'pathname',
    type: 'checkbox',
    defaultOpen: false,
    options: [],
    hasDynamicOptions: true,
    hasAsyncSearch: false,
    component: (props: Option) => {
      return (
        <span className="truncate block w-full text-[0.75rem]" title={props.value as string}>
          {props.value}
        </span>
      )
    },
  },
  {
    label: 'Event message',
    value: 'event_message',
    type: 'checkbox',
    defaultOpen: false,
    options: [],
    hasDynamicOptions: false,
    hasAsyncSearch: false,
    hidden: true,
    component: (props: Option) => {
      return (
        <span className="truncate block w-full text-[0.75rem]" title={props.value as string}>
          {props.value}
        </span>
      )
    },
  },
] satisfies DataTableFilterField<ColumnSchema>[]