Refactor code structure and error handling across multiple files; improve shared components and API signal management

Author: abdotop

.github/workflows/ga-build-image.yml

@@ -5,7 +5,7 @@ name: '🐳 Build Docker Image'
 on:
   push:
     branches: ['master']
-  
+
 jobs:
   build-image:
     name: 🏗️ Build Image

api/routes.ts

@@ -515,11 +515,11 @@ const defs = {
       const dep = DeploymentsCollection.get(deployment)
 
       if (!dep) {
-        throw respond.NotFound({ message: 'Deployment not found' })
+        throw new respond.NotFoundError({ message: 'Deployment not found' })
       }
 
       if (!dep?.databaseEnabled) {
-        throw respond.BadRequest({
+        throw new respond.BadRequestError({
           message: 'Database not enabled for deployment',
         })
       }
@@ -528,25 +528,31 @@ const defs = {
       if (!project) throw respond.NotFound({ message: 'Project not found' })
       if (!project.isPublic && !ctx.user?.isAdmin) {
         if (!userInTeam(project.teamId, ctx.user?.userEmail)) {
-          throw respond.Forbidden({
+          throw new respond.ForbiddenError({
             message: 'Access to project queries denied',
           })
         }
       }
 
       const { sqlEndpoint, sqlToken } = dep
       if (!sqlEndpoint || !sqlToken) {
-        throw respond.BadRequest({
+        throw new respond.BadRequestError({
           message: 'SQL endpoint or token not configured for deployment',
         })
       }
 
-      const startTime = performance.now()
-      const data = await runSQL(sqlEndpoint, sqlToken, sql)
+      try {
+        const startTime = performance.now()
+        const data = await runSQL(sqlEndpoint, sqlToken, sql)
 
-      return {
-        duration: (performance.now() - startTime) / 1000, // in seconds
-        rows: data,
+        return {
+          duration: (performance.now() - startTime) / 1000, // in seconds
+          rows: data,
+        }
+      } catch (error) {
+        return respond.BadRequest(
+          { message: (error as Error).message },
+        )
       }
     },
     input: OBJ({

api/sql.ts

@@ -20,10 +20,8 @@ export async function runSQL(
     },
     body: JSON.stringify({ query, params }),
   })
-  if (!res.ok) throw Error(`sql endpoint error ${res.status}`)
-  const data = await res.json()
-
-  return data
+  if (!res.ok) throw Error(await res.text())
+  return await res.json()
 }
 
 // Dialect detection attempts (run first successful)
@@ -60,7 +58,9 @@ const INTROSPECTION: Record<string, string> = {
 
 async function fetchSchema(endpoint: string, token: string, dialect: string) {
   const sql = INTROSPECTION[dialect] ?? INTROSPECTION.unknown
-  return await runSQL(endpoint, token, sql)
+  try {
+    return await runSQL(endpoint, token, sql)
+  } catch { /* ignore */ }
 }
 
 export type ColumnInfo = { name: string; type: string; ordinal: number }

api/user.ts

@@ -47,8 +47,9 @@ export async function decodeSession(sessionCode?: string) {
   try {
     const id = await decryptMessage(sessionCode)
     return UsersCollection.find(({ userEmail }) => userEmail === id)
-  } catch (err) {
-    console.log('unable to decode session', { sessionCode })
+  } catch {
+    // Invalid session code
+    return undefined
   }
 }
 

tasks/seed.ts

@@ -1,11 +1,11 @@
 import { insertLogs } from '/api/clickhouse-client.ts'
 import {
-  type Project,
-  type Team,
-  type User,
   DeploymentsCollection,
+  type Project,
   ProjectsCollection,
+  type Team,
   TeamsCollection,
+  type User,
   UsersCollection,
 } from '/api/schema.ts'
 
@@ -28,14 +28,25 @@ const users: User[] = [
     userPicture: undefined,
     isAdmin: false,
   },
+  {
+    userEmail: '[email protected]',
+    userFullName: 'Clement',
+    userPicture: undefined,
+    isAdmin: true,
+  },
+  {
+    userEmail: '[email protected]',
+    userFullName: 'Abdou Top',
+    userPicture: undefined,
+    isAdmin: true,
+  },
 ]
 
 const teams: Team[] = [
   {
     teamId: 'frontend-devs',
     teamName: 'Frontend Devs',
-    teamMembers: ['[email protected]',
-      '[email protected]'],
+    teamMembers: ['[email protected]', '[email protected]'],
   },
   {
     teamId: 'backend-devs',
@@ -107,7 +118,7 @@ async function seed() {
 
   // Seed projects
   console.log('Seeding projects...')
-  for (const [i, project] of projects.entries()) {
+  for (const [_, project] of projects.entries()) {
     await ProjectsCollection.insert(project)
     const url = `${project.slug}.com`
     const deployement = await DeploymentsCollection.insert({
@@ -121,16 +132,19 @@ async function seed() {
     })
     const service_instance_id = crypto.randomUUID()
     const now = Date.now() / 1000
-    insertLogs(deployement.url, [...Array(100).keys()].map(n => ({
-      attributes: { a: 'str', bool: true, num: n },
-      event_name: `test-log-${n}`,
-      severity_number: Math.floor(Math.random() * 24),
-      service_instance_id,
-      span_id: (now - n) + Math.random(),
-      trace_id: (now - n) + Math.random(),
-      service_version: 'v2',
-      timestamp: (now - n) * 1000,
-    })))
+    insertLogs(
+      deployement.url,
+      [...Array(100).keys()].map((n) => ({
+        attributes: { a: 'str', bool: true, num: n },
+        event_name: `test-log-${n}`,
+        severity_number: Math.floor(Math.random() * 24),
+        service_instance_id,
+        span_id: (now - n) + Math.random(),
+        trace_id: (now - n) + Math.random(),
+        service_version: 'v2',
+        timestamp: (now - n) * 1000,
+      })),
+    )
   }
   console.log('Projects seeded.')
 

web/components/QueryHistory.tsx

@@ -1,13 +1,6 @@
 import { ChevronRight, Clock, Play, Search, Trash2 } from 'lucide-preact'
 import { A, navigate, url } from '../lib/router.tsx'
-import { onRun, queriesHistory } from '../pages/DeploymentPage.tsx'
-
-export type QueryHistoryItem = {
-  query: string
-  timestamp: string
-  columns?: number
-  rows?: number
-}
+import { onRun, queriesHistory } from '../lib/shared.tsx'
 
 const deleteQuery = (hash: string) => {
   const updatedHistory = { ...queriesHistory.value }

web/lib/shared.tsx

@@ -0,0 +1,48 @@
+import { HardDrive, ListTodo } from 'lucide-preact'
+import { api } from './api.ts'
+import { DeploymentPage } from '../pages/DeploymentPage.tsx'
+import { SidebarItem } from '../components/SideBar.tsx'
+import { url } from './router.tsx'
+import { Signal } from '@preact/signals'
+
+// export
+export type QueryHistoryItem = {
+  query: string
+  timestamp: string
+  columns?: number
+  rows?: number
+}
+
+// Sidebar items for project page
+export const sidebarItems: Record<string, SidebarItem> = {
+  'deployment': {
+    icon: HardDrive,
+    label: 'Deployment',
+    component: DeploymentPage,
+  },
+  'tasks': { icon: ListTodo, label: 'Tasks', component: DeploymentPage },
+} as const
+
+// API signal for deployment queries
+export const querier = api['GET/api/deployment/query'].signal()
+
+// API signal for project deployments
+export const deployments = api['GET/api/project/deployments'].signal()
+
+// API signal for current project
+export const project = api['GET/api/project'].signal()
+
+export const onRun = (query: string) => {
+  if (querier.pending) return
+  const { dep, tab } = url.params
+  if (dep && tab === 'queries' && query) {
+    querier.fetch({ deployment: dep, sql: query })
+  }
+}
+
+export const queriesHistory = new Signal<Record<string, QueryHistoryItem>>(
+  JSON.parse(localStorage.getItem('saved_queries') || '{}'),
+)
+queriesHistory.subscribe((val) => {
+  localStorage.setItem('saved_queries', JSON.stringify(val))
+})