konnosDashboard
QueuePage.tsx94 lines · main
1import { useParams } from 'common'
2import dayjs from 'dayjs'
3import Link from 'next/link'
4import { useRouter } from 'next/router'
5import {
6 BreadcrumbItem,
7 BreadcrumbLink,
8 BreadcrumbList,
9 BreadcrumbPage,
10 BreadcrumbSeparator,
11} from 'ui'
12import {
13 PageHeader,
14 PageHeaderBreadcrumb,
15 PageHeaderDescription,
16 PageHeaderMeta,
17 PageHeaderSummary,
18 PageHeaderTitle,
19} from 'ui-patterns/PageHeader'
20
21import { QueueTab } from './QueueTab'
22import { useQueuesQuery } from '@/data/database-queues/database-queues-query'
23import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
24import { DATETIME_FORMAT } from '@/lib/constants'
25
26export const QueuePage = () => {
27 const router = useRouter()
28 const { ref, id, pageId, childId } = useParams()
29 const childLabel = router?.query?.['child-label'] as string
30 const { data: project } = useSelectedProjectQuery()
31
32 const { data: queues } = useQueuesQuery({
33 projectRef: project?.ref,
34 connectionString: project?.connectionString,
35 })
36
37 // pgmq is case-insensitive when storing queue names — compare lowercased to be safe
38 const currentQueue = queues?.find(
39 (queue) => queue.queue_name.toLowerCase() === childId?.toLowerCase()
40 )
41
42 const pageTitle = childLabel || childId || 'Queue'
43
44 const getQueueType = (queue: typeof currentQueue) => {
45 if (!queue) return 'Unknown'
46 return queue.is_partitioned ? 'Partitioned' : queue.is_unlogged ? 'Unlogged' : 'Basic'
47 }
48
49 const pageSubtitle = currentQueue
50 ? `${getQueueType(currentQueue)} queue created on ${dayjs(currentQueue.created_at).format(DATETIME_FORMAT)}`
51 : undefined
52
53 return (
54 <>
55 <PageHeader size="full" className="pb-6">
56 <PageHeaderBreadcrumb>
57 <BreadcrumbList>
58 <BreadcrumbItem>
59 <BreadcrumbLink asChild>
60 <Link href={`/project/${ref}/integrations`}>Integrations</Link>
61 </BreadcrumbLink>
62 </BreadcrumbItem>
63 <BreadcrumbSeparator />
64 <BreadcrumbItem>
65 <BreadcrumbLink asChild>
66 <Link
67 href={
68 pageId
69 ? `/project/${ref}/integrations/${id}/${pageId}`
70 : `/project/${ref}/integrations/${id}`
71 }
72 >
73 Queues
74 </Link>
75 </BreadcrumbLink>
76 </BreadcrumbItem>
77 <BreadcrumbSeparator />
78 <BreadcrumbItem>
79 <BreadcrumbPage>{childId}</BreadcrumbPage>
80 </BreadcrumbItem>
81 </BreadcrumbList>
82 </PageHeaderBreadcrumb>
83 <PageHeaderMeta>
84 <PageHeaderSummary>
85 <PageHeaderTitle>{pageTitle}</PageHeaderTitle>
86 {pageSubtitle && <PageHeaderDescription>{pageSubtitle}</PageHeaderDescription>}
87 </PageHeaderSummary>
88 </PageHeaderMeta>
89 </PageHeader>
90
91 <QueueTab />
92 </>
93 )
94}