chore: refactor /database parallel rendering

app/api/clean/route.ts

@@ -50,7 +50,7 @@ async function cleanupHangQuery(
     })
     const data: { last_cleanup: string }[] = await response.json()
     lastCleanup = data.length > 0 ? new Date(data[0].last_cleanup) : new Date()
-    console.debug('[Middleware] Last cleanup:', lastCleanup)
+    console.debug('[/api/clean] Last cleanup:', lastCleanup)
   } catch (error) {
     throw new Error(`Error when getting last cleanup: ${error}`)
   }
@@ -86,7 +86,7 @@ async function cleanupHangQuery(
 
     killQueryResp = await resp.json<KillQueryResponse>()
     console.log(
-      '[Middleware] queries found:',
+      '[/api/clean] queries found:',
       killQueryResp.data.map((row) => row.query_id).join(', ')
     )
 
@@ -134,7 +134,7 @@ async function cleanupHangQuery(
       },
       {} as Record<string, number>
     )
-    console.log('[Middleware] Kill status:', killStatus)
+    console.log('[/api/clean] Kill status:', killStatus)
 
     const value = {
       kind: 'SystemKillQuery',
@@ -154,7 +154,7 @@ async function cleanupHangQuery(
 
     return value
   } catch (error) {
-    console.error("[Middleware] 'SystemKillQuery' event creating error:", error)
+    console.error("[/api/clean] 'SystemKillQuery' event creating error:", error)
     return
   }
 }

app/background.tsx → app/background-jobs.tsx

@@ -1,12 +1,8 @@
 'use client'
 
-import { usePathname, useSearchParams } from 'next/navigation'
 import { useEffect } from 'react'
 
