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

NIFI-1580 - Allow double-click to display config 

* Added double-click shortcut opening config/details dialog to processors,
connections, ports and labels.
* Created a base for further default action selection, disabling, etc.
* Omitted default action configuration UI - that might be a separate JIRA ticket.
This commit is contained in:
yuri1969 2017-06-29 20:19:23 +02:00 committed by Scott Aslan
parent cf49a58ee7
commit ef9cb5be23
9 changed files with 125 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -466,6 +466,7 @@
<include>${staging.dir}/js/nf/canvas/nf-connection-configuration.js</include>
<include>${staging.dir}/js/nf/nf-connection-details.js</include>
<include>${staging.dir}/js/nf/canvas/nf-context-menu.js</include>
<include>${staging.dir}/js/nf/canvas/nf-quick-select.js</include>
<include>${staging.dir}/js/nf/canvas/nf-selectable.js</include>
<include>${staging.dir}/js/nf/canvas/nf-birdseye.js</include>
<include>${staging.dir}/js/nf/canvas/nf-draggable.js</include>

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

@ -50,6 +50,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-connection-configuration.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/nf-connection-details.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-context-menu.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-quick-select.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-selectable.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-birdseye.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-draggable.js?${project.version}"></script>\n\

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

@ -31,6 +31,7 @@
'nf.Canvas',
'nf.Graph',
'nf.ContextMenu',
'nf.QuickSelect',
'nf.Shell',
'nf.Settings',
'nf.Snippet',
@ -80,8 +81,8 @@
'nf.ng.Canvas.OperateCtrl',
'nf.ng.BreadcrumbsDirective',
'nf.ng.DraggableDirective'],
function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
return factory($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective);
function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
return factory($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective);
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = factory(require('jquery'),
@ -96,6 +97,7 @@
require('nf.Canvas'),
require('nf.Graph'),
require('nf.ContextMenu'),
require('nf.QuickSelect'),
require('nf.Shell'),
require('nf.Settings'),
require('nf.Actions'),
@ -158,6 +160,7 @@
root.nf.Canvas,
root.nf.Graph,
root.nf.ContextMenu,
root.nf.QuickSelect,
root.nf.Shell,
root.nf.Settings,
root.nf.Actions,
@ -208,7 +211,7 @@
root.nf.ng.BreadcrumbsDirective,
root.nf.ng.DraggableDirective);
}
}(this, function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
}(this, function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
var config = {
urls: {
@ -337,6 +340,7 @@
nfCanvas.View.init();
// initialize the context menu and invert control of the actions
nfContextMenu.init(nfActions);
nfQuickSelect.init(nfActions);
// initialize the shell and invert control of the context menu
nfShell.init(nfContextMenu);
nfNgBridge.injector.get('headerCtrl').init();

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

@ -52,6 +52,7 @@
var nfSelectable;
var nfConnectionConfiguration;
var nfQuickSelect;
var nfContextMenu;
// the dimensions for the connection label
@ -753,7 +754,7 @@
// update URL deep linking params
nfCanvasUtils.setURLParameters();
})
.call(nfContextMenu.activate);
.call(nfContextMenu.activate).call(nfQuickSelect.activate);
// update the midpoints
nfCanvasUtils.transition(midpoints, transition)
@ -793,7 +794,7 @@
// update URL deep linking params
nfCanvasUtils.setURLParameters();
})
.call(nfContextMenu.activate);
.call(nfContextMenu.activate).call(nfQuickSelect.activate);
// connection label
connectionLabelContainer.append('rect')
@ -1560,10 +1561,12 @@
*
* @param nfSelectableRef The nfSelectable module.
* @param nfContextMenuRef The nfContextMenu module.
* @param nfQuickSelectRef The nfQuickSelect module.
*/
init: function (nfSelectableRef, nfContextMenuRef, nfConnectionConfigurationRef) {
init: function (nfSelectableRef, nfContextMenuRef, nfQuickSelectRef, nfConnectionConfigurationRef) {
nfSelectable = nfSelectableRef;
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
nfConnectionConfiguration = nfConnectionConfigurationRef;
connectionMap = d3.map();

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

@ -35,9 +35,10 @@
'nf.Connectable',
'nf.Draggable',
'nf.Selectable',
'nf.ContextMenu'],
function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu) {
return (nf.Graph = factory($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu));
'nf.ContextMenu',
'nf.QuickSelect'],
function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu, nfQuickSelect) {
return (nf.Graph = factory($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu, nfQuickSelect));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Graph =
@ -57,7 +58,8 @@
require('nf.Connectable'),
require('nf.Draggable'),
require('nf.Selectable'),
require('nf.ContextMenu')));
require('nf.ContextMenu'),
require('nf.QuickSelect')));
} else {
nf.Graph = factory(root.$,
root.d3,
@ -75,9 +77,10 @@
root.nf.Connectable,
root.nf.Draggable,
root.nf.Selectable,
root.nf.ContextMenu);
root.nf.ContextMenu,
root.nf.QuickSelect);
}
}(this, function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu) {
}(this, function ($, d3, nfCommon, nfNgBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, nfConnectionConfiguration, nfCanvasUtils, nfConnectable, nfDraggable, nfSelectable, nfContextMenu, nfQuickSelect) {
'use strict';
var combinePorts = function (contents) {
@ -198,13 +201,13 @@
var nfGraph = {
init: function () {
// initialize the object responsible for each type of component
nfLabel.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
nfLabel.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu, nfQuickSelect);
nfFunnel.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
nfPort.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
nfPort.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu, nfQuickSelect);
nfRemoteProcessGroup.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
nfProcessGroup.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
nfProcessor.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu);
nfConnection.init(nfSelectable, nfContextMenu, nfConnectionConfiguration);
nfProcessor.init(nfConnectable, nfDraggable, nfSelectable, nfContextMenu, nfQuickSelect);
nfConnection.init(nfSelectable, nfContextMenu, nfQuickSelect, nfConnectionConfiguration);
// display the deep link
return nfCanvasUtils.showDeepLink(true);

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

@ -47,6 +47,7 @@
var nfConnectable;
var nfDraggable;
var nfSelectable;
var nfQuickSelect;
var nfContextMenu;
var dimensions = {
@ -142,7 +143,7 @@
});
// always support selecting
label.call(nfSelectable.activate).call(nfContextMenu.activate);
label.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
};
/**
@ -313,12 +314,14 @@
* @param nfDraggableRef The nfDraggable module.
* @param nfSelectableRef The nfSelectable module.
* @param nfContextMenuRef The nfContextMenu module.
* @param nfQuickSelectRef The nfQuickSelect module.
*/
init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef, nfQuickSelectRef) {
nfConnectable = nfConnectableRef;
nfDraggable = nfDraggableRef;
nfSelectable = nfSelectableRef;
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
labelMap = d3.map();
removedCache = d3.map();

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

@ -47,6 +47,7 @@
var nfConnectable;
var nfDraggable;
var nfSelectable;
var nfQuickSelect;
var nfContextMenu;
var PREVIEW_NAME_LENGTH = 15;
@ -192,7 +193,7 @@
});
// make ports selectable
port.call(nfSelectable.activate).call(nfContextMenu.activate);
port.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
// only activate dragging and connecting if appropriate
port.filter(function (d) {
@ -529,12 +530,14 @@
* @param nfDraggableRef The nfDraggable module.
* @param nfSelectableRef The nfSelectable module.
* @param nfContextMenuRef The nfContextMenu module.
* @param nfQuickSelectRef The nfQuickSelect module.
*/
init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef, nfQuickSelectRef) {
nfConnectable = nfConnectableRef;
nfDraggable = nfDraggableRef;
nfSelectable = nfSelectableRef;
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
portMap = d3.map();
removedCache = d3.map();

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

@ -47,6 +47,7 @@
var nfConnectable;
var nfDraggable;
var nfSelectable;
var nfQuickSelect;
var nfContextMenu;
var PREVIEW_NAME_LENGTH = 25;
@ -181,7 +182,7 @@
.text('\uf132');
// make processors selectable
processor.call(nfSelectable.activate).call(nfContextMenu.activate);
processor.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
};
/**
@ -876,12 +877,14 @@
* @param nfDraggableRef The nfDraggable module.
* @param nfSelectableRef The nfSelectable module.
* @param nfContextMenuRef The nfContextMenu module.
* @param nfQuickSelectRef The nfQuickSelect module.
*/
init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef) {
init: function (nfConnectableRef, nfDraggableRef, nfSelectableRef, nfContextMenuRef, nfQuickSelectRef) {
nfConnectable = nfConnectableRef;
nfDraggable = nfDraggableRef;
nfSelectable = nfSelectableRef;
nfContextMenu = nfContextMenuRef;
nfQuickSelect = nfQuickSelectRef;
processorMap = d3.map();
removedCache = d3.map();

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

@ -0,0 +1,82 @@
/*
* 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(['d3',
'nf.CanvasUtils'],
function (d3, nfCanvasUtils) {
return (nf.QuickSelect = factory(d3, nfCanvasUtils));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.QuickSelect =
factory(require('d3'),
require('nf.CanvasUtils')));
} else {
nf.QuickSelect = factory(
root.d3,
root.nf.CanvasUtils);
}
}(this, function (d3, nfCanvasUtils) {
'use strict';
var nfActions;
var nfQuickSelect = {
/**
* Initialize the context menu.
*
* @param nfActionsRef The nfActions module.
*/
init: function (nfActionsRef) {
nfActions = nfActionsRef;
},
/**
* Attempts to show configuration or details dialog for the specified slection.
*/
quickSelect: function () {
var selection = nfCanvasUtils.getSelection();
if (nfCanvasUtils.isConfigurable(selection)) {
nfActions.showConfiguration(selection);
} else if (nfCanvasUtils.hasDetails(selection)) {
nfActions.showDetails(selection);
}
// stop propagation and prevent default
d3.event.preventDefault();
d3.event.stopPropagation();
},
/**
* Activates the quick select behavior for the components in the specified selection.
*
* @param {selection} components
*/
activate: function (components) {
components.on('dblclick', function () {
// get the clicked component to update selection
nfQuickSelect.quickSelect();
});
}
};
return nfQuickSelect;
}));