Update rendering of Explain table

joomla · Sep 8, 2020 · 8c36884 · 8c36884
1 parent f88bd43
commit 8c36884
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 47 deletions.
diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js
@@ -124,30 +124,50 @@
                         })
                     }
 
-                    var tableExplain
+                    var tableExplain;
+
+                    function showTableExplain() {
+                        if (tableExplain) {
+                            tableExplain.show();
+                            return;
+                        }
+
+                        // Render table
+                        tableExplain = $('<table>').addClass(csscls('callstack')).appendTo(li);
+                        tableExplain.append('<tr><th>' + stmt.explain_col.join('</th><th>') + '</th></tr>');
+
+                        var i, entry, cols;
+                        for (i in stmt.explain) {
+                            cols  = []
+                            entry = stmt.explain[i];
+
+                            stmt.explain_col.forEach(function (key){
+                                cols.push(entry[key]);
+                            });
+
+                            tableExplain.append('<tr><td>' + cols.join('</td><td>') + '</td></tr>');
+                        }
+
+                        tableExplain.show();
+                    }
 
                     if (stmt.explain && !$.isEmptyObject(stmt.explain)) {
                         var btnExplain = $('<span title="Explain" />')
-                            .text('Explain')
-                            .addClass(csscls('eye'))
-                            .css('cursor', 'pointer')
-                            .on('click', function () {
-                                if (tableExplain.is(':visible')) {
-                                    tableExplain.hide()
-                                    btnExplain.addClass(csscls('eye'))
-                                    btnExplain.removeClass(csscls('eye-dash'))
-                                } else {
-                                    tableExplain.show()
-                                    btnExplain.addClass(csscls('eye-dash'))
-                                    btnExplain.removeClass(csscls('eye'))
-                                }
-                            })
-                            .appendTo(li)
-
-                        tableExplain = $('<table><thead>'
-                            + '<tr><th colspan="10">Explain</th></tr>'
-                            + '<tr class="heading-row"><th>Id</th><th>Select Type</th><th>Table</th><th>Type</th><th>Possible Keys</th><th>Key</th><th>Key Len</th><th>Ref</th><th>Rows</th><th>Extra</th></tr>'
-                            + '</thead></table>').addClass(csscls('callstack'))
+                          .text('Explain')
+                          .addClass(csscls('eye'))
+                          .css('cursor', 'pointer')
+                          .on('click', function () {
+                              if (tableExplain && tableExplain.is(':visible')) {
+                                  tableExplain.hide()
+                                  btnExplain.addClass(csscls('eye'))
+                                  btnExplain.removeClass(csscls('eye-dash'))
+                              } else {
+                                  showTableExplain();
+                                  btnExplain.addClass(csscls('eye-dash'))
+                                  btnExplain.removeClass(csscls('eye'))
+                              }
+                          })
+                          .appendTo(li)
                     }
 
                     var tableStack
@@ -214,31 +234,6 @@
                         }
                     }
 
-                    if (tableExplain) {
-                        tableExplain.appendTo(li)
-                        for (i in stmt.explain) {
-                            var entry = stmt.explain[i];
-
-                            if (entry.error) {
-                                tableExplain.find('.heading-row').hide();
-                                tableExplain.append('<tr><td colspan="10">' + entry.error + '</td></tr>');
-                            }
-                            else if (entry['QUERY PLAN']) {
-                                // PostgreSQL
-                                tableExplain.find('.heading-row').hide();
-                                tableExplain.append('<tr><td>QUERY PLAN </td><td colspan="9">' + entry['QUERY PLAN'] + '</td></tr>');
-                            } else {
-                                // MySQL
-                                tableExplain.append('<tr>'
-                                  + '<td>' + entry.id + '</td><td>' + entry.select_type + '</td><td>' + entry.table + '</td>'
-                                  + '<td>' + entry.type + '</td><td>' + entry.possible_keys + '</td><td>' + entry.key + '</td>'
-                                  + '<td>' + entry.key_len + '</td><td>' + entry.ref + '</td><td>' + entry.rows + '</td>'
-                                  + '<td>' + entry.Extra + '</td>'
-                                  + '</tr>');
-                            }
-                        }
-                    }
-
                     li.attr('dupeindex', 'dupe-0')
                 }
             })

diff --git a/plugins/system/debug/src/DataCollector/QueryCollector.php b/plugins/system/debug/src/DataCollector/QueryCollector.php
@@ -233,13 +233,23 @@ private function getStatements(): array
 				}
 			}
 
+			$explain        = $this->explains[$id] ?? [];
+			$explainColumns = [];
+
+			// Extract column labels for Explain table
+			if ($explain)
+			{
+				$explainColumns = array_keys(reset($explain));
+			}
+
 			$statements[] = [
 				'sql'          => $item,
 				'duration_str' => $this->getDataFormatter()->formatDuration($queryTime),
 				'memory_str'   => $this->getDataFormatter()->formatBytes($queryMemory),
 				'caller'       => $callerLocation,
 				'callstack'    => $trace,
-				'explain'      => $this->explains[$id] ?? [],
+				'explain'      => $explain,
+				'explain_col'  => $explainColumns,
 				'profile'      => $this->profiles[$id] ?? [],
 			];
 		}