diff options
Diffstat (limited to 'dgbuilder/core_nodes/core/58-debug.html')
| -rw-r--r-- | dgbuilder/core_nodes/core/58-debug.html | 248 |
1 files changed, 248 insertions, 0 deletions
diff --git a/dgbuilder/core_nodes/core/58-debug.html b/dgbuilder/core_nodes/core/58-debug.html new file mode 100644 index 00000000..04aa5078 --- /dev/null +++ b/dgbuilder/core_nodes/core/58-debug.html @@ -0,0 +1,248 @@ +<!-- + Copyright 2013 IBM Corp. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<script type="text/x-red" data-template-name="debug"> + <div class="form-row"> + <label for="node-input-complete"><i class="fa fa-list"></i> Output</label> + <select type="text" id="node-input-complete" style="display: inline-block; width: 250px; vertical-align: top;"> + <option value="false">payload only</option> + <option value="true">complete msg object</option> + </select> + </div> + <div class="form-row"> + <label for="node-input-console"><i class="fa fa-random"></i> to</label> + <select type="text" id="node-input-console" style="display: inline-block; width: 250px; vertical-align: top;"> + <option value="false">debug tab</option> + <option value="true">debug tab and console</option> + </select> + </div> + <div class="form-row"> + <label for="node-input-name"><i class="fa fa-tag"></i> Name</label> + <input type="text" id="node-input-name" placeholder="Name"> + </div> +</script> + +<script type="text/x-red" data-help-name="debug"> + <p>The Debug node can be connected to the output of any node. It will display the timestamp, <b>msg.topic</b> and <b>msg.payload</b> fields of any messages it receives in the debug tab of the sidebar. + <br/>The sidebar can be accessed under the options drop-down in the top right corner.</p> + <p>The button to the right of the node will toggle it's output on and off so you can de-clutter the debug window.</p> + <p>If the payload is an object it will be stringified first for display and indicate that by saying "(Object) ".</p> + <p>If the payload is a buffer it will be stringified first for display and indicate that by saying "(Buffer) ".</p> + <p>Selecting any particular message will highlight (in red) the debug node that reported it. This is useful if you wire up multiple debug nodes.</p> + <p>Optionally can show the complete msg object - but the screen can get messy.</p> + <p>In addition any calls to node.warn or node.error will appear here.</p> +</script> + +<script type="text/javascript"> + RED.nodes.registerType('debug',{ + category: 'output', + defaults: { + name: {value:""}, + active: {value:true}, + console: {value:"false"}, + complete: {value:"false"} + }, + label: function() { + return this.name||"debug"; + }, + labelStyle: function() { + return this.name?"node_label_italic":""; + }, + color:"#87a980", + inputs:1, + outputs:0, + icon: "debug.png", + align: "right", + button: { + toggle: "active", + onclick: function() { + var label = this.name||"debug"; + d3.xhr("debug/"+this.id+"/"+(this.active?"enable":"disable")).post(function(err,resp) { + if (err) { + if (err.status == 404) { + RED.notify("<strong>Error</strong>: debug node not deployed","error"); + } else if (err.status == 0) { + RED.notify("<strong>Error</strong>: no response from server","error"); + } else { + RED.notify("<strong>Error</strong>: unexpected error: ("+err.status+")"+err.response,"error"); + } + } else if (resp.status == 200) { + RED.notify("Successfully activated: "+label,"success"); + } else if (resp.status == 201) { + RED.notify("Successfully deactivated: "+label,"success"); + } else { + RED.notify("<strong>Error</strong>: unexpected response: ("+resp.status+") "+resp.response,"error"); + } + }); + } + }, + onpaletteadd: function() { + var content = document.createElement("div"); + content.id = "tab-debug"; + + var toolbar = document.createElement("div"); + toolbar.id = "debug-toolbar"; + content.appendChild(toolbar); + + toolbar.innerHTML = '<div class="btn-group pull-right"><a id="debug-tab-clear" title="clear log" class="btn btn-mini" href="#"><i class="fa fa-trash"></i></a></div> '; + + var messages = document.createElement("div"); + messages.id = "debug-content"; + content.appendChild(messages); + + RED.sidebar.addTab("debug",content); + + function getTimestamp() { + var d = new Date(); + return d.toLocaleString(); + } + + var sbc = document.getElementById("debug-content"); + + var messageCount = 0; + var that = this; + RED._debug = function(msg) { + that.handleDebugMessage("",{ + name:"debug", + msg:msg + }); + } + + this.handleDebugMessage = function(t,o) { + var msg = document.createElement("div"); + msg.onmouseover = function() { + msg.style.borderRightColor = "#999"; + var n = RED.nodes.node(o.id); + if (n) { + n.highlighted = true; + n.dirty = true; + } + RED.view.redraw(); + }; + msg.onmouseout = function() { + msg.style.borderRightColor = ""; + var n = RED.nodes.node(o.id); + if (n) { + n.highlighted = false; + n.dirty = true; + } + RED.view.redraw(); + }; + msg.onclick = function() { + var node = RED.nodes.node(o.id); + if (node) { + RED.view.showWorkspace(node.z); + } + + }; + var name = (o.name?o.name:o.id).toString().replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"); + var topic = (o.topic||"").toString().replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"); + var payload = (o.msg||"").toString().replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"); + msg.className = 'debug-message'+(o.level?(' debug-message-level-'+o.level):''); + msg.innerHTML = '<span class="debug-message-date">'+getTimestamp()+'</span>'+ + '<span class="debug-message-name">['+name+']</span>'+ + (o.topic?'<span class="debug-message-topic">'+topic+'</span>':'')+ + '<span class="debug-message-payload">'+payload+'</span>'; + var atBottom = (sbc.scrollHeight-messages.offsetHeight-sbc.scrollTop) < 5; + messageCount++; + $(messages).append(msg); + + if (messageCount > 200) { + $("#debug-content .debug-message:first").remove(); + messageCount--; + } + if (atBottom) { + $(sbc).scrollTop(sbc.scrollHeight); + } + }; + RED.comms.subscribe("debug",this.handleDebugMessage); + + $("#debug-tab-clear").click(function() { + $(".debug-message").remove(); + messageCount = 0; + RED.nodes.eachNode(function(node) { + node.highlighted = false; + node.dirty = true; + }); + RED.view.redraw(); + }); + }, + onpaletteremove: function() { + RED.comms.unsubscribe("debug",this.handleDebugMessage); + RED.sidebar.removeTab("debug"); + delete RED._debug; + } + }); +</script> + +<style> + #debug-content { + position: absolute; + top: 30px; + bottom: 0px; + left:0px; + right: 0px; + overflow-y: scroll; + } + #debug-toolbar { + padding: 3px 10px; + height: 24px; + background: #f3f3f3; + } + .debug-message { + cursor: pointer; + border-bottom: 1px solid #eee; + border-left: 8px solid #eee; + border-right: 8px solid #eee; + padding: 2px; + } + .debug-message-date { + background: #fff; + font-size: 9px; + color: #aaa; + padding: 1px 5px 1px 1px; + } + .debug-message-topic { + display: block; + background: #fff; + padding: 1px 5px; + font-size: 9px; + color: #a66; + } + .debug-message-name { + background: #fff; + padding: 1px 5px; + font-size: 9px; + color: #aac; + } + .debug-message-payload { + display: block; + padding: 2px; + background: #fff; + } + .debug-message-level-log { + border-left-color: #eee; + border-right-color: #eee; + } + .debug-message-level-warn { + border-left-color: #ffdf9d; + border-right-color: #ffdf9d; + } + .debug-message-level-error { + border-left-color: #f99; + border-right-color: #f99; + } +</style> |