+ {lint.icon}
+
+
+ {lint.title}
+ {rules.length > 0 && Disabled }
+
+
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx
index 5c64c5747075b..8d87320e875ce 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx
@@ -15,6 +15,13 @@ export const FEATURE_PREVIEWS = [
isNew: true,
isPlatformOnly: true,
},
+ {
+ key: LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES,
+ name: 'Disable Advisor rules',
+ discussionsUrl: undefined,
+ isNew: true,
+ isPlatformOnly: true,
+ },
{
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR,
name: 'Directly edit database entities',
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
index e3607429f4329..4e889871b8f81 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
@@ -100,10 +100,17 @@ export const useIsBranching2Enabled = () => {
return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]
}
+export const useIsAdvisorRulesEnabled = () => {
+ const { flags } = useFeaturePreviewContext()
+ return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]
+}
+
export const useFeaturePreviewModal = () => {
const [featurePreviewModal, setFeaturePreviewModal] = useQueryState('featurePreviewModal')
+
const isRealtimeSettingsEnabled = useIsRealtimeSettingsFFEnabled()
const gitlessBranchingEnabled = useFlag('gitlessBranching')
+ const advisorRulesEnabled = useFlag('advisorRules')
const selectedFeatureKeyFromQuery = featurePreviewModal?.trim() ?? null
const showFeaturePreviewModal = selectedFeatureKeyFromQuery !== null
@@ -116,11 +123,13 @@ export const useFeaturePreviewModal = () => {
return isRealtimeSettingsEnabled
case 'supabase-ui-branching-2-0':
return gitlessBranchingEnabled
+ case 'supabase-ui-advisor-rules':
+ return advisorRulesEnabled
default:
return true
}
},
- [isRealtimeSettingsEnabled, gitlessBranchingEnabled]
+ [isRealtimeSettingsEnabled, gitlessBranchingEnabled, advisorRulesEnabled]
)
const selectedFeatureKey = !selectedFeatureKeyFromQuery
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
index ce6dce6040878..51cb64d361e07 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -7,6 +7,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { IS_PLATFORM } from 'lib/constants'
import { Badge, Button, Modal, ScrollArea, cn } from 'ui'
+import { AdvisorRulesPreview } from './AdvisorRulesPreview'
import { APISidePanelPreview } from './APISidePanelPreview'
import { Branching2Preview } from './Branching2Preview'
import { CLSPreview } from './CLSPreview'
@@ -20,6 +21,7 @@ const FEATURE_PREVIEW_KEY_TO_CONTENT: {
} = {
[LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]: + Disable specific Advisor categories or rules to prevent them from showing up in Advisor + reports or email notifications. This could be useful for rules that might not be applicable + to your project. +
+
+
+ Enabling this preview will:
+-
+
-
+ Allow you to disable advisor rules for your project from the{' '}
+
+ Advisors section. + +
+
{chart.label}
- This chart is available from Pro plan and above + This chart is available from{' '} + {!!availableIn?.length ? availableIn[0] : 'Pro'}{' '} + plan and above
- {filter.key} {filter.compare} {filter.value}
+ {filter.key}
+ {filter.compare}
+ {filter.value}
))}
- Add Filter
- - - - } - open={showAdder} - onOpenChange={(openValue) => setShowAdder(openValue)} - overlay={ -
+ setShowAdder(openValue)}>
+
+ }
+ >
+ Add filter
+
+
+ 0 ? 'end' : 'start'}
+ portal={true}
+ className="p-0 w-60"
+ >
+
- }
- showClose
- >
- }
- >
- Add filter
-
+
+
@@ -369,4 +372,5 @@ const ReportFilterBar = ({
)
}
+
export default ReportFilterBar
diff --git a/apps/studio/components/interfaces/Reports/SharedAPIReport.constants.ts b/apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants.ts
similarity index 76%
rename from apps/studio/components/interfaces/Reports/SharedAPIReport.constants.ts
rename to apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants.ts
index 1c7f679f2821d..e9d97dbea325f 100644
--- a/apps/studio/components/interfaces/Reports/SharedAPIReport.constants.ts
+++ b/apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants.ts
@@ -1,8 +1,11 @@
import { get } from 'data/fetchers'
-import { generateRegexpWhere } from './Reports.constants'
-import { ReportFilterItem } from './Reports.types'
-import { useQueries } from '@tanstack/react-query'
+import { generateRegexpWhere } from '../Reports.constants'
+import { ReportFilterItem } from '../Reports.types'
+import { useQueries, useQueryClient } from '@tanstack/react-query'
import * as Sentry from '@sentry/nextjs'
+import { useState } from 'react'
+import { useParams } from 'common'
+import { isEqual } from 'lodash'
export const SHARED_API_REPORT_SQL = {
totalRequests: {
@@ -214,30 +217,58 @@ const fetchLogs = async ({
return data
}
+const DEFAULT_KEYS = ['shared-api-report']
+
type SharedAPIReportParams = {
- src: string
- filters: ReportFilterItem[]
+ filterBy: 'auth' | 'realtime' | 'storage' | 'graphql' | 'functions' | 'postgrest'
start: string
end: string
projectRef: string
enabled?: boolean
}
export const useSharedAPIReport = ({
- src = 'edge_logs',
- filters,
+ filterBy,
start,
end,
- projectRef,
enabled = true,
-}: SharedAPIReportParams) => {
+}: Omit
+
+
+
{!hiddenReports.includes('totalRequests') && (
{
- const router = useRouter()
- const captchaRef = useRef(null)
- const [captchaToken, setCaptchaToken] = useState(null)
-
- const { mutate: resetPassword, isLoading } = useResetPasswordMutation({
- onSuccess: async () => {
- toast.success(
- `If you registered using your email and password, you will receive a password reset email. The password reset link expires in 10 minutes.`
- )
- await router.push('/sign-in')
- },
- onError: (error) => {
- setCaptchaToken(null)
- captchaRef.current?.resetCaptcha()
- toast.error(`Failed to send reset email: ${error.message}`)
- },
- })
-
- const onForgotPassword = async ({ email }: { email: string }) => {
- let token = captchaToken
- if (!token) {
- const captchaResponse = await captchaRef.current?.execute({ async: true })
- token = captchaResponse?.response ?? null
- }
-
- resetPassword({
- email,
- hcaptchaToken: token,
- redirectTo: `${
- process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
- ? location.origin
- : process.env.NEXT_PUBLIC_SITE_URL
- }${BASE_PATH}/reset-password`,
- })
- }
-
- return (
-
- )
-}
-
-export default ForgotPasswordForm
diff --git a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
new file mode 100644
index 0000000000000..4aa80ad51d1c0
--- /dev/null
+++ b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
@@ -0,0 +1,197 @@
+import HCaptcha from '@hcaptcha/react-hcaptcha'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/router'
+import { useRef, useState } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import * as z from 'zod'
+
+import { useResetPasswordMutation } from 'data/misc/reset-password-mutation'
+import { BASE_PATH } from 'lib/constants'
+import { auth } from 'lib/gotrue'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const forgotPasswordSchema = z.object({
+ email: z.string().email('Must be a valid email').min(1, 'Email is required'),
+})
+
+const codeSchema = z.object({
+ code: z.string().regex(/^\d{6}$/, 'Code must be 6 digits'),
+})
+
+type ForgotPasswordFormData = z.infer
+type CodeFormData = z.infer
+
+export const ForgotPasswordWizard = () => {
+ const [email, setEmail] = useState('')
+
+ if (email) {
+ return setEmail(email)} />
+}
+
+const ConfirmResetCodeForm = ({ email }: { email: string }) => {
+ const router = useRouter()
+ const [isLoading, setIsLoading] = useState(false)
+
+ const codeForm = useForm({
+ resolver: zodResolver(codeSchema),
+ defaultValues: { code: '' },
+ })
+
+ const onCodeEntered: SubmitHandler = async (data) => {
+ setIsLoading(true)
+ const {
+ data: { user },
+ error,
+ } = await auth.verifyOtp({ email, token: data.code, type: 'recovery' })
+
+ // This fixes a race condition where the user is redirected to the reset password page without the session being set
+ // which causes the user to be redirected to /sign-in page even though he's signed in
+ await new Promise((resolve) => setTimeout(resolve, 1000))
+
+ if (error) {
+ setIsLoading(false)
+ toast.error(`Failed to verify code: ${error.message}`)
+ } else {
+ if (user?.factors?.length) {
+ await router.push({
+ pathname: '/forgot-password-mfa',
+ query: { returnTo: '/reset-password' },
+ })
+ } else {
+ await router.push('reset-password')
+ }
+ }
+ }
+
+ return (
+
+
+
+ )
+}
+
+const ForgotPasswordForm = ({ onSuccess }: { onSuccess: (email: string) => void }) => {
+ const captchaRef = useRef(null)
+ const [captchaToken, setCaptchaToken] = useState(null)
+
+ const forgotPasswordForm = useForm({
+ resolver: zodResolver(forgotPasswordSchema),
+ defaultValues: { email: '' },
+ })
+
+ const { mutate: resetPassword, isLoading } = useResetPasswordMutation({
+ onSuccess: () => {
+ onSuccess(forgotPasswordForm.getValues('email'))
+ },
+ onError: (error) => {
+ setCaptchaToken(null)
+ captchaRef.current?.resetCaptcha()
+ toast.error(`Failed to send reset email: ${error.message}`)
+ },
+ })
+
+ const onForgotPassword: SubmitHandler = async (data) => {
+ let token = captchaToken
+ if (!token) {
+ const captchaResponse = await captchaRef.current?.execute({ async: true })
+ token = captchaResponse?.response ?? null
+ }
+
+ resetPassword({
+ email: data.email,
+ hcaptchaToken: token,
+ redirectTo: `${
+ process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
+ ? location.origin
+ : process.env.NEXT_PUBLIC_SITE_URL
+ }${BASE_PATH}/reset-password`,
+ })
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index d048a96b0feb4..868b5d9616200 100644
--- a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -1,22 +1,66 @@
+import { zodResolver } from '@hookform/resolvers/zod'
import * as Sentry from '@sentry/nextjs'
+import { Eye, EyeOff } from 'lucide-react'
import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
+import { z } from 'zod'
import { auth } from 'lib/gotrue'
-import { passwordSchema } from 'lib/schemas'
-import { Button, Form, Input } from 'ui'
+import {
+ Button,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormMessage_Shadcn_,
+ Input,
+} from 'ui'
+
+import PasswordConditionsHelper from './PasswordConditionsHelper'
const WHITELIST_ERRORS = [
'New password should be different from the old password',
'Password is known to be weak and easy to guess, please choose a different one',
]
+// Convert the existing yup passwordSchema to Zod
+const passwordSchema = z.object({
+ password: z
+ .string()
+ .min(1, 'Password is required')
+ .max(72, 'Password cannot exceed 72 characters')
+ .refine((password) => {
+ // Basic password validation - you can enhance this based on your requirements
+ const hasUppercase = /[A-Z]/.test(password)
+ const hasLowercase = /[a-z]/.test(password)
+ const hasNumber = /[0-9]/.test(password)
+ const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};`':"\\|,.<>\/?]/.test(password)
+ const isLongEnough = password.length >= 8
+
+ return hasUppercase && hasLowercase && hasNumber && hasSpecialChar && isLongEnough
+ }, 'Password must contain at least 8 characters, including uppercase, lowercase, number, and special character'),
+})
+
+type FormData = z.infer
+
const ResetPasswordForm = () => {
const router = useRouter()
+ const [showConditions, setShowConditions] = useState(false)
+ const [passwordHidden, setPasswordHidden] = useState(true)
- const onResetPassword = async ({ password }: { password: string }) => {
+ const form = useForm({
+ resolver: zodResolver(passwordSchema),
+ defaultValues: {
+ password: '',
+ },
+ mode: 'onChange',
+ })
+
+ const onResetPassword = async (data: FormData) => {
const toastId = toast.loading('Saving password...')
- const { error } = await auth.updateUser({ password })
+ const { error } = await auth.updateUser({ password: data.password })
if (!error) {
toast.success('Password saved successfully!', { id: toastId })
@@ -33,42 +77,59 @@ const ResetPasswordForm = () => {
}
return (
-
+
+
+
)
}
diff --git a/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx b/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx
index 7b4544c017dfe..a26200f858e01 100644
--- a/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx
+++ b/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx
@@ -11,8 +11,8 @@ export const AdvisorRulesLayout = ({ children }: PropsWithChildren<{}>) => {
) => {
const project = useSelectedProject()
- const advisorRules = useFlag('advisorRules')
+ const advisorRules = useIsAdvisorRulesEnabled()
const router = useRouter()
const page = router.pathname.split('/')[4]
diff --git a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsMenu.utils.ts b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsMenu.utils.ts
index a7eef66d4293c..ee22c2d7ba5a2 100644
--- a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsMenu.utils.ts
+++ b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsMenu.utils.ts
@@ -38,7 +38,7 @@ export const generateAdvisorsMenu = (
title: 'Configuration',
items: [
{
- name: 'Advisor Rules',
+ name: 'Settings',
key: 'rules',
url: `/project/${ref}/advisors/rules/security`,
items: [],
diff --git a/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx b/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx
index 5cb4130dce271..b52a30832aca8 100644
--- a/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx
@@ -3,7 +3,6 @@ import { PropsWithChildren } from 'react'
import { useParams } from 'common'
import { useCurrentPath } from 'hooks/misc/useCurrentPath'
-import { useFlag } from 'hooks/ui/useFlag'
import { NavMenu, NavMenuItem } from 'ui'
import { ScaffoldContainerLegacy, ScaffoldTitle } from '../Scaffold'
@@ -13,9 +12,6 @@ function OrganizationSettingsLayout({ children }: PropsWithChildren) {
const fullCurrentPath = useCurrentPath()
const [currentPath] = fullCurrentPath.split('#')
- // [Joshen] RE Organization Settings - need to figure out how to enforce MFA across users before this goes live
- const newSecurityPage = useFlag('showOrganizationSecuritySettings')
-
// Hide these settings in the new layout on the following paths
const isHidden = (path: string) => {
return (
@@ -35,7 +31,7 @@ function OrganizationSettingsLayout({ children }: PropsWithChildren) {
label: 'General',
href: `/org/${slug}/general`,
},
- newSecurityPage && {
+ {
label: 'Security',
href: `/org/${slug}/security`,
},
diff --git a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx
index 1ebb482970c98..d3d034eef97a5 100644
--- a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx
+++ b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx
@@ -29,6 +29,7 @@ const ReportsMenu = () => {
const edgeFnEnabled = useFlag('edgefunctionreport')
const realtimeEnabled = useFlag('realtimeReport')
const storageReportEnabled = useFlag('storagereport')
+ const postgrestReportEnabled = useFlag('postgrestreport')
// b/c fly doesn't support storage
const storageSupported = useIsFeatureEnabled('project_storage:all')
@@ -133,24 +134,34 @@ const ReportsMenu = () => {
key: 'database',
url: `/project/${ref}/reports/database${preservedQueryParams}`,
},
- ...(realtimeEnabled
+ ...(edgeFnEnabled
? [
{
- name: 'Realtime',
- key: 'realtime',
- url: `/project/${ref}/reports/realtime${preservedQueryParams}`,
+ name: 'Edge Functions',
+ key: 'edge-functions',
+ url: `/project/${ref}/reports/edge-functions${preservedQueryParams}`,
},
]
: []),
- ...(edgeFnEnabled
+ ...(postgrestReportEnabled
? [
{
- name: 'Edge Functions',
- key: 'edge-functions',
- url: `/project/${ref}/reports/edge-functions${preservedQueryParams}`,
+ name: 'PostgREST',
+ key: 'postgrest',
+ url: `/project/${ref}/reports/postgrest${preservedQueryParams}`,
},
]
: []),
+ ...(realtimeEnabled
+ ? [
+ {
+ name: 'Realtime',
+ key: 'realtime',
+ url: `/project/${ref}/reports/realtime${preservedQueryParams}`,
+ },
+ ]
+ : []),
+
...(storageEnabled
? [
{
diff --git a/apps/studio/components/layouts/StorageLayout/BucketRow.tsx b/apps/studio/components/layouts/StorageLayout/BucketRow.tsx
index 5b22530cc6429..f272a89c53dea 100644
--- a/apps/studio/components/layouts/StorageLayout/BucketRow.tsx
+++ b/apps/studio/components/layouts/StorageLayout/BucketRow.tsx
@@ -79,7 +79,7 @@ const BucketRow = ({
} className="mr-1 p-1.5 w-7" />
- {bucket.type === 'ANALYTICS' && (
+ {bucket.type !== 'ANALYTICS' && (
<>
!att.name.includes('max'))
const isPercentage = format === '%'
- const isRamChart = chartData?.some((att: any) => att.name.toLowerCase().includes('ram_'))
+ const isRamChart =
+ !chartData?.some((att: any) => att.name.toLowerCase() === 'ram_usage') &&
+ chartData?.some((att: any) => att.name.toLowerCase().includes('ram_'))
const isDiskSpaceChart = chartData?.some((att: any) =>
att.name.toLowerCase().includes('disk_space_')
)
diff --git a/apps/studio/components/ui/Charts/ComposedChart.utils.tsx b/apps/studio/components/ui/Charts/ComposedChart.utils.tsx
index d22f69fed6a91..09aaaef44a467 100644
--- a/apps/studio/components/ui/Charts/ComposedChart.utils.tsx
+++ b/apps/studio/components/ui/Charts/ComposedChart.utils.tsx
@@ -144,7 +144,9 @@ const CustomTooltip = ({
const maxValueData =
maxValueAttribute && payload?.find((p: any) => p.dataKey === maxValueAttribute.attribute)
const maxValue = maxValueData?.value
- const isRamChart = payload?.some((p: any) => p.dataKey.toLowerCase().includes('ram_'))
+ const isRamChart =
+ !payload?.some((p: any) => p.dataKey.toLowerCase() === 'ram_usage') &&
+ payload?.some((p: any) => p.dataKey.toLowerCase().includes('ram_'))
const isDBSizeChart =
payload?.some((p: any) => p.dataKey.toLowerCase().includes('disk_fs_')) ||
payload?.some((p: any) => p.dataKey.toLowerCase().includes('pg_database_size'))
diff --git a/apps/studio/data/lint/create-lint-rule-mutation.ts b/apps/studio/data/lint/create-lint-rule-mutation.ts
index b90d0716d2517..ae8bdd527d5a7 100644
--- a/apps/studio/data/lint/create-lint-rule-mutation.ts
+++ b/apps/studio/data/lint/create-lint-rule-mutation.ts
@@ -41,7 +41,10 @@ export const useLintRuleCreateMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(lintKeys.lintRules(projectRef))
+ await Promise.all([
+ queryClient.invalidateQueries(lintKeys.lintRules(projectRef)),
+ queryClient.invalidateQueries(lintKeys.lint(projectRef)),
+ ])
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/lint/delete-lint-rule-mutation.ts b/apps/studio/data/lint/delete-lint-rule-mutation.ts
index 943f353913587..70dca1fdd73f8 100644
--- a/apps/studio/data/lint/delete-lint-rule-mutation.ts
+++ b/apps/studio/data/lint/delete-lint-rule-mutation.ts
@@ -35,7 +35,10 @@ export const useLintRuleDeleteMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(lintKeys.lintRules(projectRef))
+ await Promise.all([
+ queryClient.invalidateQueries(lintKeys.lintRules(projectRef)),
+ queryClient.invalidateQueries(lintKeys.lint(projectRef)),
+ ])
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/reports/database-charts.ts b/apps/studio/data/reports/database-charts.ts
index e8e91cdc37539..1a884dcc277b1 100644
--- a/apps/studio/data/reports/database-charts.ts
+++ b/apps/studio/data/reports/database-charts.ts
@@ -4,28 +4,187 @@ import { Organization } from 'types'
import { Project } from '../projects/project-detail-query'
import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils'
-export const getReportAttributes = (isFreePlan: boolean) => [
- { id: 'ram_usage', label: 'Memory usage', hide: false },
- { id: 'avg_cpu_usage', label: 'Average CPU usage', hide: false },
- { id: 'max_cpu_usage', label: 'Max CPU usage', hide: false },
- { id: 'disk_iops_write', label: 'Disk IOps write', hide: false },
- { id: 'disk_iops_read', label: 'Disk IOps read', hide: false },
- {
- id: 'pg_stat_database_num_backends',
- label: 'Pooler to database connections',
- hide: false,
- },
- {
- id: 'supavisor_connections_active',
- label: 'Client to Shared Pooler connections',
- hide: false,
- },
- {
- id: 'client_connections_pgbouncer',
- label: 'Client to Dedicated Pooler connections',
- hide: isFreePlan,
- },
-]
+export const getReportAttributes = (org: Organization, project: Project): ReportAttributes[] => {
+ const computeSize = project?.infra_compute_size || 'medium'
+
+ return [
+ {
+ id: 'ram-usage',
+ label: 'Memory usage',
+ availableIn: ['free', 'pro'],
+ hide: false,
+ showTooltip: false,
+ showLegend: false,
+ hideChartType: false,
+ defaultChartStyle: 'bar',
+ showMaxValue: false,
+ showGrid: false,
+ syncId: 'database-reports',
+ valuePrecision: 0,
+ format: '%',
+ attributes: [
+ {
+ attribute: 'ram_usage',
+ provider: 'infra-monitoring',
+ label: 'Memory usage',
+ format: '%',
+ tooltip: 'RAM usage by the database',
+ },
+ ],
+ },
+ {
+ id: 'avg_cpu_usage',
+ label: 'CPU usage',
+ syncId: 'database-reports',
+ format: '%',
+ valuePrecision: 2,
+ availableIn: ['free', 'pro'],
+ hide: false,
+ showTooltip: false,
+ showLegend: false,
+ showMaxValue: false,
+ showGrid: false,
+ hideChartType: false,
+ defaultChartStyle: 'bar',
+ attributes: [
+ {
+ attribute: 'avg_cpu_usage',
+ provider: 'infra-monitoring',
+ label: 'Average CPU usage',
+ format: '%',
+ tooltip: 'Average CPU usage',
+ },
+ ],
+ },
+ {
+ id: 'disk-iops',
+ label: 'Disk Input/Output operations per second (IOPS)',
+ syncId: 'database-reports',
+ availableIn: ['free', 'pro'],
+ hide: false,
+ showTooltip: true,
+ valuePrecision: 2,
+ showLegend: true,
+ hideChartType: false,
+ showGrid: true,
+ showMaxValue: false,
+ YAxisProps: {
+ width: 35,
+ tickFormatter: (value: any) => numberFormatter(value, 2),
+ },
+ defaultChartStyle: 'line',
+ docsUrl: 'https://supabase.com/docs/guides/platform/compute-and-disk#compute-size',
+ attributes: [
+ {
+ attribute: 'disk_iops_write',
+ provider: 'infra-monitoring',
+ label: 'write IOPS',
+ tooltip:
+ 'Number of write operations per second. High values indicate frequent data writes, logging, or transaction activity',
+ },
+ {
+ attribute: 'disk_iops_read',
+ provider: 'infra-monitoring',
+ label: 'read IOPS',
+ tooltip:
+ 'Number of read operations per second. High values suggest frequent disk reads due to queries or poor caching',
+ },
+ {
+ attribute: 'disk_iops_max',
+ provider: 'reference-line',
+ label: 'Max IOPS',
+ value: getIOPSLimits(computeSize),
+ tooltip:
+ 'Maximum IOPS (Input/Output Operations Per Second) for your current compute size',
+ isMaxValue: true,
+ },
+ ],
+ },
+ {
+ id: 'disk-io-usage',
+ label: 'Disk IO Usage',
+ syncId: 'database-reports',
+ availableIn: ['team', 'enterprise'],
+ hide: false,
+ format: '%',
+ attributes: [],
+ },
+ {
+ id: 'pooler-database-connections',
+ label: 'Pooler to Database connections',
+ syncId: 'database-reports',
+ valuePrecision: 0,
+ availableIn: ['free', 'pro'],
+ hide: false,
+ showTooltip: false,
+ showLegend: false,
+ showMaxValue: false,
+ hideChartType: false,
+ showGrid: false,
+ defaultChartStyle: 'bar',
+ attributes: [
+ {
+ attribute: 'pg_stat_database_num_backends',
+ provider: 'infra-monitoring',
+ label: 'Database connections',
+ tooltip: 'Number of pooler connections to the database',
+ },
+ ],
+ },
+ {
+ id: 'supavisor-connections',
+ label: 'Shared Pooler connections',
+ syncId: 'database-reports',
+ valuePrecision: 0,
+ availableIn: ['free', 'pro'],
+ hide: false,
+ showTooltip: false,
+ showLegend: false,
+ showMaxValue: false,
+ showGrid: false,
+ hideChartType: false,
+ defaultChartStyle: 'bar',
+ attributes: [
+ {
+ attribute: 'supavisor_connections_active',
+ provider: 'infra-monitoring',
+ label: 'Client to Shared Pooler connections',
+ tooltip: 'Active connections from clients to the shared pooler',
+ },
+ ],
+ },
+ {
+ id: 'pgbouncer-connections',
+ label: 'Dedicated Pooler connections',
+ syncId: 'database-reports',
+ valuePrecision: 0,
+ availableIn: ['pro', 'team'],
+ hide: false,
+ showTooltip: false,
+ showLegend: false,
+ showMaxValue: false,
+ showGrid: false,
+ hideChartType: false,
+ defaultChartStyle: 'bar',
+ attributes: [
+ {
+ attribute: 'client_connections_pgbouncer',
+ provider: 'infra-monitoring',
+ label: 'Client to Dedicated Pooler connections',
+ tooltip: 'PgBouncer connections',
+ },
+ ],
+ },
+ {
+ id: 'disk-size',
+ label: 'Disk Usage',
+ syncId: 'database-reports',
+ availableIn: ['team', 'enterprise'],
+ hide: false,
+ attributes: [],
+ },
+ ]
+}
export const getReportAttributesV2: (org: Organization, project: Project) => ReportAttributes[] = (
org,
@@ -40,7 +199,7 @@ export const getReportAttributesV2: (org: Organization, project: Project) => Rep
{
id: 'ram-usage',
label: 'Memory usage',
- availableIn: ['free', 'pro', 'team'],
+ availableIn: ['team', 'enterprise'],
hide: false,
showTooltip: true,
showLegend: true,
@@ -84,7 +243,7 @@ export const getReportAttributesV2: (org: Organization, project: Project) => Rep
syncId: 'database-reports',
format: '%',
valuePrecision: 2,
- availableIn: ['free', 'pro', 'team'],
+ availableIn: ['team', 'enterprise'],
hide: false,
showTooltip: true,
showLegend: true,
@@ -150,7 +309,7 @@ export const getReportAttributesV2: (org: Organization, project: Project) => Rep
id: 'disk-iops',
label: 'Disk Input/Output operations per second (IOPS)',
syncId: 'database-reports',
- availableIn: ['free', 'pro', 'team'],
+ availableIn: ['team', 'enterprise'],
hide: false,
showTooltip: true,
valuePrecision: 2,
@@ -194,7 +353,7 @@ export const getReportAttributesV2: (org: Organization, project: Project) => Rep
id: 'disk-io-usage',
label: 'Disk IO Usage',
syncId: 'database-reports',
- availableIn: ['pro', 'team'],
+ availableIn: ['team', 'enterprise'],
hide: false,
showTooltip: true,
format: '%',
@@ -220,40 +379,11 @@ export const getReportAttributesV2: (org: Organization, project: Project) => Rep
},
{
id: 'client-connections',
- label: 'Database connections',
- valuePrecision: 0,
- availableIn: ['free', 'pro', 'team'],
- hide: !isFreePlan, // [Jordi] Paid plans can see grouped client connections instead, so this chart is not needed for them. See below.
- showTooltip: true,
- showLegend: false,
- showMaxValue: true,
- hideChartType: false,
- showGrid: true,
- YAxisProps: { width: 30 },
- defaultChartStyle: 'line',
- attributes: [
- {
- attribute: 'pg_stat_database_num_backends',
- provider: 'infra-monitoring',
- label: 'Total connections',
- tooltip: 'Total number of client connections to the database',
- },
- {
- attribute: 'max_db_connections',
- provider: 'reference-line',
- label: 'Max connections',
- value: getConnectionLimits(computeSize).direct,
- tooltip: 'Max available connections for your current compute size',
- isMaxValue: true,
- },
- ],
- },
- {
- id: 'client-connections',
- label: 'Direct Database Client Connections Grouped',
+ label: 'Database Connections',
+ syncId: 'database-reports',
valuePrecision: 0,
- availableIn: ['pro', 'team'],
- hide: isFreePlan, // [Jordi] Paid plans can see grouped client connections instead, so this chart is not needed for them. See above.
+ availableIn: ['team', 'enterprise'],
+ hide: false,
showTooltip: true,
showLegend: true,
showMaxValue: true,
@@ -399,7 +529,6 @@ export const getReportAttributesV2: (org: Organization, project: Project) => Rep
tooltip:
'Disk usage by the write-ahead log. The usage depends on your WAL settings and the amount of data being written to the database',
},
-
{
attribute: 'pg_database_size',
provider: 'infra-monitoring',
diff --git a/apps/studio/pages/forgot-password-mfa.tsx b/apps/studio/pages/forgot-password-mfa.tsx
new file mode 100644
index 0000000000000..7061c9c84a820
--- /dev/null
+++ b/apps/studio/pages/forgot-password-mfa.tsx
@@ -0,0 +1,94 @@
+import * as Sentry from '@sentry/nextjs'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { useParams } from 'common'
+import SignInMfaForm from 'components/interfaces/SignIn/SignInMfaForm'
+import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
+import { Loading } from 'components/ui/Loading'
+import useLatest from 'hooks/misc/useLatest'
+import { auth, buildPathWithParams, getAccessToken, getReturnToPath } from 'lib/gotrue'
+import type { NextPageWithLayout } from 'types'
+
+const ForgotPasswordMfa: NextPageWithLayout = () => {
+ const router = useRouter()
+
+ const queryClient = useQueryClient()
+ const {
+ // current methods for mfa are github and sso
+ method: signInMethod = 'unknown',
+ } = useParams()
+ const signInMethodRef = useLatest(signInMethod)
+
+ const [loading, setLoading] = useState(true)
+
+ // This useEffect redirects the user to MFA if they're already halfway signed in
+ useEffect(() => {
+ auth
+ .initialize()
+ .then(async ({ error }) => {
+ if (error) {
+ // if there was a problem signing in via the url, don't redirect
+ setLoading(false)
+ return
+ }
+
+ const token = await getAccessToken()
+
+ if (token) {
+ const { data, error } = await auth.mfa.getAuthenticatorAssuranceLevel()
+ if (error) {
+ // if there was a problem signing in via the url, don't redirect
+ toast.error(
+ `Failed to retrieve assurance level: ${error.message}. Please try signing in again`
+ )
+ setLoading(false)
+ return router.push({ pathname: '/sign-in', query: router.query })
+ }
+
+ if (data.currentLevel === data.nextLevel) {
+ await queryClient.resetQueries()
+ router.push(getReturnToPath())
+ return
+ } else {
+ // Show the MFA form
+ setLoading(false)
+ return
+ }
+ } else {
+ // if the user doesn't have a token, he needs to go back to the sign-in page
+ const redirectTo = buildPathWithParams('/sign-in')
+ router.replace(redirectTo)
+ return
+ }
+ })
+ .catch((error) => {
+ Sentry.captureException(error)
+ console.error('Auth initialization error:', error)
+ toast.error('Failed to initialize authentication. Please try again.')
+ setLoading(false)
+ router.push({ pathname: '/sign-in', query: router.query })
+ })
+ }, [])
+
+ if (loading) {
+ return (
+
+
+ )
+}
+
+export default ForgotPasswordMfa
diff --git a/apps/studio/pages/forgot-password.tsx b/apps/studio/pages/forgot-password.tsx
index 9768b22a13c92..03f7a5a75fa55 100644
--- a/apps/studio/pages/forgot-password.tsx
+++ b/apps/studio/pages/forgot-password.tsx
@@ -1,4 +1,4 @@
-import ForgotPasswordForm from 'components/interfaces/SignIn/ForgotPasswordForm'
+import { ForgotPasswordWizard } from 'components/interfaces/SignIn/ForgotPasswordWizard'
import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
import Link from 'next/link'
import type { NextPageWithLayout } from 'types'
@@ -7,7 +7,7 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
return (
<>
-
)
diff --git a/apps/studio/pages/reset-password.tsx b/apps/studio/pages/reset-password.tsx
index 96368073eff63..67585813e65e7 100644
--- a/apps/studio/pages/reset-password.tsx
+++ b/apps/studio/pages/reset-password.tsx
@@ -11,21 +11,14 @@ const ResetPasswordPage: NextPageWithLayout = () => {
+
+ )
+ }
+
+ return (
+
-
@@ -22,8 +22,8 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
ForgotPasswordPage.getLayout = (page) => (
{page}
diff --git a/apps/studio/pages/project/[ref]/reports/auth.tsx b/apps/studio/pages/project/[ref]/reports/auth.tsx
index 791aeb1db2d9f..aa9bd441c11b6 100644
--- a/apps/studio/pages/project/[ref]/reports/auth.tsx
+++ b/apps/studio/pages/project/[ref]/reports/auth.tsx
@@ -17,9 +17,10 @@ import { getAuthReportAttributes } from 'data/reports/auth-charts'
import { useReportDateRange } from 'hooks/misc/useReportDateRange'
import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import { DatePickerValue } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
import type { NextPageWithLayout } from 'types'
-import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport'
+import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
+import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
+import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
const AuthReport: NextPageWithLayout = () => {
return (
@@ -53,6 +54,22 @@ const AuthUsage = () => {
handleDatePickerChange,
} = useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES)
+ const {
+ data,
+ error,
+ isLoading,
+ refetch,
+ isRefetching,
+ filters,
+ addFilter,
+ removeFilters,
+ isLoadingData,
+ } = useSharedAPIReport({
+ filterBy: 'auth',
+ start: selectedDateRange?.period_start?.date,
+ end: selectedDateRange?.period_end?.date,
+ })
+
const queryClient = useQueryClient()
const [isRefreshing, setIsRefreshing] = useState(false)
@@ -75,6 +92,7 @@ const AuthUsage = () => {
])
})
})
+ refetch()
setTimeout(() => setIsRefreshing(false), 1000)
}
@@ -134,11 +152,25 @@ const AuthUsage = () => {
orgPlanId={orgPlan?.id}
/>
))}
-
+
+ )
+}
+
+PostgRESTReport.getLayout = (page) => (
+
+ {page}
+
+)
+
+export type UpdateDateRange = (from: string, to: string) => void
+export default PostgRESTReport
+
+const PostgrestReport = () => {
+ const { db, chart } = useParams()
+ const {
+ selectedDateRange,
+ datePickerValue,
+ datePickerHelpers,
+ showUpgradePrompt,
+ setShowUpgradePrompt,
+ handleDatePickerChange: handleDatePickerChangeFromHook,
+ } = useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES)
+
+ const {
+ data,
+ error,
+ isLoading,
+ refetch,
+ isRefetching,
+ filters,
+ addFilter,
+ removeFilters,
+ isLoadingData,
+ } = useSharedAPIReport({
+ filterBy: 'postgrest',
+ start: selectedDateRange?.period_start?.date,
+ end: selectedDateRange?.period_end?.date,
+ })
+
+ const state = useDatabaseSelectorStateSnapshot()
+
+ // [Joshen] Empty dependency array as we only want this running once
+ useEffect(() => {
+ if (db !== undefined) {
+ setTimeout(() => {
+ // [Joshen] Adding a timeout here to support navigation from settings to reports
+ // Both are rendering different instances of ProjectLayout which is where the
+ // DatabaseSelectorContextProvider lies in (unless we reckon shifting the provider up one more level is better)
+ state.setSelectedDatabaseId(db)
+ }, 100)
+ }
+ if (chart !== undefined) {
+ setTimeout(() => {
+ const el = document.getElementById(chart)
+ if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+ }, 200)
+ }
+ }, [])
+
+ const handleDatePickerChange = (values: DatePickerValue) => {
+ handleDatePickerChangeFromHook(values)
+ }
+
+ return (
+ <>
+
+
+ }
+ >
+
+ Database health}>
-
- {selectedDateRange &&
- REPORT_ATTRIBUTES.filter((attr) => !attr.hide).map((attr) => (
- !chart.hide).map((chart) => (
+
-
- )}
+ ) : (
+
diff --git a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx b/apps/studio/pages/project/[ref]/reports/edge-functions.tsx
index 8260039be9012..0de2d1c7df709 100644
--- a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx
+++ b/apps/studio/pages/project/[ref]/reports/edge-functions.tsx
@@ -94,16 +94,16 @@ const EdgeFunctionsUsage = () => {
-
}>
-
- {functionIds.length === 0
- ? 'All Functions'
- : `${functionIds.length} function${
- functionIds.length > 1 ? 's' : ''
- } selected`}
-
+ {functionIds.length === 0
+ ? 'All Functions'
+ : `${functionIds.length} function${
+ functionIds.length > 1 ? 's' : ''
+ } selected`}
@@ -198,36 +211,25 @@ const EdgeFunctionsUsage = () => {
- {selectedDateRange && (
-
-
+
}
>
- {selectedDateRange &&
- EDGEFN_CHARTS.filter((attr) => !attr.hide).map((attr, i) => (
-
+
diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx
index e0a4c9faffd20..3876405462fb8 100644
--- a/apps/studio/pages/project/[ref]/reports/database.tsx
+++ b/apps/studio/pages/project/[ref]/reports/database.tsx
@@ -21,12 +21,11 @@ import ChartHandler from 'components/ui/Charts/ChartHandler'
import Panel from 'components/ui/Panel'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
import ComposedChartHandler from 'components/ui/Charts/ComposedChartHandler'
-import {
- LogsDatePicker,
- DatePickerValue,
-} from 'components/interfaces/Settings/Logs/Logs.DatePickers'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
import GrafanaPromoBanner from 'components/ui/GrafanaPromoBanner'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import ReportChart from 'components/interfaces/Reports/ReportChart'
import { analyticsKeys } from 'data/analytics/keys'
import { getReportAttributes, getReportAttributesV2 } from 'data/reports/database-charts'
@@ -39,7 +38,6 @@ import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { useReportDateRange } from 'hooks/misc/useReportDateRange'
import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
import { formatBytes } from 'lib/helpers'
-import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
import type { NextPageWithLayout } from 'types'
import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils'
@@ -79,7 +77,6 @@ const DatabaseUsage = () => {
handleDatePickerChange,
} = useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES)
- const isFreePlan = !isOrgPlanLoading && orgPlan?.id === 'free'
const isTeamsOrEnterprisePlan =
!isOrgPlanLoading && (orgPlan?.id === 'team' || orgPlan?.id === 'enterprise')
const showChartsV2 = isReportsV2 || isTeamsOrEnterprisePlan
@@ -108,7 +105,7 @@ const DatabaseUsage = () => {
},
})
- const REPORT_ATTRIBUTES = getReportAttributes(isFreePlan)
+ const REPORT_ATTRIBUTES = getReportAttributes(org!, project!)
const REPORT_ATTRIBUTES_V2 = getReportAttributesV2(org!, project!)
const { isLoading: isUpdatingDiskSize } = useProjectDiskResizeMutation({
@@ -151,6 +148,20 @@ const DatabaseUsage = () => {
)
})
})
+ } else {
+ REPORT_ATTRIBUTES.forEach((chart: any) => {
+ chart.attributes.forEach((attr: any) => {
+ queryClient.invalidateQueries(
+ analyticsKeys.infraMonitoring(ref, {
+ attribute: attr.attribute,
+ startDate: period_start.date,
+ endDate: period_end.date,
+ interval,
+ databaseIdentifier: state.selectedDatabaseId,
+ })
+ )
+ })
+ })
}
if (isReplicaSelected) {
queryClient.invalidateQueries(
@@ -229,44 +240,59 @@ const DatabaseUsage = () => {
}
>
- {showChartsV2 ? (
- selectedDateRange &&
- REPORT_ATTRIBUTES_V2.filter((chart) => !chart.hide).map((chart) => (
-
+
Auth API Gateway
+
+ {
description="Report data can be stored for a maximum of 3 months depending on the plan that your project is on."
source="edgeFunctionsReportDateRange"
/>
+ {selectedDateRange && (
+
+
+
+ )}
+ + {dayjs(selectedDateRange.period_start.date).format('MMM D, h:mma')} +
+
+
+ {dayjs(selectedDateRange.period_end.date).format('MMM D, h:mma')} +
+
-
- )}
- {dayjs(selectedDateRange.period_start.date).format('MMM D, h:mma')} -
-
-
- {dayjs(selectedDateRange.period_end.date).format('MMM D, h:mma')} -
-
+ {selectedDateRange &&
+ EDGEFN_CHARTS.filter((attr) => !attr.hide).map((attr, i) => (
+
)
diff --git a/apps/studio/pages/project/[ref]/reports/postgrest.tsx b/apps/studio/pages/project/[ref]/reports/postgrest.tsx
new file mode 100644
index 0000000000000..65f1c238a7d13
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/reports/postgrest.tsx
@@ -0,0 +1,159 @@
+import { useEffect } from 'react'
+import dayjs from 'dayjs'
+import { ArrowRight, RefreshCw } from 'lucide-react'
+import { useParams } from 'common'
+
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import ReportHeader from 'components/interfaces/Reports/ReportHeader'
+import ReportPadding from 'components/interfaces/Reports/ReportPadding'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
+import {
+ LogsDatePicker,
+ DatePickerValue,
+} from 'components/interfaces/Settings/Logs/Logs.DatePickers'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
+import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+
+import type { NextPageWithLayout } from 'types'
+import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
+import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
+import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
+
+const PostgRESTReport: NextPageWithLayout = () => {
+ return (
+
+
+
+
+ )}
+ + {dayjs(selectedDateRange.period_start.date).format('MMM D, h:mma')} +
+
+
+ {dayjs(selectedDateRange.period_end.date).format('MMM D, h:mma')} +
+
+
+
+
+ )
+}
diff --git a/apps/studio/pages/project/[ref]/reports/realtime.tsx b/apps/studio/pages/project/[ref]/reports/realtime.tsx
index 365850a75ee4f..27b2c81abce88 100644
--- a/apps/studio/pages/project/[ref]/reports/realtime.tsx
+++ b/apps/studio/pages/project/[ref]/reports/realtime.tsx
@@ -33,7 +33,8 @@ import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
import type { NextPageWithLayout } from 'types'
import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils'
-import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport'
+import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
+import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
const RealtimeReport: NextPageWithLayout = () => {
return (
@@ -55,21 +56,7 @@ export default RealtimeReport
const RealtimeUsage = () => {
const [isRefreshing, setIsRefreshing] = useState(false)
const { db, chart, ref } = useParams()
- const report = useApiReport()
- const {
- data,
- error,
- filters,
- isLoading,
- params,
- mergeParams,
- removeFilters,
- addFilter,
- refresh,
- } = report
-
- const state = useDatabaseSelectorStateSnapshot()
const {
selectedDateRange,
updateDateRange: updateDateRangeFromHook,
@@ -81,8 +68,24 @@ const RealtimeUsage = () => {
isOrgPlanLoading,
orgPlan,
} = useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES)
-
const queryClient = useQueryClient()
+ const {
+ data,
+ error,
+ isLoading,
+ refetch,
+ isRefetching,
+ filters,
+ addFilter,
+ removeFilters,
+ isLoadingData,
+ } = useSharedAPIReport({
+ filterBy: 'realtime',
+ start: selectedDateRange?.period_start?.date,
+ end: selectedDateRange?.period_end?.date,
+ })
+
+ const state = useDatabaseSelectorStateSnapshot()
const isFreePlan = !isOrgPlanLoading && orgPlan?.id === 'free'
const REALTIME_REPORT_ATTRIBUTES = getRealtimeReportAttributes(isFreePlan)
@@ -107,7 +110,7 @@ const RealtimeUsage = () => {
)
})
- refresh()
+ refetch()
setTimeout(() => setIsRefreshing(false), 1000)
}
@@ -132,20 +135,10 @@ const RealtimeUsage = () => {
const handleDatePickerChange = (values: DatePickerValue) => {
const promptShown = handleDatePickerChangeFromHook(values)
- if (!promptShown) {
- report.mergeParams({
- iso_timestamp_start: values.from,
- iso_timestamp_end: values.to,
- })
- }
}
const updateDateRange: UpdateDateRange = (from: string, to: string) => {
updateDateRangeFromHook(from, to)
- report.mergeParams({
- iso_timestamp_start: from,
- iso_timestamp_end: to,
- })
}
return (
@@ -153,16 +146,16 @@ const RealtimeUsage = () => {
+
}
>
{selectedDateRange &&
@@ -205,11 +198,25 @@ const RealtimeUsage = () => {
defaultChartStyle={chart.defaultChartStyle as 'line' | 'bar' | 'stackedAreaLine'}
/>
))}
-
+
-
+
+ {
)}
+
+
+ The number of storage requests that are cached at the edge level. A higher number of
+ hits is better.{' '}
+
+
+ Read More
+
+
+ }
+ data={data.cacheHitRate || []}
+ renderer={CacheHitRateChartRenderer}
+ append={TopCacheMissesRenderer}
+ appendProps={{ data: data.topCacheMisses || [] }}
+ />
+
+
diff --git a/apps/studio/pages/project/[ref]/reports/storage.tsx b/apps/studio/pages/project/[ref]/reports/storage.tsx
index 8a9cfc0fa1550..d7a5d52c4ee99 100644
--- a/apps/studio/pages/project/[ref]/reports/storage.tsx
+++ b/apps/studio/pages/project/[ref]/reports/storage.tsx
@@ -1,5 +1,5 @@
import Link from 'next/link'
-import { ExternalLinkIcon } from 'lucide-react'
+import { ArrowRight, ExternalLinkIcon, RefreshCw } from 'lucide-react'
import ReportHeader from 'components/interfaces/Reports/ReportHeader'
import ReportPadding from 'components/interfaces/Reports/ReportPadding'
import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
@@ -30,10 +30,11 @@ import { useStorageReport } from 'data/reports/storage-report-query'
import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
import type { NextPageWithLayout } from 'types'
+import dayjs from 'dayjs'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
export const StorageReport: NextPageWithLayout = () => {
const report = useStorageReport()
- const organization = useSelectedOrganization()
const {
data,
@@ -53,6 +54,7 @@ export const StorageReport: NextPageWithLayout = () => {
handleDatePickerChange: handleDatePickerChangeFromHook,
showUpgradePrompt,
setShowUpgradePrompt,
+ selectedDateRange,
} = useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES)
const handleDatepickerChange = (vals: DatePickerValue) => {
@@ -71,87 +73,117 @@ export const StorageReport: NextPageWithLayout = () => {
+
Realtime API Gateway
+
+
}
>
-
+
+
+ )}
+ + {dayjs(selectedDateRange.period_start.date).format('MMM D, h:mma')} +
+
+
+ {dayjs(selectedDateRange.period_end.date).format('MMM D, h:mma')} +
+
+
- The number of storage requests that are cached at the edge level. A higher number of
- hits is better.{' '}
-
-
- Read More
-
-
- }
- data={data.cacheHitRate || []}
- renderer={CacheHitRateChartRenderer}
- append={TopCacheMissesRenderer}
- appendProps={{ data: data.topCacheMisses || [] }}
- />
+
- Already have an account?{' '}
-
- Sign In
-
-
)
}
ResetPasswordPage.getLayout = (page) => (
+
+
+
+## What is branching?
+
+A Supabase branch is essentially a copy of your Supabase project, minus the data. Rather than making risky changes to your production database, edge functions or configuration, you instead spin up a preview branch and make the changes there. This gives you a safe, isolated environment to work from. When you’re happy with your changes, you merge them back into production.
+
+## Current behavior
+
+The current implementation of branching requires a connection to a GitHub repo. For every GitHub pull request created, a corresponding Supabase branch is also created and kept in sync. Database schema/migrations, functions and configuration all stored within your repo and synced up to Supabase when your commits are pushed. For those who want to work in a local and code first way, this is an ideal workflow, however, this is not suitable for those who prefer to work in a database first or no-code way, including AI Builders.
+
+## New behavior
+
+With these new updates you can now create branches with Git, without Git, or a combination of both. This can be done directly through the dashboard, Supabase CLI, or the [Management API](https://supabase.com/docs/reference/api/introduction). Every branch is a direct copy of production, including schema, functions and configurations. You can then connect your app, make changes, and when ready to launch, you have the option to pull those changes down to your codebase or review and merge without leaving the dashboard. For those using separate Supabase projects for this, you no longer need to do so.
+
+### How it works
+
+For this walkthrough we’ll focus purely on a _Gitless_ workflow. If you are someone who prefers to work in a code-first way, you can view our more extensive [guide to branching](https://supabase.com/docs/guides/deployment/branching).
+
+#### Create a new branch.
+
+