Add "nodes" page

This commit is contained in:
Tony Garnock-Jones 2012-05-01 09:25:59 -04:00
parent fa5b53001f
commit ae86a3e40c
8 changed files with 124 additions and 0 deletions

1
TODO
View File

@ -1,2 +1,3 @@
- ui_relay.ml: deal with Message.Subscribe and .Unsubscribe as well as .Post in api_tap_sink
- web: add cache control information to served responses
- add node bound / node unbound event handlers in nodes.js to update the list as it changes

View File

@ -20,6 +20,7 @@
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a class="brand" href="http://github.com/tonyg/ocamlmsg/">Ocamlmsg</a><div class="nav-collapse"><ul class="nav">
<li class="btn-danger"><a href="about.html">About</a></li>
<li><a href="/">Main</a></li>
<li><a href="/nodes.html">Nodes</a></li>
</ul></div>
</div></div></div>
<div class="container"><body>

View File

@ -1,3 +1,4 @@
<navitems>
<navitem id="main" href="/">Main</navitem>
<navitem id="nodes" href="/nodes.html">Nodes</navitem>
</navitems>

View File

@ -0,0 +1,29 @@
<page>
<title>Ocamlmsg</title>
<section>nodes</section>
<load>nodes.js</load>
<script>$(document).ready(nodes_main);</script>
<body>
<h2>Nodes</h2>
<div class="row truncate-overflow">
<div class="span3">
<ul id="nodes0">
</ul>
</div>
<div class="span3">
<ul id="nodes1">
</ul>
</div>
<div class="span3">
<ul id="nodes2">
</ul>
</div>
<div class="span3">
<ul id="nodes3">
</ul>
</div>
</div>
</body>
</page>

View File

@ -20,6 +20,7 @@
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a class="brand" href="http://github.com/tonyg/ocamlmsg/">Ocamlmsg</a><div class="nav-collapse"><ul class="nav">
<li class="btn-danger"><a href="about.html">About</a></li>
<li class="active"><a href="/">Main</a></li>
<li><a href="/nodes.html">Nodes</a></li>
</ul></div>
</div></div></div>
<div class="container"><body>

49
web/nodes.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Ocamlmsg</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<style>
body {
padding-top: 60px; /* to make the container go all the way to the bottom of the topbar */
}
</style>
<link rel="stylesheet" type="text/css" href="ui.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript" src="jquery.stream-1.2.js"></script><script type="text/javascript" src="ocamlmsg.js"></script><script type="text/javascript" src="nodes.js"></script><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]
-->
</head>
<body>
<div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a class="brand" href="http://github.com/tonyg/ocamlmsg/">Ocamlmsg</a><div class="nav-collapse"><ul class="nav">
<li class="btn-danger"><a href="about.html">About</a></li>
<li><a href="/">Main</a></li>
<li class="active"><a href="/nodes.html">Nodes</a></li>
</ul></div>
</div></div></div>
<div class="container"><body>
<h2>Nodes</h2>
<div class="row truncate-overflow">
<div class="span3">
<ul id="nodes0">
</ul>
</div>
<div class="span3">
<ul id="nodes1">
</ul>
</div>
<div class="span3">
<ul id="nodes2">
</ul>
</div>
<div class="span3">
<ul id="nodes3">
</ul>
</div>
</div>
</body></div>
<script>$(document).ready(nodes_main);</script><script src="bootstrap/js/bootstrap-transition.js"></script><script src="bootstrap/js/bootstrap-alert.js"></script><script src="bootstrap/js/bootstrap-modal.js"></script><script src="bootstrap/js/bootstrap-dropdown.js"></script><script src="bootstrap/js/bootstrap-scrollspy.js"></script><script src="bootstrap/js/bootstrap-tab.js"></script><script src="bootstrap/js/bootstrap-tooltip.js"></script><script src="bootstrap/js/bootstrap-popover.js"></script><script src="bootstrap/js/bootstrap-button.js"></script><script src="bootstrap/js/bootstrap-collapse.js"></script><script src="bootstrap/js/bootstrap-carousel.js"></script><script src="bootstrap/js/bootstrap-typeahead.js"></script>
</body>
</html>

37
web/nodes.js Normal file
View File

@ -0,0 +1,37 @@
function refresh_node_list() {
$.getJSON("/_/nodes", function (data) {
var names = data.nodes;
names.push("bar");
names.push("foo");
names.push("qux");
names.sort();
var column_count = 4; /* change to match nodes.xml */
var per_column = Math.ceil(names.length / column_count);
var column_index, column;
function set_column(i) {
column_index = i;
column = $("#nodes" + i);
column.html("");
}
set_column(0);
for (var i = 0; i < names.length; i++) {
if (i >= (column_index + 1) * per_column) {
set_column(column_index + 1);
}
var link = $("<a></a>");
link.text(names[i]);
link.attr("href", "/_/node/" + names[i]);
var li = $("<li></li>");
li.append(link);
column.append(li);
}
});
}
function nodes_main() {
Ocamlmsg.install_tap({
open: function (event, stream) {
refresh_node_list();
}
});
}

View File

@ -0,0 +1,5 @@
.truncate-overflow div ul li a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}