db reports fix (supabase#37208)

* restore flag check

* db connections charts

* clean up imports

* pooler label

* remove max on free db connections chart

Author: fsansalvadore

apps/studio/data/reports/database-charts.ts

@@ -5,7 +5,6 @@ import { Project } from '../projects/project-detail-query'
 import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils'
 
 export const getReportAttributes = (org: Organization, project: Project): ReportAttributes[] => {
-  const isFreePlan = org?.plan?.id === 'free'
   const computeSize = project?.infra_compute_size || 'medium'
 
   return [
@@ -111,8 +110,9 @@ export const getReportAttributes = (org: Organization, project: Project): Report
       attributes: [],
     },
     {
-      id: 'database-connections',
-      label: 'Database connections',
+      id: 'pooler-database-connections',
+      label: 'Pooler to Database connections',
+      syncId: 'database-reports',
       valuePrecision: 0,
       availableIn: ['free', 'pro'],
       hide: false,
@@ -126,7 +126,7 @@ export const getReportAttributes = (org: Organization, project: Project): Report
         {
           attribute: 'pg_stat_database_num_backends',
           provider: 'infra-monitoring',
-          label: 'Pooler to database connections',
+          label: 'Database connections',
           tooltip: 'Number of pooler connections to the database',
         },
       ],
@@ -379,40 +379,11 @@ export const getReportAttributesV2: (org: Organization, project: Project) => Rep
     },
     {
       id: 'client-connections',
-      label: 'Database connections',
-      valuePrecision: 0,
-      availableIn: ['team', 'enterprise'],
-      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: ['team', 'enterprise'],
-      hide: isFreePlan, // [Jordi] Paid plans can see grouped client connections instead, so this chart is not needed for them. See above.
+      hide: false,
       showTooltip: true,
       showLegend: true,
       showMaxValue: true,
@@ -558,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',

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,11 +38,9 @@ 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'
-import ReportChart from '../../../../components/interfaces/Reports/ReportChart'
 
 const DatabaseReport: NextPageWithLayout = () => {
   return (
@@ -82,7 +79,7 @@ const DatabaseUsage = () => {
 
   const isTeamsOrEnterprisePlan =
     !isOrgPlanLoading && (orgPlan?.id === 'team' || orgPlan?.id === 'enterprise')
-  const showChartsV2 = false || isTeamsOrEnterprisePlan
+  const showChartsV2 = isReportsV2 || isTeamsOrEnterprisePlan
 
   const state = useDatabaseSelectorStateSnapshot()
   const queryClient = useQueryClient()