debugbar 0.0.1 → 0.1.0

data/client/src/models/Request.ts

@@ -0,0 +1,183 @@
+export type BackendRequestData = {
+  id: string
+  meta: RequestMeta
+  request: RequestRequest
+  response: RequestResponse
+  models: { [key: string]: number }
+  queries: Query[]
+  jobs: Job[]
+  messages: Message[]
+  cache: Cache[]
+  logs: Log[]
+}
+
+export type RequestMeta = {
+  controller: string
+  action: string
+  params: { [key: string]: string }
+  format: string
+  method: string
+  path: string
+  status: number
+  view_runtime: number
+  db_runtime: number
+  duration: number
+  cpu_time: number
+  idle_time: number
+  allocations: number
+}
+
+export type RequestRequest = {
+  method: string
+  path: string
+  format: string
+  headers: Headers
+  params: { [key: string]: any }
+}
+
+export type RequestResponse = {
+  status: number
+  headers: Headers
+  body: string
+}
+
+export type Headers = { [key: string]: string }
+
+export type Query = {
+  id: string
+  name: string
+  sql: string
+  cached: boolean
+  async: boolean
+  binds: any[]
+  source: string[]
+  duration: number
+  lock_wait: number
+}
+
+export type Job = {
+  id: string
+  class: string
+  queue: string
+  args: any[]
+  successfully_enqueued: boolean
+  scheduled_at?: number
+  logs: string[]
+}
+
+export type Message = {
+  msg: string
+  extra: any
+}
+
+export type Cache = {
+  time: string
+  name: string
+  label: string
+  key: string
+  store: string
+  transaction_id: string
+  hit?: boolean
+  super_operation?: string
+}
+
+export type Log = {
+  time: string
+  severity: number
+  severity_label: string
+  message: string
+  progname: string
+}
+
+export class BackendRequest {
+  id: string
+  meta: RequestMeta
+  request: RequestRequest
+  response: RequestResponse
+  models: { [key: string]: number }
+  queries: Query[]
+  jobs: Job[]
+  messages: Message[]
+  cache: Cache[]
+  logs: Log[]
+
+  constructor(data: BackendRequestData) {
+    if (import.meta.env.DEV) {
+      console.log(data)
+    }
+
+    this.id = data?.id || "null"
+    this.meta = data?.meta || ({} as unknown as RequestMeta)
+    this.request = data?.request || ({} as unknown as RequestRequest)
+    this.response = data?.response || ({} as unknown as RequestResponse)
+    this.models = data?.models || {}
+    this.queries = data?.queries || []
+    this.jobs = data?.jobs || []
+    this.messages = data?.messages || []
+    this.cache = data?.cache || []
+    this.logs = data?.logs || []
+  }
+
+  get modelsCount(): number {
+    return Object.values(this.models).reduce((a, b) => a + b, 0)
+  }
+
+  get queryCount(): number {
+    return this.queries.length
+  }
+
+  get jobsCount(): number {
+    return this.jobs.length
+  }
+
+  get messagesCount(): number {
+    return this.messages.length
+  }
+
+  get cacheCount(): number {
+    // count unique cache message per transaction_id
+    return this.cache.reduce((acc, curr) => {
+      if (acc.indexOf(curr.transaction_id) === -1) {
+        acc.push(curr.transaction_id)
+      }
+      return acc
+    }, []).length
+  }
+
+  get pathWithVerb(): string {
+    return `${this.meta.method.toUpperCase()} ${this.meta.path}`
+  }
+
+  get dataForTabs(): { [key: string]: any } {
+    const tabs = {
+      messages: {
+        label: "Debug",
+        count: this.messagesCount,
+      },
+      models: {
+        label: "Models",
+        count: this.modelsCount,
+      },
+      queries: {
+        label: "Queries",
+        count: this.queryCount,
+      },
+      jobs: {
+        label: "Jobs",
+        count: this.jobsCount,
+      },
+      cache: {
+        label: "Cache",
+        count: this.cacheCount,
+      },
+    }
+
+    if (this.logs.length > 0) {
+      tabs["logs"] = {
+        label: "Logs",
+      }
+    }
+
+    return tabs
+  }
+}

data/client/src/stores/RequestsStore.ts

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia"
+import { BackendRequest, BackendRequestData } from "@/models/Request.ts"
+
+export let useRequestsStore = defineStore("requests", {
+  state: () => {
+    return {
+      requests: [],
+      currentRequest: null,
+    } as {
+      requests: BackendRequest[]
+      currentRequest: BackendRequest
+    }
+  },
+  actions: {
+    addRequests(requests: BackendRequestData[]): string[] {
+      const ids = []
+      requests.forEach((r) => {
+        if (!this.requests.find((req) => req.id === r.id)) {
+          this.requests.push(new BackendRequest(r))
+        }
+        ids.push(r.id)
+      })
+      return ids
+    },
+    setCurrentRequestById(id: string) {
+      this.currentRequest = this.requests.find((r) => r.id === id)!
+    },
+    clearRequests() {
+      this.requests = []
+      this.currentRequest = null
+    },
+    // removeRequest(request) {
+    //   this.requests.splice(this.requests.indexOf(request), 1)
+    // },
+  },
+})

