fix(studio): realtime metrics (supabase#40824)

* Connected clients is now showing the number of connections at the time. 
* Broadcast events 
* Presence events 
* Postgres changes events
* Rate of Channel joins (unchanged)
* Message payload size : median of payload size 
* Broadcast From Database Replication Lag:  median replication from commit to broadcast
* (Read) Private Channel Subscription RLS Execution Time: median time RLS execution to subscribe
* (Write) Private Channel Subscription RLS Execution Time: median time RLS execution to publish

Author: edgurgel

apps/studio/data/analytics/infra-monitoring-query.ts

@@ -19,7 +19,8 @@ export type InfraMonitoringAttribute =
   | 'realtime_channel_db_events'
   | 'realtime_channel_presence_events'
   | 'realtime_channel_joins'
-  | 'realtime_authorization_rls_execution_time'
+  | 'realtime_read_authorization_rls_execution_time'
+  | 'realtime_write_authorization_rls_execution_time'
   | 'realtime_payload_size'
   | 'realtime_sum_connections_connected'
   | 'realtime_replication_connection_lag'

apps/studio/data/reports/v2/realtime.config.ts

@@ -36,55 +36,50 @@ export const realtimeReports = ({
   databaseIdentifier?: string
 }): ReportConfig[] => [
   {
-    id: 'client-to-realtime-connections',
-    label: 'Connections',
+    id: 'realtime_sum_connections_connected',
+    label: 'Connected Clients',
     valuePrecision: 0,
     hide: false,
-    showTooltip: false,
+    showSumAsDefaultHighlight: false,
+    showNewBadge: true,
+    showTooltip: true,
     showLegend: false,
     showMaxValue: false,
     hideChartType: false,
     defaultChartStyle: 'line',
-    titleTooltip: '',
+    titleTooltip: 'Total number of connected realtime clients.',
     availableIn: ['free', 'pro', 'team', 'enterprise'],
     dataProvider: async () => {
       const data = await runInfraMonitoringQuery(
         projectRef,
-        'realtime_connections_connected',
+        'realtime_sum_connections_connected',
         startDate,
         endDate,
         interval,
         databaseIdentifier
       )
 
-      const transformedData = (data?.data ?? []).map((p) => {
-        const valueAsNumber = Number(p.realtime_connections_connected)
-        return {
-          ...p,
-          realtime_connections_connected: Number.isNaN(valueAsNumber) ? 0 : valueAsNumber,
-        }
-      })
-
       const attributes = [
         {
-          attribute: 'realtime_connections_connected',
-          label: 'Connections',
+          attribute: 'realtime_sum_connections_connected',
+          label: 'Connected Clients',
         },
       ]
 
-      return { data: transformedData, attributes }
+      return { data: data?.data || [], attributes }
     },
   },
   {
-    id: 'channel-events',
-    label: 'Channel Events',
+    id: 'broadcast-events',
+    label: 'Broadcast Events',
     valuePrecision: 0,
     hide: false,
+    showNewBadge: true,
     showTooltip: true,
     showLegend: false,
     showMaxValue: false,
     hideChartType: false,
-    defaultChartStyle: 'line',
+    defaultChartStyle: 'bar',
     titleTooltip: '',
     availableIn: ['free', 'pro', 'team', 'enterprise'],
     dataProvider: async () => {
@@ -112,6 +107,84 @@ export const realtimeReports = ({
       return { data: transformedData || [], attributes }
     },
   },
+
+  {
+    id: 'presence-events',
+    label: 'Presence Events',
+    valuePrecision: 0,
+    hide: false,
+    showNewBadge: true,
+    showTooltip: true,
+    showLegend: false,
+    showMaxValue: false,
+    hideChartType: false,
+    defaultChartStyle: 'bar',
+    titleTooltip: '',
+    availableIn: ['free', 'pro', 'team', 'enterprise'],
+    dataProvider: async () => {
+      const { data } = await runInfraMonitoringQuery(
+        projectRef,
+        'realtime_channel_presence_events',
+        startDate,
+        endDate,
+        interval,
+        databaseIdentifier
+      )
+
+      const transformedData = data?.map((p) => ({
+        ...p,
+        realtime_channel_presence_events: Number(p.realtime_channel_presence_events) || 0,
+      }))
+
+      const attributes = [
+        {
+          attribute: 'realtime_channel_presence_events',
+          label: 'Events',
+        },
+      ]
+
+      return { data: transformedData || [], attributes }
+    },
+  },
+
+  {
+    id: 'db-events',
+    label: 'Postgres Changes Events',
+    valuePrecision: 0,
+    hide: false,
+    showNewBadge: true,
+    showTooltip: true,
+    showLegend: false,
+    showMaxValue: false,
+    hideChartType: false,
+    defaultChartStyle: 'bar',
+    titleTooltip: '',
+    availableIn: ['free', 'pro', 'team', 'enterprise'],
+    dataProvider: async () => {
+      const { data } = await runInfraMonitoringQuery(
+        projectRef,
+        'realtime_channel_db_events',
+        startDate,
+        endDate,
+        interval,
+        databaseIdentifier
+      )
+
+      const transformedData = data?.map((p) => ({
+        ...p,
+        realtime_channel_db_events: Number(p.realtime_channel_db_events) || 0,
+      }))
+
+      const attributes = [
+        {
+          attribute: 'realtime_channel_db_events',
+          label: 'Events',
+        },
+      ]
+
+      return { data: transformedData || [], attributes }
+    },
+  },
   {
     id: 'realtime_rate_of_channel_joins',
     label: 'Rate of Channel Joins',
@@ -147,7 +220,7 @@ export const realtimeReports = ({
   },
   {
     id: 'realtime_payload_size',
-    label: 'Broadcast Payload Size',
+    label: 'Message Payload Size',
     valuePrecision: 2,
     showNewBadge: true,
     hide: false,
@@ -157,7 +230,7 @@ export const realtimeReports = ({
     showMaxValue: false,
     hideChartType: false,
     defaultChartStyle: 'line',
-    titleTooltip: 'Size of broadcast payloads sent through realtime.',
+    titleTooltip: 'Median size of message payloads sent',
     availableIn: ['free', 'pro', 'team', 'enterprise'],
     YAxisProps: {
       width: 50,
@@ -177,57 +250,56 @@ export const realtimeReports = ({
       const attributes = [
         {
           attribute: 'realtime_payload_size',
-          label: 'Payload Size (bytes)',
+          label: 'Median Payload Size (bytes)',
         },
       ]
 
       return { data: data?.data || [], attributes }
     },
   },
   {
-    id: 'realtime_sum_connections_connected',
-    label: 'Connected Clients',
-    valuePrecision: 0,
-    hide: false,
+    id: 'realtime_replication_connection_lag',
+    label: 'Broadcast From Database Replication Lag',
+    valuePrecision: 2,
     showNewBadge: true,
+    hide: false,
+    showSumAsDefaultHighlight: false,
     showTooltip: true,
     showLegend: false,
-    showMaxValue: true,
+    showMaxValue: false,
     hideChartType: false,
     defaultChartStyle: 'line',
-    titleTooltip: 'Total number of connected realtime clients.',
-    availableIn: ['free', 'pro', 'team', 'enterprise'],
+    titleTooltip:
+      'Median time between database commit and broadcast when using broadcast from database.',
+    availableIn: ['pro', 'team', 'enterprise'],
+    YAxisProps: {
+      width: 50,
+      tickFormatter: (value: number) => `${value}ms`,
+    },
+    format: (value: unknown) => `${Number(value).toFixed(2)}ms`,
     dataProvider: async () => {
       const data = await runInfraMonitoringQuery(
         projectRef,
-        'realtime_sum_connections_connected',
+        'realtime_replication_connection_lag',
         startDate,
         endDate,
         interval,
         databaseIdentifier
       )
 
-      const transformedData = (data?.data ?? []).map((p) => {
-        const valueAsNumber = Number(p.realtime_sum_connections_connected)
-        return {
-          ...p,
-          realtime_sum_connections_connected: Number.isNaN(valueAsNumber) ? 0 : valueAsNumber,
-        }
-      })
-
       const attributes = [
         {
-          attribute: 'realtime_sum_connections_connected',
-          label: 'Connected Clients',
+          attribute: 'realtime_replication_connection_lag',
+          label: 'Median Replication Lag (ms)',
         },
       ]
 
-      return { data: transformedData, attributes }
+      return { data: data?.data || [], attributes }
     },
   },
   {
-    id: 'realtime_replication_connection_lag',
-    label: 'Replication Connection Lag',
+    id: 'realtime_read_authorization_rls_execution_time',
+    label: '(Read) Private Channel Subscription RLS Execution Time',
     valuePrecision: 2,
     showNewBadge: true,
     hide: false,
@@ -237,7 +309,8 @@ export const realtimeReports = ({
     showMaxValue: false,
     hideChartType: false,
     defaultChartStyle: 'line',
-    titleTooltip: 'Time between database commit and broadcast when using broadcast from database.',
+    titleTooltip:
+      'Execution median time of RLS (Row Level Security) to subscribe to a private channel',
     availableIn: ['pro', 'team', 'enterprise'],
     YAxisProps: {
       width: 50,
@@ -247,7 +320,7 @@ export const realtimeReports = ({
     dataProvider: async () => {
       const data = await runInfraMonitoringQuery(
         projectRef,
-        'realtime_replication_connection_lag',
+        'realtime_read_authorization_rls_execution_time',
         startDate,
         endDate,
         interval,
@@ -256,17 +329,17 @@ export const realtimeReports = ({
 
       const attributes = [
         {
-          attribute: 'realtime_replication_connection_lag',
-          label: 'Replication Lag (ms)',
+          attribute: 'realtime_read_authorization_rls_execution_time',
+          label: 'RLS Execution Time (ms)',
         },
       ]
 
       return { data: data?.data || [], attributes }
     },
   },
   {
-    id: 'realtime_authorization_rls_execution_time',
-    label: 'RLS Execution Time',
+    id: 'realtime_write_authorization_rls_execution_time',
+    label: '(Write) Private Channel Subscription RLS Execution Time',
     valuePrecision: 2,
     showNewBadge: true,
     hide: false,
@@ -276,7 +349,8 @@ export const realtimeReports = ({
     showMaxValue: false,
     hideChartType: false,
     defaultChartStyle: 'line',
-    titleTooltip: 'Execution time of RLS (Row Level Security) checks for realtime authorization.',
+    titleTooltip:
+      'Execution median time of RLS (Row Level Security) to publish to a private channel',
     availableIn: ['pro', 'team', 'enterprise'],
     YAxisProps: {
       width: 50,
@@ -286,7 +360,7 @@ export const realtimeReports = ({
     dataProvider: async () => {
       const data = await runInfraMonitoringQuery(
         projectRef,
-        'realtime_authorization_rls_execution_time',
+        'realtime_write_authorization_rls_execution_time',
         startDate,
         endDate,
         interval,
@@ -295,7 +369,7 @@ export const realtimeReports = ({
 
       const attributes = [
         {
-          attribute: 'realtime_authorization_rls_execution_time',
+          attribute: 'realtime_write_authorization_rls_execution_time',
           label: 'RLS Execution Time (ms)',
         },
       ]