TopApiRoutesRenderer() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx lines 162–244

export const TopApiRoutesRenderer = (
  props: ReportWidgetRendererProps<{
    method: string
    // shown for error table but not all requests table
    status_code?: number
    path: string
    search: string
    count: number
    // used for response speed table only
    avg?: number
  }>
) => {
  const { ref: projectRef } = useParams()
  const [showMore, setShowMore] = useState(false)

  const headerClasses = '!text-xs !py-2 p-0 font-bold !bg-surface-200 !border-x-0 !rounded-none'
  const cellClasses = '!text-xs !py-2 !border-x-0 !rounded-none align-middle'

  if (props.data.length === 0) return null

  return (
    <Collapsible>
      <Table
        className="rounded-t-none"
        head={
          <>
            <Table.th className={headerClasses}>Request</Table.th>
            <Table.th className={headerClasses + ' text-right'}>Count</Table.th>
            {props.data[0].avg !== undefined && (
              <Table.th className={headerClasses + ' text-right'}>Avg</Table.th>
            )}
          </>
        }
        body={
          <>
            {props.data.map((datum, index) => (
              <Fragment key={index + datum.method + datum.path + (datum.search || '')}>
                <Table.tr
                  className={[
                    'p-0 transition transform cursor-pointer hover:bg-surface-200',
                    showMore && index >= 3 ? 'w-full h-full opacity-100' : '',
                    !showMore && index >= 3 ? ' w-0 h-0 translate-y-10 opacity-0' : '',
                  ].join(' ')}
                >
                  {(!showMore && index < 3) || showMore ? (
                    <>
                      <Table.td className={[cellClasses].join(' ')}>
                        <RouteTdContent {...datum} />
                      </Table.td>
                      <Table.td className={[cellClasses, 'text-right align-top'].join(' ')}>
                        {datum.count}
                      </Table.td>
                      {props.data[0].avg !== undefined && (
                        <Table.td className={[cellClasses, 'text-right align-top'].join(' ')}>
                          {Number(datum.avg).toFixed(2)}ms
                        </Table.td>
                      )}
                    </>
                  ) : null}
                </Table.tr>
              </Fragment>
            ))}
          </>
        }
      />
      <Collapsible.Trigger asChild>
        <div className="flex flex-row justify-end w-full gap-2 p-1">
          <Button
            type="text"
            onClick={() => setShowMore(!showMore)}
            className={[
              'transition',
              showMore ? 'text-foreground' : 'text-foreground-lighter',
              props.data.length <= 3 ? 'hidden' : '',
            ].join(' ')}
          >
            {!showMore ? 'Show more' : 'Show less'}
          </Button>
        </div>
      </Collapsible.Trigger>
    </Collapsible>
  )
}