feat(runner): add execution time tracking to query results (#320)

Author: geekyharsh05

apps/desktop/src/routes/_protected/database/$id/sql/-components/runner/index.ts

@@ -8,23 +8,25 @@ import { hasDangerousSqlKeywords } from '~/entities/connection/utils'
 
 export * from './runner'
 
-function transformResult({ rows, query, startLineNumber, endLineNumber }: { rows: unknown[] } & Pick<typeof connectionStoreType.infer['queriesToRun'][number], 'query' | 'startLineNumber' | 'endLineNumber'>) {
+function transformResult({ rows, query, startLineNumber, endLineNumber, executionTime }: { rows: unknown[], executionTime: number } & Pick<typeof connectionStoreType.infer['queriesToRun'][number], 'query' | 'startLineNumber' | 'endLineNumber'>) {
   return {
     data: rows as Record<string, unknown>[],
     error: null,
     query,
     startLineNumber,
     endLineNumber,
+    executionTime,
   }
 }
 
-function transformError({ error, query, startLineNumber, endLineNumber }: { error: unknown } & Pick<typeof connectionStoreType.infer['queriesToRun'][number], 'query' | 'startLineNumber' | 'endLineNumber'>) {
+function transformError({ error, query, startLineNumber, endLineNumber, executionTime }: { error: unknown, executionTime: number } & Pick<typeof connectionStoreType.infer['queriesToRun'][number], 'query' | 'startLineNumber' | 'endLineNumber'>) {
   return {
     data: null,
     error: error instanceof Error ? error.message : String(error),
     query,
     startLineNumber,
     endLineNumber,
+    executionTime,
   }
 }
 
@@ -43,12 +45,15 @@ export function runnerQueryOptions({ connection }: { connection: typeof connecti
           return []
         }
 
+        const startTime = performance.now()
         try {
           const { result } = await executeAndLogSql({ connection, sql: query })
-          results.push(transformResult({ rows: result as unknown[], query, startLineNumber, endLineNumber }))
+          const executionTime = performance.now() - startTime
+          results.push(transformResult({ rows: result as unknown[], query, startLineNumber, endLineNumber, executionTime }))
         }
         catch (error) {
-          results.push(transformError({ error, query, startLineNumber, endLineNumber }))
+          const executionTime = performance.now() - startTime
+          results.push(transformError({ error, query, startLineNumber, endLineNumber, executionTime }))
         }
       }
 

apps/desktop/src/routes/_protected/database/$id/sql/-components/runner/runner-results-table.tsx

@@ -17,9 +17,11 @@ import { DEFAULT_COLUMN_WIDTH } from '~/entities/connection/components/table/uti
 export function RunnerResultsTable({
   data,
   columns,
+  executionTime,
 }: {
   data: Record<string, unknown>[]
   columns: Column[]
+  executionTime: number
 }) {
   const [search, setSearch] = useState('')
 
@@ -63,6 +65,16 @@ export function RunnerResultsTable({
     return limit ? filteredData.slice(0, limit) : filteredData
   }
 
+  const formatExecutionTime = (ms: number) => {
+    if (ms < 1) {
+      return `${(ms * 1000).toFixed(0)}μs`
+    }
+    if (ms < 1000) {
+      return `${ms.toFixed(2)}ms`
+    }
+    return `${(ms / 1000).toFixed(2)}s`
+  }
+
   return (
     <div className="h-full">
       <div className="flex h-10 items-center justify-between gap-2 pr-1 pl-4">
@@ -74,6 +86,10 @@ export function RunnerResultsTable({
             {filteredData.length === 1 ? 'row' : 'rows'}
             {search && filteredData.length !== data.length && ` (filtered from ${data.length})`}
           </span>
+          <Separator orientation="vertical" className="h-4!" />
+          <span className="text-xs text-muted-foreground">
+            {formatExecutionTime(executionTime)}
+          </span>
         </div>
         <div className="flex items-center gap-2">
           <div className="relative max-w-60 flex-1">

apps/desktop/src/routes/_protected/database/$id/sql/-components/runner/runner-results.tsx

@@ -82,7 +82,7 @@ export function RunnerResults() {
             </TabsTrigger>
           ))}
         </TabsList>
-        {results.map(({ data, error, startLineNumber, endLineNumber }, index) => (
+        {results.map(({ data, error, startLineNumber, endLineNumber, executionTime }, index) => (
           <TabsContent
             // eslint-disable-next-line react/no-array-index-key
             key={index}
@@ -155,6 +155,7 @@ export function RunnerResults() {
                       <RunnerResultsTable
                         data={data}
                         columns={Object.keys(data[0]!).map(key => ({ id: key }))}
+                        executionTime={executionTime}
                       />
                     )}
           </TabsContent>