UsageSection() — supabase Function Reference

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

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ UsageSection() — supabase Function Reference

Dependency Diagram

graph TD
  40dd203e_5d72_16ab_4b17_65115907b762["UsageSection()"]
  5fd7e0cd_763a_6ef2_b457_a3c62e0c98ef["USAGE_CATEGORIES()"]
  40dd203e_5d72_16ab_4b17_65115907b762 -->|calls| 5fd7e0cd_763a_6ef2_b457_a3c62e0c98ef
  style 40dd203e_5d72_16ab_4b17_65115907b762 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Organization/Usage/UsageSection/UsageSection.tsx lines 27–106

const UsageSection = ({
  orgSlug,
  projectRef,
  categoryKey,
  chartMeta,
  subscription,
  currentBillingCycleSelected,
  startDate,
  endDate,
}: UsageSectionProps) => {
  const {
    data: usage,
    error: usageError,
    isPending: isLoadingUsage,
    isError: isErrorUsage,
    isSuccess: isSuccessUsage,
  } = useOrgUsageQuery({
    orgSlug,
    projectRef,
    start: !currentBillingCycleSelected && startDate ? new Date(startDate) : undefined,
    end: !currentBillingCycleSelected && endDate ? new Date(endDate) : undefined,
  })

  const categoryMeta = USAGE_CATEGORIES(subscription).find(
    (category) => category.key === categoryKey
  )
  if (!categoryMeta) return null

  return (
    <>
      <ScaffoldContainer>
        <SectionHeader
          title={categoryMeta.name}
          description={categoryMeta.description}
          className="pb-0"
        />
      </ScaffoldContainer>

      {categoryMeta.attributes.map((attribute) =>
        attribute.key === 'diskSize' ? (
          <DiskUsage
            key={attribute.name}
            slug={orgSlug}
            projectRef={projectRef}
            attribute={attribute}
            subscription={subscription}
            currentBillingCycleSelected={currentBillingCycleSelected}
            usage={usage}
          />
        ) : attribute.key === PricingMetric.DATABASE_SIZE && subscription?.plan.id === 'free' ? (
          <DatabaseSizeUsage
            key={attribute.name}
            slug={orgSlug}
            projectRef={projectRef}
            attribute={attribute}
            subscription={subscription}
            currentBillingCycleSelected={currentBillingCycleSelected}
            usage={usage}
          />
        ) : (
          <AttributeUsage
            key={attribute.name}
            slug={orgSlug}
            projectRef={projectRef}
            attribute={attribute}
            usage={usage}
            usageMeta={usage?.usages.find((x) => x.metric === attribute.key)}
            chartMeta={chartMeta}
            subscription={subscription}
            error={usageError}
            isLoading={isLoadingUsage}
            isError={isErrorUsage}
            isSuccess={isSuccessUsage}
            currentBillingCycleSelected={currentBillingCycleSelected}
          />
        )
      )}
    </>
  )
}