-export function Background() {
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
+export function BackgroundJobs() {
   useEffect(() => {
     async function callCleanApi() {
       await fetch('/api/clean')

app/database/[database]/[table]/@dictionary/page.tsx

@@ -0,0 +1,46 @@
+import { ServerComponentLazy } from '@/components/server-component-lazy'
+import { engineType } from '../engine-type'
+import { Extras } from '../extras/extras'
+import { SampleData } from '../extras/sample-data'
+import { TableDDL } from '../extras/table-ddl'
+
+interface Props {
+  params: {
+    database: string
+    table: string
+  }
+}
+
+export default async function Dictionary({
+  params: { database, table },
+}: Props) {
+  const engine = await engineType(database, table)
+  if (engine !== 'Dictionary') return <></>
+
+  const dictUsage = `SELECT dictGet('${database}.${table}', 'key', 'value')`
+
+  return (
+    <div className="flex flex-col">
+      <Extras database={database} table={table} />
+
+      <div className="mt-6 w-fit overflow-auto">
+        <h2 className="mb-3 text-lg font-semibold">Dictionary usage</h2>
+        <pre className="text-sm">
+          <code>{dictUsage}</code>
+        </pre>
+      </div>
+
+      <div className="mt-3 w-fit overflow-auto">
+        <h2 className="mb-3 text-lg font-semibold">Dictionary DDL</h2>
+        <TableDDL database={database} table={table} />
+      </div>
+
+      <ServerComponentLazy>
+        <div className="mt-6 w-fit overflow-auto">
+          <h2 className="mb-3 text-lg font-semibold">Sample Data</h2>
+          <SampleData database={database} table={table} />
+        </div>
+      </ServerComponentLazy>
+    </div>
+  )
+}

app/database/[database]/[table]/@materializedview/materialized-view.tsx

@@ -0,0 +1,34 @@
+import { engineType } from '../engine-type'
+import { Extras } from '../extras/extras'
+import { TableDDL } from '../extras/table-ddl'
+
+interface Props {
+  params: {
+    database: string
+    table: string
+  }
+}
+
+export default async function MaterializedView({
+  params: { database, table },
+}: Props) {
+  const engine = await engineType(database, table)
+  if (engine !== 'MaterializedView') return <></>
+
+  return (
+    <div className="flex flex-col">
+      <Extras database={database} table={table} />
+
+      <div className="mt-3 w-fit overflow-auto">
+        <h2 className="mb-3 text-lg font-semibold">
+          MaterializedView:{' '}
+          <code>
+            {database}.{table}
+          </code>
+        </h2>
+
+        <TableDDL database={database} table={table} />
+      </div>
+    </div>
+  )
+}

app/database/[database]/[table]/@mergetree/page.tsx

@@ -0,0 +1,80 @@
+import { TextAlignBottomIcon } from '@radix-ui/react-icons'
+import Link from 'next/link'
+
+import { DataTable } from '@/components/data-table/data-table'
+import { Button } from '@/components/ui/button'
+import { fetchDataWithCache } from '@/lib/clickhouse'
+import { Extras } from '../extras/extras'
+
+import { config, type Row } from '../config'
+import { engineType } from '../engine-type'
+
+interface Props {
+  params: {
+    database: string
+    table: string
+  }
+}
+
+export default async function MergeTree({
+  params: { database, table },
+}: Props) {
+  const engine = await engineType(database, table)
+  if (engine.includes('MergeTree') === false) return <></>
+
+  const columns = await fetchDataWithCache()<Row[]>({
+    query: config.sql,
+    query_params: {
+      database,
+      table,
+    },
+  })
+
+  let description = ''
+  try {
+    const raw = await fetchDataWithCache()<{ comment: string }[]>({
+      query: `
+          SELECT comment
+            FROM system.tables
+           WHERE (database = {database: String})
+             AND (name = {table: String})
+        `,
+      query_params: { database, table },
+    })
+
+    description = raw?.[0]?.comment || ''
+  } catch (e) {
+    console.error('Error fetching table description', e)
+  }
+
+  return (
+    <DataTable
+      title={`Table: ${database}.${table}`}
+      description={description}
+      toolbarExtras={<Extras database={database} table={table} />}
+      topRightToolbarExtras={
+        <TopRightToolbarExtras database={database} table={table} />
+      }
+      config={config}
+      data={columns}
+    />
+  )
+}
+
+const TopRightToolbarExtras = ({
+  database,
+  table,
+}: {
+  database: string
+  table: string
+}) => (
+  <Link href={`/top-usage-columns?table=${database}.${table}`}>
+    <Button
+      variant="outline"
+      className="flex flex-row gap-2 text-muted-foreground"
+    >
+      <TextAlignBottomIcon className="size-3" />
+      Top usage columns
+    </Button>
+  </Link>
+)

app/database/[database]/[table]/@view/page.tsx

@@ -0,0 +1,27 @@
+import { engineType } from '../engine-type'
+import { Extras } from '../extras/extras'
+import { TableDDL } from '../extras/table-ddl'
+
+interface Props {
+  params: {
+    database: string
+    table: string
+  }
+}
+
+export default async function View({ params: { database, table } }: Props) {
+  const engine = await engineType(database, table)
+  if (engine !== 'View') return <></>
+
+  return (
+    <div className="flex flex-col">
+      <Extras database={database} table={table} />
+
+      <div className="mt-3 w-fit overflow-auto">
+        <h2 className="mb-3 text-lg font-semibold">View definition:</h2>
+
+        <TableDDL database={database} table={table} />
+      </div>
+    </div>
+  )
+}

app/database/[database]/[table]/engine-type.ts

@@ -0,0 +1,15 @@
+import { fetchDataWithCache } from '@/lib/clickhouse'
+
+export const engineType = async (database: string, table: string) => {
+  const resp = await fetchDataWithCache()<{ engine: string }[]>({
+    query: `
+      SELECT engine
+      FROM system.tables
+      WHERE (database = {database: String})
+        AND (name = {table: String})
+    `,
+    query_params: { database, table },
+  })
+
+  return resp?.[0]?.engine || ''
+}

app/database/[database]/[table]/extras/extras.tsx

@@ -0,0 +1,40 @@
+import { ArrowLeftIcon } from '@radix-ui/react-icons'
+import Link from 'next/link'
+
+import { Button } from '@/components/ui/button'
+import { AlternativeTables } from './alternative-tables'
+import { RunningQueriesButton } from './runnning-queries-button'
+import { SampleDataButton } from './sample-data-button'
+import { ShowDDL } from './show-ddl-button'
+import { TableInfo } from './table-info'
+
+export const Extras = ({
+  database,
+  table,
+}: {
+  database: string
+  table: string
+}) => (
+  <div className="mb-3 flex flex-row justify-between gap-3">
+    <div className="flex flex-row gap-3">
+      <Link href={`/database/${database}`}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="flex flex-row gap-2 text-muted-foreground"
+        >
+          <ArrowLeftIcon className="size-3" />
+          Back to {database}
+        </Button>
+      </Link>
+      <AlternativeTables database={database} table={table} />
+    </div>
+
+    <div className="flex flex-row gap-3">
+      <ShowDDL database={database} table={table} />
+      <TableInfo database={database} table={table} />
+      <SampleDataButton database={database} table={table} />
+      <RunningQueriesButton database={database} table={table} />
+    </div>
+  </div>
+)

app/database/[database]/[table]/layout.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+interface LayoutProps {
+  children: React.ReactNode
+  mergetree: React.ReactNode
+  dictionary: React.ReactNode
+  materializedview: React.ReactNode
+  view: React.ReactNode
+}
+
+export default function Layout({
+  view,
+  dictionary,
+  materializedview,
+  mergetree,
+}: LayoutProps) {
+  return (
+    <div>
+      {view}
+      {dictionary}
+      {materializedview}
+      {mergetree}
+    </div>
+  )
+}