ServiceRow() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx lines 90–189

const ServiceRow = ({ service, data, onBarClick, datetimeFormat }: ServiceRowProps) => {
  const { status } = getHealthStatus(data.errorRate, data.total)
  const statusLabel = getStatusLabel(status)
  const statusVariant = getStatusVariant(status)
  const statusTooltip = getStatusTooltip(status)

  const errorRate = data.total > 0 ? data.errorRate : 0
  const warningRate = data.total > 0 ? (data.warningCount / data.total) * 100 : 0

  const reportUrl = service.reportUrl || service.logsUrl

  return (
    <Link
      href={reportUrl}
      className="block group p-4 border-b border-default last:border-b-0 hover:bg-surface-200 transition-colors cursor-pointer"
    >
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <span className="text-foreground font-medium">{service.name}</span>
          <Tooltip>
            <TooltipTrigger asChild>
              <button
                onClick={(e) => e.preventDefault()}
                className="text-foreground-lighter hover:text-foreground-light transition-colors"
              >
                <HelpCircle size={14} />
              </button>
            </TooltipTrigger>
            <TooltipContent side="right" className="max-w-xs">
              <p>{SERVICE_DESCRIPTIONS[service.key as ServiceKey] || service.description}</p>
            </TooltipContent>
          </Tooltip>
        </div>
        <div className="flex items-center gap-2">
          <Tooltip>
            <TooltipTrigger asChild>
              <Badge variant={statusVariant}>{statusLabel}</Badge>
            </TooltipTrigger>
            <TooltipContent side="top">
              <p>{statusTooltip}</p>
            </TooltipContent>
          </Tooltip>
          <ButtonTooltip
            type="text"
            size="tiny"
            className="p-1.5"
            tooltip={{ content: { text: `Go to ${service.name} report` } }}
          >
            <ChevronRight
              size={14}
              className="text-foreground-lighter group-hover:text-foreground"
            />
          </ButtonTooltip>
        </div>
      </div>

      <div className="h-16" onClick={(e) => e.preventDefault()}>
        <Loading active={data.isLoading}>
          {data.isLoading ? (
            <div />
          ) : (
            <LogsBarChart
              data={data.eventChartData}
              DateTimeFormat={datetimeFormat}
              onBarClick={onBarClick}
              EmptyState={
                <div className="flex items-center justify-center h-full text-xs text-foreground-lighter">
                  No data
                </div>
              }
            />
          )}
        </Loading>
      </div>

      {data.total > 0 && (
        <div className="flex items-center justify-center mt-2 text-xs text-foreground-lighter gap-4 font-mono tabular-nums tracking-tight">
          {errorRate > 0 && (
            <span className="flex items-center gap-1.5">
              <div className="w-1.5 h-1.5 rounded-full bg-destructive" />
              {errorRate.toFixed(2)}% errors
            </span>
          )}
          {warningRate > 0 && (
            <span className="flex items-center gap-1.5">
              <div className="w-1.5 h-1.5 rounded-full bg-warning" />
              {warningRate.toFixed(2)}% warnings
            </span>
          )}
          {errorRate === 0 && warningRate === 0 && (
            <span className="flex items-center gap-1.5">
              <div className="w-1.5 h-1.5 rounded-full bg-brand" />
              0% errors
            </span>
          )}
        </div>
      )}
    </Link>
  )
}