Various improvements and changes

amureki · amureki · commit 7ac123a90aa5 · 2025-12-18T23:42:31.000+01:00
- drop thresholds
- drop console.log queries
- add clickable duplicate queries panel
- move out html/css into a template file
diff --git a/README.md b/README.md
@@ -37,25 +37,14 @@ DEVBAR_SHOW_BAR = True
 
 # Add DevBar-* response headers (default: False)
 DEVBAR_SHOW_HEADERS = True
-
-# Enable console logging for duplicate queries (default: True)
-DEVBAR_ENABLE_CONSOLE = True
-
-# Performance thresholds for warning/critical levels (defaults shown)
-DEVBAR_THRESHOLDS = {
-    "time_warning": 500,    # ms
-    "time_critical": 1500,  # ms
-    "count_warning": 20,    # queries
-    "count_critical": 50,   # queries
-}
 ```
 
 ## Response Headers
 
 When `DEVBAR_SHOW_HEADERS = True`, performance metrics are added as HTTP response headers. This is useful for:
 
 - **API endpoints** where the HTML overlay can't be displayed
-- **Automated testing** to assert performance thresholds (e.g., fail CI if query count exceeds a limit)
+- **Automated testing** to assert performance metrics (e.g., fail CI if query count exceeds a limit)
 - **Monitoring tools** that can capture and aggregate header values
 
 Headers included:
diff --git a/src/django_devbar/conf.py b/src/django_devbar/conf.py
@@ -7,13 +7,6 @@
     "top-left": "top:0;left:0",
 }
 
-DEFAULT_THRESHOLDS = {
-    "time_warning": 500,
-    "time_critical": 1500,
-    "count_warning": 20,
-    "count_critical": 50,
-}
-
 
 def get_position():
     key = getattr(settings, "DEVBAR_POSITION", "bottom-right")
@@ -26,14 +19,3 @@ def get_show_bar():
 
 def get_show_headers():
     return getattr(settings, "DEVBAR_SHOW_HEADERS", False)
-
-
-def get_enable_console():
-    return getattr(settings, "DEVBAR_ENABLE_CONSOLE", True)
-
-
-def get_thresholds():
-    user_thresholds = getattr(settings, "DEVBAR_THRESHOLDS", {})
-    final = DEFAULT_THRESHOLDS.copy()
-    final.update(user_thresholds)
-    return final
diff --git a/src/django_devbar/middleware.py b/src/django_devbar/middleware.py
@@ -1,61 +1,25 @@
-import json
 import re
 from contextlib import ExitStack
+from pathlib import Path
 from time import perf_counter
 
 from django.db import connections
+from django.template import Context, Engine
 
 from . import tracker
 from .conf import (
     get_position,
     get_show_bar,
     get_show_headers,
-    get_thresholds,
-    get_enable_console,
 )
 
-STYLE_BLOCK = """<style>
-#django-devbar {
-    position: fixed; %s; z-index: 999999999;
-    display: flex; align-items: center; gap: 5px;
-    font-family: -apple-system, system-ui, sans-serif;
-    font-size: 11px; font-weight: 500;
-    padding: 4px 8px; margin: 8px; border-radius: 4px;
-    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2);
-    transition: all 0.2s ease;
-    cursor: default;
-    line-height: 1.3;
-    background: rgba(20, 20, 20, 0.92);
-    color: #f5f5f5;
-}
-#django-devbar.level-warn { border-left: 3px solid #f59e0b; }
-#django-devbar.level-crit { border-left: 3px solid #dc2626; }
-#django-devbar span { opacity: 0.7; }
-#django-devbar strong { opacity: 1; font-weight: 600; }
-#django-devbar .duplicate-badge { color: #f59e0b; font-weight: 600; }
-@media (max-width: 640px) { #django-devbar { display: none; } }
-</style>"""
-
-BAR_TEMPLATE = """<div id="django-devbar" class="level-%s">
-<span>db</span> <strong>%.0fms</strong> <span>·</span>
-<span>app</span> <strong>%.0fms</strong> <span>·</span>
-<span>queries</span> <strong>%d</strong>%s
-</div>"""
-
-SCRIPT_TEMPLATE = """<script>
-(function() {
-    const stats = %s;
-    if (stats.duplicates && stats.duplicates.length > 0) {
-        console.groupCollapsed(`⚠️ Django DevBar: Duplicate Queries Detected (${stats.duplicates.length})`);
-        console.table(stats.duplicates.map(d => ({SQL: d.sql, Parameters: d.params, Duration_ms: d.duration})));
-        console.groupEnd();
-    }
-})();
-</script>"""
-
 BODY_CLOSE_RE = re.compile(rb"</body\s*>", re.IGNORECASE)
 
+_template_engine = Engine(
+    dirs=[Path(__file__).parent / "templates"],
+    autoescape=True,
+)
+
 
 class DevBarMiddleware:
     def __init__(self, get_response):
@@ -81,8 +45,7 @@ def __call__(self, request):
         stats["python_time"] = python_time
         stats["total_time"] = total_time
 
-        thresholds = get_thresholds()
-        level = self._determine_level(stats, total_time, thresholds)
+        level = "warn" if stats["has_duplicates"] else "ok"
 
         if get_show_headers():
             self._add_headers(response, stats)
@@ -92,20 +55,6 @@ def __call__(self, request):
 
         return response
 
-    def _determine_level(self, stats, total_time, thresholds):
-        if (
-            total_time > thresholds["time_critical"]
-            or stats["count"] > thresholds["count_critical"]
-        ):
-            return "crit"
-        if (
-            stats["has_duplicates"]
-            or total_time > thresholds["time_warning"]
-            or stats["count"] > thresholds["count_warning"]
-        ):
-            return "warn"
-        return "ok"
-
     def _add_headers(self, response, stats):
         response["DevBar-Query-Count"] = str(stats["count"])
         response["DevBar-DB-Time"] = f"{stats['duration']:.0f}ms"
@@ -129,28 +78,30 @@ def _inject_devbar(self, response, stats, level):
         if not matches:
             return
 
-        dup_marker = (
-            ' <strong class="duplicate-badge">(d)</strong>'
-            if stats["has_duplicates"]
-            else ""
+        duplicates_html = self._build_duplicates_html(stats.get("duplicate_queries", []))
+
+        template = _template_engine.get_template("django_devbar/devbar.html")
+        html = template.render(
+            Context(
+                {
+                    "position": get_position(),
+                    "level": level,
+                    "db_time": stats["duration"],
+                    "app_time": stats["python_time"],
+                    "query_count": stats["count"],
+                    "duplicates_html": duplicates_html,
+                }
+            )
         )
 
-        css = STYLE_BLOCK % get_position()
-        html = BAR_TEMPLATE % (
-            level,
-            stats["duration"],
-            stats["python_time"],
-            stats["count"],
-            dup_marker,
-        )
-
-        script = ""
-        if get_enable_console() and stats.get("duplicate_queries"):
-            console_data = {"duplicates": stats["duplicate_queries"]}
-            script = SCRIPT_TEMPLATE % json.dumps(console_data)
-
-        payload = (css + html + script).encode(response.charset or "utf-8")
+        payload = html.encode(response.charset or "utf-8")
 
         idx = matches[-1].start()
         response.content = content[:idx] + payload + content[idx:]
         response["Content-Length"] = str(len(response.content))
+
+    def _build_duplicates_html(self, duplicates):
+        if not duplicates:
+            return ""
+        template = _template_engine.get_template("django_devbar/duplicates.html")
+        return template.render(Context({"duplicates": duplicates}))
diff --git a/src/django_devbar/templates/django_devbar/devbar.html b/src/django_devbar/templates/django_devbar/devbar.html
@@ -0,0 +1,92 @@
+<style>
+#django-devbar {
+    position: fixed; {{ position }}; z-index: 999999999;
+    display: flex; align-items: center; gap: 5px;
+    font-family: -apple-system, system-ui, sans-serif;
+    font-size: 11px; font-weight: 500;
+    padding: 4px 8px; margin: 8px; border-radius: 4px;
+    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2);
+    transition: all 0.2s ease;
+    cursor: default;
+    line-height: 1.3;
+    background: rgba(20, 20, 20, 0.92);
+    color: #f5f5f5;
+}
+#django-devbar.level-warn { border-left: 3px solid #f59e0b; }
+#django-devbar span { opacity: 0.7; }
+#django-devbar strong { opacity: 1; font-weight: 600; }
+#django-devbar details { display: inline; position: relative; }
+#django-devbar summary {
+    all: revert;
+    color: #f59e0b; font-weight: 600; cursor: pointer; list-style: none;
+}
+#django-devbar summary::-webkit-details-marker { display: none; }
+#django-devbar details[open] > .dup-list {
+    position: absolute; bottom: 100%; right: -8px; margin-bottom: 8px;
+    background: rgba(20, 20, 20, 0.92); border-radius: 4px; padding: 6px;
+    width: min(500px, 90vw); max-height: 200px; overflow-y: auto; overflow-x: hidden;
+    box-sizing: border-box;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2);
+}
+#django-devbar .dup-list details {
+    display: block;
+    margin: 0 0 6px 0;
+    font-size: 11px;
+    color: #f5f5f5;
+}
+#django-devbar .dup-list details:last-child { margin-bottom: 0; }
+#django-devbar .dup-list summary {
+    all: revert;
+    cursor: pointer;
+    list-style: none;
+    padding: 6px 8px;
+    background: rgba(251, 191, 36, 0.1);
+    border-radius: 3px;
+    border-left: 2px solid #fbbf24;
+    transition: background 0.15s ease;
+}
+#django-devbar .dup-list summary:hover {
+    background: rgba(251, 191, 36, 0.2);
+}
+#django-devbar .dup-list summary code {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 420px;
+    vertical-align: bottom;
+}
+#django-devbar .dup-list summary::before {
+    content: '▶ ';
+    display: inline-block;
+    transition: transform 0.15s ease;
+    color: #fbbf24;
+    font-size: 8px;
+    margin-right: 6px;
+}
+#django-devbar .dup-list details[open] > summary::before {
+    transform: rotate(90deg);
+}
+#django-devbar .dup-list code {
+    all: revert;
+    color: #fbbf24; font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+    overflow-wrap: break-word;
+}
+#django-devbar .dup-list details[open] > code {
+    display: block;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+    margin-top: 6px;
+    white-space: pre-wrap;
+    line-height: 1.5;
+    font-size: 10px;
+}
+@media (max-width: 640px) { #django-devbar { display: none; } }
+</style>
+<div id="django-devbar" class="level-{{ level }}">
+<span>db</span> <strong>{{ db_time|floatformat:0 }}ms</strong> <span>·</span>
+<span>app</span> <strong>{{ app_time|floatformat:0 }}ms</strong> <span>·</span>
+<span>queries</span> <strong>{{ query_count }}</strong>{{ duplicates_html|safe }}
+</div>
diff --git a/src/django_devbar/templates/django_devbar/duplicates.html b/src/django_devbar/templates/django_devbar/duplicates.html
@@ -0,0 +1 @@
+{% if duplicates %}<details><summary>({{ duplicates|length }}d)</summary><div class="dup-list">{% for dup in duplicates %}<details><summary><code>{{ dup.sql }}</code></summary><code>{{ dup.sql }}</code></details>{% endfor %}</div></details>{% endif %}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+{% if duplicates %}<details><summary>({{ duplicates\|length }}d)</summary><div class="dup-list">{% for dup in duplicates %}<details><summary><code>{{ dup.sql }}</code></summary><code>{{ dup.sql }}</code></details>{% endfor %}</div></details>{% endif %}`