OrgLogUsage.tsx64 lines · main

1	import { dailyUsageToDataPoints } from './Usage.utils'
2	import UsageSection from './UsageSection/UsageSection'
3	import { DataPoint } from '@/data/analytics/constants'
4	import { PricingMetric, type OrgDailyUsageResponse } from '@/data/analytics/org-daily-stats-query'
5	import type { OrgSubscription } from '@/data/subscriptions/types'
6
7	export interface OrgLogUsageProps {
8	orgSlug: string
9	projectRef?: string | null
10	startDate: string | undefined
11	endDate: string | undefined
12	subscription: OrgSubscription | undefined
13	currentBillingCycleSelected: boolean
14	orgDailyStats: OrgDailyUsageResponse | undefined
15	isLoadingOrgDailyStats: boolean
16	}
17
18	const OrgLogUsage = ({
19	orgSlug,
20	projectRef,
21	subscription,
22	currentBillingCycleSelected,
23	orgDailyStats,
24	isLoadingOrgDailyStats,
25	}: OrgLogUsageProps) => {
26	const chartMeta: {
27	[key: string]: { data: DataPoint[]; margin: number; isLoading: boolean }
28	} = {
29	[PricingMetric.LOG_INGESTION]: {
30	data: dailyUsageToDataPoints(
31	orgDailyStats,
32	(metric) => metric === PricingMetric.LOG_INGESTION
33	),
34	margin: 18,
35	isLoading: isLoadingOrgDailyStats,
36	},
37	[PricingMetric.LOG_QUERYING]: {
38	data: dailyUsageToDataPoints(
39	orgDailyStats,
40	(metric) => metric === PricingMetric.LOG_QUERYING
41	),
42	margin: 20,
43	isLoading: isLoadingOrgDailyStats,
44	},
45	[PricingMetric.LOG_STORAGE]: {
46	data: dailyUsageToDataPoints(orgDailyStats, (metric) => metric === PricingMetric.LOG_STORAGE),
47	margin: 0,
48	isLoading: isLoadingOrgDailyStats,
49	},
50	}
51
52	return (
53	<UsageSection
54	orgSlug={orgSlug}
55	projectRef={projectRef}
56	categoryKey="logs"
57	chartMeta={chartMeta}
58	subscription={subscription}
59	currentBillingCycleSelected={currentBillingCycleSelected}
60	/>
61	)
62	}
63
64	export default OrgLogUsage