From 3c69908f547082c7b9e0d0822c3a59add90cf157 Mon Sep 17 00:00:00 2001
From: Duyet Le <me@duyet.net>
Date: Sun, 24 Nov 2024 22:02:49 +0700
Subject: [PATCH] feat: query detail page

---
 app/[host]/[query]/queries/history-queries.ts |   3 +
 app/[host]/[query]/queries/running-queries.ts |   9 +
 .../[cluster]/count-across-replicas/page.tsx  |   4 +-
 .../[cluster]/parts-across-replicas/page.tsx  |   1 +
 .../[cluster]/replicas-status/page.tsx        |   1 +
 app/[host]/clusters/config.ts                 |   4 +-
 app/[host]/clusters/page.tsx                  |   9 +-
 .../[database]/[table]/@mergetree/page.tsx    |   3 +-
 .../[database]/[table]/extras/extras.tsx      |   4 +-
 .../top-usage-columns-button.tsx}             |   3 +-
 app/[host]/database/[database]/default.tsx    |   5 +-
 app/[host]/database/[database]/page.tsx       |   1 +
 app/[host]/query/[query_id]/config.ts         | 186 ++++++++++
 app/[host]/query/[query_id]/page.tsx          |  43 +++
 app/[host]/query/[query_id]/query-detail.tsx  | 351 ++++++++++++++++++
 app/[host]/query/[query_id]/types.ts          |   6 +
 app/[host]/replica/[replica]/tables/page.tsx  |   1 +
 app/globals.css                               |   1 -
 .../data-table/cells/link-format.cy.tsx       | 135 ++++++-
 components/data-table/cells/link-format.tsx   |  17 +-
 components/data-table/column-defs.tsx         |   6 +-
 components/data-table/data-table-toolbar.tsx  |   2 +-
 components/data-table/data-table.cy.tsx       |  43 ++-
 components/data-table/data-table.tsx          |  16 +-
 components/data-table/format-cell.tsx         |   7 +-
 components/table.tsx                          |   2 +
 components/truncated-list.cy.tsx              |  62 ++++
 components/truncated-list.tsx                 |  34 ++
 components/truncated-paragraph.cy.tsx         |  49 +++
 components/truncated-paragraph.tsx            |  65 ++++
 lib/format-readable.ts                        |   1 -
 types/column-format.ts                        |   7 +-
 32 files changed, 1041 insertions(+), 40 deletions(-)
 rename app/[host]/database/[database]/[table]/{@mergetree/toolbar.tsx => extras/top-usage-columns-button.tsx} (90%)
 create mode 100644 app/[host]/query/[query_id]/config.ts
 create mode 100644 app/[host]/query/[query_id]/page.tsx
 create mode 100644 app/[host]/query/[query_id]/query-detail.tsx
 create mode 100644 app/[host]/query/[query_id]/types.ts
 create mode 100644 components/truncated-list.cy.tsx
 create mode 100644 components/truncated-list.tsx
 create mode 100644 components/truncated-paragraph.cy.tsx
 create mode 100644 components/truncated-paragraph.tsx

