Add postgREST Report + Filters (supabase#37178)

* add postgrest report

* fix type

* fix layout border top

* fix refreshes

* fix up loading state, title, telemetry src

* add shared api report filters, make headers look the same

* fix auth

* consolidate shared api hooks

* fix name

Author: jordienr

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

@@ -16,13 +16,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Input,
-  Popover,
   Select,
   cn,
 } from 'ui'
 import { DatePickerValue, LogsDatePicker } from '../Settings/Logs/Logs.DatePickers'
 import { REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
 import type { ReportFilterItem } from './Reports.types'
+import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
 
 interface ReportFilterBarProps {
   filters: ReportFilterItem[]
@@ -262,9 +262,11 @@ const ReportFilterBar = ({
           .map((filter) => (
             <div
               key={`${filter.key}-${filter.compare}-${filter.value}`}
-              className="text-xs rounded border border-foreground-lighter bg-surface-300 px-2 h-7 flex flex-row justify-center gap-1 items-center"
+              className="text-xs rounded-md font-mono bg-surface-300 px-2 h-[26px] flex flex-row justify-center gap-1 items-center"
             >
-              {filter.key} {filter.compare} {filter.value}
+              <span className="">{filter.key}</span>
+              <span className="text-foreground-lighter">{filter.compare}</span>
+              <span className="">{filter.value}</span>
               <Button
                 type="text"
                 size="tiny"
@@ -276,36 +278,31 @@ const ReportFilterBar = ({
               </Button>
             </div>
           ))}
-        <Popover
-          align="end"
-          header={
-            <div className="flex justify-between items-center py-1">
-              <h5 className="text-sm text-foreground">Add Filter</h5>
-
-              <Button
-                type="primary"
-                size="tiny"
-                onClick={() => {
-                  onAddFilter(addFilterValues)
-                  setShowAdder(false)
-                  resetFilterValues()
-                }}
-              >
-                Save
-              </Button>
-            </div>
-          }
-          open={showAdder}
-          onOpenChange={(openValue) => setShowAdder(openValue)}
-          overlay={
-            <div className="px-3 py-3 flex flex-col gap-2">
+        <Popover open={showAdder} onOpenChange={(openValue) => setShowAdder(openValue)}>
+          <PopoverTrigger>
+            <Button
+              asChild
+              type="default"
+              size="tiny"
+              icon={<Plus className={`text-foreground-light `} />}
+            >
+              <span>Add filter</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align={filters.length > 0 ? 'end' : 'start'}
+            portal={true}
+            className="p-0 w-60"
+          >
+            <div className="flex flex-col gap-3 p-3">
               <Select
                 size="tiny"
                 value={addFilterValues.key}
                 onChange={(e) => {
                   setAddFilterValues((prev) => ({ ...prev, key: e.target.value }))
                 }}
                 label="Attribute Filter"
+                className="gap-[2px]"
               >
                 {filterKeys.map((key) => (
                   <Select.Option key={key} value={key}>
@@ -323,6 +320,7 @@ const ReportFilterBar = ({
                   }))
                 }}
                 label="Comparison"
+                className="gap-[2px]"
               >
                 {['matches', 'is'].map((value) => (
                   <Select.Option key={value} value={value}>
@@ -333,6 +331,7 @@ const ReportFilterBar = ({
               <Input
                 size="tiny"
                 label="Value"
+                className="gap-[2px]"
                 placeholder={
                   addFilterValues.compare === 'matches'
                     ? 'Provide a regex expression'
@@ -343,17 +342,21 @@ const ReportFilterBar = ({
                 }}
               />
             </div>
-          }
-          showClose
-        >
-          <Button
-            asChild
-            type="default"
-            size="tiny"
-            icon={<Plus className={`text-foreground-light `} />}
-          >
-            <span>Add filter</span>
-          </Button>
+
+            <div className="flex items-center justify-end gap-2 border-t border-default p-2">
+              <Button
+                type="primary"
+                size="tiny"
+                onClick={() => {
+                  onAddFilter(addFilterValues)
+                  setShowAdder(false)
+                  resetFilterValues()
+                }}
+              >
+                Add filter
+              </Button>
+            </div>
+          </PopoverContent>
         </Popover>
       </div>
 
@@ -369,4 +372,5 @@ const ReportFilterBar = ({
     </div>
   )
 }
+
 export default ReportFilterBar

apps/studio/components/interfaces/Reports/SharedAPIReport.constants.ts renamed to apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants.ts

@@ -1,8 +1,11 @@
 import { get } from 'data/fetchers'
-import { generateRegexpWhere } from './Reports.constants'
-import { ReportFilterItem } from './Reports.types'
-import { useQueries } from '@tanstack/react-query'
+import { generateRegexpWhere } from '../Reports.constants'
+import { ReportFilterItem } from '../Reports.types'
+import { useQueries, useQueryClient } from '@tanstack/react-query'
 import * as Sentry from '@sentry/nextjs'
+import { useState } from 'react'
+import { useParams } from 'common'
+import { isEqual } from 'lodash'
 
 export const SHARED_API_REPORT_SQL = {
   totalRequests: {
@@ -214,30 +217,58 @@ const fetchLogs = async ({
   return data
 }
 
+const DEFAULT_KEYS = ['shared-api-report']
+
 type SharedAPIReportParams = {
-  src: string
-  filters: ReportFilterItem[]
+  filterBy: 'auth' | 'realtime' | 'storage' | 'graphql' | 'functions' | 'postgrest'
   start: string
   end: string
   projectRef: string
   enabled?: boolean
 }
 export const useSharedAPIReport = ({
-  src = 'edge_logs',
-  filters,
+  filterBy,
   start,
   end,
-  projectRef,
   enabled = true,
-}: SharedAPIReportParams) => {
+}: Omit<SharedAPIReportParams, 'projectRef'>) => {
+  const { ref } = useParams() as { ref: string }
+  const [filters, setFilters] = useState<ReportFilterItem[]>([])
+  const queryClient = useQueryClient()
+  const filterByMapSource = {
+    functions: 'function_edge_logs',
+    realtime: 'edge_logs',
+    storage: 'edge_logs',
+    graphql: 'edge_logs',
+    postgrest: 'edge_logs',
+    auth: 'edge_logs',
+  }
+
+  const filterByMapValue = {
+    functions: '/functions',
+    realtime: '/realtime',
+    storage: '/storage',
+    graphql: '/graphql',
+    postgrest: '/rest',
+    auth: '/auth',
+  }
+
+  const baseFilter = {
+    key: 'request.path',
+    value: filterByMapValue[filterBy],
+    compare: 'matches' as const,
+  }
+
+  const allFilters = [baseFilter, ...filters]
+
   const queries = useQueries({
     queries: Object.entries(SHARED_API_REPORT_SQL).map(([key, value]) => ({
-      queryKey: ['shared-api-report', key, src, filters, start, end, projectRef],
-      enabled,
+      queryKey: [...DEFAULT_KEYS, key, filterByMapSource[filterBy], filters, start, end, ref],
+      enabled: enabled && !!ref && !!filterBy,
       queryFn: () =>
         fetchLogs({
-          projectRef,
-          sql: value.sql(filters, src),
+          projectRef: ref,
+          sql: value.sql(allFilters, filterByMapSource[filterBy]),
           start,
           end,
         }),
@@ -269,10 +300,39 @@ export const useSharedAPIReport = ({
     },
     {} as { [K in keyof typeof SHARED_API_REPORT_SQL]: boolean }
   )
+  const addFilter = (filter: ReportFilterItem) => {
+    if (isEqual(filter, baseFilter)) return
+    if (filters.some((f) => isEqual(f, filter))) return
+    setFilters((prev) =>
+      [...prev, filter].sort((a, b) => {
+        const keyA = a.key.toLowerCase()
+        const keyB = b.key.toLowerCase()
+        if (keyA < keyB) {
+          return -1
+        }
+        if (keyA > keyB) {
+          return 1
+        }
+        return 0
+      })
+    )
+  }
+
+  const removeFilters = (toRemove: ReportFilterItem[]) => {
+    setFilters((prev) => prev.filter((f) => !toRemove.find((r) => isEqual(f, r))))
+  }
+
+  const isLoadingData = Object.values(isLoading).some(Boolean)
 
   return {
     data,
     error,
     isLoading,
+    isLoadingData,
+    isRefetching: queryClient.isFetching({ queryKey: DEFAULT_KEYS }) > 0 || false,
+    refetch: () => queryClient.invalidateQueries({ queryKey: DEFAULT_KEYS }),
+    filters,
+    addFilter,
+    removeFilters,
   }
 }

apps/studio/components/interfaces/Reports/SharedAPIReport.tsx renamed to apps/studio/components/interfaces/Reports/SharedAPIReport/SharedAPIReport.tsx

@@ -1,47 +1,33 @@
-import ReportWidget from './ReportWidget'
+import ReportWidget from '../ReportWidget'
 import {
   ErrorCountsChartRenderer,
   NetworkTrafficRenderer,
   ResponseSpeedChartRenderer,
   TopApiRoutesRenderer,
   TotalRequestsChartRenderer,
-} from './renderers/ApiRenderers'
-import { SharedAPIReportKey, useSharedAPIReport } from './SharedAPIReport.constants'
-import { useParams } from 'common'
+} from '../renderers/ApiRenderers'
+import { SharedAPIReportKey } from './SharedAPIReport.constants'
 
-export function SharedAPIReport({
-  filterBy,
-  start,
-  end,
-  hiddenReports = [],
-}: {
-  filterBy: 'auth' | 'realtime' | 'storage' | 'graphql' | 'functions'
-  start: string
-  end: string
+type SharedAPIReportWidgetsProps = {
+  data: any
+  error: any
+  isLoading: any
+  isRefetching: boolean
   hiddenReports?: SharedAPIReportKey[]
-}) {
-  const { ref } = useParams() as { ref: string }
-
-  const { data, error, isLoading } = useSharedAPIReport({
-    src: filterBy === 'functions' ? 'function_edge_logs' : 'edge_logs',
-    filters: [
-      {
-        key: 'request.path',
-        value: `/${filterBy}`,
-        compare: 'matches',
-      },
-    ],
-    start,
-    end,
-    projectRef: ref,
-    enabled: !!ref && !!filterBy,
-  })
+}
 
+export function SharedAPIReport({
+  data,
+  error,
+  isLoading,
+  isRefetching,
+  hiddenReports = [],
+}: SharedAPIReportWidgetsProps) {
   return (
     <div className="grid grid-cols-1 gap-4">
       {!hiddenReports.includes('totalRequests') && (
         <ReportWidget
-          isLoading={isLoading.totalRequests}
+          isLoading={isLoading.totalRequests || isRefetching}
           title="Total Requests"
           data={data.totalRequests || []}
           error={error.totalRequests}
@@ -52,7 +38,7 @@ export function SharedAPIReport({
       )}
       {!hiddenReports.includes('errorCounts') && (
         <ReportWidget
-          isLoading={isLoading.errorCounts}
+          isLoading={isLoading.errorCounts || isRefetching}
           title="Response Errors"
           tooltip="Error responses with 4XX or 5XX status codes"
           data={data.errorCounts || []}
@@ -66,7 +52,7 @@ export function SharedAPIReport({
       )}
       {!hiddenReports.includes('responseSpeed') && (
         <ReportWidget
-          isLoading={isLoading.responseSpeed}
+          isLoading={isLoading.responseSpeed || isRefetching}
           title="Response Speed"
           tooltip="Average response speed of a request (in ms)"
           data={data.responseSpeed || []}
@@ -78,7 +64,7 @@ export function SharedAPIReport({
       )}
       {!hiddenReports.includes('networkTraffic') && (
         <ReportWidget
-          isLoading={isLoading.networkTraffic}
+          isLoading={isLoading.networkTraffic || isRefetching}
           error={error.networkTraffic}
           title="Network Traffic"
           tooltip="Ingress and egress of requests and responses respectively"