Move table information pane into sidebar

This commit is contained in:
Dan Sosedoff 2014-10-26 17:16:35 -05:00
parent 4b87c3532f
commit e7329952f3
4 changed files with 61 additions and 14 deletions

2
api.go
View File

@ -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) {

View File

@ -66,19 +66,18 @@
#sidebar {
position: fixed;
width: 250px;
left: 0;
top: 0;
bottom: 0;
left: 0px;
top: 0px;
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;

View File

@ -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>
<ul id="tables"></ul>
<div class="tables-list">
<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">

View File

@ -131,10 +131,12 @@ function showTableInfo() {
}
apiCall("get", "/tables/" + name + "/info", {}, function(data) {
buildTable(data);
setCurrentTab("table_info");
$("#input").hide();
$("#output").addClass("full");
$(".table-information ul").show();
$("#table_total_size").text(data.total_size);
$("#table_data_size").text(data.data_size);
$("#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();