summaryrefslogtreecommitdiffstats
path: root/test/monitoring/monitor.js
diff options
context:
space:
mode:
authorJosé Bollo <jose.bollo@iot.bzh>2017-08-22 09:21:43 +0200
committerJosé Bollo <jose.bollo@iot.bzh>2017-08-24 19:06:07 +0200
commit99f9504a15ff302c4aa6842ad2f5095263c23c3f (patch)
treedd15323afa61004bcde4537d3a46e316820ef884 /test/monitoring/monitor.js
parentd7936bbe45900b7bb315e0504672d242b7100af5 (diff)
monitor: Test page for monitoring
This is a test page for showing basic monitoring use. Signed-off-by: José Bollo <jose.bollo@iot.bzh>
Diffstat (limited to 'test/monitoring/monitor.js')
-rw-r--r--test/monitoring/monitor.js431
1 files changed, 431 insertions, 0 deletions
diff --git a/test/monitoring/monitor.js b/test/monitoring/monitor.js
new file mode 100644
index 00000000..c4f24a00
--- /dev/null
+++ b/test/monitoring/monitor.js
@@ -0,0 +1,431 @@
+
+var afb;
+var ws;
+
+var t_api;
+var t_verb;
+var t_logmsg;
+var t_traceevent;
+var t_verbosity;
+var t_trace;
+var apis = {};
+var events = [];
+var inhibit = false;
+var msgs = false;
+
+var root_node;
+var connected_node;
+var trace_events_node;
+var logmsgs_node;
+var apis_node;
+var all_node;
+
+/* flags */
+var show_perms = false;
+var show_monitor_events = false;
+
+_.templateSettings = { interpolate: /\{\{(.+?)\}\}/g };
+
+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";
+ connected_node.innerHTML = "Connection Closed";
+ connected_node.className = "ok";
+ ws && ws.close();
+ afb = null;
+ ws = 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_connect(evt) {
+ connect({
+ host: at("param-host").value + ":" + at("param-port").value,
+ token: at("param-token").value
+ });
+}
+
+function init() {
+ /* prepare the DOM templates */
+ t_api = at("t-api").content.firstElementChild;
+ t_verb = at("t-verb").content.firstElementChild;
+ t_logmsg = at("t-logmsg").content.firstElementChild;
+ t_traceevent = at("t-traceevent").content.firstElementChild;
+ t_verbosity = at("t-verbosity").content.firstElementChild;
+ t_trace = at("t-trace").content.firstElementChild;
+
+ root_node = at("root");
+ connected_node = at("connected");
+ trace_events_node = at("trace-events");
+ logmsgs_node = at("logmsgs");
+ apis_node = at("apis");
+ all_node = at("all");
+
+ plug(t_api, ".verbosity", t_verbosity);
+ plug(t_api, ".trace", t_trace);
+ plug(all_node, ".trace", t_trace);
+ plug(all_node, ".verbosity", t_verbosity);
+ plug(at("common"), ".verbosity", t_verbosity);
+ for_all_nodes(root_node, ".opclo", function(n){n.onclick = on_toggle_opclo});
+ 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("connect").onclick = on_connect;
+ at("droptracevts").onclick = drop_all_trace_events;
+ at("dropmsgs").onclick = drop_all_logmsgs;
+ at("stopmsgs").onclick = toggle_logmsgs;
+ start_logmsgs(false);
+ trace_events_node.onclick = on_toggle_traceevent;
+
+ connect();
+}
+
+function for_all_nodes(root, sel, fun) {
+ (root ? root : document).querySelectorAll(sel).forEach(fun);
+}
+
+function get(sel,x) {
+ if (!x)
+ x = document;
+ var r = x.querySelector(sel);
+ return r;
+}
+function at(id) { return document.getElementById(id); }
+
+function plug(target, sel, node) {
+ var x = get(sel, target);
+ var n = target.ownerDocument.importNode(node, true);
+ x.parentNode.insertBefore(n, x);
+ x.parentNode.removeChild(x);
+}
+
+function onopen() {
+ root_node.className = "on";
+ connected_node.innerHTML = "Connected " + ws.url;
+ connected_node.className = "ok";
+ ws.onevent("*", gotevent);
+ ws.onclose = onabort;
+ 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";
+}
+
+function start_logmsgs(val) {
+ at("stopmsgs").textContent = (msgs = val) ? "Stop logs" : "Get logs";
+}
+
+function toggle_logmsgs() {
+ start_logmsgs(!msgs);
+}
+
+function drop_all_logmsgs() {
+ logmsgs_node.innerHTML = "";
+}
+
+function drop_all_trace_events() {
+ trace_events_node.innerHTML = "";
+}
+
+function add_logmsg(tag, content, add) {
+ if (!msgs) return;
+ var x = document.importNode(t_logmsg, true);
+ get(".tag", x).textContent = tag;
+ get(".content", x).textContent = content;
+ get(".close", x).onclick = function(evt){x.remove();};
+ if (add)
+ x.className = x.className + " " + add;
+ logmsgs_node.prepend(x);
+}
+
+function add_error(tag, obj) {
+ add_logmsg(tag, JSON.stringify(obj, null, 1), "error");
+}
+
+function on_error_apis(obj) {
+ add_error("can't get apis", obj);
+}
+
+function do_call(api_verb, request, onsuccess, onerror) {
+ var call = api_verb + "(" + JSON.stringify(request, null, 1) + ")";
+ add_logmsg(call, "", "call");
+ ws.call(api_verb, request).then(
+ function(obj){
+ add_logmsg(call + " SUCCESS:", JSON.stringify(obj, null, 1), "retok");
+ if (onsuccess)
+ onsuccess(obj);
+ },
+ function(obj){
+ add_logmsg(call + " ERROR:", JSON.stringify(obj, null, 1), "reterr");
+ if (onerror)
+ onerror(obj);
+ });
+}
+
+/* show all verbosities */
+function on_got_verbosities(obj) {
+ inhibit = true;
+ _.each(obj.response.verbosity, function(verbosity, api_name){
+ if (api_name == "monitor") return;
+ var node = api_name ? apis[api_name].node : at("common");
+ if (node)
+ get(".verbosity option[value='"+verbosity+"']", node).selected = true;
+ });
+ inhibit = false;
+}
+
+function set_verbosity(evt) {
+ if (inhibit) return;
+ inhibit = true;
+ var obj = evt.target;
+ var req = {verbosity:{}};
+ var name = obj.API ? obj.API.name : obj === get(".select", all_node) ? "*" : "";
+ if (name != "*") {
+ req.verbosity[name] = obj.value;
+ } else {
+ req.verbosity = obj.value;
+ }
+ inhibit = false;
+ do_call("monitor/set", req);
+ do_call("monitor/get", {verbosity:true}, on_got_verbosities);
+}
+
+/* show all apis */
+function on_got_apis(obj) {
+ inhibit = true;
+ _.each(obj.response.apis, function(api_desc, api_name){
+ if (api_name == "monitor") return;
+ var api = apis[api_name];
+ if (!api) {
+ api = {
+ node: document.importNode(t_api, true),
+ verbs: {},
+ name: api_name
+ };
+ 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;
+ }
+ });
+ inhibit = false;
+ on_got_verbosities(obj);
+}
+
+function on_toggle_opclo(evt) {
+ 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;
+ 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});
+ }
+ }
+}
+
+function makecontent(node, deep, val) {
+ if (--deep > 0) {
+ if (_.isObject(val)) {
+ node.append(makeobj(val, deep));
+ return;
+ }
+ if (_.isArray(val)) {
+ node.append(makearr(val, deep));
+ return;
+ }
+ }
+ node.innerHTML = obj2html(val);
+}
+
+function makearritem(tbl, deep, val) {
+ var tr = document.createElement("tr");
+ var td = document.createElement("td");
+ tr.append(td);
+ tbl.append(tr);
+ makecontent(td, deep, val);
+}
+
+function makearr(arr, deep) {
+ var node = document.createElement("table");
+ node.className = "array";
+ _.each(arr, function(v) { makearritem(node, deep, v);});
+ return node;
+}
+
+function makeobjitem(tbl, deep, key, val) {
+ var tr = document.createElement("tr");
+ var td1 = document.createElement("td");
+ var td2 = document.createElement("td");
+ tr.className = key;
+ tr.append(td1);
+ td1.textContent = key;
+ tr.append(td2);
+ tbl.append(tr);
+ makecontent(td2, deep, val);
+}
+
+function makeobj(obj, deep, ekey, eobj) {
+ var node = document.createElement("table");
+ node.className = "object";
+ _.each(_.keys(obj).sort(), function(k) { makeobjitem(node, deep, k, obj[k]);});
+ if (ekey)
+ makeobjitem(node, deep, ekey, eobj);
+ return node;
+}
+
+function gotevent(obj) {
+ if (obj.event != "monitor/trace")
+ add_logmsg("unexpected event!", JSON.stringify(obj, null, 1), "event");
+ else {
+ add_logmsg("trace event", JSON.stringify(obj, null, 1), "trace");
+ gottraceevent(obj);
+ }
+}
+
+function gottraceevent(obj) {
+ var data = obj.data;
+ var type = _.find(["request", "service", "daemon", "event"],function(x){return x in data;});
+ var desc = data[type];
+ if (!show_monitor_events) {
+ if (type == "event" ? desc.name.startsWith("monitor/") : desc.api == "monitor")
+ return;
+ }
+ var x = document.importNode(t_traceevent, true);
+ x.dataset.event = obj;
+ get(".close", x).onclick = function(evt){x.remove();};
+ x.className = x.className + " " + type;
+ get(".time", x).textContent = data.time;
+ get(".tag", x).textContent = ({
+ request: function(r) { return r.api + "/" + r.verb + " [" + r.index + "] " + r.action; },
+ service: function(r) { return r.api + "@" + r.action; },
+ daemon: function(r) { return r.api + ":" + r.action; },
+ event: function(r) { return r.name + "!" + r.action; },
+ })[type](desc);
+ var tab = makeobj(desc, 4);
+ if ("data" in data)
+ makeobjitem(tab, 1, "data", data.data);
+ get(".content", x).append(tab);
+ trace_events_node.append(x);
+}
+
+function toggle_opened_closed(node, 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";
+ }
+ }
+ return x;
+ }).join(" ");
+ if (!matched)
+ cs = cs + " " + (defval || "closed");
+ node.className = cs;
+}
+
+function on_toggle_traceevent(evt) {
+ if (getSelection() != "") return;
+ var node = evt.target;
+ while(node && node.parentElement != trace_events_node)
+ node = node.parentElement;
+ node && toggle_opened_closed(node);
+}
+
+function obj2html(json) {
+ json = JSON.stringify(json, undefined, 2);
+ json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+ return json.replace(
+ /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+ function (match) {
+ var cls = 'number';
+ if (/^"/.test(match)) {
+ if (/:$/.test(match)) {
+ cls = 'key';
+ } else {
+ cls = 'string';
+ }
+ } else if (/true|false/.test(match)) {
+ cls = 'boolean';
+ } else if (/null/.test(match)) {
+ cls = 'null';
+ }
+ return '<span class="json ' + cls + '">' + match + '</span>';
+ });
+}
+