debugbar 0.1.0 → 0.1.1

data/client/package.json

@@ -1,32 +0,0 @@
-{
-  "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

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

data/client/src/App.vue

@@ -1,17 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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

@@ -1,276 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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>