breadcrumbs

Sheraff · Jul 8, 2024 · c9e5669 · c9e5669
1 parent e12d3e4
commit c9e5669
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 18 deletions.
diff --git a/admin/client/routes/$queueId/index.tsx b/admin/client/routes/$queueId/index.tsx
@@ -3,13 +3,14 @@ import { createFileRoute, Outlet } from '@tanstack/react-router'
 import { Link } from '@tanstack/react-router'
 import { Button } from "client/components/ui/button"
 
-const jobsQueryOpts = (queueId: string) => ({
+export const jobsQueryOpts = (queueId?: string) => ({
   queryKey: [queueId, 'jobs'],
   queryFn: async () => {
     const res = await fetch(`/api/jobs?queue=${queueId}`)
     const json = await res.json()
     return json as string[]
-  }
+  },
+  enabled: Boolean(queueId),
 }) satisfies UseQueryOptions
 
 export const Route = createFileRoute('/$queueId/')({

diff --git a/admin/client/routes/__root.tsx b/admin/client/routes/__root.tsx
@@ -1,11 +1,13 @@
-import { useSuspenseQuery, type QueryClient, type UseQueryOptions } from "@tanstack/react-query"
+import { useQuery, useSuspenseQuery, type QueryClient, type UseQueryOptions } from "@tanstack/react-query"
 import { createRootRouteWithContext, Link, Outlet, redirect, useNavigate, useParams } from '@tanstack/react-router'
 import { ModeToggle } from "client/components/mode-toggle"
 import { TimeDisplayToggle } from "client/components/time-display-toggle"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "client/components/ui/select"
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { Button } from "client/components/ui/button"
+import { jobsQueryOpts } from "client/routes/$queueId"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "client/components/ui/dropdown-menu"
+import { ChevronRight } from "lucide-react"
 
 const queueOptions = {
 	queryKey: ['queues'],
@@ -16,21 +18,53 @@ const queueOptions = {
 	}
 } satisfies UseQueryOptions
 
-function SelectQueue() {
+function SelectNav() {
 	const { data } = useSuspenseQuery(queueOptions)
-	const { queueId } = useParams({ strict: false })
+	const { queueId, jobId } = useParams({ strict: false })
 	const nav = useNavigate()
+	const { data: jobs } = useQuery(jobsQueryOpts(queueId))
 	return (
-		<Select value={queueId} onValueChange={queueId => nav({ to: "/$queueId", params: { queueId } })}>
-			<SelectTrigger className="w-[180px]">
-				<SelectValue placeholder="Select a queue" />
-			</SelectTrigger>
-			<SelectContent>
-				{data.map((queue) => (
-					<SelectItem key={queue} value={queue}>{queue}</SelectItem>
-				))}
-			</SelectContent>
-		</Select>
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="ghost">
+						{queueId ? queueId : "Select a queue"}
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start">
+					{data.map((queue) => (
+						<DropdownMenuItem key={queue} onClick={() => nav({ to: "/$queueId", params: { queueId: queue } })}>
+							{queue}
+						</DropdownMenuItem>
+					))}
+				</DropdownMenuContent>
+			</DropdownMenu>
+			{queueId && <ChevronRight className="h-4 w-4" />}
+			{queueId && (
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost">
+							{jobId ? jobId : "Select a job"}
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="start">
+						{jobs?.map((job) => (
+							<DropdownMenuItem key={job} onClick={() => nav({ to: "/$queueId/$jobId", params: { queueId, jobId: job } })}>
+								{job}
+							</DropdownMenuItem>
+						))}
+						{jobId && (
+							<>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem onClick={() => nav({ to: "/$queueId", params: { queueId } })}>
+									See all jobs
+								</DropdownMenuItem>
+							</>
+						)}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			)}
+		</>
 	)
 }
 
@@ -45,8 +79,8 @@ export const Route = createRootRouteWithContext<{ client: QueryClient }>()({
 	},
 	component: () => (
 		<>
-			<nav className="flex p-4 gap-2">
-				<SelectQueue />
+			<nav className="flex p-4 gap-2 items-center">
+				<SelectNav />
 				<div className="flex-1" />
 				<TimeDisplayToggle />
 				<ModeToggle />