diff --git a/apps/studio/components/interfaces/Reports/ReportChart.tsx b/apps/studio/components/interfaces/Reports/ReportChart.tsx index 6c2eb90253d..c24edbc1ef6 100644 --- a/apps/studio/components/interfaces/Reports/ReportChart.tsx +++ b/apps/studio/components/interfaces/Reports/ReportChart.tsx @@ -7,16 +7,19 @@ * This component acts as a bridge between the data-fetching logic and the * presentational chart component. */ -import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted' + +import Link from 'next/link' +import { useRef, useState } from 'react' + +import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils' import LogChartHandler from 'components/ui/Charts/LogChartHandler' +import Panel from 'components/ui/Panel' +import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted' +import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan' +import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { useChartData } from 'hooks/useChartData' import type { UpdateDateRange } from 'pages/project/[ref]/reports/database' -import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils' -import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' -import Link from 'next/link' import { Button, cn } from 'ui' -import Panel from 'components/ui/Panel' -import { useRef, useState } from 'react' const ReportChart = ({ chart, @@ -25,9 +28,7 @@ const ReportChart = ({ interval, updateDateRange, functionIds, - orgPlanId, isLoading, - availableIn, className, }: { chart: any @@ -36,15 +37,17 @@ const ReportChart = ({ interval: string updateDateRange: UpdateDateRange functionIds?: string[] - orgPlanId?: string isLoading?: boolean - availableIn?: string[] className?: string }) => { const org = useSelectedOrganization() + const { plan: orgPlan } = useCurrentOrgPlan() + const orgPlanId = orgPlan?.id + const [isHoveringUpgrade, setIsHoveringUpgrade] = useState(false) const isAvailable = chart.availableIn === undefined || (orgPlanId && chart.availableIn.includes(orgPlanId)) + const canFetch = orgPlanId !== undefined const { data, @@ -114,7 +117,9 @@ const ReportChart = ({
This chart is available from{' '} - {!!availableIn?.length ? availableIn[0] : 'Pro'}{' '} + + {!!chart.availableIn?.length ? chart.availableIn[0] : 'Pro'} + {' '} plan and above
diff --git a/apps/studio/data/reports/auth-charts.ts b/apps/studio/data/reports/auth-charts.ts index 14676a0b23c..33f20b979ae 100644 --- a/apps/studio/data/reports/auth-charts.ts +++ b/apps/studio/data/reports/auth-charts.ts @@ -1,4 +1,4 @@ -export const getAuthReportAttributes = (isFreePlan: boolean) => [ +export const getAuthReportAttributes = () => [ { id: 'active-users', label: 'Active Users', diff --git a/apps/studio/data/reports/database-charts.ts b/apps/studio/data/reports/database-charts.ts index 1c7fcb47d33..d57f7a0c4ee 100644 --- a/apps/studio/data/reports/database-charts.ts +++ b/apps/studio/data/reports/database-charts.ts @@ -1,8 +1,8 @@ import { numberFormatter } from 'components/ui/Charts/Charts.utils' +import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils' import { formatBytes } from 'lib/helpers' import { Organization } from 'types' import { Project } from '../projects/project-detail-query' -import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils' export const getReportAttributes = (org: Organization, project: Project): ReportAttributes[] => { const computeSize = project?.infra_compute_size || 'medium' diff --git a/apps/studio/data/reports/edgefn-charts.ts b/apps/studio/data/reports/edgefn-charts.ts index aa2dd98de82..dbcd204e53d 100644 --- a/apps/studio/data/reports/edgefn-charts.ts +++ b/apps/studio/data/reports/edgefn-charts.ts @@ -12,7 +12,7 @@ export const getEdgeFunctionReportAttributes = (): ReportAttributes[] => [ hideChartType: false, defaultChartStyle: 'bar', titleTooltip: 'The total number of edge function executions by status code.', - availableIn: ['free', 'pro', 'team'], + availableIn: ['free', 'pro', 'team', 'enterprise'], attributes: [ { attribute: 'ExecutionStatusCodes', @@ -32,7 +32,7 @@ export const getEdgeFunctionReportAttributes = (): ReportAttributes[] => [ hideChartType: false, defaultChartStyle: 'line', titleTooltip: 'Average execution time for edge functions.', - availableIn: ['free', 'pro', 'team'], + availableIn: ['free', 'pro', 'team', 'enterprise'], format: 'ms', YAxisProps: { width: 50, @@ -58,7 +58,7 @@ export const getEdgeFunctionReportAttributes = (): ReportAttributes[] => [ hideChartType: false, defaultChartStyle: 'bar', titleTooltip: 'The total number of edge function invocations by region.', - availableIn: ['pro', 'team'], + availableIn: ['pro', 'team', 'enterprise'], attributes: [ { attribute: 'InvocationsByRegion', diff --git a/apps/studio/pages/project/[ref]/reports/auth.tsx b/apps/studio/pages/project/[ref]/reports/auth.tsx index bf3b9af1d79..3c65f9ca8f2 100644 --- a/apps/studio/pages/project/[ref]/reports/auth.tsx +++ b/apps/studio/pages/project/[ref]/reports/auth.tsx @@ -1,26 +1,26 @@ -import { useState } from 'react' import { useQueryClient } from '@tanstack/react-query' +import { useParams } from 'common' import dayjs from 'dayjs' import { ArrowRight, RefreshCw } from 'lucide-react' -import { useParams } from 'common' +import { useState } from 'react' +import ReportChart from 'components/interfaces/Reports/ReportChart' import ReportHeader from 'components/interfaces/Reports/ReportHeader' import ReportPadding from 'components/interfaces/Reports/ReportPadding' +import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav' +import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers' import DefaultLayout from 'components/layouts/DefaultLayout' import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers' -import ReportChart from 'components/interfaces/Reports/ReportChart' -import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav' -import { getAuthReportAttributes } from 'data/reports/auth-charts' -import { useReportDateRange } from 'hooks/misc/useReportDateRange' +import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar' import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants' -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' +import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt' +import { getAuthReportAttributes } from 'data/reports/auth-charts' +import { useReportDateRange } from 'hooks/misc/useReportDateRange' +import type { NextPageWithLayout } from 'types' const AuthReport: NextPageWithLayout = () => { return ( @@ -47,8 +47,6 @@ const AuthUsage = () => { updateDateRange, datePickerValue, datePickerHelpers, - isOrgPlanLoading, - orgPlan, showUpgradePrompt, setShowUpgradePrompt, handleDatePickerChange, @@ -73,8 +71,7 @@ const AuthUsage = () => { const queryClient = useQueryClient() const [isRefreshing, setIsRefreshing] = useState(false) - const isFreePlan = !isOrgPlanLoading && orgPlan?.id === 'free' - const AUTH_REPORT_ATTRIBUTES = getAuthReportAttributes(isFreePlan) + const AUTH_REPORT_ATTRIBUTES = getAuthReportAttributes() const onRefreshReport = async () => { if (!selectedDateRange) return @@ -142,7 +139,6 @@ const AuthUsage = () => { startDate={selectedDateRange?.period_start?.date} endDate={selectedDateRange?.period_end?.date} updateDateRange={updateDateRange} - orgPlanId={orgPlan?.id} isLoading={isRefreshing} /> ))} diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx index 3876405462f..7193534022e 100644 --- a/apps/studio/pages/project/[ref]/reports/database.tsx +++ b/apps/studio/pages/project/[ref]/reports/database.tsx @@ -1,46 +1,46 @@ -import { useEffect, useState } from 'react' import { PermissionAction } from '@supabase/shared-types/out/constants' import { useQueryClient } from '@tanstack/react-query' +import { useParams } from 'common' import dayjs from 'dayjs' import { ArrowRight, ExternalLink, RefreshCw } from 'lucide-react' import Link from 'next/link' +import { useEffect, useState } from 'react' import { toast } from 'sonner' import { AlertDescription_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { useParams } from 'common' +import ReportChart from 'components/interfaces/Reports/ReportChart' import ReportHeader from 'components/interfaces/Reports/ReportHeader' import ReportPadding from 'components/interfaces/Reports/ReportPadding' +import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav' import ReportWidget from 'components/interfaces/Reports/ReportWidget' import DiskSizeConfigurationModal from 'components/interfaces/Settings/Database/DiskSizeConfigurationModal' +import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers' +import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt' import DefaultLayout from 'components/layouts/DefaultLayout' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout' import Table from 'components/to-be-cleaned/Table' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import ChartHandler from 'components/ui/Charts/ChartHandler' +import ComposedChartHandler from 'components/ui/Charts/ComposedChartHandler' +import GrafanaPromoBanner from 'components/ui/GrafanaPromoBanner' import Panel from 'components/ui/Panel' import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' -import ComposedChartHandler from 'components/ui/Charts/ComposedChartHandler' -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' -import { useDatabaseSizeQuery } from 'data/database/database-size-query' -import { useDatabaseReport } from 'data/reports/database-report-query' -import { useProjectDiskResizeMutation } from 'data/config/project-disk-resize-mutation' -import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' -import { useFlag } from 'hooks/ui/useFlag' -import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' -import { useReportDateRange } from 'hooks/misc/useReportDateRange' import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants' +import { analyticsKeys } from 'data/analytics/keys' +import { useProjectDiskResizeMutation } from 'data/config/project-disk-resize-mutation' +import { useDatabaseSizeQuery } from 'data/database/database-size-query' +import { getReportAttributes, getReportAttributesV2 } from 'data/reports/database-charts' +import { useDatabaseReport } from 'data/reports/database-report-query' +import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' +import { useReportDateRange } from 'hooks/misc/useReportDateRange' +import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' +import { useFlag } from 'hooks/ui/useFlag' import { formatBytes } from 'lib/helpers' -import type { NextPageWithLayout } from 'types' import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils' +import type { NextPageWithLayout } from 'types' const DatabaseReport: NextPageWithLayout = () => { return ( @@ -288,8 +288,6 @@ const DatabaseUsage = () => { startDate={selectedDateRange?.period_start?.date} endDate={selectedDateRange?.period_end?.date} updateDateRange={updateDateRange} - orgPlanId={orgPlan?.id} - availableIn={chart.availableIn} /> ) ))} diff --git a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx b/apps/studio/pages/project/[ref]/reports/edge-functions.tsx index 0de2d1c7df7..fa2ff6f1c3f 100644 --- a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx +++ b/apps/studio/pages/project/[ref]/reports/edge-functions.tsx @@ -1,29 +1,26 @@ -import { useState, useEffect } from 'react' import { useQueryClient } from '@tanstack/react-query' +import { useParams } from 'common' import dayjs from 'dayjs' import { ArrowRight, ChevronDown, RefreshCw } from 'lucide-react' -import { useParams } from 'common' +import { useEffect, useState } from 'react' +import { Label } from '@ui/components/shadcn/ui/label' +import ReportChart from 'components/interfaces/Reports/ReportChart' import ReportHeader from 'components/interfaces/Reports/ReportHeader' import ReportPadding from 'components/interfaces/Reports/ReportPadding' +import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav' +import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers' import DefaultLayout from 'components/layouts/DefaultLayout' import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout' -import ReportChart from 'components/interfaces/Reports/ReportChart' -import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import { - LogsDatePicker, - DatePickerValue, -} from 'components/interfaces/Settings/Logs/Logs.DatePickers' import { Button, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui' -import { Label } from '@ui/components/shadcn/ui/label' -import { getEdgeFunctionReportAttributes } from 'data/reports/edgefn-charts' import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query' +import { getEdgeFunctionReportAttributes } from 'data/reports/edgefn-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 { useReportDateRange } from 'hooks/misc/useReportDateRange' import type { NextPageWithLayout } from 'types' @@ -226,7 +223,6 @@ const EdgeFunctionsUsage = () => { endDate={selectedDateRange?.period_end?.date} updateDateRange={updateDateRange} functionIds={functionIds} - orgPlanId={orgPlan?.id} /> ))}