@@ -192,7 +190,7 @@ const Bandwidth = ({ projectRef }: BandwidthProps) => {
data={chartData}
yLimit={usageMeta?.limit ?? 0}
yLeftMargin={chartMeta[attribute.key].margin}
- yFormatter={(value) => formatBytes(value, 1, 'GB').replace(/\s/g, '')}
+ yFormatter={value => ChartYFormatterCompactNumber(value, attribute.unit)}
quotaWarningType={isFreeTier || isProTier ? 'danger' : 'warning'}
/>
)}
diff --git a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
index ff026c5f939..1dd2d1cc2ed 100644
--- a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
@@ -11,6 +11,7 @@ import SectionHeader from './SectionHeader'
import { COMPUTE_INSTANCE_SPECS, USAGE_CATEGORIES } from './Usage.constants'
import { getUpgradeUrl } from './Usage.utils'
import UsageBarChart from './UsageBarChart'
+import Panel from 'components/ui/Panel'
export interface InfrastructureProps {
projectRef: string
@@ -25,8 +26,15 @@ const Infrastructure = ({ projectRef }: InfrastructureProps) => {
current_period_start !== undefined
? new Date(current_period_start * 1000).toISOString()
: undefined
- const endDate =
+ 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 categoryMeta = USAGE_CATEGORIES.find((category) => category.key === 'infra')
const upgradeUrl = getUpgradeUrl(projectRef, subscription)
@@ -37,28 +45,43 @@ const Infrastructure = ({ projectRef }: InfrastructureProps) => {
const currentComputeInstanceSpecs =
COMPUTE_INSTANCE_SPECS[currentComputeInstance?.supabase_prod_id ?? 'addon_instance_micro']
+ // Switch to hourly interval, if the timeframe is <48 hours
+ let interval: '1d' | '1h' = '1d'
+ let dateFormat = 'DD MMM'
+ if (startDate && endDate) {
+ const diffInHours = dayjs(endDate).diff(startDate, 'hours')
+
+ if (diffInHours <= 48) {
+ interval = '1h'
+ dateFormat = 'HH a'
+ }
+ }
+
const { data: cpuUsageData, isLoading: isLoadingCpuUsageData } = useInfraMonitoringQuery({
projectRef,
attribute: 'cpu_usage',
- interval: '1d',
+ interval,
startDate,
endDate,
+ dateFormat,
})
const { data: memoryUsageData, isLoading: isLoadingMemoryUsageData } = useInfraMonitoringQuery({
projectRef,
attribute: 'ram_usage',
- interval: '1d',
+ interval,
startDate,
endDate,
+ dateFormat,
})
const { data: ioBudgetData, isLoading: isLoadingIoBudgetData } = useInfraMonitoringQuery({
projectRef,
attribute: 'disk_io_budget',
- interval: '1d',
+ interval,
startDate,
endDate,
+ dateFormat,
})
const currentDayIoBudget = Number(
@@ -90,20 +113,9 @@ const Infrastructure = ({ projectRef }: InfrastructureProps) => {
{categoryMeta.attributes.map((attribute) => {
const chartData = chartMeta[attribute.key]?.data ?? []
- // [Joshen] Ideally this should come from the API imo, foresee some discrepancies
- const lastZeroValue = chartData.find(
- (x: any) => x.loopId > 0 && x[attribute.attribute] === 0
- )
- const lastKnownValue =
- lastZeroValue !== undefined
- ? dayjs(lastZeroValue.period_start)
- .subtract(1, 'day')
- .format('DD MMM YYYY, HH:mma (ZZ)')
- : undefined
-
return (
-
+
{attribute.key === 'disk_io_budget' && (
<>
{currentDayIoBudget <= 0 ? (
@@ -172,17 +184,27 @@ const Infrastructure = ({ projectRef }: InfrastructureProps) => {
)}
- {attribute.key === 'disk_io_budget' ? (
-
IO Budget remaining each day
- ) : (
-
- Max{' '}
-
- {attribute.name}
- {' '}
- usage each day
-
- )}
+
+ {attribute.key === 'disk_io_budget' ? (
+
IO Budget remaining
+ ) : (
+
+ Max{' '}
+
+ {attribute.name}
+ {' '}
+ usage
+
+ )}
+
+
+
+
+
+
+
{attribute.chartDescription.split('\n').map((paragraph, idx) => (
{paragraph}
@@ -195,7 +217,7 @@ const Infrastructure = ({ projectRef }: InfrastructureProps) => {
+
No data
+
+ There is no data in the timeframe available
+
+
diff --git a/studio/components/interfaces/BillingV2/Usage/SectionContent.tsx b/studio/components/interfaces/BillingV2/Usage/SectionContent.tsx
index 722f89a7f76..f2a8dec923b 100644
--- a/studio/components/interfaces/BillingV2/Usage/SectionContent.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/SectionContent.tsx
@@ -6,16 +6,14 @@ import Link from 'next/link'
export interface SectionContent {
section: CategoryAttribute
includedInPlan?: boolean
- lastKnownValue?: string
}
const SectionContent = ({
section,
includedInPlan,
- lastKnownValue,
children,
}: PropsWithChildren
) => {
- const { name, description, docsUrl } = section
+ const { name, description, links } = section
return (
@@ -29,27 +27,28 @@ const SectionContent = ({
{includedInPlan === false && Not included}
{description.split('\n').map((value, idx) => (
-
+
{value}
))}