frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add per-node filter option to Debug pane

Browse Source
This commit is contained in:
Nick O'Leary 2017-05-22 11:35:45 +01:00
parent f6b0459d27
commit 2a3e355437
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
12 changed files with 538 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -123,6 +123,7 @@ module.exports = function(grunt) {
"editor/js/validators.js",
"editor/js/ui/utils.js",
"editor/js/ui/common/editableList.js",
"editor/js/ui/common/checkboxSet.js",
"editor/js/ui/common/menu.js",
"editor/js/ui/common/panels.js",
"editor/js/ui/common/popover.js",

131
editor/js/ui/common/checkboxSet.js Normal file
View File

@ -0,0 +1,131 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* 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.
**/
(function($) {
$.widget( "nodered.checkboxSet", {
_create: function() {
var that = this;
this.uiElement = this.element.wrap( "<span>" ).parent();
this.uiElement.addClass("red-ui-checkboxSet");
if (this.options.parent) {
this.parent = this.options.parent;
this.parent.checkboxSet('addChild',this.element);
}
this.children = [];
this.partialFlag = false;
this.stateValue = 0;
var initialState = this.element.prop('checked');
this.options = [
$('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-square-o"></i></span>').appendTo(this.uiElement),
$('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-check-square-o"></i></span>').appendTo(this.uiElement),
$('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-minus-square-o"></i></span>').appendTo(this.uiElement)
];
if (initialState) {
this.options[1].show();
} else {
this.options[0].show();
}
this.element.change(function() {
if (this.checked) {
that.options[0].hide();
that.options[1].show();
that.options[2].hide();
} else {
that.options[1].hide();
that.options[0].show();
that.options[2].hide();
}
var isChecked = this.checked;
that.children.forEach(function(child) {
child.checkboxSet('state',isChecked,false,true);
})
})
this.uiElement.click(function(e) {
e.stopPropagation();
// state returns null for a partial state. Clicking on that should
// result in false.
that.state((that.state()===false)?true:false);
})
if (this.parent) {
this.parent.checkboxSet('updateChild',this);
}
},
_destroy: function() {
if (this.parent) {
this.parent.checkboxSet('removeChild',this.element);
}
},
addChild: function(child) {
var that = this;
this.children.push(child);
},
removeChild: function(child) {
var index = this.children.indexOf(child);
if (index > -1) {
this.children.splice(index,1);
}
},
updateChild: function(child) {
var checkedCount = 0;
this.children.forEach(function(c,i) {
if (c.checkboxSet('state') === true) {
checkedCount++;
}
});
if (checkedCount === 0) {
this.state(false,true);
} else if (checkedCount === this.children.length) {
this.state(true,true);
} else {
this.state(null,true);
}
},
disable: function() {
this.uiElement.addClass('disabled');
},
state: function(state,suppressEvent,suppressParentUpdate) {
if (arguments.length === 0) {
return this.partialFlag?null:this.element.is(":checked");
} else {
this.partialFlag = (state === null);
var trueState = this.partialFlag||state;
this.element.prop('checked',trueState);
if (state === true) {
this.options[0].hide();
this.options[1].show();
this.options[2].hide();
} else if (state === false) {
this.options[2].hide();
this.options[1].hide();
this.options[0].show();
} else if (state === null) {
this.options[0].hide();
this.options[1].hide();
this.options[2].show();
}
if (!suppressEvent) {
this.element.trigger('change',null);
}
if (!suppressParentUpdate && this.parent) {
this.parent.checkboxSet('updateChild',this);
}
}
}
})
})(jQuery);

22
editor/js/ui/common/editableList.js
View File

@ -50,9 +50,19 @@
this.uiContainer = this.element
.wrap( "<div>" )
.parent();
this.topContainer = this.uiContainer.wrap("<div>").parent();
if (this.options.header) {
this.options.header.addClass("red-ui-editableList-header");
this.borderContainer = this.uiContainer.wrap("<div>").parent();
this.borderContainer.prepend(this.options.header);
this.topContainer = this.borderContainer.wrap("<div>").parent();
} else {
this.topContainer = this.uiContainer.wrap("<div>").parent();
}
this.topContainer.addClass('red-ui-editableList');
if (this.options.class) {
this.topContainer.addClass(this.options.class);
}
if (this.options.addButton !== false) {
var addLabel;
@ -86,6 +96,11 @@
this.uiContainer.css("position","absolute");
}
if (this.options.header) {
this.borderContainer.addClass("red-ui-editableList-border");
} else {
this.uiContainer.addClass("red-ui-editableList-border");
}
this.uiContainer.addClass("red-ui-editableList-container");
this.uiHeight = this.element.height();
@ -273,6 +288,11 @@
},0);
}
},
addItems: function(items) {
for (var i=0; i<items.length;i++) {
this.addItem(items[i]);
}
},
removeItem: function(data) {
var items = this.element.children().filter(function(f) {
return data === $(this).find(".red-ui-editableList-item-content").data('data');

7
editor/js/ui/utils.js
View File

@ -594,13 +594,18 @@ RED.utils = (function() {
function getNodeLabel(node,defaultLabel) {
defaultLabel = defaultLabel||"";
var l = node._def.label;
var l;
if (node.type === 'tab') {
l = node.label || defaultLabel
} else {
l = node._def.label;
try {
l = (typeof l === "function" ? l.call(node) : l)||defaultLabel;
} catch(err) {
console.log("Definition error: "+node.type+".label",err);
l = defaultLabel;
}
}
return RED.text.bidi.enforceTextDirectionWithUCC(l);
}

5
editor/sass/debug.scss
View File

@ -36,13 +36,16 @@
top: 42px;
left: 0px;
right: 0px;
z-index: 20;
background: #f9f9f9;
padding: 10px;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.debug-filter-row {
text-align: right;
.red-ui-nodeList {
margin: 10px 0;
}
}
.debug-message {

2
editor/sass/style.scss
View File

@ -52,6 +52,8 @@
@import "ui/common/editableList";
@import "ui/common/searchBox";
@import "ui/common/typedInput";
@import "ui/common/nodeList";
@import "ui/common/checkboxSet";
@import "dragdrop";

29
editor/sass/ui/common/checkboxSet.scss Normal file
View File

@ -0,0 +1,29 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* 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.
**/
.red-ui-checkboxSet {
width: 15px;
display: inline-block;
color: #888;
cursor: pointer;
input {
display:none;
}
&.disabled {
pointer-events: none;
color: #ddd;
}
}

12
editor/sass/ui/common/editableList.scss
View File

@ -13,16 +13,20 @@
* See the License for the specific language governing permissions and
* limitations under the License.
**/
.red-ui-editableList-container {
.red-ui-editableList-border {
border: 1px solid $form-input-border-color;
border-radius: 4px;
.red-ui-editableList-header {
border-bottom: 1px solid $form-input-border-color;
padding: 2px 16px 2px 4px;
font-size: 0.9em;
}
}
.red-ui-editableList-container {
padding: 5px;
margin: 0;
vertical-align: middle;
box-sizing: border-box;
.red-ui-editableList-list {
list-style-type:none;
margin: 0;

65
editor/sass/ui/common/nodeList.scss Normal file
View File

@ -0,0 +1,65 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* 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.
**/
.red-ui-nodeList {
.red-ui-editableList-container {
padding: 0;
li {
padding: 2px 5px;
margin: 0;
white-space: nowrap;
border: none;
background: #fefefe;
&:hover {
background: #f0f0f0;
}
i.fa-angle-right {
text-align: center;
width: 15px;
transition: transform 0.1s ease-in-out;
}
.expandable {
cursor: pointer;
}
.expanded i.fa-angle-right {
transform: rotate(90deg);
}
.meta {
float: right;
input[type="checkbox"] {
margin: 0;
}
}
.red-ui-editableList-item-content.disabled {
color: #ccc;
}
&.red-ui-editableList-section-header {
background: #f0f0f0;
.red-ui-editableList-item-content.disabled {
color: #bbb;
}
}
}
}
.red-ui-editableList-header {
text-align: left;
&>span:last-child {
float: right;
font-size: 14px;
}
}
}

3
nodes/core/core/58-debug.html
View File

@ -168,6 +168,7 @@
}
}
};
RED.events.on("workspace:change", this.refreshMessageList);
this.handleDebugMessage = function(t,o) {
var sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
@ -186,8 +187,6 @@
};
RED.comms.subscribe("debug",this.handleDebugMessage);
RED.events.on("workspace:change", this.refreshMessageList);
$("#debug-tab-open").click(function(e) {
e.preventDefault();
subWindow = window.open(document.location.toString().replace(/[?#].*$/,"")+"debug/view/view.html"+document.location.search,"nodeREDDebugView","menubar=no,location=no,toolbar=no,chrome,height=500,width=600");

226
nodes/core/core/lib/debug/debug-utils.js
View File

@ -21,22 +21,28 @@ RED.debug = (function() {
var config;
var messageList;
var messageTable;
var filter = false;
var filterType = "filterAll";
var filteredNodes = {}; // id->true means hide, so default to all visible
var view = 'list';
var messages = [];
var messagesByNode = {};
var sbc;
var activeWorkspace;
var filterVisible = false;
var debugNodeList;
var debugNodeListExpandedFlows = {};
function init(_config) {
config = _config;
var content = $("<div>").css({"position":"relative","height":"100%"});
var toolbar = $('<div class="sidebar-header">'+
'<span class="button-group"><a id="debug-tab-filter" class="sidebar-header-button" href="#"><i class="fa fa-filter"></i></a></span>'+
'<span class="button-group"><a id="debug-tab-filter" class="sidebar-header-button" href="#"><i class="fa fa-filter"></i> <span></span></a></span>'+
'<span class="button-group"><a id="debug-tab-clear" title="clear log" class="sidebar-header-button" href="#"><i class="fa fa-trash"></i></a></span></div>').appendTo(content);
var footerToolbar = $('<div>'+
// '<span class="button-group">'+
// '<a class="sidebar-footer-button-toggle text-button selected" id="debug-tab-view-list" href="#"><span data-i18n="">list</span></a>'+
@ -52,11 +58,82 @@ RED.debug = (function() {
var filterDialog = $('<div class="debug-filter-box hide">'+
'<div class="debug-filter-row">'+
'<span class="button-group">'+
'<a class="sidebar-header-button-toggle selected" id="debug-tab-filter-all" href="#"><span data-i18n="node-red:debug.sidebar.filterAll">all flows</span></a>'+
'<a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></a> '+
'<a class="sidebar-header-button-toggle debug-tab-filter-option selected" id="debug-tab-filterAll" href="#"><span data-i18n="node-red:debug.sidebar.filterAll"></span></a>'+
'<a class="sidebar-header-button-toggle debug-tab-filter-option" id="debug-tab-filterSelected" href="#"><span data-i18n="node-red:debug.sidebar.filterSelected"></span></a>'+
'<a class="sidebar-header-button-toggle debug-tab-filter-option" id="debug-tab-filterCurrent" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+
'</span>'+
'</div>'+
'</div>').appendTo(content);
'</div>').appendTo(toolbar);//content);
// var filterTypeRow = $('<div class="debug-filter-row"></div>').appendTo(filterDialog);
// $('<select><option>Show all debug nodes</option><option>Show selected debug nodes</option><option>Show current flow only</option></select>').appendTo(filterTypeRow);
var debugNodeListRow = $('<div class="debug-filter-row hide"></div>').appendTo(filterDialog);
var flowCheckboxes = {};
var debugNodeListHeader = $('<div><span>Debug nodes</span><span></span></div>');
var headerCheckbox = $('<input type="checkbox">').appendTo(debugNodeListHeader.find("span")[1]).checkboxSet();
debugNodeList = $('<ol>',{style:"text-align: left; min-height: 250px; max-height: 250px"}).appendTo(debugNodeListRow).editableList({
header: debugNodeListHeader,
class: 'red-ui-nodeList',
addItem: function(container,i,node) {
var row = $("<div>").appendTo(container);
row.attr('id','debug-filter-node-list-node-'+node.id.replace(/\./g,"_"));
if (node.type === 'tab') {
container.parent().addClass('red-ui-editableList-section-header');
if (!debugNodeListExpandedFlows.hasOwnProperty(node.id)) {
debugNodeListExpandedFlows[node.id] = true;
}
var chevron = $('<i class="fa fa-angle-right"></i>').appendTo(row);
$('<span>').text(RED.utils.getNodeLabel(node,node.id)).appendTo(row);
var muteControl = $('<input type="checkbox">').appendTo($('<span class="meta">').appendTo(row));
muteControl.checkboxSet({
parent: headerCheckbox
});
flowCheckboxes[node.id] = muteControl;
row.click(function(e) {
e.stopPropagation();
debugNodeListExpandedFlows[node.id] = !debugNodeListExpandedFlows[node.id];
row.toggleClass('expanded',debugNodeListExpandedFlows[node.id]);
debugNodeList.editableList('filter');
})
row.addClass("expandable");
if (node.disabled) {
container.addClass('disabled');
muteControl.checkboxSet('disable');
debugNodeListExpandedFlows[node.id] = false;
}
row.toggleClass('expanded',debugNodeListExpandedFlows[node.id]);
} else {
$('<span>',{style: "margin-left: 20px"}).text(RED.utils.getNodeLabel(node,node.id)).appendTo(row);
row.on("mouseenter",function() {
config.messageMouseEnter(node.id);
});
row.on("mouseleave",function() {
config.messageMouseLeave(node.id);
});
var muteControl = $('<input type="checkbox">').prop('checked',!filteredNodes[node.id]).appendTo($('<span class="meta">').appendTo(row));
muteControl.checkboxSet({
parent: flowCheckboxes[node.z]
}).change(function(e) {
filteredNodes[node.id] = !$(this).prop('checked');
$(".debug-message-node-"+node.id.replace(/\./g,"_")).toggleClass('hide',filteredNodes[node.id]);
});
if (!node.active || RED.nodes.workspace(node.z).disabled) {
container.addClass('disabled');
muteControl.checkboxSet('disable');
}
}
},
addButton: false,
scrollOnAdd: false,
filter: function(node) {
return (node.type === 'tab' || debugNodeListExpandedFlows[node.z] )
},
sort: function(A,B) {
}
});
try {
content.i18n();
@ -64,25 +141,32 @@ RED.debug = (function() {
console.log("TODO: i18n library support");
}
toolbar.find('#debug-tab-filter span').text(RED._('node-red:debug.sidebar.filterAll'));
filterDialog.find('#debug-tab-filter-all').on("click",function(e) {
var filterButtonHandler = function(type) {
return function(e) {
e.preventDefault();
if (filter) {
if (filterType !== type) {
$('.debug-tab-filter-option').removeClass('selected');
$(this).addClass('selected');
$('#debug-tab-filter-current').removeClass('selected');
filter = !filter;
if (filterType === 'filterSelected') {
debugNodeListRow.slideUp();
}
filterType = type;
if (filterType === 'filterSelected') {
debugNodeListRow.slideDown();
}
$('#debug-tab-filter span').text(RED._('node-red:debug.sidebar.'+filterType));
refreshMessageList();
}
});
filterDialog.find('#debug-tab-filter-current').on("click",function(e) {
e.preventDefault();
if (!filter) {
$(this).addClass('selected');
$('#debug-tab-filter-all').removeClass('selected');
filter = !filter;
refreshMessageList();
}
});
}
filterDialog.find('#debug-tab-filterAll').on("click",filterButtonHandler('filterAll'));
filterDialog.find('#debug-tab-filterSelected').on("click",filterButtonHandler('filterSelected'));
filterDialog.find('#debug-tab-filterCurrent').on("click",filterButtonHandler('filterCurrent'));
// $('#debug-tab-view-list').on("click",function(e) {
// e.preventDefault();
// if (!$(this).hasClass('selected')) {
@ -101,13 +185,33 @@ RED.debug = (function() {
// });
var hideFilterTimeout;
toolbar.on('mouseleave',function() {
if ($('#debug-tab-filter').hasClass('selected')) {
clearTimeout(hideFilterTimeout);
hideFilterTimeout = setTimeout(function() {
filterVisible = false;
$('#debug-tab-filter').removeClass('selected');
filterDialog.slideUp(200);
},300);
}
});
toolbar.on('mouseenter',function() {
if ($('#debug-tab-filter').hasClass('selected')) {
clearTimeout(hideFilterTimeout);
}
})
toolbar.find('#debug-tab-filter').on("click",function(e) {
e.preventDefault();
if ($(this).hasClass('selected')) {
filterVisible = false;
$(this).removeClass('selected');
clearTimeout(hideFilterTimeout);
filterDialog.slideUp(200);
} else {
$(this).addClass('selected');
filterVisible = true;
refreshDebugNodeList();
filterDialog.slideDown(200);
}
})
@ -127,6 +231,38 @@ RED.debug = (function() {
}
function refreshDebugNodeList() {
debugNodeList.editableList('empty');
var candidateNodes = RED.nodes.filterNodes({type:'debug'});
var workspaceOrder = RED.nodes.getWorkspaceOrder();
var workspaceOrderMap = {};
workspaceOrder.forEach(function(ws,i) {
workspaceOrderMap[ws] = i;
});
candidateNodes.sort(function(A,B) {
var wsA = workspaceOrderMap[A.z];
var wsB = workspaceOrderMap[B.z];
if (wsA !== wsB) {
return wsA-wsB;
}
var labelA = RED.utils.getNodeLabel(A,A.id);
var labelB = RED.utils.getNodeLabel(B,B.id);
return labelA.localeCompare(labelB);
})
var currentWs = null;
var nodeList = [];
candidateNodes.forEach(function(node) {
if (currentWs !== node.z) {
currentWs = node.z;
nodeList.push(RED.nodes.workspace(node.z));
}
nodeList.push(node);
})
debugNodeList.editableList('addItems',nodeList)
}
function getTimestamp() {
var d = new Date();
return d.toLocaleString();
@ -138,12 +274,23 @@ RED.debug = (function() {
function refreshMessageList(_activeWorkspace) {
if (_activeWorkspace) {
activeWorkspace = _activeWorkspace;
activeWorkspace = _activeWorkspace.replace(/\./g,"_");
}
if (filterType === "filterAll") {
$(".debug-message").removeClass("hide");
} else {
$(".debug-message").each(function() {
$(this).toggleClass('hide',filter&&!$(this).hasClass('debug-message-flow-'+activeWorkspace));
if (filterType === 'filterCurrent') {
$(this).toggleClass('hide',!$(this).hasClass('debug-message-flow-'+activeWorkspace));
} else if (filterType === 'filterSelected') {
var id = $(this).data('source');
if (id) {
$(this).toggleClass('hide',!!filteredNodes[id]);
}
}
});
}
}
function refreshMessageTable() {
}
@ -191,6 +338,20 @@ RED.debug = (function() {
}},
{id:"debug-message-menu-item-clear-pins",label:RED._("node-red:debug.messageMenu.clearPinned"),onselect:function(){
activeMenuMessage.clearPinned();
}},
null,
{id:"debug-message-menu-item-filter",label:RED._("node-red:debug.messageMenu.filterNode"),onselect:function(){
var candidateNodes = RED.nodes.filterNodes({type:'debug'});
candidateNodes.forEach(function(n) {
filteredNodes[n.id] = true;
});
delete filteredNodes[sourceId];
$("#debug-tab-filterSelected").click();
refreshMessageList();
}},
{id:"debug-message-menu-item-clear-filter",label:RED._("node-red:debug.messageMenu.clearFilter"),onselect:function(){
$("#debug-tab-filterAll").click();
refreshMessageList();
}}
]
});
@ -231,7 +392,24 @@ RED.debug = (function() {
var payload = o.msg;
var format = sanitize((o.format||"").toString());
msg.className = 'debug-message'+(o.level?(' debug-message-level-'+o.level):'')+
((sourceNode&&sourceNode.z)?((" debug-message-flow-"+sourceNode.z+((filter&&(activeWorkspace!==sourceNode.z))?" hide":""))):"");
(sourceNode?(
" debug-message-node-"+sourceNode.id.replace(/\./g,"_")+
(sourceNode.z?" debug-message-flow-"+sourceNode.z.replace(/\./g,"_"):"")
):"");
if (sourceNode) {
$(msg).data('source',sourceNode.id);
if (filterType === "filterCurrent" && activeWorkspace) {
if (sourceNode.z && sourceNode.z.replace(/\./g,"_") !== activeWorkspace) {
$(msg).addClass('hide');
}
} else if (filterType === 'filterSelected'){
if (!!filteredNodes[sourceNode.id]) {
$(msg).addClass('hide');
}
}
}
var metaRow = $('<div class="debug-message-meta"></div>').appendTo(msg);
$('<span class="debug-message-date">'+ getTimestamp()+'</span>').appendTo(metaRow);
if (sourceNode) {
@ -322,9 +500,11 @@ RED.debug = (function() {
messageList.scrollTop(sbc.scrollHeight);
}
}
return {
init: init,
refreshMessageList:refreshMessageList,
handleDebugMessage: handleDebugMessage
handleDebugMessage: handleDebugMessage,
}
})();

7
nodes/core/locales/en-US/messages.json
View File

@ -112,12 +112,15 @@
"sidebar": {
"label": "debug",
"name": "Debug messages",
"filterAll": "all flows",
"filterAll": "all nodes",
"filterSelected": "selected nodes",
"filterCurrent": "current flow"
},
"messageMenu": {
"collapseAll": "Collapse all paths",
"clearPinned": "Clear pinned paths"
"clearPinned": "Clear pinned paths",
"filterNode": "Filter this node",
"clearFilter": "Clear filter"
}
},
"link": {