fix requests being send 3x times or more

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')
 

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')
 

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')
 

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')