*/
/*******************************************************************/
/* top */
-body {
+html {
margin: 2px;
- background-color: darkslategray;
- background-image: url(content-background-car-wide.png);
- background-position: center;
- background-size: cover;
+ background: darkslategray url(background-iot.bzh.jpeg) center/cover;
color: lightsteelblue;
font-family: "Lucida Console", Monaco, monospace;
+ min-height: 100%;
}
/*******************************************************************/
/* head */
#logo {
- background: url(iot-bzh-logo-small.png) center/contain no-repeat;
+ background: url(iot-bzh-logo-small.png) center/50% no-repeat;
height: 60px;
width: 200px;
}
border-radius: 0px 50px;
}
-#connect {
- float: right;
- margin: 20px;
-}
-
/*******************************************************************/
/* main area */
height: 10;
background-image: url(cross.png);
background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
}
/*******************************************************************/
}
.separator {
- margin: 15px 100px;
+ margin: 25px 100px;
padding: 0px;
height: 2px;
- background-color: lightsteelblue;
+ background-color: #ee3;
}
.traceevent.opened {
background-color: rgba(0,0,0,0.6);
}
-/*
-.traceevent.request, .trace-box.request { background: #ffd: }
-.traceevent.daemon, .trace-box.daemon { background: #fdf; }
-.traceevent.service, .trace-box.service { background: #ddf; }
-.traceevent.event, .trace-box.event { background: #dfd; }
-*/
.traceevent.request, .trace-box.request { color: lightsteelblue; }
-.traceevent.daemon, .trace-box.daemon { color: #66f; }
+.traceevent.daemon, .trace-box.daemon { color: #5af; }
.traceevent.service, .trace-box.service { color: #0f0; }
-.traceevent.event, .trace-box.event { color: #f0d; }
+.traceevent.event, .trace-box.event { color: #f52; }
.traceevent.closed {
max-height: 16px;
}
+.traceevent .close {
+ height: 16px;
+ margin: -1px 0px 0px 0px;
+ padding: 1px;
+ background-color: grey;
+}
+
.traceevent .time {
height: 16px;
- margin: -2px 8px 2px -2px;
+ margin: -1px 0px 0px 8px;
padding: 1px 3px;
- background: black;
- color: white;
- font-weight: bolder;
+ background-color: grey;
+ color: black;
}
.traceevent .tag {
+ margin-left: 10px;
font-weight: bolder;
}
.traceevent.closed:hover .content {
margin: 5px;
padding: 5px;
- border: solid 1px;
- border-radius: 0px 5px 5px 5px;
+ border: solid 4px;
+ border-radius: 0px 20px 20px 20px;
box-shadow: 10px 10px #dd8;
- background-color: rgba(0,0,0,0.8);
+ background-color: rgba(0,0,0,0.6);
}
.traceevent table.object tr td:nth-child(1) {
}
.traceevent table.object tr td:nth-child(2) {
-/*
- border: solid 1px black;
-*/
background-color: rgba(0,0,0,0.4);
padding: 0px 4px;
+ overflow: auto;
}
.traceevent table {
a:link { color: cyan; }
a:link:hover, a:active { color: white; }
-a:visited { color: lightsteelblue; }
+a:visited { color: lightgrey; }
/*******************************************************************/
/* json format */
<script type="text/javascript" src="AFB.js"></script>
<script type="text/javascript" src="monitor.js"></script>
-<body id="root" class="on" onload="init();">
+<body id="root" class="-flex-v on" onload="init();">
<div id="head" class="clearfix">
<div id="logo"></div>
<div id="connected">Not Connected</div>
<div id="title">Monitoring</div>
</div>
- <div id="work">
- <div id="params" class="clearfix">
- <div id="connect" class="x-button">connect</div>
- <div>host: <input type="text" id="param-host" size="50" value="localhost"></input></div>
- <div>port: <input type="text" id="param-port" size="10" value="1234"></input></div>
- <div>token: <input type="text" id="param-token" size="33" value="hello"></input></div>
- </div>
- <div id="main">
- <div class="fillfix"></div>
- <div id="controls">
+ <div id="work" class="-flex-fill -flex-h">
+ <div id="controls" class="-box-out">
+ <div class="-box-in">
<div id="all" class="api opened" data-api="*">
<div class="opclo"></div>
<div class="name">{ALL}</div>
<div id="apis">
</div>
</div>
- <div id="logmsg-box">
+ </div>
+ <div id="middle" class="-flex-v">
+ <div id="params" class="clearfix">
+ <div>host: <input type="text" id="param-host" size="50" value="localhost"></input></div>
+ <div>port: <input type="text" id="param-port" size="10" value="1234"></input></div>
+ <div>token: <input type="text" id="param-token" size="33" value="hello"></input></div>
+ </div>
+ <div class="-flex-fill -box-out">
+ <div id="trace-events" class="-box-in">
+ </div>
+ </div>
+ </div>
+
+ <div id="menu" class="-flex-v">
+ <div id="connect" class="x-button">Connect</div>
<div id="disconnect" class="x-button">Disconnect</div>
<div id="autoscroll" class="x-button">Stop scroll</div>
<div id="addsep" class="x-button">Add separator</div>
<div id="droptracevts" class="x-button">Clear traces</div>
- <div id="expert-pane" class="closed">
+ <div id="experts" class="x-button closed">
<div class="opclo"></div>
- <div class="expert">{EXPERT}</div>
- <div class="closedoff">
- <div id="stopmsgs" class="x-button">Stop logs</div>
- <div id="dropmsgs" class="x-button">Clear logs</div>
- <div id="logmsgs-inner-box">
- <div class="fillfix"></div>
- <div id="logmsgs"></div>
- </div>
+ {EXPERTS}
+ </div>
+ <div id="expert-pane" class="-flex-fill -flex-v">
+ <div id="stopmsgs" class="x-button">Stop logs</div>
+ <div id="dropmsgs" class="x-button">Clear logs</div>
+ <div class="-flex-fill -box-out">
+ <div id="logmsgs" class="-box-in"></div>
</div>
</div>
</div>
- <div id="trace-events">
- </div>
- </div>
</div>
<!-- template for APIS -->
function untrace_all() {
do_call("monitor/trace", {drop: true});
- for_all_nodes(null, ".trace-item input[type=radio]", function(n){n.checked = n.value == "no";});
}
-function disconnect() {
- untrace_all();
- apis = {};
- apis_node.innerHTML = "";
- root_node.className = "off";
+function disconnect(status) {
+ class_toggle(root_node, { on: "off" }, "off");
connected_node.innerHTML = "Connection Closed";
- connected_node.className = "ok";
- ws && ws.close();
- afb = null;
+ connected_node.className = status;
+ if (ws) {
+ untrace_all();
+ ws.onclose = ws.onabort = null;
+ ws.close();
+ }
ws = null;
+ if (afb)
+ at("param-token").value = afb.context.token;
+ afb = null;
}
-function connect(args) {
- drop_all_trace_events();
- drop_all_logmsgs();
- ws && ws.close();
- afb = new AFB(args);
- ws = new afb.ws(onopen, onabort);
+function on_disconnect() {
+ disconnect("ok");
}
-function on_connect(evt) {
- connect({
+function connect() {
+ ws && ws.close();
+ afb = new AFB({
host: at("param-host").value + ":" + at("param-port").value,
token: at("param-token").value
});
+ ws = new afb.ws(onopen, onabort);
+}
+
+function on_connect(evt) {
+ connect();
}
function init() {
for_all_nodes(root_node, ".opclo ~ :not(.closedoff)", function(n){n.onclick = on_toggle_opclo});
for_all_nodes(root_node, ".verbosity select", function(n){n.onchange = set_verbosity});
for_all_nodes(root_node, ".trace-item input", function(n){n.onchange = on_trace_change});
- at("disconnect").onclick = disconnect;
+ at("disconnect").onclick = on_disconnect;
at("connect").onclick = on_connect;
at("droptracevts").onclick = drop_all_trace_events;
at("dropmsgs").onclick = drop_all_logmsgs;
at("autoscroll").onclick = toggle_autoscroll;
start_autoscroll(true);
at("addsep").onclick = add_separator;
+ at("experts").onclick = toggle_experts;
+
+ at("param-host").value = document.location.hostname;
+ at("param-port").value = document.location.port;
+ var args = new URLSearchParams(document.location.search.substring(1));
+ at("param-token").value = args.get("x-afb-token") || args.get("token") || "hello";
+
+ document.onbeforeunload = on_disconnect;
connect();
}
}
function onopen() {
- root_node.className = "on";
+ class_toggle(root_node, { off: "on" }, "on");
connected_node.innerHTML = "Connected " + ws.url;
connected_node.className = "ok";
ws.onevent("*", gotevent);
ws.onclose = onabort;
+ untrace_all();
+ for_all_nodes(all_node, ".trace-box", update_trace_box);
do_call("monitor/get", {apis:true,verbosity:true}, on_got_apis, on_error_apis);
}
+
function onabort() {
- root_node.className = "off";
- connected_node.innerHTML = "Connection Closed";
- connected_node.className = "error";
+ disconnect("error");
}
function start_autoscroll(val) {
trace_events_node.append(x);
if (autoscroll)
x.scrollIntoView();
+ if (msgs) {
+ x = document.importNode(t_separator, true);
+ logmsgs_node.append(x);
+ if (autoscroll)
+ x.scrollIntoView();
+ }
}
function start_logmsgs(val) {
/* show all apis */
function on_got_apis(obj) {
inhibit = true;
+ var saved_apis = apis;
+ apis = {};
+ apis_node.innerHTML = "";
_.each(obj.response.apis, function(api_desc, api_name){
if (api_name == "monitor") return;
- var api = apis[api_name];
+ var api = saved_apis[api_name];
if (!api) {
+ /* create the node */
api = {
node: document.importNode(t_api, true),
verbs: {},
api.node.API = api;
api.node.dataset.api = api_name;
api.vnode = get(".verbs", api.node);
- apis[api_name] = api;
get(".name", api.node).textContent = api_name;
- get(".desc", api.node).textContent = api_desc.info.description || "";
- for_all_nodes(api.node, ".opclo", function(n){n.onclick = on_toggle_opclo});
- for_all_nodes(api.node, ".opclo ~ :not(.closedoff)", function(n){n.onclick = on_toggle_opclo});
- for_all_nodes(api.node, ".trace-item input", function(n){n.onchange = on_trace_change});
- apis_node.append(api.node);
- _.each(api_desc.paths, function(verb_desc, path_name){
- var verb_name = path_name.substring(1);
- var verb = api.verbs[verb_name];
- if (!verb) {
- verb = {
- node: document.importNode(t_verb, true),
- name: verb_name,
- api: api
- };
- verb.node.VERB = verb;
- verb.node.dataset.verb = verb_name;
- api.verbs[verb_name] = verb;
- get(".name", verb.node).textContent = verb_name;
- var g = verb_desc.get ||{};
- var r = g["responses"] || {};
- var t = r["200"] || {};
- var d = t.description || "";
- get(".desc", verb.node).textContent = d;
- if (show_perms) {
- var p = g["x-permissions"] || "";
- get(".perm", verb.node).textContent = p ? JSON.stringify(p, null, 1) : "";
- }
- api.vnode.append(verb.node);
- }
- });
var s = get(".verbosity select", api.node);
s.API = api;
s.onchange = set_verbosity;
+ for_all_nodes(api.node, ".opclo", function(n){n.onclick = on_toggle_opclo});
+ for_all_nodes(api.node, ".opclo ~ :not(.closedoff)", function(n){n.onclick = on_toggle_opclo});
+ for_all_nodes(api.node, ".trace-item input", function(n){n.onchange = on_trace_change});
+ } else {
+ /* reactivate the expected traces */
+ for_all_nodes(api.node, ".trace-box", update_trace_box);
}
+ apis[api_name] = api;
+ get(".desc", api.node).textContent = api_desc.info.description || "";
+ _.each(api_desc.paths, function(verb_desc, path_name){
+ var verb_name = path_name.substring(1);
+ var verb = api.verbs[verb_name];
+ if (!verb) {
+ verb = {
+ node: document.importNode(t_verb, true),
+ name: verb_name,
+ api: api
+ };
+ verb.node.VERB = verb;
+ verb.node.dataset.verb = verb_name;
+ api.verbs[verb_name] = verb;
+ get(".name", verb.node).textContent = verb_name;
+ var g = verb_desc.get ||{};
+ var r = g["responses"] || {};
+ var t = r["200"] || {};
+ var d = t.description || "";
+ get(".desc", verb.node).textContent = d;
+ if (show_perms) {
+ var p = g["x-permissions"] || "";
+ get(".perm", verb.node).textContent = p ? JSON.stringify(p, null, 1) : "";
+ }
+ api.vnode.append(verb.node);
+ }
+ });
+ apis_node.append(api.node);
});
inhibit = false;
on_got_verbosities(obj);
toggle_opened_closed(evt.target.parentElement);
}
-function on_trace_change(evt) {
- var obj = evt.target;
- var tra = obj.parentElement;
- while (tra && !tra.dataset.trace)
- tra = tra.parentElement;
- var api = tra;
+function toggle_experts(evt) {
+ toggle_opened_closed(evt.target);
+}
+
+function update_trace_box(node) {
+ set_trace_box(node, false);
+}
+
+function set_trace_box(node, clear) {
+ var api = node;
while (api && !api.dataset.api)
api = api.parentElement;
- var tag = api.dataset.api + "/" + tra.dataset.trace;
- if (tra) {
- var drop = false;
- for_all_nodes(tra, "input", function(n){
- if (n.checked) {
- n.checked = false;
- if (n != obj && n.value != "no")
- drop = true;
- }
- });
- if (drop)
- do_call("monitor/trace", {drop: {tag: tag}});
- obj.checked = true;
- if (obj.value != "no") {
- var spec = {tag: tag, name: "trace"};
- spec[tra.dataset.trace] = obj.value;
- if (api.dataset.api != "*")
- spec.api = api.dataset.api;
- do_call("monitor/trace", {add: spec});
- }
+ var tag = api.dataset.api + "/" + node.dataset.trace;
+ var value = false;
+ for_all_nodes(node, "input", function(n){ if (n.checked) value = n.value; });
+ if (clear)
+ do_call("monitor/trace", {drop: {tag: tag}});
+ if (value != "no") {
+ var spec = {tag: tag, name: "trace"};
+ spec[node.dataset.trace] = value;
+ if (api.dataset.api != "*")
+ spec.api = api.dataset.api;
+ do_call("monitor/trace", {add: spec});
}
}
+function on_trace_change(evt) {
+ var obj = evt.target;
+ var box = obj.parentElement;
+ while (box && !box.dataset.trace)
+ box = box.parentElement;
+ for_all_nodes(box, "input", function(n){n.checked = false;});
+ obj.checked = true;
+ set_trace_box(box, true);
+}
+
function makecontent(node, deep, val) {
if (--deep > 0) {
if (_.isObject(val)) {
return;
}
}
- node.innerHTML = obj2html(val);
+ node.innerHTML = '<pre>' + obj2html(val) + '</pre>';
}
function makearritem(tbl, deep, val) {
x.scrollIntoView();
}
-function toggle_opened_closed(node, defval) {
+function class_toggle(node, assoc, defval) {
var matched = false;
var cs = node.className.split(" ").map(
function(x){
- if (!matched) {
- switch(x) {
- case "closed": matched = true; return "opened";
- case "opened": matched = true; return "closed";
- }
+ if (!matched && (x in assoc)) {
+ matched = true;
+ return assoc[x];
}
- return x;
+ return x == defval ? "" : x;
}).join(" ");
- if (!matched)
- cs = cs + " " + (defval || "closed");
+ if (!matched && defval)
+ cs = cs + " " + defval;
node.className = cs;
}
+function toggle_opened_closed(node, defval) {
+ class_toggle(node, { closed: "opened", opened: "closed" }, defval);
+}
+
function on_toggle_traceevent(evt) {
if (getSelection() != "") return;
var node = evt.target;
Code Review / src / app-framework-binder.git / commitdiff
