Fix: Render SQL query debug info

lib/hawat/blueprints/design_bs3/templates/_layout_events_search.html

@@ -474,23 +474,7 @@ ssh, udp
             </div>
             {%- endif %}
             {%- if sqlqueries is defined %}
-            <div class="alert alert-info">
-                <h3 class="panel-title">
-                    <a role="button" data-toggle="collapse" href="#query_list" aria-expanded="false" aria-controls="query_list">
-                        {{ get_icon('role-admin') }} {{ _('SQL queries') }} {{ get_icon('expand') }}
-                    </a>
-                </h3>
-                <div id="query_list" class="collapse">
-                    <hr>
-                    <ul class="list-group">
-                    {%- for q in sqlqueries %}
-                        <li class="list-group-item">
-                            <strong>{{ loop.index }}:</strong> <code>{{ q }}</code>
-                        </li>
-                    {%- endfor %}
-                    </ul>
-                </div>
-            </div>
+                {{ macros_site.render_sql_queries(sqlqueries) }}
             {%- endif %}
             {{ macros_site.render_timemarks(time_marks) }}
         {%- endif %}

lib/hawat/blueprints/design_bs3/templates/_macros_chart.html

@@ -1033,6 +1033,10 @@
                     {%- set _stats_var_name = None %}
                 {%- endif %}
 
+                {%- if not _stats_var_name and permission_can('power') %}
+                    {{ macros_site.render_sql_queries([], key=chsection[0]) }}
+                {%- endif %}
+
                 <!-- Tab panel - BEGIN ---------------------------------------->
                 {%- if 'timeline' in statistics %}
                     {{  render_chart_timeline_dict(

lib/hawat/blueprints/design_bs3/templates/_macros_site.html

@@ -396,6 +396,26 @@
                     </div> <!-- /.well -->
 {%- endmacro %}
 
+{%- macro render_sql_queries(query_list, key = '') %}
+                    <div class="alert alert-info">
+                        <h3 class="panel-title">
+                            <a role="button" data-toggle="collapse" href="#query_list{%- if key %}_{{ key }}{%- endif %}" aria-expanded="false" aria-controls="query_list{%- if key %}_{{ key }}{%- endif %}">
+                                {{ get_icon('role-admin') }} {{ _('SQL queries') }} {{ get_icon('expand') }}
+                            </a>
+                        </h3>
+                        <div id="query_list{%- if key %}_{{ key }}{%- endif %}" class="collapse">
+                            <hr>
+                            <ol class="list-group list-group-numbered">
+                            {%- for q in query_list %}
+                                <li class="list-group-item">
+                                    <code>{{ q }}</code>
+                                </li>
+                            {%- endfor %}
+                            </ol>
+                        </div>
+                    </div>
+{%- endmacro %}
+
 {%- macro render_raw_item_view(item) %}
                     <div class="well">
                         <h3 class="panel-title">{{ get_icon('debug') }} {{ _('Raw item') }}</h3>

lib/hawat/static/js/hawat-jquery.js

@@ -241,9 +241,32 @@ $(function() {
         }
         event.target.promise = $.getJSON(event.target.getAttribute('data-api-url'), function(data) {
             event.target.search_result_data = data;
+
+            let dict_key = event.target.getAttribute('data-dict-key');
+            render_sql_queries(data, dict_key);
+
             let stats = data['statistics'];
-            rendering_functions[event.target.getAttribute('data-dict-key')].forEach(rendering_func => rendering_func(stats));
+            rendering_functions[dict_key].forEach(rendering_func => rendering_func(stats));
             $(event.target.getAttribute('href') + ' div.chart-toolbar').removeClass('invisible');
         });
     });
 });
+
+// =========================== Helper functions ===========================
+
+function render_sql_queries(data, dict_key ) {
+    if (data.sqlqueries != undefined && $(`#query_list_${dict_key}`).length) {
+        let query_list = $(`#query_list_${dict_key} > ol.list-group`);
+        query_list.html(''); // clear the elements inside
+        query_list.append(
+            data.sqlqueries.map(query => `
+                <li class="list-group-item">
+                    <code>${query}</code>
+                </li>
+            `)
+        );
+    } else if ($(`#query_list_${dict_key}`).length) {
+        console.log("'sqlqueries' not present, skipping");
+        $(`#query_list_${dict_key}`).parent().addClass('hidden');
+    }
+}