You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2016/06/21 18:48:57 UTC
[04/17] nifi git commit: [NIFI-1879] Responsive dialogs and dialog UX
refresh. This closes #523
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