feat: add introspection, styles, react-table

.gitignore

@@ -37,6 +37,7 @@ yarn-error.log*
 .DS_Store
 *.pem
 cache
+logs
 
 # Orama
 orama_bump_*.json

examples/create-server-example/index.mjs

@@ -1,4 +1,5 @@
 import path from "node:path"
+import fastifyCors from "@fastify/cors"
 import Fastify from "fastify"
 import { createServer } from "pinorama-server"
 
@@ -18,6 +19,8 @@ const pinoramaServer = createServer(
   }
 )
 
+pinoramaServer.register(fastifyCors)
+
 pinoramaServer.listen({ port: 6200 }, (err, address) => {
   if (err) throw err
   console.log(`Pinorama server listening at ${address}`)
@@ -40,7 +43,7 @@ const genericServer = Fastify({
   }
 })
 
-genericServer.post("/logs", async function handler(req) {
+genericServer.post("/docs", async function handler(req) {
   req.log.info(req.body.message)
   return req.body.message
 })

examples/create-server-example/package.json

@@ -4,10 +4,11 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "start": "node index.mjs",
+    "start": "node --inspect index.mjs",
     "clean": "rimraf node_modules"
   },
   "dependencies": {
+    "@fastify/cors": "^9.0.1",
     "@fastify/one-line-logger": "^1.3.0",
     "fastify": "^4.26.2",
     "pinorama-server": "workspace:*",

examples/fastify-example/index.mjs

@@ -1,4 +1,5 @@
 import path from "node:path"
+import fastifyCors from "@fastify/cors"
 import Fastify from "fastify"
 import { fastifyPinoramaServer } from "pinorama-server"
 
@@ -18,13 +19,15 @@ const fastify = Fastify({
   }
 })
 
+fastify.register(fastifyCors)
+
 fastify.register(fastifyPinoramaServer, {
   prefix: "/my_pinorama_server",
   dbPath: path.resolve("./db.msp"),
   logLevel: "silent" // need to avoid loop
 })
 
-fastify.post("/logs", async function handler(req) {
+fastify.post("/docs", async function handler(req) {
   req.log.info(req.body.message)
   return req.body.message
 })

examples/fastify-example/package.json

@@ -4,10 +4,11 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "start": "node index.mjs",
+    "start": "node --inspect index.mjs",
     "clean": "rimraf node_modules"
   },
   "dependencies": {
+    "@fastify/cors": "^9.0.1",
     "@fastify/one-line-logger": "^1.3.0",
     "fastify": "^4.26.2",
     "pinorama-server": "workspace:*",

packages/pinorama-client/src/index.ts

@@ -111,7 +111,45 @@ export class PinoramaClient {
 
       return json
     } catch (error) {
-      console.error("error searching logs:", error)
+      console.error("error searching docs:", error)
+      throw error
+    }
+  }
+
+  public async styles(): Promise<string> {
+    try {
+      const response = await fetch(`${this.url}/styles.css`, {
+        method: "GET",
+        headers: { ...this.defaultHeaders, contentType: "text/css" }
+      })
+
+      if (response.status !== 200) {
+        throw new Error("[TODO ERROR]: PinoramaClient.styles failed")
+      }
+
+      const css = await response.text()
+      return css
+    } catch (error) {
+      console.error("error fetching styles:", error)
+      throw error
+    }
+  }
+
+  public async introspection(): Promise<unknown> {
+    try {
+      const response = await fetch(`${this.url}/introspection`, {
+        method: "GET",
+        headers: this.defaultHeaders
+      })
+
+      const json = await response.json()
+      if (response.status !== 200) {
+        throw new Error(json.error)
+      }
+
+      return json
+    } catch (error) {
+      console.error("error fetching introspection:", error)
       throw error
     }
   }

packages/pinorama-server/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@orama/orama": "2.0.19",
     "@orama/plugin-data-persistence": "2.0.19",
+    "change-case": "^5.4.4",
     "fastify": "^4.26.2",
     "fastify-plugin": "^4.5.1"
   },

packages/pinorama-server/src/index.mts

@@ -33,19 +33,66 @@ type PinoramaServerOptions = {
   dbFormat?: PersistenceFormat
   prefix?: string
   logLevel?: LogLevel
+  ui: any
 }
 
 export const defaultOptions: PinoramaServerOptions = {
   adminSecret: process.env.PINORAMA_SERVER_ADMIN_SECRET,
+  dbFormat: "json",
   dbSchema: {
-    level: "number",
+    level: "enum",
     time: "number",
     msg: "string",
-    pid: "number",
+    pid: "enum",
     hostname: "string"
   },
-  // dbPath: path.join(os.tmpdir(), "pinorama.msp"),
-  dbFormat: "json"
+  ui: {}
+  // ui: {
+  //   props: {
+  //     level: {
+  //       label: "Level",
+  //       type: "enum",
+  //     }
+  //   },
+  //   labels: {
+  //     level: "Level",
+  //     time: "Time",
+  //     msg: "Message",
+  //     pid: "PID",
+  //     hostname: "Host"
+  //   },
+  //   enumLabels: {
+  //     level: {
+  //       10: "TRACE",
+  //       20: "DEBUG",
+  //       30: "INFO",
+  //       40: "WARN",
+  //       50: "ERROR",
+  //       60: "FATAL"
+  //     }
+  //   },
+  //   formatters: {
+  //     time: "timestamp"
+  //   },
+  //   styles: {
+  //     time: {
+  //       default: { opacity: "0.5" }
+  //     },
+  //     level: {
+  //       byValue: {
+  //         10: { color: "var(--color-gray-500)" },
+  //         20: { color: "var(--color-purple-500)" },
+  //         30: { color: "var(--color-lime-500)" },
+  //         40: { color: "var(--color-yellow-500)" },
+  //         50: { color: "var(--color-red-500)" },
+  //         60: { color: "var(--color-red-500)" }
+  //       }
+  //     }
+  //   },
+  //   defaultColumns: ["time", "level", "msg", "hostname", "pid"],
+  //   defaultFacets: ["level", "hostname", "pid"]
+  //   // facets: [["level", { search: false }], "hostname", "pid"],
+  // }
 }
 
 const fastifyPinoramaServer: FastifyPluginAsync<PinoramaServerOptions> = async (
@@ -72,8 +119,10 @@ const fastifyPinoramaServer: FastifyPluginAsync<PinoramaServerOptions> = async (
   }
 
   fastify.register(routes.bulkRoute, registerOpts)
+  fastify.register(routes.introspectionRoute, registerOpts)
   fastify.register(routes.persistRoute, registerOpts)
   fastify.register(routes.searchRoute, registerOpts)
+  fastify.register(routes.stylesRoute, registerOpts)
 
   fastify.register(plugins.gracefulSaveHook)
   fastify.register(plugins.authHook)

packages/pinorama-server/src/routes/index.mts

@@ -1,3 +1,5 @@
 export * from "./bulk.mjs"
+export * from "./introspection.mjs"
 export * from "./persist.mjs"
 export * from "./search.mjs"
+export * from "./styles.mjs"

packages/pinorama-server/src/routes/introspection.mts

@@ -0,0 +1,16 @@
+import type { FastifyInstance } from "fastify"
+
+export async function introspectionRoute(fastify: FastifyInstance) {
+  fastify.route({
+    url: "/introspection",
+    method: "get",
+    handler: async () => {
+      const { dbSchema, ui } = fastify.pinoramaOpts
+
+      return {
+        dbSchema,
+        ui
+      }
+    }
+  })
+}

packages/pinorama-server/src/routes/styles.mts

@@ -0,0 +1,19 @@
+import type { FastifyInstance } from "fastify"
+import { generateCSS } from "../utils/styles.mjs"
+
+export async function stylesRoute(fastify: FastifyInstance) {
+  fastify.route({
+    url: "/styles.css",
+    method: "get",
+    handler: async (req, res) => {
+      const columns = fastify.pinoramaOpts?.ui?.columns
+
+      if (!columns || columns?.length === 0) {
+        res.type("text/css").send("")
+      }
+
+      const css = generateCSS(columns)
+      res.type("text/css").send(css)
+    }
+  })
+}

packages/pinorama-server/src/utils/styles.mts

@@ -0,0 +1,45 @@
+import { kebabCase } from "change-case"
+
+type StyleConfig = {
+  base?: Record<string, string>
+  conditions?: Record<string | number, Record<string, string>>
+}
+
+type ColumnnDefinition =
+  | [string, { style: StyleConfig; formatter?: string }]
+  | string
+
+export function generateCSS(columns: ColumnnDefinition[]) {
+  let css = ""
+
+  const generateCSSProps = (styles: Record<string, string>) => {
+    let props = ""
+    for (const [prop, value] of Object.entries(styles)) {
+      props += `${kebabCase(prop)}: ${value};`
+    }
+    return props
+  }
+
+  for (const column of columns) {
+    if (typeof column === "string") continue
+
+    const prefix = "pinorama-col"
+    const [className, config] = column
+    const baseStyles = config.style?.base ?? {}
+    const conditions = config.style?.conditions ?? {}
+
+    // Generate base style
+    css += `.${prefix}-${kebabCase(className)} {`
+    css += generateCSSProps(baseStyles)
+    css += "}\n"
+
+    // Generate conditional style
+    for (const [condition, conditionStyles] of Object.entries(conditions)) {
+      css += `.${prefix}-${kebabCase(className)}-${condition} {`
+      css += generateCSSProps(conditionStyles)
+      css += "}\n"
+    }
+  }
+
+  return css
+}

packages/pinorama-studio/package.json

@@ -17,12 +17,15 @@
     "@fastify/cors": "^9.0.1",
     "@fastify/one-line-logger": "^1.3.0",
     "@fastify/static": "^7.0.4",
+    "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-query": "^5.40.1",
+    "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.5.1",
     "chalk": "^5.3.0",
+    "change-case": "^5.4.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -39,6 +42,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@tailwind-plugin/expose-colors": "^1.1.8",
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",