QueueCells.tsx88 lines · main

1	import dayjs from 'dayjs'
2	import { Check, Loader2, X } from 'lucide-react'
3
4	import { pgmqQueueTable } from './Queues.utils'
5	import { useQueuesMetricsQuery } from '@/data/database-queues/database-queues-metrics-query'
6	import { PostgresQueue } from '@/data/database-queues/database-queues-query'
7	import { useTablesQuery } from '@/data/tables/tables-query'
8	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
9	import { DATETIME_FORMAT } from '@/lib/constants'
10
11	export interface QueueWithMetrics extends PostgresQueue {
12	id: string // Add unique id for DataGrid
13	}
14
15	interface QueueCellProps {
16	queue: QueueWithMetrics
17	}
18
19	export const QueueNameCell = ({ queue }: QueueCellProps) => (
20	<div className="flex items-center">
21	<span className="truncate" title={queue.queue_name}>
22	{queue.queue_name}
23	</span>
24	</div>
25	)
26
27	export const QueueTypeCell = ({ queue }: QueueCellProps) => {
28	const type = queue.is_partitioned ? 'Partitioned' : queue.is_unlogged ? 'Unlogged' : 'Basic'
29	return (
30	<div className="flex items-center">
31	<span className="truncate" title={type.toLowerCase()}>
32	{type}
33	</span>
34	</div>
35	)
36	}
37
38	export const QueueRLSCell = ({ queue }: QueueCellProps) => {
39	const { data: selectedProject } = useSelectedProjectQuery()
40
41	const { data: queueTables } = useTablesQuery({
42	projectRef: selectedProject?.ref,
43	connectionString: selectedProject?.connectionString,
44	schema: 'pgmq',
45	})
46
47	const queueTable = queueTables?.find((x) => x.name === pgmqQueueTable(queue.queue_name))
48	const isRlsEnabled = !!queueTable?.rls_enabled
49
50	return (
51	<div className="flex items-center">
52	{isRlsEnabled ? <Check size={14} className="text-brand" /> : <X size={14} />}
53	</div>
54	)
55	}
56
57	export const QueueCreatedAtCell = ({ queue }: QueueCellProps) => (
58	<div className="flex items-center">
59	<span title={queue.created_at}>{dayjs(queue.created_at).format(DATETIME_FORMAT)}</span>
60	</div>
61	)
62
63	export const QueueSizeCell = ({ queue }: QueueCellProps) => {
64	const { data: selectedProject } = useSelectedProjectQuery()
65
66	const { data: metrics, isPending: isLoading } = useQueuesMetricsQuery(
67	{
68	queueName: queue.queue_name,
69	projectRef: selectedProject?.ref,
70	connectionString: selectedProject?.connectionString,
71	},
72	{
73	staleTime: 30 * 1000, // 30 seconds
74	}
75	)
76
77	return (
78	<div className="flex items-center">
79	{isLoading ? (
80	<Loader2 className="animate-spin" size={16} />
81	) : (
82	<span>
83	{metrics?.queue_length} {metrics?.method === 'estimated' ? '(Approximate)' : null}
84	</span>
85	)}
86	</div>
87	)
88	}