Skip to content

Commit 3f8b5fc

Browse files
davidbendavidben
committed
The start of the manage page.
It can query tables. No error-handling yet.
1 parent ee191fb commit 3f8b5fc

File tree

5 files changed

+173
-2
lines changed

5 files changed

+173
-2
lines changed

‎_includes/navbar.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<ul class="nav">
1313
<li {{page.home}}><a href="/">Home</a></li>
1414
<li {{page.signup}}><a href="/signup">Sign up</a></li>
15+
<li {{page.manage}}><a href="/manage">Manage databases</a></li>
1516
<li {{page.contact}}><a href="/contact">Contact</a></li>
1617
<li {{page.about}}><a href="/about">About</a></li>
1718
<li {{page.contribute}}><a href="/contribute">Contribute</a></li>
@@ -27,7 +28,6 @@
2728
<li><a href="/modal/password.html" data-toggle="modal" data-target="#sql-modal" data-backdrop="static">Change password</a></li>
2829
<li class="divider"></li>
2930
<li class="nav-header">Databases</li>
30-
<li><a href="#manage">Manage</a></li>
3131
<li><a href="https://sql.scripts.mit.edu/phpMyAdmin/">Edit data</a></li>
3232
<li class="divider"></li>
3333
<li class="nav-header">Session</li>

‎_layouts/default.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
</div><!-- /.container -->
1212
{% include footer.html %}
1313
<!-- Placed at the end of the document so the pages load faster -->
14-
{% include common-scripts.html %}
14+
{% include common-scripts.html %}{{ page.extra_scripts }}
1515
</body>
1616
</html>

‎assets/css/base.css

+12
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@ body {
77
color: #5a5a5a;
88
}
99

10+
code.noborder {
11+
color: inherit;
12+
border: none;
13+
background-color: inherit;
14+
}
15+
16+
.database-field, .database-field input {
17+
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
18+
}
19+
20+
[hidden] { display: none !important; visibility: hidden !important; }
21+
1022
/* CUSTOMIZE THE NAVBAR
1123
-------------------------------------------------- */
1224

‎assets/webathena-sql/manage.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
function showConfirmDialog(database) {
2+
var deferred = Q.defer();
3+
4+
var dialog = $("#drop-confirm-template").clone();
5+
dialog.removeAttr("id").removeAttr("hidden");
6+
7+
dialog.find(".field-database").text(database);
8+
9+
dialog.find(".part-cancel-button").click(function () {
10+
deferred.resolve(false);
11+
dialog.modal("hide");
12+
});
13+
dialog.find(".part-confirm-button").click(function () {
14+
deferred.resolve(true);
15+
dialog.modal("hide");
16+
});
17+
18+
dialog.on("hidden", function () {
19+
// In case somehow bootstrap decided to dismiss it for us...
20+
if (Q.isPending(deferred.promise))
21+
deferred.resolve(false);
22+
dialog.remove();
23+
});
24+
25+
$("body").append(dialog);
26+
dialog.modal("show");
27+
28+
return deferred.promise;
29+
}
30+
31+
function formatSize(bytes) {
32+
var suffixes = ["bytes", "kB", "MB",
33+
// Eh, why not? :-D
34+
"GB", "TB", "PB", "EB", "ZB", "YB"];
35+
var index = 0;
36+
while (index + 1 < suffixes.length && bytes >= 1024) {
37+
index++;
38+
bytes /= 1024;
39+
}
40+
var bytesStr = bytes.toFixed(index ? 2 : 0);
41+
return bytesStr + "\xA0" + suffixes[index];
42+
}
43+
44+
function createRow(name, size) {
45+
var tr = $("<tr>");
46+
tr.append($("<td>").append(
47+
$("<code>").addClass("noborder").text(name)));
48+
tr.append($("<td>").text(formatSize(size)));
49+
var button = $("<button>").attr("type", "button")
50+
.addClass("btn btn-danger btn-small")
51+
.text("Drop");
52+
button.click(function() {
53+
showConfirmDialog(name).then(function(result) {
54+
if (!result)
55+
return;
56+
alert("Yeah, not implementing you yet.");
57+
}).done();
58+
});
59+
tr.append($("<td>").append(button));
60+
return tr;
61+
}
62+
63+
function loadInfo() {
64+
var locker = getCurrentLocker();
65+
$(".field-locker-name").text(locker);
66+
sqlCommand(["database", "list", locker]).then(function(data) {
67+
var totalSize = 0;
68+
69+
var tbody = $(".field-database-tbody");
70+
tbody.empty();
71+
for (var i = 0; i < data.databases.length; i++) {
72+
totalSize += data.databases[i].size;
73+
tbody.append(createRow(data.databases[i].name,
74+
data.databases[i].size));
75+
}
76+
77+
$(".field-used-size").text(formatSize(totalSize));
78+
$(".field-quota").text(formatSize(data.quota));
79+
$(".field-used-percent").text(((totalSize / data.quota) * 100).toFixed(1));
80+
}, function(err) {
81+
// FIXME!
82+
alert(err);
83+
});
84+
}
85+
86+
loadInfo();

