-
+
-
- Explore
-
- Launch Week 8 announcements
+ {badge && (
+
+ {badge}
+
+ )}
+ {announcement}
-
+
-
)
}
diff --git a/apps/www/components/Nav/Developers.tsx b/apps/www/components/Nav/Developers.tsx
index 9fdc46c12bf..1663d190aca 100644
--- a/apps/www/components/Nav/Developers.tsx
+++ b/apps/www/components/Nav/Developers.tsx
@@ -32,7 +32,7 @@ const Developers = () => {
stroke="currentColor"
aria-hidden="true"
>
-
-
@@ -30,9 +30,9 @@ const Hero = () => {
].join(' ')}
>
-
+ {/*
*/}
Build in a weekend @@ -80,32 +80,7 @@ const Hero = () => {
-
-
-
-
-
{
{
y2="21.5"
gradientUnits="userSpaceOnUse"
>
-
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index f780a7b4f91..ed5dc2d0277 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -14,6 +14,7 @@ import { useTheme } from 'common/Providers'
import ComputePricingModal from '~/components/Pricing/ComputePricingModal'
import { plans } from 'shared-data/plans'
import { ArrowNarrowRightIcon } from '@heroicons/react/outline'
+import AnnouncementBadge from '../../components/Announcement/Badge'
export default function IndexPage() {
const router = useRouter()
@@ -151,7 +152,7 @@ export default function IndexPage() {
/>
-
+
diff --git a/package-lock.json b/package-lock.json
index 288adec0c22..54e70da1f98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14121,17 +14121,17 @@
}
},
"node_modules/@supabase/gotrue-js": {
- "version": "2.48.0",
- "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.48.0.tgz",
- "integrity": "sha512-+6g5aFL6+iaZC6mFVpRLauSkU5MrQ52QZA1TlY0/evvz9Rmhqc315tIeUfUK87ZLeX7sOL6XYVGkI6ZxgeyAUA==",
+ "version": "2.52.0",
+ "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.52.0.tgz",
+ "integrity": "sha512-UFCbydMYFn/LhPW08aeZ9sgFDA3kOQCjA2ieFj/sccye9m8Tv0pimMfnXh3A9TqBJ0/0utpkaGSad3XdpJ+Mbw==",
"dependencies": {
- "@supabase/node-fetch": "^2.6.13"
+ "@supabase/node-fetch": "^2.6.14"
}
},
"node_modules/@supabase/node-fetch": {
- "version": "2.6.13",
- "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.13.tgz",
- "integrity": "sha512-rEHQaDVzxLZMCK3p+JW2nzEsK4AJpOQhetppaqAzrFum0Ub8wcnoM/8f1dWRZSulY5fRDP6rJaWT/8X3VleCzg==",
+ "version": "2.6.14",
+ "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.14.tgz",
+ "integrity": "sha512-w/Tsd22e/5fAeoxqQ4P2MX6EyF+iM6rc9kmlMVFkHuG0rAltt2TLhFbDJfemnHbtvnazWaRfy5KnFU/SYT37dQ==",
"dependencies": {
"whatwg-url": "^5.0.0"
},
@@ -40754,7 +40754,7 @@
"license": "MIT",
"dependencies": {
"@headlessui/react": "^1.7.14",
- "@supabase/gotrue-js": "^2.48.0",
+ "@supabase/gotrue-js": "^2.52.0",
"@supabase/ui": "^0.37.0-alpha.50",
"@types/react": "^17.0.39",
"react-use": "^17.4.0"
diff --git a/packages/common/gotrue.ts b/packages/common/gotrue.ts
index 22b0b68aeb8..11507565ad1 100644
--- a/packages/common/gotrue.ts
+++ b/packages/common/gotrue.ts
@@ -3,13 +3,20 @@ import { GoTrueClient, navigatorLock } from '@supabase/gotrue-js'
export const STORAGE_KEY = process.env.NEXT_PUBLIC_STORAGE_KEY || 'supabase.dashboard.auth.token'
export const AUTH_DEBUG_KEY =
process.env.NEXT_PUBLIC_AUTH_DEBUG_KEY || 'supabase.dashboard.auth.debug'
+export const AUTH_DEBUG_PERSISTED_KEY =
+ process.env.NEXT_PUBLIC_AUTH_DEBUG_PERSISTED_KEY || 'supabase.dashboard.auth.debug.persist'
export const AUTH_NAVIGATOR_LOCK_DISABLED_KEY =
- process.env.NEXT_PUBLIC_AUTH_NAVIGATOR_LOCK_KEY || 'supabase.dashboard.auth.navigatorLock.disabled'
+ process.env.NEXT_PUBLIC_AUTH_NAVIGATOR_LOCK_KEY ||
+ 'supabase.dashboard.auth.navigatorLock.disabled'
const debug =
process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' &&
globalThis?.localStorage?.getItem(AUTH_DEBUG_KEY) === 'true'
+const persistedDebug =
+ process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' &&
+ globalThis?.localStorage?.getItem(AUTH_DEBUG_PERSISTED_KEY) === 'true'
+
const navigatorLockEnabled = !!(
process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' &&
!(globalThis?.localStorage?.getItem(AUTH_NAVIGATOR_LOCK_DISABLED_KEY) === 'true') &&
@@ -20,10 +27,83 @@ if (!globalThis?.navigator?.locks) {
console.warn('This browser does not support the Navigator Locks API. Please update it.')
}
+const tabId = Math.random().toString(16).substring(2)
+
+let dbHandle = new Promise((accept, _) => {
+ if (!persistedDebug) {
+ accept(null)
+ return
+ }
+
+ const request = indexedDB.open('auth-debug-log', 1)
+
+ request.onupgradeneeded = (event: any) => {
+ const db = event?.target?.result
+
+ if (!db) {
+ return
+ }
+
+ db.createObjectStore('events', { autoIncrement: true })
+ }
+
+ request.onsuccess = (event: any) => {
+ console.log('Opened persisted auth debug log IndexedDB database', tabId)
+ accept(event.target.result)
+ }
+
+ request.onerror = (event: any) => {
+ console.error('Failed to open persisted auth debug log IndexedDB database', event)
+ accept(null)
+ }
+})
+
+const logIndexedDB = (message: string, ...args: any[]) => {
+ console.log(message, ...args)
+
+ const copyArgs = structuredClone(args)
+
+ copyArgs.forEach((value) => {
+ if (typeof value === 'object' && value !== null) {
+ delete value.user
+ delete value.access_token
+ delete value.token_type
+ delete value.provider_token
+ }
+ })
+ ;(async () => {
+ try {
+ const db = await dbHandle
+
+ if (!db) {
+ return
+ }
+
+ const tx = db.transaction(['events'], 'readwrite')
+ tx.onerror = (event: any) => {
+ console.error('Failed to write to persisted auth debug log IndexedDB database', event)
+ dbHandle = Promise.resolve(null)
+ }
+
+ const events = tx.objectStore('events')
+
+ events.add({
+ m: message.replace(/^GoTrueClient@/i, ''),
+ a: copyArgs,
+ l: window.location.pathname,
+ t: tabId,
+ })
+ } catch (e: any) {
+ console.error('Failed to log to persisted auth debug log IndexedDB database', e)
+ dbHandle = Promise.resolve(null)
+ }
+ })()
+}
+
export const gotrueClient = new GoTrueClient({
url: process.env.NEXT_PUBLIC_GOTRUE_URL,
storageKey: STORAGE_KEY,
detectSessionInUrl: true,
- debug,
+ debug: debug ? (persistedDebug ? logIndexedDB : true) : false,
lock: navigatorLockEnabled ? navigatorLock : undefined,
})
diff --git a/packages/common/package.json b/packages/common/package.json
index b31b97019b8..e425cf31945 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -6,7 +6,7 @@
"license": "MIT",
"dependencies": {
"@headlessui/react": "^1.7.14",
- "@supabase/gotrue-js": "^2.48.0",
+ "@supabase/gotrue-js": "^2.52.0",
"@supabase/ui": "^0.37.0-alpha.50",
"@types/react": "^17.0.39",
"react-use": "^17.4.0"
diff --git a/studio/__mocks__/data/fetchers.js b/studio/__mocks__/data/fetchers.js
new file mode 100644
index 00000000000..2331502c3d9
--- /dev/null
+++ b/studio/__mocks__/data/fetchers.js
@@ -0,0 +1,8 @@
+export const get = jest.fn()
+export const post = jest.fn()
+export const patch = jest.fn()
+export const del = jest.fn()
+export const put = jest.fn()
+export const head = jest.fn()
+export const trace = jest.fn()
+export const options = jest.fn()
diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx
index 3d7c6d34e0d..444317ed056 100644
--- a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx
@@ -22,9 +22,7 @@ import {
} from 'components/layouts/ProjectLayout/ProjectContext'
import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils'
-export interface AddOnsProps {}
-
-const AddOns = ({}: AddOnsProps) => {
+const AddOns = () => {
const { ref: projectRef } = useParams()
const snap = useSubscriptionPageStateSnapshot()
const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
diff --git a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
index fdb0948c26c..39c3c24459a 100644
--- a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
@@ -1,18 +1,20 @@
+import dayjs from 'dayjs'
+import { IconBarChart2 } from 'ui'
+
+import Panel from 'components/ui/Panel'
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 Link from 'next/link'
-import { Alert, Button, IconBarChart2 } from 'ui'
+import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
+import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
+import { getAddons } from '../Subscription/Subscription.utils'
import SectionContent from './SectionContent'
import SectionHeader from './SectionHeader'
import { USAGE_CATEGORIES } from './Usage.constants'
import { getUpgradeUrl } from './Usage.utils'
import UsageBarChart from './UsageBarChart'
-import Panel from 'components/ui/Panel'
-import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
-import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
-import { getAddons } from '../Subscription/Subscription.utils'
+import { CPUWarnings, DiskIOBandwidthWarnings, RAMWarnings } from './UsageWarningAlerts'
+import { useResourceWarningsQuery } from 'data/usage/resource-warnings-query'
export interface InfrastructureProps {
projectRef: string
@@ -28,11 +30,12 @@ const Infrastructure = ({
currentBillingCycleSelected,
}: InfrastructureProps) => {
const { data: subscription } = useProjectSubscriptionV2Query({ projectRef })
-
+ const { data: resourceWarnings } = useResourceWarningsQuery()
+ const projectResourceWarnings = resourceWarnings?.find((x) => x.project === projectRef)
const categoryMeta = USAGE_CATEGORIES.find((category) => category.key === 'infra')
const upgradeUrl = getUpgradeUrl(projectRef, subscription)
- const isFreeTier = subscription?.plan?.id === 'free'
+ const isFreePlan = subscription?.plan?.id === 'free'
const { data: addons, isLoading } = useProjectAddonsQuery({ projectRef })
const selectedAddons = addons?.selected_addons ?? []
@@ -125,81 +128,14 @@ const Infrastructure = ({
{attribute.key === 'disk_io_consumption' && (
<>
- {hasLatest && latestIoBudgetConsumption >= 100 ? (
-
-
- ) : hasLatest && latestIoBudgetConsumption >= 80 ? (
-
-
- ) : currentBillingCycleSelected && highestIoBudgetConsumption >= 100 ? (
-
-
- ) : currentBillingCycleSelected && highestIoBudgetConsumption >= 80 ? (
-
-
- ) : null}
+
Pricing
@@ -159,45 +160,13 @@ export default function IndexPage() {Start building for free, collaborate with a team, then scale to millions of users.
-- Your workload has used up all your Disk IO Budget and is now running at the - baseline performance. If you need consistent disk performance, consider - upgrading to a larger compute add-on. -
- - - - - -- Your workload has consumed {latestIoBudgetConsumption}% of your Disk IO - Budget. If you use up all your Disk IO Budget, your instance will reverted - to baseline performance. If you need consistent disk performance, consider - upgrading to a larger compute add-on. -
- - - - - -- Your workload has used up all your Disk IO Budget and reverted to baseline - performance at least once during this billing cycle. If you need consistent - disk performance, consider upgrading to a larger compute add-on. -
- - - - - -- Your workload has consumed {highestIoBudgetConsumption}% of your Disk IO - budget during this billing cycle. If you use up all your Disk IO Budget, - your instance will reverted to baseline performance. If you need consistent - disk performance, consider upgrading to a larger compute add-on. -
- - - - - -Disk IO Bandwidth
@@ -246,6 +182,21 @@ const Infrastructure = ({
{attribute.key === 'disk_io_consumption' ? (
diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.tsx
index d768880161b..3f1d04a8f8d 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.tsx
@@ -1,15 +1,16 @@
import clsx from 'clsx'
import { useParams } from 'common'
+import dayjs from 'dayjs'
+import { useMemo, useRef, useState } from 'react'
+import { InView } from 'react-intersection-observer'
+import { Button, IconAlertCircle, IconExternalLink, IconInfo, IconLoader, cn } from 'ui'
+
import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
import { useInfraMonitoringQuery } from 'data/analytics/infra-monitoring-query'
import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
import { useProjectUsageQuery } from 'data/usage/project-usage-query'
-import dayjs from 'dayjs'
import { useSelectedOrganization } from 'hooks'
import { TIME_PERIODS_BILLING, TIME_PERIODS_REPORTS } from 'lib/constants'
-import { useMemo, useRef, useState } from 'react'
-import { InView } from 'react-intersection-observer'
-import { Button, IconAlertCircle, IconExternalLink, IconInfo, IconLoader, cn } from 'ui'
import Activity from './Activity'
import Bandwidth from './Bandwidth'
import Infrastructure from './Infrastructure'
diff --git a/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/CPUWarnings.tsx b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/CPUWarnings.tsx
new file mode 100644
index 00000000000..8a207e12518
--- /dev/null
+++ b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/CPUWarnings.tsx
@@ -0,0 +1,71 @@
+import { AlertTitle } from '@ui/components/shadcn/ui/alert'
+import Link from 'next/link'
+import { AlertDescription_Shadcn_, Alert_Shadcn_, Button, IconAlertCircle } from 'ui'
+
+interface CPUWarningsProps {
+ isFreePlan: boolean
+ upgradeUrl: string
+ severity?: 'warning' | 'critical' | null
+}
+
+const CPUWarnings = ({ isFreePlan, upgradeUrl, severity }: CPUWarningsProps) => {
+ if (severity === 'warning') {
+ return (
+
+ Your max CPU usage has exceeded 80%
+
+ High CPU usage could result in slower queries, disruption of daily back up routines, and
+ in rare cases, your instance may become unresponsive. If you need more resources, consider
+ upgrading to a larger compute add-on.
+
+
+
+ )
+ }
+
+ if (severity === 'critical') {
+ return (
+
+ Your max CPU usage has reached 100%
+
+ High CPU usage could result in slower queries, disruption of daily back up routines, and
+ in rare cases, your instance may become unresponsive. If you need more resources, consider
+ upgrading to a larger compute add-on.
+
+
+
+ )
+ }
+
+ return null
+}
+
+export default CPUWarnings
diff --git a/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
new file mode 100644
index 00000000000..6d257ac3f10
--- /dev/null
+++ b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
@@ -0,0 +1,106 @@
+import Link from 'next/link'
+import { Alert, Button } from 'ui'
+
+// [Joshen] In the future, conditionals should be from resource exhaustion endpoint as single source of truth
+interface DiskIOBandwidthWarningsProps {
+ isFreePlan: boolean
+ hasLatest: boolean
+ upgradeUrl: string
+ currentBillingCycleSelected: boolean
+ latestIoBudgetConsumption: number
+ highestIoBudgetConsumption: number
+}
+
+const DiskIOBandwidthWarnings = ({
+ isFreePlan,
+ hasLatest,
+ currentBillingCycleSelected,
+ upgradeUrl,
+ latestIoBudgetConsumption,
+ highestIoBudgetConsumption,
+}: DiskIOBandwidthWarningsProps) => {
+ if (hasLatest && latestIoBudgetConsumption >= 100) {
+ return (
+
+
+ )
+ }
+
+ if (hasLatest && latestIoBudgetConsumption >= 80) {
+ return (
+
+
+ )
+ }
+
+ if (currentBillingCycleSelected && highestIoBudgetConsumption >= 100) {
+ return (
+
+
+ )
+ }
+
+ if (currentBillingCycleSelected && highestIoBudgetConsumption >= 80) {
+ return (
+
+
+ )
+ }
+
+ return null
+}
+
+export default DiskIOBandwidthWarnings
diff --git a/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/RAMWarnings.tsx b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/RAMWarnings.tsx
new file mode 100644
index 00000000000..fe233f08695
--- /dev/null
+++ b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/RAMWarnings.tsx
@@ -0,0 +1,71 @@
+import { AlertTitle } from '@ui/components/shadcn/ui/alert'
+import Link from 'next/link'
+import { AlertDescription_Shadcn_, Alert_Shadcn_, Button, IconAlertCircle } from 'ui'
+
+interface RAMWarningsProps {
+ isFreePlan: boolean
+ upgradeUrl: string
+ severity?: 'warning' | 'critical' | null
+}
+
+const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsProps) => {
+ if (severity === 'warning') {
+ return (
+
+ Your memory usage has exceeded 80%
+
+ High memory usage could result in overall degraded performance, and in rare cases, your
+ instance may become unresponsive. If you need more resources, consider upgrading to a
+ larger compute add-on.
+
+
+
+ )
+ }
+
+ if (severity === 'critical') {
+ return (
+
+ Your memory usage has reached 100%
+
+ High memory usage could result in overall degraded performance, and in rare cases, your
+ instance may become unresponsive. If you need more resources, consider upgrading to a
+ larger compute add-on.
+
+
+
+ )
+ }
+
+ return null
+}
+
+export default RAMWarnings
diff --git a/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/index.ts b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/index.ts
new file mode 100644
index 00000000000..3b3afe3f30e
--- /dev/null
+++ b/studio/components/interfaces/BillingV2/Usage/UsageWarningAlerts/index.ts
@@ -0,0 +1,5 @@
+import CPUWarnings from './CPUWarnings'
+import DiskIOBandwidthWarnings from './DiskIOBandwidthWarnings'
+import RAMWarnings from './RAMWarnings'
+
+export { CPUWarnings, DiskIOBandwidthWarnings, RAMWarnings }
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index 28719add668..a97bc84152e 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -1,24 +1,19 @@
-import {
- Badge,
- IconAlertTriangle,
- IconGitBranch,
- IconGitHub,
- IconLoader,
- IconPauseCircle,
- IconTriangle,
-} from 'ui'
+import { IconGitBranch, IconGitHub } from 'ui'
import CardButton from 'components/ui/CardButton'
-import { useProjectReadOnlyStatus } from 'hooks/misc/useProjectReadOnlyStatus'
-import { BASE_PATH, PROJECT_STATUS } from 'lib/constants'
+import { BASE_PATH } from 'lib/constants'
import { Project } from 'types'
import { IntegrationProjectConnection } from 'data/integrations/integrations.types'
+import { ResourceWarning } from 'data/usage/resource-warnings-query'
+import { ProjectCardStatus } from './ProjectCardStatus'
+import { inferProjectStatus } from './ProjectCard.utils'
export interface ProjectCardProps {
project: Project
rewriteHref?: string
githubIntegration?: IntegrationProjectConnection
vercelIntegration?: IntegrationProjectConnection
+ resourceWarnings?: ResourceWarning
}
const ProjectCard = ({
@@ -26,30 +21,26 @@ const ProjectCard = ({
rewriteHref,
githubIntegration,
vercelIntegration,
+ resourceWarnings,
}: ProjectCardProps) => {
const { name, ref: projectRef } = project
const desc = `${project.cloud_provider} | ${project.region}`
- const isReadonly = useProjectReadOnlyStatus(projectRef)
- const isBranchingEnabled = project.preview_branch_refs?.length > 0
+ const isBranchingEnabled = project.preview_branch_refs.length > 0
const isGithubIntegrated = githubIntegration !== undefined
const isVercelIntegrated = vercelIntegration !== undefined
const githubRepository = githubIntegration?.metadata.name ?? undefined
-
- // Project status should supersede is read only status
- const isHealthy = project.status === PROJECT_STATUS.ACTIVE_HEALTHY
- const isPausing =
- project.status === PROJECT_STATUS.GOING_DOWN || project.status === PROJECT_STATUS.PAUSING
- const isPaused = project.status === PROJECT_STATUS.INACTIVE
- const isRestoring = project.status === PROJECT_STATUS.RESTORING
+ const projectStatus = inferProjectStatus(project)
return (
-
+ Your workload has used up all your Disk IO Budget and is now running at the baseline + performance. If you need consistent disk performance, consider upgrading to a larger + compute add-on. +
+ + + + + ++ Your workload has consumed {latestIoBudgetConsumption}% of your Disk IO Budget. If you use + up all your Disk IO Budget, your instance will reverted to baseline performance. If you + need consistent disk performance, consider upgrading to a larger compute add-on. +
+ + + + + ++ Your workload has used up all your Disk IO Budget and reverted to baseline performance at + least once during this billing cycle. If you need consistent disk performance, consider + upgrading to a larger compute add-on. +
+ + + + + ++ Your workload has consumed {highestIoBudgetConsumption}% of your Disk IO budget during + this billing cycle. If you use up all your Disk IO Budget, your instance will reverted to + baseline performance. If you need consistent disk performance, consider upgrading to a + larger compute add-on. +
+ + + + + +{name}
+
+
{name}
+ {desc}
{isVercelIntegrated && (
+
+
+ ,
+ ]}
+ >
+ Your projects can become unresponsive or enter read only mode.{' '}
+ {subscription.plan.id === 'free'
+ ? 'Please upgrade to the Pro plan to ensure that your projects remain available.'
+ : 'Please disable spend cap to ensure that your projects remain available.'}
+
+
+ )}
+
{selectedProjectRef && (
= {
title: '',
queries: {},
},
+ [Presets.STORAGE]: {
+ title: 'Storage',
+ queries: {
+ cacheHitRate: {
+ queryType: 'logs',
+ // storage report does not perform any filtering
+ sql: (_filters) => `
+-- cache-hit-rate
+SELECT
+ timestamp_trunc(timestamp, hour) as timestamp,
+ countif( h.cf_cache_status in ('HIT', 'STALE', 'REVALIDATED', 'UPDATING') ) as hit_count,
+ countif( h.cf_cache_status in ('MISS', 'NONE/UNKNOWN', 'EXPIRED', 'BYPASS', 'DYNAMIC') ) as miss_count
+from edge_logs f
+ cross join unnest(f.metadata) as m
+ cross join unnest(m.request) as r
+ cross join unnest(m.response) as res
+ cross join unnest(res.headers) as h
+where starts_with(r.path, '/storage/v1/object') and r.method = 'GET'
+group by timestamp
+order by timestamp desc
+`,
+ },
+ topCacheMisses: {
+ queryType: 'logs',
+ // storage report does not perform any filtering
+ sql: (_filters) => `
+-- top-cache-misses
+SELECT
+ r.path as path,
+ r.search as search,
+ count(id) as count
+from edge_logs f
+ cross join unnest(f.metadata) as m
+ cross join unnest(m.request) as r
+ cross join unnest(m.response) as res
+ cross join unnest(res.headers) as h
+where starts_with(r.path, '/storage/v1/object')
+ and r.method = 'GET'
+ and h.cf_cache_status in ('MISS', 'NONE/UNKNOWN', 'EXPIRED', 'BYPASS', 'DYNAMIC')
+group by path, search
+order by count desc
+limit 12
+ `,
+ },
+ },
+ },
[Presets.QUERY_PERFORMANCE]: {
title: 'Query performance',
queries: {
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index a13240a5125..900a7c0c437 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -3,6 +3,7 @@ import { DEFAULT_QUERY_PARAMS } from './Reports.constants'
export enum Presets {
API = 'api',
+ STORAGE = 'storage',
AUTH = 'auth',
QUERY_PERFORMANCE = 'query_performance',
}
diff --git a/studio/components/interfaces/Reports/renderers/StorageRenderers.tsx b/studio/components/interfaces/Reports/renderers/StorageRenderers.tsx
new file mode 100644
index 00000000000..cdff467d303
--- /dev/null
+++ b/studio/components/interfaces/Reports/renderers/StorageRenderers.tsx
@@ -0,0 +1,86 @@
+import { TextFormatter } from 'components/interfaces/Settings/Logs/LogsFormatters'
+import Table from 'components/to-be-cleaned/Table'
+import StackedBarChart from 'components/ui/Charts/StackedBarChart'
+import { Fragment } from 'react'
+import { ReportWidgetProps, ReportWidgetRendererProps } from '../ReportWidget'
+
+export const CacheHitRateChartRenderer = (
+ props: ReportWidgetProps<{
+ timestamp: string
+ hit_count: number
+ miss_count: number
+ }>
+) => {
+ const stackedData = props.data.flatMap((datum) => [
+ {
+ timestamp: datum.timestamp,
+ count: datum.hit_count,
+ type: 'hit',
+ },
+ {
+ timestamp: datum.timestamp,
+ count: datum.miss_count,
+ type: 'miss',
+ },
+ ])
+
+ return (
+
+
@@ -77,55 +68,16 @@ const ProjectCard = ({
}
footer={
-
- {desc}
-
- {isHealthy && isReadonly && (
-
+ {!selectedProject && subscription && hasExceededAnyLimits && (
+
-
-
-
- )}
-
- {isRestoring && (
-
-
-
-
-
-
- )}
-
- {isPausing && (
-
-
-
-
-
-
- )}
-
- {isPaused && (
-
-
-
-
-
-
+
-
-
+ {resourceWarnings && (
+
}
- />
+ >
)
}
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCard.utils.ts b/studio/components/interfaces/Home/ProjectList/ProjectCard.utils.ts
new file mode 100644
index 00000000000..ea1ab6b0872
--- /dev/null
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCard.utils.ts
@@ -0,0 +1,34 @@
+import { PROJECT_STATUS } from 'lib/constants'
+import { Project } from 'types'
+
+export const inferProjectStatus = (project: Project) => {
+ let status = undefined
+ switch (project.status) {
+ case PROJECT_STATUS.ACTIVE_HEALTHY:
+ status = 'isHealthy'
+ break
+ case PROJECT_STATUS.GOING_DOWN:
+ case PROJECT_STATUS.PAUSING:
+ status = 'isPausing'
+ break
+ case PROJECT_STATUS.INACTIVE:
+ status = 'isPaused'
+ break
+ case PROJECT_STATUS.RESTORING:
+ status = 'isRestoring'
+ break
+ case PROJECT_STATUS.UNKNOWN:
+ case PROJECT_STATUS.COMING_UP:
+ status = 'isComingUp'
+ break
+ }
+ return status as InferredProjectStatus
+}
+
+export type InferredProjectStatus =
+ | 'isHealthy'
+ | 'isPausing'
+ | 'isPaused'
+ | 'isRestoring'
+ | 'isComingUp'
+ | undefined
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx b/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx
new file mode 100644
index 00000000000..bc889b3c721
--- /dev/null
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx
@@ -0,0 +1,98 @@
+import { RESOURCE_WARNING_MESSAGES } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.constants'
+import { ResourceWarning } from 'data/usage/resource-warnings-query'
+import {
+ Alert_Shadcn_,
+ AlertDescription_Shadcn_,
+ AlertTitle_Shadcn_,
+ IconAlertTriangle,
+ IconLoader,
+ IconPauseCircle,
+ IconRefreshCw,
+} from 'ui'
+import { InferredProjectStatus } from './ProjectCard.utils'
+import { getWarningContent } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.utils'
+
+export interface ProjectCardWarningsProps {
+ resourceWarnings: ResourceWarning
+ projectStatus: InferredProjectStatus
+}
+
+export const ProjectCardStatus = ({
+ resourceWarnings,
+ projectStatus,
+}: ProjectCardWarningsProps) => {
+ //const showResourceExhaustionWarnings = useFlag('resourceExhaustionWarnings')
+ const showResourceExhaustionWarnings = false
+
+ // [Joshen] Read only takes higher precedence over multiple resource warnings
+ const activeWarnings = resourceWarnings.is_readonly_mode_enabled
+ ? ['is_readonly_mode_enabled']
+ : Object.keys(resourceWarnings).filter(
+ (property) =>
+ property !== 'project' &&
+ property !== 'is_readonly_mode_enabled' &&
+ resourceWarnings[property as keyof typeof resourceWarnings] !== null
+ )
+
+ const hasCriticalWarning = activeWarnings.some(
+ (x) => resourceWarnings[x as keyof typeof resourceWarnings] === 'critical'
+ )
+ const isCritical = activeWarnings.includes('is_readonly_mode_enabled') || hasCriticalWarning
+
+ const getTitle = () => {
+ if (projectStatus === 'isPaused') return 'Project is paused'
+ if (projectStatus === 'isPausing') return 'Project is pausing'
+ if (projectStatus === 'isComingUp') return 'Project is coming up'
+ if (projectStatus === 'isRestoring') return 'Project is restoring'
+
+ // If none of the paused/restoring states match, proceed with the default logic
+ return activeWarnings.length > 1
+ ? RESOURCE_WARNING_MESSAGES.multiple_resource_warnings.cardContent[
+ hasCriticalWarning ? 'critical' : 'warning'
+ ].title
+ : getWarningContent(resourceWarnings, activeWarnings[0], 'cardContent')?.title
+ }
+
+ const getDescription = () => {
+ if (projectStatus === 'isPaused') return 'This project will not accept requests until resumed'
+ if (projectStatus === 'isPausing') return 'The pause process will complete in a few minutes'
+ if (projectStatus === 'isComingUp') return 'Your project will be ready in a few minutes'
+ if (projectStatus === 'isRestoring') return 'Your project will be ready in a few minutes'
+
+ // If none of the paused/restoring states match, proceed with the default logic
+ return activeWarnings.length > 1 && showResourceExhaustionWarnings
+ ? RESOURCE_WARNING_MESSAGES.multiple_resource_warnings.cardContent[
+ hasCriticalWarning ? 'critical' : 'warning'
+ ].description
+ : getWarningContent(resourceWarnings, activeWarnings[0], 'cardContent')?.description
+ }
+
+ const alertTitle = getTitle()
+ const alertDescription = getDescription()
+ const alertType = isCritical
+ ? 'destructive'
+ : projectStatus === 'isPaused'
+ ? 'default'
+ : 'warning'
+
+ if (activeWarnings.length === 0 && projectStatus === 'isHealthy') return
+
+ return (
+
+
+ {projectStatus === 'isPaused' || projectStatus === 'isPausing' ? (
+ {alertTitle}
+ {alertDescription}
+
+
+ )
+}
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index 2ba1bdf6de7..ab938e7de38 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -11,6 +11,7 @@ import {
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { usePermissionsQuery } from 'data/permissions/permissions-query'
import { useProjectsQuery } from 'data/projects/projects-query'
+import { ResourceWarning, useResourceWarningsQuery } from 'data/usage/resource-warnings-query'
import { IS_PLATFORM } from 'lib/constants'
import { makeRandomString } from 'lib/helpers'
import { Organization, Project, ResponseError } from 'types'
@@ -35,6 +36,7 @@ const ProjectList = ({ rewriteHref }: ProjectListProps) => {
isError: isErrorPermissions,
error: permissionsError,
} = usePermissionsQuery()
+ const { data: resourceWarnings } = useResourceWarningsQuery()
const { data: allOverdueInvoices } = useOverdueInvoicesQuery({ enabled: IS_PLATFORM })
const projectsByOrg = groupBy(allProjects, 'organization_id')
const isLoadingPermissions = IS_PLATFORM ? _isLoadingPermissions : false
@@ -50,6 +52,7 @@ const ProjectList = ({ rewriteHref }: ProjectListProps) => {
overdueInvoices={(allOverdueInvoices ?? []).filter(
(it) => it.organization_id === organization.id
)}
+ resourceWarnings={resourceWarnings ?? []}
rewriteHref={rewriteHref}
isLoadingPermissions={isLoadingPermissions}
isErrorPermissions={isErrorPermissions}
@@ -72,6 +75,7 @@ type OrganizationProjectsProps = {
organization: Organization
projects: Project[]
overdueInvoices: OverdueInvoicesResponse[]
+ resourceWarnings: ResourceWarning[]
isLoadingPermissions: boolean
isErrorPermissions: boolean
permissionsError: ResponseError | null
@@ -82,9 +86,10 @@ type OrganizationProjectsProps = {
}
const OrganizationProjects = ({
- organization: { id, name, slug, subscription_id },
+ organization: { name, slug, subscription_id },
projects,
overdueInvoices,
+ resourceWarnings,
isLoadingPermissions,
isErrorPermissions,
permissionsError,
@@ -150,6 +155,9 @@ const OrganizationProjects = ({
key={makeRandomString(5)}
project={project}
rewriteHref={rewriteHref ? rewriteHref(project.ref) : undefined}
+ resourceWarnings={resourceWarnings.find(
+ (resourceWarning) => resourceWarning.project === project.ref
+ )}
/>
))
)}
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx
index 44049b6780a..c806533ad1b 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx
@@ -14,8 +14,10 @@ import { Alert, Button } from 'ui'
import { BILLING_BREAKDOWN_METRICS } from './BillingBreakdown.constants'
import BillingMetric from './BillingMetric'
import UpcomingInvoice from './UpcomingInvoice'
+import { useOrgSettingsPageStateSnapshot } from 'state/organization-settings'
const BillingBreakdown = () => {
+ const snap = useOrgSettingsPageStateSnapshot()
const { slug: orgSlug } = useParams()
const {
data: usage,
@@ -93,7 +95,16 @@ const BillingBreakdown = () => {
variant="danger"
title="Your organization's usage has exceeded its included quota"
actions={[
-