Add "nodes" page
This commit is contained in:
parent
fa5b53001f
commit
ae86a3e40c
1
TODO
1
TODO
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
<navitems>
|
||||
<navitem id="main" href="/">Main</navitem>
|
||||
<navitem id="nodes" href="/nodes.html">Nodes</navitem>
|
||||
</navitems>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
.truncate-overflow div ul li a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
Loading…
Reference in New Issue