update db report (supabase#36328)

fsansalvadore · web-flow · commit 265ca68786f1 · 2025-06-18T13:05:31.000+02:00
* release charts to Teams and Enterprise

* update db charts

* clean up chart types and add disk_fs_used_system

* show update data for Disk Size chart

* remove feature flag release

* update PostgREST connections tooltip

* show percentage in tooltip only if value is not percentage itself

* show percentage in tooltip only if value is not percentage itself

* insert disk_fs_used_system

* update db disk size chart

* reorder admin connection
diff --git a/apps/studio/components/ui/Charts/ComposedChart.tsx b/apps/studio/components/ui/Charts/ComposedChart.tsx
@@ -28,8 +28,12 @@ import {
 } from './Charts.constants'
 import { CommonChartProps, Datum } from './Charts.types'
 import { numberFormatter, useChartSize } from './Charts.utils'
-import { calculateTotalChartAggregate, CustomLabel, CustomTooltip } from './ComposedChart.utils'
-import { MultiAttribute } from './ComposedChartHandler'
+import {
+  calculateTotalChartAggregate,
+  CustomLabel,
+  CustomTooltip,
+  type MultiAttribute,
+} from './ComposedChart.utils'
 import NoDataPlaceholder from './NoDataPlaceholder'
 import { ChartHighlight } from './useChartHighlight'
 import { formatBytes } from 'lib/helpers'
@@ -202,11 +206,10 @@ export default function ComposedChart({
   const isDiskSpaceChart = chartData?.some((att: any) =>
     att.name.toLowerCase().includes('disk_space_')
   )
-  const isDBSizeChart = chartData?.some((att: any) =>
-    att.name.toLowerCase().includes('pg_database_size')
-  )
+  const isDiskSizeChart = chartData?.some((att: any) => att.name.toLowerCase().includes('disk_fs_'))
   const isNetworkChart = chartData?.some((att: any) => att.name.toLowerCase().includes('network_'))
-  const shouldFormatBytes = isRamChart || isDiskSpaceChart || isDBSizeChart || isNetworkChart
+  const shouldFormatBytes = isRamChart || isDiskSpaceChart || isDiskSizeChart || isNetworkChart
+
   //*
   // Set the y-axis domain
   // to the highest value in the chart data for percentage charts
diff --git a/apps/studio/components/ui/Charts/ComposedChart.utils.tsx b/apps/studio/components/ui/Charts/ComposedChart.utils.tsx
@@ -5,9 +5,68 @@ import { useState } from 'react'
 import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import { CHART_COLORS, DateTimeFormats } from './Charts.constants'
 import { numberFormatter } from './Charts.utils'
-import { MultiAttribute } from './ComposedChartHandler'
 import { formatBytes } from 'lib/helpers'
 
+export interface ReportAttributes {
+  id?: string
+  label: string
+  attributes?: (MultiAttribute | false)[]
+  defaultChartStyle?: 'bar' | 'line' | 'stackedAreaLine'
+  hide?: boolean
+  hideChartType?: boolean
+  format?: string
+  className?: string
+  showTooltip?: boolean
+  showLegend?: boolean
+  showTotal?: boolean
+  showMaxValue?: boolean
+  valuePrecision?: number
+  docsUrl?: string
+  syncId?: string
+  showGrid?: boolean
+  YAxisProps?: {
+    width?: number
+    tickFormatter?: (value: any) => string
+  }
+  hideHighlightedValue?: boolean
+}
+
+type Provider = 'infra-monitoring' | 'daily-stats' | 'reference-line' | 'combine'
+
+export type MultiAttribute = {
+  attribute: string
+  provider: Provider
+  label?: string
+  color?: string
+  stackId?: string
+  format?: string
+  description?: string
+  docsLink?: string
+  isMaxValue?: boolean
+  type?: 'line' | 'area-bar'
+  omitFromTotal?: boolean
+  tooltip?: string
+  customValue?: number
+  /**
+   * Manipulate the value of the attribute before it is displayed on the chart.
+   * @param value - The value of the attribute.
+   * @returns The manipulated value.
+   */
+  manipulateValue?: (value: number) => number
+  /**
+   * Create a virtual attribute by combining values from other attributes.
+   * Expression should use attribute names and basic math operators (+, -, *, /).
+   * Example: 'disk_fs_used - pg_database_size - disk_fs_used_wal'
+   */
+  combine?: string
+  id?: string
+  value?: number
+  isReferenceLine?: boolean
+  strokeDasharray?: string
+  className?: string
+  hide?: boolean
+}
+
 interface CustomIconProps {
   color: string
 }
@@ -78,9 +137,7 @@ const CustomTooltip = ({
     const isDiskSpaceChart = payload?.some((p: any) =>
       p.dataKey.toLowerCase().includes('disk_space_')
     )
-    const isDBSizeChart = payload?.some((p: any) =>
-      p.dataKey.toLowerCase().includes('pg_database_size')
-    )
+    const isDBSizeChart = payload?.some((p: any) => p.dataKey.toLowerCase().includes('disk_fs_'))
     const isNetworkChart = payload?.some((p: any) => p.dataKey.toLowerCase().includes('network_'))
     const shouldFormatBytes = isRamChart || isDiskSpaceChart || isDBSizeChart || isNetworkChart
 
@@ -120,7 +177,7 @@ const CustomTooltip = ({
             {isPercentage ? '%' : ''}
 
             {/* Show percentage if max value is set */}
-            {!!maxValueData && !isMax && (
+            {!!maxValueData && !isMax && !isPercentage && (
               <span className="text-[11px] text-foreground-light mb-0.5">({percentage}%)</span>
             )}
           </span>
@@ -154,6 +211,7 @@ const CustomTooltip = ({
                   {isPercentage ? '%' : ''}
                 </span>
                 {maxValueAttribute &&
+                  !isPercentage &&
                   !isNaN((total as number) / maxValueData?.value) &&
                   isFinite((total as number) / maxValueData?.value) && (
                     <span className="text-[11px] text-foreground-light mb-0.5">
diff --git a/apps/studio/components/ui/Charts/ComposedChartHandler.tsx b/apps/studio/components/ui/Charts/ComposedChartHandler.tsx
@@ -16,31 +16,9 @@ import { useChartHighlight } from './useChartHighlight'
 
 import type { ChartData } from './Charts.types'
 import type { UpdateDateRange } from 'pages/project/[ref]/reports/database'
+import { MultiAttribute } from './ComposedChart.utils'
 
-type Provider = 'infra-monitoring' | 'daily-stats' | 'reference-line'
-
-export type MultiAttribute = {
-  attribute: string
-  provider: Provider
-  label?: string
-  color?: string
-  stackId?: string
-  format?: 'percent' | 'number'
-  description?: string
-  docsLink?: string
-  isMaxValue?: boolean
-  type?: 'line' | 'area-bar'
-  omitFromTotal?: boolean
-  tooltip?: string
-  customValue?: number
-  id?: string
-  value?: number
-  isReferenceLine?: boolean
-  strokeDasharray?: string
-  className?: string
-}
-
-interface ComposedChartHandlerProps {
+export interface ComposedChartHandlerProps {
   id?: string
   label: string
   attributes: MultiAttribute[]
@@ -189,6 +167,7 @@ const ComposedChartHandler = ({
         // Add regular attributes
         attributes.forEach((attr, index) => {
           if (!attr) return
+
           // Handle custom value attributes (like disk size)
           if (attr.customValue !== undefined) {
             point[attr.attribute] = attr.customValue
@@ -200,7 +179,16 @@ const ComposedChartHandler = ({
 
           const queryData = attributeQueries[index]?.data?.data
           const matchingPoint = queryData?.find((p: any) => p.period_start === timestamp)
-          point[attr.attribute] = matchingPoint?.[attr.attribute] ?? 0
+          let value = matchingPoint?.[attr.attribute] ?? 0
+
+          // Apply value manipulation if provided
+          if (attr.manipulateValue && typeof attr.manipulateValue === 'function') {
+            // Ensure value is a number before manipulation
+            const numericValue = typeof value === 'number' ? value : Number(value) || 0
+            value = attr.manipulateValue(numericValue)
+          }
+
+          point[attr.attribute] = value
         })
 
         // Add reference line values for each timestamp
diff --git a/apps/studio/data/reports/database-charts.ts b/apps/studio/data/reports/database-charts.ts
@@ -1,7 +1,8 @@
 import { numberFormatter } from 'components/ui/Charts/Charts.utils'
 import { formatBytes } from 'lib/helpers'
-import { Organization } from '../../types'
+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 },
@@ -26,7 +27,10 @@ export const getReportAttributes = (isFreePlan: boolean) => [
   },
 ]
 
-export const getReportAttributesV2 = (org: Organization, project: Project) => {
+export const getReportAttributesV2: (org: Organization, project: Project) => ReportAttributes[] = (
+  org,
+  project
+) => {
   const isFreePlan = org?.plan?.id === 'free'
   const computeSize = project?.infra_compute_size || 'medium'
   const isSpendCapEnabled =
@@ -46,7 +50,7 @@ export const getReportAttributesV2 = (org: Organization, project: Project) => {
       syncId: 'database-reports',
       valuePrecision: 2,
       YAxisProps: {
-        width: 60,
+        width: 75,
         tickFormatter: (value: any) => formatBytes(value, 2),
       },
       attributes: [
@@ -226,8 +230,8 @@ export const getReportAttributesV2 = (org: Organization, project: Project) => {
       ],
     },
     {
-      id: 'db-size',
-      label: 'Database Size',
+      id: 'disk-size',
+      label: 'Disk Size',
       syncId: 'database-reports',
       valuePrecision: 2,
       hide: false,
@@ -243,19 +247,36 @@ export const getReportAttributesV2 = (org: Organization, project: Project) => {
       defaultChartStyle: 'line',
       docsUrl: 'https://supabase.com/docs/guides/platform/database-size',
       attributes: [
+        {
+          attribute: 'disk_fs_used_system',
+          provider: 'infra-monitoring',
+          format: 'bytes',
+          label: 'System',
+          tooltip: 'Reserved space for the system to ensure your database runs smoothly.',
+        },
+        {
+          attribute: 'disk_fs_used_wal',
+          provider: 'infra-monitoring',
+          format: 'bytes',
+          label: 'WAL',
+          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',
+          format: 'bytes',
           label: 'Database',
-          tooltip: 'Total space on disk used by your database (tables, indexes, data, ...).',
+          tooltip: 'Disk usage by your database (tables, indexes, data, ...).',
         },
         {
-          attribute: 'max_pg_database_size',
-          provider: 'reference-line',
-          label: 'Disk size',
-          value: (project?.volumeSizeGb || getRecommendedDbSize(computeSize)) * 1024 * 1024 * 1024,
-          tooltip: 'Disk Size refers to the total space your project occupies on disk',
+          attribute: 'disk_fs_size',
+          provider: 'infra-monitoring',
           isMaxValue: true,
+          format: 'bytes',
+          label: 'Disk Size',
+          tooltip: 'Disk Size refers to the total space your project occupies on disk',
         },
         !isFreePlan &&
           (isSpendCapEnabled
@@ -304,20 +325,21 @@ export const getReportAttributesV2 = (org: Organization, project: Project) => {
       showTotal: false,
       attributes: [
         {
-          attribute: 'network_transmit_bytes',
+          attribute: 'network_receive_bytes',
           provider: 'infra-monitoring',
-          label: 'Transmit',
+          label: 'Ingress',
+          manipulateValue: (value: number) => value * -1,
           tooltip:
-            'Data sent from your database to clients. High values may indicate large query results or numerous outgoing connections.',
-          stackId: '2',
+            'Data received by your database from clients. High values may indicate frequent queries, large data inserts, or many incoming connections.',
+          stackId: '1',
         },
         {
-          attribute: 'network_receive_bytes',
+          attribute: 'network_transmit_bytes',
           provider: 'infra-monitoring',
-          label: 'Receive',
+          label: 'Egress',
           tooltip:
-            'Data received by your database from clients. High values may indicate frequent queries, large data inserts, or many incoming connections.',
-          stackId: '1',
+            'Data sent from your database to clients. High values may indicate large query results or numerous outgoing connections.',
+          stackId: '2',
         },
       ],
     },
@@ -335,44 +357,49 @@ export const getReportAttributesV2 = (org: Organization, project: Project) => {
         {
           attribute: 'client_connections_postgres',
           provider: 'infra-monitoring',
-          label: 'postgres',
-          tooltip: 'Active connections',
+          label: 'Postgres',
+          tooltip:
+            'Direct connections to the Postgres database from your application and external clients.',
         },
         {
           attribute: 'client_connections_authenticator',
           provider: 'infra-monitoring',
-          label: 'postgrest',
-          tooltip: 'Active connections',
+          label: 'PostgREST',
+          tooltip: 'Connections magaged by PostgREST to auto-generate RESTful API.',
         },
         {
-          attribute: 'client_connections_supabase_auth_admin',
+          attribute: 'client_connections_supabase_admin',
           provider: 'infra-monitoring',
-          label: 'auth',
-          tooltip: 'Active connections',
+          label: 'Admin',
+          tooltip:
+            'Administrative connections used by various Supabase services for internal operations and maintenance tasks.',
         },
         {
-          attribute: 'client_connections_supabase_storage_admin',
+          attribute: 'client_connections_supabase_auth_admin',
           provider: 'infra-monitoring',
-          label: 'storage',
-          tooltip: 'Active connections',
+          label: 'Auth',
+          tooltip:
+            'Administrative connections used by Supabase Auth service for user management and authentication operations.',
         },
         {
-          attribute: 'client_connections_supabase_admin',
+          attribute: 'client_connections_supabase_storage_admin',
           provider: 'infra-monitoring',
-          label: 'supabase-admin',
-          tooltip: 'Active connections',
+          label: 'Storage',
+          tooltip:
+            'Administrative connections used by Supabase Storage service for file operations and bucket management.',
         },
         {
           attribute: 'client_connections_other',
           provider: 'infra-monitoring',
-          label: 'other',
-          tooltip: 'Active connections',
+          label: 'Other',
+          tooltip: "Miscellaneous database connections that don't fall into other categories.",
         },
         {
           attribute: 'max_db_connections',
-          provider: 'infra-monitoring',
-          label: 'Maximum connections allowed',
-          tooltip: 'Maximum connections for instance size',
+          provider: 'reference-line',
+          label: 'Max connections',
+          value: getConnectionLimits(computeSize).direct,
+          tooltip: 'Max available connections for your current compute size',
           isMaxValue: true,
         },
       ],
diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx
diff --git a/packages/api-types/types/platform.d.ts b/packages/api-types/types/platform.d.ts
