feat: action kill query

app/[name]/clickhouse-queries.ts

@@ -22,11 +22,12 @@ export const queries: Array<QueryConfig> = [
       'readable_read_rows',
       'readable_total_rows_approx',
       'readable_memory_usage',
+      'query_id',
     ],
     columnFormats: {
       query: ColumnFormat.CodeToggle,
       elapsed: ColumnFormat.Duration,
-      query_id: ColumnFormat.None,
+      query_id: [ColumnFormat.Action, ['kill-query']],
     },
     relatedCharts: [
       [

components/data-table/actions/action-item.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  CheckCircledIcon,
+  ExclamationTriangleIcon,
+  UpdateIcon,
+} from '@radix-ui/react-icons'
+
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { useToast } from '@/components/ui/use-toast'
+
+import { killQuery } from './actions'
+import type { Action } from './types'
+
+type Message = {
+  message: string
+}
+
+interface ActionButtonProps {
+  action: Action
+  value: any
+}
+
+export function ActionItem({ action, value }: ActionButtonProps) {
+  const { toast, dismiss } = useToast()
+  const [status, updateStatus] = useState<
+    'none' | 'loading' | 'success' | 'failed'
+  >('none')
+
+  const availableActions: {
+    [key: string]: { label: string; handler: (_: FormData) => Promise<Message> }
+  } = {
+    'kill-query': {
+      label: 'Kill Query',
+      handler: killQuery.bind(null, value),
+    },
+  }
+
+  const { label, handler } = availableActions[action]
+
+  return (
+    <form
+      action={async (formData: FormData) => {
+        updateStatus('loading')
+        toast({ title: 'Message', description: 'Loading...' })
+
+        try {
+          const msg: Message = await handler(formData)
+          console.debug('Action Response', msg)
+          updateStatus('success')
+          toast({ title: 'Message', description: msg.message })
+        } catch (e) {
+          updateStatus('failed')
+          toast({ title: 'Error', description: `${e}`, variant: 'destructive' })
+        } finally {
+          dismiss()
+        }
+      }}
+    >
+      <DropdownMenuItem>
+        {status == 'loading' && (
+          <span className="flex flex-row items-center gap-2">
+            <UpdateIcon className="h-4 w-4 animate-spin" /> {label}
+          </span>
+        )}
+
+        {status == 'failed' && (
+          <span className="flex flex-row items-center gap-2">
+            <ExclamationTriangleIcon className="h-4 w-4 text-orange-500" />{' '}
+            {label}
+          </span>
+        )}
+
+        {status == 'success' && (
+          <span className="flex flex-row items-center gap-2">
+            <CheckCircledIcon className="h-4 w-4 text-lime-600" /> {label}
+          </span>
+        )}
+
+        {status == 'none' && (
+          <button type="submit" className="m-0 border-none p-0">
+            {label}
+          </button>
+        )}
+      </DropdownMenuItem>
+    </form>
+  )
+}

components/data-table/actions/action-menu.tsx

@@ -0,0 +1,38 @@
+import { MoreHorizontal } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+import { ActionItem } from './action-item'
+import type { Action } from './types'
+
+interface ActionButtonProps {
+  value: any
+  actions: Action[]
+}
+
+export function ActionMenu({ value, actions }: ActionButtonProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {actions.map((action) => (
+          <ActionItem key={action} value={value} action={action} />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

components/data-table/actions/actions.ts

@@ -0,0 +1,13 @@
+'use server'
+
+import { fetchData } from '@/lib/clickhouse'
+
+export async function killQuery(queryId: string) {
+  console.log('Killing query', queryId)
+  const res = await fetchData(`KILL QUERY WHERE query_id = '${queryId}'`)
+  console.log('Killed query', queryId, res)
+
+  return {
+    message: `Killed query ${queryId}`,
+  }
+}

components/data-table/actions/types.ts

@@ -0,0 +1 @@
+export type Action = 'kill-query'

components/data-table/cell.tsx

@@ -1,5 +1,4 @@
 import { CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons'
-import { MoreHorizontal } from 'lucide-react'
 
 import dayjs from '@/lib/dayjs'
 import { formatReadableQuantity } from '@/lib/format-readable'
@@ -9,20 +8,19 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
 import { ColumnFormat } from '@/components/data-table/columns'
 
+import { ActionMenu } from './actions/action-menu'
+import type { Action } from './actions/types'
+
 const CODE_TRUNCATE_LENGTH = 50
 
-export const formatCell = (row: any, value: any, format: ColumnFormat) => {
+export const formatCell = (
+  row: any,
+  value: any,
+  format: ColumnFormat,
+  columnFormatOptions: Action[] = []
+) => {
   switch (format) {
     case ColumnFormat.Code:
       return <code>{value}</code>
@@ -39,7 +37,12 @@ export const formatCell = (row: any, value: any, format: ColumnFormat) => {
       }
 
       return (
-        <Accordion type="single" collapsible={row.getIsExpanded()}>
+        <Accordion
+          type="single"
+          defaultValue={row.getIsExpanded() ? 'code' : undefined}
+          collapsible={row.getIsExpanded()}
+          onValueChange={(value) => row.toggleExpanded(value === 'code')}
+        >
           <AccordionItem value="code" className="border-0">
             <AccordionTrigger className="py-0 hover:no-underline">
               <code className="truncate break-words font-normal">
@@ -71,22 +74,7 @@ export const formatCell = (row: any, value: any, format: ColumnFormat) => {
       )
 
     case ColumnFormat.Action:
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>Kill Query</DropdownMenuItem>
-            <DropdownMenuItem>Detail</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
+      return <ActionMenu value={value} actions={columnFormatOptions} />
 
     case ColumnFormat.Badge:
       return (

components/data-table/columns.tsx

@@ -49,11 +49,16 @@ export const getColumnDefs = (config: QueryConfig): ColumnDef<ColumnType>[] => {
 
   return configColumns.map((column) => {
     const name = normalizeColumnName(column)
-    const columnFormat =
+    const format =
       config.columnFormats?.[column] ||
       config.columnFormats?.[name] ||
       ColumnFormat.None
 
+    let [columnFormat, columnFormatOptions] = [format, undefined]
+    if (Array.isArray(format) && format.length === 2) {
+      ;[columnFormat, columnFormatOptions] = format
+    }
+
     return {
       id: name,
       accessorKey: column,
@@ -78,7 +83,12 @@ export const getColumnDefs = (config: QueryConfig): ColumnDef<ColumnType>[] => {
 
       cell: ({ row, getValue }) => {
         const value = getValue()
-        const formatted = formatCell(row, value, columnFormat)
+        const formatted = formatCell(
+          row,
+          value,
+          columnFormat,
+          columnFormatOptions
+        )
 
         return formatted
       },

components/data-table/data-table.tsx

@@ -72,8 +72,6 @@ export function DataTable<TData extends RowData, TValue>({
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
     initialColumnVisibility
   )
-  console.log('columnVisibility', columnVisibility)
-  console.log('columnDefs', columnDefs)
 
   // Sorting
   const [sorting, setSorting] = useState<SortingState>([])