dgbuilder/core_nodes/core/58-debug.html

   1 <!--
   2   Copyright 2013 IBM Corp.
   3
   4   Licensed under the Apache License, Version 2.0 (the "License");
   5   you may not use this file except in compliance with the License.
   6   You may obtain a copy of the License at
   7
   8   http://www.apache.org/licenses/LICENSE-2.0
   9
  10   Unless required by applicable law or agreed to in writing, software
  11   distributed under the License is distributed on an "AS IS" BASIS,
  12   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   See the License for the specific language governing permissions and
  14   limitations under the License.
  15 -->
  16
  17 <script type="text/x-red" data-template-name="debug">
  18     <div class="form-row">
  19         <label for="node-input-complete"><i class="fa fa-list"></i> Output</label>
  20         <select type="text" id="node-input-complete" style="display: inline-block; width: 250px; vertical-align: top;">
  21             <option value="false">payload only</option>
  22             <option value="true">complete msg object</option>
  23         </select>
  24     </div>
  25     <div class="form-row">
  26         <label for="node-input-console"><i class="fa fa-random"></i> to</label>
  27         <select type="text" id="node-input-console" style="display: inline-block; width: 250px; vertical-align: top;">
  28             <option value="false">debug tab</option>
  29             <option value="true">debug tab and console</option>
  30         </select>
  31     </div>
  32     <div class="form-row">
  33         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  34         <input type="text" id="node-input-name" placeholder="Name">
  35     </div>
  36 </script>
  37
  38 <script type="text/x-red" data-help-name="debug">
  39     <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.
  40     <br/>The sidebar can be accessed under the options drop-down in the top right corner.</p>
  41     <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>
  42     <p>If the payload is an object it will be stringified first for display and indicate that by saying "(Object) ".</p>
  43     <p>If the payload is a buffer it will be stringified first for display and indicate that by saying "(Buffer) ".</p>
  44     <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>
  45     <p>Optionally can show the complete msg object - but the screen can get messy.</p>
  46     <p>In addition any calls to node.warn or node.error will appear here.</p>
  47 </script>
  48
  49 <script type="text/javascript">
  50     RED.nodes.registerType('debug',{
  51         category: 'output',
  52         defaults: {
  53             name: {value:""},
  54             active: {value:true},
  55             console: {value:"false"},
  56             complete: {value:"false"}
  57         },
  58         label: function() {
  59             return this.name||"debug";
  60         },
  61         labelStyle: function() {
  62             return this.name?"node_label_italic":"";
  63         },
  64         color:"#87a980",
  65         inputs:1,
  66         outputs:0,
  67         icon: "debug.png",
  68         align: "right",
  69         button: {
  70             toggle: "active",
  71             onclick: function() {
  72                 var label = this.name||"debug";
  73                 d3.xhr("debug/"+this.id+"/"+(this.active?"enable":"disable")).post(function(err,resp) {
  74                     if (err) {
  75                         if (err.status == 404) {
  76                             RED.notify("<strong>Error</strong>: debug node not deployed","error");
  77                         } else if (err.status == 0) {
  78                             RED.notify("<strong>Error</strong>: no response from server","error");
  79                         } else {
  80                             RED.notify("<strong>Error</strong>: unexpected error: ("+err.status+")"+err.response,"error");
  81                         }
  82                     } else if (resp.status == 200) {
  83                         RED.notify("Successfully activated: "+label,"success");
  84                     } else if (resp.status == 201) {
  85                         RED.notify("Successfully deactivated: "+label,"success");
  86                     } else {
  87                         RED.notify("<strong>Error</strong>: unexpected response: ("+resp.status+") "+resp.response,"error");
  88                     }
  89                 });
  90             }
  91         },
  92         onpaletteadd: function() {
  93             var content = document.createElement("div");
  94             content.id = "tab-debug";
  95
  96             var toolbar = document.createElement("div");
  97             toolbar.id = "debug-toolbar";
  98             content.appendChild(toolbar);
  99
 100             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> ';
 101
 102             var messages = document.createElement("div");
 103             messages.id = "debug-content";
 104             content.appendChild(messages);
 105
 106             RED.sidebar.addTab("debug",content);
 107
 108             function getTimestamp() {
 109                 var d = new Date();
 110                 return d.toLocaleString();
 111             }
 112
 113             var sbc = document.getElementById("debug-content");
 114
 115             var messageCount = 0;
 116             var that = this;
 117             RED._debug = function(msg) {
 118                 that.handleDebugMessage("",{
 119                     name:"debug",
 120                     msg:msg
 121                 });
 122             }
 123
 124             this.handleDebugMessage = function(t,o) {
 125                 var msg = document.createElement("div");
 126                 msg.onmouseover = function() {
 127                     msg.style.borderRightColor = "#999";
 128                     var n = RED.nodes.node(o.id);
 129                     if (n) {
 130                         n.highlighted = true;
 131                         n.dirty = true;
 132                     }
 133                     RED.view.redraw();
 134                 };
 135                 msg.onmouseout = function() {
 136                     msg.style.borderRightColor = "";
 137                     var n = RED.nodes.node(o.id);
 138                     if (n) {
 139                         n.highlighted = false;
 140                         n.dirty = true;
 141                     }
 142                     RED.view.redraw();
 143                 };
 144                 msg.onclick = function() {
 145                     var node = RED.nodes.node(o.id);
 146                     if (node) {
 147                         RED.view.showWorkspace(node.z);
 148                     }
 149
 150                 };
 151                 var name = (o.name?o.name:o.id).toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
 152                 var topic = (o.topic||"").toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
 153                 var payload = (o.msg||"").toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
 154                 msg.className = 'debug-message'+(o.level?(' debug-message-level-'+o.level):'');
 155                 msg.innerHTML = '<span class="debug-message-date">'+getTimestamp()+'</span>'+
 156                                 '<span class="debug-message-name">['+name+']</span>'+
 157                                 (o.topic?'<span class="debug-message-topic">'+topic+'</span>':'')+
 158                                 '<span class="debug-message-payload">'+payload+'</span>';
 159                 var atBottom = (sbc.scrollHeight-messages.offsetHeight-sbc.scrollTop) < 5;
 160                 messageCount++;
 161                 $(messages).append(msg);
 162
 163                 if (messageCount > 200) {
 164                     $("#debug-content .debug-message:first").remove();
 165                     messageCount--;
 166                 }
 167                 if (atBottom) {
 168                     $(sbc).scrollTop(sbc.scrollHeight);
 169                 }
 170             };
 171             RED.comms.subscribe("debug",this.handleDebugMessage);
 172
 173             $("#debug-tab-clear").click(function() {
 174                 $(".debug-message").remove();
 175                 messageCount = 0;
 176                 RED.nodes.eachNode(function(node) {
 177                     node.highlighted = false;
 178                     node.dirty = true;
 179                 });
 180                 RED.view.redraw();
 181             });
 182         },
 183         onpaletteremove: function() {
 184             RED.comms.unsubscribe("debug",this.handleDebugMessage);
 185             RED.sidebar.removeTab("debug");
 186             delete RED._debug;
 187         }
 188     });
 189 </script>
 190
 191 <style>
 192     #debug-content {
 193         position: absolute;
 194         top: 30px;
 195         bottom: 0px;
 196         left:0px;
 197         right: 0px;
 198         overflow-y: scroll;
 199     }
 200     #debug-toolbar {
 201         padding: 3px 10px;
 202         height: 24px;
 203         background: #f3f3f3;
 204     }
 205     .debug-message {
 206         cursor: pointer;
 207         border-bottom: 1px solid #eee;
 208         border-left: 8px solid #eee;
 209         border-right: 8px solid #eee;
 210         padding: 2px;
 211     }
 212     .debug-message-date {
 213         background: #fff;
 214         font-size: 9px;
 215         color: #aaa;
 216         padding: 1px 5px 1px 1px;
 217     }
 218     .debug-message-topic {
 219         display: block;
 220         background: #fff;
 221         padding: 1px 5px;
 222         font-size: 9px;
 223         color: #a66;
 224     }
 225     .debug-message-name {
 226         background: #fff;
 227         padding: 1px 5px;
 228         font-size: 9px;
 229         color: #aac;
 230     }
 231     .debug-message-payload {
 232         display: block;
 233         padding: 2px;
 234         background: #fff;
 235     }
 236     .debug-message-level-log {
 237         border-left-color: #eee;
 238         border-right-color: #eee;
 239     }
 240     .debug-message-level-warn {
 241         border-left-color: #ffdf9d;
 242         border-right-color: #ffdf9d;
 243     }
 244     .debug-message-level-error {
 245         border-left-color: #f99;
 246         border-right-color: #f99;
 247     }
 248 </style>