@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/queries/index.stx

@@ -0,0 +1,335 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Queries')
+<div class="min-h-screen">
+  <header class="flex sticky top-0 z-10 flex-wrap gap-6 items-center justify-between px-4 py-4 sm:px-6 lg:px-8 bg-white dark:bg-neutral-900 shadow-sm">
+    <div>
+      <h1 class="font-semibold leading-7 text-gray-900 text-lg dark:text-white">Queries Dashboard</h1>
+      <p class="mt-1 leading-6 text-gray-500 text-sm dark:text-neutral-400">Monitor and analyze database query performance</p>
+    </div>
+    <div class="flex gap-3 items-center">
+      <div class="inline-flex rounded-md shadow-sm">
+        <button type="button" @click="setTimeRange('hour')" class="inline-flex relative items-center px-3 py-2 font-medium text-sm rounded-l-md ring-1 ring-gray-300 ring-inset dark:ring-neutral-700 {{ timeRange() === 'hour' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 dark:bg-neutral-800 dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Hour</button>
+        <button type="button" @click="setTimeRange('day')" class="inline-flex relative items-center -ml-px px-3 py-2 font-medium text-sm ring-1 ring-gray-300 ring-inset dark:ring-neutral-700 {{ timeRange() === 'day' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 dark:bg-neutral-800 dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Day</button>
+        <button type="button" @click="setTimeRange('week')" class="inline-flex relative items-center -ml-px px-3 py-2 font-medium text-sm rounded-r-md ring-1 ring-gray-300 ring-inset dark:ring-neutral-700 {{ timeRange() === 'week' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 dark:bg-neutral-800 dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Week</button>
+      </div>
+      <div>
+        <select id="connection" name="connection" x-model="selectedConnection" class="block pl-3 pr-10 py-2 w-full text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border-gray-300 rounded-md dark:border-neutral-700 focus:border-blue-600 focus:outline-none focus:ring-blue-600">
+          <option value="all">All connections</option>
+          <option value="mysql">MySQL</option>
+          <option value="postgres">PostgreSQL</option>
+          <option value="sqlite">SQLite</option>
+          <option value="mongodb">MongoDB</option>
+        </select>
+      </div>
+      <div>
+        <select id="type" name="type" x-model="selectedType" class="block pl-3 pr-10 py-2 w-full text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border-gray-300 rounded-md dark:border-neutral-700 focus:border-blue-600 focus:outline-none focus:ring-blue-600">
+          <option value="all">All types</option>
+          <option value="SELECT">SELECT</option>
+          <option value="INSERT">INSERT</option>
+          <option value="UPDATE">UPDATE</option>
+          <option value="DELETE">DELETE</option>
+          <option value="OTHER">OTHER</option>
+        </select>
+      </div>
+    </div>
+  </header>
+
+  <main class="px-4 py-8 sm:px-6 lg:px-8">
+    <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-6">
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Total Queries</dt>
+        <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ statsTotal() }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">SELECT Queries</dt>
+        <dd class="mt-1 font-semibold text-3xl text-blue-600 tracking-tight dark:text-blue-400">{{ statsSelect() }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">INSERT Queries</dt>
+        <dd class="mt-1 font-semibold text-3xl text-green-600 tracking-tight dark:text-green-400">{{ statsInsert() }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">UPDATE Queries</dt>
+        <dd class="mt-1 font-semibold text-3xl text-amber-600 tracking-tight dark:text-amber-400">{{ statsUpdate() }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">DELETE Queries</dt>
+        <dd class="mt-1 font-semibold text-3xl text-red-600 tracking-tight dark:text-red-400">{{ statsDelete() }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Slow Queries</dt>
+        <dd class="mt-1 font-semibold text-3xl text-yellow-600 tracking-tight dark:text-yellow-400">{{ statsSlow() }}</dd>
+      </div>
+    </div>
+
+    <div class="grid gap-5 grid-cols-1 lg:grid-cols-2 mt-8">
+      <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="p-6">
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Query Volume</h3>
+          <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Number of queries by type over time</p>
+          <div class="relative mt-6 h-80">
+            <div :show="isLoading" class="flex absolute inset-0 items-center justify-center bg-gray-100/50 dark:bg-neutral-800/50">
+              <div class="h-8 w-8 text-blue-600 dark:text-blue-400 animate-spin i-hugeicons-loading-01"></div>
+            </div>
+            <canvas id="queries_volume_chart"></canvas>
+          </div>
+        </div>
+      </div>
+      <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="p-6">
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Query Duration</h3>
+          <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Average query execution time over time</p>
+          <div class="relative mt-6 h-80">
+            <div :show="isLoading" class="flex absolute inset-0 items-center justify-center bg-gray-100/50 dark:bg-neutral-800/50">
+              <div class="h-8 w-8 text-blue-600 dark:text-blue-400 animate-spin i-hugeicons-loading-01"></div>
+            </div>
+            <canvas id="queries_duration_chart"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-8">
+      <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Recent Queries</h3>
+      <div class="overflow-hidden mt-6 ring-1 ring-black ring-opacity-5 rounded-lg shadow">
+        <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+          <thead class="bg-gray-50 dark:bg-neutral-800">
+            <tr>
+              <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-white">Query</th>
+              <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Connection</th>
+              <th scope="col" class="hidden sm:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Duration</th>
+              <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Model</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Status</th>
+              <th scope="col" class="hidden sm:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Executed At</th>
+              <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">View</span></th>
+            </tr>
+          </thead>
+          <tbody class="bg-white dark:bg-neutral-900 divide-gray-200 divide-y dark:divide-neutral-700">
+            <template :for="query in filteredQueries">
+              <tr>
+                <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm">
+                  <div class="flex gap-2 items-center mb-1">
+                    <span class="{{ queryTypeBadgeClass(query.query) }} inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md">{{ getQueryType(query.query) }}</span>
+                    <div class="font-medium font-mono text-gray-900 text-xs dark:text-white">{{ formatQuery(query.query) }}</div>
+                  </div>
+                  <div class="hidden xl:block text-gray-500 dark:text-neutral-400">
+                    <template :for="tag in query.tags">
+                      <span class="inline-flex items-center mr-1 px-2 py-1 font-medium text-xs rounded-md">{{ tag }}</span>
+                    </template>
+                  </div>
+                </td>
+                <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ query.connection }}</td>
+                <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400 {{ query.duration > 10 ? 'text-yellow-600 dark:text-yellow-400' : '' }}">{{ formatDuration(query.duration) }}</td>
+                <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ query.model }}</td>
+                <td class="px-3 py-4 text-sm">
+                  <span class="{{ getQueryStatusColor(query.status) }} inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md">{{ query.status }}</span>
+                </td>
+                <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ query.executed_at }}</td>
+                <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm">
+                  <StxLink to="/queries/{{ query.id }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">View<span class="sr-only">, {{ query.id }}</span></StxLink>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</div>
+
+<style>
+.sql-highlight { color: #f8f8f2; }
+.sql-highlight .keyword { color: #ff79c6; }
+.sql-highlight .function { color: #50fa7b; }
+.sql-highlight .number { color: #bd93f9; }
+.sql-highlight .string { color: #f1fa8c; }
+.sql-highlight .comment { color: #6272a4; }
+
+.font-mono {
+  font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 0.85em;
+  line-height: 1.5;
+}
+</style>
+
+<script client>
+
+interface QueryRecord {
+  id: string
+  query: string
+  duration: number
+  normalized_query: string
+  connection: string
+  status: 'completed' | 'failed' | 'slow'
+  executed_at: string
+  bindings?: unknown[]
+  model?: string
+  method?: string
+  file?: string
+  line?: number
+  memory_usage?: number
+  rows_affected?: number
+  tags?: string[]
+}
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const stats = state({ total: 1286, select: 954, insert: 152, update: 98, delete: 82, slow: 24 })
+
+const recentQueries = state<QueryRecord[]>([
+  { id: '1', query: 'SELECT * FROM users WHERE email = ? LIMIT 1', normalized_query: 'SELECT * FROM users WHERE email = ? LIMIT ?', duration: 3.2, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:16:32', bindings: ['user@example.com', 1], model: 'User', method: 'findByEmail', file: 'app/Models/User.php', line: 45, memory_usage: 2.4, rows_affected: 1, tags: ['auth'] },
+  { id: '2', query: 'SELECT p.*, c.name as category_name FROM posts p JOIN categories c ON p.category_id = c.id WHERE p.published_at IS NOT NULL ORDER BY p.published_at DESC LIMIT 10', normalized_query: 'SELECT p.*, c.name as category_name FROM posts p JOIN categories c ON p.category_id = c.id WHERE p.published_at IS NOT NULL ORDER BY p.published_at DESC LIMIT ?', duration: 45.7, connection: 'mysql', status: 'slow', executed_at: '2024-03-14 10:15:30', bindings: [10], model: 'Post', method: 'getRecentPublishedWithCategory', file: 'app/Models/Post.php', line: 78, memory_usage: 5.8, rows_affected: 10, tags: ['content', 'frontend'] },
+  { id: '3', query: 'INSERT INTO user_logs (user_id, action, ip_address, created_at) VALUES (?, ?, ?, ?)', normalized_query: 'INSERT INTO user_logs (user_id, action, ip_address, created_at) VALUES (?, ?, ?, ?)', duration: 2.1, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:14:55', bindings: [42, 'login', '192.168.1.1', '2024-03-14 10:14:55'], model: 'UserLog', method: 'logAction', file: 'app/Services/LogService.php', line: 28, memory_usage: 1.8, rows_affected: 1, tags: ['logging'] },
+  { id: '4', query: 'UPDATE products SET stock = stock - 1 WHERE id = ? AND stock > 0', normalized_query: 'UPDATE products SET stock = stock - ? WHERE id = ? AND stock > ?', duration: 4.5, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:12:18', bindings: [1, 156, 0], model: 'Product', method: 'decrementStock', file: 'app/Models/Product.php', line: 112, memory_usage: 2.1, rows_affected: 1, tags: ['inventory', 'order'] },
+  { id: '5', query: 'DELETE FROM carts WHERE user_id = ? AND updated_at < ?', normalized_query: 'DELETE FROM carts WHERE user_id = ? AND updated_at < ?', duration: 2.8, connection: 'mysql', status: 'completed', executed_at: '2024-03-14 10:10:05', bindings: [78, '2024-03-13 10:10:05'], model: 'Cart', method: 'clearOldCarts', file: 'app/Jobs/ClearOldCarts.php', line: 35, memory_usage: 1.9, rows_affected: 3, tags: ['cleanup', 'scheduled'] },
+])
+
+const timeRange = state('hour')
+const selectedConnection = state('all')
+const selectedType = state('all')
+const isLoading = state(false)
+
+let chartHandles: Array<{ destroy: () => void }> = []
+
+const queryStatusColors: Record<string, string> = {
+  completed: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 ring-green-600/20',
+  slow: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/50 ring-yellow-600/20',
+  failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 ring-red-600/20',
+}
+
+const queryTypeBadges: Record<string, string> = {
+  SELECT: 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 ring-blue-700/10 dark:ring-blue-400/30',
+  INSERT: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 ring-green-700/10 dark:ring-green-400/30',
+  UPDATE: 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 ring-amber-700/10 dark:ring-amber-400/30',
+  DELETE: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 ring-red-700/10 dark:ring-red-400/30',
+  OTHER: 'bg-gray-50 dark:bg-neutral-900/20 text-gray-700 dark:text-neutral-300 ring-gray-700/10 dark:ring-neutral-400/30',
+}
+
+function statsTotal(): number { return stats().total }
+function statsSelect(): number { return stats().select }
+function statsInsert(): number { return stats().insert }
+function statsUpdate(): number { return stats().update }
+function statsDelete(): number { return stats().delete }
+function statsSlow(): number { return stats().slow }
+
+function getQueryStatusColor(status: string): string {
+  return queryStatusColors[status] || 'text-gray-700 dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/50 ring-gray-600/20'
+}
+
+function getQueryType(query: string): string {
+  const upper = query.trim().toUpperCase()
+  if (upper.startsWith('SELECT'))
+    return 'SELECT'
+  if (upper.startsWith('INSERT'))
+    return 'INSERT'
+  if (upper.startsWith('UPDATE'))
+    return 'UPDATE'
+  if (upper.startsWith('DELETE'))
+    return 'DELETE'
+  return 'OTHER'
+}
+
+function queryTypeBadgeClass(query: string): string {
+  return queryTypeBadges[getQueryType(query)] || queryTypeBadges.OTHER as string
+}
+
+function formatQuery(q: string): string {
+  return q.length > 100 ? `${q.substring(0, 100)}...` : q
+}
+
+function formatDuration(d: number): string {
+  return `${d.toFixed(2)} ms`
+}
+
+function setTimeRange(range: string): void {
+  timeRange.set(range)
+}
+
+const filteredQueries = derived(() => {
+  const list = recentQueries()
+  const conn = selectedConnection()
+  const type = selectedType()
+  return list.filter((q) => {
+    if (conn !== 'all' && q.connection !== conn)
+      return false
+    if (type !== 'all' && getQueryType(q.query) !== type)
+      return false
+    return true
+  })
+})
+
+function getPerformanceData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [
+      { label: 'SELECT', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 50) + 30), borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true },
+      { label: 'INSERT', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 15) + 5), borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true },
+      { label: 'UPDATE', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 12) + 3), borderColor: 'rgb(245, 158, 11)', backgroundColor: 'rgba(245, 158, 11, 0.1)', fill: true },
+      { label: 'DELETE', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 8) + 2), borderColor: 'rgb(239, 68, 68)', backgroundColor: 'rgba(239, 68, 68, 0.1)', fill: true },
+    ],
+  }
+}
+
+function getDurationData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [{
+      label: 'Average Duration (ms)',
+      data: Array.from({ length: 24 }, () => Math.random() * 25 + 5),
+      borderColor: 'rgb(124, 58, 237)',
+      backgroundColor: 'rgba(124, 58, 237, 0.1)',
+      fill: true,
+    }],
+  }
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: { beginAtZero: true, grid: { color: 'rgba(200, 200, 200, 0.1)' }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+    x: { grid: { display: false }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+  },
+  plugins: {
+    legend: { display: true, position: 'top', align: 'end', labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 } },
+    tooltip: { mode: 'index', intersect: false },
+  },
+  interaction: { mode: 'index', intersect: false },
+}
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const volume = useChart({
+    Chart: Ctor,
+    id: 'queries_volume_chart',
+    type: 'line',
+    data: getPerformanceData(),
+    options: chartOptions,
+  })
+
+  const duration = useChart({
+    Chart: Ctor,
+    id: 'queries_duration_chart',
+    type: 'line',
+    data: getDurationData(),
+    options: chartOptions,
+  })
+
+  chartHandles = [volume.instance, duration.instance].filter((c): c is ChartLike => c !== null)
+})
+
+onDestroy(() => {
+  chartHandles.forEach(c => c.destroy())
+  chartHandles = []
+})
+</script>
+
+@endsection