diff --git a/apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.tsx b/apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.tsx index 4227d4cebc1..12b90c40984 100644 --- a/apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.tsx +++ b/apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.tsx @@ -81,7 +81,7 @@ export function SharedAPIReport({ isLoading={isLoading.networkTraffic || isRefetching} error={error.networkTraffic} title="Network Traffic" - tooltip="Ingress and egress of requests and responses respectively" + tooltip="Ingress is measured from request logs." data={data.networkTraffic || []} renderer={NetworkTrafficRenderer} queryType="logs" diff --git a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx index eacfb0f3d27..686f1899c76 100644 --- a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx +++ b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx @@ -2,6 +2,7 @@ import { geoCentroid } from 'd3-geo' import sumBy from 'lodash/sumBy' import { ChevronRight } from 'lucide-react' import { useTheme } from 'next-themes' +import Link from 'next/link' import { Fragment, useRef, useState, type ReactNode } from 'react' import { ComposableMap, Geographies, Geography, Marker, ZoomableGroup } from 'react-simple-maps' import { @@ -39,27 +40,27 @@ import { AlertError } from '@/components/ui/AlertError' import BarChart from '@/components/ui/Charts/BarChart' import { DataTableColumnStatusCode } from '@/components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode' import { useFillTimeseriesSorted } from '@/hooks/analytics/useFillTimeseriesSorted' -import { BASE_PATH } from '@/lib/constants' +import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization' +import { BASE_PATH, IS_PLATFORM } from '@/lib/constants' import type { ResponseError } from '@/types' export const NetworkTrafficRenderer = ( props: ReportWidgetProps<{ timestamp: string ingress: number - egress: number }> ) => { + const { data: organization } = useSelectedOrganizationQuery({ enabled: IS_PLATFORM }) const { data, error, isError } = useFillTimeseriesSorted({ data: props.data, timestampKey: 'timestamp', - valueKey: ['ingress_mb', 'egress_mb'], + valueKey: 'ingress_mb', defaultValue: 0, startDate: props.params?.iso_timestamp_start, endDate: props.params?.iso_timestamp_end, }) const totalIngress = sumBy(props.data, 'ingress_mb') - const totalEgress = sumBy(props.data, 'egress_mb') function determinePrecision(valueInMb: number) { return valueInMb < 0.001 ? 7 : totalIngress > 1 ? 2 : 4 @@ -95,18 +96,19 @@ export const NetworkTrafficRenderer = ( displayDateInUtc /> - + {organization && ( +
+
+

Billable egress

+

+ View your organization's Usage page for billable egress. +

+
+ +
+ )} ) } diff --git a/apps/studio/pages/project/[ref]/observability/api-overview.tsx b/apps/studio/pages/project/[ref]/observability/api-overview.tsx index 4f4ef2d7b47..52dad24b796 100644 --- a/apps/studio/pages/project/[ref]/observability/api-overview.tsx +++ b/apps/studio/pages/project/[ref]/observability/api-overview.tsx @@ -179,7 +179,7 @@ export const ApiReport: NextPageWithLayout = () => { params={params.networkTraffic} error={error.networkTraffic} title="Network Traffic" - tooltip="Ingress and egress of requests and responses respectively" + tooltip="Ingress is measured from request logs." data={data.networkTraffic || []} renderer={NetworkTrafficRenderer} /> diff --git a/apps/studio/pages/project/[ref]/observability/storage.tsx b/apps/studio/pages/project/[ref]/observability/storage.tsx index fe4f0790e55..1540c8f807d 100644 --- a/apps/studio/pages/project/[ref]/observability/storage.tsx +++ b/apps/studio/pages/project/[ref]/observability/storage.tsx @@ -184,7 +184,7 @@ export const StorageReport: NextPageWithLayout = () => { params={params.networkTraffic} error={error.networkTraffic} title="Network Traffic" - tooltip="Ingress and egress of requests and responses respectively" + tooltip="Ingress is measured from request logs." data={data.networkTraffic || []} renderer={NetworkTrafficRenderer} />