From e3017eacd1b265377d6581fe255d8c0b994a3cec Mon Sep 17 00:00:00 2001 From: =?utf8?q?Jos=C3=A9=20Bollo?= Date: Fri, 25 Aug 2017 10:45:03 +0200 Subject: [PATCH] monitoring: improve user interface MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit - fix buttons - manage scrolling - added separators Change-Id: I327a74d004ec33c41bb5e0dbc913bb02d9848878 Signed-off-by: José Bollo --- test/monitoring/monitor-base.css | 30 +++++++++++++++++++++++++++--- test/monitoring/monitor-demo.css | 36 ++++++++++++++++++++++++++++++++---- test/monitoring/monitor-pastel.css | 18 ++++++++++++++++-- test/monitoring/monitor.html | 13 ++++++++++++- test/monitoring/monitor.js | 28 +++++++++++++++++++++++++++- 5 files changed, 114 insertions(+), 11 deletions(-) diff --git a/test/monitoring/monitor-base.css b/test/monitoring/monitor-base.css index a394a44c..0cbbe155 100644 --- a/test/monitoring/monitor-base.css +++ b/test/monitoring/monitor-base.css @@ -8,9 +8,7 @@ body { right: 0px; } -body.on #params, -body.off #controls, -body.off #logmsg-box { display: none; } +body.on #params, body.off #main { display: none; } /*******************************************************************/ /* head */ @@ -69,11 +67,33 @@ body.off #logmsg-box { display: none; } right: 0px; top: 0px; bottom: 0px; +/* font-size: smaller; overflow: auto; margin-bottom: 75px; +*/ } +#logmsgs-inner-box { + position: relative; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; +} + +#logmsgs { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + font-size: smaller; + overflow: auto; + margin-bottom: 380px; +} + + #trace-events { overflow: auto; position: absolute; @@ -152,6 +172,10 @@ body.off #logmsg-box { display: none; } position: absolute; } +.traceevent .content { + clear: both; +} + .traceevent { -webkit-user-select: none; -moz-user-select: none; diff --git a/test/monitoring/monitor-demo.css b/test/monitoring/monitor-demo.css index b14ac1a7..e692eae3 100644 --- a/test/monitoring/monitor-demo.css +++ b/test/monitoring/monitor-demo.css @@ -2,7 +2,9 @@ /* top */ body { margin: 2px; - background: url(content-background-car-wide.png) center/cover; + background-image: url(content-background-car-wide.png); + background-position: center; + background-size: cover; color: cyan; font-family: "Lucida Console", Monaco, monospace; } @@ -39,8 +41,8 @@ body { #params { - border: dashed 4px red; - padding: 10px; + border: dashed 4px #8f8; + padding: 30px; margin: 10px; border-radius: 0px 50px; } @@ -192,7 +194,14 @@ body { /*******************************************************************/ /* open / close */ -.opclo { width: 10; height: 10; background-size: contain; background-color: cyan; border-radius: 3px; padding: 2px; } +.opclo { + width: 10px; + height: 10px; + background-size: contain; + background-color: cyan; + border-radius: 3px; + padding: 2px; +} .closed > .opclo { background-image: url(down.png); } .opened > .opclo { background-image: url(up.png); } @@ -208,6 +217,17 @@ body { border-radius: 0px 5px 5px 5px; } +.separator { + margin: 8px 100px; + padding: 0px; + height: 2px; + background-color: cyan; +} + +.traceevent.opened { + background-color: rgba(0,0,0,0.6); +} + /* .traceevent.request, .trace-box.request { background: #ffd: } .traceevent.daemon, .trace-box.daemon { background: #fdf; } @@ -236,6 +256,10 @@ body { font-weight: bolder; } +.traceevent.closed:hover { + cursor: pointer; +} + .traceevent.closed:hover .content { margin: 5px; padding: 5px; @@ -269,6 +293,10 @@ body { padding: 0px; } +a:link { color: cyan; } +a:link:hover, a:active { color: white; } +a:visited { color: #4d4; } + /*******************************************************************/ /* json format */ diff --git a/test/monitoring/monitor-pastel.css b/test/monitoring/monitor-pastel.css index 4de3730e..0d561f0b 100644 --- a/test/monitoring/monitor-pastel.css +++ b/test/monitoring/monitor-pastel.css @@ -178,8 +178,15 @@ body { /*******************************************************************/ /* open / close */ -.opclo { width: 16; height: 16; background-size: contain; } -.api > .opclo { background: #feb; border: solid 1px black; border-radius: 4px; } +.opclo { + width: 16px; + height: 16px; + background-size: contain; + background-color: #eec; + border-radius: 3px; + padding: 1px; + border: solid 1px black; +} .closed > .opclo { background-image: url(down.png); } .opened > .opclo { background-image: url(up.png); } @@ -195,6 +202,13 @@ body { border-radius: 0px 5px 5px 5px; } +.separator { + margin: 8px 100px; + padding: 0px; + height: 2px; + background-color: black; +} + .traceevent.request, .trace-box.request { background: #ffd; } .traceevent.daemon, .trace-box.daemon { background: #fdf; } .traceevent.service, .trace-box.service { background: #ddf; } diff --git a/test/monitoring/monitor.html b/test/monitoring/monitor.html index 763bef2f..70088ddc 100644 --- a/test/monitoring/monitor.html +++ b/test/monitoring/monitor.html @@ -3,6 +3,7 @@ Monitoring + @@ -44,6 +45,8 @@
Disconnect
+
Stop scroll
+
Add separator
Clear traces
@@ -51,7 +54,10 @@
Stop logs
Clear logs
-
+
+
+
+
@@ -160,4 +166,9 @@ + + + diff --git a/test/monitoring/monitor.js b/test/monitoring/monitor.js index 6926260f..db7bc496 100644 --- a/test/monitoring/monitor.js +++ b/test/monitoring/monitor.js @@ -8,10 +8,13 @@ var t_logmsg; var t_traceevent; var t_verbosity; var t_trace; +var t_separator; + var apis = {}; var events = []; var inhibit = false; var msgs = false; +var autoscroll = false; var root_node; var connected_node; @@ -66,6 +69,7 @@ function init() { t_traceevent = at("t-traceevent").content.firstElementChild; t_verbosity = at("t-verbosity").content.firstElementChild; t_trace = at("t-trace").content.firstElementChild; + t_separator = at("t-separator").content.firstElementChild; root_node = at("root"); connected_node = at("connected"); @@ -90,6 +94,9 @@ function init() { at("stopmsgs").onclick = toggle_logmsgs; start_logmsgs(false); trace_events_node.onclick = on_toggle_traceevent; + at("autoscroll").onclick = toggle_autoscroll; + start_autoscroll(true); + at("addsep").onclick = add_separator; connect(); } @@ -127,6 +134,21 @@ function onabort() { connected_node.className = "error"; } +function start_autoscroll(val) { + at("autoscroll").textContent = (autoscroll = val) ? "Stop scroll" : "Start scroll"; +} + +function toggle_autoscroll() { + start_autoscroll(!autoscroll); +} + +function add_separator() { + var x = document.importNode(t_separator, true); + trace_events_node.append(x); + if (autoscroll) + x.scrollIntoView(); +} + function start_logmsgs(val) { at("stopmsgs").textContent = (msgs = val) ? "Stop logs" : "Get logs"; } @@ -151,7 +173,9 @@ function add_logmsg(tag, content, add) { get(".close", x).onclick = function(evt){x.remove();}; if (add) x.className = x.className + " " + add; - logmsgs_node.prepend(x); + logmsgs_node.append(x); + if (autoscroll) + x.scrollIntoView(); } function add_error(tag, obj) { @@ -380,6 +404,8 @@ function gottraceevent(obj) { makeobjitem(tab, 2, "data", data.data); get(".content", x).append(tab); trace_events_node.append(x); + if (autoscroll) + x.scrollIntoView(); } function toggle_opened_closed(node, defval) { -- 2.16.6