debugbar 0.1.0 → 0.1.1

data/client/src/components/TabButton.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  label: string
-  count?: number
-  isActive: boolean
-}>()
-</script>
-
-<template>
-  <button
-    class="text-sm flex items-center space-x-1 px-3 py-2 border-0"
-    :class="{
-      'bg-stone-300 rounded-sm': props.isActive,
-    }"
-  >
-    <span :class="{ 'font-medium': props.isActive }"><slot /></span>
-    <span
-      v-if="props.count != undefined"
-      class="p-0.5 rounded-full text-xs"
-      :class="{
-        'px-1.5': props.count < 10,
-        hidden: props.count == 0,
-        'bg-stone-300': props.count > 0 && !props.isActive,
-        'bg-stone-400': props.count > 0 && props.isActive,
-        // '!bg-red-700 !text-white': props.count > 10, // TODO: Should be PER TAB (30 models is fine but 30 queries is a lot)
-      }"
-      v-text="props.count"
-    />
-  </button>
-</template>
-
-<style scoped></style>

data/client/src/components/panels/CachePanel.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { Cache } from "@/models/Request.ts"
-import Panel from "@/components/panels/Panel.vue"
-
-const props = defineProps<{
-  cache: Cache[]
-}>()
-</script>
-
-<template>
-  <panel>
-    <div v-if="props.cache.length == 0">
-      <div class="text-gray-500">No cache used.</div>
-    </div>
-
-    <div class="space-y-3">
-      <div v-for="cache in props.cache" class="flex items-center space-x-8">
-        <div class="w-24 text-sm text-right text-gray-400">{{ cache.time }}</div>
-        <div class="w-16 text-right">
-          <span
-            class="px-1 py-0.5 rounded text-white text-xs font-mono font-medium bg-stone-400"
-            :class="{
-              '!bg-emerald-500': cache.label == 'hit',
-              '!bg-indigo-500': cache.label == 'write',
-              '!bg-amber-400': cache.label == 'read',
-              '!bg-red-400': cache.label == 'delete',
-            }"
-          >
-            {{ cache.label }}
-          </span>
-        </div>
-        <div class="text-gray-800">
-          <div class="font-medium" title="cache key">{{ cache.key }}</div>
-          <div class="text-xs text-gray-400" title="transaction_id">{{ cache.transaction_id }}</div>
-        </div>
-      </div>
-    </div>
-  </panel>
-</template>
-
-<style scoped></style>

data/client/src/components/panels/JobsPanel.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { Job } from "@/models/Request.ts"
-import Panel from "@/components/panels/Panel.vue"
-
-const props = defineProps<{
-  jobs: Job[]
-}>()
-
-function formatTs(ts: number) {
-  if (ts == null) {
-    return "-"
-  }
-  return new Date(ts * 1000).toLocaleString()
-}
-</script>
-
-<template>
-  <panel>
-    <div v-if="props.jobs.length == 0">
-      <div class="text-gray-500">No jobs enqueued.</div>
-    </div>
-
-    <table v-if="props.jobs.length > 0" class="my-4 mx-6 divide-y divide-stone-300">
-      <thead>
-        <tr>
-          <th scope="col" class="w-36 py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-stone-900 sm:pl-0">Job</th>
-          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-stone-900">Args</th>
-          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-stone-900">Logs</th>
-        </tr>
-      </thead>
-      <tbody class="divide-y divide-stone-200">
-        <tr v-for="(v, _k) in props.jobs" :key="v.id">
-          <td class="whitespace-nowrap p-4 pr-8 text-stone-900">
-            <div class="text-lg font-bold" v-text="v.class"></div>
-            <div class="text-stone-600 text-sm">
-              <div v-text="'Queue: ' + v.queue"></div>
-              <div v-text="'At: ' + formatTs(v.scheduled_at)"></div>
-            </div>
-          </td>
-          <td class="whitespace-nowrap px-3 p-4 pr-8 text-sm">
-            <highlightjs language="json" :code="JSON.stringify(v.args, null, 2)" />
-          </td>
-          <td class="whitespace-nowrap px-3 p-4 pr-8 text-sm text-stone-500">
-            <div v-for="(log, k) in v.logs" v-html="(k > 0 ? '&nbsp; '.repeat(k) + '↳ ' : '') + log" class="" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </panel>
-</template>
-
-<style scoped></style>

