Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-11433] update angular, d3, moment, slickgrid, and jquery depen… (#7174) 

* [NIFIF-11433] update angular, d3, moment, slickgrid, and jquery dependencies

* address review feedback

* .entries instead of .keys

Merged #7174 into main.
This commit is contained in:
Scott Aslan 2023-04-24 13:16:20 -04:00 committed by GitHub
parent d3f2bf1c16
commit 38ece1d7d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 2436 additions and 1969 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml
View File

@ -148,7 +148,7 @@
<filtering>false</filtering>
<includes>
<!-- D3 -->
<include>d3/build/d3.min.js*</include>
<include>d3/dist/d3.min.js*</include>
<include>d3/LICENSE</include>
<!-- D3 selection multi -->
<include>d3-selection-multi/build/d3-selection-multi.min.js*</include>
@ -496,6 +496,7 @@
<include>${staging.dir}/js/nf/canvas/nf-component-state.js</include>
<include>${staging.dir}/js/nf/nf-shell.js</include>
<include>${staging.dir}/js/nf/nf-client.js</include>
<include>${staging.dir}/js/nf/canvas/helpers/d3-helpers.js</include>
<include>${staging.dir}/js/nf/canvas/nf-clipboard.js</include>
<include>${staging.dir}/js/nf/canvas/nf-custom-ui.js</include>
<include>${staging.dir}/js/nf/canvas/nf-canvas-utils.js</include>

1725
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/frontend/package.json
View File

@ -20,33 +20,32 @@
"preinstall": "npm --ignore-scripts install npm-force-resolutions && npm-force-resolutions"
},
"dependencies": {
"angular": "1.8.2",
"angular-animate": "1.8.2",
"angular-aria": "1.8.2",
"angular": "1.8.3",
"angular-animate": "1.8.3",
"angular-aria": "1.8.3",
"angular-material": "1.1.26",
"angular-messages": "1.8.2",
"angular-mocks": "1.8.2",
"angular-resource": "1.8.2",
"angular-route": "1.8.2",
"angular-sanitize": "1.8.2",
"d3": "4.13.0",
"d3-selection-multi": "1.0.1",
"angular-messages": "1.8.3",
"angular-mocks": "1.8.3",
"angular-resource": "1.8.3",
"angular-route": "1.8.3",
"angular-sanitize": "1.8.3",
"d3": "7.6.1",
"font-awesome": "4.7.0",
"jquery": "3.6.0",
"jquery": "3.6.4",
"jquery-form": "3.50.0",
"jquery-minicolors": "2.1.10",
"jquery-ui-dist": "1.13.2",
"JSON2": "0.1.0",
"jsonlint": "1.6.3",
"lodash": "4.17.21",
"moment": "2.29.2",
"moment": "2.29.4",
"qtip2": "3.0.3",
"reset.css": "2.0.2",
"slickgrid": "2.4.38",
"slickgrid": "2.4.45",
"url-search-params": "0.6.1"
},
"devDependencies": {
"npm-force-resolutions": "0.0.10"
"npm-force-resolutions": "^0.0.10"
},
"resolutions": {
"underscore": "1.13.2"

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/canvas.properties
View File

@ -26,6 +26,7 @@ nf.canvas.script.tags=<script type="text/javascript" src="js/nf/nf-ng-bridge.js?
<script type="text/javascript" src="js/nf/canvas/nf-component-state.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/nf-shell.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/nf-client.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/helpers/d3-helpers.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-clipboard.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-custom-ui.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-canvas-utils.js?${project.version}"></script>\n\

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp
View File

@ -47,8 +47,7 @@
</script>
<script type="text/javascript" src="assets/url-search-params/build/url-search-params.js"></script>
<script type="text/javascript" src="js/codemirror/lib/codemirror-compressed.js"></script>
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
<script type="text/javascript" src="assets/d3-selection-multi/build/d3-selection-multi.min.js"></script>
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/provenance.jsp
View File

@ -33,8 +33,7 @@
<link rel="stylesheet" href="fonts/flowfont/flowfont.css" type="text/css" />
<link rel="stylesheet" href="assets/angular-material/angular-material.min.css" type="text/css" />
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
<script type="text/javascript" src="assets/d3-selection-multi/build/d3-selection-multi.min.js"></script>
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
<script type="text/javascript" src="js/jquery/jquery.center.js"></script>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/summary.jsp
View File

@ -40,7 +40,7 @@
<link rel="stylesheet" href="assets/angular-material/angular-material.min.css" type="text/css" />
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<script type="text/javascript" src="js/codemirror/lib/codemirror-compressed.js"></script>
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/users.jsp
View File

@ -32,7 +32,7 @@
<link rel="stylesheet" href="css/slick-nifi-theme.css" type="text/css" />
<link rel="stylesheet" href="fonts/flowfont/flowfont.css" type="text/css" />
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
View File

@ -1033,7 +1033,7 @@
var descriptors = gridContainer.data('descriptors');
var propertyDescriptor = descriptors[item.property];
var controllerServiceLookup = d3.map();
var controllerServiceLookup = new Map();
var options = [];
$.each(response.controllerServiceTypes, function (i, controllerServiceType) {
controllerServiceLookup.set(i, controllerServiceType);

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
View File

@ -486,9 +486,9 @@
dataType: 'json'
}).done(function (response) {
var tags = [];
var groups = d3.set();
var restrictedUsage = d3.map();
var requiredPermissions = d3.map();
var groups = new Set();
var restrictedUsage = new Map();
var requiredPermissions = new Map();
// begin the update
processorTypesData.beginUpdate();
@ -584,7 +584,7 @@
text: 'all groups',
value: ''
}];
groups.each(function (group) {
groups.forEach(function (group) {
options.push({
text: group,
value: group

43
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/helpers/d3-helpers.js vendored Normal file
View File

@ -0,0 +1,43 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You 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.
*/
/* global define, module, require, exports */
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([],
function () {
return (nf.ng.D3Helpers = factory());
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.ng.D3Helpers =
factory());
} else {
nf.ng.D3Helpers = factory();
}
}(this, function () {
'use strict';
return {
multiAttr: function(selection, attrs) {
Object.keys(attrs).forEach(function (key) {
selection.attr(key, attrs[key]);
});
return selection;
}
};
}));

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
View File

@ -1286,7 +1286,7 @@
nfSnippet.create(snippet).done(function (response) {
// remove the snippet, effectively removing the components
nfSnippet.remove(response.snippet.id).done(function () {
var components = d3.map();
var components = new Map();
// add the id to the type's array
var addComponent = function (type, id) {
@ -1313,7 +1313,7 @@
});
// remove all the non connections in the snippet first
components.each(function (ids, type) {
components.forEach(function (ids, type) {
if (type !== 'Connection') {
nfCanvasUtils.getComponentByType(type).remove(ids);
}
@ -1919,7 +1919,7 @@
* @param {array} selection The selection
*/
alignVertical: function (selection) {
var updates = d3.map();
var updates = new Map();
// ensure every component is writable
if (nfCanvasUtils.canModify(selection) === false) {
nfDialog.showOkDialog({
@ -1987,7 +1987,7 @@
* @param {array} selection The selection
*/
alignHorizontal: function (selection) {
var updates = d3.map();
var updates = new Map();
// ensure every component is writable
if (nfCanvasUtils.canModify(selection) === false) {
nfDialog.showOkDialog({

33
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js
View File

@ -24,9 +24,10 @@
'nf.Common',
'nf.CanvasUtils',
'nf.ContextMenu',
'nf.Label'],
function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
return (nf.Birdseye = factory($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel));
'nf.Label',
'nf.ng.D3Helpers'],
function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel, d3Helpers) {
return (nf.Birdseye = factory($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Birdseye =
@ -35,16 +36,18 @@
require('nf.Common'),
require('nf.CanvasUtils'),
require('nf.ContextMenu'),
require('nf.Label')));
require('nf.Label'),
require('nf.ng.D3Helpers')));
} else {
nf.Birdseye = factory(root.$,
root.d3,
root.nf.Common,
root.nf.CanvasUtils,
root.nf.ContextMenu,
root.nf.Label);
root.nf.Label,
root.nf.ng.D3Helpers);
}
}(this, function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
}(this, function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel, d3Helpers) {
'use strict';
var nfGraph;
@ -147,8 +150,9 @@
componentGroup.attr('transform', 'translate(' + birdseyeTranslate + ')');
// update the brush
d3.select('rect.birdseye-brush')
.attrs({
d3Helpers.multiAttr(
d3.select('rect.birdseye-brush'),
{
'width': screenWidth,
'height': screenHeight,
'stroke-width': (2 / birdseyeScale),
@ -280,9 +284,9 @@
source: 'birdseye'
};
})
.on('drag', function (d) {
d.x += d3.event.dx;
d.y += d3.event.dy;
.on('drag', function (event, d) {
d.x += event.dx;
d.y += event.dy;
// update the location of the brush
d3.select(this).attr('transform', function () {
@ -290,7 +294,7 @@
});
// transform the canvas
nfCanvasUtils.translateCanvas([-d3.event.dx, -d3.event.dy]);
nfCanvasUtils.translateCanvas([-event.dx, -event.dy]);
})
.on('end', function () {
// update component visibility
@ -304,8 +308,9 @@
});
// context area
birdseyeGroup.append('g')
.attrs({
d3Helpers.multiAttr(
birdseyeGroup.append('g'),
{
'pointer-events': 'all',
'class': 'birdseye-brush-container'
})

40
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
View File

@ -57,8 +57,8 @@
var nfGraph;
var trimLengthCaches = {};
var restrictedUsage = d3.map();
var requiredPermissions = d3.map();
var restrictedUsage = new Map();
var requiredPermissions = new Map();
var config = {
storage: {
@ -103,7 +103,7 @@
nfSnippet.create(snippet).done(function (response) {
// move the snippet into the target
nfSnippet.move(response.snippet.id, groupId).done(function () {
var componentMap = d3.map();
var componentMap = new Map();
// add the id to the type's array
var addComponent = function (type, id) {
@ -119,7 +119,7 @@
});
// refresh all component types as necessary (handle components that have been removed)
componentMap.each(function (ids, type) {
componentMap.forEach(function (ids, type) {
nfCanvasUtils.getComponentByType(type).remove(ids);
});
@ -808,11 +808,9 @@
var line = [];
var tspan = selection.append('tspan')
.attrs({
'x': x,
'y': y,
'width': width
});
.attr('x', x)
.attr('y', y)
.attr('width', width);
// go through each word
var word = words.pop();
@ -833,11 +831,9 @@
// create the tspan for the next line
tspan = selection.append('tspan')
.attrs({
'x': x,
'dy': '1.2em',
'width': width
});
.attr('x', x)
.attr('dy', '1.2em')
.attr('width', width);
// if we've reached the last line, use single line ellipsis
if (++i >= lineCount) {
@ -952,9 +948,9 @@
* @param {selection} selection The image
*/
disableImageHref: function (selection) {
selection.on('click.disableImageHref', function () {
if (d3.event.ctrlKey || d3.event.shiftKey) {
d3.event.preventDefault();
selection.on('click.disableImageHref', function (event) {
if (event.ctrlKey || event.shiftKey) {
event.preventDefault();
}
});
},
@ -1029,11 +1025,11 @@
* @param {selection} target The target of the tooltip
*/
canvasTooltip: function (tip, target) {
target.on('mouseenter', function () {
tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px').style('display', 'block');
target.on('mouseenter', function (event) {
tip.style('top', (event.pageY + 15) + 'px').style('left', (event.pageX + 15) + 'px').style('display', 'block');
})
.on('mousemove', function () {
tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px');
tip.style('top', (event.pageY + 15) + 'px').style('left', (event.pageX + 15) + 'px');
})
.on('mouseleave', function () {
tip.style('display', 'none');
@ -2089,7 +2085,7 @@
* @param additionalRequiredPermissions
*/
addComponentRestrictions: function (additionalRestrictedUsages, additionalRequiredPermissions) {
additionalRestrictedUsages.each(function (componentRestrictions, requiredPermissionId) {
additionalRestrictedUsages.forEach(function (componentRestrictions, requiredPermissionId) {
if (!restrictedUsage.has(requiredPermissionId)) {
restrictedUsage.set(requiredPermissionId, []);
}
@ -2098,7 +2094,7 @@
restrictedUsage.get(requiredPermissionId).push(componentRestriction);
});
});
additionalRequiredPermissions.each(function (requiredPermissionLabel, requiredPermissionId) {
additionalRequiredPermissions.forEach(function (requiredPermissionLabel, requiredPermissionId) {
if (!requiredPermissions.has(requiredPermissionId)) {
requiredPermissions.set(requiredPermissionId, requiredPermissionLabel);
}

186
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
View File

@ -35,9 +35,10 @@
'nf.ContextMenu',
'nf.Actions',
'nf.ProcessGroup',
'nf.ParameterContexts'],
function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts) {
return (nf.Canvas = factory($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts));
'nf.ParameterContexts',
'nf.ng.D3Helpers'],
function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts, d3Helpers) {
return (nf.Canvas = factory($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Canvas =
@ -57,7 +58,8 @@
require('nf.ContextMenu'),
require('nf.Actions'),
require('nf.ProcessGroup'),
require('nf.ParameterContexts')));
require('nf.ParameterContexts'),
require('nf.ng.D3Helpers')));
} else {
nf.Canvas = factory(root.$,
root.d3,
@ -75,9 +77,10 @@
root.nf.ContextMenu,
root.nf.Actions,
root.nf.ProcessGroup,
root.nf.ParameterContexts);
root.nf.ParameterContexts,
root.nf.ng.D3Helpers);
}
}(this, function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts) {
}(this, function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts, d3Helpers) {
'use strict';
var SCALE = 1;
@ -366,7 +369,7 @@
// create the canvas
svg = d3.select('#canvas-container').append('svg')
.on('contextmenu', function () {
.on('contextmenu', function (event) {
// reset the canvas click flag
canvasClicked = false;
@ -377,20 +380,21 @@
nfCanvasUtils.setURLParameters();
// show the context menu on the canvas
nfContextMenu.show();
nfContextMenu.show(event);
// prevent default browser behavior
d3.event.preventDefault();
event.preventDefault();
});
// create the definitions element
var defs = svg.append('defs');
// create arrow definitions for the various line types
defs.selectAll('marker')
d3Helpers.multiAttr(
defs.selectAll('marker')
.data(['normal', 'ghost', 'unauthorized', 'full'])
.enter().append('marker')
.attrs({
.enter().append('marker'),
{
'id': function (d) {
return d;
},
@ -416,46 +420,56 @@
.attr('d', 'M2,3 L0,6 L6,3 L0,0 z');
// filter for drop shadow
var componentDropShadowFilter = defs.append('filter')
.attrs({
'id': 'component-drop-shadow',
'height': '140%',
'y': '-20%'
});
var componentDropShadowFilter = d3Helpers.multiAttr(
defs.append('filter'),
{
id: 'component-drop-shadow',
height: '140%',
y: '-20%'
}
);
// blur
componentDropShadowFilter.append('feGaussianBlur')
.attrs({
d3Helpers.multiAttr(
componentDropShadowFilter.append('feGaussianBlur'),
{
'in': 'SourceAlpha',
'stdDeviation': 3,
'result': 'blur'
});
}
);
// offset
componentDropShadowFilter.append('feOffset')
.attrs({
d3Helpers.multiAttr(
componentDropShadowFilter.append('feOffset'),
{
'in': 'blur',
'dx': 0,
'dy': 1,
'result': 'offsetBlur'
});
}
);
// color/opacity
componentDropShadowFilter.append('feFlood')
.attrs({
d3Helpers.multiAttr(
componentDropShadowFilter.append('feFlood'),
{
'flood-color': '#000000',
'flood-opacity': 0.4,
'result': 'offsetColor'
});
}
);
// combine
componentDropShadowFilter.append('feComposite')
.attrs({
d3Helpers.multiAttr(
componentDropShadowFilter.append('feComposite'),
{
'in': 'offsetColor',
'in2': 'offsetBlur',
'operator': 'in',
'result': 'offsetColorBlur'
});
}
);
// stack the effect under the source graph
var componentDropShadowFeMerge = componentDropShadowFilter.append('feMerge');
@ -465,46 +479,56 @@
.attr('in', 'SourceGraphic');
// filter for drop shadow
var connectionFullDropShadowFilter = defs.append('filter')
.attrs({
'id': 'connection-full-drop-shadow',
'height': '140%',
'y': '-20%'
});
var connectionFullDropShadowFilter = d3Helpers.multiAttr(
defs.append('filter'),
{
id: 'connection-full-drop-shadow',
height: '140%',
y: '-20%'
}
);
// blur
connectionFullDropShadowFilter.append('feGaussianBlur')
.attrs({
d3Helpers.multiAttr(
connectionFullDropShadowFilter.append('feGaussianBlur'),
{
'in': 'SourceAlpha',
'stdDeviation': 3,
'result': 'blur'
});
}
);
// offset
connectionFullDropShadowFilter.append('feOffset')
.attrs({
d3Helpers.multiAttr(
connectionFullDropShadowFilter.append('feOffset'),
{
'in': 'blur',
'dx': 0,
'dy': 1,
'result': 'offsetBlur'
});
}
);
// color/opacity
connectionFullDropShadowFilter.append('feFlood')
.attrs({
d3Helpers.multiAttr(
connectionFullDropShadowFilter.append('feFlood'),
{
'flood-color': '#ba554a',
'flood-opacity': 1,
'result': 'offsetColor'
});
}
);
// combine
connectionFullDropShadowFilter.append('feComposite')
.attrs({
d3Helpers.multiAttr(
connectionFullDropShadowFilter.append('feComposite'),
{
'in': 'offsetColor',
'in2': 'offsetBlur',
'operator': 'in',
'result': 'offsetColorBlur'
});
}
);
// stack the effect under the source graph
var connectionFullFeMerge = connectionFullDropShadowFilter.append('feMerge');
@ -514,27 +538,29 @@
.attr('in', 'SourceGraphic');
// create the canvas element
canvas = svg.append('g')
.attrs({
canvas = d3Helpers.multiAttr(
svg.append('g'),
{
'transform': 'translate(' + TRANSLATE + ') scale(' + SCALE + ')',
'pointer-events': 'all',
'id': 'canvas'
});
}
);
// handle canvas events
svg.on('mousedown.selection', function () {
svg.on('mousedown.selection', function (event) {
canvasClicked = true;
if (d3.event.button !== 0) {
if (event.button !== 0) {
// prevent further propagation (to parents and others handlers
// on the same element to prevent zoom behavior)
d3.event.stopImmediatePropagation();
event.stopImmediatePropagation();
return;
}
// show selection box if shift is held down
if (d3.event.shiftKey) {
var position = d3.mouse(canvas.node());
if (event.shiftKey) {
var position = d3.pointer(event, canvas.node());
canvas.append('rect')
.attr('rx', 6)
.attr('ry', 6)
@ -553,21 +579,21 @@
// prevent further propagation (to parents and others handlers
// on the same element to prevent zoom behavior)
d3.event.stopImmediatePropagation();
event.stopImmediatePropagation();
// prevents the browser from changing to a text selection cursor
d3.event.preventDefault();
event.preventDefault();
}
})
.on('mousemove.selection', function () {
.on('mousemove.selection', function (event) {
// update selection box if shift is held down
if (d3.event.shiftKey) {
if (event.shiftKey) {
// get the selection box
var selectionBox = d3.select('rect.component-selection');
if (!selectionBox.empty()) {
// get the original position
var originalPosition = selectionBox.datum();
var position = d3.mouse(canvas.node());
var position = d3.pointer(event, canvas.node());
var d = {};
if (originalPosition[0] < position[0]) {
@ -587,10 +613,14 @@
}
// update the selection box
selectionBox.attrs(d);
selectionBox
.attr('width', d.width)
.attr('height', d.height)
.attr('x', d.x)
.attr('y', d.y);
// prevent further propagation (to parents)
d3.event.stopPropagation();
event.stopPropagation();
}
}
})
@ -673,10 +703,12 @@
'height': canvasHeight + 'px',
'bottom': bottom + 'px'
});
svg.attrs({
'height': canvasContainer.height(),
'width': $(window).width()
});
d3Helpers.multiAttr(
svg,
{
'height': canvasContainer.height(),
'width': $(window).width()
});
//breadcrumbs
nfNgBridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'});
@ -1166,16 +1198,16 @@
// hide the context menu
nfContextMenu.hide();
})
.on('zoom', function () {
.on('zoom', function (event) {
// update the current translation and scale
if (!isNaN(d3.event.transform.x)) {
x = d3.event.transform.x;
if (!isNaN(event.transform.x)) {
x = event.transform.x;
}
if (!isNaN(d3.event.transform.y)) {
y = d3.event.transform.y;
if (!isNaN(event.transform.y)) {
y = event.transform.y;
}
if (!isNaN(d3.event.transform.k)) {
k = d3.event.transform.k;
if (!isNaN(event.transform.k)) {
k = event.transform.k;
}
// indicate that we are panning to prevent deselection in zoom.end below
@ -1184,13 +1216,13 @@
// refresh the canvas
refreshed = nfCanvas.View.refresh({
persist: false,
transition: shouldTransition(d3.event.sourceEvent),
transition: shouldTransition(event.sourceEvent),
refreshComponents: false,
refreshBirdseye: false
});
})
.on('end', function () {
if (!isBirdseyeEvent(d3.event.sourceEvent)) {
.on('end', function (event) {
if (!isBirdseyeEvent(event.sourceEvent)) {
// ensure the canvas was actually refreshed
if (nfCommon.isDefinedAndNotNull(refreshed)) {
nfGraph.updateVisibility();

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-version.js
View File

@ -96,9 +96,9 @@
*/
var resetDialog = function () {
// clear the versions
var versions = versionMap.keys();
var versions = Array.from(versionMap.keys());
$.each(versions, function (_, version) {
versionMap.remove(version);
versionMap['delete'](version);
});
// clear the service apis
@ -149,7 +149,7 @@
return {
init: function (settings) {
versionMap = d3.map();
versionMap = new Map();
nfSettings = settings;
// initialize the component version dialog

82
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
View File

@ -22,23 +22,26 @@
define(['d3',
'nf.Connection',
'nf.ConnectionConfiguration',
'nf.CanvasUtils'],
function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
return (nf.Connectable = factory(d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils));
'nf.CanvasUtils',
'nf.ng.D3Helpers'],
function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils, d3Helpers) {
return (nf.Connectable = factory(d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Connectable =
factory(require('d3'),
require('nf.Connection'),
require('nf.ConnectionConfiguration'),
require('nf.CanvasUtils')));
require('nf.CanvasUtils'),
require('nf.ng.D3Helpers')));
} else {
nf.Connectable = factory(root.d3,
root.nf.Connection,
root.nf.ConnectionConfiguration,
root.nf.CanvasUtils);
root.nf.CanvasUtils,
root.nf.ng.D3Helpers);
}
}(this, function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
}(this, function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils, d3Helpers) {
'use strict';
var connect;
@ -62,8 +65,8 @@
*
* @returns {boolean}
*/
var allowConnection = function () {
return !d3.event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.component-selection').empty();
var allowConnection = function (event) {
return !event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.component-selection').empty();
};
return {
@ -72,16 +75,16 @@
// dragging behavior for the connector
connect = d3.drag()
.subject(function (d) {
origin = d3.mouse(canvas.node());
.subject(function (event, d) {
origin = d3.pointer(event, canvas.node());
return {
x: origin[0],
y: origin[1]
};
})
.on('start', function (d) {
.on('start', function (event) {
// stop further propagation
d3.event.sourceEvent.stopPropagation();
event.sourceEvent.stopPropagation();
// unselect the previous components
nfCanvasUtils.getSelection().classed('selected', false);
@ -96,20 +99,22 @@
var sourceData = source.datum();
// start the drag line and insert it first to keep it on the bottom
var position = d3.mouse(canvas.node());
canvas.insert('path', ':first-child')
.datum({
'sourceId': sourceData.id,
'sourceWidth': sourceData.dimensions.width,
'x': position[0],
'y': position[1]
})
.attrs({
const position = d3.pointer(event, canvas.node());
d3Helpers.multiAttr(
canvas.insert('path', ':first-child')
.datum({
sourceId: sourceData.id,
sourceWidth: sourceData.dimensions.width / 2,
x: sourceData.position.x + (sourceData.dimensions.width / 2),
y: sourceData.position.y + (sourceData.dimensions.height / 2)
}),
{
'class': 'connector',
'd': function (pathDatum) {
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + pathDatum.x + ' ' + pathDatum.y;
}
});
}
);
// updates the location of the connection img
d3.select(this).attr('transform', function () {
@ -119,10 +124,10 @@
// re-append the image to keep it on top
canvas.node().appendChild(this);
})
.on('drag', function (d) {
.on('drag', function (event) {
// updates the location of the connection img
d3.select(this).attr('transform', function () {
return 'translate(' + d3.event.x + ', ' + (d3.event.y + 50) + ')';
return 'translate(' + event.x + ', ' + (event.y + 50) + ')';
});
// mark node's connectable if supported
@ -133,7 +138,7 @@
// click and contextmenu events to appear like an attempt to connection the
// component to itself. requiring the mouse to have actually moved before
// checking the eligiblity of the destination addresses the issue
return (Math.abs(origin[0] - d3.event.x) > 10 || Math.abs(origin[1] - d3.event.y) > 10) &&
return (Math.abs(origin[0] - event.x) > 10 || Math.abs(origin[1] - event.y) > 10) &&
nfCanvasUtils.isValidConnectionDestination(d3.select(this));
});
@ -170,13 +175,13 @@
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
}
} else {
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + d3.event.x + ' ' + d3.event.y;
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + event.x + ' ' + event.y;
}
});
})
.on('end', function (d) {
.on('end', function (event, d) {
// stop further propagation
d3.event.sourceEvent.stopPropagation();
event.sourceEvent.stopPropagation();
// get the add connect img
var addConnect = d3.select(this);
@ -197,7 +202,7 @@
var sourceData = source.datum();
// get the mouse position relative to the source
var position = d3.mouse(source.node());
var position = d3.pointer(event, source.node());
// if the position is outside the component, remove the add connect img
if (position[0] < 0 || position[0] > sourceData.dimensions.width || position[1] < 0 || position[1] > sourceData.dimensions.height) {
@ -243,8 +248,8 @@
activate: function (components) {
components
.classed('connectable', true)
.on('mouseenter.connectable', function (d) {
if (allowConnection()) {
.on('mouseenter.connectable', function (event, d) {
if (allowConnection(event)) {
var selection = d3.select(this);
// ensure the current component supports connection source
@ -255,17 +260,16 @@
var x = (d.dimensions.width / 2) - 14;
var y = (d.dimensions.height / 2) + 14;
selection.append('text')
selection
.append('text')
.attr('class', 'add-connect')
.attr('transform', 'translate(' + x + ', ' + y + ')')
.text('\ue834')
.datum({
origX: x,
origY: y
})
.call(connect)
.attrs({
'class': 'add-connect',
'transform': 'translate(' + x + ', ' + y + ')'
})
.text('\ue834');
}
}
}
@ -280,8 +284,8 @@
// Using mouseover/out to workaround chrome issue #122746
.on('mouseover.connectable', function () {
// mark that we are hovering when appropriate
d3.select(this).classed('hover', function () {
return allowConnection();
d3.select(this).classed('hover', function (event) {
return allowConnection(event);
});
})
.on('mouseout.connection', function () {

547
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
View File

File diff suppressed because it is too large Load Diff

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js
View File

@ -917,7 +917,7 @@
/**
* Shows the context menu.
*/
show: function () {
show: function (event) {
// hide the menu if currently visible
nf.ContextMenu.hide();
@ -930,7 +930,7 @@
var selection = nfCanvasUtils.getSelection();
// get the location for the context menu
var position = d3.mouse(canvasBody);
var position = d3.pointer(event, canvasBody);
// determines if the specified menu positioned at x would overflow the available width
var overflowRight = function (x, menu) {
@ -1104,13 +1104,13 @@
* @param {selection} components The components to enable the context menu for
*/
activate: function (components) {
components.on('contextmenu.selection', function () {
components.on('contextmenu.selection', function (event) {
// get the clicked component to update selection
nfContextMenu.show();
nfContextMenu.show(event);
// stop propagation and prevent default
d3.event.preventDefault();
d3.event.stopPropagation();
event.preventDefault();
event.stopPropagation();
});
}
};

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
View File

@ -829,15 +829,15 @@
* @param {object} controllerService
*/
var getReferencingControllerServiceIds = function (controllerService) {
var ids = d3.set();
ids.add(controllerService.id);
var ids = new Set();
ids.push(controllerService.id);
var checkReferencingServices = function (referencingComponents) {
$.each(referencingComponents, function (_, referencingComponentEntity) {
var referencingComponent = referencingComponentEntity.component;
if (referencingComponent.referenceType === 'ControllerService') {
// add the id
ids.add(referencingComponent.id);
ids.push(referencingComponent.id);
// consider it's referencing components if appropriate
if (referencingComponent.referenceCycle === false) {

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
View File

@ -541,9 +541,9 @@
}).done(function (response) {
var id = 0;
var tags = [];
var groups = d3.set();
var restrictedUsage = d3.map();
var requiredPermissions = d3.map();
var groups = new Set();
var restrictedUsage = new Map();
var requiredPermissions = new Map();
// begin the update
controllerServiceTypesData.beginUpdate();
@ -638,7 +638,7 @@
text: 'all groups',
value: ''
}];
groups.each(function (group) {
groups.forEach(function (group) {
options.push({
text: group,
value: group

26
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
View File

@ -70,7 +70,7 @@
* @param {selection} dragSelection The current drag selection
*/
var updateComponentsPosition = function (dragSelection) {
var updates = d3.map();
var updates = new Map();
// determine the drag delta
var dragData = dragSelection.datum();
@ -158,11 +158,11 @@
// handle component drag events
drag = d3.drag()
.on('start', function () {
.on('start', function (event) {
// stop further propagation
d3.event.sourceEvent.stopPropagation();
event.sourceEvent.stopPropagation();
})
.on('drag', function () {
.on('drag', function (event) {
var dragSelection = d3.select('rect.drag-selection');
// lazily create the drag selection box
@ -216,19 +216,19 @@
} else {
// update the position of the drag selection
// snap align the position unless the user is holding shift
snapEnabled = !d3.event.sourceEvent.shiftKey;
snapEnabled = !event.sourceEvent.shiftKey;
dragSelection.attr('x', function (d) {
d.x += d3.event.dx;
d.x += event.dx;
return snapEnabled ? (Math.round(d.x/snapAlignmentPixels) * snapAlignmentPixels) : d.x;
}).attr('y', function (d) {
d.y += d3.event.dy;
d.y += event.dy;
return snapEnabled ? (Math.round(d.y/snapAlignmentPixels) * snapAlignmentPixels) : d.y;
});
}
})
.on('end', function () {
.on('end', function (event) {
// stop further propagation
d3.event.sourceEvent.stopPropagation();
event.sourceEvent.stopPropagation();
// get the drag selection
var dragSelection = d3.select('rect.drag-selection');
@ -362,11 +362,11 @@
* @param updates
*/
refreshConnections: function (updates) {
if (updates.size() > 0) {
if (updates.size > 0) {
// wait for all updates to complete
$.when.apply(window, updates.values()).done(function () {
$.when.apply(window, Array.from(updates.values())).done(function () {
var dragged = $.makeArray(arguments);
var connections = d3.set();
var connections = new Set();
// refresh this component
$.each(dragged, function (_, component) {
@ -383,7 +383,7 @@
});
// refresh the connections
connections.each(function (connectionId) {
connections.forEach(function (connectionId) {
nfConnection.refresh(connectionId);
});
}).always(function () {

64
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
View File

@ -23,9 +23,10 @@
'd3',
'nf.Common',
'nf.Client',
'nf.CanvasUtils'],
function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
return (nf.Funnel = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
'nf.CanvasUtils',
'nf.ng.D3Helpers'],
function ($, d3, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
return (nf.Funnel = factory($, d3, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Funnel =
@ -33,15 +34,17 @@
require('d3'),
require('nf.Common'),
require('nf.Client'),
require('nf.CanvasUtils')));
require('nf.CanvasUtils'),
require('nf.ng.D3Helpers')));
} else {
nf.Funnel = factory(root.$,
root.d3,
root.nf.Common,
root.nf.Client,
root.nf.CanvasUtils);
root.nf.CanvasUtils,
root.nf.ng.D3Helpers);
}
}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
'use strict';
var nfConnectable;
@ -81,7 +84,7 @@
* Selects the funnel elements against the current funnel map.
*/
var select = function () {
return funnelContainer.selectAll('g.funnel').data(funnelMap.values(), function (d) {
return funnelContainer.selectAll('g.funnel').data(Array.from(funnelMap.values()), function (d) {
return d.id;
});
};
@ -98,8 +101,9 @@
return entered;
}
var funnel = entered.append('g')
.attrs({
var funnel = d3Helpers.multiAttr(
entered.append('g'),
{
'id': function (d) {
return 'id-' + d.id;
},
@ -109,8 +113,9 @@
.call(nfCanvasUtils.position);
// funnel border
funnel.append('rect')
.attrs({
d3Helpers.multiAttr(
funnel.append('rect'),
{
'rx': 2,
'ry': 2,
'class': 'border',
@ -125,8 +130,9 @@
});
// funnel body
funnel.append('rect')
.attrs({
d3Helpers.multiAttr(
funnel.append('rect'),
{
'rx': 2,
'ry': 2,
'class': 'body',
@ -141,8 +147,9 @@
});
// funnel icon
funnel.append('text')
.attrs({
d3Helpers.multiAttr(
funnel.append('text'),
{
'class': 'funnel-icon',
'x': 9,
'y': 34
@ -209,13 +216,14 @@
nfSelectable = nfSelectableRef;
nfContextMenu = nfContextMenuRef;
funnelMap = d3.map();
removedCache = d3.map();
addedCache = d3.map();
funnelMap = new Map();
removedCache = new Map();
addedCache = new Map();
// create the funnel container
funnelContainer = d3.select('#canvas').append('g')
.attrs({
funnelContainer = d3Helpers.multiAttr(
d3.select('#canvas').append('g'),
{
'pointer-events': 'all',
'class': 'funnels'
});
@ -294,7 +302,7 @@
};
if ($.isArray(funnelEntities)) {
$.each(funnelMap.keys(), function (_, key) {
$.each(Array.from(funnelMap.keys()), function (_, key) {
var currentFunnelEntity = funnelMap.get(key);
var isPresent = $.grep(funnelEntities, function (proposedFunnelEntity) {
return proposedFunnelEntity.id === currentFunnelEntity.id;
@ -302,7 +310,7 @@
// if the current funnel is not present and was not recently added, remove it
if (isPresent.length === 0 && !addedCache.has(key)) {
funnelMap.remove(key);
funnelMap['delete'](key);
}
});
$.each(funnelEntities, function (_, funnelEntity) {
@ -334,7 +342,7 @@
*/
get: function (id) {
if (nfCommon.isUndefined(id)) {
return funnelMap.values();
return Array.from(funnelMap.values());
} else {
return funnelMap.get(id);
}
@ -393,11 +401,11 @@
if ($.isArray(funnelIds)) {
$.each(funnelIds, function (_, funnelId) {
removedCache.set(funnelId, now);
funnelMap.remove(funnelId);
funnelMap['delete'](funnelId);
});
} else {
removedCache.set(funnelIds, now);
funnelMap.remove(funnelIds);
funnelMap['delete'](funnelIds);
}
// apply the selection and handle all removed funnels
@ -408,7 +416,7 @@
* Removes all processors.
*/
removeAll: function () {
nfFunnel.remove(funnelMap.keys());
nfFunnel.remove(Array.from(funnelMap.keys()));
},
/**
@ -418,9 +426,9 @@
*/
expireCaches: function (timestamp) {
var expire = function (cache) {
cache.each(function (entryTimestamp, id) {
cache.forEach(function (entryTimestamp, id) {
if (timestamp > entryTimestamp) {
cache.remove(id);
cache['delete'](id);
}
});
};

95
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
View File

@ -24,9 +24,10 @@
'nf.Storage',
'nf.Common',
'nf.Client',
'nf.CanvasUtils'],
function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils) {
return (nf.Label = factory($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils));
'nf.CanvasUtils',
'nf.ng.D3Helpers'],
function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
return (nf.Label = factory($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Label =
@ -35,16 +36,18 @@
require('nf.Storage'),
require('nf.Common'),
require('nf.Client'),
require('nf.CanvasUtils')));
require('nf.CanvasUtils'),
require('nf.ng.D3Helpers')));
} else {
nf.Label = factory(root.$,
root.d3,
root.nf.Storage,
root.nf.Common,
root.nf.Client,
root.nf.CanvasUtils);
root.nf.CanvasUtils,
root.nf.ng.D3Helpers);
}
}(this, function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils) {
}(this, function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
'use strict';
var nfConnectable;
@ -100,7 +103,7 @@
* Selects the labels elements against the current label map.
*/
var select = function () {
return labelContainer.selectAll('g.label').data(labelMap.values(), function (d) {
return labelContainer.selectAll('g.label').data(Array.from(labelMap.values()), function (d) {
return d.id;
});
};
@ -128,8 +131,9 @@
return entered;
}
var label = entered.append('g')
.attrs({
var label = d3Helpers.multiAttr(
entered.append('g'),
{
'id': function (d) {
return 'id-' + d.id;
},
@ -139,24 +143,27 @@
.call(nfCanvasUtils.position);
// label border
label.append('rect')
.attrs({
d3Helpers.multiAttr(
label.append('rect'),
{
'class': 'border',
'fill': 'transparent',
'stroke': 'transparent'
});
// label
label.append('rect')
.attrs({
d3Helpers.multiAttr(
label.append('rect'),
{
'class': 'body',
'filter': 'url(#component-drop-shadow)',
'stroke-width': 0
});
// label value
label.append('text')
.attrs({
d3Helpers.multiAttr(
label.append('text'),
{
'xml:space': 'preserve',
'font-weight': 'bold',
'fill': 'black',
@ -180,8 +187,9 @@
}
// update the border using the configured color
updated.select('rect.border')
.attrs({
d3Helpers.multiAttr(
updated.select('rect.border'),
{
'width': function (d) {
return d.dimensions.width;
},
@ -194,8 +202,9 @@
});
// update the body fill using the configured color
updated.select('rect.body')
.attrs({
d3Helpers.multiAttr(
updated.select('rect.body'),
{
'width': function (d) {
return d.dimensions.width;
},
@ -289,8 +298,9 @@
var points = labelPoint.data(pointData);
// create a point for the end
var pointsEntered = points.enter().append('rect')
.attrs({
var pointsEntered = d3Helpers.multiAttr(
points.enter().append('rect'),
{
'class': 'labelpoint',
'width': 10,
'height': 10
@ -346,37 +356,38 @@
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
labelMap = d3.map();
removedCache = d3.map();
addedCache = d3.map();
labelMap = new Map();
removedCache = new Map();
addedCache = new Map();
// create the label container
labelContainer = d3.select('#canvas').append('g')
.attrs({
labelContainer = d3Helpers.multiAttr(
d3.select('#canvas').append('g'),
{
'pointer-events': 'all',
'class': 'labels'
});
// handle bend point drag events
labelPointDrag = d3.drag()
.on('start', function () {
.on('start', function (event) {
// stop further propagation
d3.event.sourceEvent.stopPropagation();
event.sourceEvent.stopPropagation();
})
.on('drag', function () {
.on('drag', function (event) {
var label = d3.select(this.parentNode);
var labelData = label.datum();
// update the dimensions and ensure they are still within bounds
// snap between aligned sizes unless the user is holding shift
snapEnabled = !d3.event.sourceEvent.shiftKey;
labelData.dimensions.width = Math.max(MIN_WIDTH, snapEnabled ? (Math.round(d3.event.x/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.x);
labelData.dimensions.height = Math.max(MIN_HEIGHT, snapEnabled ? (Math.round(d3.event.y/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.y);
snapEnabled = !event.sourceEvent.shiftKey;
labelData.dimensions.width = Math.max(MIN_WIDTH, snapEnabled ? (Math.round(event.x/snapAlignmentPixels) * snapAlignmentPixels) : event.x);
labelData.dimensions.height = Math.max(MIN_HEIGHT, snapEnabled ? (Math.round(event.y/snapAlignmentPixels) * snapAlignmentPixels) : event.y);
// redraw this connection
updateLabels(label);
})
.on('end', function () {
.on('end', function (event) {
var label = d3.select(this.parentNode);
var labelData = label.datum();
@ -437,7 +448,7 @@
}
// stop further propagation
d3.event.sourceEvent.stopPropagation();
event.sourceEvent.stopPropagation();
});
},
@ -513,7 +524,7 @@
};
if ($.isArray(labelEntities)) {
$.each(labelMap.keys(), function (_, key) {
$.each(Array.from(labelMap.keys()), function (_, key) {
var currentLabelEntity = labelMap.get(key);
var isPresent = $.grep(labelEntities, function (proposedLabelEntity) {
return proposedLabelEntity.id === currentLabelEntity.id;
@ -521,7 +532,7 @@
// if the current label is not present and was not recently added, remove it
if (isPresent.length === 0 && !addedCache.has(key)) {
labelMap.remove(key);
labelMap['delete'](key);
}
});
$.each(labelEntities, function (_, labelEntity) {
@ -553,7 +564,7 @@
*/
get: function (id) {
if (nfCommon.isUndefined(id)) {
return labelMap.values();
return Array.from(labelMap.values());
} else {
return labelMap.get(id);
}
@ -612,11 +623,11 @@
if ($.isArray(labelIds)) {
$.each(labelIds, function (_, labelId) {
removedCache.set(labelId, now);
labelMap.remove(labelId);
labelMap['delete'](labelId);
});
} else {
removedCache.set(labelIds, now);
labelMap.remove(labelIds);
labelMap['delete'](labelIds);
}
// apply the selection and handle all removed labels
@ -627,7 +638,7 @@
* Removes all label.
*/
removeAll: function () {
nfLabel.remove(labelMap.keys());
nfLabel.remove(Array.from(labelMap.keys()));
},
/**
@ -637,9 +648,9 @@
*/
expireCaches: function (timestamp) {
var expire = function (cache) {
cache.each(function (entryTimestamp, id) {
cache.forEach(function (entryTimestamp, id) {
if (timestamp > entryTimestamp) {
cache.remove(id);
cache['delete'](id);
}
});
};

151
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
View File

@ -24,9 +24,10 @@
'nf.Connection',
'nf.Common',
'nf.Client',
'nf.CanvasUtils'],
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
return (nf.Port = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
'nf.CanvasUtils',
'nf.ng.D3Helpers'],
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
return (nf.Port = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Port =
@ -35,16 +36,18 @@
require('nf.Connection'),
require('nf.Common'),
require('nf.Client'),
require('nf.CanvasUtils')));
require('nf.CanvasUtils'),
require('nf.ng.D3Helpers')));
} else {
nf.Port = factory(root.$,
root.d3,
root.nf.Connection,
root.nf.Common,
root.nf.Client,
root.nf.CanvasUtils);
root.nf.CanvasUtils,
root.nf.ng.D3Helpers);
}
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
'use strict';
var nfConnectable;
@ -96,7 +99,7 @@
* Selects the port elements against the current port map.
*/
var select = function () {
return portContainer.selectAll('g.input-port, g.output-port').data(portMap.values(), function (d) {
return portContainer.selectAll('g.input-port, g.output-port').data(Array.from(portMap.values()), function (d) {
return d.id;
});
};
@ -129,8 +132,9 @@
return entered;
}
var port = entered.append('g')
.attrs({
var port = d3Helpers.multiAttr(
entered.append('g'),
{
'id': function (d) {
return 'id-' + d.id;
},
@ -146,8 +150,9 @@
.call(nfCanvasUtils.position);
// port border
port.append('rect')
.attrs({
d3Helpers.multiAttr(
port.append('rect'),
{
'class': 'border',
'width': function (d) {
return d.dimensions.width;
@ -160,8 +165,9 @@
});
// port body
port.append('rect')
.attrs({
d3Helpers.multiAttr(
port.append('rect'),
{
'class': 'body',
'width': function (d) {
return d.dimensions.width;
@ -174,8 +180,9 @@
});
// port remote banner
port.append('rect')
.attrs({
d3Helpers.multiAttr(
port.append('rect'),
{
'class': 'remote-banner',
'width': remotePortDimensions.width,
'height': OFFSET_VALUE,
@ -184,8 +191,9 @@
.classed('hidden', isLocalPort);
// port icon
port.append('text')
.attrs({
d3Helpers.multiAttr(
port.append('text'),
{
'class': 'port-icon',
'x': 10,
'y': offsetY(38)
@ -199,8 +207,9 @@
});
// port name
port.append('text')
.attrs({
d3Helpers.multiAttr(
port.append('text'),
{
'x': 70,
'y': offsetY(25),
'width': 95,
@ -230,25 +239,27 @@
}
// port border authorization
updated.select('rect.border')
.classed('unauthorized', function (d) {
return d.permissions.canRead === false;
})
.attrs({
d3Helpers.multiAttr(
updated.select('rect.border'),
{
'height': function(d) {
return d.dimensions.height;
}
})
.classed('unauthorized', function (d) {
return d.permissions.canRead === false;
});
// port body authorization
updated.select('rect.body')
.classed('unauthorized', function (d) {
return d.permissions.canRead === false;
})
.attrs({
d3Helpers.multiAttr(
updated.select('rect.body'),
{
'height': function(d) {
return d.dimensions.height;
}
})
.classed('unauthorized', function (d) {
return d.permissions.canRead === false;
});
updated.each(function (portData) {
@ -265,8 +276,9 @@
details = port.append('g').attr('class', 'port-details');
// port transmitting icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'port-transmission-icon',
'x': 10,
'y': 18
@ -274,8 +286,9 @@
.classed('hidden', isLocalPort);
// bulletin background
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'class': 'bulletin-background',
'x': remotePortDimensions.width - OFFSET_VALUE,
'width': OFFSET_VALUE,
@ -284,8 +297,9 @@
.classed('hidden', isLocalPort);
// bulletin icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'bulletin-icon',
'x': remotePortDimensions.width - 18,
'y': 18
@ -294,8 +308,9 @@
.classed('hidden', isLocalPort);
// run status icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'run-status-icon',
'x': 50,
'y': offsetY(25)
@ -305,8 +320,9 @@
// comments
// --------
details.append('path')
.attrs({
d3Helpers.multiAttr(
details.append('path'),
{
'class': 'component-comments',
'transform': 'translate(' + (portData.dimensions.width - 2) + ', ' + (portData.dimensions.height - 10) + ')',
'd': 'm0,0 l0,8 l-8,0 z'
@ -317,16 +333,18 @@
// -------------------
// active thread count
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'active-thread-count-icon',
'y': offsetY(43)
})
.text('\ue83f');
// active thread icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'active-thread-count',
'y': offsetY(43)
});
@ -338,8 +356,9 @@
port.select('rect.remote-banner')
.classed('hidden', isLocalPort);
port.select('text.port-icon')
.attrs({
d3Helpers.multiAttr(
port.select('text.port-icon'),
{
'y': offsetY(38)
});
@ -353,7 +372,8 @@
.classed('hidden', isLocalPort);
// update the port name
port.select('text.port-name')
d3Helpers.multiAttr(
port.select('text.port-name')
.each(function (d) {
var portName = d3.select(this);
var name = d.component.name;
@ -369,7 +389,7 @@
} else {
nfCanvasUtils.multilineEllipsis(portName, 2, name, 'port-name');
}
}).attrs({
}), {
'y': offsetY(25)
}).append('title').text(function (d) {
return d.component.name;
@ -464,8 +484,9 @@
}
// update the run status
updated.select('text.run-status-icon')
.attrs({
d3Helpers.multiAttr(
updated.select('text.run-status-icon'),
{
'fill': function (d) {
var fill = '#728e9b';
@ -536,8 +557,9 @@
}
});
updated.select('text.port-transmission-icon')
.attrs({
d3Helpers.multiAttr(
updated.select('text.port-transmission-icon'),
{
'font-family': function (d) {
if (d.status.transmitting === true) {
return 'FontAwesome';
@ -641,13 +663,14 @@
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
portMap = d3.map();
removedCache = d3.map();
addedCache = d3.map();
portMap = new Map();
removedCache = new Map();
addedCache = new Map();
// create the port container
portContainer = d3.select('#canvas').append('g')
.attrs({
portContainer = d3Helpers.multiAttr(
d3.select('#canvas').append('g'),
{
'pointer-events': 'all',
'class': 'ports'
});
@ -734,7 +757,7 @@
// determine how to handle the specified port status
if ($.isArray(portEntities)) {
$.each(portMap.keys(), function (_, key) {
$.each(Array.from(portMap.keys()), function (_, key) {
var currentPortEntity = portMap.get(key);
var isPresent = $.grep(portEntities, function (proposedPortEntity) {
return proposedPortEntity.id === currentPortEntity.id;
@ -742,7 +765,7 @@
// if the current port is not present and was not recently added, remove it
if (isPresent.length === 0 && !addedCache.has(key)) {
portMap.remove(key);
portMap['delete'](key);
}
});
$.each(portEntities, function (_, portNode) {
@ -774,7 +797,7 @@
*/
get: function (id) {
if (nfCommon.isUndefined(id)) {
return portMap.values();
return Array.from(portMap.values());
} else {
return portMap.get(id);
}
@ -840,11 +863,11 @@
if ($.isArray(portIds)) {
$.each(portIds, function (_, portId) {
removedCache.set(portId, now);
portMap.remove(portId);
portMap['delete'](portId);
});
} else {
removedCache.set(portIds, now);
portMap.remove(portIds);
portMap['delete'](portIds);
}
// apply the selection and handle all removed ports
@ -855,7 +878,7 @@
* Removes all ports..
*/
removeAll: function () {
nfPort.remove(portMap.keys());
nfPort.remove(Array.from(portMap.keys()));
},
/**
@ -865,9 +888,9 @@
*/
expireCaches: function (timestamp) {
var expire = function (cache) {
cache.each(function (entryTimestamp, id) {
cache.forEach(function (entryTimestamp, id) {
if (timestamp > entryTimestamp) {
cache.remove(id);
cache['delete'](id);
}
});
};

549
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
View File

File diff suppressed because it is too large Load Diff

280
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
View File

@ -24,9 +24,10 @@
'nf.Common',
'nf.Client',
'nf.ClusterSummary',
'nf.CanvasUtils'],
function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils) {
return (nf.Processor = factory($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils));
'nf.CanvasUtils',
'nf.ng.D3Helpers'],
function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils, d3Helpers) {
return (nf.Processor = factory($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Processor =
@ -35,16 +36,18 @@
require('nf.Common'),
require('nf.Client'),
require('nf.ClusterSummary'),
require('nf.CanvasUtils')));
require('nf.CanvasUtils'),
require('nf.ng.D3Helpers')));
} else {
nf.Processor = factory(root.$,
root.d3,
root.nf.Common,
root.nf.Client,
root.nf.ClusterSummary,
root.nf.CanvasUtils);
root.nf.CanvasUtils,
root.nf.ng.D3Helpers);
}
}(this, function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils) {
}(this, function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils, d3Helpers) {
'use strict';
var nfConnectable;
@ -88,7 +91,7 @@
* Selects the processor elements against the current processor map.
*/
var select = function () {
return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) {
return processorContainer.selectAll('g.processor').data(Array.from(processorMap.values()), function (d) {
return d.id;
});
};
@ -105,8 +108,9 @@
return entered;
}
var processor = entered.append('g')
.attrs({
var processor = d3Helpers.multiAttr(
entered.append('g'),
{
'id': function (d) {
return 'id-' + d.id;
},
@ -116,8 +120,9 @@
.call(nfCanvasUtils.position);
// processor border
processor.append('rect')
.attrs({
d3Helpers.multiAttr(
processor.append('rect'),
{
'class': 'border',
'width': function (d) {
return d.dimensions.width;
@ -130,8 +135,9 @@
});
// processor body
processor.append('rect')
.attrs({
d3Helpers.multiAttr(
processor.append('rect'),
{
'class': 'body',
'width': function (d) {
return d.dimensions.width;
@ -144,8 +150,9 @@
});
// processor name
processor.append('text')
.attrs({
d3Helpers.multiAttr(
processor.append('text'),
{
'x': 75,
'y': 18,
'width': 230,
@ -154,8 +161,9 @@
});
// processor icon container
processor.append('rect')
.attrs({
d3Helpers.multiAttr(
processor.append('rect'),
{
'x': 0,
'y': 0,
'width': 50,
@ -164,8 +172,9 @@
});
// processor icon
processor.append('text')
.attrs({
d3Helpers.multiAttr(
processor.append('text'),
{
'x': 9,
'y': 35,
'class': 'processor-icon'
@ -173,8 +182,9 @@
.text('\ue807');
// restricted icon background
processor.append('circle')
.attrs({
d3Helpers.multiAttr(
processor.append('circle'),
{
'r': 9,
'cx': 12,
'cy': 12,
@ -182,8 +192,9 @@
});
// restricted icon
processor.append('text')
.attrs({
d3Helpers.multiAttr(
processor.append('text'),
{
'x': 7.75,
'y': 17,
'class': 'restricted'
@ -191,8 +202,9 @@
.text('\uf132');
// is primary icon background
processor.append('circle')
.attrs({
d3Helpers.multiAttr(
processor.append('circle'),
{
'r': 9,
'cx': 38,
'cy': 36,
@ -200,16 +212,17 @@
});
// is primary icon
processor.append('text')
.attrs({
d3Helpers.multiAttr(
processor.append('text'),
{
'x': 34.75,
'y': 40,
'class': 'is-primary'
})
.text('P')
.append('title').text(function (d) {
return 'This component is only scheduled to execute on the Primary Node';
});
return 'This component is only scheduled to execute on the Primary Node';
});
// make processors selectable
processor.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
@ -255,8 +268,9 @@
details = processor.append('g').attr('class', 'processor-canvas-details');
// run status icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'run-status-icon',
'x': 55,
'y': 23,
@ -265,8 +279,9 @@
});
// processor type
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'processor-type',
'x': 75,
'y': 32,
@ -275,8 +290,9 @@
});
// processor type
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'processor-bundle',
'x': 75,
'y': 45,
@ -291,8 +307,9 @@
// draw the processor statistics table
// in
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return processorData.dimensions.width;
},
@ -303,8 +320,9 @@
});
// border
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return processorData.dimensions.width;
},
@ -315,8 +333,9 @@
});
// read/write
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return processorData.dimensions.width;
},
@ -327,8 +346,9 @@
});
// border
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return processorData.dimensions.width;
},
@ -339,8 +359,9 @@
});
// out
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return processorData.dimensions.width;
},
@ -351,8 +372,9 @@
});
// border
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return processorData.dimensions.width;
},
@ -363,8 +385,9 @@
});
// tasks/time
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return processorData.dimensions.width;
},
@ -375,14 +398,16 @@
});
// stats label container
var processorStatsLabel = details.append('g')
.attrs({
var processorStatsLabel = d3Helpers.multiAttr(
details.append('g'),
{
'transform': 'translate(10, 55)'
});
// in label
processorStatsLabel.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsLabel.append('text'),
{
'width': 73,
'height': 10,
'y': 9,
@ -391,8 +416,9 @@
.text('In');
// read/write label
processorStatsLabel.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsLabel.append('text'),
{
'width': 73,
'height': 10,
'y': 27,
@ -401,8 +427,9 @@
.text('Read/Write');
// out label
processorStatsLabel.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsLabel.append('text'),
{
'width': 73,
'height': 10,
'y': 46,
@ -411,8 +438,9 @@
.text('Out');
// tasks/time label
processorStatsLabel.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsLabel.append('text'),
{
'width': 73,
'height': 10,
'y': 65,
@ -421,14 +449,16 @@
.text('Tasks/Time');
// stats value container
var processorStatsValue = details.append('g')
.attrs({
var processorStatsValue = d3Helpers.multiAttr(
details.append('g'),
{
'transform': 'translate(85, 55)'
});
// in value
var inText = processorStatsValue.append('text')
.attrs({
var inText = d3Helpers.multiAttr(
processorStatsValue.append('text'),
{
'width': 180,
'height': 9,
'y': 9,
@ -436,20 +466,23 @@
});
// in count
inText.append('tspan')
.attrs({
d3Helpers.multiAttr(
inText.append('tspan'),
{
'class': 'count'
});
// in size
inText.append('tspan')
.attrs({
d3Helpers.multiAttr(
inText.append('tspan'),
{
'class': 'size'
});
// read/write value
processorStatsValue.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsValue.append('text'),
{
'width': 180,
'height': 10,
'y': 27,
@ -457,8 +490,9 @@
});
// out value
var outText = processorStatsValue.append('text')
.attrs({
var outText = d3Helpers.multiAttr(
processorStatsValue.append('text'),
{
'width': 180,
'height': 10,
'y': 46,
@ -466,20 +500,23 @@
});
// out count
outText.append('tspan')
.attrs({
d3Helpers.multiAttr(
outText.append('tspan'),
{
'class': 'count'
});
// out size
outText.append('tspan')
.attrs({
d3Helpers.multiAttr(
outText.append('tspan'),
{
'class': 'size'
});
// tasks/time value
processorStatsValue.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsValue.append('text'),
{
'width': 180,
'height': 10,
'y': 65,
@ -491,8 +528,9 @@
.attr('transform', 'translate(305, 55)');
// in info
processorStatsInfo.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsInfo.append('text'),
{
'width': 25,
'height': 10,
'y': 9,
@ -501,8 +539,9 @@
.text('5 min');
// read/write info
processorStatsInfo.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsInfo.append('text'),
{
'width': 25,
'height': 10,
'y': 27,
@ -511,8 +550,9 @@
.text('5 min');
// out info
processorStatsInfo.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsInfo.append('text'),
{
'width': 25,
'height': 10,
'y': 46,
@ -521,8 +561,9 @@
.text('5 min');
// tasks/time info
processorStatsInfo.append('text')
.attrs({
d3Helpers.multiAttr(
processorStatsInfo.append('text'),
{
'width': 25,
'height': 10,
'y': 65,
@ -534,8 +575,9 @@
// comments
// --------
details.append('path')
.attrs({
d3Helpers.multiAttr(
details.append('path'),
{
'class': 'component-comments',
'transform': 'translate(' + (processorData.dimensions.width - 2) + ', ' + (processorData.dimensions.height - 10) + ')',
'd': 'm0,0 l0,8 l-8,0 z'
@ -546,16 +588,18 @@
// -------------------
// active thread count
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'active-thread-count-icon',
'y': 46
})
.text('\ue83f');
// active thread background
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'active-thread-count',
'y': 46
});
@ -565,8 +609,9 @@
// ---------
// bulletin background
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'class': 'bulletin-background',
'x': function (d) {
return processorData.dimensions.width - 24;
@ -576,8 +621,9 @@
});
// bulletin icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'bulletin-icon',
'x': function (d) {
return processorData.dimensions.width - 17;
@ -599,8 +645,8 @@
// apply ellipsis to the processor name as necessary
nfCanvasUtils.ellipsis(processorName, d.component.name, 'processor-name');
}).append('title').text(function (d) {
return d.component.name;
});
return d.component.name;
});
// update the processor type
processor.select('text.processor-type')
@ -613,8 +659,8 @@
// apply ellipsis to the processor type as necessary
nfCanvasUtils.ellipsis(processorType, nfCommon.formatType(d.component), 'processor-type');
}).append('title').text(function (d) {
return nfCommon.formatType(d.component);
});
return nfCommon.formatType(d.component);
});
// update the processor bundle
processor.select('text.processor-bundle')
@ -627,8 +673,8 @@
// apply ellipsis to the processor type as necessary
nfCanvasUtils.ellipsis(processorBundle, nfCommon.formatBundle(d.component.bundle), 'processor-bundle');
}).append('title').text(function (d) {
return nfCommon.formatBundle(d.component.bundle);
});
return nfCommon.formatBundle(d.component.bundle);
});
// update the processor comments
processor.select('path.component-comments')
@ -837,8 +883,9 @@
}
// update the run status
updated.select('text.run-status-icon')
.attrs({
d3Helpers.multiAttr(
updated.select('text.run-status-icon'),
{
'fill': function (d) {
var fill = '#728e9b';
@ -1013,13 +1060,14 @@
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
processorMap = d3.map();
removedCache = d3.map();
addedCache = d3.map();
processorMap = new Map();
removedCache = new Map();
addedCache = new Map();
// create the processor container
processorContainer = d3.select('#canvas').append('g')
.attrs({
processorContainer = d3Helpers.multiAttr(
d3.select('#canvas').append('g'),
{
'pointer-events': 'all',
'class': 'processors'
});
@ -1099,7 +1147,7 @@
// determine how to handle the specified processor
if ($.isArray(processorEntities)) {
$.each(processorMap.keys(), function (_, key) {
$.each(Array.from(processorMap.keys()), function (_, key) {
var currentProcessorEntity = processorMap.get(key);
var isPresent = $.grep(processorEntities, function (proposedProcessorEntity) {
return proposedProcessorEntity.id === currentProcessorEntity.id;
@ -1107,7 +1155,7 @@
// if the current processor is not present and was not recently added, remove it
if (isPresent.length === 0 && !addedCache.has(key)) {
processorMap.remove(key);
processorMap['delete'](key);
}
});
$.each(processorEntities, function (_, processorEntity) {
@ -1140,7 +1188,7 @@
*/
get: function (id) {
if (nfCommon.isUndefined(id)) {
return processorMap.values();
return Array.from(processorMap.values());
} else {
return processorMap.get(id);
}
@ -1206,11 +1254,11 @@
if ($.isArray(processorIds)) {
$.each(processorIds, function (_, processorId) {
removedCache.set(processorId, now);
processorMap.remove(processorId);
processorMap['delete'](processorId);
});
} else {
removedCache.set(processorIds, now);
processorMap.remove(processorIds);
processorMap['delete'](processorIds);
}
// apply the selection and handle all removed processors
@ -1221,7 +1269,7 @@
* Removes all processors.
*/
removeAll: function () {
nfProcessor.remove(processorMap.keys());
nfProcessor.remove(Array.from(processorMap.keys()));
},
/**
@ -1231,9 +1279,9 @@
*/
expireCaches: function (timestamp) {
var expire = function (cache) {
cache.each(function (entryTimestamp, id) {
cache.forEach(function (entryTimestamp, id) {
if (timestamp > entryTimestamp) {
cache.remove(id);
cache['delete'](id);
}
});
};

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-quick-select.js
View File

@ -51,7 +51,7 @@
/**
* Attempts to show configuration or details dialog for the specified slection.
*/
quickSelect: function () {
quickSelect: function (event) {
var selection = nfCanvasUtils.getSelection();
if (nfCanvasUtils.isConfigurable(selection)) {
@ -61,8 +61,8 @@
}
// stop propagation and prevent default
d3.event.preventDefault();
d3.event.stopPropagation();
event.preventDefault();
event.stopPropagation();
},
/**
@ -71,9 +71,9 @@
* @param {selection} components
*/
activate: function (components) {
components.on('dblclick', function () {
components.on('dblclick', function (event) {
// get the clicked component to update selection
nfQuickSelect.quickSelect();
nfQuickSelect.quickSelect(event);
});
}
};

214
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
View File

@ -24,9 +24,10 @@
'nf.Connection',
'nf.Common',
'nf.Client',
'nf.CanvasUtils'],
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
'nf.CanvasUtils',
'nf.ng.D3Helpers'],
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.RemoteProcessGroup =
@ -35,16 +36,18 @@
require('nf.Connection'),
require('nf.Common'),
require('nf.Client'),
require('nf.CanvasUtils')));
require('nf.CanvasUtils'),
require('nf.ng.D3Helpers')));
} else {
nf.RemoteProcessGroup = factory(root.$,
root.d3,
root.nf.Connection,
root.nf.Common,
root.nf.Client,
root.nf.CanvasUtils);
root.nf.CanvasUtils,
root.nf.ng.D3Helpers);
}
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
'use strict';
var nfConnectable;
@ -87,7 +90,7 @@
* Selects the remote process group elements against the current remote process group map.
*/
var select = function () {
return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) {
return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(Array.from(remoteProcessGroupMap.values()), function (d) {
return d.id;
});
};
@ -104,8 +107,9 @@
return entered;
}
var remoteProcessGroup = entered.append('g')
.attrs({
var remoteProcessGroup = d3Helpers.multiAttr(
entered.append('g'),
{
'id': function (d) {
return 'id-' + d.id;
},
@ -119,8 +123,9 @@
// ----
// remote process group border
remoteProcessGroup.append('rect')
.attrs({
d3Helpers.multiAttr(
remoteProcessGroup.append('rect'),
{
'class': 'border',
'width': function (d) {
return d.dimensions.width;
@ -133,8 +138,9 @@
});
// remote process group body
remoteProcessGroup.append('rect')
.attrs({
d3Helpers.multiAttr(
remoteProcessGroup.append('rect'),
{
'class': 'body',
'width': function (d) {
return d.dimensions.width;
@ -147,8 +153,9 @@
});
// remote process group name background
remoteProcessGroup.append('rect')
.attrs({
d3Helpers.multiAttr(
remoteProcessGroup.append('rect'),
{
'width': function (d) {
return d.dimensions.width;
},
@ -157,8 +164,9 @@
});
// remote process group name
remoteProcessGroup.append('text')
.attrs({
d3Helpers.multiAttr(
remoteProcessGroup.append('text'),
{
'x': 30,
'y': 20,
'width': 305,
@ -207,8 +215,9 @@
details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
// remote process group transmission status
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'remote-process-group-transmission-status',
'x': 10,
'y': 20
@ -218,8 +227,9 @@
// details background
// ------------------
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'x': 0,
'y': 32,
'width': function () {
@ -234,16 +244,18 @@
// -------
// remote process group secure transfer
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'remote-process-group-transmission-secure',
'x': 10,
'y': 48
});
// remote process group uri
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'x': 30,
'y': 48,
'width': 305,
@ -256,8 +268,9 @@
// ----------------
// sent
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return remoteProcessGroupData.dimensions.width;
},
@ -268,8 +281,9 @@
});
// border
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return remoteProcessGroupData.dimensions.width;
},
@ -280,8 +294,9 @@
});
// received
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'width': function () {
return remoteProcessGroupData.dimensions.width;
},
@ -296,14 +311,16 @@
// -----
// stats label container
var remoteProcessGroupStatsLabel = details.append('g')
.attrs({
var remoteProcessGroupStatsLabel = d3Helpers.multiAttr(
details.append('g'),
{
'transform': 'translate(6, 75)'
});
// sent label
remoteProcessGroupStatsLabel.append('text')
.attrs({
d3Helpers.multiAttr(
remoteProcessGroupStatsLabel.append('text'),
{
'width': 73,
'height': 10,
'x': 4,
@ -313,8 +330,9 @@
.text('Sent');
// received label
remoteProcessGroupStatsLabel.append('text')
.attrs({
d3Helpers.multiAttr(
remoteProcessGroupStatsLabel.append('text'),
{
'width': 73,
'height': 10,
'x': 4,
@ -324,14 +342,16 @@
.text('Received');
// stats value container
var remoteProcessGroupStatsValue = details.append('g')
.attrs({
var remoteProcessGroupStatsValue = d3Helpers.multiAttr(
details.append('g'),
{
'transform': 'translate(95, 75)'
});
// sent value
var sentText = remoteProcessGroupStatsValue.append('text')
.attrs({
var sentText = d3Helpers.multiAttr(
remoteProcessGroupStatsValue.append('text'),
{
'width': 180,
'height': 10,
'x': 4,
@ -340,26 +360,30 @@
});
// sent count
sentText.append('tspan')
.attrs({
d3Helpers.multiAttr(
sentText.append('tspan'),
{
'class': 'count'
});
// sent size
sentText.append('tspan')
.attrs({
d3Helpers.multiAttr(
sentText.append('tspan'),
{
'class': 'size'
});
// sent ports
sentText.append('tspan')
.attrs({
d3Helpers.multiAttr(
sentText.append('tspan'),
{
'class': 'ports'
});
// received value
var receivedText = remoteProcessGroupStatsValue.append('text')
.attrs({
var receivedText = d3Helpers.multiAttr(
remoteProcessGroupStatsValue.append('text'),
{
'width': 180,
'height': 10,
'x': 4,
@ -368,32 +392,37 @@
});
// received ports
receivedText.append('tspan')
.attrs({
d3Helpers.multiAttr(
receivedText.append('tspan'),
{
'class': 'ports'
});
// received count
receivedText.append('tspan')
.attrs({
d3Helpers.multiAttr(
receivedText.append('tspan'),
{
'class': 'count'
});
// received size
receivedText.append('tspan')
.attrs({
d3Helpers.multiAttr(
receivedText.append('tspan'),
{
'class': 'size'
});
// stats value container
var processGroupStatsInfo = details.append('g')
.attrs({
var processGroupStatsInfo = d3Helpers.multiAttr(
details.append('g'),
{
'transform': 'translate(335, 75)'
});
// sent info
processGroupStatsInfo.append('text')
.attrs({
d3Helpers.multiAttr(
processGroupStatsInfo.append('text'),
{
'width': 25,
'height': 10,
'x': 4,
@ -403,8 +432,9 @@
.text('5 min');
// received info
processGroupStatsInfo.append('text')
.attrs({
d3Helpers.multiAttr(
processGroupStatsInfo.append('text'),
{
'width': 25,
'height': 10,
'x': 4,
@ -417,8 +447,9 @@
// last refreshed time
// -------------------
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'x': 0,
'y': function () {
return remoteProcessGroupData.dimensions.height - 24;
@ -430,8 +461,9 @@
'fill': '#e3e8eb'
});
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'x': 10,
'y': 168,
'class': 'remote-process-group-last-refresh'
@ -441,8 +473,9 @@
// comments
// --------
details.append('path')
.attrs({
d3Helpers.multiAttr(
details.append('path'),
{
'class': 'component-comments',
'transform': 'translate(' + (remoteProcessGroupData.dimensions.width - 2) + ', ' + (remoteProcessGroupData.dimensions.height - 10) + ')',
'd': 'm0,0 l0,8 l-8,0 z'
@ -453,16 +486,18 @@
// -------------------
// active thread count
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'active-thread-count-icon',
'y': 20
})
.text('\ue83f');
// active thread icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'active-thread-count',
'y': 20
});
@ -472,8 +507,9 @@
// ---------
// bulletin background
details.append('rect')
.attrs({
d3Helpers.multiAttr(
details.append('rect'),
{
'class': 'bulletin-background',
'x': function () {
return remoteProcessGroupData.dimensions.width - 24;
@ -484,8 +520,9 @@
});
// bulletin icon
details.append('text')
.attrs({
d3Helpers.multiAttr(
details.append('text'),
{
'class': 'bulletin-icon',
'x': function () {
return remoteProcessGroupData.dimensions.width - 17;
@ -859,13 +896,14 @@
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
remoteProcessGroupMap = d3.map();
removedCache = d3.map();
addedCache = d3.map();
remoteProcessGroupMap = new Map();
removedCache = new Map();
addedCache = new Map();
// create the process group container
remoteProcessGroupContainer = d3.select('#canvas').append('g')
.attrs({
remoteProcessGroupContainer = d3Helpers.multiAttr(
d3.select('#canvas').append('g'),
{
'pointer-events': 'all',
'class': 'remote-process-groups'
});
@ -945,7 +983,7 @@
// determine how to handle the specified remote process groups
if ($.isArray(remoteProcessGroupEntities)) {
$.each(remoteProcessGroupMap.keys(), function (_, key) {
$.each(Array.from(remoteProcessGroupMap.keys()), function (_, key) {
var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(key);
var isPresent = $.grep(remoteProcessGroupEntities, function (proposedRemoteProcessGroupEntity) {
return proposedRemoteProcessGroupEntity.id === currentRemoteProcessGroupEntity.id;
@ -953,7 +991,7 @@
// if the current remote process group is not present and was not recently added, remove it
if (isPresent.length === 0 && !addedCache.has(key)) {
remoteProcessGroupMap.remove(key);
remoteProcessGroupMap['delete'](key);
}
});
$.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
@ -985,7 +1023,7 @@
*/
get: function (id) {
if (nfCommon.isUndefined(id)) {
return remoteProcessGroupMap.values();
return Array.from(remoteProcessGroupMap.values());
} else {
return remoteProcessGroupMap.get(id);
}
@ -1059,11 +1097,11 @@
if ($.isArray(remoteProcessGroupIds)) {
$.each(remoteProcessGroupIds, function (_, remoteProcessGroupId) {
removedCache.set(remoteProcessGroupId, now);
remoteProcessGroupMap.remove(remoteProcessGroupId);
remoteProcessGroupMap['delete'](remoteProcessGroupId);
});
} else {
removedCache.set(remoteProcessGroupIds, now);
remoteProcessGroupMap.remove(remoteProcessGroupIds);
remoteProcessGroupMap['delete'](remoteProcessGroupIds);
}
// apply the selection and handle all removed remote process groups
@ -1074,7 +1112,7 @@
* Removes all remote process groups.
*/
removeAll: function () {
nfRemoteProcessGroup.remove(remoteProcessGroupMap.keys());
nfRemoteProcessGroup.remove(Array.from(remoteProcessGroupMap.keys()));
},
/**
@ -1084,9 +1122,9 @@
*/
expireCaches: function (timestamp) {
var expire = function (cache) {
cache.each(function (entryTimestamp, id) {
cache.forEach(function (entryTimestamp, id) {
if (timestamp > entryTimestamp) {
cache.remove(id);
cache['delete'](id);
}
});
};

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-selectable.js
View File

@ -43,14 +43,14 @@
var nfSelectable = {
select: function (g) {
select: function (event, g) {
// hide any context menus as necessary
nfContextMenu.hide();
// only need to update selection if necessary
if (!g.classed('selected')) {
// since we're not appending, deselect everything else
if (!d3.event.shiftKey) {
if (!event.shiftKey) {
d3.selectAll('g.selected').classed('selected', false);
}
@ -58,7 +58,7 @@
g.classed('selected', true);
} else {
// we are currently selected, if shift key the deselect
if (d3.event.shiftKey) {
if (event.shiftKey) {
g.classed('selected', false);
}
}
@ -68,7 +68,7 @@
nfNgBridge.digest();
// stop propagation
d3.event.stopPropagation();
event.stopPropagation();
},
/**
@ -77,9 +77,9 @@
* @param {selection} components
*/
activate: function (components) {
components.on('mousedown.selection', function () {
components.on('mousedown.selection', function (event) {
// get the clicked component to update selection
nfSelectable.select(d3.select(this));
nfSelectable.select(event, d3.select(this));
// update URL deep linking params
nfCanvasUtils.setURLParameters();

16
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
View File

@ -960,9 +960,9 @@
}).done(function (response) {
var id = 0;
var tags = [];
var groups = d3.set();
var restrictedUsage = d3.map();
var requiredPermissions = d3.map();
var groups = new Set();
var restrictedUsage = new Map();
var requiredPermissions = new Map();
// begin the update
reportingTaskTypesData.beginUpdate();
@ -1056,7 +1056,7 @@
text: 'all groups',
value: ''
}];
groups.each(function (group) {
groups.forEach(function (group) {
options.push({
text: group,
value: group
@ -1362,9 +1362,9 @@
}).done(function (response) {
var id = 0;
var tags = [];
var groups = d3.set();
var restrictedUsage = d3.map();
var requiredPermissions = d3.map();
var groups = new Set();
var restrictedUsage = new Map();
var requiredPermissions = new Map();
// begin the update
parameterProviderTypesData.beginUpdate();
@ -1458,7 +1458,7 @@
text: 'all groups',
value: ''
}];
groups.each(function (group) {
groups.forEach(function (group) {
options.push({
text: group,
value: group

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
View File

@ -356,8 +356,8 @@
// add status history details
var detailsContainer = buildDetailsContainer('Status History');
d3.map(statusHistory.details).each(function (value, label) {
addDetailItem(detailsContainer, label, value);
Object.entries(statusHistory.details).forEach(function(key, value) {
addDetailItem(detailsContainer, key, value);
});
var margin = {

237
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
View File

@ -203,8 +203,8 @@
var maxMillis;
// data lookups
var nodeLookup = d3.map();
var linkLookup = d3.map();
var nodeLookup = new Map();
var linkLookup = new Map();
var locateDescendants = function (nodeIds, descendants, depth) {
$.each(nodeIds, function (_, nodeId) {
@ -225,9 +225,9 @@
};
var positionNodes = function (nodeIds, depth, parents, levelDifference) {
var immediateSet = d3.set(nodeIds);
var childSet = d3.set();
var descendantSet = d3.set();
var immediateSet = new Set(nodeIds);
var childSet = new Set();
var descendantSet = new Set();
// locate children
locateDescendants(nodeIds, childSet, 1);
@ -238,16 +238,16 @@
// 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.each(function (d) {
immediateSet.remove(d);
descendantSet.forEach(function (d) {
immediateSet['delete'](d);
});
// convert the children to an array to ensure consistent
// order when performing index of checks below
var children = childSet.values().sort(d3.descending);
var children = Array.from(childSet.values()).sort(d3.descending);
// convert the immediate to allow for sorting below
var immediate = immediateSet.values();
var immediate = Array.from(immediateSet.values());
// attempt to identify fan in/out cases
var nodesWithTwoParents = 0;
@ -475,10 +475,10 @@
var refresh = function (provenanceTableCtrl) {
// consider all nodes as starting points
var startNodes = d3.set(nodeLookup.keys());
var startNodes = new Set(Array.from(nodeLookup.keys()));
// go through the nodes to reset their outgoing links
nodeLookup.each(function (node, id) {
nodeLookup.forEach(function (node, id) {
node.outgoing = [];
node.incoming = [];
@ -493,17 +493,17 @@
});
// go through the links in order to compute the new layout
linkLookup.each(function (link, id) {
linkLookup.forEach(function (link, id) {
// updating the nodes connections
link.source.outgoing.push(link);
link.target.incoming.push(link);
// remove the target from being a potential starting node
startNodes.remove(link.target.id);
startNodes['delete'](link.target.id);
});
// position the nodes
positionNodes(startNodes.values(), 1, [], 50);
positionNodes(Array.from(startNodes.values()), 1, [], 50);
// update the slider min/max/step values
var step = (maxMillis - minMillis) / config.sliderTickCount;
@ -537,9 +537,9 @@
// handle zoom behavior
var lineageZoom = d3.zoom()
.scaleExtent([0.2, 8])
.on('zoom', function () {
.on('zoom', function (event) {
d3.select('g.lineage').attr('transform', function () {
return 'translate(' + d3.event.transform.x + ', ' + d3.event.transform.y + ') scale(' + d3.event.transform.k + ')';
return 'translate(' + event.transform.x + ', ' + event.transform.y + ') scale(' + event.transform.k + ')';
});
});
@ -549,20 +549,20 @@
.attr('height', '100%')
.call(lineageZoom)
.on('dblclick.zoom', null)
.on('mousedown', function (d) {
.on('mousedown', function (event, d) {
// hide the context menu if necessary
d3.selectAll('circle.context').classed('context', false);
$('#provenance-lineage-context-menu').hide().empty();
// prevents browser from using text cursor
d3.event.preventDefault();
event.preventDefault();
})
.on('contextmenu', function () {
.on('contextmenu', function (event) {
var contextMenu = $('#provenance-lineage-context-menu');
// if there is something to show in the context menu
if (!contextMenu.is(':empty')) {
var position = d3.mouse(this);
var position = d3.pointer(event, this);
// show the context menu
contextMenu.css({
@ -572,41 +572,37 @@
}
// prevent the native default context menu
d3.event.preventDefault();
event.preventDefault();
});
svg.append('rect')
.attrs({
'width': '100%',
'height': '100%',
'fill': '#f9fafb'
});
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', '#f9fafb');
svg.append('defs').selectAll('marker')
.data(['FLOWFILE', 'FLOWFILE-SELECTED', 'EVENT', 'EVENT-SELECTED'])
.enter().append('marker')
.attrs({
'id': function (d) {
return d;
},
'viewBox': '0 -3 6 6',
'refX': function (d) {
if (d.indexOf('FLOWFILE') >= 0) {
return 16;
} else {
return 11;
}
},
'refY': 0,
'markerWidth': 6,
'markerHeight': 6,
'orient': 'auto',
'fill': function (d) {
if (d.indexOf('SELECTED') >= 0) {
return '#ba554a';
} else {
return '#000000';
}
.attr('id', function (d) {
return d;
})
.attr('viewBox', '0 -3 6 6')
.attr('refX', function (d) {
if (d.indexOf('FLOWFILE') >= 0) {
return 16;
} else {
return 11;
}
})
.attr('refY', 0)
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.attr('fill', function (d) {
if (d.indexOf('SELECTED') >= 0) {
return '#ba554a';
} else {
return '#000000';
}
})
.append('path')
@ -614,11 +610,9 @@
// group everything together
var lineageContainer = svg.append('g')
.attrs({
'transform': 'translate(0, 0) scale(1)',
'pointer-events': 'all',
'class': 'lineage'
});
.attr('transform', 'translate(0, 0) scale(1)')
.attr('pointer-events', 'all')
.attr('class', 'lineage');
// select the nodes and links
var nodes = lineageContainer.selectAll('g.node');
@ -673,19 +667,17 @@
var renderFlowFile = function (flowfiles) {
flowfiles
.classed('flowfile', true)
.on('mousedown', function (d) {
d3.event.stopPropagation();
.on('mousedown', function (event, d) {
event.stopPropagation();
});
// node
flowfiles.append('circle')
.attrs({
'r': 16,
'fill': '#fff',
'stroke': '#000',
'stroke-width': 1.0
})
.on('mouseover', function (d) {
.attr('r', 16)
.attr('fill', '#fff')
.attr('stroke', '#000')
.attr('stroke-width', 1.0)
.on('mouseover', function (event, d) {
links.filter(function (linkDatum) {
return d.id === linkDatum.flowFileUuid;
})
@ -694,7 +686,7 @@
return 'url(#' + d.target.type + '-SELECTED)';
});
})
.on('mouseout', function (d) {
.on('mouseout', function (event, d) {
links.filter(function (linkDatum) {
return d.id === linkDatum.flowFileUuid;
}).classed('selected', false)
@ -704,21 +696,17 @@
});
var icon = flowfiles.append('g')
.attrs({
'class': 'flowfile-icon',
'transform': function (d) {
return 'translate(-9,-9)';
}
.attr('class', 'flowfile-icon')
.attr('transform', function (d) {
return 'translate(-9,-9)';
}).append('text')
.attrs({
'font-family': 'flowfont',
'font-size': '18px',
'fill': '#ad9897',
'transform': function (d) {
return 'translate(0,15)';
}
.attr('font-family', 'flowfont')
.attr('font-size', '18px')
.attr('fill', '#ad9897')
.attr('transform', function (d) {
return 'translate(0,15)';
})
.on('mouseover', function (d) {
.on('mouseover', function (event, d) {
links.filter(function (linkDatum) {
return d.id === linkDatum.flowFileUuid;
})
@ -727,7 +715,7 @@
return 'url(#' + d.target.type + '-SELECTED)';
});
})
.on('mouseout', function (d) {
.on('mouseout', function (event, d) {
links.filter(function (linkDatum) {
return d.id === linkDatum.flowFileUuid;
}).classed('selected', false)
@ -890,14 +878,14 @@
provenanceTableCtrl.getEventDetails(eventId, clusterNodeId).done(function (response) {
var provenanceEvent = response.provenanceEvent;
var eventUuid = provenanceEvent.flowFileUuid;
var eventUuids = d3.set(provenanceEvent.childUuids);
var eventUuids = new Set(provenanceEvent.childUuids);
// determines if the specified event should be removable based on if the collapsing is fanning in/out
var allowEventRemoval = function (fanIn, node) {
if (fanIn) {
return node.id !== eventId;
} else {
return node.flowFileUuid !== eventUuid && $.inArray(eventUuid, node.parentUuids) === -1;
return node.flowFileUuid !== eventUuid && $.inArray(Array.from(eventUuid), node.parentUuids) === -1;
}
};
@ -918,11 +906,11 @@
var newUuids = false;
// consider each node for being collapsed
$.each(nodeLookup.values(), function (_, node) {
$.each(Array.from(nodeLookup.values()), function (_, node) {
// if this node is in the uuids remove it unless its the original event or is part of this and another lineage
if (uuids.has(node.flowFileUuid) && allowEventRemoval(fanIn, node)) {
// remove it from the look lookup
nodeLookup.remove(node.id);
nodeLookup['delete'](node.id);
// include all related outgoing flow file uuids
$.each(node.outgoing, function (_, outgoing) {
@ -935,11 +923,11 @@
});
// update the link data
$.each(linkLookup.values(), function (_, link) {
$.each(Array.from(linkLookup.values()), function (_, link) {
// if this link is in the uuids remove it
if (uuids.has(link.flowFileUuid) && allowLinkRemoval(fanIn, link)) {
// remove it from the link lookup
linkLookup.remove(link.id);
linkLookup['delete'](link.id);
// add a related uuid that needs to be collapse
var next = link.target;
@ -1002,17 +990,17 @@
// renders event nodes
var renderEvent = function (events, provenanceTableCtrl) {
events
.on('contextmenu', function (d) {
.on('contextmenu', function (event, d) {
// select the current node for a visible cue
d3.select('#event-node-' + d.id).classed('context', true);
// show the context menu
showContextMenu(d, provenanceTableCtrl);
})
.on('mousedown', function (d) {
d3.event.stopPropagation();
.on('mousedown', function (event, d) {
event.stopPropagation();
})
.on('dblclick', function (d) {
.on('dblclick', function (event, d) {
// show the event details
provenanceTableCtrl.showEventDetails(d.id, clusterNodeId);
});
@ -1021,15 +1009,13 @@
.classed('event', true)
// join node to its label
.append('rect')
.attrs({
'x': 0,
'y': -8,
'height': 16,
'width': 14,
'opacity': 0,
'id': function (d) {
return 'event-filler-' + d.id;
}
.attr('x', 0)
.attr('y', -8)
.attr('height', 16)
.attr('width', 1)
.attr('opacity', 0)
.attr('id', function (d) {
return 'event-filler-' + d.id;
});
events
@ -1037,24 +1023,20 @@
.classed('selected', function (d) {
return d.id === eventId;
})
.attrs({
'r': 8,
'fill': '#aabbc3',
'stroke': '#000',
'stroke-width': 1.0,
'id': function (d) {
return 'event-node-' + d.id;
}
.attr('r', 8)
.attr('fill', '#aabbc3')
.attr('stroke', '#000')
.attr('stroke-width', 1.0)
.attr('id', function (d) {
return 'event-node-' + d.id;
});
events
.append('text')
.attrs({
'id': function (d) {
return 'event-text-' + d.id;
},
'class': 'event-type'
.attr('id', function (d) {
return 'event-text-' + d.id;
})
.attr('class', 'event-type')
.classed('expand-parents', function (d) {
return d.eventType === 'SPAWN';
})
@ -1083,10 +1065,9 @@
});
label.attr('transform', 'translate(10,-14)');
} else {
label.text(d.eventType).attrs({
'x': 10,
'y': 4
});
label.text(d.eventType)
.attr('x', 10)
.attr('y', 4);
}
});
};
@ -1094,7 +1075,7 @@
// updates the ui
var update = function (provenanceTableCtrl) {
// update the node data
nodes = nodes.data(nodeLookup.values(), function (d) {
nodes = nodes.data(Array.from(nodeLookup.values()), function (d) {
return d.id;
});
@ -1149,7 +1130,7 @@
.style('opacity', 1);
// update the link data
links = links.data(linkLookup.values(), function (d) {
links = links.data(Array.from(linkLookup.values()), function (d) {
return d.id;
});
@ -1167,14 +1148,12 @@
// add new links
var linksEntered = links.enter()
.insert('path', '.node')
.attrs({
'class': 'link',
'stroke-width': 1.5,
'stroke': '#000',
'fill': 'none',
'd': function (d) {
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
}
.attr('class', 'link')
.attr('stroke-width', 1.5)
.attr('stroke', '#000')
.attr('fill', 'none')
.attr('d', function (d) {
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
})
.style('opacity', 0);
@ -1186,13 +1165,11 @@
links.transition()
.delay(200)
.duration(400)
.attrs({
'marker-end': function (d) {
return 'url(#' + d.target.type + ')';
},
'd': function (d) {
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
}
.attr('marker-end', function (d) {
return 'url(#' + d.target.type + ')';
})
.attr('d', function (d) {
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
})
.style('opacity', 1);
};