http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js index 5bf3e9e..4875e40 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js @@ -31,7 +31,7 @@ nf.GoTo = (function () { /** * Returns a deferred for the process group. - * + * * @param {string} processGroupId */ var getProcessGroup = function (processGroupId) { @@ -44,7 +44,7 @@ nf.GoTo = (function () { /** * Returns a deferred for the remote process group. - * + * * @param {string} parentGroupId * @param {string} remoteProcessGroupId */ @@ -58,7 +58,7 @@ nf.GoTo = (function () { /** * Adds a connection to the connections dialog. - * + * * @param {object} connection */ var addConnection = function (connection) { @@ -115,7 +115,7 @@ nf.GoTo = (function () { /** * Adds a destination component to the dialog. - * + * * @param {jQuery} container The container to add to * @param {object} connection The connection to the downstream component */ @@ -149,7 +149,7 @@ nf.GoTo = (function () { /** * Adds a destination input port to the dialog. - * + * * @param {jQuery} container The container to add to * @param {object} connection The connection to the downstream input port */ @@ -190,7 +190,7 @@ nf.GoTo = (function () { /** * Adds a destination remote input port to the dialog. - * + * * @param {jQuery} container The container to add to * @param {object} connection The connection to the downstream remote input port */ @@ -225,7 +225,7 @@ nf.GoTo = (function () { /** * Adds a source component to the dialog. - * + * * @param {jQuery} container The container to add to * @param {object} connection The connection to the upstream component */ @@ -256,9 +256,9 @@ nf.GoTo = (function () { /** * Adds a source output port to the dialog. - * + * * @param {jQuery} container The container to add to - * @param {object} connection The connection + * @param {object} connection The connection */ var addSourceOutputPort = function (container, connection) { // get the remote process group @@ -290,7 +290,7 @@ nf.GoTo = (function () { /** * Adds a source remote output port to the dialog. - * + * * @param {jQuery} container The container to add to * @param {object} connection The connection to the downstream remote output port */ @@ -322,15 +322,19 @@ nf.GoTo = (function () { */ init: function () { $('#connections-dialog').modal({ - overlayBackground: false, buttons: [{ - buttonText: 'Close', - handler: { - click: function () { - $('#connections-dialog').modal('hide'); - } + buttonText: 'Close', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + $('#connections-dialog').modal('hide'); } - }], + } + }], handler: { close: function () { $('#connections-context').empty(); @@ -339,10 +343,10 @@ nf.GoTo = (function () { } }); }, - + /** * Shows components downstream from a processor. - * + * * @param {selection} selection The processor selection */ showDownstreamFromProcessor: function (selection) { @@ -357,9 +361,9 @@ nf.GoTo = (function () { // populate the downstream dialog $('#connections-context') - .append('<div class="search-result-icon processor-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon processor-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the destination for each connection $.each(connections, function (_, connection) { @@ -378,10 +382,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components upstream from a processor. - * + * * @param {selection} selection The processor selection */ showUpstreamFromProcessor: function (selection) { @@ -396,9 +400,9 @@ nf.GoTo = (function () { // populate the upstream dialog $('#connections-context') - .append('<div class="search-result-icon processor-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon processor-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the source for each connection $.each(connections, function (_, connection) { @@ -417,10 +421,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components downstream from a process group or a remote process group. - * + * * @param {selection} selection The process group or remote process group selection */ showDownstreamFromGroup: function (selection) { @@ -435,9 +439,9 @@ nf.GoTo = (function () { // populate the downstream dialog $('#connections-context') - .append('<div class="search-result-icon process-group-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon process-group-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the destination for each connection $.each(connections, function (_, connection) { @@ -456,10 +460,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components upstream from a process group or a remote process group. - * + * * @param {selection} selection The process group or remote process group selection */ showUpstreamFromGroup: function (selection) { @@ -474,9 +478,9 @@ nf.GoTo = (function () { // populate the upstream dialog $('#connections-context') - .append('<div class="search-result-icon process-group-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon process-group-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the source for each connection $.each(connections, function (_, connection) { @@ -495,10 +499,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components downstream from an input port. - * + * * @param {selection} selection The input port selection */ showDownstreamFromInputPort: function (selection) { @@ -513,9 +517,9 @@ nf.GoTo = (function () { // populate the downstream dialog $('#connections-context') - .append('<div class="search-result-icon input-port-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon input-port-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the destination for each connection $.each(connections, function (_, connection) { @@ -534,10 +538,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components upstream from an input port. - * + * * @param {selection} selection The input port selection */ showUpstreamFromInputPort: function (selection) { @@ -552,12 +556,12 @@ nf.GoTo = (function () { // populate the upstream dialog $('#connections-context') - .append('<div class="search-result-icon process-group-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName())) - .append('<div class="clear"></div>') - .append('<div class="search-result-icon input-port-small-icon" style="margin-left: 20px;"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon process-group-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName())) + .append('<div class="clear"></div>') + .append('<div class="search-result-icon input-port-small-icon" style="margin-left: 20px;"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the source for each connection $.each(connections, function (_, connection) { @@ -576,10 +580,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components downstream from an output port. - * + * * @param {selection} selection The output port selection */ showDownstreamFromOutputPort: function (selection) { @@ -594,12 +598,12 @@ nf.GoTo = (function () { // populate the downstream dialog $('#connections-context') - .append('<div class="search-result-icon process-group-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName())) - .append('<div class="clear"></div>') - .append('<div class="search-result-icon output-port-small-icon" style="margin-left: 20px;"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon process-group-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName())) + .append('<div class="clear"></div>') + .append('<div class="search-result-icon output-port-small-icon" style="margin-left: 20px;"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the destination for each connection $.each(connections, function (_, connection) { @@ -618,10 +622,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components upstream from an output port. - * + * * @param {selection} selection The output port selection */ showUpstreamFromOutputPort: function (selection) { @@ -636,9 +640,9 @@ nf.GoTo = (function () { // populate the upstream dialog $('#connections-context') - .append('<div class="search-result-icon input-port-small-icon"></div>') - .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) - .append('<div class="clear"></div>'); + .append('<div class="search-result-icon input-port-small-icon"></div>') + .append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) + .append('<div class="clear"></div>'); // add the source for each connection $.each(connections, function (_, connection) { @@ -657,10 +661,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components downstream from a funnel. - * + * * @param {selection} selection The funnel selection */ showDownstreamFromFunnel: function (selection) { @@ -693,10 +697,10 @@ nf.GoTo = (function () { $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows components upstream from a funnel. - * + * * @param {selection} selection The funnel selection */ showUpstreamFromFunnel: function (selection) {
http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-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-label-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js index ceba489..2c5a3a0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js @@ -28,9 +28,14 @@ nf.LabelConfiguration = (function () { init: function () { // make the new property dialog draggable $('#label-configuration').modal({ - overlayBackground: true, + headerText: 'Configure Label', buttons: [{ buttonText: 'Apply', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, handler: { click: function () { // get the label data @@ -68,22 +73,25 @@ nf.LabelConfiguration = (function () { this.modal('hide'); } } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - this.modal('hide'); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + this.modal('hide'); + } } - } - }], + }], handler: { close: function () { labelId = ''; } } - }).draggable({ - containment: 'parent', - cancel: 'textarea, .button, .combo' }); // create the available sizes @@ -113,10 +121,10 @@ nf.LabelConfiguration = (function () { } }); }, - + /** * Shows the configuration for the specified label. - * + * * @argument {selection} selection The selection */ showConfiguration: function (selection) { http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/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 deleted file mode 100644 index 5ab58ed..0000000 --- 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 +++ /dev/null @@ -1,95 +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.ng.Canvas.AppConfig = function ($mdThemingProvider, $compileProvider) { - //Enable production mode, to re-enable debug mode open up a - //console and call 'angular.reloadWithDebugInfo();' - $compileProvider.debugInfoEnabled(false); - //Define app palettes - $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 - }); - $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.theme("default").primaryPalette("basePalette", { - "default": "500", - "hue-1": "200", - "hue-2": "300", - "hue-3": "900" - }).accentPalette("tintPalette", { - "default": "200", - "hue-1": "400", - "hue-2": "600", - "hue-3": "800" - }).warnPalette("warnPalette", { - "default": "500" - }); -}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/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 5fdee94..da71567 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 @@ -25,84 +25,93 @@ nf.PortConfiguration = (function () { var initPortConfigurationDialog = function () { $('#port-configuration').modal({ headerText: 'Configure Port', - overlayBackground: true, buttons: [{ - buttonText: 'Apply', - handler: { - click: function () { - // get the port data to reference the uri - var portId = $('#port-id').text(); - var portData = d3.select('#id-' + portId).datum(); - - // build the updated port - var port = { - 'id': portId, - 'name': $('#port-name').val(), - 'comments': $('#port-comments').val() - }; - - // include the concurrent tasks if appropriate - if ($('#port-concurrent-task-container').is(':visible')) { - port['concurrentlySchedulableTaskCount'] = $('#port-concurrent-tasks').val(); - } + buttonText: 'Apply', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // get the port data to reference the uri + var portId = $('#port-id').text(); + var portData = d3.select('#id-' + portId).datum(); + + // build the updated port + var port = { + 'id': portId, + 'name': $('#port-name').val(), + 'comments': $('#port-comments').val() + }; + + // include the concurrent tasks if appropriate + if ($('#port-concurrent-task-container').is(':visible')) { + port['concurrentlySchedulableTaskCount'] = $('#port-concurrent-tasks').val(); + } - // mark the processor disabled if appropriate - if ($('#port-enabled').hasClass('checkbox-unchecked')) { - port['state'] = 'DISABLED'; - } else if ($('#port-enabled').hasClass('checkbox-checked')) { - port['state'] = 'STOPPED'; - } - - // build the port entity - var portEntity = { - 'revision': nf.Client.getRevision(portData), - 'component': port - }; - - // update the selected component - $.ajax({ - type: 'PUT', - data: JSON.stringify(portEntity), - url: portData.component.uri, - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // refresh the port component - nf.Port.set(response); + // mark the processor disabled if appropriate + if ($('#port-enabled').hasClass('checkbox-unchecked')) { + port['state'] = 'DISABLED'; + } else if ($('#port-enabled').hasClass('checkbox-checked')) { + port['state'] = 'STOPPED'; + } + + // build the port entity + var portEntity = { + 'revision': nf.Client.getRevision(portData), + 'component': port + }; + + // update the selected component + $.ajax({ + type: 'PUT', + data: JSON.stringify(portEntity), + url: portData.component.uri, + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // refresh the port component + nf.Port.set(response); + + // close the details panel + $('#port-configuration').modal('hide'); + }).fail(function (xhr, status, error) { + // handle bad request locally to keep the dialog open, allowing the user + // to make changes. if the request fails for another reason, the dialog + // should be closed so the issue can be addressed (stale flow for instance) + if (xhr.status === 400) { + var errors = xhr.responseText.split('\n'); + + var content; + if (errors.length === 1) { + content = $('<span></span>').text(errors[0]); + } else { + content = nf.Common.formatUnorderedList(errors); + } + nf.Dialog.showOkDialog({ + dialogContent: content, + headerText: 'Configuration Error' + }); + } else { // close the details panel $('#port-configuration').modal('hide'); - }).fail(function (xhr, status, error) { - // handle bad request locally to keep the dialog open, allowing the user - // to make changes. if the request fails for another reason, the dialog - // should be closed so the issue can be addressed (stale flow for instance) - if (xhr.status === 400) { - var errors = xhr.responseText.split('\n'); - - var content; - if (errors.length === 1) { - content = $('<span></span>').text(errors[0]); - } else { - content = nf.Common.formatUnorderedList(errors); - } - - nf.Dialog.showOkDialog({ - dialogContent: content, - overlayBackground: false, - headerText: 'Configuration Error' - }); - } else { - // close the details panel - $('#port-configuration').modal('hide'); - // handle the error - nf.Common.handleAjaxError(xhr, status, error); - } - }); - } + // handle the error + nf.Common.handleAjaxError(xhr, status, error); + } + }); } - }, { + } + }, + { buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { $('#port-configuration').modal('hide'); @@ -126,10 +135,10 @@ nf.PortConfiguration = (function () { init: function () { initPortConfigurationDialog(); }, - + /** * Shows the details for the specified selection. - * + * * @argument {selection} selection The selection */ showConfiguration: function (selection) { http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/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 e3f3f6f..5ca78c3 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 @@ -24,16 +24,20 @@ nf.PortDetails = (function () { // configure the processor details dialog $('#port-details').modal({ headerText: 'Port Details', - overlayBackground: true, buttons: [{ - buttonText: 'Ok', - handler: { - click: function () { - // hide the dialog - $('#port-details').modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // hide the dialog + $('#port-details').modal('hide'); } - }], + } + }], handler: { close: function () { // clear the processor details @@ -44,7 +48,7 @@ nf.PortDetails = (function () { } }); }, - + showDetails: function (selection) { // if the specified component is a processor, load its properties if (nf.CanvasUtils.isInputPort(selection) || nf.CanvasUtils.isOutputPort(selection)) { http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/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 62fd855..11c388c 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 @@ -80,8 +80,7 @@ nf.ProcessGroupConfiguration = (function () { // show the result dialog nf.Dialog.showOkDialog({ - dialogContent: 'Process group configuration successfully saved.', - overlayBackground: false + dialogContent: 'Process group configuration successfully saved.' }); // update the click listener for the updated revision @@ -173,6 +172,12 @@ nf.ProcessGroupConfiguration = (function () { nf.Shell.showContent('#process-group-configuration').done(function () { reset(); }); + $('#process-group-refresh-container').width($('#shell').width()); + + // add a shell:resize listener + $('#shell').on('shell:resize', function () { + $('#process-group-refresh-container').width($('#shell').width()); + }); // adjust the table size nf.ProcessGroupConfiguration.resetTableSize(); @@ -197,8 +202,8 @@ nf.ProcessGroupConfiguration = (function () { init: function () { // initialize the process group configuration tabs $('#process-group-configuration-tabs').tabbs({ - tabStyle: 'settings-tab', - selectedTabStyle: 'settings-selected-tab', + tabStyle: 'tab', + selectedTabStyle: 'selected-tab', tabs: [{ name: 'General', tabContentId: 'general-process-group-configuration-tab-content' @@ -210,8 +215,10 @@ nf.ProcessGroupConfiguration = (function () { var tab = $(this).text(); if (tab === 'General') { $('#add-process-group-configuration-controller-service').hide(); + $('#process-group-configuration-save').show(); } else { $('#add-process-group-configuration-controller-service').show(); + $('#process-group-configuration-save').hide(); // update the tooltip on the button $('#add-process-group-configuration-controller-service').attr('title', function () { @@ -226,14 +233,11 @@ nf.ProcessGroupConfiguration = (function () { } }); - // settings refresh button... - nf.Common.addHoverEffect('#process-group-configuration-refresh-button', 'button-refresh', 'button-refresh-hover'); - // initialize each tab initGeneral(); nf.ControllerServices.init(getControllerServicesTable()); }, - + /** * Update the size of the grid based on its container's current size. */ @@ -252,7 +256,7 @@ nf.ProcessGroupConfiguration = (function () { // update the new controller service click listener $('#add-process-group-configuration-controller-service').off('click').on('click', function () { - var selectedTab = $('#process-group-configuration-tabs li.settings-selected-tab').text(); + var selectedTab = $('#process-group-configuration-tabs li.selected-tab').text(); if (selectedTab === 'Controller Services') { var controllerServicesUri = config.urls.api + '/process-groups/' + encodeURIComponent(groupId) + '/controller-services'; nf.ControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable()); http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/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 3ee5601..4db2f0e 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 @@ -24,16 +24,20 @@ nf.ProcessGroupDetails = (function () { // configure the processor details dialog $('#process-group-details').modal({ headerText: 'Process Group Details', - overlayBackground: true, buttons: [{ - buttonText: 'Ok', - handler: { - click: function () { - // hide the dialog - $('#process-group-details').modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // hide the dialog + $('#process-group-details').modal('hide'); } - }], + } + }], handler: { close: function () { // clear the processor details @@ -44,7 +48,7 @@ nf.ProcessGroupDetails = (function () { } }); }, - + showDetails: function (selection) { // if the specified selection is a process group if (nf.CanvasUtils.isProcessGroup(selection)) { http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/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 ba9191e..3238339 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 @@ -24,16 +24,16 @@ nf.ProcessorConfiguration = (function () { /** * Gets the available scheduling strategies based on the specified processor. - * + * * @param {type} processor * @returns {Array} */ var getSchedulingStrategies = function (processor) { var strategies = [{ - text: 'Timer driven', - value: 'TIMER_DRIVEN', - description: 'Processor will be scheduled to run on an interval defined by the run schedule.' - }]; + text: 'Timer driven', + value: 'TIMER_DRIVEN', + description: 'Processor will be scheduled to run on an interval defined by the run schedule.' + }]; // conditionally support event driven based on processor if (processor.supportsEventDriven === true) { @@ -80,7 +80,7 @@ nf.ProcessorConfiguration = (function () { /** * Handle any expected processor configuration errors. - * + * * @argument {object} xhr The XmlHttpRequest * @argument {string} status The status of the request * @argument {string} error The error @@ -98,7 +98,6 @@ nf.ProcessorConfiguration = (function () { nf.Dialog.showOkDialog({ dialogContent: content, - overlayBackground: false, headerText: 'Configuration Error' }); } else { @@ -108,7 +107,7 @@ nf.ProcessorConfiguration = (function () { /** * Creates an option for the specified relationship name. - * + * * @argument {object} relationship The relationship */ var createRelationshipOption = function (relationship) { @@ -334,7 +333,7 @@ nf.ProcessorConfiguration = (function () { /** * Validates the specified details. - * + * * @argument {object} details The details to validate */ var validateDetails = function (details) { @@ -359,7 +358,6 @@ nf.ProcessorConfiguration = (function () { if (errors.length > 0) { nf.Dialog.showOkDialog({ dialogContent: nf.Common.formatUnorderedList(errors), - overlayBackground: false, headerText: 'Configuration Error' }); return false; @@ -367,10 +365,10 @@ nf.ProcessorConfiguration = (function () { return true; } }; - + /** * Reloads the outgoing connections for the specified processor. - * + * * @param {object} processor */ var reloadProcessorConnections = function (processor) { @@ -383,7 +381,7 @@ nf.ProcessorConfiguration = (function () { } }); }; - + /** * Goes to a service configuration from the property table. */ @@ -396,8 +394,8 @@ nf.ProcessorConfiguration = (function () { if (isSaveRequired()) { // see if those changes should be saved nf.Dialog.showYesNoDialog({ + headerText: 'Processor Configuration', dialogContent: 'Save changes before going to this Controller Service?', - overlayBackground: false, noHandler: function () { deferred.resolve(); }, @@ -415,9 +413,9 @@ nf.ProcessorConfiguration = (function () { } }).promise(); }; - + /** - * + * * @param {type} processor * @returns {undefined} */ @@ -430,7 +428,7 @@ nf.ProcessorConfiguration = (function () { // set the revision var d = nf.Processor.get(processor.id); updatedProcessor['revision'] = nf.Client.getRevision(d); - + // update the selected component return $.ajax({ type: 'PUT', @@ -459,22 +457,22 @@ nf.ProcessorConfiguration = (function () { tabStyle: 'tab', selectedTabStyle: 'selected-tab', tabs: [{ - name: 'Settings', - tabContentId: 'processor-standard-settings-tab-content' - }, { - name: 'Scheduling', - tabContentId: 'processor-scheduling-tab-content' - }, { - name: 'Properties', - tabContentId: 'processor-properties-tab-content' - }, { - name: 'Comments', - tabContentId: 'processor-comments-tab-content' - }], + name: 'Settings', + tabContentId: 'processor-standard-settings-tab-content' + }, { + name: 'Scheduling', + tabContentId: 'processor-scheduling-tab-content' + }, { + name: 'Properties', + tabContentId: 'processor-properties-tab-content' + }, { + name: 'Comments', + tabContentId: 'processor-comments-tab-content' + }], select: function () { // remove all property detail dialogs nf.UniversalCapture.removeAllPropertyDetailDialogs(); - + // update the processor property table size in case this is the first time its rendered if ($(this).text() === 'Properties') { $('#processor-properties').propertytable('resetTableSize'); @@ -494,7 +492,6 @@ nf.ProcessorConfiguration = (function () { // initialize the processor configuration dialog $('#processor-configuration').modal({ headerText: 'Configure Processor', - overlayBackground: true, handler: { close: function () { // empty the relationship list @@ -512,18 +509,18 @@ nf.ProcessorConfiguration = (function () { // initialize the bulletin combo $('#bulletin-level-combo').combo({ options: [{ - text: 'DEBUG', - value: 'DEBUG' - }, { - text: 'INFO', - value: 'INFO' - }, { - text: 'WARN', - value: 'WARN' - }, { - text: 'ERROR', - value: 'ERROR' - }] + text: 'DEBUG', + value: 'DEBUG' + }, { + text: 'INFO', + value: 'INFO' + }, { + text: 'WARN', + value: 'WARN' + }, { + text: 'ERROR', + value: 'ERROR' + }] }); // initialize the run duration slider @@ -545,7 +542,7 @@ nf.ProcessorConfiguration = (function () { readOnly: false, groupId: nf.Canvas.getGroupId(), dialogContainer: '#new-processor-property-container', - descriptorDeferred: function(propertyName) { + descriptorDeferred: function (propertyName) { var processor = $('#processor-configuration').data('processorDetails'); return $.ajax({ type: 'GET', @@ -559,10 +556,10 @@ nf.ProcessorConfiguration = (function () { goToServiceDeferred: goToServiceFromProperty }); }, - + /** * Shows the configuration dialog for the specified processor. - * + * * @argument {selection} selection The selection */ showConfiguration: function (selection) { @@ -588,7 +585,7 @@ nf.ProcessorConfiguration = (function () { if (nf.Common.isDFM()) { requests.push(); } - + // once everything is loaded, show the dialog $.when.apply(window, requests).done(function (processorResult, historyResult) { // get the updated processor' @@ -709,27 +706,38 @@ nf.ProcessorConfiguration = (function () { } var buttons = [{ - buttonText: 'Apply', - handler: { - click: function () { - // close all fields currently being edited - $('#processor-properties').propertytable('saveRow'); + buttonText: 'Apply', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // close all fields currently being edited + $('#processor-properties').propertytable('saveRow'); - // save the processor - saveProcessor(processor).done(function (response) { - // reload the processor's outgoing connections - reloadProcessorConnections(processor); + // save the processor + saveProcessor(processor).done(function (response) { + // reload the processor's outgoing connections + reloadProcessorConnections(processor); - // close the details panel - $('#processor-configuration').modal('hide'); - - // inform Angular app values have changed - nf.ng.Bridge.digest(); - }); - } + // close the details panel + $('#processor-configuration').modal('hide'); + + // inform Angular app values have changed + nf.ng.Bridge.digest(); + }); } - }, { + } + }, + { buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { $('#processor-configuration').modal('hide'); @@ -741,6 +749,11 @@ nf.ProcessorConfiguration = (function () { if (nf.Common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { var openCustomUi = function () { @@ -764,8 +777,8 @@ nf.ProcessorConfiguration = (function () { if (isSaveRequired()) { // see if those changes should be saved nf.Dialog.showYesNoDialog({ + headerText: 'Save', dialogContent: 'Save changes before opening the advanced configuration?', - overlayBackground: false, noHandler: openCustomUi, yesHandler: function () { saveProcessor(processor).done(function (deferred) { @@ -785,7 +798,7 @@ nf.ProcessorConfiguration = (function () { // set the button model $('#processor-configuration').modal('setButtonModel', buttons); - + // load the property table $('#processor-properties').propertytable('loadProperties', processor.config.properties, processor.config.descriptors, processorHistory.propertyHistory); http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/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 c6dcbb2..df12db0 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 @@ -41,7 +41,6 @@ nf.QueueListing = (function () { // configure the drop request status dialog $('#listing-request-status-dialog').modal({ - overlayBackground: false, handler: { close: function () { // reset the progress bar @@ -87,8 +86,8 @@ nf.QueueListing = (function () { } }).fail(function () { nf.Dialog.showOkDialog({ - dialogContent: 'Unable to generate access token for downloading content.', - overlayBackground: false + headerText: 'Queue Listing', + dialogContent: 'Unable to generate access token for downloading content.' }); }); }; @@ -119,8 +118,8 @@ nf.QueueListing = (function () { deferred.resolve(uiExtensionToken, downloadToken); }).fail(function () { nf.Dialog.showOkDialog({ - dialogContent: 'Unable to generate access token for viewing content.', - overlayBackground: false + headerText: 'Queue Listing', + dialogContent: 'Unable to generate access token for viewing content.' }); deferred.reject(); }); @@ -201,9 +200,13 @@ nf.QueueListing = (function () { $('#flowfile-details-dialog').modal({ headerText: 'FlowFile', - overlayBackground: false, buttons: [{ buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, handler: { click: function () { $('#flowfile-details-dialog').modal('hide'); @@ -250,6 +253,11 @@ nf.QueueListing = (function () { // update the button model of the drop request status dialog $('#listing-request-status-dialog').modal('setButtonModel', [{ buttonText: 'Stop', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, handler: { click: function () { cancelled = true; @@ -287,8 +295,8 @@ nf.QueueListing = (function () { // show the dialog nf.Dialog.showOkDialog({ - dialogContent: 'The queue has no FlowFiles.', - overlayBackground: false + headerText: 'Queue Listing', + dialogContent: 'The queue has no FlowFiles.' }); } } else { @@ -497,14 +505,14 @@ nf.QueueListing = (function () { initFlowFileDetailsDialog(); // define mouse over event for the refresh button - nf.Common.addHoverEffect('#queue-listing-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + $('#queue-listing-refresh-button').click(function () { var connection = $('#queue-listing-table').data('connection'); performListing(connection); }); // define a custom formatter for showing more processor details var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) { - return '<img src="images/iconDetails.png" title="View Details" class="pointer show-flowfile-details" style="margin-top: 5px; float: left;"/>'; + return '<div class="pointer show-flowfile-details fa fa-info" title="View Details" style="margin-top: 5px; float: left;"></div>'; }; // function for formatting data sizes @@ -530,19 +538,73 @@ nf.QueueListing = (function () { // initialize the queue listing table var queueListingColumns = [ - {id: 'moreDetails', field: 'moreDetails', name: ' ', sortable: false, resizable: false, formatter: moreDetailsFormatter, width: 50, maxWidth: 50}, - {id: 'position', name: 'Position', field: 'position', sortable: false, resizable: false, width: 75, maxWidth: 75}, + { + id: 'moreDetails', + field: 'moreDetails', + name: ' ', + sortable: false, + resizable: false, + formatter: moreDetailsFormatter, + width: 50, + maxWidth: 50 + }, + { + id: 'position', + name: 'Position', + field: 'position', + sortable: false, + resizable: false, + width: 75, + maxWidth: 75 + }, {id: 'uuid', name: 'UUID', field: 'uuid', sortable: false, resizable: true}, {id: 'filename', name: 'Filename', field: 'filename', sortable: false, resizable: true}, - {id: 'size', name: 'File Size', field: 'size', sortable: false, resizable: true, defaultSortAsc: false, formatter: dataSizeFormatter}, - {id: 'queuedDuration', name: 'Queued Duration', field: 'queuedDuration', sortable: false, resizable: true, formatter: durationFormatter}, - {id: 'lineageDuration', name: 'Lineage Duration', field: 'lineageDuration', sortable: false, resizable: true, formatter: durationFormatter}, - {id: 'penalized', name: 'Penalized', field: 'penalized', sortable: false, resizable: false, width: 100, maxWidth: 100, formatter: penalizedFormatter} + { + id: 'size', + name: 'File Size', + field: 'size', + sortable: false, + resizable: true, + defaultSortAsc: false, + formatter: dataSizeFormatter + }, + { + id: 'queuedDuration', + name: 'Queued Duration', + field: 'queuedDuration', + sortable: false, + resizable: true, + formatter: durationFormatter + }, + { + id: 'lineageDuration', + name: 'Lineage Duration', + field: 'lineageDuration', + sortable: false, + resizable: true, + formatter: durationFormatter + }, + { + id: 'penalized', + name: 'Penalized', + field: 'penalized', + sortable: false, + resizable: false, + width: 100, + maxWidth: 100, + formatter: penalizedFormatter + } ]; // conditionally show the cluster node identifier if (nf.Canvas.isClustered()) { - queueListingColumns.push({id: 'clusterNodeAddress', name: 'Node', field: 'clusterNodeAddress', sortable: false, resizable: true}); + queueListingColumns.push({ + id: 'clusterNodeAddress', + name: 'Node', + field: 'clusterNodeAddress', + sortable: false, + resizable: true + }); } // add an actions column when the user can access provenance @@ -552,7 +614,15 @@ nf.QueueListing = (function () { return '<div title="Provenance" class="pointer provenance-icon view-provenance"></div>'; }; - queueListingColumns.push({id: 'actions', name: ' ', resizable: false, formatter: actionsFormatter, sortable: false, width: 50, maxWidth: 50}); + queueListingColumns.push({ + id: 'actions', + name: ' ', + resizable: false, + formatter: actionsFormatter, + sortable: false, + width: 50, + maxWidth: 50 + }); } var queueListingOptions = { @@ -560,7 +630,8 @@ nf.QueueListing = (function () { enableTextSelectionOnCells: true, enableCellNavigation: false, enableColumnReorder: false, - autoEdit: false + autoEdit: false, + rowHeight: 24 }; // initialize the dataview http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-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-remote-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-remote-process-group-configuration.js index 1a0d9db..7159033 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js @@ -22,13 +22,17 @@ nf.RemoteProcessGroupConfiguration = (function () { init: function () { $('#remote-process-group-configuration').modal({ headerText: 'Configure Remote Process Group', - overlayBackground: true, buttons: [{ - buttonText: 'Apply', - handler: { - click: function () { - var remoteProcessGroupId = $('#remote-process-group-id').text(); - var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum(); + buttonText: 'Apply', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + var remoteProcessGroupId = $('#remote-process-group-id').text(); + var remoteProcessGroupData = d3.select('#id-' + remoteProcessGroupId).datum(); // create the remote process group details var remoteProcessGroupEntity = { @@ -45,43 +49,48 @@ nf.RemoteProcessGroupConfiguration = (function () { } }; - // update the selected component - $.ajax({ - type: 'PUT', - data: JSON.stringify(remoteProcessGroupEntity), - url: remoteProcessGroupData.component.uri, - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // refresh the remote process group component - nf.RemoteProcessGroup.set(response); - - // close the details panel - $('#remote-process-group-configuration').modal('hide'); - }).fail(function (xhr, status, error) { - if (xhr.status === 400) { - var errors = xhr.responseText.split('\n'); + // update the selected component + $.ajax({ + type: 'PUT', + data: JSON.stringify(remoteProcessGroupEntity), + url: remoteProcessGroupData.component.uri, + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // refresh the remote process group component + nf.RemoteProcessGroup.set(response); - var content; - if (errors.length === 1) { - content = $('<span></span>').text(errors[0]); - } else { - content = nf.Common.formatUnorderedList(errors); - } + // close the details panel + $('#remote-process-group-configuration').modal('hide'); + }).fail(function (xhr, status, error) { + if (xhr.status === 400) { + var errors = xhr.responseText.split('\n'); - nf.Dialog.showOkDialog({ - dialogContent: content, - overlayBackground: false, - headerText: 'Configuration Error' - }); + var content; + if (errors.length === 1) { + content = $('<span></span>').text(errors[0]); } else { - nf.Common.handleAjaxError(xhr, status, error); + content = nf.Common.formatUnorderedList(errors); } - }); - } + + nf.Dialog.showOkDialog({ + dialogContent: content, + headerText: 'Configuration' + }); + } else { + nf.Common.handleAjaxError(xhr, status, error); + } + }); } - }, { + } + }, + { buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { $('#remote-process-group-configuration').modal('hide'); @@ -117,10 +126,10 @@ nf.RemoteProcessGroupConfiguration = (function () { }] }); }, - + /** * Shows the details for the remote process group in the specified selection. - * + * * @argument {selection} selection The selection */ showConfiguration: function (selection) { http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-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-remote-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-remote-process-group-details.js index 8b2c28e..f533d83 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js @@ -22,15 +22,19 @@ nf.RemoteProcessGroupDetails = (function () { init: function () { $('#remote-process-group-details').modal({ headerText: 'Remote Process Group Details', - overlayBackground: true, buttons: [{ - buttonText: 'Ok', - handler: { - click: function () { - $('#remote-process-group-details').modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + $('#remote-process-group-details').modal('hide'); } - }], + } + }], handler: { close: function () { // clear the remote process group details @@ -48,10 +52,10 @@ nf.RemoteProcessGroupDetails = (function () { } }); }, - + /** * Shows the details for the remote process group in the specified selection. - * + * * @argument {selection} selection The selection */ showDetails: function (selection) { http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js index 4ab9b1f..7cd6720 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js @@ -25,9 +25,13 @@ nf.RemoteProcessGroupPorts = (function () { var initRemotePortConfigurationDialog = function () { $('#remote-port-configuration').modal({ headerText: 'Configure Remote Port', - overlayBackground: false, buttons: [{ buttonText: 'Apply', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, handler: { click: function () { var remotePortConcurrentTasks = $('#remote-port-concurrent-tasks').val(); @@ -91,8 +95,7 @@ nf.RemoteProcessGroupPorts = (function () { nf.Dialog.showOkDialog({ dialogContent: content, - overlayBackground: false, - headerText: 'Configuration Error' + headerText: 'Remote Process Group Ports' }); } else { nf.Common.handleAjaxError(xhr, status, error); @@ -103,8 +106,8 @@ nf.RemoteProcessGroupPorts = (function () { }); } else { nf.Dialog.showOkDialog({ - dialogContent: 'Concurrent tasks must be an integer value.', - overlayBackground: false + headerText: 'Remote Process Group Ports', + dialogContent: 'Concurrent tasks must be an integer value.' }); // close the dialog @@ -112,14 +115,20 @@ nf.RemoteProcessGroupPorts = (function () { } } } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - $('#remote-port-configuration').modal('hide'); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + $('#remote-port-configuration').modal('hide'); + } } - } - }], + }], handler: { close: function () { // clear the name/value textfields @@ -138,9 +147,13 @@ nf.RemoteProcessGroupPorts = (function () { var initRemoteProcessGroupConfigurationDialog = function () { $('#remote-process-group-ports').modal({ headerText: 'Remote Process Group Ports', - overlayBackground: true, buttons: [{ buttonText: 'Close', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, handler: { click: function () { // if this is a DFM, the over status of this node may have changed @@ -168,7 +181,7 @@ nf.RemoteProcessGroupPorts = (function () { // clear any tooltips var dialog = $('#remote-process-group-ports'); nf.Common.cleanUpTooltips(dialog, 'div.remote-port-removed'); - nf.Common.cleanUpTooltips(dialog, 'img.concurrent-tasks-info'); + nf.Common.cleanUpTooltips(dialog, 'div.concurrent-tasks-info'); // clear the input and output ports $('#remote-process-group-input-ports-container').empty(); @@ -197,30 +210,27 @@ nf.RemoteProcessGroupPorts = (function () { var transmissionSwitch; if (port.connected === true) { if (port.transmitting === true) { - transmissionSwitch = $('<div class="enabled-transmission-switch enabled-active-transmission"></div>').appendTo(portContainerEditContainer); + transmissionSwitch = (nf.ng.Bridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-active-transmission" aria-label="Toggle port transmission"></md-switch>'))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); + transmissionSwitch.click(); } else { if (port.exists === true) { - transmissionSwitch = $('<div class="enabled-transmission-switch enabled-inactive-transmission"></div>').appendTo(portContainerEditContainer); + transmissionSwitch = (nf.ng.Bridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary enabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); } else { - $('<div class="disabled-transmission-switch disabled-inactive-transmission"></div>').appendTo(portContainerEditContainer); + (nf.ng.Bridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); } } } else { if (port.transmitting === true) { - $('<div class="disabled-transmission-switch disabled-active-transmission"></div>').appendTo(portContainerEditContainer); + (nf.ng.Bridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="Toggle port transmission"></md-switch>'))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); } else { - $('<div class="disabled-transmission-switch disabled-inactive-transmission"></div>').appendTo(portContainerEditContainer); + (nf.ng.Bridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); } } // only support configuration when the remote port exists if (port.exists === true && port.connected === true) { // create the button for editing the ports configuration - var editRemotePort = $('<div class="edit-button edit-remote-port"></div>').on('mouseenter', function () { - $(this).removeClass('edit-remote-port').addClass('edit-remote-port-hover'); - }).on('mouseleave', function () { - $(this).removeClass('edit-remote-port-hover').addClass('edit-remote-port'); - }).click(function () { + var editRemotePort = $('<button class="button edit-remote-port fa fa-pencil"></button>').click(function () { var portName = $('#' + portId + '-name').text(); var portConcurrentTasks = $('#' + portId + '-concurrent-tasks').text(); var portCompression = $('#' + portId + '-compression').text() === 'Yes'; @@ -288,7 +298,7 @@ nf.RemoteProcessGroupPorts = (function () { // if the remote port no long exists, disable the switch if (remotePort.exists === false) { // make the transmission switch disabled - transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission enabled-transmission-switch').addClass('disabled-transmission-switch disabled-inactive-transmission').off('click'); + transmissionSwitch.removeClass('enabled-active-transmission enabled-inactive-transmission').addClass('disabled-inactive-transmission').off('click'); // hide the edit button if (nf.Common.isDefinedAndNotNull(editRemotePort)) { @@ -326,9 +336,8 @@ nf.RemoteProcessGroupPorts = (function () { } nf.Dialog.showOkDialog({ - dialogContent: content, - overlayBackground: false, - headerText: 'Configuration Error' + headerText: 'Remote Process Group Ports', + dialogContent: content }); } else { nf.Common.handleAjaxError(xhr, status, error); @@ -339,9 +348,9 @@ nf.RemoteProcessGroupPorts = (function () { } else { // show the disabled transmission switch if (port.transmitting === true) { - $('<div class="disabled-transmission-switch disabled-active-transmission"></div>').appendTo(portContainerEditContainer); + (nf.ng.Bridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-active-transmission" aria-label="Toggle port transmission"></md-switch>'))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); } else { - $('<div class="disabled-transmission-switch disabled-inactive-transmission"></div>').appendTo(portContainerEditContainer); + (nf.ng.Bridge.injector.get('$compile')($('<md-switch style="margin:0px" class="md-primary disabled-inactive-transmission" aria-label="Toggle port transmission"></md-switch>'))(nf.ng.Bridge.rootScope)).appendTo(portContainerEditContainer); } } @@ -371,9 +380,9 @@ nf.RemoteProcessGroupPorts = (function () { $('<div>' + '<div class="setting-name">' + 'Concurrent tasks' + - '<img class="processor-setting concurrent-tasks-info" src="images/iconInfo.png" alt="Info"/>' + + '<div class="processor-setting concurrent-tasks-info fa fa-question-circle"></div>' + '</div>' + - '</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('img.concurrent-tasks-info').qtip($.extend({ + '</div>').append(concurrentTasks).appendTo(concurrentTasksContainer).find('div.concurrent-tasks-info').qtip($.extend({ content: 'The number of tasks that should be concurrently scheduled for this port.' }, nf.Common.config.tooltipConfig));
