debugbar 0.0.1 → 0.1.0

data/client/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/vue": "^2.1.1",
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "@rails/actioncable": "^6.1.7",
+    "lodash": "^4.17.21",
+    "pinia": "^2.1.7",
+    "sql-formatter": "^15.0.2",
+    "vue": "^3.3.8",
+    "vue-shadow-dom": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.10.4",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vue-tsc": "^1.8.22"
+  }
+}

data/client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

data/client/src/App.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Debugbar from "@/Debugbar.vue"
+import { ShadowRoot, ShadowStyle } from "vue-shadow-dom"
+
+import css from "./style.css?inline"
+</script>
+
+<template>
+  <div>
+    <shadow-root id="__debugbar-shadow-root">
+      <debugbar></debugbar>
+      <shadow-style>
+        {{ css }}
+      </shadow-style>
+    </shadow-root>
+  </div>
+</template>

data/client/src/AppDemo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Debugbar from "@/Debugbar.vue"
+import { ShadowRoot, ShadowStyle } from "vue-shadow-dom"
+import { onMounted } from "vue"
+import { useRequestsStore } from "@/stores/RequestsStore.ts"
+import { BackendRequestData } from "@/models/Request.ts"
+
+import css from "./style.css?inline"
+
+onMounted(() => {
+  console.log(`Using debugbar in DEMO mode`)
+
+  const requests = import.meta.glob("../../fixtures/requests/*.json", { eager: true })
+  const firstId = useRequestsStore().addRequests(Object.values(requests) as BackendRequestData[])[0]
+
+  useRequestsStore().setCurrentRequestById(firstId)
+})
+</script>
+
+<template>
+  <div>
+    <shadow-root id="__debugbar-shadow-root">
+      <debugbar></debugbar>
+      <shadow-style>
+        {{ css }}
+      </shadow-style>
+    </shadow-root>
+  </div>
+</template>

data/client/src/AppDev.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Debugbar from "@/Debugbar.vue"
+import { onMounted } from "vue"
+import { useRequestsStore } from "@/stores/RequestsStore.ts"
+import { BackendRequestData } from "@/models/Request.ts"
+
+onMounted(() => {
+  if (import.meta.env.DEV && import.meta.env.VITE_LOAD_FIXTURES) {
+    const requests = import.meta.glob("../../fixtures/requests/*.json", { eager: true })
+    const lastId = useRequestsStore()
+      .addRequests(Object.values(requests) as BackendRequestData[])
+      .pop()
+    useRequestsStore().setCurrentRequestById(lastId)
+  }
+})
+</script>
+
+<template>
+  <debugbar />
+</template>

