feat: add auth reports FE-1569 (supabase#36555)

* feat: add auth reports

* fix reports dates, fix missing queries

* add flag

* fix errorbystatus chart

* fix sign in by grant type

* move formatting to auth report query file

* fix signup by provider, add ratelimitted reqs

* fix sign ups query

* cleanup unused stuff

* cleanup

* rm console logs

* undo logs.utils

* add status code lib, use edge_logs for query

* fix auth error chart footer

* rm redundant rate limited requests chart

* fix db report breaking due to useAuthReport throwing

* move state up, reduce conditional logic in composed chart handler

* reorder reports nav

* rm bg

* fix type err

* fix useChartData

* empty

* fix report header bg

* move to utils

* add AnalyticsInterval import to report.utils for granularity conversion

Author: jordienr

apps/studio/components/interfaces/Reports/ReportChart.tsx

@@ -0,0 +1,58 @@
+/**
+ * ReportChart
+ *
+ * A wrapper component that uses the useChartData hook to fetch data for a chart
+ * and then passes the data and loading state to the ComposedChartHandler.
+ *
+ * This component acts as a bridge between the data-fetching logic and the
+ * presentational chart component.
+ */
+import ComposedChartHandler from 'components/ui/Charts/ComposedChartHandler'
+import { useChartData } from 'hooks/useChartData'
+import type { UpdateDateRange } from 'pages/project/[ref]/reports/database'
+import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils'
+
+const ReportChart = ({
+  chart,
+  startDate,
+  endDate,
+  interval,
+  updateDateRange,
+}: {
+  chart: any
+  startDate: string
+  endDate: string
+  interval: string
+  updateDateRange: UpdateDateRange
+}) => {
+  const {
+    data,
+    isLoading: isLoading,
+    chartAttributes,
+    highlightedValue,
+  } = useChartData({
+    attributes: chart.attributes,
+    startDate,
+    endDate,
+    interval,
+    data: undefined,
+    highlightedValue:
+      chart.id === 'client-connections' || chart.id === 'pgbouncer-connections'
+        ? true
+        : chart.showMaxValue,
+  })
+
+  return (
+    <ComposedChartHandler
+      {...chart}
+      attributes={
+        (chartAttributes.length > 0 ? chartAttributes : chart.attributes) as MultiAttribute[]
+      }
+      data={data}
+      isLoading={isLoading}
+      highlightedValue={highlightedValue as any}
+      updateDateRange={updateDateRange}
+    />
+  )
+}
+export default ReportChart

apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx

@@ -18,13 +18,15 @@ import { useProfile } from 'lib/profile'
 import { Menu, cn } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { ReportMenuItem } from './ReportMenuItem'
+import { useFlag } from 'hooks/ui/useFlag'
 
 const ReportsMenu = () => {
   const router = useRouter()
   const { profile } = useProfile()
   const { ref, id } = useParams()
   const pageKey = (id || router.pathname.split('/')[4]) as string
   const storageEnabled = useIsFeatureEnabled('project_storage:all')
+  const authEnabled = useFlag('authreportv2')
 
   const canCreateCustomReport = useCheckPermissions(PermissionAction.CREATE, 'user_content', {
     resource: { type: 'report', owner_id: profile?.id },
@@ -97,21 +99,29 @@ const ReportsMenu = () => {
           key: 'api-overview',
           url: `/project/${ref}/reports/api-overview`,
         },
-        ...(storageEnabled
+        ...(authEnabled
           ? [
               {
-                name: 'Storage',
-                key: 'storage',
-                url: `/project/${ref}/reports/storage`,
+                name: 'Auth',
+                key: 'auth',
+                url: `/project/${ref}/reports/auth`,
               },
             ]
           : []),
-
         {
           name: 'Database',
           key: 'database',
           url: `/project/${ref}/reports/database`,
         },
+        ...(storageEnabled
+          ? [
+              {
+                name: 'Storage',
+                key: 'storage',
+                url: `/project/${ref}/reports/storage`,
+              },
+            ]
+          : []),
       ],
     },
   ]

apps/studio/components/ui/Charts/ComposedChart.tsx

@@ -28,13 +28,9 @@ import {
 } from './Charts.constants'
 import { CommonChartProps, Datum } from './Charts.types'
 import { numberFormatter, useChartSize } from './Charts.utils'
-import {
-  calculateTotalChartAggregate,
-  CustomLabel,
-  CustomTooltip,
-  type MultiAttribute,
-} from './ComposedChart.utils'
+import { calculateTotalChartAggregate, CustomLabel, CustomTooltip } from './ComposedChart.utils'
 import NoDataPlaceholder from './NoDataPlaceholder'
+import { MultiAttribute } from './ComposedChart.utils'
 import { ChartHighlight } from './useChartHighlight'
 import { formatBytes } from 'lib/helpers'
 
@@ -58,6 +54,7 @@ export interface ComposedChartProps<D = Datum> extends CommonChartProps<D> {
   chartStyle?: string
   onChartStyleChange?: (style: string) => void
   updateDateRange: any
+  titleTooltip?: string
   hideYAxis?: boolean
   hideHighlightedValue?: boolean
   syncId?: string
@@ -114,6 +111,22 @@ export default function ComposedChart({
 
   const { Container } = useChartSize(size)
 
+  const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
+
+  const formatTimestamp = (ts: unknown) => {
+    if (typeof ts !== 'number' && typeof ts !== 'string') {
+      return ''
+    }
+
+    // Timestamps from auth logs can be in microseconds
+    if (typeof ts === 'number' && ts > 1e14) {
+      return day(ts / 1000).format(customDateFormat)
+    }
+
+    // dayjs can handle ISO strings and millisecond numbers
+    return day(ts).format(customDateFormat)
+  }
+
   // Default props
   const _XAxisProps = XAxisProps || {
     interval: data.length - 2,
@@ -127,18 +140,19 @@ export default function ComposedChart({
     width: 0,
   }
 
-  const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
-
   function getHeaderLabel() {
     if (!xAxisIsDate) {
       if (!focusDataIndex) return highlightedLabel
-      return data[focusDataIndex]?.timestamp
+      return data[focusDataIndex]?.[xAxisKey]
     }
     return (
       (focusDataIndex !== null &&
         data &&
         data[focusDataIndex] !== undefined &&
-        day(data[focusDataIndex].timestamp).format(customDateFormat)) ||
+        (() => {
+          const ts = data[focusDataIndex][xAxisKey]
+          return formatTimestamp(ts)
+        })()) ||
       highlightedLabel
     )
   }
@@ -149,13 +163,45 @@ export default function ComposedChart({
     color: CHART_COLORS.REFERENCE_LINE,
   }
 
+  const chartData =
+    data && !!data[0]
+      ? Object.entries(data[0])
+          ?.map(([key, value]) => ({
+            name: key,
+            value: value,
+          }))
+          .filter(
+            (att) =>
+              att.name !== 'timestamp' &&
+              att.name !== 'period_start' &&
+              att.name !== maxAttribute?.attribute &&
+              attributes.some((attr) => attr.attribute === att.name && attr.enabled !== false)
+          )
+          .map((att, index) => {
+            const attribute = attributes.find((attr) => attr.attribute === att.name)
+            return {
+              ...att,
+              color: attribute?.color
+                ? resolvedTheme?.includes('dark')
+                  ? attribute.color.dark
+                  : attribute.color.light
+                : STACKED_CHART_COLORS[index % STACKED_CHART_COLORS.length],
+            }
+          })
+      : []
+
   const lastDataPoint = !!data[data.length - 1]
     ? Object.entries(data[data.length - 1])
         .map(([key, value]) => ({
           dataKey: key,
           value: value as number,
         }))
-        .filter((entry) => entry.dataKey !== 'timestamp')
+        .filter(
+          (entry) =>
+            entry.dataKey !== 'timestamp' &&
+            entry.dataKey !== 'period_start' &&
+            attributes.some((attr) => attr.attribute === entry.dataKey && attr.enabled !== false)
+        )
     : undefined
   const referenceLines = attributes.filter((attribute) => attribute?.provider === 'reference-line')
 
@@ -184,32 +230,17 @@ export default function ComposedChart({
     chartHighlight?.coordinates.right &&
     chartHighlight?.coordinates.left !== chartHighlight?.coordinates.right
 
-  const chartData =
-    data && !!data[0]
-      ? Object.entries(data[0])
-          ?.map(([key, value], index) => ({
-            name: key,
-            value: value,
-            color: STACKED_CHART_COLORS[index - (1 % STACKED_CHART_COLORS.length)],
-          }))
-          .filter(
-            (att) =>
-              att.name !== 'timestamp' &&
-              att.name !== maxAttribute?.attribute &&
-              !referenceLines.map((a) => a.attribute).includes(att.name)
-          )
-      : []
-
   const stackedAttributes = chartData.filter((att) => !att.name.includes('max'))
   const isPercentage = format === '%'
   const isRamChart = chartData?.some((att: any) => att.name.toLowerCase().includes('ram_'))
   const isDiskSpaceChart = chartData?.some((att: any) =>
     att.name.toLowerCase().includes('disk_space_')
   )
-  const isDiskSizeChart = chartData?.some((att: any) => att.name.toLowerCase().includes('disk_fs_'))
+  const isDBSizeChart = chartData?.some((att: any) =>
+    att.name.toLowerCase().includes('pg_database_size')
+  )
   const isNetworkChart = chartData?.some((att: any) => att.name.toLowerCase().includes('network_'))
-  const shouldFormatBytes = isRamChart || isDiskSpaceChart || isDiskSizeChart || isNetworkChart
-
+  const shouldFormatBytes = isRamChart || isDiskSpaceChart || isDBSizeChart || isNetworkChart
   //*
   // Set the y-axis domain
   // to the highest value in the chart data for percentage charts
@@ -387,6 +418,7 @@ export default function ComposedChart({
                 y={line.value}
                 strokeWidth={1}
                 {...line}
+                color={line.color?.dark}
                 strokeDasharray={line.strokeDasharray ?? '3 3'}
                 label={undefined}
               >
@@ -418,13 +450,11 @@ export default function ComposedChart({
           className="text-foreground-lighter -mt-9 flex items-center justify-between text-xs"
           style={{ marginLeft: YAxisProps?.width }}
         >
-          <span>
-            {xAxisIsDate ? day(data[0]?.timestamp).format(customDateFormat) : data[0]?.timestamp}
-          </span>
+          <span>{xAxisIsDate ? formatTimestamp(data[0]?.[xAxisKey]) : data[0]?.[xAxisKey]}</span>
           <span>
             {xAxisIsDate
-              ? day(data[data?.length - 1]?.timestamp).format(customDateFormat)
-              : data[data?.length - 1]?.timestamp}
+              ? formatTimestamp(data[data.length - 1]?.[xAxisKey])
+              : data[data.length - 1]?.[xAxisKey]}
           </span>
         </div>
       )}

apps/studio/components/ui/Charts/ComposedChart.utils.tsx

@@ -31,13 +31,19 @@ export interface ReportAttributes {
   hideHighlightedValue?: boolean
 }
 
-type Provider = 'infra-monitoring' | 'daily-stats' | 'reference-line' | 'combine'
+export type Provider = 'infra-monitoring' | 'daily-stats' | 'mock' | 'reference-line' | 'logs'
 
 export type MultiAttribute = {
   attribute: string
   provider: Provider
   label?: string
-  color?: string
+  color?: {
+    light: string
+    dark: string
+  }
+  statusCode?: string
+  grantType?: string
+  providerType?: string
   stackId?: string
   format?: string
   description?: string
@@ -65,6 +71,7 @@ export type MultiAttribute = {
   strokeDasharray?: string
   className?: string
   hide?: boolean
+  enabled?: boolean
 }
 
 interface CustomIconProps {
@@ -167,7 +174,7 @@ const CustomTooltip = ({
       return (
         <div key={entry.name} className="flex items-center w-full">
           {getIcon(entry.color, isMax)}
-          <span className="text-foreground-lighter ml-1 flex-grow">
+          <span className="text-foreground-lighter ml-1 flex-grow cursor-default select-none">
             {attribute?.label || entry.name}
           </span>
           <span className="ml-3.5 flex items-end gap-1">
@@ -194,9 +201,12 @@ const CustomTooltip = ({
       >
         <p className="font-medium">{dayjs(timestamp).format(DateTimeFormats.FULL_SECONDS)}</p>
         <div className="grid gap-0">
-          {payload.reverse().map((entry: any, index: number) => (
-            <LabelItem key={`${entry.name}-${index}`} entry={entry} />
-          ))}
+          {payload
+            .reverse()
+            .filter((entry: any) => entry.value !== 0)
+            .map((entry: any, index: number) => (
+              <LabelItem key={`${entry.name}-${index}`} entry={entry} />
+            ))}
           {active && showTotal && (
             <div className="flex md:flex-col gap-1 md:gap-0 text-foreground mt-1">
               <span className="flex-grow text-foreground-lighter">Total</span>
@@ -270,7 +280,7 @@ const CustomLabel = ({ payload, attributes, showMaxValue, onLabelHover }: Custom
         {getIcon(entry.name, entry.color)}
         <span
           className={cn(
-            'text-nowrap text-foreground-lighter',
+            'text-nowrap text-foreground-lighter cursor-default select-none',
             hoveredLabel && !isHovered && 'opacity-50'
           )}
         >