diff --git a/app/[host]/[query]/queries/history-queries.ts b/app/[host]/[query]/queries/history-queries.ts
index 1580a970..6a239df9 100644
--- a/app/[host]/[query]/queries/history-queries.ts
+++ b/app/[host]/[query]/queries/history-queries.ts
@@ -36,6 +36,7 @@ export const historyQueriesConfig: QueryConfig = {
         AND if ({duration_1m: String} = '1', query_duration >= 60, true)
         AND if (notEmpty({event_time: String}), toDate(event_time) = {event_time: String}, true)
         AND if ({database: String} != '' AND {table: String} != '', has(tables, format('{}.{}', {database: String}, {table: String})), true)
+        AND if ({user: String} != '', user = {user: String}, true)
       ORDER BY event_time DESC
       LIMIT 1000
   `,
@@ -68,6 +69,7 @@ export const historyQueriesConfig: QueryConfig = {
     readable_read_rows: ColumnFormat.BackgroundBar,
     readable_written_rows: ColumnFormat.BackgroundBar,
     readable_memory_usage: ColumnFormat.BackgroundBar,
+    query_id: [ColumnFormat.Link, { href: '/[ctx.hostId]/query/[query_id]' }],
   },
 
   defaultParams: {
@@ -76,6 +78,7 @@ export const historyQueriesConfig: QueryConfig = {
     event_time: '',
     database: '',
     table: '',
+    user: '',
   },
 
   filterParamPresets: [
diff --git a/app/[host]/[query]/queries/running-queries.ts b/app/[host]/[query]/queries/running-queries.ts
index 726209c5..e8900353 100644
--- a/app/[host]/[query]/queries/running-queries.ts
+++ b/app/[host]/[query]/queries/running-queries.ts
@@ -5,6 +5,7 @@ export const runningQueriesConfig: QueryConfig = {
   name: 'running-queries',
   sql: `
       SELECT *,
+        query_id as query_detail,
         multiIf (elapsed < 30, format('{} seconds', round(elapsed, 1)),
                  elapsed < 90, 'a minute',
                  formatReadableTimeDelta(elapsed, 'days', 'minutes')) as readable_elapsed,
@@ -38,6 +39,7 @@ export const runningQueriesConfig: QueryConfig = {
     `,
   columns: [
     'query',
+    'query_detail',
     'user',
     'readable_memory_usage',
     'readable_elapsed',
@@ -66,6 +68,13 @@ export const runningQueriesConfig: QueryConfig = {
     ],
     user: ColumnFormat.ColoredBadge,
     estimated_remaining_time: ColumnFormat.Duration,
+    query_detail: [
+      ColumnFormat.Link,
+      {
+        href: '/[ctx.hostId]/query/[query_id]',
+        className: 'truncate max-w-48 text-wrap',
+      },
+    ],
     query_id: [
       ColumnFormat.Action,
       ['kill-query', 'explain-query', 'query-settings'],
diff --git a/app/[host]/clusters/[cluster]/count-across-replicas/page.tsx b/app/[host]/clusters/[cluster]/count-across-replicas/page.tsx
index cd59d9f2..eb79a184 100644
--- a/app/[host]/clusters/[cluster]/count-across-replicas/page.tsx
+++ b/app/[host]/clusters/[cluster]/count-across-replicas/page.tsx
@@ -1,5 +1,6 @@
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
+import { getHostIdCookie } from '@/lib/scoped-link'
 import { ColumnFormat } from '@/types/column-format'
 import { type QueryConfig } from '@/types/query-config'
 
@@ -45,7 +46,7 @@ export default async function Page({ params }: PageProps) {
     columnFormats: {
       database_table: [
         ColumnFormat.Link,
-        { href: `/database/[database]/[table]` },
+        { href: `/[ctx.hostId]/database/[database]/[table]` },
       ],
       ...replicas
         .map(({ replica }) => ({
@@ -70,6 +71,7 @@ export default async function Page({ params }: PageProps) {
       title={`Total rows of active parts across replicas in the '${cluster}' cluster`}
       queryConfig={queryConfig}
       data={data}
+      context={{ hostId: '' + (await getHostIdCookie()) }}
     />
   )
 }
diff --git a/app/[host]/clusters/[cluster]/parts-across-replicas/page.tsx b/app/[host]/clusters/[cluster]/parts-across-replicas/page.tsx
index 04f80f6c..24114977 100644
--- a/app/[host]/clusters/[cluster]/parts-across-replicas/page.tsx
+++ b/app/[host]/clusters/[cluster]/parts-across-replicas/page.tsx
@@ -62,6 +62,7 @@ export default async function Page({ params }: PageProps) {
       title={`Count of active parts across replicas in the '${cluster}' cluster`}
       queryConfig={queryConfig}
       data={data}
+      context={{}}
     />
   )
 }
diff --git a/app/[host]/clusters/[cluster]/replicas-status/page.tsx b/app/[host]/clusters/[cluster]/replicas-status/page.tsx
index 456dea21..3c9aab09 100644
--- a/app/[host]/clusters/[cluster]/replicas-status/page.tsx
+++ b/app/[host]/clusters/[cluster]/replicas-status/page.tsx
@@ -25,6 +25,7 @@ export default async function Page({ params }: PageProps) {
       title={`Row counts across '${cluster}' cluster`}
       queryConfig={queryConfig}
       data={data}
+      context={{ cluster }}
       topRightToolbarExtras={<TopRightToolbarExtras cluster={cluster} />}
     />
   )
diff --git a/app/[host]/clusters/config.ts b/app/[host]/clusters/config.ts
index c99bb70b..e61e9070 100644
--- a/app/[host]/clusters/config.ts
+++ b/app/[host]/clusters/config.ts
@@ -23,10 +23,10 @@ export const queryConfig: QueryConfig = {
   `,
   columns: ['cluster', 'shard_count', 'replica_count', 'replica_status'],
   columnFormats: {
-    cluster: [ColumnFormat.Link, { href: `/clusters/[cluster]` }],
+    cluster: [ColumnFormat.Link, { href: `/[ctx.hostId]/clusters/[cluster]` }],
     replica_status: [
       ColumnFormat.Link,
-      { href: `/clusters/[cluster]/replicas-status` },
+      { href: `/[ctx.hostId]/clusters/[cluster]/replicas-status` },
     ],
   },
 }
diff --git a/app/[host]/clusters/page.tsx b/app/[host]/clusters/page.tsx
index caec5efd..ba200e2b 100644
--- a/app/[host]/clusters/page.tsx
+++ b/app/[host]/clusters/page.tsx
@@ -1,6 +1,7 @@
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
 
+import { getHostIdCookie } from '@/lib/scoped-link'
 import { queryConfig, type Row } from './config'
 
 export const dynamic = 'force-dynamic'
@@ -8,5 +9,11 @@ export const dynamic = 'force-dynamic'
 export default async function ClustersPage() {
   const { data } = await fetchData<Row[]>({ query: queryConfig.sql })
 
-  return <DataTable queryConfig={queryConfig} data={data} />
+  return (
+    <DataTable
+      queryConfig={queryConfig}
+      data={data}
+      context={{ hostId: '' + (await getHostIdCookie()) }}
+    />
+  )
 }
diff --git a/app/[host]/database/[database]/[table]/@mergetree/page.tsx b/app/[host]/database/[database]/[table]/@mergetree/page.tsx
index 7d09e458..ae053707 100644
--- a/app/[host]/database/[database]/[table]/@mergetree/page.tsx
+++ b/app/[host]/database/[database]/[table]/@mergetree/page.tsx
@@ -5,7 +5,6 @@ import { fetchData } from '@/lib/clickhouse'
 import { queryConfig, type Row } from '../config'
 import { engineType } from '../engine-type'
 import { TableComment } from './table-comment'
-import { Toolbar } from './toolbar'
 
 interface Props {
   params: Promise<{
@@ -34,9 +33,9 @@ export default async function MergeTree({ params }: Props) {
       title={`Table: ${database}.${table}`}
       description={<TableComment database={database} table={table} />}
       toolbarExtras={<Extras host={host} database={database} table={table} />}
-      topRightToolbarExtras={<Toolbar database={database} table={table} />}
       queryConfig={queryConfig}
       data={columns}
+      context={{ host: `${host}`, database, table }}
     />
   )
 }
diff --git a/app/[host]/database/[database]/[table]/extras/extras.tsx b/app/[host]/database/[database]/[table]/extras/extras.tsx
index b7bab363..acb1aa92 100644
--- a/app/[host]/database/[database]/[table]/extras/extras.tsx
+++ b/app/[host]/database/[database]/[table]/extras/extras.tsx
@@ -10,6 +10,7 @@ import { SampleDataButton } from './sample-data-button'
 import { ShowDDL } from './show-ddl-button'
 import { TableInfo } from './table-info'
 import { TableSelector } from './table-selector'
+import { TopUsageColumnsButton } from './top-usage-columns-button'
 
 export const Extras = ({
   host,
@@ -20,7 +21,7 @@ export const Extras = ({
   database: string
   table: string
 }) => (
-  <div className="mb-3 flex flex-row justify-between gap-3">
+  <div className="mb-3 flex flex-row flex-wrap justify-between gap-3">
     <div className="flex flex-row gap-3">
       <Link href={`/${host}/database/${database}`}>
         <Button
@@ -44,6 +45,7 @@ export const Extras = ({
       <SampleDataButton database={database} table={table} />
       <RunningQueriesButton database={database} table={table} />
       <HistoryQueriesButton database={database} table={table} />
+      <TopUsageColumnsButton database={database} table={table} />
     </div>
   </div>
 )
diff --git a/app/[host]/database/[database]/[table]/@mergetree/toolbar.tsx b/app/[host]/database/[database]/[table]/extras/top-usage-columns-button.tsx
similarity index 90%
rename from app/[host]/database/[database]/[table]/@mergetree/toolbar.tsx
rename to app/[host]/database/[database]/[table]/extras/top-usage-columns-button.tsx
index a9c60480..229e8ee2 100644
--- a/app/[host]/database/[database]/[table]/@mergetree/toolbar.tsx
+++ b/app/[host]/database/[database]/[table]/extras/top-usage-columns-button.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { Button } from '@/components/ui/button'
 import { getScopedLink } from '@/lib/scoped-link'
 
-export async function Toolbar({
+export async function TopUsageColumnsButton({
   database,
   table,
 }: {
@@ -20,6 +20,7 @@ export async function Toolbar({
       <Button
         variant="outline"
         className="flex flex-row gap-2 text-muted-foreground"
+        size="sm"
       >
         <TextAlignBottomIcon className="size-3" />
         Top usage columns
diff --git a/app/[host]/database/[database]/default.tsx b/app/[host]/database/[database]/default.tsx
index bd8d2d32..f4ae1667 100644
--- a/app/[host]/database/[database]/default.tsx
+++ b/app/[host]/database/[database]/default.tsx
@@ -38,11 +38,11 @@ export default async function TableListPage({ params }: TableListProps) {
       part_count: ColumnFormat.Number,
       detached_parts_count: [
         ColumnFormat.Link,
-        { href: `/${host}/detached_parts/?table=${database}.[table]` },
+        { href: '/[ctx.host]/detached_parts/?table=[ctx.database].[table]' },
       ],
       table: [
         ColumnFormat.Link,
-        { href: `/${host}/database/${database}/[table]` },
+        { href: '/[ctx.host]/database/[ctx.database]/[table]' },
       ],
       engine: ColumnFormat.ColoredBadge,
       readable_compressed: ColumnFormat.BackgroundBar,
@@ -65,6 +65,7 @@ export default async function TableListPage({ params }: TableListProps) {
       title={`${database}`}
       queryConfig={queryConfig}
       data={data}
+      context={{ host: `${host}`, database }}
       topRightToolbarExtras={<Toolbar database={database} />}
     />
   )
diff --git a/app/[host]/database/[database]/page.tsx b/app/[host]/database/[database]/page.tsx
index 393fb100..ba0c316d 100644
--- a/app/[host]/database/[database]/page.tsx
+++ b/app/[host]/database/[database]/page.tsx
@@ -75,6 +75,7 @@ export default async function TableListPage({ params }: TableListProps) {
       title={`${database}`}
       queryConfig={queryConfig}
       data={data}
+      context={{ host: `${host}`, database }}
       topRightToolbarExtras={<Toolbar database={database} />}
     />
   )
diff --git a/app/[host]/query/[query_id]/config.ts b/app/[host]/query/[query_id]/config.ts
new file mode 100644
index 00000000..d87a5629
--- /dev/null
+++ b/app/[host]/query/[query_id]/config.ts
@@ -0,0 +1,186 @@
+import { ColumnFormat } from '@/types/column-format'
+import type { QueryConfig } from '@/types/query-config'
+
+export interface RowData {
+  query_id: string
+  kind: string
+  type: string
+  query: string
+  is_initial_query: boolean
+  user: string
+  query_duration_ms: string
+
+  hostname: string
+  client_hostname: string
+  client_name: string
+  client_revision: string
+  initial_user: string
+  initial_query_id: string
+  initial_address: string
+  initial_port: string
+  initial_query_start_time: string
+  databases: Array<string>
+  tables: Array<string>
+  columns: Array<string>
+  partitions: Array<string>
+  projections: Array<string>
+  views: Array<string>
+  exception_code: string
+  exception: string
+  stack_trace: string
+  http_method: string
+  http_user_agent: string
+  http_referer: string
+  forwarded_for: string
+  quota_key: string
+  distributed_depth: string
+  revision: string
+  log_comment: string
+  ProfileEvents: Record<string, string>
+  Settings: Record<string, string>
+  query_cache_usage: string
+  used_aggregate_functions: Array<string>
+  used_aggregate_function_combinators: Array<string>
+  used_database_engines: Array<string>
+  used_data_type_families: Array<string>
+  used_dictionaries: Array<string>
+  used_formats: Array<string>
+  used_functions: Array<string>
+  used_storages: Array<string>
+  used_table_functions: Array<string>
+  used_row_policies: Array<string>
+  used_privileges: Array<string>
+  missing_privileges: Array<string>
+  transaction_id: string
+}
+
+export const config: QueryConfig = {
+  name: 'query',
+  sql: `
+    SELECT
+        type,
+        query_id,
+        query_kind,
+        query_cache_usage,
+        query_duration_ms as duration_ms,
+        query_duration_ms / 1000 as duration,
+
+        -- The time in seconds since this stage started
+        (now() - query_start_time) as elapsed,
+        multiIf (elapsed < 30, format('{} seconds', round(elapsed, 1)),
+                 elapsed < 90, 'a minute',
+                 formatReadableTimeDelta(elapsed, 'days', 'minutes')) as readable_elapsed,
+        event_time,
+        query,
+        is_initial_query,
+        formatted_query AS readable_query,
+        user,
+        read_rows,
+        formatReadableQuantity(read_rows) AS readable_read_rows,
+        round(100 * read_rows / MAX(read_rows) OVER ()) AS pct_read_rows,
+        written_rows,
+        formatReadableQuantity(written_rows) AS readable_written_rows,
+        round(100 * written_rows / MAX(written_rows) OVER ()) AS pct_written_rows,
+        result_rows,
+        formatReadableQuantity(result_rows) AS readable_result_rows,
+        memory_usage,
+        formatReadableSize(memory_usage) AS readable_memory_usage,
+        round(100 * memory_usage / MAX(memory_usage) OVER ()) AS pct_memory_usage,
+        length(thread_ids) as thread_ids_count,
+        peak_threads_usage,
+
+        -- General query info
+        initial_user,
+        initial_query_id,
+        initial_address,
+        initial_port,
+        initial_query_start_time,
+        hostname,
+        client_hostname,
+        client_name,
+        client_revision,
+        databases,
+        tables,
+        columns,
+        partitions,
+        projections,
+        views,
+        exception_code,
+        exception,
+        stack_trace,
+        http_method,
+        http_user_agent,
+        http_referer,
+        forwarded_for,
+        quota_key,
+        distributed_depth,
+        revision,
+        log_comment,
+        ProfileEvents,
+        Settings,
+        query_cache_usage,
+        used_aggregate_functions,
+        used_aggregate_function_combinators,
+        used_database_engines,
+        used_data_type_families,
+        used_dictionaries,
+        used_formats,
+        used_functions,
+        used_storages,
+        used_table_functions,
+        used_row_policies,
+        used_privileges,
+        missing_privileges,
+        toString(transaction_id) as transaction_id
+    FROM system.query_log
+    WHERE
+      query_id = {query_id: String}
+    ORDER BY query_start_time DESC
+    LIMIT 1000
+  `,
+  columns: [
+    'type',
+    'readable_elapsed',
+    'duration_ms',
+    'readable_memory_usage',
+    'readable_read_rows',
+    'readable_written_rows',
+    'readable_result_rows',
+    'query_cache_usage',
+    'is_initial_query',
+    'parts_lock_hold',
+    'context_lock',
+    'rw_lock_acquired_read_locks',
+    'transaction_id',
+    'thread_ids_count',
+    'peak_threads_usage',
+    'file_open',
+  ],
+  columnFormats: {
+    type: ColumnFormat.ColoredBadge,
+    query: [
+      ColumnFormat.CodeDialog,
+      {
+        max_truncate: 100,
+        hide_query_comment: true,
+        dialog_title: 'Running Query',
+        trigger_classname: 'min-w-96',
+      },
+    ],
+    user: ColumnFormat.ColoredBadge,
+    estimated_remaining_time: ColumnFormat.Duration,
+    readable_elapsed: ColumnFormat.BackgroundBar,
+    readable_read_rows: ColumnFormat.BackgroundBar,
+    readable_written_rows: ColumnFormat.BackgroundBar,
+    readable_result_rows: ColumnFormat.BackgroundBar,
+    readable_memory_usage: ColumnFormat.BackgroundBar,
+    is_initial_query: ColumnFormat.Boolean,
+    progress: ColumnFormat.BackgroundBar,
+    file_open: ColumnFormat.Number,
+    query_cache_usage: ColumnFormat.ColoredBadge,
+  },
+  defaultParams: {
+    query_id: '',
+  },
+  relatedCharts: [],
+}
diff --git a/app/[host]/query/[query_id]/page.tsx b/app/[host]/query/[query_id]/page.tsx
new file mode 100644
index 00000000..c9011cdf
--- /dev/null
+++ b/app/[host]/query/[query_id]/page.tsx
@@ -0,0 +1,43 @@
+import { Suspense } from 'react'
+
+import { RelatedCharts } from '@/components/related-charts'
+import { ChartSkeleton, TableSkeleton } from '@/components/skeleton'
+import { Table } from '@/components/table'
+import { config } from './config'
+import { QueryDetail } from './query-detail'
+import { PageProps } from './types'
+
+export const dynamic = 'force-dynamic'
+export const revalidate = 300
+
+export default async function Page({ params, searchParams }: PageProps) {
+  const { query_id } = await params
+
+  // Binding the query_id to the config
+  const queryConfig = {
+    ...config,
+    defaultParams: {
+      query_id,
+    },
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Suspense fallback={<ChartSkeleton />}>
+        <RelatedCharts relatedCharts={queryConfig.relatedCharts} />
+      </Suspense>
+
+      <Suspense fallback={<TableSkeleton />}>
+        <QueryDetail queryConfig={queryConfig} params={await params} />
+      </Suspense>
+
+      <Suspense fallback={<TableSkeleton />}>
+        <Table
+          title="Query Stages"
+          queryConfig={queryConfig}
+          searchParams={await searchParams}
+        />
+      </Suspense>
+    </div>
+  )
+}
diff --git a/app/[host]/query/[query_id]/query-detail.tsx b/app/[host]/query/[query_id]/query-detail.tsx
new file mode 100644
index 00000000..40e0ce87
--- /dev/null
+++ b/app/[host]/query/[query_id]/query-detail.tsx
@@ -0,0 +1,351 @@
+import { ErrorAlert } from '@/components/error-alert'
+import { TruncatedList } from '@/components/truncated-list'
+import { TruncatedParagraph } from '@/components/truncated-paragraph'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+import { Badge } from '@/components/ui/badge'
+import { fetchData } from '@/lib/clickhouse'
+import { formatQuery } from '@/lib/format-readable'
+import { getScopedLink } from '@/lib/scoped-link'
+import { dedent } from '@/lib/utils'
+import { QueryConfig } from '@/types/query-config'
+import { ExternalLinkIcon } from 'lucide-react'
+import Link from 'next/link'
+import { type RowData } from './config'
+import { PageProps } from './types'
+
+export async function QueryDetail({
+  queryConfig,
+  params,
+}: {
+  queryConfig: QueryConfig
+  params: Awaited<PageProps['params']>
+}) {
+  try {
+    const queryParams = {
+      ...queryConfig.defaultParams,
+      ...params,
+    }
+    const { data, metadata } = await fetchData<RowData[]>({
+      query: queryConfig.sql,
+      format: 'JSONEachRow',
+      query_params: queryParams,
+      clickhouse_settings: {
+        ...queryConfig.clickhouseSettings,
+      },
+    })
+
+    if (!data.length) {
+      return 'No data'
+    }
+
+    const { query_id, query, user } = data[0]
+    const finalType = data[data.length - 1].type
+    const query_duration_ms = data
+      .map((row) => parseInt(row.query_duration_ms))
+      .reduce((a, b) => a + b, 0)
+
+    // Details
+    const {
+      hostname,
+      client_hostname,
+      client_name,
+      client_revision,
+      initial_user,
+      initial_query_id,
+      initial_address,
+      initial_port,
+      initial_query_start_time,
+      databases,
+      tables,
+      columns,
+      partitions,
+      projections,
+      views,
+      exception_code,
+      exception,
+      stack_trace,
+      http_method,
+      http_user_agent,
+      http_referer,
+      forwarded_for,
+      quota_key,
+      distributed_depth,
+      revision,
+      log_comment,
+      ProfileEvents,
+      Settings,
+      used_aggregate_functions,
+      used_aggregate_function_combinators,
+      used_database_engines,
+      used_data_type_families,
+      used_dictionaries,
+      used_formats,
+      used_functions,
+      used_storages,
+      used_table_functions,
+      used_row_policies,
+      used_privileges,
+      missing_privileges,
+    } = data.find((row) => row.type == 'QueryFinish') || data[0]
+
+    return (
+      <div>
+        <h3 className="flex items-center text-lg font-medium">
+          {query_id}
+          <Badge className="ml-2" variant="outline" title="Query Duration (ms)">
+            {query_duration_ms} ms
+          </Badge>
+          <Badge className="ml-2" variant="outline" title="Query Type">
+            {finalType || 'Unknown'}
+          </Badge>
+          <Badge className="ml-2" variant="outline" title="User">
+            {user || 'Unknown'}
+          </Badge>
+        </h3>
+
+        <div className="my-3">
+          <Accordion
+            type="single"
+            collapsible
+            className="w-full rounded-lg bg-gray-100"
+          >
+            <AccordionItem value="query" className="border-none">
+              <AccordionTrigger className="w-full items-start justify-start p-3 hover:no-underline">
+                <div className="w-full truncate text-left">
+                  <code className="truncate">
+                    {formatQuery({
+                      query,
+                      comment_remove: true,
+                      trim: true,
+                      truncate: 100,
+                    })}
+                  </code>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="p-3">
+                <pre>{dedent(formatQuery({ query, trim: false }))}</pre>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2">
+          {(
+            [
+              ['Host name', hostname],
+              ['Client host name', client_hostname],
+              ['Client name', client_name],
+              ['Client revision', client_revision],
+              [
+                'Initial user',
+                <Link
+                  className="flex flex-row items-center gap-1"
+                  href={await getScopedLink(
+                    `/history-queries?user=${initial_user}`
+                  )}
+                  target="_blank"
+                >
+                  {initial_user}
+                  <ExternalLinkIcon className="size-3" />
+                </Link>,
+              ],
+              [
+                'Initial query id',
+                <Link
+                  className="flex flex-row items-center gap-1"
+                  href={await getScopedLink(`/query/${initial_query_id}`)}
+                  target="_blank"
+                >
+                  {initial_query_id}
+                  <ExternalLinkIcon className="size-3" />
+                </Link>,
+              ],
+              ['Initial address', initial_address],
+              ['Initial port', initial_port],
+              ['Initial query start time', initial_query_start_time],
+              ['Databases', bindingDatabaseLink(databases)],
+              ['Tables', bindingTableLink(tables)],
+              ['Columns', JSON.stringify(columns, null, 2)],
+              ['Partitions', JSON.stringify(partitions, null, 2)],
+              ['Projections', JSON.stringify(projections, null, 2)],
+              ['Views', JSON.stringify(views, null, 2)],
+              ['Exception code', exception_code],
+              ['Exception', exception],
+              ['Stack trace', stack_trace],
+              ['HTTP method', http_method],
+              ['HTTP user agent', http_user_agent],
+              ['HTTP referer', http_referer],
+              ['Forwarded for', forwarded_for],
+              ['Quota key', quota_key],
+              ['Distributed depth', distributed_depth],
+              ['Revision', revision],
+              ['Log Comment', log_comment],
+              [
+                {
+                  key: 'Profile events',
+                  link: 'https://clickhouse.com/docs/en/operations/system-tables/metrics',
+                },
+                JSON.stringify(ProfileEvents, null, 2),
+              ],
+              [
+                {
+                  key: 'Settings',
+                  link: 'https://clickhouse.com/docs/en/operations/server-configuration-parameters/settings',
+                },
+                JSON.stringify(Settings, null, 2),
+              ],
+              [
+                'Used aggregate functions',
+                bindingReference(used_aggregate_functions),
+              ],
+              [
+                'Used aggregate function combinators',
+                JSON.stringify(used_aggregate_function_combinators, null, 2),
+              ],
+              [
+                {
+                  key: 'Used database engines',
+                  link: 'https://clickhouse.com/docs/en/chdb/data-formats',
+                },
+                JSON.stringify(used_database_engines, null, 2),
+              ],
+              [
+                'Used data type families',
+                JSON.stringify(used_data_type_families, null, 2),
+              ],
+              ['Used dictionaries', JSON.stringify(used_dictionaries, null, 2)],
+              [
+                {
+                  key: 'Used formats',
+                  link: 'https://clickhouse.com/docs/en/chdb/data-formats',
+                },
+                JSON.stringify(used_formats, null, 2),
+              ],
+              ['Used functions', bindingReference(used_functions)],
+              ['Used storages', JSON.stringify(used_storages, null, 2)],
+              [
+                'Used table functions',
+                JSON.stringify(used_table_functions, null, 2),
+              ],
+              ['Used row policies', JSON.stringify(used_row_policies, null, 2)],
+              ['Used privileges', JSON.stringify(used_privileges, null, 2)],
+              [
+                'Missing privileges',
+                JSON.stringify(missing_privileges, null, 2),
+              ],
+            ] as Array<
+              | [string, string | React.ReactNode[]]
+              | [{ key: string; link: string }, string | React.ReactNode[]]
+            >
+          )
+            .filter(
+              ([_, value]) =>
+                (Array.isArray(value) && value.length) ||
+                (!!value && value !== '[]' && value !== '{}')
+            )
+            .map(([key, value]) => (
+              <div
+                className="mt-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"
+                key={typeof key === 'string' ? key : key.key}
+              >
+                <div className="space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                    {typeof key === 'string' ? (
+                      key
+                    ) : (
+                      <Link
+                        href={key.link}
+                        target="_blank"
+                        className="flex gap-1"
+                      >
+                        {key.key} <ExternalLinkIcon className="size-3" />
+                      </Link>
+                    )}
+                  </p>
+                  {typeof value === 'string' ? (
+                    <TruncatedParagraph className="text-sm text-muted-foreground">
+                      {value}
+                    </TruncatedParagraph>
+                  ) : (
+                    <div className="flex flex-col flex-wrap gap-1 text-sm text-muted-foreground">
+                      <TruncatedList>{value}</TruncatedList>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    )
+  } catch (error) {
+    return (
+      <ErrorAlert
+        title="ClickHouse Query Error"
+        message={`${error}`}
+        query={queryConfig.sql}
+        docs={queryConfig.docs}
+      />
+    )
+  }
+}
+
+function bindingDatabaseLink(databases: Array<string>): React.ReactNode[] {
+  return databases.map(async (database) => {
+    return (
+      <Link
+        className="flex flex-row items-center gap-1"
+        key={database}
+        href={await getScopedLink(`/database/${database}`)}
+      >
+        {database} <ExternalLinkIcon className="size-3" />
+      </Link>
+    )
+  })
+}
+
+function bindingTableLink(tables: Array<string>): React.ReactNode[] {
+  return tables.map(async (databaseTable) => {
+    const [database, table] = databaseTable.split('.')
+    return (
+      <Link
+        className="flex flex-row items-center gap-1"
+        key={databaseTable}
+        href={await getScopedLink(`/database/${database}/${table}`)}
+      >
+        {databaseTable} <ExternalLinkIcon className="size-3" />
+      </Link>
+    )
+  })
+}
+
+function bindingReference(value: Array<string>): React.ReactNode[] {
+  console.log('used_functionsused_functionsused_functions', value)
+
+  const getSearchLink = (item: string) => {
+    const searchParams = new URLSearchParams({
+      q: `repo:ClickHouse/ClickHouse path:docs/en/sql-reference path:*.md "# ${item}"`,
+    })
+    let url = new URL(`https://github.com/search`)
+    url.search = searchParams.toString()
+
+    return url.toString()
+  }
+
+  return value.map((item) => {
+    return (
+      <Link
+        className="flex flex-row items-center gap-1"
+        key={item}
+        href={getSearchLink(item)}
+        target="_blank"
+      >
+        {item} <ExternalLinkIcon className="size-3" />
+      </Link>
+    )
+  })
+}
diff --git a/app/[host]/query/[query_id]/types.ts b/app/[host]/query/[query_id]/types.ts
new file mode 100644
index 00000000..50bd6305
--- /dev/null
+++ b/app/[host]/query/[query_id]/types.ts
@@ -0,0 +1,6 @@
+export interface PageProps {
+  params: Promise<{
+    query_id: string
+  }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}
diff --git a/app/[host]/replica/[replica]/tables/page.tsx b/app/[host]/replica/[replica]/tables/page.tsx
index c9b72793..2be7cf7e 100644
--- a/app/[host]/replica/[replica]/tables/page.tsx
+++ b/app/[host]/replica/[replica]/tables/page.tsx
@@ -21,6 +21,7 @@ export default async function ClustersPage({ params }: PageProps) {
       title={`Tables in replica - ${replica}`}
       queryConfig={queryConfig}
       data={data}
+      context={{ replica }}
     />
   )
 }
diff --git a/app/globals.css b/app/globals.css
index f45f9072..7707e640 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -51,7 +51,6 @@
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
-
   }
 
   .dark {
diff --git a/components/data-table/cells/link-format.cy.tsx b/components/data-table/cells/link-format.cy.tsx
index 8e8efe0e..1510b91d 100644
--- a/components/data-table/cells/link-format.cy.tsx
+++ b/components/data-table/cells/link-format.cy.tsx
@@ -9,7 +9,13 @@ describe('<LinkFormat />', () => {
     const options = { href: '/database/[database]/[table]' }
 
     cy.mount(
-      <LinkFormat row={row} data={data} value={value} options={options} />
+      <LinkFormat
+        row={row}
+        data={data}
+        value={value}
+        context={{}}
+        options={options}
+      />
     )
 
     cy.get('a')
@@ -22,7 +28,7 @@ describe('<LinkFormat />', () => {
     const data = [{}]
     const value = 'Plain Text'
 
-    cy.mount(<LinkFormat row={row} data={data} value={value} />)
+    cy.mount(<LinkFormat row={row} data={data} context={{}} value={value} />)
 
     cy.get('a').should('not.exist')
     cy.contains('Plain Text').should('be.visible')
@@ -35,7 +41,13 @@ describe('<LinkFormat />', () => {
     const options = { href: '/item/[id]' }
 
     cy.mount(
-      <LinkFormat row={row} data={data} value={value} options={options} />
+      <LinkFormat
+        row={row}
+        data={data}
+        value={value}
+        context={{}}
+        options={options}
+      />
     )
 
     cy.get('a').as('link')
@@ -51,7 +63,13 @@ describe('<LinkFormat />', () => {
     const options = { href: '/[type]/[id]/[action]' }
 
     cy.mount(
-      <LinkFormat row={row} data={data} value={value} options={options} />
+      <LinkFormat
+        row={row}
+        data={data}
+        value={value}
+        context={{}}
+        options={options}
+      />
     )
 
     cy.get('a').should('have.attr', 'href', '/user/456/edit')
@@ -68,6 +86,7 @@ describe('<LinkFormat />', () => {
         row={row}
         data={data}
         value={value}
+        context={{}}
         options={options as any}
       />
     )
@@ -87,7 +106,13 @@ describe('<LinkFormat />', () => {
       }
 
       cy.mount(
-        <LinkFormat row={row} data={data} value={value} options={options} />
+        <LinkFormat
+          row={row}
+          data={data}
+          value={value}
+          context={{}}
+          options={options}
+        />
       )
 
       cy.get('a')
@@ -105,7 +130,13 @@ describe('<LinkFormat />', () => {
       }
 
       cy.mount(
-        <LinkFormat row={row} data={data} value={value} options={options} />
+        <LinkFormat
+          row={row}
+          data={data}
+          value={value}
+          context={{}}
+          options={options}
+        />
       )
 
       cy.get('a')
@@ -124,7 +155,13 @@ describe('<LinkFormat />', () => {
       }
 
       cy.mount(
-        <LinkFormat row={row} data={data} value={value} options={options} />
+        <LinkFormat
+          row={row}
+          data={data}
+          value={value}
+          context={{}}
+          options={options}
+        />
       )
 
       cy.get('a')
@@ -133,4 +170,88 @@ describe('<LinkFormat />', () => {
         .and('have.class', 'text-red-500')
     })
   })
+
+  describe('context prop', () => {
+    it('uses context values to replace placeholders', () => {
+      const row = { index: 0 } as Row<any>
+      const data = [{ database: 'testDB' }]
+      const value = 'Context Test'
+      const options = { href: '/[database]/[ctx.table]' }
+      const context = { 'ctx.table': 'contextTable' }
+
+      cy.mount(
+        <LinkFormat
+          row={row}
+          data={data}
+          value={value}
+          context={context}
+          options={options}
+        />
+      )
+
+      cy.get('a').should('have.attr', 'href', '/testDB/contextTable')
+    })
+
+    it('context values override data values', () => {
+      const row = { index: 0 } as Row<any>
+      const data = [{ database: 'testDB', table: 'dataTable' }]
+      const value = 'Override Test'
+      const options = { href: '/[database]/[ctx.table]' }
+      const context = { 'ctx.table': 'contextTable' }
+
+      cy.mount(
+        <LinkFormat
+          row={row}
+          data={data}
+          value={value}
+          context={context}
+          options={options}
+        />
+      )
+
+      cy.get('a').should('have.attr', 'href', '/testDB/contextTable')
+    })
+
+    it('handles empty context values gracefully', () => {
+      const row = { index: 0 } as Row<any>
+      const data = [{ database: 'testDB' }]
+      const value = 'Empty Context'
+      const options = { href: '/[database]/[ctx.table]/end' }
+      const context = { 'ctx.table': '' }
+
+      cy.mount(
+        <LinkFormat
+          row={row}
+          data={data}
+          value={value}
+          context={context}
+          options={options}
+        />
+      )
+
+      cy.get('a').should('have.attr', 'href', '/testDB//end')
+    })
+
+    it('handles missing context keys gracefully', () => {
+      const row = { index: 0 } as Row<any>
+      const data = [{ database: 'testDB' }]
+      const value = 'Missing Context'
+      const options = {
+        href: '/[database]/[missing_key]/[another_missing]/end',
+      }
+      const context = { some_other_key: 'value' }
+
+      cy.mount(
+        <LinkFormat
+          row={row}
+          data={data}
+          value={value}
+          context={context}
+          options={options}
+        />
+      )
+
+      cy.get('a').should('have.attr', 'href', '/testDB///end')
+    })
+  })
 })
diff --git a/components/data-table/cells/link-format.tsx b/components/data-table/cells/link-format.tsx
index adca58f5..4310346a 100644
--- a/components/data-table/cells/link-format.tsx
+++ b/components/data-table/cells/link-format.tsx
@@ -3,6 +3,10 @@ import { ArrowRightIcon } from '@radix-ui/react-icons'
 import { Row, RowData } from '@tanstack/react-table'
 import Link, { LinkProps } from 'next/link'
 
+export interface LinkFormatOptions extends LinkProps {
+  className?: string
+}
+
 interface LinkFormatProps<
   TData extends RowData,
   TValue extends React.ReactNode,
@@ -10,13 +14,14 @@ interface LinkFormatProps<
   row: Row<TData>
   data: TData[]
   value: TValue
-  options?: LinkProps & { className?: string }
+  context: Record<string, string>
+  options?: LinkFormatOptions
 }
 
 export function LinkFormat<
   TData extends RowData,
   TValue extends React.ReactNode,
->({ row, data, value, options }: LinkFormatProps<TData, TValue>) {
+>({ row, data, value, context, options }: LinkFormatProps<TData, TValue>) {
   let { href, className, ...rest } = options ?? {}
 
   // No href provided, return value as is
@@ -29,6 +34,10 @@ export function LinkFormat<
   }
 
   const originalRow = data[row.index] as Record<string, string | undefined>
+  const mappingKeyValue = {
+    ...originalRow,
+    ...context,
+  }
 
   // Href contains placeholders, e.g. /database/[database]/[table]
   // Replace placeholders with values from the row
@@ -38,7 +47,7 @@ export function LinkFormat<
     if (matches) {
       matches.forEach((match) => {
         const key = match.replace('[', '').replace(']', '').trim()
-        hrefBinding = hrefBinding.replace(match, originalRow[key] ?? '')
+        hrefBinding = hrefBinding.replace(match, mappingKeyValue[key] ?? '')
       })
     }
   }
@@ -50,7 +59,7 @@ export function LinkFormat<
       {...rest}
     >
       <span className="truncate text-nowrap">{value}</span>
-      <ArrowRightIcon className="size-3 text-transparent group-hover:text-current" />
+      <ArrowRightIcon className="size-3 flex-none text-transparent group-hover:text-current" />
     </Link>
   )
 }
diff --git a/components/data-table/column-defs.tsx b/components/data-table/column-defs.tsx
index 45c151e7..09ce6a60 100644
--- a/components/data-table/column-defs.tsx
+++ b/components/data-table/column-defs.tsx
@@ -7,7 +7,7 @@ import type { ColumnDef, Row, RowData, Table } from '@tanstack/react-table'
 
 import { formatCell } from '@/components/data-table/format-cell'
 import { Button } from '@/components/ui/button'
-import { ColumnFormat, ColumnFormatOptions } from '@/types/column-format'
+import { ColumnFormat, type ColumnFormatOptions } from '@/types/column-format'
 import { type Icon } from '@/types/icon'
 import { type QueryConfig } from '@/types/query-config'
 
@@ -45,7 +45,8 @@ export const getColumnDefs = <
   TValue extends React.ReactNode,
 >(
   config: QueryConfig,
-  data: TData[]
+  data: TData[],
+  context: Record<string, string>
 ): ColumnDef<TData, TValue>[] => {
   const configColumns = config.columns || []
 
@@ -104,6 +105,7 @@ export const getColumnDefs = <
           row,
           value,
           column,
+          context,
           columnFormat,
           columnFormatOptions
         )
diff --git a/components/data-table/data-table-toolbar.tsx b/components/data-table/data-table-toolbar.tsx
index 0216d7aa..17a177e7 100644
--- a/components/data-table/data-table-toolbar.tsx
+++ b/components/data-table/data-table-toolbar.tsx
@@ -17,7 +17,7 @@ export function DataTableToolbar({
 }: DataTableToolbarProps) {
   return (
     <div className={cn('flex items-center justify-between', className)}>
-      <div className="flex flex-1 items-center space-x-2">
+      <div className="flex flex-1 flex-wrap items-center space-x-2">
         {children}
         {queryConfig.filterParamPresets && (
           <DataTableFacetedFilter title="Filters" queryConfig={queryConfig} />
diff --git a/components/data-table/data-table.cy.tsx b/components/data-table/data-table.cy.tsx
index 0ababce4..77283187 100644
--- a/components/data-table/data-table.cy.tsx
+++ b/components/data-table/data-table.cy.tsx
@@ -19,7 +19,12 @@ describe('<DataTable />', () => {
     ]
 
     cy.mount(
-      <DataTable title="Test Table" queryConfig={queryConfig} data={data} />
+      <DataTable
+        title="Test Table"
+        queryConfig={queryConfig}
+        data={data}
+        context={{}}
+      />
     )
 
     cy.get('h1').contains('Test Table')
@@ -44,6 +49,7 @@ describe('<DataTable />', () => {
         title="Test Table"
         queryConfig={queryConfig}
         data={data}
+        context={{}}
         defaultPageSize={50}
       />
     )
@@ -81,6 +87,7 @@ describe('<DataTable />', () => {
         title="Test Table"
         queryConfig={queryConfig}
         data={data}
+        context={{}}
         defaultPageSize={2}
       />
     )
@@ -107,7 +114,12 @@ describe('<DataTable />', () => {
     ]
 
     cy.mount(
-      <DataTable title="Test Table" queryConfig={queryConfig} data={data} />
+      <DataTable
+        title="Test Table"
+        queryConfig={queryConfig}
+        data={data}
+        context={{}}
+      />
     )
 
     const $optionBtn = cy.get('button[aria-label="Column Options"]')
@@ -135,7 +147,12 @@ describe('<DataTable />', () => {
     ]
 
     cy.mount(
-      <DataTable title="Test Table" queryConfig={queryConfig} data={data} />
+      <DataTable
+        title="Test Table"
+        queryConfig={queryConfig}
+        data={data}
+        context={{}}
+      />
     )
 
     cy.get('button[aria-label="Column Options"]').as('btn')
@@ -162,7 +179,12 @@ describe('<DataTable />', () => {
     ]
 
     cy.mount(
-      <DataTable title="Test Table" queryConfig={queryConfig} data={data} />
+      <DataTable
+        title="Test Table"
+        queryConfig={queryConfig}
+        data={data}
+        context={{}}
+      />
     )
 
     cy.get('button[aria-label="Column Options"]').as('btn')
@@ -195,6 +217,7 @@ describe('<DataTable />', () => {
         title="Test Table"
         queryConfig={queryConfig}
         data={[]}
+        context={{}}
         showSQL={true}
       />
     )
@@ -208,6 +231,7 @@ describe('<DataTable />', () => {
         title="Test Table"
         queryConfig={queryConfig}
         data={[]}
+        context={{}}
         showSQL={false}
       />
     )
@@ -228,6 +252,7 @@ describe('<DataTable />', () => {
         title="Test Table"
         queryConfig={queryConfig}
         data={data}
+        context={{}}
         showSQL={true}
       />
     )
@@ -251,6 +276,7 @@ describe('<DataTable />', () => {
         title="Test Table"
         queryConfig={queryConfig}
         data={[]}
+        context={{}}
         footnote="This is footnote"
       />
     )
@@ -264,6 +290,7 @@ describe('<DataTable />', () => {
         title="Test Table"
         queryConfig={queryConfig}
         data={[]}
+        context={{}}
         footnote={<div className="footnote">This is footnote</div>}
       />
     )
@@ -276,6 +303,7 @@ describe('<DataTable />', () => {
       <DataTable
         queryConfig={queryConfig}
         data={[{ col1: '1', col2: '2' }]}
+        context={{}}
         defaultPageSize={10}
       />
     )
@@ -291,7 +319,12 @@ describe('<DataTable />', () => {
     }
 
     cy.mount(
-      <DataTable queryConfig={queryConfig} data={data} defaultPageSize={10} />
+      <DataTable
+        queryConfig={queryConfig}
+        data={data}
+        defaultPageSize={10}
+        context={{}}
+      />
     )
     cy.contains('0 of 10 row(s)')
   })
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index c9bfe30f..1bb39062 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -43,6 +43,7 @@ interface DataTableProps<TData extends RowData> {
   queryConfig: QueryConfig
   queryParams?: Record<string, any>
   data: TData[]
+  context: Record<string, string>
   defaultPageSize?: number
   showSQL?: boolean
   footnote?: FootnoteProps<TData>['footnote']
@@ -60,6 +61,7 @@ export function DataTable<
   queryConfig,
   queryParams,
   data,
+  context,
   defaultPageSize = 100,
   showSQL = true,
   footnote,
@@ -76,10 +78,20 @@ export function DataTable<
   // Configured columns available, normalized
   const configuredColumns = queryConfig.columns.map(normalizeColumnName)
 
+  // Add `ctx.` prefix to all keys
+  const contextWithPrefix = Object.entries(context).reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      [`ctx.${key}`]: value,
+    }),
+    {}
+  )
+
   // Column definitions for the table
   const columnDefs = getColumnDefs<TData, TValue>(
     queryConfig,
-    data
+    data,
+    contextWithPrefix
   ) as ColumnDef<TData, TValue>[]
 
   // Only show the columns in QueryConfig['columns'] list by initial
@@ -119,7 +131,7 @@ export function DataTable<
 
   return (
     <div className={className}>
-      <div className="flex flex-row items-center justify-between pb-4">
+      <div className="flex flex-row items-start justify-between pb-4">
         <div>
           <div className="mb-4 flex flex-wrap items-center gap-2">
             <h1 className="flex-none text-xl text-muted-foreground">{title}</h1>
diff --git a/components/data-table/format-cell.tsx b/components/data-table/format-cell.tsx
index e847c1e5..9eb1b01c 100644
--- a/components/data-table/format-cell.tsx
+++ b/components/data-table/format-cell.tsx
@@ -1,5 +1,4 @@
 import type { Row, RowData, Table } from '@tanstack/react-table'
-import { type LinkProps } from 'next/link'
 
 import { formatReadableQuantity } from '@/lib/format-readable'
 import { ColumnFormat, type ColumnFormatOptions } from '@/types/column-format'
@@ -29,7 +28,7 @@ import {
   HoverCardFormat,
   type HoverCardOptions,
 } from './cells/hover-card-format'
-import { LinkFormat } from './cells/link-format'
+import { LinkFormat, type LinkFormatOptions } from './cells/link-format'
 import {
   MarkdownFormat,
   type MarkdownFormatOptions,
@@ -46,6 +45,7 @@ export const formatCell = <
   row: Row<TData>,
   value: TValue,
   columnName: string,
+  context: Record<string, string>,
   format: ColumnFormat,
   columnFormatOptions?: ColumnFormatOptions
 ) => {
@@ -126,7 +126,8 @@ export const formatCell = <
           row={row}
           data={data}
           value={value}
-          options={columnFormatOptions as LinkProps}
+          context={context}
+          options={columnFormatOptions as LinkFormatOptions}
         />
       )
 
diff --git a/components/table.tsx b/components/table.tsx
index 26279660..5ddf866c 100644
--- a/components/table.tsx
+++ b/components/table.tsx
@@ -3,6 +3,7 @@ import { ErrorAlert } from '@/components/error-alert'
 import { fetchData } from '@/lib/clickhouse'
 import type { RowData } from '@tanstack/react-table'
 
+import { getHostIdCookie } from '@/lib/scoped-link'
 import type { QueryConfig } from '@/types/query-config'
 
 interface TableProps {
@@ -54,6 +55,7 @@ export async function Table({
         queryConfig={queryConfig}
         queryParams={queryParams}
         data={data}
+        context={{ ...queryParams, hostId: '' + (await getHostIdCookie()) }}
         footnote={footerText}
         className={className}
       />
diff --git a/components/truncated-list.cy.tsx b/components/truncated-list.cy.tsx
new file mode 100644
index 00000000..e499ebe0
--- /dev/null
+++ b/components/truncated-list.cy.tsx
@@ -0,0 +1,62 @@
+import { TruncatedList } from './truncated-list'
+
+describe('TruncatedList', () => {
+  const items = [
+    <div key="1">Item 1</div>,
+    <div key="2">Item 2</div>,
+    <div key="3">Item 3</div>,
+    <div key="4">Item 4</div>,
+    <div key="5">Item 5</div>,
+  ]
+
+  it('renders first n items', () => {
+    cy.mount(<TruncatedList items={3}>{items}</TruncatedList>)
+
+    cy.contains('Item 1').should('be.visible')
+    cy.contains('Item 2').should('be.visible')
+    cy.contains('Item 3').should('be.visible')
+    cy.contains('Item 4').should('not.exist')
+    cy.contains('Item 5').should('not.exist')
+  })
+
+  it('shows "Show more" button when items exceed limit', () => {
+    cy.mount(<TruncatedList>{items}</TruncatedList>)
+
+    cy.contains('Show more').should('be.visible')
+  })
+
+  it('expands to show all items when "Show more" is clicked', () => {
+    cy.mount(<TruncatedList>{items}</TruncatedList>)
+
+    cy.contains('Show more').click()
+
+    cy.contains('Item 4').should('be.visible')
+    cy.contains('Item 5').should('be.visible')
+    cy.contains('Show less').should('be.visible')
+  })
+
+  it('collapses back when "Show less" is clicked', () => {
+    cy.mount(<TruncatedList>{items}</TruncatedList>)
+
+    cy.contains('Show more').click()
+    cy.contains('Show less').click()
+
+    cy.contains('Item 4').should('not.exist')
+    cy.contains('Item 5').should('not.exist')
+    cy.contains('Show more').should('be.visible')
+  })
+
+  it('respects custom items prop', () => {
+    cy.mount(<TruncatedList items={2}>{items}</TruncatedList>)
+
+    cy.contains('Item 1').should('be.visible')
+    cy.contains('Item 2').should('be.visible')
+    cy.contains('Item 3').should('not.exist')
+  })
+
+  it('applies custom className', () => {
+    cy.mount(<TruncatedList className="test-class">{items}</TruncatedList>)
+
+    cy.get('.test-class').should('exist')
+  })
+})
diff --git a/components/truncated-list.tsx b/components/truncated-list.tsx
new file mode 100644
index 00000000..fd05f205
--- /dev/null
+++ b/components/truncated-list.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { Children, useState } from 'react'
+
+interface TruncatedListProps {
+  items?: number
+  children: React.ReactNode[]
+  className?: string
+}
+
+export function TruncatedList({
+  items = 3,
+  children,
+  className,
+}: TruncatedListProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const isClamped = Children.count(children) > items
+
+  return (
+    <div className={cn('transition-all duration-300 ease-in-out', className)}>
+      {isExpanded ? children : Children.toArray(children).slice(0, items)}
+
+      {isClamped && (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="mt-2 text-sm text-blue-500 hover:text-blue-700 focus:outline-none"
+        >
+          {isExpanded ? 'Show less' : 'Show more'}
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/components/truncated-paragraph.cy.tsx b/components/truncated-paragraph.cy.tsx
new file mode 100644
index 00000000..8a26ea5b
--- /dev/null
+++ b/components/truncated-paragraph.cy.tsx
@@ -0,0 +1,49 @@
+import { TruncatedParagraph } from './truncated-paragraph'
+
+describe('TruncatedParagraph', () => {
+  const longText = 'Lorem ipsum '.repeat(500) // Create long text to ensure truncation
+
+  it('renders with default props', () => {
+    cy.mount(<TruncatedParagraph>{longText}</TruncatedParagraph>)
+    cy.get('p').should('exist')
+
+    cy.get('button').should('exist').and('contain', 'Show more')
+  })
+
+  it('expands and collapses text when clicking show more/less', () => {
+    cy.mount(<TruncatedParagraph lineClamp={1}>{longText}</TruncatedParagraph>)
+
+    // Click show more
+    cy.get('button').click()
+
+    // Verify expanded state
+    cy.get('button').should('contain', 'Show less')
+
+    // Click show less
+    cy.get('button').click()
+
+    // Verify collapsed state
+    cy.get('button').should('contain', 'Show more')
+  })
+
+  it('respects custom lineClamp prop', () => {
+    cy.mount(<TruncatedParagraph lineClamp={2}>{longText}</TruncatedParagraph>)
+    cy.get('p').should('have.class', 'line-clamp-2')
+  })
+
+  it('applies custom className', () => {
+    const customClass = 'test-custom-class'
+    cy.mount(
+      <TruncatedParagraph className={customClass}>
+        {longText}
+      </TruncatedParagraph>
+    )
+    cy.get('p').should('have.class', customClass)
+  })
+
+  it('handles short text without show more button', () => {
+    const shortText = 'Short text that should not be truncated'
+    cy.mount(<TruncatedParagraph>{shortText}</TruncatedParagraph>)
+    cy.get('button').should('not.exist')
+  })
+})
diff --git a/components/truncated-paragraph.tsx b/components/truncated-paragraph.tsx
new file mode 100644
index 00000000..840bf65a
--- /dev/null
+++ b/components/truncated-paragraph.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { useEffect, useRef, useState } from 'react'
+
+interface TruncatedParagraphProps {
+  lineClamp?: number
+  children: React.ReactNode
+  className?: string
+}
+
+export function TruncatedParagraph({
+  lineClamp = 2,
+  children,
+  className,
+}: TruncatedParagraphProps) {
+  const contentRef = useRef<HTMLParagraphElement>(null)
+  const [isClamped, setClamped] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  useEffect(() => {
+    // Function that should be called on window resize
+    function handleResize() {
+      if (contentRef && contentRef.current) {
+        setClamped(
+          contentRef.current.scrollHeight > contentRef.current.clientHeight
+        )
+      }
+    }
+
+    handleResize()
+
+    // Add event listener to window resize
+    window.addEventListener('resize', handleResize)
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize)
+  }, []) // Empty array ensures that it would only run on mount
+
+  return (
+    <div>
+      <p
+        data-expanded={isExpanded ? 'true' : 'false'}
+        className={cn(
+          'text-sm leading-normal',
+          isExpanded ? '' : `line-clamp-${lineClamp}`,
+          'transition-all duration-300 ease-in-out',
+          className
+        )}
+        ref={contentRef}
+      >
+        {children}
+      </p>
+
+      {isClamped && (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="mt-2 text-sm text-blue-500 hover:text-blue-700 focus:outline-none"
+        >
+          {isExpanded ? 'Show less' : 'Show more'}
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/lib/format-readable.ts b/lib/format-readable.ts
index 14cf451a..e6068cae 100644
--- a/lib/format-readable.ts
+++ b/lib/format-readable.ts
@@ -74,7 +74,6 @@ export function formatQuery({
   comment_remove?: boolean
   truncate?: number
   trim?: boolean
-  remove_extra_whitespace?: boolean
 }) {
   let formattedQuery = comment_remove
     ? query.replace(
diff --git a/types/column-format.ts b/types/column-format.ts
index 9858c1ab..e0e69f95 100644
--- a/types/column-format.ts
+++ b/types/column-format.ts
@@ -1,12 +1,11 @@
-import { LinkProps } from 'next/link'
-
 import { type Action } from '@/components/data-table/cells/actions/types'
 import { type BackgroundBarOptions } from '@/components/data-table/cells/background-bar-format'
 import { type CodeDialogOptions } from '@/components/data-table/cells/code-dialog-format'
 import { type CodeToggleOptions } from '@/components/data-table/cells/code-toggle-format'
 import { type ColoredBadgeOptions } from '@/components/data-table/cells/colored-badge-format'
 import { type HoverCardOptions } from '@/components/data-table/cells/hover-card-format'
-import { MarkdownFormatOptions } from '@/components/data-table/cells/markdown-format'
+import { type LinkFormatOptions } from '@/components/data-table/cells/link-format'
+import { type MarkdownFormatOptions } from '@/components/data-table/cells/markdown-format'
 import { type TextFormatOptions } from '@/components/data-table/cells/text-format'
 
 export enum ColumnFormat {
@@ -31,7 +30,7 @@ export enum ColumnFormat {
 
 export type ColumnFormatWithArgs =
   | [ColumnFormat.Action, Action[]]
-  | [ColumnFormat.Link, LinkProps & { className?: string }]
+  | [ColumnFormat.Link, LinkFormatOptions]
   | [ColumnFormat.Text, TextFormatOptions]
   | [ColumnFormat.Markdown, MarkdownFormatOptions]
   | [ColumnFormat.ColoredBadge, ColoredBadgeOptions]