SlotLagMetricsInline() — supabase Function Reference

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

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ SlotLagMetricsInline() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx lines 36–64

export const SlotLagMetricsInline = ({
  tableName,
  metrics,
}: {
  tableName: string
  metrics: SlotLagMetrics
}) => {
  return (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-foreground">
      <span className="truncate font-medium" title={tableName}>
        {tableName}
      </span>
      <span className="text-foreground-lighter">•</span>
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11px] text-foreground-light">
        {SLOT_LAG_FIELDS.map(({ key, label, type }) => {
          const { display } = getFormattedLagValue(type, metrics[key])
          return (
            <span key={`${tableName}-${key}`} className="flex items-center gap-1">
              <span className="uppercase tracking-wide text-[10px] text-foreground-lighter">
                {label}
              </span>
              <span className="text-foreground">{display}</span>
            </span>
          )
        })}
      </div>
    </div>
  )
}