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/nf-connection-details.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js index e655964..d7fd6a8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js @@ -21,7 +21,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the source of the connection. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} source The source of the connection @@ -40,7 +40,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the source processor. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} source The source of the connection @@ -64,7 +64,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the source funnel. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} source The source of the connection @@ -80,7 +80,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the remote source port. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} source The source of the connection @@ -105,7 +105,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the source port. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} source The source of the connection @@ -145,7 +145,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the destination of the connection. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} destination The destination of the connection @@ -164,7 +164,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the destination processor. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} destination The destination of the connection @@ -194,7 +194,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the source funnel. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} destination The destination of the connection @@ -210,7 +210,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the remote source port. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} destination The destination of the connection @@ -235,7 +235,7 @@ nf.ConnectionDetails = (function () { /** * Initialize the details for the destination port. - * + * * @argument {string} groupId The id of the current group * @argument {string} groupName The name of the current group * @argument {object} destination The destination of the connection @@ -276,48 +276,48 @@ nf.ConnectionDetails = (function () { /** * Creates the relationship option for the specified relationship. - * + * * @argument {string} name The relationship name */ var createRelationshipOption = function (name) { $('<div class="available-relationship-container"></div>').append( - $('<div class="relationship-name"></div>').text(name)).appendTo('#read-only-relationship-names'); + $('<div class="relationship-name"></div>').text(name)).appendTo('#read-only-relationship-names'); }; return { /** * Initializes the connection details dialog. - * - * @param {boolean} overlayBackground Whether to overlay the background */ - init: function (overlayBackground) { - overlayBackground = nf.Common.isDefinedAndNotNull(overlayBackground) ? overlayBackground : true; - + init: function () { // initialize the details tabs $('#connection-details-tabs').tabbs({ tabStyle: 'tab', selectedTabStyle: 'selected-tab', tabs: [{ - name: 'Details', - tabContentId: 'read-only-connection-details-tab-content' - }, { - name: 'Settings', - tabContentId: 'read-only-connection-settings-tab-content' - }] + name: 'Details', + tabContentId: 'read-only-connection-details-tab-content' + }, { + name: 'Settings', + tabContentId: 'read-only-connection-settings-tab-content' + }] }); // configure the connection details dialog $('#connection-details').modal({ headerText: 'Connection Details', - overlayBackground: overlayBackground, buttons: [{ - buttonText: 'Ok', - handler: { - click: function () { - $('#connection-details').modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + $('#connection-details').modal('hide'); } - }], + } + }], handler: { close: function () { // clear the relationship names @@ -348,18 +348,11 @@ nf.ConnectionDetails = (function () { } } }); - - if (overlayBackground) { - $('#connection-details').draggable({ - containment: 'parent', - handle: '.dialog-header' - }); - } }, - + /** * Shows the details for the specified edge. - * + * * @argument {string} groupId The group id * @argument {string} connectionId The connection id */
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/nf-dialog.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js index 9a926ef..486c3b7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js @@ -18,9 +18,6 @@ /* global nf */ $(document).ready(function () { - // setup general button mouse behavior - nf.Common.addHoverEffect('div.button', 'button-normal', 'button-over'); - // configure the ok dialog $('#nf-ok-dialog').modal({ handler: { @@ -43,9 +40,6 @@ $(document).ready(function () { $('#nf-yes-no-dialog').modal('setButtonModel', []); } } - }).draggable({ - containment: 'parent', - handle: '.dialog-header' }); }); @@ -55,14 +49,13 @@ nf.Dialog = (function () { /** * Shows an general dialog with an Okay button populated with the * specified dialog content. - * + * * @argument {object} options Dialog options */ showOkDialog: function (options) { options = $.extend({ headerText: '', - dialogContent: '', - overlayBackground: true + dialogContent: '' }, options); // regardless of whether the dialog is already visible, the new content will be appended @@ -72,6 +65,11 @@ nf.Dialog = (function () { // update the button model $('#nf-ok-dialog').modal('setButtonModel', [{ buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, handler: { click: function () { // close the dialog @@ -84,13 +82,13 @@ nf.Dialog = (function () { }]); // show the dialog - $('#nf-ok-dialog').modal('setHeaderText', options.headerText).modal('setOverlayBackground', options.overlayBackground).modal('show'); + $('#nf-ok-dialog').modal('setHeaderText', options.headerText).modal('show'); }, - + /** * Shows an general dialog with Yes and No buttons populated with the * specified dialog content. - * + * * @argument {object} options Dialog options */ showYesNoDialog: function (options) { @@ -108,18 +106,29 @@ nf.Dialog = (function () { // update the button model $('#nf-yes-no-dialog').modal('setButtonModel', [{ - buttonText: options.yesText, - handler: { - click: function () { - // close the dialog - $('#nf-yes-no-dialog').modal('hide'); - if (typeof options.yesHandler === 'function') { - options.yesHandler.call(this); - } + buttonText: options.yesText, + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // close the dialog + $('#nf-yes-no-dialog').modal('hide'); + if (typeof options.yesHandler === 'function') { + options.yesHandler.call(this); } } - }, { + } + }, + { buttonText: options.noText, + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { // close the dialog @@ -132,7 +141,7 @@ nf.Dialog = (function () { }]); // show the dialog - $('#nf-yes-no-dialog').modal('setHeaderText', options.headerText).modal('setOverlayBackground', options.overlayBackground).modal('show'); + $('#nf-yes-no-dialog').modal('setHeaderText', options.headerText).modal('show'); } }; }()); \ 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/nf-ng-app-config.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js new file mode 100644 index 0000000..54dccde --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js @@ -0,0 +1,95 @@ +/* + * 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.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/nf-ng-app-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js new file mode 100644 index 0000000..1b9f0d0 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-controller.js @@ -0,0 +1,39 @@ +/* + * 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.AppCtrl = function ($scope, serviceProvider) { + 'use strict'; + + function AppCtrl(serviceProvider) { + //global nf namespace for reference throughout angular app + this.nf = nf; + //any registered angular service is available through the serviceProvider + this.serviceProvider = serviceProvider; + } + AppCtrl.prototype = { + constructor: AppCtrl + } + + var appCtrl = new AppCtrl(serviceProvider); + $scope.appCtrl = appCtrl; + + //For production angular applications .scope() is unavailable so we set + //the root scope of the bootstrapped app on the bridge + nf.ng.Bridge.rootScope = $scope; +}; \ 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/nf-ng-bridge.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js index 2ed2b2a..bc78f15 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js @@ -22,20 +22,12 @@ nf.ng.Bridge = (function () { function AngularBridge() { this.rootScope; + this.injector; }; AngularBridge.prototype = { constructor: AngularBridge, /** - * Sets the root scope for the angular application being bridged. - * - * @param {object} scope An object that refers to the application model. - */ - setRootScope: function (scope) { - this.rootScope = scope; - }, - - /** * Inspects the root scope of the bridged angular application to look up * objects (to be provided as the `this` context) and invoke methods. * @@ -74,7 +66,7 @@ nf.ng.Bridge = (function () { * Inspects the root scope of the bridged angular application to look up * and return object. * - * @param {string} name The name of the object to lookup. + * @param {string} name The (dot notation) name of the object to lookup. * @returns {Object|*} */ get: function (name) { 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/nf-processor-details.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js index 9915fe0..1efcb83 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js @@ -21,7 +21,7 @@ nf.ProcessorDetails = (function () { /** * Creates an option for the specified relationship name. - * + * * @argument {object} relationship The relationship */ var createRelationshipOption = function (relationship) { @@ -45,33 +45,29 @@ nf.ProcessorDetails = (function () { return { /** * Initializes the processor details dialog. - * - * @param {boolean} overlayBackground Whether to overlay the background */ - init: function (overlayBackground) { - overlayBackground = nf.Common.isDefinedAndNotNull(overlayBackground) ? overlayBackground : true; - + init: function () { // initialize the properties tabs $('#processor-details-tabs').tabbs({ tabStyle: 'tab', selectedTabStyle: 'selected-tab', tabs: [{ - name: 'Settings', - tabContentId: 'details-standard-settings-tab-content' - }, { - name: 'Scheduling', - tabContentId: 'details-scheduling-tab-content' - }, { - name: 'Properties', - tabContentId: 'details-processor-properties-tab-content' - }, { - name: 'Comments', - tabContentId: 'details-processor-comments-tab-content' - }], + name: 'Settings', + tabContentId: 'details-standard-settings-tab-content' + }, { + name: 'Scheduling', + tabContentId: 'details-scheduling-tab-content' + }, { + name: 'Properties', + tabContentId: 'details-processor-properties-tab-content' + }, { + name: 'Comments', + tabContentId: 'details-processor-comments-tab-content' + }], select: function () { // remove all property detail dialogs nf.UniversalCapture.removeAllPropertyDetailDialogs(); - + // resize the property grid in case this is the first time its rendered if ($(this).text() === 'Properties') { $('#read-only-processor-properties').propertytable('resetTableSize'); @@ -88,7 +84,6 @@ nf.ProcessorDetails = (function () { // configure the processor details dialog $('#processor-details').modal({ headerText: 'Processor Details', - overlayBackground: overlayBackground, handler: { close: function () { // empty the relationship list @@ -96,7 +91,7 @@ nf.ProcessorDetails = (function () { // clear the property grid $('#read-only-processor-properties').propertytable('clear'); - + // clear the processor details nf.Common.clearField('read-only-processor-id'); nf.Common.clearField('read-only-processor-type'); @@ -116,23 +111,16 @@ nf.ProcessorDetails = (function () { } } }); - - if (overlayBackground) { - $('#processor-details').draggable({ - containment: 'parent', - handle: '.dialog-header' - }); - } // initialize the properties $('#read-only-processor-properties').propertytable({ readOnly: true }); }, - + /** * Shows the details for the specified processor. - * + * * @argument {string} groupId The group id * @argument {string} processorId The processor id */ @@ -219,19 +207,29 @@ nf.ProcessorDetails = (function () { $('#read-only-processor-properties').propertytable('loadProperties', processor.config.properties, processor.config.descriptors, history.propertyHistory); var buttons = [{ - buttonText: 'Ok', - handler: { - click: function () { - // hide the dialog - $('#processor-details').modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // hide the dialog + $('#processor-details').modal('hide'); } - }]; + } + }]; // determine if we should show the advanced button if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(processor.config.customUiUrl) && processor.config.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { // reset state and close the dialog manually to avoid hiding the faded background @@ -258,8 +256,8 @@ nf.ProcessorDetails = (function () { }).fail(function (xhr, status, error) { if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { nf.Dialog.showOkDialog({ - dialogContent: nf.Common.escapeHtml(xhr.responseText), - overlayBackground: false + headerText: 'Malformed Request', + dialogContent: nf.Common.escapeHtml(xhr.responseText) }); } else { nf.Common.handleAjaxError(xhr, status, error); 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/nf-shell.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js index cfd6635..930f019 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js @@ -20,7 +20,8 @@ $(document).ready(function () { // configure the dialog $('#shell-dialog').modal({ - overlayBackground: true + header: false, + footer: false }); // register a listener when the frame is closed @@ -40,10 +41,6 @@ $(document).ready(function () { $('#shell-dialog').modal('hide'); } }); - - // add hover effects - nf.Common.addHoverEffect('#shell-undock-button', 'undock-normal', 'undock-hover'); - nf.Common.addHoverEffect('#shell-close-button', 'close-normal', 'close-hover'); }); nf.Shell = (function () { @@ -99,7 +96,7 @@ nf.Shell = (function () { src: uri }).css({ width: shell.width(), - height: shell.height() + height: shell.height() - 28 //subtract shell-close-container }).appendTo(shell); // remove the window resize listener @@ -111,8 +108,9 @@ nf.Shell = (function () { showPageResize = function () { shellIframe.css({ width: shell.width(), - height: shell.height() + height: shell.height() - 28 //subtract shell-close-container }); + shell.trigger("shell:resize"); }; // add a window resize listener @@ -157,6 +155,9 @@ nf.Shell = (function () { // hide the undock button $('#shell-undock-button').hide(); + // open the shell dialog + $('#shell-dialog').modal('show'); + // create the content container var contentContainer = $('<div>').css({ width: shell.width(), @@ -169,7 +170,6 @@ nf.Shell = (function () { } // show the content - $('#shell-dialog').modal('show'); content.show(); // handle resizes @@ -178,6 +178,7 @@ nf.Shell = (function () { width: shell.width(), height: shell.height() }); + shell.trigger("shell:resize"); }; // add a window resize listener 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/nf-status-history.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js index 69dd4b0..6ff4f21 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js @@ -80,7 +80,7 @@ nf.StatusHistory = (function () { /** * Handles the status history response. - * + * * @param {string} groupId * @param {string} id * @param {object} componentStatusHistory @@ -112,8 +112,8 @@ nf.StatusHistory = (function () { snapshots: componentStatusHistory.aggregateSnapshots }); } else { - insufficientHistory(); - return; + insufficientHistory(); + return; } // get the status for each node in the cluster if applicable @@ -146,14 +146,14 @@ nf.StatusHistory = (function () { var insufficientHistory = function () { // notify the user nf.Dialog.showOkDialog({ - dialogContent: 'Insufficient history, please try again later.', - overlayBackground: false + headerText: 'Status History', + dialogContent: 'Insufficient history, please try again later.' }); }; /** * Builds the chart using the statusHistory and the available fields. - * + * * @param {type} statusHistory * @param {type} descriptors */ @@ -183,7 +183,7 @@ nf.StatusHistory = (function () { /** * Sets the available fields. - * + * * @param {type} descriptors * @param {type} selected */ @@ -237,7 +237,7 @@ nf.StatusHistory = (function () { /** * Updates the chart with the specified status history and the selected field. - * + * * @param {type} statusHistory */ var updateChart = function (statusHistory) { @@ -299,20 +299,36 @@ nf.StatusHistory = (function () { visible: instances[instance.id] === true }); }); - + // -------------------------- // custom time axis formatter // -------------------------- var customTimeFormat = d3.time.format.multi([ - [':%S.%L', function (d) { return d.getMilliseconds(); }], - [':%S', function (d) { return d.getSeconds(); }], - ['%H:%M', function (d) { return d.getMinutes(); }], - ['%H:%M', function (d) { return d.getHours(); }], - ['%a %d', function (d) { return d.getDay() && d.getDate() !== 1; }], - ['%b %d', function (d) { return d.getDate() !== 1; }], - ['%B', function (d) { return d.getMonth(); }], - ['%Y', function () { return true; }] + [':%S.%L', function (d) { + return d.getMilliseconds(); + }], + [':%S', function (d) { + return d.getSeconds(); + }], + ['%H:%M', function (d) { + return d.getMinutes(); + }], + ['%H:%M', function (d) { + return d.getHours(); + }], + ['%a %d', function (d) { + return d.getDay() && d.getDate() !== 1; + }], + ['%b %d', function (d) { + return d.getDate() !== 1; + }], + ['%B', function (d) { + return d.getMonth(); + }], + ['%Y', function () { + return true; + }] ]); // ---------- @@ -331,56 +347,56 @@ nf.StatusHistory = (function () { if (chartContainer.hasClass('ui-resizable')) { chartContainer.resizable('destroy'); } - + // calculate the dimensions - var width = chartContainer.width() - margin.left - margin.right; + var width = chartContainer.parent().width() - margin.left - margin.right; var height = chartContainer.height() - margin.top - margin.bottom; // define the x axis for the main chart var x = d3.time.scale() - .range([0, width]); + .range([0, width]); var xAxis = d3.svg.axis() - .scale(x) - .ticks(5) - .tickFormat(customTimeFormat) - .orient('bottom'); + .scale(x) + .ticks(5) + .tickFormat(customTimeFormat) + .orient('bottom'); // define the y axis var y = d3.scale.linear() - .range([height, 0]); + .range([height, 0]); var yAxis = d3.svg.axis() - .scale(y) - .tickFormat(formatters[selectedDescriptor.formatter]) - .orient('left'); + .scale(y) + .tickFormat(formatters[selectedDescriptor.formatter]) + .orient('left'); // status line var line = d3.svg.line() - .interpolate('monotone') - .x(function (d) { - return x(d.timestamp); - }) - .y(function (d) { - return y(d.value); - }); + .interpolate('monotone') + .x(function (d) { + return x(d.timestamp); + }) + .y(function (d) { + return y(d.value); + }); // build the chart svg var chartSvg = d3.select('#status-history-chart-container').append('svg') - .attr('style', 'pointer-events: none;') - .attr('width', width + margin.left + margin.right) - .attr('height', height + margin.top + margin.bottom); + .attr('style', 'pointer-events: none;') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom); // define a clip the path var clipPath = chartSvg.append('defs').append('clipPath') - .attr('id', 'clip') - .append('rect') - .attr('width', width) - .attr('height', height); + .attr('id', 'clip') + .append('rect') + .attr('width', width) + .attr('height', height); // build the chart var chart = chartSvg.append('g') - .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); + .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); // determine the min/max date var minDate = d3.min(statusData, function (d) { @@ -404,80 +420,80 @@ nf.StatusHistory = (function () { // build the x axis chart.append('g') - .attr('class', 'x axis') - .attr('transform', 'translate(0, ' + height + ')') - .call(xAxis); + .attr('class', 'x axis') + .attr('transform', 'translate(0, ' + height + ')') + .call(xAxis); // build the y axis chart.append('g') - .attr('class', 'y axis') - .call(yAxis) - .append('text') - .attr('transform', 'rotate(-90)') - .attr('y', 6) - .attr('dy', '.71em') - .attr('text-anchor', 'end') - .text(selectedDescriptor.label); + .attr('class', 'y axis') + .call(yAxis) + .append('text') + .attr('transform', 'rotate(-90)') + .attr('y', 6) + .attr('dy', '.71em') + .attr('text-anchor', 'end') + .text(selectedDescriptor.label); // build the chart var status = chart.selectAll('.status') - .data(statusData) - .enter() - .append('g') - .attr('clip-path', 'url(#clip)') - .attr('class', 'status'); + .data(statusData) + .enter() + .append('g') + .attr('clip-path', 'url(#clip)') + .attr('class', 'status'); // draw the lines status.append('path') - .attr('class', function (d) { - return 'chart-line chart-line-' + d.id; - }) - .attr('d', function (d) { - return line(d.values); - }) - .attr('stroke', function (d) { - return color(d.label); - }) - .classed('hidden', function (d) { - return d.visible === false; - }) - .append('title') - .text(function (d) { - return d.label; - }); + .attr('class', function (d) { + return 'chart-line chart-line-' + d.id; + }) + .attr('d', function (d) { + return line(d.values); + }) + .attr('stroke', function (d) { + return color(d.label); + }) + .classed('hidden', function (d) { + return d.visible === false; + }) + .append('title') + .text(function (d) { + return d.label; + }); // draw the control points for each line status.each(function (d) { // create a group for the control points var markGroup = d3.select(this).append('g') - .attr('class', function () { - return 'mark-group mark-group-' + d.id; - }) - .classed('hidden', function (d) { - return d.visible === false; - }); + .attr('class', function () { + return 'mark-group mark-group-' + d.id; + }) + .classed('hidden', function (d) { + return d.visible === false; + }); // draw the control points markGroup.selectAll('circle.mark') - .data(d.values) - .enter() - .append('circle') - .attr('style', 'pointer-events: all;') - .attr('class', 'mark') - .attr('cx', function (v) { - return x(v.timestamp); - }) - .attr('cy', function (v) { - return y(v.value); - }) - .attr('fill', function () { - return color(d.label); - }) - .attr('r', 1.5) - .append('title') - .text(function (v) { - return d.label + ' -- ' + formatters[selectedDescriptor.formatter](v.value); - }); + .data(d.values) + .enter() + .append('circle') + .attr('style', 'pointer-events: all;') + .attr('class', 'mark') + .attr('cx', function (v) { + return x(v.timestamp); + }) + .attr('cy', function (v) { + return y(v.value); + }) + .attr('fill', function () { + return color(d.label); + }) + .attr('r', 1.5) + .append('title') + .text(function (v) { + return d.label + ' -- ' + formatters[selectedDescriptor.formatter](v.value); + }); }); // ------------- @@ -489,41 +505,41 @@ nf.StatusHistory = (function () { var controlHeight = chartControlContainer.height() - margin.top - margin.bottom; var xControl = d3.time.scale() - .range([0, width]); + .range([0, width]); var xControlAxis = d3.svg.axis() - .scale(xControl) - .ticks(5) - .tickFormat(customTimeFormat) - .orient('bottom'); + .scale(xControl) + .ticks(5) + .tickFormat(customTimeFormat) + .orient('bottom'); var yControl = d3.scale.linear() - .range([controlHeight, 0]); + .range([controlHeight, 0]); var yControlAxis = d3.svg.axis() - .scale(yControl) - .tickValues(y.domain()) - .tickFormat(formatters[selectedDescriptor.formatter]) - .orient('left'); + .scale(yControl) + .tickValues(y.domain()) + .tickFormat(formatters[selectedDescriptor.formatter]) + .orient('left'); // status line var controlLine = d3.svg.line() - .interpolate('monotone') - .x(function (d) { - return xControl(d.timestamp); - }) - .y(function (d) { - return yControl(d.value); - }); + .interpolate('monotone') + .x(function (d) { + return xControl(d.timestamp); + }) + .y(function (d) { + return yControl(d.value); + }); // build the svg var controlChartSvg = d3.select('#status-history-chart-control-container').append('svg') - .attr('width', width + margin.left + margin.right) - .attr('height', controlHeight + margin.top + margin.bottom); + .attr('width', width + margin.left + margin.right) + .attr('height', controlHeight + margin.top + margin.bottom); // build the control chart var control = controlChartSvg.append('g') - .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); + .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); // increase the y domain slightly var yControlDomain = y.domain(); @@ -535,40 +551,40 @@ nf.StatusHistory = (function () { // build the control x axis control.append('g') - .attr('class', 'x axis') - .attr('transform', 'translate(0, ' + controlHeight + ')') - .call(xControlAxis); + .attr('class', 'x axis') + .attr('transform', 'translate(0, ' + controlHeight + ')') + .call(xControlAxis); // build the control y axis control.append('g') - .attr('class', 'y axis') - .call(yControlAxis); + .attr('class', 'y axis') + .call(yControlAxis); // build the control chart var controlStatus = control.selectAll('.status') - .data(statusData) - .enter() - .append('g') - .attr('class', 'status'); + .data(statusData) + .enter() + .append('g') + .attr('class', 'status'); // draw the lines controlStatus.append('path') - .attr('class', function (d) { - return 'chart-line chart-line-' + d.id; - }) - .attr('d', function (d) { - return controlLine(d.values); - }) - .attr('stroke', function (d) { - return color(d.label); - }) - .classed('hidden', function (d) { - return instances[d.id] === false; - }) - .append('title') - .text(function (d) { - return d.label; - }); + .attr('class', function (d) { + return 'chart-line chart-line-' + d.id; + }) + .attr('d', function (d) { + return controlLine(d.values); + }) + .attr('stroke', function (d) { + return color(d.label); + }) + .classed('hidden', function (d) { + return instances[d.id] === false; + }) + .append('title') + .text(function (d) { + return d.label; + }); // ------------------- // configure the brush @@ -576,7 +592,7 @@ nf.StatusHistory = (function () { /** * Updates the axis for the main chart. - * + * * @param {array} xDomain The new domain for the x axis * @param {array} yDomain The new domain for the y axis */ @@ -587,19 +603,19 @@ nf.StatusHistory = (function () { // update the chart lines status.selectAll('.chart-line') - .attr('d', function (d) { - return line(d.values); - }); + .attr('d', function (d) { + return line(d.values); + }); status.selectAll('circle.mark') - .attr('cx', function (v) { - return x(v.timestamp); - }) - .attr('cy', function (v) { - return y(v.value); - }) - .attr('r', function () { - return brush.empty() ? 1.5 : 4; - }); + .attr('cx', function (v) { + return x(v.timestamp); + }) + .attr('cy', function (v) { + return y(v.value); + }) + .attr('r', function () { + return brush.empty() ? 1.5 : 4; + }); // update the x axis chart.select('.x.axis').call(xAxis); @@ -658,9 +674,9 @@ nf.StatusHistory = (function () { // build the brush var brush = d3.svg.brush() - .x(xControl) - .y(yControl) - .on('brush', brushed); + .x(xControl) + .y(yControl) + .on('brush', brushed); // conditionally set the brush extent if (nf.Common.isDefinedAndNotNull(brushExtent)) { @@ -669,30 +685,30 @@ nf.StatusHistory = (function () { // context area control.append('g') - .attr('class', 'brush') - .call(brush); + .attr('class', 'brush') + .call(brush); // add expansion to the extent control.select('rect.extent') - .attr('style', 'pointer-events: all;') - .on('dblclick', function () { - if (!brush.empty()) { - // get the current extent to get the x range - var extent = brush.extent(); + .attr('style', 'pointer-events: all;') + .on('dblclick', function () { + if (!brush.empty()) { + // get the current extent to get the x range + var extent = brush.extent(); - // get the y range (this value does not change from the original y domain) - var yRange = yControl.domain(); + // get the y range (this value does not change from the original y domain) + var yRange = yControl.domain(); - // expand the extent vertically - brush.extent([[extent[0][0], yRange[0]], [extent[1][0], yRange[1]]]); + // expand the extent vertically + brush.extent([[extent[0][0], yRange[0]], [extent[1][0], yRange[1]]]); - // update the brush control - control.select('.brush').call(brush); + // update the brush control + control.select('.brush').call(brush); - // run the brush to update the axes of the main chart - brushed(); - } - }); + // run the brush to update the axes of the main chart + brushed(); + } + }); // -------------------- // aggregate statistics @@ -834,7 +850,7 @@ nf.StatusHistory = (function () { }, start: function (e, ui) { var helperOffset = ui.helper.offset(); - var dialogOuter = ((statusHistoryDialog.outerWidth() - statusHistoryDialog.width()) / 2) + 3; // 3 for the box shadow + var dialogOuter = ((statusHistoryDialog.outerWidth() - statusHistoryDialog.width()) / 2); var chartOuter = chartContainer.outerWidth() - chartContainer.width(); // calculate the max width of the component @@ -897,11 +913,11 @@ nf.StatusHistory = (function () { // update the size of the chart chartSvg.attr('width', width + margin.left + margin.right) - .attr('height', height + margin.top + margin.bottom); + .attr('height', height + margin.top + margin.bottom); // update the size of the clipper clipPath.attr('width', width) - .attr('height', height); + .attr('height', height); // update the position of the x axis chart.select('.x.axis').attr('transform', 'translate(0, ' + height + ')'); @@ -919,7 +935,7 @@ nf.StatusHistory = (function () { // update the size of the control chart controlChartSvg.attr('width', width + margin.left + margin.right) - .attr('height', controlHeight + margin.top + margin.bottom); + .attr('height', controlHeight + margin.top + margin.bottom); // update the chart lines controlStatus.selectAll('.chart-line').attr('d', function (d) { @@ -952,7 +968,7 @@ nf.StatusHistory = (function () { /** * Gets the minimum value from the specified instances. - * + * * @param {type} nodeInstances */ var getMinValue = function (nodeInstances) { @@ -965,7 +981,7 @@ nf.StatusHistory = (function () { /** * Gets the maximum value from the specified instances. - * + * * @param {type} nodeInstances */ var getMaxValue = function (nodeInstances) { @@ -978,7 +994,7 @@ nf.StatusHistory = (function () { /** * Gets the mean value from the specified instances. - * + * * @param {type} nodeInstances */ var getMeanValue = function (nodeInstances) { @@ -1005,7 +1021,7 @@ nf.StatusHistory = (function () { /** * Builds a details container. - * + * * @param {type} label */ var buildDetailsContainer = function (label) { @@ -1016,7 +1032,7 @@ nf.StatusHistory = (function () { /** * Adds a detail item and specified container. - * + * * @param {type} container * @param {type} label * @param {type} value @@ -1024,8 +1040,8 @@ nf.StatusHistory = (function () { */ var addDetailItem = function (container, label, value, valueElementId) { var detailContainer = $('<div class="detail-item"></div>').appendTo(container); - $('<div class="detail-item-label"></div>').text(label).appendTo(detailContainer); - var detailElement = $('<div class="detail-item-value"></div>').text(value).appendTo(detailContainer); + $('<div class="setting-name"></div>').text(label).appendTo(detailContainer); + var detailElement = $('<div class="setting-field"></div>').text(value).appendTo(detailContainer); if (nf.Common.isDefinedAndNotNull(valueElementId)) { detailElement.attr('id', valueElementId); @@ -1035,13 +1051,13 @@ nf.StatusHistory = (function () { return { /** * Initializes the lineage graph. - * + * * @param {integer} timeOffset The time offset of the server */ init: function (timeOffset) { serverTimeOffset = timeOffset; - nf.Common.addHoverEffect('#status-history-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + $('#status-history-refresh-button').click(function () { var statusHistory = $('#status-history-dialog').data('status-history'); if (statusHistory !== null) { if (statusHistory.type === config.type.processor) { @@ -1058,9 +1074,14 @@ nf.StatusHistory = (function () { // configure the dialog and make it draggable $('#status-history-dialog').modal({ - overlayBackground: false, + headerText: "Status History", buttons: [{ buttonText: 'Close', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, handler: { click: function () { this.modal('hide'); @@ -1088,10 +1109,10 @@ nf.StatusHistory = (function () { containment: 'parent' }); }, - + /** * Shows the status history for the specified connection in this instance. - * + * * @param {type} groupId * @param {type} connectionId * @param {type} selectedDescriptor @@ -1105,10 +1126,10 @@ nf.StatusHistory = (function () { handleStatusHistoryResponse(groupId, connectionId, response.statusHistory, config.type.connection, selectedDescriptor); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows the status history for the specified processor in this instance. - * + * * @param {type} groupId * @param {type} processorId * @param {type} selectedDescriptor @@ -1122,10 +1143,10 @@ nf.StatusHistory = (function () { handleStatusHistoryResponse(groupId, processorId, response.statusHistory, config.type.processor, selectedDescriptor); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows the status history for the specified process group in this instance. - * + * * @param {type} groupId * @param {type} processGroupId * @param {type} selectedDescriptor @@ -1139,10 +1160,10 @@ nf.StatusHistory = (function () { handleStatusHistoryResponse(groupId, processGroupId, response.statusHistory, config.type.processGroup, selectedDescriptor); }).fail(nf.Common.handleAjaxError); }, - + /** * Shows the status history for the specified remote process group in this instance. - * + * * @param {type} groupId * @param {type} remoteProcessGroupId * @param {type} selectedDescriptor
