aboutsummaryrefslogtreecommitdiffstats
path: root/fg21sim
diff options
context:
space:
mode:
authorAaron LI <aaronly.me@outlook.com>2016-11-09 22:29:16 +0800
committerAaron LI <aaronly.me@outlook.com>2016-11-09 22:29:16 +0800
commit33fa91fccdf81bcaa0ad42e897d7d6d95c44985f (patch)
treeffade76d73071769741b032fe9e85156809231ef /fg21sim
parentaef666a6e1e1b2501f9779914627062a146dd21e (diff)
downloadfg21sim-33fa91fccdf81bcaa0ad42e897d7d6d95c44985f.tar.bz2
webui: Append server-pushed logging messages to the logging box
* Colorize the logging messages of different level with different colors * Also add a different icon for each message
Diffstat (limited to 'fg21sim')
-rw-r--r--fg21sim/webui/static/css/main.css28
-rw-r--r--fg21sim/webui/static/js/console.js26
-rw-r--r--fg21sim/webui/templates/console.html12
3 files changed, 62 insertions, 4 deletions
diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index a574990..de40123 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -374,12 +374,40 @@ button,
font-size: 1.6rem;
font-weight: bold;
}
+.panel-control {
+ float: right;
+}
.panel-body {
padding: 1.5rem;
}
/**
+ * Logging messages styles
+ */
+p.log {
+ font-size: 1.3rem;
+ margin-bottom: 0;
+}
+p.log span {
+ margin-right: 0.8rem;
+}
+p.log.log-debug {
+ color: inherit;
+}
+p.log.log-info {
+ color: #398439;
+}
+p.log.log-warning {
+ color: #d58512;
+}
+p.log.log-error,
+p.log.log-critical {
+ color: #ac2925;
+}
+
+
+/**
* Horizontal rules
*/
hr {
diff --git a/fg21sim/webui/static/js/console.js b/fg21sim/webui/static/js/console.js
index 6d5783a..f9e75dc 100644
--- a/fg21sim/webui/static/js/console.js
+++ b/fg21sim/webui/static/js/console.js
@@ -58,6 +58,30 @@ var updateTaskStatus = function (status) {
/**
+ * Append the logging messages to the "#log-messages" panel box
+ *
+ * @param {Object} msg - Server pushed logging message of "action=log"
+ */
+var appendLogMessage = function (msg) {
+ var log_icons = {
+ debug: "<span class='icon fa fa-comment'></span>",
+ info: "<span class='icon fa fa-info-circle'></span>",
+ warning: "<span class='icon fa fa-warning'></span>",
+ error: "<span class='icon fa fa-times-circle'></span>",
+ critical: "<span class='icon fa fa-times-circle'></span>",
+ };
+ var level = msg.levelname.toLowerCase();
+ var ele = $("<p>").addClass("code log log-" + level);
+ ele.append($(log_icons[level]));
+ ele.append($("<span>").addClass("asctime").text(msg.asctime));
+ ele.append($("<span>").addClass("levelname").text(msg.levelname));
+ ele.append($("<span>").addClass("name").text(msg.name));
+ ele.append($("<span>").addClass("message").text(msg.message));
+ ele.appendTo("#log-messages");
+};
+
+
+/**
* Get the task status from the server
*
* @param {Object} ws - The opened WebSocket object through which to send
@@ -84,7 +108,7 @@ var startServerTask = function (ws, time) {
*/
var handleMsgConsole = function (msg) {
if (msg.action === "log") {
- // TODO: show the logging messages
+ appendLogMessage(msg);
}
else if (msg.action === "push") {
// Update the task status
diff --git a/fg21sim/webui/templates/console.html b/fg21sim/webui/templates/console.html
index e7853c9..ca082cc 100644
--- a/fg21sim/webui/templates/console.html
+++ b/fg21sim/webui/templates/console.html
@@ -22,12 +22,18 @@
<button type="button" class="button button-warning" id="task-stop" disabled="disabled"><span class="fa fa-stop" aria-hidden="true"></span> Stop</button>
</p>
- <div id="log-messages" class="panel panel-default">
+ <div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title"><span class="fa fa-comments" aria-hidden="true"></span> Logging Messages</span>
+ <span class="panel-control">
+ <span id="log-toggle-debug" title="Toggle display of DEBUG messages" class="btn fa fa-comment" aria-hidden="true"></span>
+ <span id="log-toggle-info" title="Toggle display of INFO messages" class="btn fa fa-info-circle" aria-hidden="true"></span>
+ <span id="log-toggle-warning" title="Toggle display of WARNING messages" class="btn fa fa-warning" aria-hidden="true"></span>
+ <span id="log-toggle-error" title="Toggle display of ERROR messages" class="btn fa fa-times-circle" aria-hidden="true"></span>
+ <span id="log-delete" title="Delete all messages" class="btn fa fa-trash" aria-hidden="true"></span>
+ </span>
</div>
- <div class="panel-body">
- <p>messages ...</p>
+ <div id="log-messages" class="panel-body">
</div>
</div>
</section>