feat: add supavisor egress breakdown (#22375)

apps/docs/content/guides/platform/billing-faq.mdx

@@ -64,7 +64,7 @@ Read more on [how billing for compute works](https://supabase.com/docs/guides/pl
 
 #### What is unified egress and how is it billed?
 
-Unified egress refers to the total egress quota available to each organization. This quota can be utilized for various purposes such as Storage, Runtime, Auth, Functions, and Database. Each plan includes a specific egress quota, and any additional usage beyond that quota is billed accordingly.
+Unified egress refers to the total egress quota available to each organization. This quota can be utilized for various purposes such as Storage, Realtime, Auth, Functions, Supavisor and Database. Each plan includes a specific egress quota, and any additional usage beyond that quota is billed accordingly.
 
 To learn more about unified egress and its details, please refer to the information provided [here](https://supabase.com/docs/guides/platform/org-based-billing#:~:text=running%20any%20projects.-,Unified%20egress,-%23).
 

apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx

@@ -83,11 +83,12 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
           { key: EgressType.STORAGE, name: 'Storage Egress', color: 'blue' },
           { key: EgressType.REALTIME, name: 'Realtime Egress', color: 'orange' },
           { key: EgressType.FUNCTIONS, name: 'Functions Egress', color: 'purple' },
+          { key: EgressType.SUPAVISOR, name: 'Supavisor Egress', color: 'red' },
         ],
         name: 'Total Egress',
         unit: 'bytes',
         description:
-          'Contains any outgoing traffic (egress) from your database.\nBilling is based on the total sum of egress in GB throughout your billing period.',
+          'Contains any outgoing traffic (includes Database, Storage, Realtime, Auth, API, Edge Functions, Supavisor) from your database.\nBilling is based on the total sum of egress in GB throughout your billing period.',
         chartDescription: 'The data refreshes every 24 hours.',
       },
     ],

apps/studio/components/to-be-cleaned/Charts/ChartHandler.types.ts

@@ -3,7 +3,6 @@ export interface ChartData {
   yAxisLimit?: number
   maximum?: number
   total: number
-  totalAverage: number
   totalGrouped: Attribute
   data: DataPoint[]
 }

apps/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx

@@ -46,17 +46,19 @@ const Header = ({
 
   let title = ''
 
+  const isByteAttribute =
+    format === 'bytes' ||
+    attribute.includes('ingress') ||
+    attribute.includes('egress') ||
+    attribute.includes('bytes')
+
   if (focus) {
     if (!data) {
       title = ''
     } else if (format === '%') {
       title = Number(data[focus]?.[attribute]).toFixed(2)
     } else {
-      if (
-        attribute.includes('ingress') ||
-        attribute.includes('egress') ||
-        attribute.includes('bytes')
-      ) {
+      if (isByteAttribute) {
         title = formatBytes(data[focus]?.[attribute])
       } else {
         title = data[focus]?.[attribute]?.toLocaleString()
@@ -66,11 +68,7 @@ const Header = ({
     if (format === '%' && highlightedValue) {
       title = highlightedValue.toFixed(2)
     } else {
-      if (
-        attribute.includes('ingress') ||
-        attribute.includes('egress') ||
-        attribute.includes('bytes')
-      ) {
+      if (isByteAttribute) {
         title = formatBytes(highlightedValue)
       } else {
         title = highlightedValue?.toLocaleString()
@@ -91,7 +89,7 @@ const Header = ({
       }
     >
       {title}
-      <span className="text-lg">{format}</span>
+      {!isByteAttribute && <span className="text-lg">{format}</span>}
     </h5>
   )
   const date = (

apps/studio/data/analytics/constants.ts

@@ -12,7 +12,6 @@ export interface AnalyticsData {
   data: DataPoint[]
   format: string
   total: number
-  totalAverage: number
   yAxisLimit: number
   hasNoData?: boolean
 }

apps/studio/data/analytics/org-daily-stats-query.ts

@@ -11,6 +11,7 @@ export enum EgressType {
   STORAGE = 'egress_storage',
   REALTIME = 'egress_realtime',
   FUNCTIONS = 'egress_functions',
+  SUPAVISOR = 'egress_supavisor',
   UNIFIED = 'egress',
 }
 

apps/studio/pages/api/projects/[ref]/infra-monitoring.ts

@@ -21,7 +21,6 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
     data: [],
     yAxisLimit: 0,
     format: '%',
-    totalAverage: 0,
     total: 0,
   }
   return res.status(200).json(response)

packages/shared-data/pricing.ts

@@ -112,7 +112,7 @@ export const pricing: Pricing = {
       {
         title: 'Bandwidth',
         tooltips: {
-          main: 'Billing is based on the total sum of all outgoing traffic (includes Database, Storage, Realtime, Auth, API, Edge Functions) in GB throughout your billing period.',
+          main: 'Billing is based on the total sum of all outgoing traffic (includes Database, Storage, Realtime, Auth, API, Edge Functions, Supavisor) in GB throughout your billing period.',
         },
         plans: {
           free: '5 GB included',