konnosDashboard
UsageSection.tsx108 lines · main
1import SectionHeader from '../SectionHeader'
2import { CategoryMetaKey, USAGE_CATEGORIES } from '../Usage.constants'
3import AttributeUsage from './AttributeUsage'
4import DatabaseSizeUsage from './DatabaseSizeUsage'
5import { DiskUsage } from './DiskUsage'
6import { ScaffoldContainer } from '@/components/layouts/Scaffold'
7import { DataPoint } from '@/data/analytics/constants'
8import { PricingMetric } from '@/data/analytics/org-daily-stats-query'
9import type { OrgSubscription } from '@/data/subscriptions/types'
10import { useOrgUsageQuery } from '@/data/usage/org-usage-query'
11
12export interface ChartMeta {
13 [key: string]: { data: DataPoint[]; margin: number; isLoading: boolean }
14}
15
16export interface UsageSectionProps {
17 orgSlug: string
18 projectRef?: string | null
19 categoryKey: CategoryMetaKey
20 subscription?: OrgSubscription
21 chartMeta: ChartMeta
22 currentBillingCycleSelected: boolean
23 startDate?: string
24 endDate?: string
25}
26
27const UsageSection = ({
28 orgSlug,
29 projectRef,
30 categoryKey,
31 chartMeta,
32 subscription,
33 currentBillingCycleSelected,
34 startDate,
35 endDate,
36}: UsageSectionProps) => {
37 const {
38 data: usage,
39 error: usageError,
40 isPending: isLoadingUsage,
41 isError: isErrorUsage,
42 isSuccess: isSuccessUsage,
43 } = useOrgUsageQuery({
44 orgSlug,
45 projectRef,
46 start: !currentBillingCycleSelected && startDate ? new Date(startDate) : undefined,
47 end: !currentBillingCycleSelected && endDate ? new Date(endDate) : undefined,
48 })
49
50 const categoryMeta = USAGE_CATEGORIES(subscription).find(
51 (category) => category.key === categoryKey
52 )
53 if (!categoryMeta) return null
54
55 return (
56 <>
57 <ScaffoldContainer>
58 <SectionHeader
59 title={categoryMeta.name}
60 description={categoryMeta.description}
61 className="pb-0"
62 />
63 </ScaffoldContainer>
64
65 {categoryMeta.attributes.map((attribute) =>
66 attribute.key === 'diskSize' ? (
67 <DiskUsage
68 key={attribute.name}
69 slug={orgSlug}
70 projectRef={projectRef}
71 attribute={attribute}
72 subscription={subscription}
73 currentBillingCycleSelected={currentBillingCycleSelected}
74 usage={usage}
75 />
76 ) : attribute.key === PricingMetric.DATABASE_SIZE && subscription?.plan.id === 'free' ? (
77 <DatabaseSizeUsage
78 key={attribute.name}
79 slug={orgSlug}
80 projectRef={projectRef}
81 attribute={attribute}
82 subscription={subscription}
83 currentBillingCycleSelected={currentBillingCycleSelected}
84 usage={usage}
85 />
86 ) : (
87 <AttributeUsage
88 key={attribute.name}
89 slug={orgSlug}
90 projectRef={projectRef}
91 attribute={attribute}
92 usage={usage}
93 usageMeta={usage?.usages.find((x) => x.metric === attribute.key)}
94 chartMeta={chartMeta}
95 subscription={subscription}
96 error={usageError}
97 isLoading={isLoadingUsage}
98 isError={isErrorUsage}
99 isSuccess={isSuccessUsage}
100 currentBillingCycleSelected={currentBillingCycleSelected}
101 />
102 )
103 )}
104 </>
105 )
106}
107
108export default UsageSection