TopCacheMissesRenderer() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/renderers/StorageRenderers.tsx lines 40–86

export const TopCacheMissesRenderer = (
  props: ReportWidgetRendererProps<{
    path: string
    search: string
    count: number
  }>
) => {
  if (props.data.length === 0) return null
  const headerClasses = '!text-xs !py-2 p-0 font-bold !bg-surface-200'
  const cellClasses = '!text-xs !py-2'

  return (
    <>
      <h3 className="py-4 px-6">Top Cache Misses</h3>
      <Table
        head={
          <>
            <Table.th className={headerClasses}>Request</Table.th>
            <Table.th className={headerClasses + ' text-right'}>Count</Table.th>
          </>
        }
        body={
          <>
            {props.data.map((datum) => (
              <Fragment key={datum.path + (datum.search || '')}>
                <Table.tr className="p-0">
                  <Table.td className={[cellClasses].join(' ')}>
                    <div className=" truncate max-w-sm lg:max-w-lg">
                      <TextFormatter className="text-foreground-light" value={datum.path} />
                      <TextFormatter
                        className="max-w-sm text-foreground-lighter truncate "
                        value={decodeURIComponent(datum.search || '')}
                      />
                    </div>
                  </Table.td>
                  <Table.td className={[cellClasses, 'text-right align-top'].join(' ')}>
                    {datum.count}
                  </Table.td>
                </Table.tr>
              </Fragment>
            ))}
          </>
        }
      />
    </>
  )
}