data/client/src/components/panels/JsonPanel.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { BackendRequest } from "@/models/Request.ts"
-
-const props = defineProps<{
-  currentRequest: BackendRequest
-}>()
-</script>
-
-<template>
-  <div class="p-4 leading-8">
-    <highlightjs language="json" :code="JSON.stringify(props.currentRequest, null, 2)" />
-  </div>
-</template>
-
-<style scoped></style>

data/client/src/components/panels/LogsPanel.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { Log } from "@/models/Request.ts"
-import Panel from "@/components/panels/Panel.vue"
-
-const props = defineProps<{
-  logs: Log[]
-}>()
-
-function message(log: Log): string {
-  const str = log.progname || log.message || ""
-  return str.replace(" ", "&nbsp;&nbsp;")
-}
-</script>
-
-<template>
-  <panel>
-    <div v-if="props.logs.length == 0">
-      <div class="text-gray-500">No logs to show. Are you using the correct minimum level in your config?</div>
-    </div>
-
-    <div v-for="log in props.logs" class="flex items-center space-y-1 space-x-3">
-      <div class="w-32 text-right text-gray-400">{{ log.time }}</div>
-      <div class="w-20 text-center">
-        <span
-          class="px-1 py-0.5 rounded text-white text-xs font-mono font-medium"
-          :class="{
-            'bg-stone-400': log.severity == 0,
-            'bg-blue-500': log.severity == 1,
-            'bg-amber-400': log.severity == 2,
-            'bg-red-400': log.severity == 2,
-            'bg-fuchsia-500': log.severity >= 3,
-          }"
-          :title="log.severity_label"
-        >
-          {{ log.severity_label }}
-        </span>
-      </div>
-      <div class="text-gray-800" v-html="message(log)"></div>
-    </div>
-  </panel>
-</template>
-
-<style scoped></style>

data/client/src/components/panels/MessagesPanel.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { Message } from "@/models/Request.ts"
-import Panel from "@/components/panels/Panel.vue"
-
-const props = defineProps<{
-  messages: Message[]
-}>()
-</script>
-
-<template>
-  <panel>
-    <div class="flex flex-col space-y-8">
-      <!--    <div v-for="(msg, idx) in props.messages" v-text="msg.msg"></div>-->
-      <div v-for="(msg, _idx) in props.messages" class="space-y-3">
-        <div class="font-bold text-lg" v-text="msg.msg"></div>
-        <div class="ml-4">
-          <div v-if="!msg.extra">–</div>
-          <highlightjs v-if="msg.extra" language="json" :code="JSON.stringify(msg.extra)" />
-        </div>
-      </div>
-    </div>
-  </panel>
-</template>
-
-<style scoped></style>

