http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js deleted file mode 100644 index 9cae764..0000000 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js +++ /dev/null @@ -1,171 +0,0 @@ -/* - * 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 nf, d3 */ - -nf.CanvasToolbar = (function () { - - var actions; - - return { - /** - * Initializes the canvas toolbar. - */ - init: function () { - actions = {}; - - var separator = $('<div/>').addClass('control-separator'); - var border = $('<div/>').addClass('control-border'); - - var globalControls = $('#global-controls')[0]; - border.clone().appendTo(globalControls); - actions['enable'] = new nf.ToolbarAction(globalControls, 'enable', 'action-enable', 'enable-all', 'enable-all-hover', 'enable-all-disable', 'Enable'); - border.clone().appendTo(globalControls); - actions['disable'] = new nf.ToolbarAction(globalControls, 'disable', 'action-disable', 'disable-all', 'disable-all-hover', 'disable-all-disable', 'Disable'); - border.clone().appendTo(globalControls); - separator.clone().appendTo(globalControls); - border.clone().appendTo(globalControls); - actions['start'] = new nf.ToolbarAction(globalControls, 'start', 'action-start', 'start-all', 'start-all-hover', 'start-all-disable', 'Start'); - border.clone().appendTo(globalControls); - actions['stop'] = new nf.ToolbarAction(globalControls, 'stop', 'action-stop', 'stop-all', 'stop-all-hover', 'stop-all-disable', 'Stop'); - border.clone().appendTo(globalControls); - separator.clone().appendTo(globalControls); - border.clone().appendTo(globalControls); - actions['template'] = new nf.ToolbarAction(globalControls, 'template', 'action-template', 'template', 'template-hover', 'template-disable', 'Create Template'); - border.clone().appendTo(globalControls); - separator.clone().appendTo(globalControls); - border.clone().addClass('secondary').appendTo(globalControls); - actions['copy'] = new nf.ToolbarAction(globalControls, 'copy', 'action-copy', 'copy', 'copy-hover', 'copy-disable', 'Copy', true); - border.clone().addClass('secondary').appendTo(globalControls); - actions['paste'] = new nf.ToolbarAction(globalControls, 'paste', 'action-paste', 'paste', 'paste-hover', 'paste-disable', 'Paste', true); - border.clone().addClass('secondary').appendTo(globalControls); - separator.clone().addClass('secondary').appendTo(globalControls); - border.clone().addClass('secondary').appendTo(globalControls); - actions['group'] = new nf.ToolbarAction(globalControls, 'group', 'action-group', 'group', 'group-hover', 'group-disable', 'Group', true); - border.clone().addClass('secondary').appendTo(globalControls); - separator.clone().addClass('secondary').appendTo(globalControls); - border.clone().addClass('secondary').appendTo(globalControls); - actions['fill'] = new nf.ToolbarAction(globalControls, 'fillColor', 'action-fill', 'fill', 'fill-hover', 'fill-disable', 'Change Color', true); - border.clone().addClass('secondary').appendTo(globalControls); - separator.clone().addClass('secondary').appendTo(globalControls); - border.clone().addClass('secondary').appendTo(globalControls); - actions['delete'] = new nf.ToolbarAction(globalControls, 'delete', 'action-delete', 'delete', 'delete-hover', 'delete-disable', 'Delete', true); - border.addClass('secondary').appendTo(globalControls); - separator.addClass('secondary').appendTo(globalControls); - - // set up initial states for selection-less items - if (nf.Common.isDFM()) { - actions['start'].enable(); - actions['stop'].enable(); - actions['template'].enable(); - } else { - actions['start'].disable(); - actions['stop'].disable(); - actions['template'].disable(); - } - - // disable actions that require selection - actions['enable'].disable(); - actions['disable'].disable(); - actions['copy'].disable(); - actions['paste'].disable(); - actions['fill'].disable(); - actions['delete'].disable(); - actions['group'].disable(); - - // add a clipboard listener if appropriate - if (nf.Common.isDFM()) { - nf.Clipboard.addListener(this, function (action, data) { - if (nf.Clipboard.isCopied()) { - actions['paste'].enable(); - } else { - actions['paste'].disable(); - } - }); - } - }, - - /** - * Called when the selection changes to update the toolbar appropriately. - */ - refresh: function () { - // wait for the toolbar to initialize - if (nf.Common.isUndefined(actions)) { - return; - } - - // only refresh the toolbar if DFM - var selection = nf.CanvasUtils.getSelection(); - if (nf.CanvasUtils.canModify(selection) === false) { - return; - } - - // if all selected components are deletable enable the delete button - if (!selection.empty()) { - var enableDelete = true; - selection.each(function (d) { - if (!nf.CanvasUtils.isDeletable(d3.select(this))) { - enableDelete = false; - return false; - } - }); - if (enableDelete) { - actions['delete'].enable(); - } else { - actions['delete'].disable(); - } - } else { - actions['delete'].disable(); - } - - // if there are any copyable components enable the button - if (nf.CanvasUtils.isCopyable(selection)) { - actions['copy'].enable(); - } else { - actions['copy'].disable(); - } - - // determine if the selection is groupable - if (!selection.empty() && nf.CanvasUtils.isDisconnected(selection)) { - actions['group'].enable(); - } else { - actions['group'].disable(); - } - - // if there are any colorable components enable the fill button - if (nf.CanvasUtils.isColorable(selection)) { - actions['fill'].enable(); - } else { - actions['fill'].disable(); - } - - // ensure the selection supports enable - if (nf.CanvasUtils.canEnable(selection)) { - actions['enable'].enable(); - } else { - actions['enable'].disable(); - } - - // ensure the selection supports disable - if (nf.CanvasUtils.canDisable(selection)) { - actions['disable'].enable(); - } else { - actions['disable'].disable(); - } - } - }; -}()); \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js deleted file mode 100644 index aca5a9e..0000000 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js +++ /dev/null @@ -1,1175 +0,0 @@ -/* - * 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 nf, Slick */ - -nf.CanvasToolbox = (function () { - - var config = { - filterText: 'Filter', - type: { - processor: 'Processor', - inputPort: 'Input Port', - outputPort: 'Output Port', - processGroup: 'Process Group', - remoteProcessGroup: 'Remote Process Group', - connection: 'Connection', - funnel: 'Funnel', - template: 'Template', - label: 'Label' - }, - styles: { - filterList: 'filter-list' - }, - urls: { - api: '../nifi-api', - controller: '../nifi-api/controller', - processorTypes: '../nifi-api/flow/processor-types' - } - }; - - /** - * Creates a toolbox icon for dragging onto the graph. - * - * @argument {string} type The type of component - * @argument {jQuery} toolbox The toolbox to add the icon to - * @argument {string} cls The css class to apply to the icon - * @argument {string} hoverCls The css class to apply when hovering - * @argument {string} dragCls The css class to apply when dragging - * @argument {string} dropHandler Callback to handle the drop event - */ - var addToolboxIcon = function (type, toolbox, cls, hoverCls, dragCls, dropHandler) { - // generate the img id - var imgId = type + '-icon'; - - // create the image which is used as the toolbox icon (drag source) - $('<div/>').attr('id', imgId).attr('title', type).addClass(cls).addClass('pointer').addClass('toolbox-icon').hover(function () { - $(this).removeClass(cls).addClass(hoverCls); - }, function () { - $(this).removeClass(hoverCls).addClass(cls); - }).draggable({ - 'zIndex': 1011, - 'helper': function () { - return $('<div class="toolbox-icon"></div>').addClass(dragCls).appendTo('body'); - }, - 'containment': 'body', - 'start': function (e, ui) { - // hide the context menu if necessary - nf.ContextMenu.hide(); - }, - 'stop': function (e, ui) { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); - - var mouseX = e.originalEvent.pageX; - var mouseY = e.originalEvent.pageY - nf.Canvas.CANVAS_OFFSET; - - // invoke the drop handler if we're over the canvas - if (mouseX >= 0 && mouseY >= 0) { - // adjust the x and y coordinates accordingly - var x = (mouseX / scale) - (translate[0] / scale); - var y = (mouseY / scale) - (translate[1] / scale); - - dropHandler({ - x: x, - y: y - }); - } - } - }).appendTo(toolbox); - }; - - /** - * Filters the processor type table. - */ - var applyFilter = function () { - // get the dataview - var processorTypesGrid = $('#processor-types-table').data('gridInstance'); - - // ensure the grid has been initialized - if (nf.Common.isDefinedAndNotNull(processorTypesGrid)) { - var processorTypesData = processorTypesGrid.getData(); - - // update the search criteria - processorTypesData.setFilterArgs({ - searchString: getFilterText() - }); - processorTypesData.refresh(); - - // update the selection if possible - if (processorTypesData.getLength() > 0) { - processorTypesGrid.setSelectedRows([0]); - } - } - }; - - /** - * Determines if the item matches the filter. - * - * @param {object} item The item to filter - * @param {object} args The filter criteria - * @returns {boolean} Whether the item matches the filter - */ - var matchesRegex = function (item, args) { - if (args.searchString === '') { - return true; - } - - try { - // perform the row filtering - var filterExp = new RegExp(args.searchString, 'i'); - } catch (e) { - // invalid regex - return false; - } - - // determine if the item matches the filter - var matchesLabel = item['label'].search(filterExp) >= 0; - var matchesTags = item['tags'].search(filterExp) >= 0; - return matchesLabel || matchesTags; - }; - - /** - * Performs the filtering. - * - * @param {object} item The item subject to filtering - * @param {object} args Filter arguments - * @returns {Boolean} Whether or not to include the item - */ - var filter = function (item, args) { - // determine if the item matches the filter - var matchesFilter = matchesRegex(item, args); - - // determine if the row matches the selected tags - var matchesTags = true; - if (matchesFilter) { - var tagFilters = $('#processor-tag-cloud').tagcloud('getSelectedTags'); - var hasSelectedTags = tagFilters.length > 0; - if (hasSelectedTags) { - matchesTags = matchesSelectedTags(tagFilters, item['tags']); - } - } - - // determine if this row should be visible - var matches = matchesFilter && matchesTags; - - // if this row is currently selected and its being filtered - if (matches === false && $('#selected-processor-type').text() === item['type']) { - // clear the selected row - $('#processor-type-description').text(''); - $('#processor-type-name').text(''); - $('#selected-processor-name').text(''); - $('#selected-processor-type').text(''); - - // clear the active cell the it can be reselected when its included - var processTypesGrid = $('#processor-types-table').data('gridInstance'); - processTypesGrid.resetActiveCell(); - } - - return matches; - }; - - /** - * Determines if the specified tags match all the tags selected by the user. - * - * @argument {string[]} tagFilters The tag filters - * @argument {string} tags The tags to test - */ - var matchesSelectedTags = function (tagFilters, tags) { - var selectedTags = []; - $.each(tagFilters, function (_, filter) { - selectedTags.push(filter); - }); - - // normalize the tags - var normalizedTags = tags.toLowerCase(); - - var matches = true; - $.each(selectedTags, function (i, selectedTag) { - if (normalizedTags.indexOf(selectedTag) === -1) { - matches = false; - return false; - } - }); - - return matches; - }; - - /** - * Sorts the specified data using the specified sort details. - * - * @param {object} sortDetails - * @param {object} data - */ - var sort = function (sortDetails, data) { - // defines a function for sorting - var comparer = function (a, b) { - var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : ''; - var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : ''; - return aString === bString ? 0 : aString > bString ? 1 : -1; - }; - - // perform the sort - data.sort(comparer, sortDetails.sortAsc); - }; - - /** - * Get the text out of the filter field. If the filter field doesn't - * have any text it will contain the text 'filter list' so this method - * accounts for that. - */ - var getFilterText = function () { - var filterText = ''; - var filterField = $('#processor-type-filter'); - if (!filterField.hasClass(config.styles.filterList)) { - filterText = filterField.val(); - } - return filterText; - }; - - /** - * Resets the filtered processor types. - */ - var resetProcessorDialog = function () { - // clear the selected tag cloud - $('#processor-tag-cloud').tagcloud('clearSelectedTags'); - - // clear any filter strings - $('#processor-type-filter').addClass(config.styles.filterList).val(config.filterText); - - // reapply the filter - applyFilter(); - - // clear the selected row - $('#processor-type-description').text(''); - $('#processor-type-name').text(''); - $('#selected-processor-name').text(''); - $('#selected-processor-type').text(''); - - // unselect any current selection - var processTypesGrid = $('#processor-types-table').data('gridInstance'); - processTypesGrid.setSelectedRows([]); - processTypesGrid.resetActiveCell(); - }; - - /** - * Prompts the user to select the type of new processor to create. - * - * @argument {object} pt The point that the processor was dropped - */ - var promptForProcessorType = function (pt) { - // handles adding the selected processor at the specified point - var addProcessor = function () { - // get the type of processor currently selected - var name = $('#selected-processor-name').text(); - var processorType = $('#selected-processor-type').text(); - - // ensure something was selected - if (name === '' || processorType === '') { - nf.Dialog.showOkDialog({ - dialogContent: 'The type of processor to create must be selected.', - overlayBackground: false - }); - } else { - // create the new processor - createProcessor(name, processorType, pt); - } - - // hide the dialog - $('#new-processor-dialog').modal('hide'); - }; - - // get the grid reference - var grid = $('#processor-types-table').data('gridInstance'); - - // add the processor when its double clicked in the table - var gridDoubleClick = function (e, args) { - var processorType = grid.getDataItem(args.row); - - $('#selected-processor-name').text(processorType.label); - $('#selected-processor-type').text(processorType.type); - - addProcessor(); - }; - - // register a handler for double click events - grid.onDblClick.subscribe(gridDoubleClick); - - // update the button model - $('#new-processor-dialog').modal('setButtonModel', [{ - buttonText: 'Add', - handler: { - click: addProcessor - } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - $('#new-processor-dialog').modal('hide'); - } - } - }]); - - // set a new handler for closing the the dialog - $('#new-processor-dialog').modal('setHandler', { - close: function () { - // remove the handler - grid.onDblClick.unsubscribe(gridDoubleClick); - - // clear the current filters - resetProcessorDialog(); - } - }); - - // show the dialog - $('#new-processor-dialog').modal('show'); - - // setup the filter - $('#processor-type-filter').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addProcessor(); - } else { - applyFilter(); - } - }); - - // adjust the grid canvas now that its been rendered - grid.resizeCanvas(); - grid.setSelectedRows([0]); - }; - - /** - * Create the processor and add to the graph. - * - * @argument {string} name The processor name - * @argument {string} processorType The processor type - * @argument {object} pt The point that the processor was dropped - */ - var createProcessor = function (name, processorType, pt) { - var processorEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'type': processorType, - 'name': name, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/processors', - data: JSON.stringify(processorEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - if (nf.Common.isDefinedAndNotNull(response.component)) { - // update the revision - nf.Client.setRevision(response.revision); - - // add the processor to the graph - nf.Graph.add({ - 'processors': [response] - }, true); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - } - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Prompts the user to enter the name for the input port. - * - * @argument {object} pt The point that the input port was dropped - */ - var promptForInputPortName = function (pt) { - var addInputPort = function () { - // get the name of the input port and clear the textfield - var portName = $('#new-port-name').val(); - - // hide the dialog - $('#new-port-dialog').modal('hide'); - - // create the input port - createInputPort(portName, pt); - }; - - $('#new-port-dialog').modal('setButtonModel', [{ - buttonText: 'Add', - handler: { - click: addInputPort - } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - $('#new-port-dialog').modal('hide'); - } - } - }]); - - // update the port type - $('#new-port-type').text('Input'); - - // show the dialog - $('#new-port-dialog').modal('show'); - - // set up the focus and key handlers - $('#new-port-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addInputPort(); - } - }); - }; - - /** - * Create the input port and add to the graph. - * - * @argument {string} portName The input port name - * @argument {object} pt The point that the input port was dropped - */ - var createInputPort = function (portName, pt) { - var inputPortEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'name': portName, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/input-ports', - data: JSON.stringify(inputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - if (nf.Common.isDefinedAndNotNull(response.component)) { - // update the revision - nf.Client.setRevision(response.revision); - - // add the port to the graph - nf.Graph.add({ - 'inputPorts': [response] - }, true); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - } - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Prompts the user to enter the name for the output port. - * - * @argument {object} pt The point that the output port was dropped - */ - var promptForOutputPortName = function (pt) { - var addOutputPort = function () { - // get the name of the output port and clear the textfield - var portName = $('#new-port-name').val(); - - // hide the dialog - $('#new-port-dialog').modal('hide'); - - // create the output port - createOutputPort(portName, pt); - }; - - $('#new-port-dialog').modal('setButtonModel', [{ - buttonText: 'Add', - handler: { - click: addOutputPort - } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - $('#new-port-dialog').modal('hide'); - } - } - }]); - - // update the port type - $('#new-port-type').text('Output'); - - // set the focus and show the dialog - $('#new-port-dialog').modal('show'); - - // set up the focus and key handlers - $('#new-port-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addOutputPort(); - } - }); - }; - - /** - * Create the input port and add to the graph. - * - * @argument {string} portName The output port name - * @argument {object} pt The point that the output port was dropped - */ - var createOutputPort = function (portName, pt) { - var outputPortEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'name': portName, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/output-ports', - data: JSON.stringify(outputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - if (nf.Common.isDefinedAndNotNull(response.component)) { - // update the revision - nf.Client.setRevision(response.revision); - - // add the port to the graph - nf.Graph.add({ - 'outputPorts': [response] - }, true); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - } - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Create the group and add to the graph. - * - * @argument {string} groupName The name of the group - * @argument {object} pt The point that the group was dropped - */ - var createGroup = function (groupName, pt) { - var processGroupEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'name': groupName, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new processor of the defined type - return $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/process-groups', - data: JSON.stringify(processGroupEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - if (nf.Common.isDefinedAndNotNull(response.component)) { - // update the revision - nf.Client.setRevision(response.revision); - - // add the process group to the graph - nf.Graph.add({ - 'processGroups': [response] - }, true); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - } - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Prompts the user to enter the URI for the remote process group. - * - * @argument {object} pt The point that the remote group was dropped - */ - var promptForRemoteProcessGroupUri = function (pt) { - var addRemoteProcessGroup = function () { - // get the uri of the controller and clear the textfield - var remoteProcessGroupUri = $('#new-remote-process-group-uri').val(); - - // hide the dialog - $('#new-remote-process-group-dialog').modal('hide'); - - // create the remote process group - createRemoteProcessGroup(remoteProcessGroupUri, pt); - }; - - $('#new-remote-process-group-dialog').modal('setButtonModel', [{ - buttonText: 'Add', - handler: { - click: addRemoteProcessGroup - } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - $('#new-remote-process-group-dialog').modal('hide'); - } - } - }]); - - // show the dialog - $('#new-remote-process-group-dialog').modal('show'); - - // set the focus and key handlers - $('#new-remote-process-group-uri').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addRemoteProcessGroup(); - } - }); - }; - - /** - * Create the controller and add to the graph. - * - * @argument {string} remoteProcessGroupUri The remote group uri - * @argument {object} pt The point that the remote group was dropped - */ - var createRemoteProcessGroup = function (remoteProcessGroupUri, pt) { - var remoteProcessGroupEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'targetUri': remoteProcessGroupUri, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new remote process group of the defined type - $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/remote-process-groups', - data: JSON.stringify(remoteProcessGroupEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - if (nf.Common.isDefinedAndNotNull(response.component)) { - // update the revision - nf.Client.setRevision(response.revision); - - // add the processor to the graph - nf.Graph.add({ - 'remoteProcessGroups': [response] - }, true); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - } - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Creates a new funnel at the specified point. - * - * @argument {object} pt The point that the funnel was dropped - */ - var createFunnel = function (pt) { - var outputPortEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new funnel - $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/funnels', - data: JSON.stringify(outputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - if (nf.Common.isDefinedAndNotNull(response.component)) { - // update the revision - nf.Client.setRevision(response.revision); - - // add the funnel to the graph - nf.Graph.add({ - 'funnels': [response] - }, true); - - // update the birdseye - nf.Birdseye.refresh(); - } - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Prompts the user to select a template. - * - * @argument {object} pt The point that the template was dropped - */ - var promptForTemplate = function (pt) { - $.ajax({ - type: 'GET', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/templates', - dataType: 'json' - }).done(function (response) { - var templates = response.templates; - if (nf.Common.isDefinedAndNotNull(templates) && templates.length > 0) { - var options = []; - $.each(templates, function (_, template) { - options.push({ - text: template.name, - value: template.id, - description: nf.Common.escapeHtml(template.description) - }); - }); - - // configure the templates combo - $('#available-templates').combo({ - maxHeight: 300, - options: options - }); - - // update the button model - $('#instantiate-template-dialog').modal('setButtonModel', [{ - buttonText: 'Add', - handler: { - click: function () { - // get the type of processor currently selected - var selectedOption = $('#available-templates').combo('getSelectedOption'); - var templateId = selectedOption.value; - - // hide the dialog - $('#instantiate-template-dialog').modal('hide'); - - // instantiate the specified template - createTemplate(templateId, pt); - } - } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - $('#instantiate-template-dialog').modal('hide'); - } - } - }]); - - // show the dialog - $('#instantiate-template-dialog').modal('show'); - } else { - nf.Dialog.showOkDialog({ - headerText: 'Instantiate Template', - dialogContent: 'No templates have been loaded into this NiFi.', - overlayBackground: false - }); - } - - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Instantiates the specified template and - * - * @argument {string} templateId The template id - * @argument {object} pt The point that the template was dropped - */ - var createTemplate = function (templateId, pt) { - var instantiateTemplateInstance = { - 'revision': nf.Client.getRevision(), - 'templateId': templateId, - 'originX': pt.x, - 'originY': pt.y - }; - - // create a new instance of the new template - $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/template-instance', - data: JSON.stringify(instantiateTemplateInstance), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // update the revision - nf.Client.setRevision(response.revision); - - // populate the graph accordingly - nf.Graph.add(response.flow, true); - - // update component visibility - nf.Canvas.View.updateVisibility(); - - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.Common.handleAjaxError); - }; - - /** - * Create the label and add to the graph. - * - * @argument {object} pt The point that the label was dropped - */ - var createLabel = function (pt) { - var labelEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'width': nf.Label.config.width, - 'height': nf.Label.config.height, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } - }; - - // create a new label - $.ajax({ - type: 'POST', - url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/labels', - data: JSON.stringify(labelEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - if (nf.Common.isDefinedAndNotNull(response.component)) { - // update the revision - nf.Client.setRevision(response.revision); - - // add the label to the graph - nf.Graph.add({ - 'labels': [response] - }, true); - - // update the birdseye - nf.Birdseye.refresh(); - } - }).fail(nf.Common.handleAjaxError); - }; - - return { - /** - * Initialize the canvas toolbox. - */ - init: function () { - var toolbox = $('#toolbox'); - - // ensure the user can create graph components - if (nf.Common.isDFM()) { - - // create the draggable icons - addToolboxIcon(config.type.processor, toolbox, 'processor-icon', 'processor-icon-hover', 'processor-icon-drag', promptForProcessorType); - addToolboxIcon(config.type.inputPort, toolbox, 'input-port-icon', 'input-port-icon-hover', 'input-port-icon-drag', promptForInputPortName); - addToolboxIcon(config.type.outputPort, toolbox, 'output-port-icon', 'output-port-icon-hover', 'output-port-icon-drag', promptForOutputPortName); - addToolboxIcon(config.type.processGroup, toolbox, 'process-group-icon', 'process-group-icon-hover', 'process-group-icon-drag', nf.CanvasToolbox.promptForGroupName); - addToolboxIcon(config.type.remoteProcessGroup, toolbox, 'remote-process-group-icon', 'remote-process-group-icon-hover', 'remote-process-group-icon-drag', promptForRemoteProcessGroupUri); - addToolboxIcon(config.type.funnel, toolbox, 'funnel-icon', 'funnel-icon-hover', 'funnel-icon-drag', createFunnel); - addToolboxIcon(config.type.template, toolbox, 'template-icon', 'template-icon-hover', 'template-icon-drag', promptForTemplate); - addToolboxIcon(config.type.label, toolbox, 'label-icon', 'label-icon-hover', 'label-icon-drag', createLabel); - - // define the function for filtering the list - $('#processor-type-filter').focus(function () { - if ($(this).hasClass(config.styles.filterList)) { - $(this).removeClass(config.styles.filterList).val(''); - } - }).blur(function () { - if ($(this).val() === '') { - $(this).addClass(config.styles.filterList).val(config.filterText); - } - }).addClass(config.styles.filterList).val(config.filterText); - - // initialize the processor type table - var processorTypesColumns = [ - {id: 'type', name: 'Type', field: 'label', sortable: true, resizable: true}, - {id: 'tags', name: 'Tags', field: 'tags', sortable: true, resizable: true} - ]; - var processorTypesOptions = { - forceFitColumns: true, - enableTextSelectionOnCells: true, - enableCellNavigation: true, - enableColumnReorder: false, - autoEdit: false, - multiSelect: false - }; - - // initialize the dataview - var processorTypesData = new Slick.Data.DataView({ - inlineFilters: false - }); - processorTypesData.setItems([]); - processorTypesData.setFilterArgs({ - searchString: getFilterText() - }); - processorTypesData.setFilter(filter); - - // initialize the sort - sort({ - columnId: 'type', - sortAsc: true - }, processorTypesData); - - // initialize the grid - var processorTypesGrid = new Slick.Grid('#processor-types-table', processorTypesData, processorTypesColumns, processorTypesOptions); - processorTypesGrid.setSelectionModel(new Slick.RowSelectionModel()); - processorTypesGrid.registerPlugin(new Slick.AutoTooltips()); - processorTypesGrid.setSortColumn('type', true); - processorTypesGrid.onSort.subscribe(function (e, args) { - sort({ - columnId: args.sortCol.field, - sortAsc: args.sortAsc - }, processorTypesData); - }); - processorTypesGrid.onSelectedRowsChanged.subscribe(function (e, args) { - if ($.isArray(args.rows) && args.rows.length === 1) { - var processorTypeIndex = args.rows[0]; - var processorType = processorTypesGrid.getDataItem(processorTypeIndex); - - // set the processor type description - if (nf.Common.isDefinedAndNotNull(processorType)) { - if (nf.Common.isBlank(processorType.description)) { - $('#processor-type-description').attr('title', '').html('<span class="unset">No description specified</span>'); - } else { - $('#processor-type-description').html(processorType.description).ellipsis(); - } - - // populate the dom - $('#processor-type-name').text(processorType.label).ellipsis(); - $('#selected-processor-name').text(processorType.label); - $('#selected-processor-type').text(processorType.type); - } - } - }); - - // wire up the dataview to the grid - processorTypesData.onRowCountChanged.subscribe(function (e, args) { - processorTypesGrid.updateRowCount(); - processorTypesGrid.render(); - - // update the total number of displayed processors - $('#displayed-processor-types').text(args.current); - }); - processorTypesData.onRowsChanged.subscribe(function (e, args) { - processorTypesGrid.invalidateRows(args.rows); - processorTypesGrid.render(); - }); - processorTypesData.syncGridSelection(processorTypesGrid, false); - - // hold onto an instance of the grid - $('#processor-types-table').data('gridInstance', processorTypesGrid); - - // load the available processor types, this select is shown in the - // new processor dialog when a processor is dragged onto the screen - $.ajax({ - type: 'GET', - url: config.urls.processorTypes, - dataType: 'json' - }).done(function (response) { - var tags = []; - - // begin the update - processorTypesData.beginUpdate(); - - // go through each processor type - $.each(response.processorTypes, function (i, documentedType) { - var type = documentedType.type; - - // create the row for the processor type - processorTypesData.addItem({ - id: i, - label: nf.Common.substringAfterLast(type, '.'), - type: type, - description: nf.Common.escapeHtml(documentedType.description), - tags: documentedType.tags.join(', ') - }); - - // count the frequency of each tag for this type - $.each(documentedType.tags, function (i, tag) { - tags.push(tag.toLowerCase()); - }); - }); - - // end the udpate - processorTypesData.endUpdate(); - - // set the total number of processors - $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length); - - // create the tag cloud - $('#processor-tag-cloud').tagcloud({ - tags: tags, - select: applyFilter, - remove: applyFilter - }); - }).fail(nf.Common.handleAjaxError); - - // configure the new processor dialog - $('#new-processor-dialog').modal({ - headerText: 'Add Processor', - overlayBackground: false - }).draggable({ - containment: 'parent', - handle: '.dialog-header' - }); - - // configure the new port dialog - $('#new-port-dialog').modal({ - headerText: 'Add Port', - overlayBackground: false, - handler: { - close: function () { - $('#new-port-name').val(''); - } - } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' - }); - - // configure the new process group dialog - $('#new-process-group-dialog').modal({ - headerText: 'Add Process Group', - overlayBackground: false, - handler: { - close: function () { - $('#new-process-group-name').val(''); - } - } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' - }); - - // configure the new remote process group dialog - $('#new-remote-process-group-dialog').modal({ - headerText: 'Add Remote Process Group', - overlayBackground: false, - handler: { - close: function () { - $('#new-remote-process-group-uri').val(''); - } - } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' - }); - - // configure the instantiate template dialog - $('#instantiate-template-dialog').modal({ - headerText: 'Instantiate Template', - overlayBackgroud: false - }).draggable({ - containment: 'parent', - handle: '.dialog-header' - }); - } else { - // add disabled icons - $('<div/>').attr('title', config.type.processor).addClass('processor-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - $('<div/>').attr('title', config.type.inputPort).addClass('input-port-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - $('<div/>').attr('title', config.type.outputPort).addClass('output-port-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - $('<div/>').attr('title', config.type.processGroup).addClass('process-group-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - $('<div/>').attr('title', config.type.remoteProcessGroup).addClass('remote-process-group-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - $('<div/>').attr('title', config.type.funnel).addClass('funnel-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - $('<div/>').attr('title', config.type.template).addClass('template-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - $('<div/>').attr('title', config.type.label).addClass('label-icon-disable').addClass('toolbox-icon').appendTo(toolbox); - } - }, - - /** - * Prompts the user to enter the name for the group. - * - * @argument {object} pt The point that the group was dropped - */ - promptForGroupName: function (pt) { - return $.Deferred(function (deferred) { - var addGroup = function () { - // get the name of the group and clear the textfield - var groupName = $('#new-process-group-name').val(); - - // hide the dialog - $('#new-process-group-dialog').modal('hide'); - - // create the group and resolve the deferred accordingly - createGroup(groupName, pt).done(function (response) { - deferred.resolve(response.component); - }).fail(function () { - deferred.reject(); - }); - }; - - $('#new-process-group-dialog').modal('setButtonModel', [{ - buttonText: 'Add', - handler: { - click: addGroup - } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - // reject the deferred - deferred.reject(); - - // close the dialog - $('#new-process-group-dialog').modal('hide'); - } - } - }]); - - // show the dialog - $('#new-process-group-dialog').modal('show'); - - // set up the focus and key handlers - $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addGroup(); - } - }); - }).promise(); - } - }; -}()); http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js index 83de139..d5ddbed 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js @@ -29,11 +29,26 @@ $(document).ready(function () { app.controller('ngCanvasAppCtrl', nf.ng.Canvas.AppCtrl); //App Services - app.factory('ServiceProvider', nf.ng.ServiceProvider); - app.factory('BreadcrumbsCtrl', nf.ng.BreadcrumbsCtrl); + app.factory('serviceProvider', nf.ng.ServiceProvider); + app.factory('breadcrumbsCtrl', nf.ng.BreadcrumbsCtrl); + app.factory('headerCtrl', nf.ng.Canvas.HeaderCtrl); + app.factory('globalMenuCtrl', nf.ng.Canvas.GlobalMenuCtrl); + app.factory('toolboxCtrl', nf.ng.Canvas.ToolboxCtrl); + app.factory('processorComponent', nf.ng.ProcessorComponent); + app.factory('inputPortComponent', nf.ng.InputPortComponent); + app.factory('outputPortComponent', nf.ng.OutputPortComponent); + app.factory('groupComponent', nf.ng.GroupComponent); + app.factory('remoteGroupComponent', nf.ng.RemoteProcessGroupComponent); + app.factory('funnelComponent', nf.ng.FunnelComponent); + app.factory('templateComponent', nf.ng.TemplateComponent); + app.factory('labelComponent', nf.ng.LabelComponent); + app.factory('graphControlsCtrl', nf.ng.Canvas.GraphControlsCtrl); + app.factory('navigateCtrl', nf.ng.Canvas.NavigateCtrl); + app.factory('operateCtrl', nf.ng.Canvas.OperateCtrl); //App Directives - app.directive('breadcrumbsDirective', nf.ng.BreadcrumbsDirective); + app.directive('nfBreadcrumbs', nf.ng.BreadcrumbsDirective); + app.directive('nfDraggable', nf.ng.DraggableDirective); //Manually Boostrap App angular.bootstrap($('body'), ['ngCanvasApp'], { strictDi: true }); @@ -480,8 +495,8 @@ nf.Canvas = (function () { nf.CanvasUtils.getSelection().classed('selected', false); } - // update the toolbar - nf.CanvasToolbar.refresh(); + // inform Angular app values have changed + nf.ng.Bridge.digest(); }); // define a function for update the graph dimensions @@ -509,8 +524,8 @@ nf.Canvas = (function () { }); //breadcrumbs - nf.ng.Bridge.call('AppCtrl.ServiceProvider.BreadcrumbsCtrl', - 'AppCtrl.ServiceProvider.BreadcrumbsCtrl.updateBreadcrumbsCss', + nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl', + 'appCtrl.serviceProvider.breadcrumbsCtrl.updateBreadcrumbsCss', {'bottom': bottom + 'px'}); // body @@ -520,10 +535,19 @@ nf.Canvas = (function () { }); }; + // define a function for update the flow status dimensions + var updateFlowStatusContainerSize = function () { + $('#flow-status-container').css({ + 'width': ((($('#nifi-logo').width() + $('#component-container').width())/$(window).width())*100)*2 + '%' + }); + }; + updateFlowStatusContainerSize(); + // listen for browser resize events to reset the graph size $(window).on('resize', function (e) { if (e.target === window) { updateGraphSize(); + updateFlowStatusContainerSize(); nf.Settings.resetTableSize(); } }).on('keydown', function (evt) { @@ -546,7 +570,7 @@ nf.Canvas = (function () { } else if (evt.keyCode === 65) { // ctrl-a nf.Actions.selectAll(); - nf.CanvasToolbar.refresh(); + nf.ng.Bridge.digest(); // only want to prevent default if the action was performed, otherwise default select all would be overridden evt.preventDefault(); @@ -588,8 +612,9 @@ nf.Canvas = (function () { // ensure the banners response is specified if (nf.Common.isDefinedAndNotNull(response.banners)) { if (nf.Common.isDefinedAndNotNull(response.banners.headerText) && response.banners.headerText !== '') { - // update the header text - $('#banner-header').addClass('banner-header-background').text(response.banners.headerText); + // update the header text and show it + $('#banner-header').addClass('banner-header-background').text(response.banners.headerText).show(); + $('#canvas-container').css('top', '98px'); } if (nf.Common.isDefinedAndNotNull(response.banners.footerText) && response.banners.footerText !== '') { @@ -709,6 +734,11 @@ nf.Canvas = (function () { } if (nf.Common.isDefinedAndNotNull(controllerStatus.invalidCount)) { $('#controller-invalid-count').text(controllerStatus.invalidCount); + if(controllerStatus.invalidCount > 0) { + $('#controller-invalid-count').parent().css('color', '#BA554A'); + } else { + $('#controller-invalid-count').parent().css('color', '#728E9B'); + } } else { $('#controller-invalid-count').text('-'); } @@ -793,10 +823,10 @@ nf.Canvas = (function () { nf.Canvas.setGroupId(processGroupFlow.id); // update the breadcrumbs - nf.ng.Bridge.call('AppCtrl.ServiceProvider.BreadcrumbsCtrl', - 'AppCtrl.ServiceProvider.BreadcrumbsCtrl.resetBreadcrumbs'); - nf.ng.Bridge.call('AppCtrl.ServiceProvider.BreadcrumbsCtrl', - 'AppCtrl.ServiceProvider.BreadcrumbsCtrl.generateBreadcrumbs', + nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl', + 'appCtrl.serviceProvider.breadcrumbsCtrl.resetBreadcrumbs'); + nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl', + 'appCtrl.serviceProvider.breadcrumbsCtrl.generateBreadcrumbs', processGroupFlow.breadcrumb); // set the parent id if applicable @@ -812,8 +842,8 @@ nf.Canvas = (function () { // refresh the graph nf.Graph.add(processGroupFlow.flow, false); - // update the toolbar - nf.CanvasToolbar.refresh(); + // inform Angular app values have changed + nf.ng.Bridge.digest(); }).fail(nf.Common.handleAjaxError); }; @@ -903,8 +933,8 @@ nf.Canvas = (function () { var settingsXhr = nf.Settings.loadSettings(false); // don't reload the status as we want to wait for deferreds to complete $.when(processGroupXhr, statusXhr, settingsXhr).done(function (processGroupResult) { // adjust breadcrumbs if necessary - nf.ng.Bridge.call('AppCtrl.ServiceProvider.BreadcrumbsCtrl', - 'AppCtrl.ServiceProvider.BreadcrumbsCtrl.resetScrollPosition'); + nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl', + 'appCtrl.serviceProvider.breadcrumbsCtrl.resetScrollPosition'); // don't load the status until the graph is loaded reloadStatus(nf.Canvas.getGroupId()).done(function () { @@ -1086,10 +1116,8 @@ nf.Canvas = (function () { initCanvas(); nf.Canvas.View.init(); nf.ContextMenu.init(); - nf.CanvasToolbar.init(); - nf.CanvasToolbox.init(); - nf.CanvasHeader.init(loginDetails.supportsLogin); - nf.GraphControl.init(); + nf.ng.Bridge.call('appCtrl.serviceProvider.headerCtrl', + 'appCtrl.serviceProvider.headerCtrl.init', loginDetails.supportsLogin); nf.Search.init(); nf.Settings.init(); nf.Actions.init(); @@ -1124,6 +1152,9 @@ nf.Canvas = (function () { nf.RemoteProcessGroupDetails.init(); nf.GoTo.init(); nf.Graph.init().done(function () { + nf.ng.Bridge.call('appCtrl.serviceProvider.graphControlsCtrl', + 'appCtrl.serviceProvider.graphControlsCtrl.init'); + // determine the split between the polling var pollingSplit = autoRefreshIntervalSeconds / 2; http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js index afef31c..bb8811c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js @@ -239,9 +239,6 @@ nf.ComponentState = (function () { resetDialog(); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); // clear state link http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js index e03c60d..a316b5d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js @@ -1108,9 +1108,6 @@ nf.ConnectionConfiguration = (function () { resetDialog(); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); // initialize the properties tabs http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js index 90863d5..19495a2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js @@ -553,8 +553,8 @@ nf.ContextMenu = (function () { 'y': position[1] }); - // refresh the toolbar incase we've click on the canvas - nf.CanvasToolbar.refresh(); + // inform Angular app incase we've click on the canvas + nf.ng.Bridge.digest(); }, /** http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js index f5ed34e..7b2211e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js @@ -1431,9 +1431,6 @@ nf.ControllerService = (function () { $('#controller-service-configuration').removeData('controllerServiceDetails'); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); // initialize the property table @@ -1498,9 +1495,6 @@ nf.ControllerService = (function () { }]); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); // initialize the enable scope combo @@ -1571,9 +1565,6 @@ nf.ControllerService = (function () { }]); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); }, http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js deleted file mode 100644 index b6f2a51..0000000 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js +++ /dev/null @@ -1,140 +0,0 @@ -/* - * 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 nf */ - -nf.GraphControl = (function () { - - var config = { - translateIncrement: 20 - }; - - return { - /** - * Initializes the graph controls. - */ - init: function () { - // pan up - nf.Common.addHoverEffect('#pan-up-button', 'pan-up', 'pan-up-hover').on('click', function () { - var translate = nf.Canvas.View.translate(); - nf.Canvas.View.translate([translate[0], translate[1] + config.translateIncrement]); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - - // pan down - nf.Common.addHoverEffect('#pan-down-button', 'pan-down', 'pan-down-hover').on('click', function () { - var translate = nf.Canvas.View.translate(); - nf.Canvas.View.translate([translate[0], translate[1] - config.translateIncrement]); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - - // pan left - nf.Common.addHoverEffect('#pan-left-button', 'pan-left', 'pan-left-hover').on('click', function () { - var translate = nf.Canvas.View.translate(); - nf.Canvas.View.translate([translate[0] + config.translateIncrement, translate[1]]); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - - // pan right - nf.Common.addHoverEffect('#pan-right-button', 'pan-right', 'pan-right-hover').on('click', function () { - var translate = nf.Canvas.View.translate(); - nf.Canvas.View.translate([translate[0] - config.translateIncrement, translate[1]]); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - - // zoom in - nf.Common.addHoverEffect('#zoom-in-button', 'zoom-in', 'zoom-in-hover').on('click', function () { - nf.Canvas.View.zoomIn(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - - // zoom out - nf.Common.addHoverEffect('#zoom-out-button', 'zoom-out', 'zoom-out-hover').on('click', function () { - nf.Canvas.View.zoomOut(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - - // zoom fit - nf.Common.addHoverEffect('#zoom-fit-button', 'fit-image', 'fit-image-hover').on('click', function () { - nf.Canvas.View.fit(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - - // one to one - nf.Common.addHoverEffect('#zoom-actual-button', 'actual-size', 'actual-size-hover').on('click', function () { - nf.Canvas.View.actualSize(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }); - } - }; -}()); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js index db720d0..8f338fb 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js @@ -98,10 +98,10 @@ nf.Graph = (function () { if (!nf.Common.isEmpty(processGroupContents.connections)) { nf.Connection.add(processGroupContents.connections, selectAll); } - - // trigger the toolbar to refresh if the selection is changing + + // inform Angular app if the selection is changing if (selectAll) { - nf.CanvasToolbar.refresh(); + nf.ng.Bridge.digest(); } }, http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-app-config.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-app-config.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-app-config.js index 314a06e..5c8f3d7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-app-config.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-ng-canvas-app-config.js @@ -24,30 +24,75 @@ nf.ng.Canvas.AppConfig = (function () { //console and call 'angular.reloadWithDebugInfo();' $compileProvider.debugInfoEnabled(false); //Define app palettes - var basePaletteMap = $mdThemingProvider.extendPalette("grey", { - "contrastDefaultColor": "light", - "contrastDarkColors": ["100"], //hues which contrast should be "dark" by default - "contrastLightColors": ["600"], //hues which contrast should be "light" by default - "500": "728E9B" + $mdThemingProvider.definePalette('basePalette', { + '50': '728E9B', + '100': '728E9B', + '200': '004849',/* link-color */ + '300': '775351',/* value-color */ + '400': '728E9B', + '500': '728E9B',/* base-color */ + '600': '728E9B', + '700': '728E9B', + '800': '728E9B', + '900': 'rgba(249,250,251,0.97)',/* tint base-color 96% */ + 'A100': '728E9B', + 'A200': '728E9B', + 'A400': '728E9B', + 'A700': '728E9B', + 'contrastDefaultColor': 'light', + 'contrastDarkColors': ['A100'], + 'contrastLightColors': undefined }); - var accentPaletteMap = $mdThemingProvider.extendPalette("grey", { - "contrastDefaultColor": "dark", - "contrastDarkColors": ["100"], - "contrastLightColors": ["600"], - "500": "BA554A" + $mdThemingProvider.definePalette('tintPalette', { + '50': '728E9B', + '100': '728E9B', + '200': 'CCDADB',/* tint link-color 20% */ + '300': '728E9B', + '400': 'AABBC3',/* tint base-color 40% */ + '500': '728E9B', + '600': 'C7D2D7',/* tint base-color 60% */ + '700': '728E9B', + '800': 'E3E8EB',/* tint base-color 80% */ + '900': '728E9B', + 'A100': '728E9B', + 'A200': '728E9B', + 'A400': '728E9B', + 'A700': '728E9B', + 'contrastDefaultColor': 'light', + 'contrastDarkColors': ['A100'], + 'contrastLightColors': undefined + }); + $mdThemingProvider.definePalette('warnPalette', { + '50': 'BA554A', + '100': 'BA554A', + '200': 'BA554A', + '300': 'BA554A', + '400': 'BA554A', + '500': 'BA554A',/* warn-color */ + '600': 'BA554A', + '700': 'BA554A', + '800': 'BA554A', + '900': 'BA554A', + 'A100': 'BA554A', + 'A200': 'BA554A', + 'A400': 'BA554A', + 'A700': 'BA554A', + 'contrastDefaultColor': 'light', + 'contrastDarkColors': ['A100'], + 'contrastLightColors': undefined }); - $mdThemingProvider.definePalette("basePalette", basePaletteMap); - $mdThemingProvider.definePalette("accentPalette", accentPaletteMap); $mdThemingProvider.theme("default").primaryPalette("basePalette", { "default": "500", - "hue-1": "50", // use for the <code>md-hue-1</code> class - "hue-2": "300", // use for the <code>md-hue-2</code> class - "hue-3": "600" // use for the <code>md-hue-3</code> class - }).accentPalette("accentPalette", { - "default": "500", - "hue-1": "50", + "hue-1": "200", "hue-2": "300", - "hue-3": "600" + "hue-3": "900" + }).accentPalette("tintPalette", { + "default": "200", + "hue-1": "400", + "hue-2": "600", + "hue-3": "800" + }).warnPalette("warnPalette", { + "default": "500" }); } http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js index a972e8e..68ff8e5 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js @@ -122,9 +122,6 @@ nf.PortConfiguration = (function () { $('#port-comments').val(''); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); }; http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js index 1134fc1..e3f3f6f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js @@ -42,9 +42,6 @@ nf.PortDetails = (function () { nf.Common.clearField('read-only-port-comments'); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); }, http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js index 3b6cd14..ddeabaa 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js @@ -87,9 +87,6 @@ nf.ProcessGroupConfiguration = (function () { $('#process-group-comments').val(''); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); }, http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js index 7796901..3ee5601 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js @@ -42,9 +42,6 @@ nf.ProcessGroupDetails = (function () { nf.Common.clearField('read-only-process-group-comments'); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); }, http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js index b6b7f34..98d20a8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js @@ -507,9 +507,6 @@ nf.ProcessorConfiguration = (function () { $('#processor-configuration').removeData('processorDetails'); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); // initialize the bulletin combo @@ -726,6 +723,9 @@ nf.ProcessorConfiguration = (function () { // close the details panel $('#processor-configuration').modal('hide'); + + // inform Angular app values have changed + nf.ng.Bridge.digest(); }); } } http://git-wip-us.apache.org/repos/asf/nifi/blob/1df8fe44/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js index 6a8277b..95755ed 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js @@ -55,9 +55,6 @@ nf.QueueListing = (function () { $('#listing-request-status-dialog').modal('setButtonModel', []); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); }; @@ -221,9 +218,6 @@ nf.QueueListing = (function () { $('#additional-flowfile-details').empty(); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); };
