You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by sc...@apache.org on 2018/02/20 21:28:24 UTC
[2/5] nifi git commit: NIFI-3502: - Upgrading to D3 version 4.
http://git-wip-us.apache.org/repos/asf/nifi/blob/9cd631f9/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
index 8b991a3..b30c981 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
@@ -93,14 +93,20 @@
});
};
- // renders the processors
+ /**
+ * Renders the processors in the specified selection.
+ *
+ * @param {selection} entered The selection of processors to be rendered
+ * @param {boolean} selected Whether the element should be selected
+ * @return the entered selection
+ */
var renderProcessors = function (entered, selected) {
if (entered.empty()) {
- return;
+ return entered;
}
var processor = entered.append('g')
- .attr({
+ .attrs({
'id': function (d) {
return 'id-' + d.id;
},
@@ -111,7 +117,7 @@
// processor border
processor.append('rect')
- .attr({
+ .attrs({
'class': 'border',
'width': function (d) {
return d.dimensions.width;
@@ -125,7 +131,7 @@
// processor body
processor.append('rect')
- .attr({
+ .attrs({
'class': 'body',
'width': function (d) {
return d.dimensions.width;
@@ -139,7 +145,7 @@
// processor name
processor.append('text')
- .attr({
+ .attrs({
'x': 75,
'y': 18,
'width': 210,
@@ -149,7 +155,7 @@
// processor icon container
processor.append('rect')
- .attr({
+ .attrs({
'x': 0,
'y': 0,
'width': 50,
@@ -159,7 +165,7 @@
// processor icon
processor.append('text')
- .attr({
+ .attrs({
'x': 9,
'y': 35,
'class': 'processor-icon'
@@ -168,7 +174,7 @@
// restricted icon background
processor.append('circle')
- .attr({
+ .attrs({
'r': 9,
'cx': 12,
'cy': 12,
@@ -177,7 +183,7 @@
// restricted icon
processor.append('text')
- .attr({
+ .attrs({
'x': 7.75,
'y': 17,
'class': 'restricted'
@@ -186,7 +192,7 @@
// is primary icon background
processor.append('circle')
- .attr({
+ .attrs({
'r': 9,
'cx': 38,
'cy': 36,
@@ -195,7 +201,7 @@
// is primary icon
processor.append('text')
- .attr({
+ .attrs({
'x': 34.75,
'y': 40,
'class': 'is-primary'
@@ -207,6 +213,8 @@
// make processors selectable
processor.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
+
+ return processor;
};
/**
@@ -248,7 +256,7 @@
// run status icon
details.append('text')
- .attr({
+ .attrs({
'class': 'run-status-icon',
'x': 55,
'y': 23
@@ -256,7 +264,7 @@
// processor type
details.append('text')
- .attr({
+ .attrs({
'class': 'processor-type',
'x': 75,
'y': 32,
@@ -266,7 +274,7 @@
// processor type
details.append('text')
- .attr({
+ .attrs({
'class': 'processor-bundle',
'x': 75,
'y': 45,
@@ -282,7 +290,7 @@
// in
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return processorData.dimensions.width;
},
@@ -294,7 +302,7 @@
// border
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return processorData.dimensions.width;
},
@@ -306,7 +314,7 @@
// read/write
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return processorData.dimensions.width;
},
@@ -318,7 +326,7 @@
// border
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return processorData.dimensions.width;
},
@@ -330,7 +338,7 @@
// out
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return processorData.dimensions.width;
},
@@ -342,7 +350,7 @@
// border
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return processorData.dimensions.width;
},
@@ -354,7 +362,7 @@
// tasks/time
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return processorData.dimensions.width;
},
@@ -366,13 +374,13 @@
// stats label container
var processorStatsLabel = details.append('g')
- .attr({
+ .attrs({
'transform': 'translate(10, 55)'
});
// in label
processorStatsLabel.append('text')
- .attr({
+ .attrs({
'width': 73,
'height': 10,
'y': 9,
@@ -382,7 +390,7 @@
// read/write label
processorStatsLabel.append('text')
- .attr({
+ .attrs({
'width': 73,
'height': 10,
'y': 27,
@@ -392,7 +400,7 @@
// out label
processorStatsLabel.append('text')
- .attr({
+ .attrs({
'width': 73,
'height': 10,
'y': 46,
@@ -402,7 +410,7 @@
// tasks/time label
processorStatsLabel.append('text')
- .attr({
+ .attrs({
'width': 73,
'height': 10,
'y': 65,
@@ -412,13 +420,13 @@
// stats value container
var processorStatsValue = details.append('g')
- .attr({
+ .attrs({
'transform': 'translate(85, 55)'
});
// in value
var inText = processorStatsValue.append('text')
- .attr({
+ .attrs({
'width': 180,
'height': 9,
'y': 9,
@@ -427,19 +435,19 @@
// in count
inText.append('tspan')
- .attr({
+ .attrs({
'class': 'count'
});
// in size
inText.append('tspan')
- .attr({
+ .attrs({
'class': 'size'
});
// read/write value
processorStatsValue.append('text')
- .attr({
+ .attrs({
'width': 180,
'height': 10,
'y': 27,
@@ -448,7 +456,7 @@
// out value
var outText = processorStatsValue.append('text')
- .attr({
+ .attrs({
'width': 180,
'height': 10,
'y': 46,
@@ -457,19 +465,19 @@
// out count
outText.append('tspan')
- .attr({
+ .attrs({
'class': 'count'
});
// out size
outText.append('tspan')
- .attr({
+ .attrs({
'class': 'size'
});
// tasks/time value
processorStatsValue.append('text')
- .attr({
+ .attrs({
'width': 180,
'height': 10,
'y': 65,
@@ -482,7 +490,7 @@
// in info
processorStatsInfo.append('text')
- .attr({
+ .attrs({
'width': 25,
'height': 10,
'y': 9,
@@ -492,7 +500,7 @@
// read/write info
processorStatsInfo.append('text')
- .attr({
+ .attrs({
'width': 25,
'height': 10,
'y': 27,
@@ -502,7 +510,7 @@
// out info
processorStatsInfo.append('text')
- .attr({
+ .attrs({
'width': 25,
'height': 10,
'y': 46,
@@ -512,7 +520,7 @@
// tasks/time info
processorStatsInfo.append('text')
- .attr({
+ .attrs({
'width': 25,
'height': 10,
'y': 65,
@@ -525,7 +533,7 @@
// --------
details.append('path')
- .attr({
+ .attrs({
'class': 'component-comments',
'transform': 'translate(' + (processorData.dimensions.width - 2) + ', ' + (processorData.dimensions.height - 10) + ')',
'd': 'm0,0 l0,8 l-8,0 z'
@@ -537,7 +545,7 @@
// active thread count
details.append('text')
- .attr({
+ .attrs({
'class': 'active-thread-count-icon',
'y': 45
})
@@ -545,7 +553,7 @@
// active thread background
details.append('text')
- .attr({
+ .attrs({
'class': 'active-thread-count',
'y': 45
});
@@ -556,7 +564,7 @@
// bulletin background
details.append('rect')
- .attr({
+ .attrs({
'class': 'bulletin-background',
'x': function (d) {
return processorData.dimensions.width - 24;
@@ -567,7 +575,7 @@
// bulletin icon
details.append('text')
- .attr({
+ .attrs({
'class': 'bulletin-icon',
'x': function (d) {
return processorData.dimensions.width - 17;
@@ -799,7 +807,7 @@
// update the run status
updated.select('text.run-status-icon')
- .attr({
+ .attrs({
'fill': function (d) {
var fill = '#728e9b';
@@ -978,7 +986,7 @@
// create the processor container
processorContainer = d3.select('#canvas').append('g')
- .attr({
+ .attrs({
'pointer-events': 'all',
'class': 'processors'
});
@@ -1018,10 +1026,14 @@
add(processorEntities);
}
- // apply the selection and handle new processor
+ // select
var selection = select();
- selection.enter().call(renderProcessors, selectAll);
- selection.call(updateProcessors);
+
+ // enter
+ var entered = renderProcessors(selection.enter(), selectAll);
+
+ // update
+ updateProcessors(selection.merge(entered));
},
/**
@@ -1072,10 +1084,18 @@
set(processorEntities);
}
- // apply the selection and handle all new processors
+ // select
var selection = select();
- selection.enter().call(renderProcessors, selectAll);
- selection.call(updateProcessors).call(nfCanvasUtils.position, transition);
+
+ // enter
+ var entered = renderProcessors(selection.enter(), selectAll);
+
+ // update
+ var updated = selection.merge(entered);
+ updated.call(updateProcessors);
+ updated.call(nfCanvasUtils.position, transition);
+
+ // exit
selection.exit().call(removeProcessors);
},
@@ -1178,7 +1198,7 @@
*/
expireCaches: function (timestamp) {
var expire = function (cache) {
- cache.forEach(function (id, entryTimestamp) {
+ cache.each(function (entryTimestamp, id) {
if (timestamp > entryTimestamp) {
cache.remove(id);
}
http://git-wip-us.apache.org/repos/asf/nifi/blob/9cd631f9/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
index a58d8db..ce3755c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
@@ -97,14 +97,15 @@
*
* @param {selection} entered The selection of remote process groups to be rendered
* @param {boolean} selected Whether the remote process group is selected
+ * @return the entered selection
*/
var renderRemoteProcessGroups = function (entered, selected) {
if (entered.empty()) {
- return;
+ return entered;
}
var remoteProcessGroup = entered.append('g')
- .attr({
+ .attrs({
'id': function (d) {
return 'id-' + d.id;
},
@@ -119,7 +120,7 @@
// remote process group border
remoteProcessGroup.append('rect')
- .attr({
+ .attrs({
'class': 'border',
'width': function (d) {
return d.dimensions.width;
@@ -133,7 +134,7 @@
// remote process group body
remoteProcessGroup.append('rect')
- .attr({
+ .attrs({
'class': 'body',
'width': function (d) {
return d.dimensions.width;
@@ -147,7 +148,7 @@
// remote process group name background
remoteProcessGroup.append('rect')
- .attr({
+ .attrs({
'width': function (d) {
return d.dimensions.width;
},
@@ -157,7 +158,7 @@
// remote process group name
remoteProcessGroup.append('text')
- .attr({
+ .attrs({
'x': 30,
'y': 20,
'width': 305,
@@ -167,6 +168,8 @@
// always support selection
remoteProcessGroup.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
+
+ return remoteProcessGroup;
};
/**
@@ -205,7 +208,7 @@
// remote process group transmission status
details.append('text')
- .attr({
+ .attrs({
'class': 'remote-process-group-transmission-status',
'x': 10,
'y': 20
@@ -216,7 +219,7 @@
// ------------------
details.append('rect')
- .attr({
+ .attrs({
'x': 0,
'y': 32,
'width': function () {
@@ -232,7 +235,7 @@
// remote process group secure transfer
details.append('text')
- .attr({
+ .attrs({
'class': 'remote-process-group-transmission-secure',
'x': 10,
'y': 48
@@ -240,7 +243,7 @@
// remote process group uri
details.append('text')
- .attr({
+ .attrs({
'x': 30,
'y': 48,
'width': 305,
@@ -254,7 +257,7 @@
// sent
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return remoteProcessGroupData.dimensions.width;
},
@@ -266,7 +269,7 @@
// border
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return remoteProcessGroupData.dimensions.width;
},
@@ -278,7 +281,7 @@
// received
details.append('rect')
- .attr({
+ .attrs({
'width': function () {
return remoteProcessGroupData.dimensions.width;
},
@@ -294,13 +297,13 @@
// stats label container
var remoteProcessGroupStatsLabel = details.append('g')
- .attr({
+ .attrs({
'transform': 'translate(6, 75)'
});
// sent label
remoteProcessGroupStatsLabel.append('text')
- .attr({
+ .attrs({
'width': 73,
'height': 10,
'x': 4,
@@ -311,7 +314,7 @@
// received label
remoteProcessGroupStatsLabel.append('text')
- .attr({
+ .attrs({
'width': 73,
'height': 10,
'x': 4,
@@ -322,13 +325,13 @@
// stats value container
var remoteProcessGroupStatsValue = details.append('g')
- .attr({
+ .attrs({
'transform': 'translate(95, 75)'
});
// sent value
var sentText = remoteProcessGroupStatsValue.append('text')
- .attr({
+ .attrs({
'width': 180,
'height': 10,
'x': 4,
@@ -338,25 +341,25 @@
// sent count
sentText.append('tspan')
- .attr({
+ .attrs({
'class': 'count'
});
// sent size
sentText.append('tspan')
- .attr({
+ .attrs({
'class': 'size'
});
// sent ports
sentText.append('tspan')
- .attr({
+ .attrs({
'class': 'ports'
});
// received value
var receivedText = remoteProcessGroupStatsValue.append('text')
- .attr({
+ .attrs({
'width': 180,
'height': 10,
'x': 4,
@@ -366,31 +369,31 @@
// received ports
receivedText.append('tspan')
- .attr({
+ .attrs({
'class': 'ports'
});
// received count
receivedText.append('tspan')
- .attr({
+ .attrs({
'class': 'count'
});
// received size
receivedText.append('tspan')
- .attr({
+ .attrs({
'class': 'size'
});
// stats value container
var processGroupStatsInfo = details.append('g')
- .attr({
+ .attrs({
'transform': 'translate(335, 75)'
});
// sent info
processGroupStatsInfo.append('text')
- .attr({
+ .attrs({
'width': 25,
'height': 10,
'x': 4,
@@ -401,7 +404,7 @@
// received info
processGroupStatsInfo.append('text')
- .attr({
+ .attrs({
'width': 25,
'height': 10,
'x': 4,
@@ -415,7 +418,7 @@
// -------------------
details.append('rect')
- .attr({
+ .attrs({
'x': 0,
'y': function () {
return remoteProcessGroupData.dimensions.height - 24;
@@ -428,7 +431,7 @@
});
details.append('text')
- .attr({
+ .attrs({
'x': 10,
'y': 150,
'class': 'remote-process-group-last-refresh'
@@ -439,7 +442,7 @@
// --------
details.append('path')
- .attr({
+ .attrs({
'class': 'component-comments',
'transform': 'translate(' + (remoteProcessGroupData.dimensions.width - 2) + ', ' + (remoteProcessGroupData.dimensions.height - 10) + ')',
'd': 'm0,0 l0,8 l-8,0 z'
@@ -451,7 +454,7 @@
// active thread count
details.append('text')
- .attr({
+ .attrs({
'class': 'active-thread-count-icon',
'y': 20
})
@@ -459,7 +462,7 @@
// active thread icon
details.append('text')
- .attr({
+ .attrs({
'class': 'active-thread-count',
'y': 20
});
@@ -470,7 +473,7 @@
// bulletin background
details.append('rect')
- .attr({
+ .attrs({
'class': 'bulletin-background',
'x': function () {
return remoteProcessGroupData.dimensions.width - 24;
@@ -482,7 +485,7 @@
// bulletin icon
details.append('text')
- .attr({
+ .attrs({
'class': 'bulletin-icon',
'x': function () {
return remoteProcessGroupData.dimensions.width - 17;
@@ -867,7 +870,7 @@
// create the process group container
remoteProcessGroupContainer = d3.select('#canvas').append('g')
- .attr({
+ .attrs({
'pointer-events': 'all',
'class': 'remote-process-groups'
});
@@ -907,10 +910,14 @@
add(remoteProcessGroupEntities);
}
- // apply the selection and handle new remote process groups
+ // select
var selection = select();
- selection.enter().call(renderRemoteProcessGroups, selectAll);
- selection.call(updateRemoteProcessGroups);
+
+ // enter
+ var entered = renderRemoteProcessGroups(selection.enter(), selectAll);
+
+ // update
+ updateRemoteProcessGroups(selection.merge(entered));
},
/**
@@ -961,10 +968,17 @@
set(remoteProcessGroupEntities);
}
- // apply the selection and handle all new remote process groups
+ // select
var selection = select();
- selection.enter().call(renderRemoteProcessGroups, selectAll);
- selection.call(updateRemoteProcessGroups).call(nfCanvasUtils.position, transition);
+
+ // enter
+ var entered = renderRemoteProcessGroups(selection.enter(), selectAll);
+
+ // update
+ var updated = selection.merge(entered);
+ updated.call(updateRemoteProcessGroups).call(nfCanvasUtils.position, transition);
+
+ // exit
selection.exit().call(removeRemoteProcessGroups);
},
@@ -1075,7 +1089,7 @@
*/
expireCaches: function (timestamp) {
var expire = function (cache) {
- cache.forEach(function (id, entryTimestamp) {
+ cache.each(function (entryTimestamp, id) {
if (timestamp > entryTimestamp) {
cache.remove(id);
}
http://git-wip-us.apache.org/repos/asf/nifi/blob/9cd631f9/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
index d3289c7..824312a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
@@ -756,7 +756,7 @@
text: 'all groups',
value: ''
}];
- groups.forEach(function (group) {
+ groups.each(function (group) {
options.push({
text: group,
value: group
@@ -1799,7 +1799,7 @@
})
.map(reportingTaskBulletins, d3.map);
- reportingTaskBulletinsBySource.forEach(function (sourceId, sourceBulletins) {
+ reportingTaskBulletinsBySource.each(function (sourceBulletins, sourceId) {
var reportingTask = reportingTasksData.getItemById(sourceId);
if (nfCommon.isDefinedAndNotNull(reportingTask)) {
reportingTasksData.updateItem(sourceId, $.extend(reportingTask, {
http://git-wip-us.apache.org/repos/asf/nifi/blob/9cd631f9/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-variable-registry.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-variable-registry.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-variable-registry.js
index 24c00ab..7265b70 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-variable-registry.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-variable-registry.js
@@ -920,7 +920,7 @@
})
.map(bulletins, d3.map);
- bulletinsBySource.forEach(function (sourceId, sourceBulletins) {
+ bulletinsBySource.each(function (sourceBulletins, sourceId) {
$('div.' + sourceId + '-affected-bulletins').each(function () {
var bulletinIcon = $(this);
http://git-wip-us.apache.org/repos/asf/nifi/blob/9cd631f9/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
index 1901600..83cf5f8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
@@ -87,9 +87,9 @@
var serverTimeOffset = null;
/**
- * The current extent of the brush.
+ * The current selection of the brush.
*/
- var brushExtent = null;
+ var brushSelection = null;
/**
* The currently selected descriptor.
@@ -192,7 +192,7 @@
// get the current user time to properly convert the server time
var now = new Date();
- // conver the user offset to millis
+ // convert the user offset to millis
var userTimeOffset = now.getTimezoneOffset() * 60 * 1000;
// create the proper date by adjusting by the offsets
@@ -240,7 +240,7 @@
if (selectedDescriptor !== null) {
// clear the current extent if this is a newly selected descriptor
if (descriptor === null || descriptor.field !== selectedDescriptor.field) {
- brushExtent = null;
+ brushSelection = null;
}
// record the currently selected descriptor
@@ -296,7 +296,7 @@
// add status history details
var detailsContainer = buildDetailsContainer('Status History');
- d3.map(statusHistory.details).forEach(function (label, value) {
+ d3.map(statusHistory.details).each(function (value, label) {
addDetailItem(detailsContainer, label, value);
});
@@ -312,7 +312,7 @@
// -------------
// available colors
- var color = d3.scale.category10();
+ var color = d3.scaleOrdinal(d3.schemeCategory10);
// determine the available instances
var instanceLabels = [];
@@ -351,32 +351,23 @@
// custom time axis formatter
// --------------------------
- var customTimeFormat = d3.time.format.multi([
- [':%S.%L', function (d) {
- return d.getMilliseconds();
- }],
- [':%S', function (d) {
- return d.getSeconds();
- }],
- ['%H:%M', function (d) {
- return d.getMinutes();
- }],
- ['%H:%M', function (d) {
- return d.getHours();
- }],
- ['%a %d', function (d) {
- return d.getDay() && d.getDate() !== 1;
- }],
- ['%b %d', function (d) {
- return d.getDate() !== 1;
- }],
- ['%B', function (d) {
- return d.getMonth();
- }],
- ['%Y', function () {
- return true;
- }]
- ]);
+ var customTimeFormat = function (d) {
+ if (d.getMilliseconds()) {
+ return d3.timeFormat(':%S.%L')(d);
+ } else if (d.getSeconds()) {
+ return d3.timeFormat(':%S')(d);
+ } else if (d.getMinutes() || d.getHours()) {
+ return d3.timeFormat('%H:%M')(d);
+ } else if (d.getDay() && d.getDate() !== 1) {
+ return d3.timeFormat('%a %d')(d);
+ } else if (d.getDate() !== 1) {
+ return d3.timeFormat('%b %d')(d);
+ } else if (d.getMonth()) {
+ return d3.timeFormat('%B')(d);
+ } else {
+ return d3.timeFormat('%Y')(d);
+ }
+ };
// ----------
// main chart
@@ -407,28 +398,23 @@
}
// define the x axis for the main chart
- var x = d3.time.scale()
+ var x = d3.scaleTime()
.range([0, width]);
- var xAxis = d3.svg.axis()
- .scale(x)
+ var xAxis = d3.axisBottom(x)
.ticks(5)
- .tickFormat(customTimeFormat)
- .orient('bottom');
+ .tickFormat(customTimeFormat);
// define the y axis
- var y = d3.scale.linear()
+ var y = d3.scaleLinear()
.range([height, 0]);
- var yAxis = d3.svg.axis()
- .scale(y)
- .tickFormat(formatters[selectedDescriptor.formatter])
- .orient('left');
-
+ var yAxis = d3.axisLeft(y)
+ .tickFormat(formatters[selectedDescriptor.formatter]);
// status line
- var line = d3.svg.line()
- .interpolate('monotone')
+ var line = d3.line()
+ .curve(d3.curveMonotoneX)
.x(function (d) {
return x(d.timestamp);
})
@@ -441,6 +427,7 @@
.attr('style', 'pointer-events: none;')
.attr('width', chartContainer.parent().width())
.attr('height', chartContainer.innerHeight());
+
// define a clip the path
var clipPath = chartSvg.append('defs').append('clipPath')
.attr('id', 'clip')
@@ -569,27 +556,23 @@
var chartControlContainer = $('#status-history-chart-control-container').empty();
var controlHeight = chartControlContainer.innerHeight() - margin.top - margin.bottom;
- var xControl = d3.time.scale()
+ var xControl = d3.scaleTime()
.range([0, width]);
- var xControlAxis = d3.svg.axis()
- .scale(xControl)
+ var xControlAxis = d3.axisBottom(xControl)
.ticks(5)
- .tickFormat(customTimeFormat)
- .orient('bottom');
+ .tickFormat(customTimeFormat);
- var yControl = d3.scale.linear()
+ var yControl = d3.scaleLinear()
.range([controlHeight, 0]);
- var yControlAxis = d3.svg.axis()
- .scale(yControl)
+ var yControlAxis = d3.axisLeft(yControl)
.tickValues(y.domain())
- .tickFormat(formatters[selectedDescriptor.formatter])
- .orient('left');
+ .tickFormat(formatters[selectedDescriptor.formatter]);
// status line
- var controlLine = d3.svg.line()
- .interpolate('monotone')
+ var controlLine = d3.line()
+ .curve(d3.curveMonotoneX)
.x(function (d) {
return xControl(d.timestamp);
})
@@ -606,13 +589,9 @@
var control = controlChartSvg.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
- // increase the y domain slightly
- var yControlDomain = y.domain();
- yControlDomain[1] *= 1.04;
-
// define the domain for the control chart
xControl.domain(x.domain());
- yControl.domain(yControlDomain);
+ yControl.domain(y.domain());
// build the control x axis
control.append('g')
@@ -651,6 +630,53 @@
return d.label;
});
+ // --------------------
+ // aggregate statistics
+ // --------------------
+
+ var updateAggregateStatistics = function () {
+ // locate the instances that have data points within the current brush
+ var withinBrush = $.map(statusData, function (d) {
+ var xDomain = x.domain();
+ var yDomain = y.domain();
+
+ // copy to avoid modifying the original
+ var copy = $.extend({}, d);
+
+ // update the copy to only include values within the brush
+ return $.extend(copy, {
+ values: $.grep(d.values, function (s) {
+ return s.timestamp.getTime() >= xDomain[0].getTime() && s.timestamp.getTime() <= xDomain[1].getTime() && s.value >= yDomain[0] && s.value <= yDomain[1];
+ })
+ });
+ });
+
+ // consider visible nodes with data in the brush
+ var nodes = $.grep(withinBrush, function (d) {
+ return d.id !== config.nifiInstanceId && d.visible && d.values.length > 0;
+ });
+
+ var nodeMinValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(nodes));
+ var nodeMeanValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(nodes));
+ var nodeMaxValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(nodes));
+
+ // update the currently displayed min/max/mean
+ $('#node-aggregate-statistics').text(nodeMinValue + ' / ' + nodeMaxValue + ' / ' + nodeMeanValue);
+
+ // only consider the cluster with data in the brush
+ var cluster = $.grep(withinBrush, function (d) {
+ return d.id === config.nifiInstanceId && d.visible && d.values.length > 0;
+ });
+
+ // determine the cluster values
+ var clusterMinValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(cluster));
+ var clusterMeanValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(cluster));
+ var clusterMaxValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(cluster));
+
+ // update the cluster min/max/mean
+ $('#cluster-aggregate-statistics').text(clusterMinValue + ' / ' + clusterMaxValue + ' / ' + clusterMeanValue);
+ };
+
// -------------------
// configure the brush
// -------------------
@@ -679,7 +705,7 @@
return y(v.value);
})
.attr('r', function () {
- return brush.empty() ? 1.5 : 4;
+ return d3.brushSelection(brushNode.node()) === null ? 1.5 : 4;
});
// update the x axis
@@ -692,9 +718,11 @@
* or the control domain if there is no context window.
*/
var brushed = function () {
+ brushSelection = d3.brushSelection(brushNode.node());
+
// determine the new x and y domains
var xContextDomain, yContextDomain;
- if (brush.empty()) {
+ if (brushSelection === null) {
// get the all visible instances
var visibleInstances = $.grep(statusData, function (d) {
return d.visible;
@@ -718,16 +746,9 @@
];
}
xContextDomain = xControl.domain();
-
- // clear the current extent
- brushExtent = null;
} else {
- var extent = brush.extent();
- xContextDomain = [extent[0][0], extent[1][0]];
- yContextDomain = [extent[0][1], extent[1][1]];
-
- // hold onto the current brush
- brushExtent = extent;
+ xContextDomain = [brushSelection[0][0], brushSelection[1][0]].map(xControl.invert, xControl);
+ yContextDomain = [brushSelection[1][1], brushSelection[0][1]].map(yControl.invert, yControl);
}
// update the axes accordingly
@@ -738,90 +759,34 @@
};
// build the brush
- var brush = d3.svg.brush()
- .x(xControl)
- .y(yControl)
+ var brush = d3.brush()
+ .extent([[xControl.range()[0], yControl.range()[1]], [xControl.range()[1], yControl.range()[0]]])
.on('brush', brushed);
- // conditionally set the brush extent
- if (nfCommon.isDefinedAndNotNull(brushExtent)) {
- brush = brush.extent(brushExtent);
- }
-
// context area
- control.append('g')
+ var brushNode = control.append('g')
.attr('class', 'brush')
+ .on('click', brushed)
.call(brush);
+ // conditionally set the brush extent
+ if (nfCommon.isDefinedAndNotNull(brushSelection)) {
+ brush = brush.move(brushNode, brushSelection);
+ }
+
// add expansion to the extent
- control.select('rect.extent')
+ control.select('rect.selection')
.attr('style', 'pointer-events: all;')
.on('dblclick', function () {
- if (!brush.empty()) {
- // get the current extent to get the x range
- var extent = brush.extent();
-
+ if (brushSelection !== null) {
// get the y range (this value does not change from the original y domain)
- var yRange = yControl.domain();
+ var yRange = yControl.range();
// expand the extent vertically
- brush.extent([[extent[0][0], yRange[0]], [extent[1][0], yRange[1]]]);
-
- // update the brush control
- control.select('.brush').call(brush);
-
- // run the brush to update the axes of the main chart
- brushed();
+ brush.move(brushNode, [[brushSelection[0][0], yRange[1]], [brushSelection[1][0], yRange[0]]]);
}
});
- // --------------------
- // aggregate statistics
- // --------------------
-
- var updateAggregateStatistics = function () {
- // locate the instances that have data points within the current brush
- var withinBrush = $.map(statusData, function (d) {
- var xDomain = x.domain();
- var yDomain = y.domain();
-
- // copy to avoid modifying the original
- var copy = $.extend({}, d);
-
- // update the copy to only include values within the brush
- return $.extend(copy, {
- values: $.grep(d.values, function (s) {
- return s.timestamp.getTime() >= xDomain[0].getTime() && s.timestamp.getTime() <= xDomain[1].getTime() && s.value >= yDomain[0] && s.value <= yDomain[1];
- })
- });
- });
-
- // consider visible nodes with data in the brush
- var nodes = $.grep(withinBrush, function (d) {
- return d.id !== config.nifiInstanceId && d.visible && d.values.length > 0;
- });
-
- var nodeMinValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(nodes));
- var nodeMeanValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(nodes));
- var nodeMaxValue = nodes.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(nodes));
-
- // update the currently displayed min/max/mean
- $('#node-aggregate-statistics').text(nodeMinValue + ' / ' + nodeMaxValue + ' / ' + nodeMeanValue);
-
- // only consider the cluster with data in the brush
- var cluster = $.grep(withinBrush, function (d) {
- return d.id === config.nifiInstanceId && d.visible && d.values.length > 0;
- });
-
- // determine the cluster values
- var clusterMinValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMinValue(cluster));
- var clusterMeanValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMeanValue(cluster));
- var clusterMaxValue = cluster.length === 0 ? 'NA' : formatters[selectedDescriptor.formatter](getMaxValue(cluster));
-
- // update the cluster min/max/mean
- $('#cluster-aggregate-statistics').text(clusterMinValue + ' / ' + clusterMaxValue + ' / ' + clusterMeanValue);
- };
-
// ----------------
// build the legend
// ----------------
@@ -906,19 +871,13 @@
// handle resizing
// ---------------
- var maxWidth, maxHeight, minHeight, resizeExtent, dialog;
+ var maxWidth, maxHeight, minHeight, dialog;
chartContainer.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
minWidth: 425,
minHeight: 150,
handles: {
'se': '.ui-resizable-se'
},
- start: function (e, ui) {
- // record the current extent so it can be reset on stop
- if (!brush.empty()) {
- resizeExtent = brush.extent();
- }
- },
resize: function (e, ui) {
// -----------
// containment
@@ -1099,7 +1058,7 @@
$('#status-history-details').empty();
// clear the extent and selected descriptor
- brushExtent = null;
+ brushSelection = null;
descriptor = null;
instances = null;
},
http://git-wip-us.apache.org/repos/asf/nifi/blob/9cd631f9/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
index 6295c0b..b67e474 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
@@ -238,7 +238,7 @@
// push off processing a node until its deepest point
// by removing any descendants from the immediate nodes.
// in this case, a link is panning multiple levels
- descendantSet.forEach(function (d) {
+ descendantSet.each(function (d) {
immediateSet.remove(d);
});
@@ -478,7 +478,7 @@
var startNodes = d3.set(nodeLookup.keys());
// go through the nodes to reset their outgoing links
- nodeLookup.forEach(function (id, node) {
+ nodeLookup.each(function (node, id) {
node.outgoing = [];
node.incoming = [];
@@ -493,7 +493,7 @@
});
// go through the links in order to compute the new layout
- linkLookup.forEach(function (id, link) {
+ linkLookup.each(function (link, id) {
// updating the nodes connections
link.source.outgoing.push(link);
link.target.incoming.push(link);
@@ -535,11 +535,11 @@
});
// handle zoom behavior
- var lineageZoom = d3.behavior.zoom()
+ var lineageZoom = d3.zoom()
.scaleExtent([0.2, 8])
.on('zoom', function () {
d3.select('g.lineage').attr('transform', function () {
- return 'translate(' + d3.event.translate + ') scale(' + d3.event.scale + ')';
+ return 'translate(' + d3.event.transform.x + ', ' + d3.event.transform.y + ') scale(' + d3.event.transform.k + ')';
});
});
@@ -576,7 +576,7 @@
});
svg.append('rect')
- .attr({
+ .attrs({
'width': '100%',
'height': '100%',
'fill': '#f9fafb'
@@ -585,7 +585,7 @@
svg.append('defs').selectAll('marker')
.data(['FLOWFILE', 'FLOWFILE-SELECTED', 'EVENT', 'EVENT-SELECTED'])
.enter().append('marker')
- .attr({
+ .attrs({
'id': function (d) {
return d;
},
@@ -614,7 +614,7 @@
// group everything together
var lineageContainer = svg.append('g')
- .attr({
+ .attrs({
'transform': 'translate(0, 0) scale(1)',
'pointer-events': 'all',
'class': 'lineage'
@@ -638,8 +638,8 @@
});
// hide applicable nodes and lines
- linksToHide.transition().duration(400).style('opacity', 0);
nodesToHide.transition().delay(200).duration(400).style('opacity', 0);
+ linksToHide.transition().duration(400).style('opacity', 0);
} else {
// the slider is ascending
@@ -652,8 +652,8 @@
});
// show applicable nodes and lines
- nodesToShow.transition().duration(400).style('opacity', 1);
linksToShow.transition().delay(200).duration(400).style('opacity', 1);
+ nodesToShow.transition().duration(400).style('opacity', 1);
}
// update the event time
@@ -679,7 +679,7 @@
// node
flowfiles.append('circle')
- .attr({
+ .attrs({
'r': 16,
'fill': '#fff',
'stroke': '#000',
@@ -704,13 +704,13 @@
});
var icon = flowfiles.append('g')
- .attr({
+ .attrs({
'class': 'flowfile-icon',
'transform': function (d) {
return 'translate(-9,-9)';
}
}).append('text')
- .attr({
+ .attrs({
'font-family': 'flowfont',
'font-size': '18px',
'fill': '#ad9897',
@@ -1021,7 +1021,7 @@
.classed('event', true)
// join node to its label
.append('rect')
- .attr({
+ .attrs({
'x': 0,
'y': -8,
'height': 16,
@@ -1037,7 +1037,7 @@
.classed('selected', function (d) {
return d.id === eventId;
})
- .attr({
+ .attrs({
'r': 8,
'fill': '#aabbc3',
'stroke': '#000',
@@ -1049,7 +1049,7 @@
events
.append('text')
- .attr({
+ .attrs({
'id': function (d) {
return 'event-text-' + d.id;
},
@@ -1083,7 +1083,7 @@
});
label.attr('transform', 'translate(10,-14)');
} else {
- label.text(d.eventType).attr({
+ label.text(d.eventType).attrs({
'x': 10,
'y': 4
});
@@ -1098,7 +1098,22 @@
return d.id;
});
- // add new nodes
+ // exit
+ nodes.exit()
+ .transition()
+ .delay(200)
+ .duration(400)
+ .attr('transform', function (d) {
+ if (d.incoming.length === 0) {
+ return 'translate(' + (width / 2) + ',50)';
+ } else {
+ return 'translate(' + d.incoming[0].source.x + ',' + d.incoming[0].source.y + ')';
+ }
+ })
+ .style('opacity', 0)
+ .remove();
+
+ // enter
var nodesEntered = nodes.enter()
.append('g')
.attr('id', function (d) {
@@ -1122,39 +1137,37 @@
return d.type === 'EVENT';
}).call(renderEvent, provenanceTableCtrl);
+ // merge
+ nodes = nodes.merge(nodesEntered);
+
// update the nodes
- nodes
- .transition()
+ nodes.transition()
.duration(400)
.attr('transform', function (d) {
return 'translate(' + d.x + ', ' + d.y + ')';
})
.style('opacity', 1);
- // remove old nodes
- nodes.exit()
+ // update the link data
+ links = links.data(linkLookup.values(), function (d) {
+ return d.id;
+ });
+
+ // exit
+ links.exit()
+ .attr('marker-end', '')
.transition()
- .delay(200)
.duration(400)
- .attr('transform', function (d) {
- if (d.incoming.length === 0) {
- return 'translate(' + (width / 2) + ',50)';
- } else {
- return 'translate(' + d.incoming[0].source.x + ',' + d.incoming[0].source.y + ')';
- }
+ .attr('d', function (d) {
+ return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
})
.style('opacity', 0)
.remove();
- // update the link data
- links = links.data(linkLookup.values(), function (d) {
- return d.id;
- });
-
// add new links
- links.enter()
+ var linksEntered = links.enter()
.insert('path', '.node')
- .attr({
+ .attrs({
'class': 'link',
'stroke-width': 1.5,
'stroke': '#000',
@@ -1165,13 +1178,15 @@
})
.style('opacity', 0);
+ // merge
+ links = links.merge(linksEntered)
+ .attr('marker-end', '');
+
// update the links
- links
- .attr('marker-end', '')
- .transition()
+ links.transition()
.delay(200)
.duration(400)
- .attr({
+ .attrs({
'marker-end': function (d) {
return 'url(#' + d.target.type + ')';
},
@@ -1180,17 +1195,6 @@
}
})
.style('opacity', 1);
-
- // remove old links
- links.exit()
- .attr('marker-end', '')
- .transition()
- .duration(400)
- .attr('d', function (d) {
- return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
- })
- .style('opacity', 0)
- .remove();
};
// show the lineage pane and hide the event search results
http://git-wip-us.apache.org/repos/asf/nifi/blob/9cd631f9/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
index 5a426e5..9094795 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
@@ -69,7 +69,7 @@
provenance: '../nifi-api/provenance',
provenanceEvents: '../nifi-api/provenance-events/',
clusterSearch: '../nifi-api/flow/cluster/search-results',
- d3Script: 'js/d3/d3.min.js',
+ d3Script: 'js/d3/build/d3.min.js',
lineageScript: 'js/nf/provenance/nf-provenance-lineage.js',
uiExtensionToken: '../nifi-api/access/ui-extension-token',
downloadToken: '../nifi-api/access/download-token'