Move table information pane into sidebar

api.go

@@ -97,7 +97,7 @@ func API_GetTableInfo(c *gin.Context) {
 		return
 	}
 
-	c.JSON(200, res)
+	c.JSON(200, res.Format()[0])
 }
 
 func API_History(c *gin.Context) {

static/css/app.css

@@ -66,19 +66,18 @@
 #sidebar {
   position: fixed;
   width: 250px;
-  left: 0;
+  left: 0px;
-  top: 0;
+  top: 0px;
-  bottom: 0;
+  bottom: 0px;
   background: #31373d;
   font-size: 13px;
-  overflow: scroll;
 }
 
 #sidebar .wrapper {
   height: 100%;
 }
 
-#sidebar .wrapper div {
+#sidebar .wrapper div.title {
   line-height: 33px;
   height: 33px;
   padding: 0px 8px;
@@ -86,6 +85,42 @@
   color: #fff;
 }
 
+#sidebar div.tables-list {
+  position: absolute;
+  width: 250px;
+  top: 0px;
+  left: 0px;
+  bottom: 130px;
+  overflow: scroll;
+}
+
+#sidebar div.table-information {
+  border-top: 1px solid #272c30;
+  background: #272c30;
+  position: absolute;
+  width: 250px;
+  left: 0px;
+  bottom: 0px;
+  height: 130px;
+  overflow: scroll;
+}
+
+#sidebar div.table-information ul {
+  font-size: 12px;
+  display: none;
+}
+
+#sidebar div.table-information ul li {
+  line-height: 24px;
+  height: 24px;
+  cursor: default;
+  color: #637D94 !important;
+}
+
+#sidebar div.table-information ul li span {
+  color: #95a7b7;
+}
+
 #sidebar ul {
   margin: 0px;
   padding: 0px;

static/index.html

@@ -17,7 +17,6 @@
     <ul>
       <li id="table_content">Content</li>
       <li id="table_structure">Structure</li>
-      <li id="table_info">Info</li>
       <li id="table_indexes">Indexes</li>
       <li id="table_query" class="selected">SQL Query</li>
       <li id="table_history">History</li>
@@ -25,8 +24,19 @@
   </div>
   <div id="sidebar">
     <div class="wrapper">
-      <div>Database Tables</div>
+      <div class="tables-list">
-      <ul id="tables"></ul>
+        <div class="title">Database Tables</div>
+        <ul id="tables"></ul>
+      </div>
+      <div class="table-information">
+        <div class="title">Table Information</div>
+        <ul>
+          <li>Size: <span id="table_total_size"></span></li>
+          <li>Data size: <span id="table_data_size"></span></li>
+          <li>Index size: <span id="table_index_size"></span></li>
+          <li>Rows: <span id="table_rows_count"></span></li>
+        </ul>
+      </div>
     </div>
   </div>
   <div id="body">

static/js/app.js

@@ -131,10 +131,12 @@ function showTableInfo() {
   }
 
   apiCall("get", "/tables/" + name + "/info", {}, function(data) {
-    buildTable(data);
+    $(".table-information ul").show();
-    setCurrentTab("table_info");
+    $("#table_total_size").text(data.total_size);
-    $("#input").hide();
+    $("#table_data_size").text(data.data_size);
-    $("#output").addClass("full");
+    $("#table_index_size").text(data.index_size);
+    $("#table_rows_count").text(data.rows_count);
+    $("#table_encoding").text("Unknown");
   });
 }
 
@@ -260,7 +262,6 @@ $(document).ready(function() {
 
   $("#table_content").on("click",   function() { showTableContent();   });
   $("#table_structure").on("click", function() { showTableStructure(); });
-  $("#table_info").on("click",      function() { showTableInfo();      });
   $("#table_indexes").on("click",   function() { showTableIndexes();   });
   $("#table_history").on("click",   function() { showQueryHistory();   });
 
@@ -291,6 +292,7 @@ $(document).ready(function() {
     $("#tables li.selected").removeClass("selected");
     $(this).addClass("selected");
     showTableContent();
+    showTableInfo();
   });
 
   loadTables();