data/client/src/stores/configStore.ts

@@ -0,0 +1,8 @@
+import { defineStore } from "pinia"
+import { newDebugbarConfig } from "@/models/Config.ts"
+
+export let useConfigStore = defineStore("config", {
+  state: () => ({
+    config: newDebugbarConfig(window._debugbarConfigOptions),
+  }),
+})

data/client/src/style.css

@@ -0,0 +1,23 @@
+@import "highlight.js/styles/github.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  pre, pre code.hljs {
+    @apply w-full !m-0 !p-0;
+  }
+}
+
+button {
+  @apply cursor-pointer;
+}
+
+.simple-button {
+  @apply border border-stone-300 shadow px-1.5 text-sm hover:bg-stone-200 hover:shadow-md;
+}
+
+button[disabled] {
+  @apply opacity-50 cursor-not-allowed;
+}

data/client/src/types.d.ts

@@ -0,0 +1,9 @@
+import { DebugbarConfig, DebugbarConfigOptions } from "@/models/Config.ts"
+
+export {}
+
+declare global {
+  interface Window {
+    _debugbarConfigOptions?: DebugbarConfigOptions
+  }
+}

data/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

data/client/tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        "red-rails": "#D30001",
+        "gray-rails": "#F0E7E9",
+      },
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: true,
+  },
+}

data/client/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "typeRoots": ["./node_modules/@types", "./src/types"],
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

data/client/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

data/client/vite.config.ts

@@ -0,0 +1,44 @@
+import { fileURLToPath, URL } from "node:url"
+
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import { resolve } from "path"
+
+const entryFile = process.env.VITE_DEMO_MODE ? "./src/demo.ts" : "./src/main.ts"
+
+const currentConfig = {
+  entry: resolve(__dirname, entryFile),
+  fileName: "debugbar.js",
+}
+
+const isNotReallyProd = () => {
+  if (process.env.VITE_DEMO_MODE && process.env.NODE_ENV === "production") {
+    return true
+  }
+
+  return process.env.NODE_ENV != "production"
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: {
+    __VUE_PROD_DEVTOOLS__: isNotReallyProd(),
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  build: {
+    manifest: true,
+    sourcemap: isNotReallyProd(),
+    emptyOutDir: false,
+    outDir: process.env.VITE_DEMO_MODE ? "./dist-demo" : "./dist",
+    rollupOptions: {
+      input: {
+        debugbar: fileURLToPath(new URL(entryFile, import.meta.url)),
+      },
+    },
+  },
+})

data/config/routes.rb

@@ -0,0 +1,7 @@
+Debugbar::Engine.routes.draw do
+  mount ActionCable.server => '/cable'
+
+  # TODO: Silence logs for these routes if `::Rails.application.config.assets.quiet` is true
+  get 'assets/style' => "assets#css", format: :css
+  get 'assets/script' => "assets#js"
+end

data/debugbar.gemspec

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require_relative "lib/debugbar/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "debugbar"
+  spec.version = Debugbar::VERSION
+  spec.authors = ["Julien Bourdeau"]
+  spec.email = ["julien@debugbar.dev"]
+
+  spec.summary = "Powerful devtools for Ruby on Rails"
+  spec.description = "Get a better understanding of your application performance and behavior (SQL queries, jobs, cache, routes, logs, etc)"
+  spec.homepage = "https://debugbar.dev"
+  spec.license = "MIT"
+  spec.required_ruby_version = ">= 2.6.0"
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = "https://github.com/julienbourdeau/debugbar"
+  spec.metadata["changelog_uri"] = "https://debugbar.dev/changelog/"
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files = Dir.chdir(__dir__) do
+    `git ls-files -z`.split("\x0").reject do |f|
+      (File.expand_path(f) == __FILE__) ||
+        f.start_with?(*%w[bin/ test/ spec/ features/ .git .circleci appveyor Gemfile])
+    end
+  end
+  spec.bindir = "exe"
+  spec.executables = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "rails" #, ">= 7.1.1"
+  spec.add_dependency "actioncable" #, ">= 7.1.1"
+
+  # For more information and examples about making a new gem, check out our
+  # guide at: https://bundler.io/guides/creating_gem.html
+end