X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=dgbuilder%2Fcore_nodes%2Fcore%2F58-debug.html;fp=dgbuilder%2Fcore_nodes%2Fcore%2F58-debug.html;h=04aa50789e6ea5c2cbcd41e86f5b1fce36354b27;hb=d1569975bb18f4359fac18aa98f55b69c248a3ad;hp=0000000000000000000000000000000000000000;hpb=a016ea661ff5767a3539734c4c07ef974a6e4614;p=ccsdk%2Fdistribution.git

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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+                var topic = (o.topic||"").toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+                var payload = (o.msg||"").toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+                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>