Merge pull request #428 from duyet/chore/ui-update

feat: add query detail page, introduce `context` props for DataTable
duyet · Nov 24, 2024 · ff9c5fd · ff9c5fd · vercel · Nov 24, 2024
2 parents e8b2be7 + 08e0c1a
commit ff9c5fd
Show file tree

Hide file tree

Showing 36 changed files with 1,070 additions and 45 deletions.
diff --git a/app/[host]/[query]/more/count-across-replicas.ts b/app/[host]/[query]/more/count-across-replicas.ts
@@ -35,7 +35,10 @@ export const countAcrossReplicasConfig: QueryConfig = {
       LIMIT 50`,
   columns: ['table', 'count'],
   columnFormats: {
-    table: [ColumnFormat.Link, { href: `/top-usage-columns?table=[table]` }],
+    table: [
+      ColumnFormat.Link,
+      { href: `/[ctx.hostId]/top-usage-columns?table=[table]` },
+    ],
     count: ColumnFormat.BackgroundBar,
   },
 }
diff --git a/app/[host]/[query]/more/top-usage-tables.ts b/app/[host]/[query]/more/top-usage-tables.ts
@@ -25,7 +25,10 @@ export const topUsageTablesConfig: QueryConfig = {
       LIMIT 50`,
   columns: ['table', 'count'],
   columnFormats: {
-    table: [ColumnFormat.Link, { href: `/top-usage-columns?table=[table]` }],
+    table: [
+      ColumnFormat.Link,
+      { href: `/[ctx.hostId]/top-usage-columns?table=[table]` },
+    ],
     count: ColumnFormat.BackgroundBar,
   },
   defaultParams: { database: '' },

diff --git a/app/[host]/[query]/queries/history-queries.ts b/app/[host]/[query]/queries/history-queries.ts
@@ -36,13 +36,15 @@ 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
   `,
 
   columns: [
     'user',
     'query',
+    'query_id',
     'query_duration',
     'readable_memory_usage',
     'event_time',
@@ -52,7 +54,6 @@ export const historyQueriesConfig: QueryConfig = {
     'query_kind',
     'type',
     'client_name',
-    'query_id',
   ],
   columnFormats: {
     user: ColumnFormat.ColoredBadge,
@@ -68,6 +69,14 @@ 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]',
+        className: 'truncate max-w-48 text-wrap',
+        title: 'Query Detail',
+      },
+    ],
   },
 
   defaultParams: {
@@ -76,6 +85,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
@@ -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,14 @@ 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',
+        title: 'Query Detail',
+      },
+    ],
     query_id: [
       ColumnFormat.Action,
       ['kill-query', 'explain-query', 'query-settings'],

diff --git a/app/[host]/[query]/tables/replicas.ts b/app/[host]/[query]/tables/replicas.ts
@@ -45,7 +45,7 @@ export const replicasConfig: QueryConfig = {
   columnFormats: {
     database_table: [
       ColumnFormat.Link,
-      { href: '/database/[database]/[table]' },
+      { href: '/[ctx.hostId]/database/[database]/[table]' },
     ],
     engine: ColumnFormat.ColoredBadge,
     is_leader: ColumnFormat.Boolean,

diff --git a/app/[host]/[query]/tables/tables-overview.ts b/app/[host]/[query]/tables/tables-overview.ts
@@ -63,7 +63,10 @@ export const tablesOverviewConfig: QueryConfig = {
     'readable_detached_bytes_on_disk',
   ],
   columnFormats: {
-    table: [ColumnFormat.Link, { href: '/tables/[_database]/[_table]' }],
+    table: [
+      ColumnFormat.Link,
+      { href: '/[ctx.hostId]/database/[_database]/[_table]' },
+    ],
     engine: ColumnFormat.ColoredBadge,
     readable_total_rows: ColumnFormat.BackgroundBar,
     readable_compressed: ColumnFormat.BackgroundBar,

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,12 +1,19 @@
 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'
 
 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
@@ -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
@@ -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/...[database]/[table]/@mergetree/toolbar.tsx → ...able]/extras/top-usage-columns-button.tsx b/...[database]/[table]/@mergetree/toolbar.tsx → ...able]/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
@@ -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
@@ -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} />}
     />
   )