Merge pull request #275 from duyet/chore/ui

feat: refactor typing, add ColumnFormat.HoverCard

app/[query]/merges/merge-performance.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mergePerformanceConfig: QueryConfig = {

app/[query]/merges/merges.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mergesConfig: QueryConfig = {

app/[query]/merges/mutations.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mutationsConfig: QueryConfig = {

app/[query]/more/asynchronous-metrics.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const asynchronousMetricsConfig: QueryConfig = {

app/[query]/more/backups.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const backupsConfig: QueryConfig = {

app/[query]/more/count-across-replicas.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const countAcrossReplicasConfig: QueryConfig = {

app/[query]/more/mergetree-settings.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const mergeTreeSettingsConfig: QueryConfig = {

app/[query]/more/metrics.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const metricsConfig: QueryConfig = {

app/[query]/more/settings.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const settingsConfig: QueryConfig = {

app/[query]/more/top-usage-columns.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const topUsageColumnsConfig: QueryConfig = {

app/[query]/more/top-usage-tables.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const topUsageTablesConfig: QueryConfig = {

app/[query]/more/zookeeper.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const zookeeperConfig: QueryConfig = {

app/[query]/queries/common-errors.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const commonErrorsConfig: QueryConfig = {

app/[query]/queries/expensive-queries-by-memory.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const expensiveQueriesByMemoryConfig: QueryConfig = {

app/[query]/queries/expensive-queries.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const expensiveQueriesConfig: QueryConfig = {

app/[query]/queries/failed-queries.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const failedQueriesConfig: QueryConfig = {

app/[query]/queries/history-queries.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const historyQueriesConfig: QueryConfig = {

app/[query]/queries/running-queries.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const runningQueriesConfig: QueryConfig = {

app/[query]/tables/distributed-ddl-queue.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const distributedDdlQueueConfig: QueryConfig = {

app/[query]/tables/readonly-tables.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const readOnlyTablesConfig: QueryConfig = {

app/[query]/tables/replicas.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const replicasConfig: QueryConfig = {

app/[query]/tables/replication-queue.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const replicationQueueConfig: QueryConfig = {

app/[query]/tables/table-overview.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export const tablesOverviewConfig: QueryConfig = {

app/clusters/[cluster]/count-across-replicas/page.tsx

@@ -1,6 +1,6 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
+import { ColumnFormat } from '@/lib/types/column-format'
 
 import type { QueryConfig } from '@/lib/types/query-config'
 

app/clusters/[cluster]/parts-across-replicas/page.tsx

@@ -1,6 +1,6 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
+import { ColumnFormat } from '@/lib/types/column-format'
 
 import type { QueryConfig } from '@/lib/types/query-config'
 

app/clusters/[cluster]/replicas-status/config.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {

app/clusters/config.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {

app/database/[database]/[table]/config.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {
@@ -70,6 +70,7 @@ export const config: QueryConfig = {
     'comment',
   ],
   columnFormats: {
+    column: [ColumnFormat.HoverCard, { content: 'Column note: [comment]' }],
     type: ColumnFormat.Code,
     codec: ColumnFormat.Code,
     part_count: ColumnFormat.Number,

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

@@ -1,10 +1,5 @@
-import { UpdateIcon } from '@radix-ui/react-icons'
+import { TableSkeleton } from '@/components/skeleton'
 
 export default function Loading() {
-  return (
-    <div className="flex flex-row items-center gap-3">
-      <UpdateIcon className="size-4 animate-spin" />
-      Loading table detail ...
-    </div>
-  )
+  return <TableSkeleton className="mb-4" />
 }

app/database/[database]/breadcrumb.tsx

@@ -31,7 +31,7 @@ interface DatabaseCount {
 export async function DatabaseBreadcrumb({ database }: Props) {
   // Default
   let databases: { name: string; count: number }[] = [
-    { name: database, count: 0 },
+    { name: database, count: -1 },
   ]
 
   try {
@@ -64,8 +64,8 @@ export async function DatabaseBreadcrumbSkeleton({ database }: Props) {
     <Internal
       current={database}
       databases={[
-        { name: database, count: 0 },
-        { name: 'Loading ...', count: 0 },
+        { name: database, count: -1 },
+        { name: 'Loading ...', count: -1 },
       ]}
     />
   )
@@ -93,7 +93,7 @@ function Internal({
 
         <DropdownMenu>
           <DropdownMenuTrigger className="flex items-center gap-1">
-            {current} ({currentCount} {currentCount == 1 ? 'table' : 'tables'})
+            {current} (<Count count={currentCount} />)
             <ChevronDownIcon />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
@@ -114,3 +114,10 @@ function Internal({
     </Breadcrumb>
   )
 }
+
+function Count({ count }: { count?: number }) {
+  if (count == undefined || count == -1) return 'loading ...'
+  if (count == 0) return '0 table'
+  if (count == 1) return '1 table'
+  return `${count} tables`
+}

app/database/[database]/page.tsx

@@ -1,6 +1,6 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
 import { DataTable } from '@/components/data-table/data-table'
 import { fetchData } from '@/lib/clickhouse'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 import { type RowData } from '@tanstack/react-table'
 

app/disks/config.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {

app/replica/[replica]/tables/config.ts

@@ -1,4 +1,4 @@
-import { ColumnFormat } from '@/components/data-table/column-defs'
+import { ColumnFormat } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
 export type Row = {

components/data-table/cells/hover-card-format.tsx

@@ -0,0 +1,50 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+import React from 'react'
+
+export type HoverCardContent = string | React.ReactNode
+
+export type HoverCardOptions = {
+  content: HoverCardContent
+}
+
+interface HoverCardProps {
+  row: any
+  value: any
+  options?: HoverCardOptions
+}
+
+export function HoverCardFormat({ row, value, options }: HoverCardProps) {
+  let { content } = options || {}
+
+  if (!content) {
+    content = value
+  }
+
+  // Content replacement, e.g. "Hover content: [column_name]"
+  if (
+    typeof content === 'string' &&
+    content.includes('[') &&
+    content.includes(']')
+  ) {
+    const matches = content.match(/\[(.*?)\]/g)
+    if (matches) {
+      matches.forEach((match) => {
+        const key = match.replace('[', '').replace(']', '').trim()
+        const replacementValue = row.getValue(key)
+        if (typeof content === 'string') {
+          content = content.replace(match, replacementValue)
+        }
+      })
+    }
+  }
+  return (
+    <HoverCard>
+      <HoverCardTrigger>{value}</HoverCardTrigger>
+      <HoverCardContent>{content}</HoverCardContent>
+    </HoverCard>
+  )
+}

components/data-table/column-defs.tsx

@@ -4,32 +4,12 @@ import {
   CaretUpIcon,
 } from '@radix-ui/react-icons'
 import type { ColumnDef, Row, RowData, Table } from '@tanstack/react-table'
-import { LinkProps } from 'next/link'
 
-import { formatCell } from '@/components/data-table/cell'
-import { type Action } from '@/components/data-table/cells/actions/types'
+import { formatCell } from '@/components/data-table/format-cell'
 import { Button } from '@/components/ui/button'
+import { ColumnFormat, ColumnFormatOptions } from '@/lib/types/column-format'
 import { type QueryConfig } from '@/lib/types/query-config'
 
-export enum ColumnFormat {
-  BackgroundBar = 'background-bar',
-  ColoredBadge = 'colored-badge',
-  RelatedTime = 'related-time',
-  NumberShort = 'number-short',
-  CodeToggle = 'code-toggle',
-  Duration = 'duration',
-  Boolean = 'boolean',
-  Action = 'action',
-  Number = 'number',
-  Badge = 'badge',
-  Code = 'code',
-  Link = 'link',
-  None = 'none',
-}
-
-// Union of all possible format options
-export type ColumnFormatOptions = Action[] | LinkProps
-
 export type ColumnType = { [key: string]: string }
 
 const formatHeader = (name: string, format: ColumnFormat) => {

components/data-table/cell.tsx → components/data-table/format-cell.tsx

@@ -1,11 +1,8 @@
 import type { Row, RowData, Table } from '@tanstack/react-table'
 import { type LinkProps } from 'next/link'
 
-import {
-  ColumnFormat,
-  ColumnFormatOptions,
-} from '@/components/data-table/column-defs'
 import { formatReadableQuantity } from '@/lib/format-readable'
+import { ColumnFormat, ColumnFormatOptions } from '@/lib/types/column-format'
 
 import { ActionFormat } from './cells/action-format'
 import { type Action } from './cells/actions/types'
@@ -15,6 +12,7 @@ import { BooleanFormat } from './cells/boolean-format'
 import { CodeToggleFormat } from './cells/code-toggle-format'
 import { ColoredBadgeFormat } from './cells/colored-badge-format'
 import { DurationFormat } from './cells/duration-format'
+import { HoverCardFormat, HoverCardOptions } from './cells/hover-card-format'
 import { LinkFormat } from './cells/link-format'
 import { RelatedTimeFormat } from './cells/related-time-format'
 
@@ -82,6 +80,15 @@ export const formatCell = <TData extends RowData, TValue>(
         />
       )
 
+    case ColumnFormat.HoverCard:
+      return (
+        <HoverCardFormat
+          row={row}
+          value={value}
+          options={columnFormatOptions as unknown as HoverCardOptions}
+        />
+      )
+
     default:
       return <span className="text-nowrap">{value as string}</span>
   }