data/client/src/Debugbar.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { createConsumer } from "@rails/actioncable"
+import { computed, onMounted, reactive, ref } from "vue"
+import { CodeBracketIcon, XCircleIcon, ArrowDownLeftIcon, TrashIcon } from "@heroicons/vue/16/solid"
+
+import TabButton from "@/components/TabButton.vue"
+import ModelsPanel from "@/components/panels/ModelsPanel.vue"
+import QueriesPanel from "@/components/queries/QueriesPanel.vue"
+import JobsPanel from "@/components/panels/JobsPanel.vue"
+import LogsPanel from "@/components/panels/LogsPanel.vue"
+import MessagesPanel from "@/components/panels/MessagesPanel.vue"
+
+import { useRequestsStore } from "@/stores/RequestsStore.ts"
+import { useConfigStore } from "@/stores/configStore.ts"
+import CachePanel from "@/components/panels/CachePanel.vue"
+import RequestPanel from "@/components/panels/RequestPanel.vue"
+import JsonPanel from "@/components/panels/JsonPanel.vue"
+import LogoRuby from "@/components/ui/logo-ruby.vue"
+
+let requestsStore = useRequestsStore()
+let configStore = useConfigStore()
+
+const header = ref(null)
+
+const state = reactive({
+  activeTab: "",
+  minimized: false,
+  isResizing: false,
+  height: configStore.config.height,
+})
+
+const isActive = computed(() => {
+  return state.activeTab != ""
+})
+
+const devMode = computed(() => {
+  return import.meta.env.DEV
+})
+
+const routeAlias = computed(() => {
+  return requestsStore.currentRequest?.meta.params.controller + "#" + requestsStore.currentRequest?.meta.params.action
+})
+
+let debugbarChannel
+
+if (configStore.config.mode == "ws") {
+  debugbarChannel = createConsumer(configStore.config.actionCableUrl).subscriptions.create(
+    { channel: configStore.config.channelName },
+    {
+      connected() {
+        console.log("🟢 Connected to channel")
+        debugbarChannel.send({ ids: [] })
+      },
+
+      disconnected() {
+        console.log("🔴 Disconnected from channel")
+      },
+      received(data) {
+        if (data.length == 0) {
+          return
+        }
+
+        const ids = requestsStore.addRequests(data)
+
+        if (!isActive.value) {
+          requestsStore.setCurrentRequestById(ids[ids.length - 1])
+        }
+
+        setTimeout(() => {
+          debugbarChannel.send({ ids: ids })
+        }, 50)
+      },
+    }
+  )
+} else {
+  console.log(`Using debugbar in "offline mode", ideal for demoing with fixtures.`)
+  debugbarChannel = {
+    send: (data) => {
+      // No-op
+      console.log("Ignoring `send` call", data)
+    },
+  }
+}
+
+const clearRequests = () => {
+  console.log("Clearing requests")
+  state.activeTab = ""
+  requestsStore.clearRequests()
+  debugbarChannel.send({ clear: true })
+}
+
+// Resizing the debugbar
+onMounted(() => {
+  window.onresize = function () {
+    if (window.innerHeight < state.height) {
+      state.height = window.innerHeight - header.value.clientHeight
+    }
+  }
+
+  document.onmousemove = function (e) {
+    if (!state.isResizing) {
+      return
+    }
+
+    state.height = window.innerHeight - e.clientY - header.value.clientHeight
+  }
+
+  document.onmouseup = function (_e) {
+    state.isResizing = false
+  }
+})
+
+const setActiveTab = (tab) => {
+  if (state.activeTab == tab) {
+    state.activeTab = "" // Close if you click on active tab
+  } else {
+    if (window.innerHeight < state.height) {
+      state.height = window.innerHeight - header.value.clientHeight * 2
+    }
+    state.activeTab = tab
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="state.minimized"
+    @click="state.minimized = false"
+    class="z-[9999] fixed left-0 bottom-0 bg-transparent cursor-pointer"
+  >
+    <div class="p-1 pt-1.5">
+      <img class="h-5" src="./assets/ruby-logo.svg" alt="Logo" />
+    </div>
+  </div>
+
+  <div v-if="!state.minimized && requestsStore.currentRequest == null" class="z-[9999] fixed left-0 bottom-0 w-full">
+    <div class="h-0.5 bg-red-700 cursor-row-resize" />
+    <div class="flex items-center justify-between bg-stone-100 border-b border-stone-200">
+      <div class="px-5 py-1.5 italic">No request yet</div>
+      <div class="px-3">
+        <button @click="state.minimized = true" title="Hide in the corner">
+          <arrow-down-left-icon class="size-4" />
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="!state.minimized && requestsStore.currentRequest" class="z-[9999] fixed left-0 bottom-0 w-full">
+    <div id="draggable-bar" @mousedown="state.isResizing = true" class="h-0.5 bg-red-700 cursor-row-resize" />
+
+    <div
+      id="debubgbar-header"
+      ref="header"
+      class="flex px-1 items-center justify-between bg-stone-100 border-b-2 border-stone-300"
+    >
+      <!--  Left  -->
+      <div>
+        <div class="flex">
+          <div class="p-1 pt-1.5">
+            <logo-ruby />
+          </div>
+
+          <tab-button
+            v-for="(v, k) in requestsStore.currentRequest.dataForTabs"
+            key="k"
+            :label="v.label"
+            :count="v?.count"
+            :is-active="k === state.activeTab"
+            :disabled="v.count == 0"
+            @click="setActiveTab(k)"
+            >{{ v.label }}</tab-button
+          >
+
+          <button
+            v-if="devMode"
+            @click="setActiveTab('debug')"
+            class="px-3 py-1.5 text-stone-600"
+            :class="{ 'bg-stone-300': state.activeTab == 'debug' }"
+          >
+            <CodeBracketIcon class="size-4" />
+          </button>
+        </div>
+      </div>
+
+      <!--  Right  -->
+      <div class="flex items-center space-x-2.5 pr-1">
+        <div @click="setActiveTab('request')" class="flex space-x-2 cursor-pointer">
+          <span class="text-sm text-stone-600 font-medium tracking-wide">
+            {{ routeAlias }}
+          </span>
+
+          <span
+            class="text-sm font-bold"
+            v-if="requestsStore.currentRequest.meta.duration < 1000"
+            :class="{
+              'text-orange-600': requestsStore.currentRequest.meta.duration >= 800,
+            }"
+            >{{ requestsStore.currentRequest.meta.duration.toFixed(1) }}ms</span
+          >
+          <span
+            class="text-sm font-bold text-red-600 bg-red-100 px-1 rounded"
+            v-if="requestsStore.currentRequest.meta.duration >= 1000"
+            >{{ (requestsStore.currentRequest.meta.duration / 1000).toFixed(2) }}s</span
+          >
+
+          <span
+            class="px-1 py-0.5 rounded text-xs"
+            :class="{
+              'bg-green-600 text-white': requestsStore.currentRequest.meta.status < 300,
+              'bg-amber-600 text-white':
+                requestsStore.currentRequest.meta.status >= 400 && requestsStore.currentRequest.meta.status < 500,
+              'bg-red-600 text-white': requestsStore.currentRequest.meta.status >= 500,
+            }"
+            >{{ requestsStore.currentRequest.meta.status }}</span
+          >
+        </div>
+
+        <select
+          class="px-2 py-1.5 bg-white border border-stone-200 rounded w-[330px] text-sm"
+          name="current_request_id"
+          @change="
+            (event) => {
+              const target = event.target as HTMLSelectElement
+              requestsStore.setCurrentRequestById(target.value)
+            }
+          "
+        >
+          <option
+            v-for="r in requestsStore.requests"
+            :selected="requestsStore.currentRequest.id == r.id"
+            v-text="r.pathWithVerb"
+            :value="r.id"
+          />
+        </select>
+
+        <button @click="clearRequests" title="Clear all requests (frontend and backend)">
+          <trash-icon class="size-4" />
+        </button>
+
+        <div class="flex items-center pl-2 space-x-2">
+          <button @click="state.minimized = true" title="Hide in the corner">
+            <arrow-down-left-icon class="size-4" />
+          </button>
+          <button :disabled="!isActive" @click="state.activeTab = ''" title="Close">
+            <x-circle-icon class="size-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div
+      ref="body"
+      id="debugbar-body"
+      class="bg-white overflow-scroll"
+      v-if="state.activeTab != ''"
+      :style="`height: ${state.height}px`"
+    >
+      <request-panel v-if="state.activeTab == 'request'" :request="requestsStore.currentRequest" />
+      <messages-panel v-if="state.activeTab == 'messages'" :messages="requestsStore.currentRequest?.messages" />
+      <models-panel
+        v-if="state.activeTab == 'models'"
+        :models="requestsStore.currentRequest?.models"
+        :count="requestsStore.currentRequest?.modelsCount"
+      />
+      <queries-panel v-if="state.activeTab == 'queries'" :current-request="requestsStore.currentRequest" />
+      <jobs-panel v-if="state.activeTab == 'jobs'" :jobs="requestsStore.currentRequest?.jobs" />
+      <cache-panel v-if="state.activeTab == 'cache'" :cache="requestsStore.currentRequest?.cache" />
+      <logs-panel v-if="state.activeTab == 'logs'" :logs="requestsStore.currentRequest?.logs" />
+      <json-panel
+        v-if="devMode && state.activeTab == 'debug'"
+        :current-request="requestsStore.currentRequest"
+        class="px-3 py-2"
+      />
+    </div>
+  </div>
+</template>

