Files
supabase/apps/studio/pages
Jordi Enric 35f2eeefcf fix(observability): replace egress chart with usage link FE-4310 (#49850)
## Problem

The Network Traffic egress chart is derived from request logs and can
substantially undercount billed traffic. Showing it beside diagnostic
ingress data left customers with an untrustworthy egress number.

## Fix

Remove the log-derived egress chart, retain ingress, and add a Billable
egress callout that links to the selected organization’s Usage page. The
callout is shown only on hosted Studio, where organization billing data
is available.

## How to test

- Open API, Storage, Auth, or PostgREST observability.
- Confirm Network Traffic shows only the ingress chart.
- Confirm the Billable egress callout links to the organization Usage
page’s egress section.
- Expected result: diagnostic traffic and billable usage are no longer
presented as competing egress totals.
- Automated checks: git diff --check and final code review passed.
Focused lint could not run because missing dependencies require registry
access, and DNS for registry.npmjs.org is unavailable.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Updates**
* Clarified Network Traffic report tooltips to explain that ingress is
measured from request logs.
* Platform deployment reports now display ingress data only; egress
charts are no longer shown.
* Added a notice linking to the Usage page for billable egress details.
* Applied the updated Network Traffic explanation consistently across
API overview, storage, and shared report views.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-14 15:43:55 +02:00
..
2026-09-11 12:17:49 +08:00
2026-07-01 13:11:46 +02:00
2024-10-17 11:39:06 +02:00
2024-07-04 14:48:10 +08:00

Writing pages

Rough guidelines

  • Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder components/interfaces/xxx/... (Refer to the README.md under the components folder)
  • Keep to using useState hooks for any UI related logic, do not create MobX local stores to handle UI logic.

Template for building pages

import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'

// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'

// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'

// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'

// Name your page accordingly
const Page: NextPage = () => {

  return (
    <Layout>
      <div>Page content</div>
    </Layout>
  )
}

export default withAuth(Page)