‎manage/index.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
layout: default
3+
title: Manage databases
4+
manage: class="active"
5+
extra_scripts: <script src="/assets/webathena-sql/manage.js"></script>
6+
---
7+
<div class="page-header">
8+
<h1>Manage databases <small>At your service</small></h1>
9+
</div>
10+
11+
<div hidden id="drop-confirm-template" class="modal hide fade">
12+
<div class="modal-header">
13+
<button type="button" class="part-cancel-button close" aria-hidden="true">&times;</button>
14+
<h3>Are you sure?</h3>
15+
</div>
16+
<div class="modal-body">
17+
<p>This will permanently delete all data
18+
from <code class="field-database">davidben+db</code>. There is no
19+
going back. Did you take
20+
a <a href="https://scripts.mit.edu/faq/10"
21+
target="_blank">backup</a>?</p>
22+
</div>
23+
<div class="modal-footer">
24+
<a href="#" class="part-cancel-button btn">Cancel</a>
25+
<a href="#" class="part-confirm-button btn btn-danger">Drop database</a>
26+
</div>
27+
</div>
28+
29+
<div id="manage-alert-placeholder">
30+
</div>
31+
32+
<p>
33+
Using <span class="field-used-size"></span> out
34+
of <span class="field-quota"></span>
35+
(<span class="field-used-percent"></span>%).
36+
</p>
37+
<table class="table table-striped table-hover table-bordered">
38+
<thead>
39+
<tr>
40+
<th class="span12">Database</th>
41+
<th>Size</th>
42+
<th></th>
43+
</tr>
44+
</thead>
45+
<tbody class="field-database-tbody">
46+
<!--
47+
TODO(davidben): Make this a template instead of transcribing to
48+
jQuery in manage.js:createRow. Need a dummy table to contain it.
49+
50+
<tr>
51+
<td><code class="noborder">davidben+mangoes</code></td>
52+
<td>45.31MB</td>
53+
<td><button type="button" class="btn btn-danger btn-small">Drop</button></td>
54+
</tr>
55+
<tr>
56+
<td><code class="noborder">davidben+monkeys</code></td>
57+
<td>9.31TB</td>
58+
<td><button type="button" class="btn btn-danger btn-small">Drop</button></td>
59+
</tr>
60+
-->
61+
</tbody>
62+
</table>
63+
<form class="form-inline">
64+
<fieldset>
65+
<legend>New database</legend>
66+
<div class="input-prepend database-field">
67+
<span class="add-on"><span class="field-locker-name">davidben</span>+</span>
68+
<input class="field-database-name" type="text" placeholder="database-name">
69+
</div>
70+
<button type="submit" class="btn btn-primary">Create</button>
71+
</fieldset>
72+
</form>
73+
<p><em>Limit of 10 databases.</em></p>

0 commit comments

Comments
 (0)