Skip to content
Snippets Groups Projects
Commit c8c19e25 authored by Tim Fechner's avatar Tim Fechner
Browse files

Add colorful severity levels

parent f5726c1b
Branches
No related tags found
No related merge requests found
Pipeline #
...@@ -12,32 +12,58 @@ $(function() { ...@@ -12,32 +12,58 @@ $(function() {
}; };
// Other handlers // Other handlers
socket.onerror = function(e) { socket.onerror = function(event) {
console.debug('Error!', e); console.debug('Error!', event);
$('#conn_status').html('<i class="fa fa-fw fa-times"></i> Connection failed!'); $('#conn_status').html('<i class="fa fa-fw fa-times"></i> Connection failed!');
}; };
// e.data represents Salt's "real time" event data as serialized JSON. // event.data represents Salt's "real time" event data as serialized JSON.
socket.onmessage = function(e) { socket.onmessage = function(event) {
console.log(e); var event = processEvent(event);
//var data = $.parseJSON(e.data.substring(6));
var data = JSON.parse(e.data.substring(6));
if (data.tag.startsWith('salt/job/')) { if (event.tag.startsWith('salt/job/')) {
addJob(data); addJob(event);
} else { } else {
addEvent(data); addEvent(event);
}
}; };
var severity_level = {
0: {name: 'debug', icon: 'bug'},
10: {name: 'info', icon: 'info'},
20: {name: 'success', icon: 'check'},
30: {name: 'warning', icon: 'exclamation-triangle'},
40: {name: 'critical', icon: 'times'},
};
function processEvent(raw_event) {
var event = JSON.parse(raw_event.data.substring(6));
if ("data" in event.data) {
// an event that was fired via engine
event.title = event.data.data.title;
event.message = event.data.data.message.substring(0,300) + '[...]';
event.severity = severity_level[event.data.data.severity];
} else {
// an event that is fired by salt internals
event.title = event.data.id;
event.message = '<pre>' + JSON.stringify(event) + '</pre>';
event.severity = severity_level[0];
}
return event;
}; };
function addEvent(event) { function addEvent(event) {
var tpl = $('#event-template').clone(); var tpl = $('#event-template').clone();
tpl.removeAttr('id'); tpl.removeAttr('id');
tpl.find('.icon').html('<i class="fa fa-fw fa-2x fa-bug"></i>') tpl.addClass('severity-' + event.severity.name);
tpl.find('.title').text(event.data.id); tpl.find('.icon').html('<i class="fa fa-fw fa-2x fa-' + event.severity.icon + '"></i>')
tpl.find('.message').html('<pre>' + JSON.stringify(event.data) + '</pre>'); tpl.find('.title').text(event.title);
tpl.find('.message').html(event.message);
tpl.find('.tag').text(event.tag); tpl.find('.tag').text(event.tag);
tpl.find('.minion-id').text(event.data.id); tpl.find('.minion-id').text(event.data.id);
tpl.find('.timestamp').text(Date(event.data._stamp))
$('#eventholder').prepend(tpl); $('#eventholder').prepend(tpl);
setTimeout(function() { setTimeout(function() {
......
.severitycolor(@bg, @txt) {
border-color: @bg;
span {
color: @txt;
background-color: @bg; }
i {
color: @bg;
}
}
.event.severity-debug { .severitycolor(@nice-silver, black); }
.event.severity-info { .severitycolor(@nice-teal, black); }
.event.severity-success { .severitycolor(@nice-olive, black); }
.event.severity-warning { .severitycolor(@nice-orange, black); }
.event.severity-critical { .severitycolor(@nice-maroon, white); }
.event { .event {
position: relative; position: relative;
border-width: 2px; border-width: 2px;
border-radius: 2px; border-radius: 3px;
border-style: solid; border-style: solid;
// border-color: #ddd;
border-color: #ddd; padding: 15px 15px 20px 15px;
padding: 15px;
margin-bottom: 25px; margin-bottom: 25px;
.message, .message > pre {
white-space: pre-wrap;
}
span.tag { span.tag {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
padding: 0px 3px; padding: 0px 3px;
background-color: #ddd; // background-color: #ddd;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
font-size: 0.9em; font-size: 0.9em;
} }
.message {
pre {
white-space: pre-wrap;
}
}
span.minion-id { span.minion-id {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
padding: 0px 3px; padding: 0px 3px;
background-color: #ddd; // background-color: #ddd;
border-top-left-radius: 2px; border-top-left-radius: 2px;
font-size: 0.9em; font-size: 0.9em;
} }
span.timestamp {
position: absolute;
bottom: 0px;
left: 0px;
padding: 0px 3px;
// background-color: #ddd;
border-top-right-radius: 2px;
font-size: 0.9em;
}
p.title { p.title {
font-weight: bold; font-weight: bold;
font-size: 1.3em; font-size: 1.3em;
......
Source diff could not be displayed: it is too large. Options to address this: view the blob.
$(function(){function t(t){var e=$("#event-template").clone();e.removeAttr("id"),e.find(".icon").html('<i class="fa fa-fw fa-2x fa-bug"></i>'),e.find(".title").text(t.data.id),e.find(".message").html("<pre>"+JSON.stringify(t.data)+"</pre>"),e.find(".tag").text(t.tag),e.find(".minion-id").text(t.data.id),$("#eventholder").prepend(e),setTimeout(function(){e.remove()},3e5)}function e(t){var e=$("#job-template").clone();e.removeAttr("id"),e.find(".timestamp").text(t.data._stamp),e.find(".tag").text(t.tag),$("#jobholder").prepend(e),setTimeout(function(){e.remove()},6e4)}var n=new WebSocket("wss://"+host+":"+port+"/all_events/"+token);n.onopen=function(){n.send("websocket client ready"),console.log("Connected!"),$("#conn_status").html('<i class="fa fa-fw fa-check"></i> Connected!')},n.onerror=function(t){console.debug("Error!",t),$("#conn_status").html('<i class="fa fa-fw fa-times"></i> Connection failed!')},n.onmessage=function(n){console.log(n);var o=JSON.parse(n.data.substring(6));o.tag.startsWith("salt/job/")?e(o):t(o)}}); $(function(){function e(e){var t=JSON.parse(e.data.substring(6));return"data"in t.data?(t.title=t.data.data.title,t.message=t.data.data.message.substring(0,300)+"[...]",t.severity=i[t.data.data.severity]):(t.title=t.data.id,t.message="<pre>"+JSON.stringify(t)+"</pre>",t.severity=i[0]),t}function t(e){var t=$("#event-template").clone();t.removeAttr("id"),t.addClass("severity-"+e.severity.name),t.find(".icon").html('<i class="fa fa-fw fa-2x fa-'+e.severity.icon+'"></i>'),t.find(".title").text(e.title),t.find(".message").html(e.message),t.find(".tag").text(e.tag),t.find(".minion-id").text(e.data.id),t.find(".timestamp").text(Date(e.data._stamp)),$("#eventholder").prepend(t),setTimeout(function(){t.remove()},3e5)}function a(e){var t=$("#job-template").clone();t.removeAttr("id"),t.find(".timestamp").text(e.data._stamp),t.find(".tag").text(e.tag),$("#jobholder").prepend(t),setTimeout(function(){t.remove()},6e4)}var n=new WebSocket("wss://"+host+":"+port+"/all_events/"+token);n.onopen=function(){n.send("websocket client ready"),console.log("Connected!"),$("#conn_status").html('<i class="fa fa-fw fa-check"></i> Connected!')},n.onerror=function(e){console.debug("Error!",e),$("#conn_status").html('<i class="fa fa-fw fa-times"></i> Connection failed!')},n.onmessage=function(n){var n=e(n);n.tag.startsWith("salt/job/")?a(n):t(n)};var i={0:{name:"debug",icon:"bug"},10:{name:"info",icon:"info"},20:{name:"success",icon:"check"},30:{name:"warning",icon:"exclamation-triangle"},40:{name:"critical",icon:"times"}}});
\ No newline at end of file \ No newline at end of file
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
</div> </div>
</div> </div>
<span class="tag"></span> <span class="tag"></span>
<span class="timestamp"></span>
<span class="minion-id"></span> <span class="minion-id"></span>
</div> </div>
<!-- end template --> <!-- end template -->
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment