feat: update menu, add /api, update tests

.github/workflows/ci.yml

@@ -125,3 +125,4 @@ jobs:
       - name: Test image
         run: |
           curl -sSf http://localhost:3000/healthz || exit 1
+          curl -sSf http://localhost:3000/api/version || exit 1

app/api/version/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from 'next/server'
+import packageInfo from '@/package.json'
+
+import { fetchData } from '@/lib/clickhouse'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET() {
+  try {
+    const clickhouse = await fetchData('SELECT version()')
+    return NextResponse.json({
+      ui: packageInfo.version,
+      clickhouse,
+    })
+  } catch {
+    return NextResponse.json(
+      {
+        ui: packageInfo.version,
+        clickhouse: false,
+      },
+      { status: 500 }
+    )
+  }
+}

app/healthz/route.ts

@@ -1,24 +1,7 @@
 import { NextResponse } from 'next/server'
-import packageInfo from '@/package.json'
-
-import { fetchData } from '@/lib/clickhouse'
 
 export const dynamic = 'force-dynamic'
 
 export async function GET() {
-  try {
-    const clickhouse = await fetchData('SELECT version()')
-    return NextResponse.json({
-      ui: packageInfo.version,
-      clickhouse,
-    })
-  } catch {
-    return NextResponse.json(
-      {
-        ui: packageInfo.version,
-        clikckhouse: false,
-      },
-      { status: 500 }
-    )
-  }
+  return NextResponse.json({ ok: true })
 }

app/overview/page.tsx

@@ -13,7 +13,6 @@ export const revalidate = 5
 export default async function Overview() {
   noStore()
 
-  x
   return (
     <Tabs defaultValue="overview" className="space-y-4">
       <div className="flex items-center justify-between space-y-2">

components/menu.tsx

@@ -1,22 +1,28 @@
+import React from 'react'
 import Link from 'next/link'
 
 import { fetchData, QUERY_COMMENT } from '@/lib/clickhouse'
+import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
 import {
   NavigationMenu,
+  NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
+  NavigationMenuTrigger,
   navigationMenuTriggerClasses,
 } from '@/components/ui/navigation-menu'
 
+interface MenuProps {
+  items?: MenuItem[]
+}
+
 interface MenuItem {
   title: string
   href: string
+  description?: string
   countSql?: string
-}
-
-interface MenuProps {
   items?: MenuItem[]
 }
 
@@ -26,9 +32,23 @@ const defaultItems = [
     href: '/overview',
   },
   {
-    title: 'Running Queries',
-    href: '/running-queries',
+    title: 'Queries Monitor',
+    href: '',
     countSql: `SELECT COUNT() FROM system.processes WHERE is_cancelled = 0 AND query NOT LIKE '%${QUERY_COMMENT}%'`,
+    items: [
+      {
+        title: 'Running Queries',
+        href: '/running-queries',
+        description: 'Queries that are currently running',
+        countSql: `SELECT COUNT() FROM system.processes WHERE is_cancelled = 0 AND query NOT LIKE '%${QUERY_COMMENT}%'`,
+      },
+      {
+        title: 'History Queries',
+        href: '/history-queries',
+        description:
+          'Queries that have been run including successed, failed queries with resourses usage details',
+      },
+    ],
   },
   {
     title: 'Tables',
@@ -51,14 +71,7 @@ export function Menu({ items = defaultItems }: MenuProps) {
     <NavigationMenu>
       <NavigationMenuList>
         {items.map((item) => (
-          <NavigationMenuItem key={item.href}>
-            <Link href={item.href} legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerClasses}>
-                {item.title}
-                <MenuCounter sql={item.countSql} />
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
+          <MenuItem key={item.href} item={item} />
         ))}
       </NavigationMenuList>
     </NavigationMenu>
@@ -80,3 +93,83 @@ async function MenuCounter({ sql }: { sql?: string }) {
     </Badge>
   )
 }
+
+function MenuItem({ item }: { item: MenuItem }) {
+  if (item.items) {
+    return <HasChildItems item={item} />
+  }
+
+  return <SingleItem item={item} />
+}
+
+function SingleItem({ item }: { item: MenuItem }) {
+  return (
+    <NavigationMenuItem>
+      <Link href={item.href} legacyBehavior passHref>
+        <NavigationMenuLink className={navigationMenuTriggerClasses}>
+          {item.title}
+          <MenuCounter sql={item.countSql} />
+        </NavigationMenuLink>
+      </Link>
+    </NavigationMenuItem>
+  )
+}
+
+function HasChildItems({ item }: { item: MenuItem }) {
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>
+        {item.title} <MenuCounter sql={item.countSql} />
+      </NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <ul className="flex w-fit min-w-[400px] flex-col gap-3 p-4">
+          {item.items?.map((childItem) => (
+            <ListItem
+              key={childItem.href}
+              title={
+                <span>
+                  {childItem.title} <MenuCounter sql={childItem.countSql} />
+                </span>
+              }
+              href={childItem.href}
+              description={childItem.description}
+            />
+          ))}
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  )
+}
+
+function ListItem({
+  className,
+  title,
+  href,
+  description,
+  ...props
+}: {
+  className?: string
+  title: React.ReactNode
+  href: string
+  description: React.ReactNode
+}) {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          className={cn(
+            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
+            className
+          )}
+          href={href}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+            {description}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+}

cypress/e2e/navigation.cy.js

@@ -1,9 +1,9 @@
 describe('Navigation', () => {
-  it('should navigate to the running queries page', () => {
-    cy.visitAndValidate('/overview', 'a[href*="running-queries"]', '/running-queries', 'Running Queries')
+  it('should navigate to the /tables page', () => {
+    cy.visitAndValidate('/overview', 'a[href*="running-queries"]', '/tables', 'Tables')
   })
 
-  it('should navigate to the settings page', () => {
+  it('should navigate to the /settings page', () => {
     cy.visitAndValidate('/overview', 'a[href*="settings"]', '/settings', 'Settings')
   })
 })

yarn.lock

@@ -853,6 +853,23 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-menubar@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menubar/-/react-menubar-1.0.4.tgz#7d46ababfec63db3868d9ed79366686634c1201a"
+  integrity sha512-bHgUo9gayKZfaQcWSSLr++LyS0rgh+MvD89DE4fJ6TkGHvjHgPaBZf44hdka7ogOxIOdj9163J+5xL2Dn4qzzg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-menu" "2.0.6"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-navigation-menu@^1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz#654151310c3f9a29afd19fb60ddc7977e54b8a3d"