From 186b1a662ad2acace57788b454c2fbb47b5bddbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= Date: Sat, 3 Jun 2023 01:04:56 +0200 Subject: [PATCH] fix requests being send 3x times or more --- .../interfaces/BillingV2/Usage/Activity.tsx | 40 +++++++++-------- .../interfaces/BillingV2/Usage/Bandwidth.tsx | 44 ++++++++++++------- .../BillingV2/Usage/Infrastructure.tsx | 28 ++++++------ .../BillingV2/Usage/SizeAndCounts.tsx | 36 ++++++++++----- 4 files changed, 89 insertions(+), 59 deletions(-) diff --git a/studio/components/interfaces/BillingV2/Usage/Activity.tsx b/studio/components/interfaces/BillingV2/Usage/Activity.tsx index 68353e5ab38..12f7e3777ee 100644 --- a/studio/components/interfaces/BillingV2/Usage/Activity.tsx +++ b/studio/components/interfaces/BillingV2/Usage/Activity.tsx @@ -19,6 +19,7 @@ import { ChartYFormatterCompactNumber, getUpgradeUrlFromV2Subscription } from '. import { DataPoint } from 'data/analytics/constants' import Panel from 'components/ui/Panel' import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query' +import { useMemo } from 'react' export interface ActivityProps { projectRef: string @@ -28,27 +29,30 @@ const Activity = ({ projectRef }: ActivityProps) => { const { data: usage } = useProjectUsageQuery({ projectRef }) const { data: subscription } = useProjectSubscriptionV2Query({ projectRef }) const { current_period_start, current_period_end } = subscription ?? {} - const startDate = - current_period_start !== undefined - ? new Date(current_period_start * 1000).toISOString() - : undefined - let endDate = - current_period_end !== undefined ? new Date(current_period_end * 1000).toISOString() : undefined - // If end date is in future, set end date to yesterday/now - if (endDate && dayjs(endDate).isAfter(dayjs())) { - const yesterday = dayjs(new Date()).subtract(1, 'day') + const startDate = useMemo(() => { + return current_period_start ? new Date(current_period_start * 1000).toISOString() : undefined + }, [current_period_start]) - /** - * Currently, daily-stats data is only available a day later, so we'll use yesterday as end date, as otherwise the current day would just show up with "0" values - * - * We are actively working on removing this restriction on the data-eng/LF side and can remove this workaround once that's done - */ - let newEndDate = yesterday.isAfter(dayjs(startDate)) ? yesterday : new Date() + const endDate = useMemo(() => { + const periodEndDate = current_period_end ? new Date(current_period_end * 1000) : undefined + // If end date is in future, set end date to now + if (periodEndDate && dayjs(periodEndDate).isAfter(dayjs())) { + const yesterday = dayjs(new Date()).subtract(1, 'day') - // LF seems to have an issue with the milliseconds, causes infinite loading sometimes - endDate = newEndDate.toISOString().slice(0, -5) + 'Z' - } + /** + * Currently, daily-stats data is only available a day later, so we'll use yesterday as end date, as otherwise the current day would just show up with "0" values + * + * We are actively working on removing this restriction on the data-eng/LF side and can remove this workaround once that's done + */ + const newEndDate = yesterday.isAfter(dayjs(startDate)) ? yesterday : new Date() + + // LF seems to have an issue with the milliseconds, causes infinite loading sometimes + return newEndDate.toISOString().slice(0, -5) + 'Z' + } else if (periodEndDate) { + return periodEndDate.toISOString() + } + }, [current_period_end, startDate]) const categoryMeta = USAGE_CATEGORIES.find((category) => category.key === 'activity') diff --git a/studio/components/interfaces/BillingV2/Usage/Bandwidth.tsx b/studio/components/interfaces/BillingV2/Usage/Bandwidth.tsx index 088ea920036..96a620d1b0e 100644 --- a/studio/components/interfaces/BillingV2/Usage/Bandwidth.tsx +++ b/studio/components/interfaces/BillingV2/Usage/Bandwidth.tsx @@ -9,21 +9,18 @@ import { useProjectUsageQuery, } from 'data/usage/project-usage-query' import dayjs from 'dayjs' -import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/constants' +import { USAGE_APPROACHING_THRESHOLD } from 'lib/constants' import { formatBytes } from 'lib/helpers' import Link from 'next/link' import { Button, IconAlertTriangle } from 'ui' import SectionContent from './SectionContent' import SectionHeader from './SectionHeader' import { USAGE_CATEGORIES } from './Usage.constants' -import { - ChartYFormatterCompactNumber, - getUpgradeUrl, - getUpgradeUrlFromV2Subscription, -} from './Usage.utils' +import { ChartYFormatterCompactNumber, getUpgradeUrlFromV2Subscription } from './Usage.utils' import UsageBarChart from './UsageBarChart' import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query' import Panel from 'components/ui/Panel' +import { useMemo } from 'react' export interface BandwidthProps { projectRef: string @@ -33,17 +30,30 @@ const Bandwidth = ({ projectRef }: BandwidthProps) => { const { data: usage } = useProjectUsageQuery({ projectRef }) const { data: subscription } = useProjectSubscriptionV2Query({ projectRef }) const { current_period_start, current_period_end } = subscription ?? {} - const startDate = - current_period_start !== undefined - ? new Date(current_period_start * 1000).toISOString() - : undefined - let endDate = - current_period_end !== undefined ? new Date(current_period_end * 1000).toISOString() : undefined - // If end date is in future, set end date to now - if (endDate && dayjs(endDate).isAfter(dayjs())) { - // LF seems to have an issue with the milliseconds, causes infinite loading sometimes - endDate = new Date().toISOString().slice(0, -5) + 'Z' - } + + const startDate = useMemo(() => { + return current_period_start ? new Date(current_period_start * 1000).toISOString() : undefined + }, [current_period_start]) + + const endDate = useMemo(() => { + const periodEndDate = current_period_end ? new Date(current_period_end * 1000) : undefined + // If end date is in future, set end date to now + if (periodEndDate && dayjs(periodEndDate).isAfter(dayjs())) { + const yesterday = dayjs(new Date()).subtract(1, 'day') + + /** + * Currently, daily-stats data is only available a day later, so we'll use yesterday as end date, as otherwise the current day would just show up with "0" values + * + * We are actively working on removing this restriction on the data-eng/LF side and can remove this workaround once that's done + */ + const newEndDate = yesterday.isAfter(dayjs(startDate)) ? yesterday : new Date() + + // LF seems to have an issue with the milliseconds, causes infinite loading sometimes + return newEndDate.toISOString().slice(0, -5) + 'Z' + } else if (periodEndDate) { + return periodEndDate.toISOString() + } + }, [current_period_end, startDate]) const categoryMeta = USAGE_CATEGORIES.find((category) => category.key === 'bandwidth') diff --git a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx index 8ef35c0b8b0..9be2b2ffb20 100644 --- a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx +++ b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx @@ -2,16 +2,16 @@ import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { DataPoint } from 'data/analytics/constants' import { useInfraMonitoringQuery } from 'data/analytics/infra-monitoring-query' import dayjs from 'dayjs' -import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants' import Link from 'next/link' import { Alert, Button } from 'ui' import SectionContent from './SectionContent' import SectionHeader from './SectionHeader' import { COMPUTE_INSTANCE_SPECS, USAGE_CATEGORIES } from './Usage.constants' -import { getUpgradeUrl, getUpgradeUrlFromV2Subscription } from './Usage.utils' +import { getUpgradeUrlFromV2Subscription } from './Usage.utils' import UsageBarChart from './UsageBarChart' import Panel from 'components/ui/Panel' import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query' +import { useMemo } from 'react' export interface InfrastructureProps { projectRef: string @@ -22,18 +22,20 @@ export interface InfrastructureProps { const Infrastructure = ({ projectRef }: InfrastructureProps) => { const { data: subscription } = useProjectSubscriptionV2Query({ projectRef }) const { current_period_start, current_period_end } = subscription ?? {} - const startDate = - current_period_start !== undefined - ? new Date(current_period_start * 1000).toISOString() - : undefined - let endDate = - current_period_end !== undefined ? new Date(current_period_end * 1000).toISOString() : undefined + const startDate = useMemo(() => { + return current_period_start ? new Date(current_period_start * 1000).toISOString() : undefined + }, [current_period_start]) - // If end date is in future, set end date to now - if (endDate && dayjs(endDate).isAfter(dayjs())) { - // LF seems to have an issue with the milliseconds, causes infinite loading sometimes - endDate = new Date().toISOString().slice(0, -5) + 'Z' - } + const endDate = useMemo(() => { + const periodEndDate = current_period_end ? new Date(current_period_end * 1000) : undefined + // If end date is in future, set end date to now + if (periodEndDate && dayjs(periodEndDate).isAfter(dayjs())) { + // LF seems to have an issue with the milliseconds, causes infinite loading sometimes + return new Date().toISOString().slice(0, -5) + 'Z' + } else if (periodEndDate) { + return periodEndDate.toISOString() + } + }, [current_period_end]) const categoryMeta = USAGE_CATEGORIES.find((category) => category.key === 'infra') diff --git a/studio/components/interfaces/BillingV2/Usage/SizeAndCounts.tsx b/studio/components/interfaces/BillingV2/Usage/SizeAndCounts.tsx index dae39168258..d790a670d7a 100644 --- a/studio/components/interfaces/BillingV2/Usage/SizeAndCounts.tsx +++ b/studio/components/interfaces/BillingV2/Usage/SizeAndCounts.tsx @@ -20,6 +20,7 @@ import { ChartYFormatterCompactNumber, getUpgradeUrlFromV2Subscription } from '. import { DataPoint } from 'data/analytics/constants' import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query' import Panel from 'components/ui/Panel' +import { useMemo } from 'react' export interface SizeAndCountsProps { projectRef: string @@ -29,17 +30,30 @@ const SizeAndCounts = ({ projectRef }: SizeAndCountsProps) => { const { data: usage } = useProjectUsageQuery({ projectRef }) const { data: subscription } = useProjectSubscriptionV2Query({ projectRef }) const { current_period_start, current_period_end } = subscription ?? {} - const startDate = - current_period_start !== undefined - ? new Date(current_period_start * 1000).toISOString() - : undefined - let endDate = - current_period_end !== undefined ? new Date(current_period_end * 1000).toISOString() : undefined - // If end date is in future, set end date to now - if (endDate && dayjs(endDate).isAfter(dayjs())) { - // LF seems to have an issue with the milliseconds, causes infinite loading sometimes - endDate = new Date().toISOString().slice(0, -5) + 'Z' - } + + const startDate = useMemo(() => { + return current_period_start ? new Date(current_period_start * 1000).toISOString() : undefined + }, [current_period_start]) + + const endDate = useMemo(() => { + const periodEndDate = current_period_end ? new Date(current_period_end * 1000) : undefined + // If end date is in future, set end date to now + if (periodEndDate && dayjs(periodEndDate).isAfter(dayjs())) { + const yesterday = dayjs(new Date()).subtract(1, 'day') + + /** + * Currently, daily-stats data is only available a day later, so we'll use yesterday as end date, as otherwise the current day would just show up with "0" values + * + * We are actively working on removing this restriction on the data-eng/LF side and can remove this workaround once that's done + */ + const newEndDate = yesterday.isAfter(dayjs(startDate)) ? yesterday : new Date() + + // LF seems to have an issue with the milliseconds, causes infinite loading sometimes + return newEndDate.toISOString().slice(0, -5) + 'Z' + } else if (periodEndDate) { + return periodEndDate.toISOString() + } + }, [current_period_end, startDate]) const categoryMeta = USAGE_CATEGORIES.find((category) => category.key === 'sizeCount')