data/client/src/components/panels/ModelsPanel.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import Panel from "@/components/panels/Panel.vue"
-
-const props = defineProps<{
-  models: { [key: string]: number }
-  count: number
-}>()
-</script>
-
-<template>
-  <panel>
-    <div v-if="props.count == 0">
-      <div class="text-gray-500">No models were initialized.</div>
-    </div>
-
-    <table v-if="props.count > 0" class="divide-y divide-stone-300">
-      <thead>
-        <tr>
-          <th scope="col" class="w-36 py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-stone-900 sm:pl-0">
-            Model
-          </th>
-          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-stone-900">Count</th>
-        </tr>
-      </thead>
-      <tbody class="divide-y divide-stone-200">
-        <tr v-for="(v, k) in props.models" :key="k">
-          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-stone-900 sm:pl-0">
-            {{ k }}
-          </td>
-          <td class="whitespace-nowrap px-3 py-4 text-sm text-stone-500 text-center">{{ v }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </panel>
-</template>
-
-<style scoped></style>

data/client/src/components/panels/Panel.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="px-3 py-2">
-    <slot></slot>
-  </div>
-</template>

data/client/src/components/panels/RequestPanel.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import omit from "lodash/omit"
-import Panel from "@/components/panels/Panel.vue"
-import { BackendRequest } from "@/models/Request.ts"
-import KeyValueTable from "@/components/ui/KeyValueTable.vue"
-import Row from "@/components/ui/Row.vue"
-import Foldable from "@/components/ui/Foldable.vue"
-
-defineProps<{
-  request: BackendRequest
-}>()
-</script>
-
-<template>
-  <div class="flex">
-    <div class="w-1/2">
-      <panel>
-        <h2 class="mt-0.5 mb-2 px-2 py-1 bg-stone-300 text-black tracking-wide text-xs uppercase font-bold rounded">
-          HTTP Request
-        </h2>
-
-        <key-value-table>
-          <row label="Method">{{ request.meta.method }}</row>
-          <row label="URL">{{ request.meta.path }}</row>
-          <row label="Params">
-            <highlightjs
-              class="text-sm"
-              language="json"
-              :code="JSON.stringify(omit(request.meta.params, ['controller', 'action']), null, 2)"
-            />
-          </row>
-          <row label="Header: Version">
-            {{ request.request.headers["Version"] }}
-          </row>
-          <row label="Header: Cache-Control">
-            {{ request.request.headers["Cache-Control"] }}
-          </row>
-        </key-value-table>
-
-        <foldable class="py-4" label="All Headers">
-          <key-value-table>
-            <row v-for="(v, k) in request.request.headers" :key="k" :label="k as unknown as string">{{ v }}</row>
-          </key-value-table>
-        </foldable>
-
-        <div class="py-3 text-right italic text-sm text-stone-500">
-          What else would like to see here?
-          <a target="_blank" class="underline font-bold" href="https://github.com/julienbourdeau/debugbar/discussions"
-            >Tell me!</a
-          >
-        </div>
-      </panel>
-    </div>
-
-    <div class="w-1/2">
-      <panel>
-        <h2 class="mt-0.5 mb-2 px-2 py-1 bg-stone-300 text-black tracking-wide text-xs uppercase font-bold rounded">
-          Routing
-        </h2>
-
-        <key-value-table>
-          <row title="Controller"> {{ request.meta.controller }} > {{ request.meta.action }} </row>
-        </key-value-table>
-      </panel>
-
-      <panel>
-        <h2 class="mt-0.5 mb-2 px-2 py-1 bg-stone-300 text-black tracking-wide text-xs uppercase font-bold rounded">
-          HTTP Response
-        </h2>
-
-        <div v-if="!request.response?.status">
-          <div class="py-3 text-sm text-stone-500">
-            The response was not captured.
-            <a target="_blank" class="underline font-bold" href="https://debugbar.dev/docs/known-limitations/"
-              >Learn more</a
-            >
-          </div>
-        </div>
-
-        <div v-if="request.response?.status">
-          <key-value-table>
-            <row label="Status">{{ request.response.status }}</row>
-            <row label="Body">{{ request.response.body.substring(0, 140) }}</row>
-            <row label="Header: Content-Type">
-              {{ request.response.headers["Content-Type"] }}
-            </row>
-          </key-value-table>
-
-          <foldable class="py-4" label="All Headers">
-            <key-value-table>
-              <row v-for="(v, k) in request.response.headers" :key="k" :label="k as unknown as string">{{ v }}</row>
-            </key-value-table>
-          </foldable>
-        </div>
-      </panel>
-    </div>
-  </div>
-</template>

data/client/src/components/queries/QueriesPanel.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { BackendRequest } from "@/models/Request.ts"
-import QueryItem from "@/components/queries/QueryItem.vue"
-import Panel from "@/components/panels/Panel.vue"
-
-const props = defineProps<{
-  currentRequest: BackendRequest
-}>()
-</script>
-
-<template>
-  <panel>
-    <div class="flex flex-col space-y-8">
-      <query-item v-for="query in props.currentRequest.queries" :key="query.id" :query="query" />
-    </div>
-  </panel>
-</template>

data/client/src/components/queries/QueryItem.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { format } from "sql-formatter"
-import { ChevronDownIcon } from "@heroicons/vue/16/solid"
-
-import { Query } from "@/models/Request.ts"
-import { reactive } from "vue"
-
-const props = defineProps<{
-  query: Query
-}>()
-
-const state = reactive({
-  isOpen: true,
-  isFormatted: false,
-})
-
-function copyToClipboard(text: string) {
-  const type = "text/plain"
-  const blob = new Blob([text], { type })
-  const data = [new ClipboardItem({ [type]: blob })]
-  navigator.clipboard.write(data)
-}
-</script>
-
-<template>
-  <div>
-    <div class="flex items-center space-x-3">
-      <button class="flex items-center space-x-1" @click="state.isOpen = !state.isOpen">
-        <chevron-down-icon
-          class="size-4"
-          :class="{
-            '-rotate-90': !state.isOpen,
-          }"
-        />
-        <span class="font-bold text-lg">{{ query.name }}</span>
-      </button>
-      <span v-if="props.query.cached" class="px-1 py-0.5 rounded text-xs bg-sky-600 text-white">cached</span>
-      <span v-if="props.query.async" class="px-1 py-0.5 rounded text-xs bg-emerald-600 text-white">async</span>
-      <div v-if="state.isOpen">
-        <span
-          @click="state.isFormatted = !state.isFormatted"
-          class="px-3 text-xs uppercase text-stone-400 cursor-pointer"
-          title="Format SQL query"
-          v-text="state.isFormatted ? 'unformat' : 'format'"
-        />
-        <span
-          @click="copyToClipboard(query.sql)"
-          class="px-3 text-xs uppercase text-stone-400 cursor-pointer"
-          title="Copy SQL query to clipboard"
-          >copy</span
-        >
-      </div>
-    </div>
-
-    <div v-if="state.isOpen" class="mt-4 ml-4">
-      <div class="">
-        <highlightjs language="sql" :code="state.isFormatted ? format(query.sql) : query.sql" />
-      </div>
-      <div class="mt-3 text-stone-400 text-sm">
-        <div v-text="query.source[0]"></div>
-        <div v-if="query.source.length > 1" v-for="s in query.source.slice(1)" class="pl-4" v-text="'↳ ' + s"></div>
-      </div>
-    </div>
-  </div>
-</template>

