[debug-toolbar] add sql panel

Closes #17219873

cubicweb/pyramid/debug_toolbar_templates/sql.dbtmako

+<table id="sql-table" class="table table-striped table-condensed">
+    <thead>
+        <tr>
+            <th class="table-col-index">#</th>
+            <th class="table-col-time">Time (ms)</th>
+            <th class="table-col-sql">SQL</th>
+            <th class="table-col-rollback">Rollback?</th>
+            <th class="table-col-from-rql">From RQL</th>
+            <th class="table-col-stack">Stack</th>
+        </tr>
+    </thead>
+    <tbody>
+        % for i, query in enumerate(sql_queries):
+            <tr>
+                <th class="table-col-index">${1 + i}</th>
+                <td class="table-col-time">${'%.2f' % query["time"]}</td>
+                <td class="table-col-sql">${highlight(query["sql"], "SQL") | n}<br>${highlight(query["args"], "python3") | n}</td>
+                <td class="table-col-rollback">${query["rollback"]}</td>
+                <td class="table-col-from-rql">
+                    % if query["from_rql_query"]:
+                        ${highlight(query["from_rql_query"]["rql"], "rql") | n}
+                    % else:
+                        <i>standalone query</i>
+                    % endif
+                </td>
+                <td class="table-col-stack">
+                    <button class="btn btn-default" id="sql-toggle-stack-${i}" onclick="javascript:toggle_sql_stack(${i})">show stack</a>
+                </td>
+            </tr>
+            <tr style="display: none" id="sql-stack-${i}">
+                <td colspan="6">
+                    <pre>${highlight(query["callstack"], "py3tb", linenos="inline") | n}</pre>
+                </td>
+            </tr>
+            <tr style="display: none"></tr> <!-- css hack because of previous hidden tr for -stripped -->
+        % endfor
+    </tbody>
+</table>
+
+<script type="text/javascript" charset="utf-stack">
+    function toggle_sql_stack(stack_id) {
+        var stack = document.getElementById("sql-stack-" + stack_id);
+        var button = document.getElementById("sql-toggle-stack-" + stack_id);
+
+        // stack is hidden, display it
+        if (stack.style.getPropertyValue("display") == "none") {
+            stack.style.setProperty("display", "table-row");
+            button.innerHTML = "hide stack"
+        } else {
+            stack.style.setProperty("display", "none");
+            button.innerHTML = "show stack"
+        }
+    }
+</script>
+
+<style>
+#sql-table {
+    table-layout: fixed;
+}
+
+#sql-table .table-col-index {
+    text-align: right;
+    width: 30px;
+}
+
+#sql-table .table-col-time {
+    white-space: nowrap;
+    width: 73px;
+    text-align: center;
+}
+
+#sql-table .table-col-rollback {
+    white-space: nowrap;
+    width: 73px;
+    text-align: center;
+}
+
+#sql-table .table-col-stack {
+    padding: 8px;
+    width: 110px;
+    text-align: center;
+}
+
+${generate_css() | n}
+
+.highlight > pre {
+    word-break: unset;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background-color: unset;
+}
+</style>

cubicweb/pyramid/debugtoolbar_panels.py

@@ -110,6 +110,62 @@ class RQLDebugPanel(DebugPanel):
         unsubscribe_to_debug_channel("sql", self.collect_sql_queries)
 
 
+class SQLDebugPanel(DebugPanel):
+    """
+    CubicWeb SQL debug panel
+    """
+
+    """
+    Excepted formats:
+    SQL: {
+        'rql_query_tracing_token': 'some_token',
+        'args': {dict with some args},
+        'rollback': False|True,
+        'time': time_in_float,
+        'sql':_sql_query_as_a_string,
+    }
+    """
+
+    name = 'SQL'
+    title = 'SQL queries'
+    nav_title = 'SQL'
+    nav_subtitle_style = 'progress-bar-info'
+
+    has_content = True
+    template = 'cubicweb.pyramid:debug_toolbar_templates/sql.dbtmako'
+
+    def __init__(self, request):
+        self.data = {
+            'rql_queries': [],
+            'sql_queries': [],
+            'highlight': highlight_html,
+            'generate_css': generate_css,
+        }
+        subscribe_to_debug_channel("rql", self.collect_rql_queries)
+        subscribe_to_debug_channel("sql", self.collect_sql_queries)
+
+    @property
+    def nav_subtitle(self):
+        return len(self.data['sql_queries'])
+
+    def collect_rql_queries(self, rql_query):
+        self.data["rql_queries"].append(rql_query)
+
+        # link sql queries to rql's one
+        for sql_query in self.data["sql_queries"]:
+            if sql_query["rql_query_tracing_token"] == rql_query["rql_query_tracing_token"]:
+                sql_query["from_rql_query"] = rql_query
+
+    def collect_sql_queries(self, sql_query):
+        sql_query["from_rql_query"] = None
+        self.data["sql_queries"].append(sql_query)
+
+    def process_response(self, response):
+        unsubscribe_to_debug_channel("rql", self.collect_rql_queries)
+        unsubscribe_to_debug_channel("sql", self.collect_sql_queries)
+
+
 def includeme(config):
     config.add_debugtoolbar_panel(CubicWebDebugPanel)
     config.add_debugtoolbar_panel(RQLDebugPanel)
+    config.add_debugtoolbar_panel(SQLDebugPanel)

cubicweb/server/sources/native.py

@@ -24,6 +24,7 @@ from os.path import basename
 import pickle
 import re
 import itertools
+import traceback
 import time
 import zipfile
 import logging
@@ -691,6 +692,7 @@ class NativeSQLSource(SQLAdapterMixIn, AbstractSource):
             "sql": query,
             "args": args,
             "rollback": False,
+            "callstack": "".join(traceback.format_stack()[:-1]),
             "rql_query_tracing_token": rql_query_tracing_token,
         }