SlotLagMetricsList() — supabase Function Reference

Architecture documentation for the SlotLagMetricsList() function in SlotLagMetrics.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ SlotLagMetricsList() — supabase Function Reference

Dependency Diagram

graph TD
  add6eab0_7af6_a285_5b10_9ed24b8d0e5c["SlotLagMetricsList()"]
  7e53bba0_159c_a8c5_bd18_a1d72665e775["getFormattedLagValue()"]
  add6eab0_7af6_a285_5b10_9ed24b8d0e5c -->|calls| 7e53bba0_159c_a8c5_bd18_a1d72665e775
  style add6eab0_7af6_a285_5b10_9ed24b8d0e5c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx lines 66–126

export const SlotLagMetricsList = ({
  metrics,
  size = 'default',
  showMetricInfo = true,
}: {
  metrics: SlotLagMetrics
  size?: 'default' | 'compact'
  showMetricInfo?: boolean
}) => {
  const gridClasses =
    size === 'default'
      ? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-y-4 gap-x-6'
      : 'grid-cols-2 gap-y-2 gap-x-4'

  const labelClasses =
    size === 'default' ? 'text-xs text-foreground-light' : 'text-[11px] text-foreground-lighter'

  const valueClasses =
    size === 'default'
      ? 'text-sm font-medium text-foreground'
      : 'text-xs font-medium text-foreground'

  return (
    <dl className={`grid ${gridClasses}`}>
      {SLOT_LAG_FIELDS.map(({ key, label, type, description }) => (
        <div key={key} className="flex flex-col gap-0.5">
          <dt className={labelClasses}>
            <span className="inline-flex items-center gap-1">
              {label}
              {showMetricInfo && (
                <Tooltip>
                  <TooltipTrigger asChild>
                    <button
                      type="button"
                      aria-label={`What is ${label}`}
                      className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
                    >
                      <Info size={12} />
                    </button>
                  </TooltipTrigger>
                  <TooltipContent side="top" align="start" className="max-w-xs text-xs">
                    {description}
                  </TooltipContent>
                </Tooltip>
              )}
            </span>
          </dt>
          {(() => {
            const { display, detail } = getFormattedLagValue(type, metrics[key])
            return (
              <dd className={`flex flex-col ${valueClasses}`}>
                <span>{display}</span>
                {detail && <span className="text-[11px] text-foreground-lighter">{detail}</span>}
              </dd>
            )
          })()}
        </div>
      ))}
    </dl>
  )
}