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
|
- 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
|
- 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">
|
<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="btn-danger"><a href="about.html">About</a></li>
|
||||||
<li><a href="/">Main</a></li>
|
<li><a href="/">Main</a></li>
|
||||||
|
<li><a href="/nodes.html">Nodes</a></li>
|
||||||
</ul></div>
|
</ul></div>
|
||||||
</div></div></div>
|
</div></div></div>
|
||||||
<div class="container"><body>
|
<div class="container"><body>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
<navitems>
|
<navitems>
|
||||||
<navitem id="main" href="/">Main</navitem>
|
<navitem id="main" href="/">Main</navitem>
|
||||||
|
<navitem id="nodes" href="/nodes.html">Nodes</navitem>
|
||||||
</navitems>
|
</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">
|
<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="btn-danger"><a href="about.html">About</a></li>
|
||||||
<li class="active"><a href="/">Main</a></li>
|
<li class="active"><a href="/">Main</a></li>
|
||||||
|
<li><a href="/nodes.html">Nodes</a></li>
|
||||||
</ul></div>
|
</ul></div>
|
||||||
</div></div></div>
|
</div></div></div>
|
||||||
<div class="container"><body>
|
<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