Diagnose slow database queries from one focused view
Build a query-performance workbench with Tailwind CSS. Include database and time-range filters, p95 latency and throughput metrics, a ranked query table with calls, rows, duration, and trend, plus a detail panel showing the selected SQL, execution-plan steps, and a recommendation. Add JavaScript that selects rows, updates the detail panel from data, and filters to slow queries only.
.
Build a query-performance workbench with Tailwind CSS. Include database and time-range filters, p95 latency and throughput metrics, a ranked query table with calls, rows, duration, and trend, plus a detail panel showing the selected SQL, execution-plan steps, and a recommendation. Add JavaScript that selects rows, updates the detail panel from data, and filters to slow queries only.<div class="min-h-screen bg-neutral-100 p-5"><section class="mx-auto max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm"><header class="flex flex-col gap-4 border-b border-neutral-200 px-5 py-4 sm:flex-row sm:items-center"><div class="flex-1"><h1 class="font-semibold text-neutral-900">Query performance</h1><p class="text-xs text-neutral-400">production-primary · sampled continuously</p></div><select class="rounded-lg border border-neutral-200 px-3 py-2 text-xs"><option>Postgres production</option><option>Postgres analytics</option></select><select class="rounded-lg border border-neutral-200 px-3 py-2 text-xs"><option>Last hour</option><option>Last 24 hours</option></select><label class="flex items-center gap-2 text-xs text-neutral-500"><input id="slowOnly" type="checkbox" /> Slow only</label></header><div class="grid border-b border-neutral-200 sm:grid-cols-3"><div class="p-5"><p class="text-xs text-neutral-400">p95 latency</p><strong class="mt-1 block text-2xl text-neutral-900">184 ms</strong><span class="text-xs text-red-600">↑ 23% from baseline</span></div><div class="border-t p-5 sm:border-l sm:border-t-0"><p class="text-xs text-neutral-400">Queries / second</p><strong class="mt-1 block text-2xl text-neutral-900">2,841</strong><span class="text-xs text-green-600">Healthy throughput</span></div><div class="border-t p-5 sm:border-l sm:border-t-0"><p class="text-xs text-neutral-400">Time in database</p><strong class="mt-1 block text-2xl text-neutral-900">31.6%</strong><span class="text-xs text-neutral-400">of request duration</span></div></div><div class="grid lg:grid-cols-[1.15fr_0.85fr]"><div class="overflow-x-auto border-b lg:border-b-0 lg:border-r"><table class="w-full text-left text-xs"><thead class="bg-neutral-50 text-neutral-400"><tr><th class="px-4 py-3 font-medium">Query</th><th class="px-3 py-3 font-medium">Calls</th><th class="px-3 py-3 font-medium">p95</th><th class="px-3 py-3 font-medium">Trend</th></tr></thead><tbody id="queryRows"><tr data-query="orders" data-slow="true" class="cursor-pointer border-t border-neutral-100 bg-amber-50"><td class="max-w-xs truncate px-4 py-3 font-mono">SELECT orders JOIN customers</td><td class="px-3 py-3">18.4k</td><td class="px-3 py-3 text-red-600">812 ms</td><td class="px-3 py-3">↑ 41%</td></tr><tr data-query="events" data-slow="false" class="cursor-pointer border-t border-neutral-100"><td class="max-w-xs truncate px-4 py-3 font-mono">INSERT INTO events</td><td class="px-3 py-3">92.1k</td><td class="px-3 py-3">24 ms</td><td class="px-3 py-3">→ 2%</td></tr><tr data-query="accounts" data-slow="true" class="cursor-pointer border-t border-neutral-100"><td class="max-w-xs truncate px-4 py-3 font-mono">UPDATE accounts SET balance</td><td class="px-3 py-3">7.8k</td><td class="px-3 py-3 text-amber-600">436 ms</td><td class="px-3 py-3">↑ 18%</td></tr></tbody></table></div><aside class="p-5"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Selected query</p><pre id="querySql" class="mt-3 overflow-x-auto rounded-xl bg-neutral-950 p-4 text-xs leading-5 text-cyan-200"></pre><div id="queryPlan" class="mt-4 space-y-2"></div><div class="mt-4 rounded-xl bg-violet-50 p-4"><p class="text-xs font-semibold text-violet-800">Recommendation</p><p id="queryAdvice" class="mt-1 text-xs leading-5 text-violet-700"></p></div></aside></div></section></div>Build a query-performance workbench with Tailwind CSS. Include database and time-range filters, p95 latency and throughput metrics, a ranked query table with calls, rows, duration, and trend, plus a detail panel showing the selected SQL, execution-plan steps, and a recommendation. Add JavaScript that selects rows, updates the detail panel from data, and filters to slow queries only.