Add a new table to display connection information

static/index.html

@@ -20,6 +20,7 @@
       <li id="table_indexes">Indexes</li>
       <li id="table_query" class="selected">SQL Query</li>
       <li id="table_history">History</li>
+      <li id="table_connection">Connection</li>
     </ul>
   </div>
   <div id="sidebar">

static/js/app.js

@@ -182,6 +182,26 @@ function showQueryPanel() {
   $("#output").removeClass("full");
 }
 
+function showConnectionPanel() {
+  setCurrentTab("table_connection");
+
+  apiCall("get", "/info", {}, function(data) {
+    var rows = [];
+
+    for(key in data) {
+      rows.push([key, data[key]]);
+    }
+
+    buildTable({
+      columns: ["attribute", "value"],
+      rows: rows
+    });
+
+    $("#input").hide();
+    $("#output").addClass("full");
+  });
+}
+
 function runQuery() {
   setCurrentTab("table_query");
 
@@ -289,11 +309,12 @@ $(document).ready(function() {
   initEditor();
   addShortcutTooltips();
 
-  $("#table_content").on("click",   function() { showTableContent();   });
+  $("#table_content").on("click",    function() { showTableContent();    });
-  $("#table_structure").on("click", function() { showTableStructure(); });
+  $("#table_structure").on("click",  function() { showTableStructure();  });
-  $("#table_indexes").on("click",   function() { showTableIndexes();   });
+  $("#table_indexes").on("click",    function() { showTableIndexes();    });
-  $("#table_history").on("click",   function() { showQueryHistory();   });
+  $("#table_history").on("click",    function() { showQueryHistory();    });
-  $("#table_query").on("click",     function() { showQueryPanel();     });
+  $("#table_query").on("click",      function() { showQueryPanel();      });
+  $("#table_connection").on("click", function() { showConnectionPanel(); });
 
   $("#run").on("click", function() {
     runQuery();