data/client/src/components/ui/Foldable.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { reactive } from "vue"
-import { ChevronDownIcon } from "@heroicons/vue/16/solid"
-
-const props = withDefaults(
-  defineProps<{
-    label: string
-    isOpen?: boolean
-  }>(),
-  {
-    isOpen: false,
-  }
-)
-
-const state = reactive({
-  isOpen: props.isOpen,
-})
-</script>
-
-<template>
-  <div>
-    <div>
-      <button class="flex items-center space-x-1" @click="state.isOpen = !state.isOpen">
-        <chevron-down-icon
-          class="size-4"
-          :class="{
-            '-rotate-90': !state.isOpen,
-          }"
-        />
-        <span class="font-medium">{{ props.label }}</span>
-      </button>
-    </div>
-
-    <div v-if="state.isOpen">
-      <slot />
-    </div>
-  </div>
-</template>
-<style scoped></style>

data/client/src/components/ui/KeyValueTable.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  keyLabel?: string
-  valueLabel?: string
-}>()
-</script>
-
-<template>
-  <table class="break-all w-full border-separate border-spacing-1">
-    <tr v-if="props.keyLabel || props.valueLabel">
-      <th v-text="props.keyLabel" class="bg-amber-50 w-40 px-3 py-1"></th>
-      <th v-text="props.valueLabel" class="bg-amber-50 px-3 py-1"></th>
-    </tr>
-    <slot />
-  </table>
-</template>

data/client/src/components/ui/Row.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  label?: string
-}>()
-</script>
-
-<template>
-  <tr>
-    <td v-text="props.label" class="w-40 font-medium bg-stone-50 px-3 py-1"></td>
-    <td class="px-3 py-1"><slot /></td>
-  </tr>
-</template>
-
-<style scoped></style>