data/client/src/assets/rails-logo.svg

@@ -0,0 +1 @@
+<svg height="32" viewBox="0 0 90 32" width="90" xmlns="http://www.w3.org/2000/svg"><path d="m418.082357 25.9995403v4.1135034h-7.300339v1.89854h3.684072c1.972509 0 4.072534 1.4664311 4.197997 3.9665124l.005913.2373977v1.5821167c-.087824 3.007959-2.543121 4.1390018-4.071539 4.2011773l-.132371.0027328h-7.390745v-4.0909018l7.481152-.0226016v-1.9889467l-1.190107.0007441-.346911.0008254-.084566.0003251-.127643.0007097-.044785.0003793-.055764.0007949-.016378.0008259c.000518.0004173.013246.0008384.034343.0012518l.052212.000813c.030547.0003979.066903.0007803.105225.0011355l.078131.0006709-.155385-.0004701c-.31438-.001557-.85249-.0041098-1.729029-.0080055-1.775258 0-4.081832-1.3389153-4.219994-3.9549201l-.006518-.24899v-1.423905c0-2.6982402 2.278213-4.182853 4.065464-4.2678491l.161048-.003866zm-18.691579 0v11.8658752h6.170255v4.1361051h-10.735792v-16.0019803zm-6.441475 0v16.0019803h-4.588139v-16.0019803zm-10.803597 0c1.057758 0 4.04923.7305141 4.198142 3.951222l.005768.2526881v11.7980702h-4.271715v-2.8252084h-4.136105v2.8252084h-4.407325v-11.7980702c0-1.3184306 1.004082-4.0468495 3.946899-4.197411l.257011-.0064991zm-24.147177-.0027581 8.580186.0005749c.179372.0196801 4.753355.5702841 4.753355 5.5438436s-3.775694 5.3947112-3.92376 5.4093147l-.004472.0004216 5.00569 5.0505836h-6.374959l-3.726209-3.8608906v3.8608906h-4.309831zm22.418634-2.6971669.033418.0329283s-.384228.27122-.791058.610245c-12.837747-9.4927002-20.680526-5.0175701-23.144107-3.8196818-11.187826 6.2428065-7.954768 21.5678895-7.888988 21.8737669l.001006.0046469h-17.855317s.67805-6.6900935 5.4244-14.600677c4.74635-7.9105834 12.837747-13.9000252 19.414832-14.4876686 12.681632-1.2703535 24.110975 9.7062594 24.805814 10.3864403zm-31.111679 14.1815719 2.44098.881465c.113008.8852319.273103 1.7233771.441046 2.4882761l.101394.4499406-2.7122-.9718717c-.113009-.67805-.226017-1.6499217-.27122-2.84781zm31.506724-7.6619652h-1.514312c-1.128029 0-1.333125.5900716-1.370415.8046431l-.007251.056292-.000906.0152319-.00013 3.9153864h4.136105l-.000316-3.916479c-.004939-.0795522-.08331-.8750744-1.242775-.8750744zm-50.492125.339025 2.599192.94927c-.316423.731729-.719369 1.6711108-1.011998 2.4093289l-.118085.3028712-2.599192-.94927c.226017-.610245.700652-1.7403284 1.130083-2.7122001zm35.445121-.1434449h-3.456844v3.6588673h3.434397s.98767-.3815997.98767-1.8406572-.965223-1.8182101-.965223-1.8182101zm-15.442645-.7606218 1.62732 1.2882951c-.180814.705172-.318232 1.410344-.412255 2.115516l-.06238.528879-1.830735-1.4465067c.180813-.81366.384228-1.6499217.67805-2.4861834zm4.000495-6.3058651 1.017075 1.5369134c-.39779.4158707-.766649.8317413-1.095006 1.2707561l-.238493.3339623-1.08488-1.6273201c.40683-.5198383.881465-1.0396767 1.401304-1.5143117zm-16.182794-3.3450467 1.604719 1.4013034c-.40683.4237812-.800947.8729894-1.172815 1.3285542l-.364099.4569775-1.740328-1.4917101c.519838-.5650416 1.08488-1.1300833 1.672523-1.695125zm22.398252-.0904067.497237 1.4917101c-.524359.162732-1.048717.3688592-1.573076.6068095l-.393269.1842488-.519838-1.559515c.565041-.2486184 1.22049-.4972367 1.988946-.7232534zm5.28879-.54244c.578603.0361627 1.171671.1012555 1.779204.2068505l.458361.0869712-.090406 1.4013034c-.596684-.1265694-1.193368-.2097435-1.790052-.2495224l-.447513-.0216976zm-18.555968-6.2380601 1.017075 1.559515c-.440733.2203663-.868752.4661594-1.303128.7278443l-.437201.2666291-1.039676-1.5821167c.610245-.3616267 1.197888-.67805 1.76293-.9718717zm18.601172-.8588633c1.344799.3842283 1.923513.6474959 2.155025.7707625l.037336.0202958-.090406 1.5143117c-.482169-.1958811-.964338-.381717-1.453204-.5575078l-.739158-.2561522zm-8.633837-1.3334984.452033 1.3787017h-.226016c-.491587 0-.983173.0127134-1.474759.0476754l-.491587.0427313-.429431-1.3334984c.745855-.0904067 1.469108-.13561 2.16976-.13561z" transform="translate(-329 -10)"/></svg>