QueueRow() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx lines 18–86

const QueueRow = ({ queue }: { queue: PostgresQueue }) => {
  const router = useRouter()
  const { data: selectedProject } = useSelectedProjectQuery()

  const { data: queueTables } = useTablesQuery({
    projectRef: selectedProject?.ref,
    connectionString: selectedProject?.connectionString,
    schema: 'pgmq',
  })
  const queueTable = queueTables?.find((x) => x.name === `q_${queue.queue_name}`)
  const isRlsEnabled = !!queueTable?.rls_enabled

  const { data: metrics, isPending: isLoading } = useQueuesMetricsQuery(
    {
      queueName: queue.queue_name,
      projectRef: selectedProject?.ref,
      connectionString: selectedProject?.connectionString,
    },
    {
      staleTime: 30 * 1000, // 30 seconds, talk with Oli whether this is ok to call every minute
    }
  )

  const type = queue.is_partitioned ? 'Partitioned' : queue.is_unlogged ? 'Unlogged' : 'Basic'

  return (
    <Table.tr
      key={queue.queue_name}
      onClick={() => {
        router.push(
          `/project/${selectedProject?.ref}/integrations/queues/queues/${queue.queue_name}`
        )
      }}
    >
      <Table.td className="truncate">
        <p title={queue.queue_name}>{queue.queue_name}</p>
      </Table.td>
      <Table.td className="table-cell overflow-auto">
        <p title={type.toLocaleLowerCase()} className="truncate">
          {type}
        </p>
      </Table.td>
      <Table.td className="table-cell">
        <div className="flex justify-center">
          {isRlsEnabled ? <Check size={14} className="text-brand" /> : <X size={14} />}
        </div>
      </Table.td>
      <Table.td className="table-cell">
        <p title={queue.created_at}>{dayjs(queue.created_at).format(DATETIME_FORMAT)}</p>
      </Table.td>
      <Table.td className="table-cell">
        <div className="flex justify-center">
          {isLoading ? (
            <Loader2 className="animate-spin" size={16} />
          ) : (
            <p>
              {metrics?.queue_length} {metrics?.method === 'estimated' ? '(Approximate)' : null}
            </p>
          )}
        </div>
      </Table.td>
      <Table.td>
        <div className="flex items-center justify-end">
          <ChevronRight size="18" />
        </div>
      </Table.td>
    </Table.tr>
  )
}