http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/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 ---------------------------------------------------------------------- diff --git a/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 b/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 index ad011ca..257de23 100644 --- a/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 +++ b/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 @@ -15,656 +15,696 @@ * limitations under the License. */ -/* global nf, d3 */ - -nf.ng.ProcessorComponent = function (serviceProvider) { +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'Slick', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Dialog', + 'nf.Common'], + function ($, Slick, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { + return (nf.ng.ProcessorComponent = factory($, Slick, client, birdseye, graph, canvasUtils, errorHandler, dialog, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.ProcessorComponent = + factory(require('jquery'), + require('Slick'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Dialog'), + require('nf.Common'))); + } else { + nf.ng.ProcessorComponent = factory(root.$, + root.Slick, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Dialog, + root.nf.Common); + } +}(this, function ($, Slick, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { 'use strict'; - /** - * Filters the processor type table. - */ - var applyFilter = function () { - // get the dataview - var processorTypesGrid = $('#processor-types-table').data('gridInstance'); + return function (serviceProvider) { + 'use strict'; - // ensure the grid has been initialized - if (nf.Common.isDefinedAndNotNull(processorTypesGrid)) { - var processorTypesData = processorTypesGrid.getData(); + /** + * Filters the processor type table. + */ + var applyFilter = function () { + // get the dataview + var processorTypesGrid = $('#processor-types-table').data('gridInstance'); - // update the search criteria - processorTypesData.setFilterArgs({ - searchString: getFilterText() - }); - processorTypesData.refresh(); + // ensure the grid has been initialized + if (common.isDefinedAndNotNull(processorTypesGrid)) { + var processorTypesData = processorTypesGrid.getData(); + + // update the search criteria + processorTypesData.setFilterArgs({ + searchString: getFilterText() + }); + processorTypesData.refresh(); - // update the buttons to possibly trigger the disabled state - $('#new-processor-dialog').modal('refreshButtons'); + // update the buttons to possibly trigger the disabled state + $('#new-processor-dialog').modal('refreshButtons'); - // update the selection if possible - if (processorTypesData.getLength() > 0) { - processorTypesGrid.setSelectedRows([0]); + // 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; - } + /** + * 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; - } + 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; - }; + // 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']); + /** + * 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; + // 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(''); + // 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(); - } + // clear the active cell the it can be reselected when its included + var processTypesGrid = $('#processor-types-table').data('gridInstance'); + processTypesGrid.resetActiveCell(); + } - return matches; - }; + 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; - } - }); + /** + * 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); + }); - return matches; - }; + // normalize the tags + var normalizedTags = tags.toLowerCase(); - /** - * 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; - }; + var matches = true; + $.each(selectedTags, function (i, selectedTag) { + if (normalizedTags.indexOf(selectedTag) === -1) { + matches = false; + return false; + } + }); - // perform the sort - data.sort(comparer, sortDetails.sortAsc); - }; + return matches; + }; - /** - * 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 () { - return $('#processor-type-filter').val(); - }; + /** + * 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 = common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : ''; + var bString = common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : ''; + return aString === bString ? 0 : aString > bString ? 1 : -1; + }; - /** - * 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').val(''); - - // 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(); - }; + // perform the sort + data.sort(comparer, sortDetails.sortAsc); + }; - /** - * 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({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'type': processorType, - 'name': name, - 'position': { - 'x': pt.x, - 'y': pt.y - } - } + /** + * 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 () { + return $('#processor-type-filter').val(); }; - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/processors', - data: JSON.stringify(processorEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the processor to the graph - nf.Graph.add({ - 'processors': [response] - }, { - 'selectAll': true - }); + /** + * Resets the filtered processor types. + */ + var resetProcessorDialog = function () { + // clear the selected tag cloud + $('#processor-tag-cloud').tagcloud('clearSelectedTags'); - // update component visibility - nf.Canvas.View.updateVisibility(); + // clear any filter strings + $('#processor-type-filter').val(''); - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; + // reapply the filter + applyFilter(); - /** - * Whether the specified item is selectable. - * - * @param item process type - */ - var isSelectable = function (item) { - return nf.Common.isBlank(item.usageRestriction) || nf.Common.canAccessRestrictedComponents(); - }; + // clear the selected row + $('#processor-type-description').text(''); + $('#processor-type-name').text(''); + $('#selected-processor-name').text(''); + $('#selected-processor-type').text(''); - function ProcessorComponent() { + // unselect any current selection + var processTypesGrid = $('#processor-types-table').data('gridInstance'); + processTypesGrid.setSelectedRows([]); + processTypesGrid.resetActiveCell(); + }; + + /** + * 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': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'type': processorType, + 'name': name, + 'position': { + 'x': pt.x, + 'y': pt.y + } + } + }; - this.icon = 'icon icon-processor'; + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/processors', + data: JSON.stringify(processorEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the processor to the graph + graph.add({ + 'processors': [response] + }, { + 'selectAll': true + }); - this.hoverIcon = 'icon icon-processor-add'; + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + }; /** - * The processor component's modal. + * Whether the specified item is selectable. + * + * @param item process type */ - this.modal = { + var isSelectable = function (item) { + return common.isBlank(item.usageRestriction) || common.canAccessRestrictedComponents(); + }; + + function ProcessorComponent() { + + this.icon = 'icon icon-processor'; + + this.hoverIcon = 'icon icon-processor-add'; /** - * The processor component modal's filter. + * The processor component's modal. */ - filter: { + this.modal = { /** - * Initialize the filter. + * The processor component modal's filter. */ - init: function () { - // initialize the processor type table - var processorTypesColumns = [ - { - id: 'type', - name: 'Type', - field: 'label', - formatter: nf.Common.typeFormatter, - 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, - rowHeight: 24 - }; - - // 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) { + filter: { + + /** + * Initialize the filter. + */ + init: function () { + // initialize the processor type table + var processorTypesColumns = [ + { + id: 'type', + name: 'Type', + field: 'label', + formatter: common.typeFormatter, + 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, + rowHeight: 24 + }; + + // 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: args.sortCol.field, - sortAsc: args.sortAsc + columnId: 'type', + sortAsc: true }, 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') - .width($('#processor-description-container').innerWidth() - 1) - .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); + // 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 (common.isDefinedAndNotNull(processorType)) { + if (common.isBlank(processorType.description)) { + $('#processor-type-description') + .attr('title', '') + .html('<span class="unset">No description specified</span>'); + } else { + $('#processor-type-description') + .width($('#processor-description-container').innerWidth() - 1) + .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); - // refresh the buttons based on the current selection - $('#new-processor-dialog').modal('refreshButtons'); + // refresh the buttons based on the current selection + $('#new-processor-dialog').modal('refreshButtons'); + } } - } - }); - processorTypesGrid.onViewportChanged.subscribe(function (e, args) { - nf.Common.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction'); - }); + }); + processorTypesGrid.onViewportChanged.subscribe(function (e, args) { + common.cleanUpTooltips($('#processor-types-table'), 'div.view-usage-restriction'); + }); - // wire up the dataview to the grid - processorTypesData.onRowCountChanged.subscribe(function (e, args) { - processorTypesGrid.updateRowCount(); - processorTypesGrid.render(); + // 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).on('mouseenter', 'div.slick-cell', function (e) { - var usageRestriction = $(this).find('div.view-usage-restriction'); - if (usageRestriction.length && !usageRestriction.data('qtip')) { - var rowId = $(this).find('span.row-id').text(); - - // get the status item - var item = processorTypesData.getItemById(rowId); - - // show the tooltip - if (nf.Common.isDefinedAndNotNull(item.usageRestriction)) { - usageRestriction.qtip($.extend({}, nf.Common.config.tooltipConfig, { - content: item.usageRestriction, - position: { - container: $('#summary'), - at: 'bottom right', - my: 'top left', - adjust: { - x: 4, - y: 4 + // 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).on('mouseenter', 'div.slick-cell', function (e) { + var usageRestriction = $(this).find('div.view-usage-restriction'); + if (usageRestriction.length && !usageRestriction.data('qtip')) { + var rowId = $(this).find('span.row-id').text(); + + // get the status item + var item = processorTypesData.getItemById(rowId); + + // show the tooltip + if (common.isDefinedAndNotNull(item.usageRestriction)) { + usageRestriction.qtip($.extend({}, common.config.tooltipConfig, { + content: item.usageRestriction, + position: { + container: $('#summary'), + at: 'bottom right', + my: 'top left', + adjust: { + x: 4, + y: 4 + } } - } - })); + })); + } } - } - }); + }); - // 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: serviceProvider.headerCtrl.toolboxCtrl.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), - usageRestriction: nf.Common.escapeHtml(documentedType.usageRestriction), - tags: documentedType.tags.join(', ') + // 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: serviceProvider.headerCtrl.toolboxCtrl.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: common.substringAfterLast(type, '.'), + type: type, + description: common.escapeHtml(documentedType.description), + usageRestriction: common.escapeHtml(documentedType.usageRestriction), + tags: documentedType.tags.join(', ') + }); + + // count the frequency of each tag for this type + $.each(documentedType.tags, function (i, tag) { + tags.push(tag.toLowerCase()); + }); }); - // 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(errorHandler.handleAjaxError); + } + }, - // end the udpate - processorTypesData.endUpdate(); + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-processor-dialog'); + }, - // set the total number of processors - $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length); + /** + * Initialize the modal. + */ + init: function () { + this.filter.init(); - // create the tag cloud - $('#processor-tag-cloud').tagcloud({ - tags: tags, - select: applyFilter, - remove: applyFilter - }); - }).fail(nf.ErrorHandler.handleAjaxError); + // configure the new processor dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Processor', + handler: { + resize: function () { + $('#processor-type-description') + .width($('#processor-description-container').innerWidth() - 1) + .text($('#processor-type-description').attr('title')) + .ellipsis(); + } + } + }); + }, + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal + */ + hide: function () { + this.getElement().modal('hide'); } - }, + }; + } + + ProcessorComponent.prototype = { + constructor: ProcessorComponent, /** - * Gets the modal element. + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-processor-dialog'); + return $('#processor-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - this.filter.init(); + enabled: function () { + this.getElement().attr('disabled', false); + }, - // configure the new processor dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Processor', - handler: { - resize: function () { - $('#processor-type-description') - .width($('#processor-description-container').innerWidth() - 1) - .text($('#processor-type-description').attr('title')) - .ellipsis(); - } - } - }); + /** + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); }, /** - * Updates the modal config. + * Handler function for when component is dropped on the canvas. * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * @argument {object} pt The point that the component was dropped */ - update: function (name, config) { - this.getElement().modal(name, config); + dropHandler: function (pt) { + this.promptForProcessorType(pt); }, /** - * Show the modal + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - show: function () { - this.getElement().modal('show'); + dragIcon: function (event) { + return $('<div class="icon icon-processor-add"></div>'); }, /** - * Hide the modal + * Prompts the user to select the type of new processor to create. + * + * @argument {object} pt The point that the processor was dropped */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } - - ProcessorComponent.prototype = { - constructor: ProcessorComponent, - - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#processor-component'); - }, - - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped - */ - dropHandler: function (pt) { - this.promptForProcessorType(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('<div class="icon icon-processor-add"></div>'); - }, - - /** - * Prompts the user to select the type of new processor to create. - * - * @argument {object} pt The point that the processor was dropped - */ - promptForProcessorType: function (pt) { - var processorComponent = this; - - // 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({ - headerText: 'Add Processor', - dialogContent: 'The type of processor to create must be selected.' - }); - } else { - // create the new processor - createProcessor(name, processorType, pt); - } - - // hide the dialog - processorComponent.modal.hide(); - }; + promptForProcessorType: function (pt) { + var processorComponent = this; + + // 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 === '') { + dialog.showOkDialog({ + headerText: 'Add Processor', + dialogContent: 'The type of processor to create must be selected.' + }); + } else { + // create the new processor + createProcessor(name, processorType, pt); + } - // get the grid reference - var grid = $('#processor-types-table').data('gridInstance'); + // hide the dialog + processorComponent.modal.hide(); + }; - // add the processor when its double clicked in the table - var gridDoubleClick = function (e, args) { - var processorType = grid.getDataItem(args.row); + // get the grid reference + var grid = $('#processor-types-table').data('gridInstance'); - if (isSelectable(processorType)) { - $('#selected-processor-name').text(processorType.label); - $('#selected-processor-type').text(processorType.type); + // add the processor when its double clicked in the table + var gridDoubleClick = function (e, args) { + var processorType = grid.getDataItem(args.row); - addProcessor(); - } - }; + if (isSelectable(processorType)) { + $('#selected-processor-name').text(processorType.label); + $('#selected-processor-type').text(processorType.type); - // register a handler for double click events - grid.onDblClick.subscribe(gridDoubleClick); + addProcessor(); + } + }; - // update the button model - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - disabled: function () { - var selected = grid.getSelectedRows(); + // register a handler for double click events + grid.onDblClick.subscribe(gridDoubleClick); - if (selected.length > 0) { - // grid configured with multi-select = false - var item = grid.getDataItem(selected[0]); - return isSelectable(item) === false; - } else { - return grid.getData().getLength() === 0; - } - }, - handler: { - click: addProcessor - } - }, - { - buttonText: 'Cancel', + // update the button model + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, - handler: { - click: function () { - $('#new-processor-dialog').modal('hide'); + disabled: function () { + var selected = grid.getSelectedRows(); + + if (selected.length > 0) { + // grid configured with multi-select = false + var item = grid.getDataItem(selected[0]); + return isSelectable(item) === false; + } else { + return grid.getData().getLength() === 0; } + }, + handler: { + click: addProcessor } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + $('#new-processor-dialog').modal('hide'); + } + } + }]); - // set a new handler for closing the the dialog - this.modal.update('setCloseHandler', function () { - // remove the handler - grid.onDblClick.unsubscribe(gridDoubleClick); + // set a new handler for closing the the dialog + this.modal.update('setCloseHandler', function () { + // remove the handler + grid.onDblClick.unsubscribe(gridDoubleClick); - // clear the current filters - resetProcessorDialog(); - }); + // clear the current filters + resetProcessorDialog(); + }); - // show the dialog - this.modal.show(); + // show the dialog + this.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) { - var selected = grid.getSelectedRows(); + // 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) { + var selected = grid.getSelectedRows(); - if (selected.length > 0) { - // grid configured with multi-select = false - var item = grid.getDataItem(selected[0]); - if (isSelectable(item)) { - addProcessor(); + if (selected.length > 0) { + // grid configured with multi-select = false + var item = grid.getDataItem(selected[0]); + if (isSelectable(item)) { + addProcessor(); + } } + } else { + applyFilter(); } - } else { - applyFilter(); - } - }); + }); - // adjust the grid canvas now that its been rendered - grid.resizeCanvas(); - grid.setSelectedRows([0]); + // adjust the grid canvas now that its been rendered + grid.resizeCanvas(); + grid.setSelectedRows([0]); + } } - } - var processorComponent = new ProcessorComponent(); - return processorComponent; -}; \ No newline at end of file + var processorComponent = new ProcessorComponent(); + return processorComponent; + }; +})); \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js index 8985f16..d911ece 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js @@ -15,265 +15,302 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.RemoteProcessGroupComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Dialog', + 'nf.Common'], + function ($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { + return (nf.ng.RemoteProcessGroupComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.RemoteProcessGroupComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Dialog'), + require('nf.Common'))); + } else { + nf.ng.RemoteProcessGroupComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Dialog, + root.nf.Common); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler, dialog, common) { 'use strict'; - /** - * Create the controller and add to the graph. - * - * @argument {object} pt The point that the remote group was dropped. - */ - var createRemoteProcessGroup = function (pt) { + return function (serviceProvider) { + 'use strict'; - var remoteProcessGroupEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 + /** + * Create the controller and add to the graph. + * + * @argument {object} pt The point that the remote group was dropped. + */ + var createRemoteProcessGroup = function (pt) { + + var remoteProcessGroupEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'targetUris': $('#new-remote-process-group-uris').val(), + 'position': { + 'x': pt.x, + 'y': pt.y + }, + 'communicationsTimeout': $('#new-remote-process-group-timeout').val(), + 'yieldDuration': $('#new-remote-process-group-yield-duration').val(), + 'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value, + 'proxyHost': $('#new-remote-process-group-proxy-host').val(), + 'proxyPort': $('#new-remote-process-group-proxy-port').val(), + 'proxyUser': $('#new-remote-process-group-proxy-user').val(), + 'proxyPassword': $('#new-remote-process-group-proxy-password').val() } - }), - 'component': { - 'targetUris': $('#new-remote-process-group-uris').val(), - 'position': { - 'x': pt.x, - 'y': pt.y - }, - 'communicationsTimeout': $('#new-remote-process-group-timeout').val(), - 'yieldDuration': $('#new-remote-process-group-yield-duration').val(), - 'transportProtocol': $('#new-remote-process-group-transport-protocol-combo').combo('getSelectedOption').value, - 'proxyHost': $('#new-remote-process-group-proxy-host').val(), - 'proxyPort': $('#new-remote-process-group-proxy-port').val(), - 'proxyUser': $('#new-remote-process-group-proxy-user').val(), - 'proxyPassword': $('#new-remote-process-group-proxy-password').val() - } - }; + }; - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/remote-process-groups', - data: JSON.stringify(remoteProcessGroupEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the processor to the graph - nf.Graph.add({ - 'remoteProcessGroups': [response] - }, { - 'selectAll': true - }); + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/remote-process-groups', + data: JSON.stringify(remoteProcessGroupEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the processor to the graph + graph.add({ + 'remoteProcessGroups': [response] + }, { + 'selectAll': true + }); + + // hide the dialog + $('#new-remote-process-group-dialog').modal('hide'); - // hide the dialog - $('#new-remote-process-group-dialog').modal('hide'); + // update component visibility + graph.updateVisibility(); - // update component visibility - nf.Canvas.View.updateVisibility(); + // update the birdseye + birdseye.refresh(); + }).fail(function (xhr, status, error) { + if (xhr.status === 400) { + var errors = xhr.responseText.split('\n'); - // update the birdseye - nf.Birdseye.refresh(); - }).fail(function (xhr, status, error) { - if (xhr.status === 400) { - var errors = xhr.responseText.split('\n'); + var content; + if (errors.length === 1) { + content = $('<span></span>').text(errors[0]); + } else { + content = common.formatUnorderedList(errors); + } - var content; - if (errors.length === 1) { - content = $('<span></span>').text(errors[0]); + dialog.showOkDialog({ + dialogContent: content, + headerText: 'Configuration Error' + }); } else { - content = nf.Common.formatUnorderedList(errors); + errorHandler.handleAjaxError(xhr, status, error); } + }); + }; - nf.Dialog.showOkDialog({ - dialogContent: content, - headerText: 'Configuration Error' - }); - } else { - nf.ErrorHandler.handleAjaxError(xhr, status, error); - } - }); - }; - - function RemoteProcessGroupComponent() { - - this.icon = 'icon icon-group-remote'; + function RemoteProcessGroupComponent() { - this.hoverIcon = 'icon icon-group-remote-add'; + this.icon = 'icon icon-group-remote'; - /** - * The remote group component's modal. - */ - this.modal = { + this.hoverIcon = 'icon icon-group-remote-add'; /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} + * The remote group component's modal. */ - getElement: function () { - return $('#new-remote-process-group-dialog'); - }, + this.modal = { - /** - * Initialize the modal. - */ - init: function () { - var defaultTimeout = "30 sec"; - var defaultYieldDuration = "10 sec"; - // configure the new remote process group dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Remote Process Group', - handler: { - close: function () { - $('#new-remote-process-group-uris').val(''); - $('#new-remote-process-group-timeout').val(defaultTimeout); - $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); - $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', { - value: 'RAW' - }); - $('#new-remote-process-group-proxy-host').val(''); - $('#new-remote-process-group-proxy-port').val(''); - $('#new-remote-process-group-proxy-user').val(''); - $('#new-remote-process-group-proxy-password').val(''); + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-remote-process-group-dialog'); + }, + + /** + * Initialize the modal. + */ + init: function () { + var defaultTimeout = "30 sec"; + var defaultYieldDuration = "10 sec"; + // configure the new remote process group dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Remote Process Group', + handler: { + close: function () { + $('#new-remote-process-group-uris').val(''); + $('#new-remote-process-group-timeout').val(defaultTimeout); + $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); + $('#new-remote-process-group-transport-protocol-combo').combo('setSelectedOption', { + value: 'RAW' + }); + $('#new-remote-process-group-proxy-host').val(''); + $('#new-remote-process-group-proxy-port').val(''); + $('#new-remote-process-group-proxy-user').val(''); + $('#new-remote-process-group-proxy-password').val(''); + } } - } - }); - // set default values - $('#new-remote-process-group-timeout').val(defaultTimeout); - $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); - // initialize the transport protocol combo - $('#new-remote-process-group-transport-protocol-combo').combo({ - options: [{ + }); + // set default values + $('#new-remote-process-group-timeout').val(defaultTimeout); + $('#new-remote-process-group-yield-duration').val(defaultYieldDuration); + // initialize the transport protocol combo + $('#new-remote-process-group-transport-protocol-combo').combo({ + options: [{ text: 'RAW', value: 'RAW' }, { text: 'HTTP', value: 'HTTP' }] - }); - }, + }); + }, + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + RemoteProcessGroupComponent.prototype = { + constructor: RemoteProcessGroupComponent, /** - * Updates the modal config. + * Gets the component. * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * @returns {*|jQuery|HTMLElement} */ - update: function (name, config) { - this.getElement().modal(name, config); + getElement: function () { + return $('#group-remote-component'); }, /** - * Show the modal. + * Enable the component. */ - show: function () { - this.getElement().modal('show'); + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Hide the modal. + * Disable the component. */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } - - RemoteProcessGroupComponent.prototype = { - constructor: RemoteProcessGroupComponent, - - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#group-remote-component'); - }, - - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, + disabled: function () { + this.getElement().attr('disabled', true); + }, - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForRemoteProcessGroupUri(pt); - }, + /** + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. + */ + dropHandler: function (pt) { + this.promptForRemoteProcessGroupUri(pt); + }, - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('<div class="icon icon-group-remote-add"></div>'); - }, + /** + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} + */ + dragIcon: function (event) { + return $('<div class="icon icon-group-remote-add"></div>'); + }, - /** - * Prompts the user to enter the URI for the remote process group. - * - * @argument {object} pt The point that the remote group was dropped. - */ - promptForRemoteProcessGroupUri: function (pt) { - var remoteProcessGroupComponent = this; - var addRemoteProcessGroup = function () { - // create the remote process group - createRemoteProcessGroup(pt); - }; + /** + * Prompts the user to enter the URI for the remote process group. + * + * @argument {object} pt The point that the remote group was dropped. + */ + promptForRemoteProcessGroupUri: function (pt) { + var remoteProcessGroupComponent = this; + var addRemoteProcessGroup = function () { + // create the remote process group + createRemoteProcessGroup(pt); + }; - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: addRemoteProcessGroup - } - }, - { - buttonText: 'Cancel', + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - remoteProcessGroupComponent.modal.hide(); - } + click: addRemoteProcessGroup } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + remoteProcessGroupComponent.modal.hide(); + } + } + }]); - // show the dialog - this.modal.show(); + // show the dialog + this.modal.show(); - // set the focus and key handlers - $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addRemoteProcessGroup(); - } - }); + // set the focus and key handlers + $('#new-remote-process-group-uris').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addRemoteProcessGroup(); + } + }); + } } - } - var remoteProcessGroupComponent = new RemoteProcessGroupComponent(); - return remoteProcessGroupComponent; -}; \ No newline at end of file + var remoteProcessGroupComponent = new RemoteProcessGroupComponent(); + return remoteProcessGroupComponent; + }; +})); \ No newline at end of file
