ServiceHealthCard() — supabase Function Reference

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

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ ServiceHealthCard() — supabase Function Reference

Dependency Diagram

graph TD
  dfd48934_1c51_626a_8ce9_07af567d381c["ServiceHealthCard()"]
  e46d510e_36d0_d279_c9e2_3efca1456e6c["getHealthStatus()"]
  dfd48934_1c51_626a_8ce9_07af567d381c -->|calls| e46d510e_36d0_d279_c9e2_3efca1456e6c
  style dfd48934_1c51_626a_8ce9_07af567d381c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx lines 31–110

export const ServiceHealthCard = ({
  serviceName,
  serviceKey,
  total,
  errorRate,
  errorCount,
  warningCount,
  chartData,
  reportUrl,
  logsUrl,
  isLoading,
  onBarClick,
  datetimeFormat,
}: ServiceHealthCardProps) => {
  const { status, color } = getHealthStatus(errorRate, total)

  return (
    <Card className="mb-0 md:mb-0 h-full flex flex-col">
      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-0 border-b-0">
        <div className="flex flex-col">
          <CardTitle className="text-foreground-light flex items-center gap-2 text-xs font-medium">
            <div className={cn('w-1.5 h-1.5 rounded-full', colorClassMap[color] || 'bg-muted')} />
            {serviceName}
          </CardTitle>
          <div className="flex items-start gap-6 mt-2">
            <div className="flex flex-col">
              <span className="text-foreground text-xl">{total.toLocaleString()}</span>
              <span className="text-foreground-light text-xs">requests</span>
            </div>
            <div className="flex flex-col">
              <span className="text-foreground text-xl">{errorRate.toFixed(1)}%</span>
              <span className="text-foreground-light text-xs">error rate</span>
            </div>
          </div>
        </div>
        <div className="flex items-end gap-4 text-foreground-light">
          <div className="flex flex-col items-end">
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 bg-warning rounded-full" />
              <span className="heading-meta">Warn</span>
            </div>
            <span className="text-foreground text-xl">{warningCount.toLocaleString()}</span>
          </div>
          <div className="flex flex-col items-end">
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 bg-destructive rounded-full" />
              <span className="heading-meta">Err</span>
            </div>
            <span className="text-foreground text-xl">{errorCount.toLocaleString()}</span>
          </div>
        </div>
      </CardHeader>

      <CardContent className="p-6 pt-4 flex-1 overflow-hidden max-h-[200px]">
        <Loading isFullHeight active={isLoading}>
          <LogsBarChart
            isFullHeight
            data={chartData}
            DateTimeFormat={datetimeFormat}
            onBarClick={onBarClick}
            EmptyState={
              <NoDataPlaceholder size="small" message="No data for selected period" isFullHeight />
            }
          />
        </Loading>
      </CardContent>

      <CardFooter className="border-t pt-3 pb-4 px-4 flex gap-2">
        {reportUrl && (
          <Button type="default" size="tiny" asChild className="flex-1">
            <Link href={reportUrl}>View Report</Link>
          </Button>
        )}
        <Button type="default" size="tiny" asChild className="flex-1">
          <Link href={logsUrl}>View Logs</Link>
        </Button>
      </CardFooter>
    </Card>
  )
}