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-reporting-task.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js index 1efc9e7..9d02ab0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js @@ -18,7 +18,7 @@ /* global nf */ nf.ReportingTask = (function () { - + var config = { edit: 'edit', readOnly: 'read-only' @@ -35,7 +35,7 @@ nf.ReportingTask = (function () { /** * Handle any expected reporting task configuration errors. - * + * * @argument {object} xhr The XmlHttpRequest * @argument {string} status The status of the request * @argument {string} error The error @@ -53,8 +53,7 @@ nf.ReportingTask = (function () { nf.Dialog.showOkDialog({ dialogContent: content, - overlayBackground: false, - headerText: 'Configuration Error' + headerText: 'Reporting Task' }); } else { nf.Common.handleAjaxError(xhr, status, error); @@ -81,13 +80,13 @@ nf.ReportingTask = (function () { } else if ($('#reporting-task-enabled').hasClass('checkbox-unchecked') && (details['state'] === 'RUNNING' || details['state'] === 'STOPPED')) { return true; } - + // consider the scheduling strategy var schedulingStrategy = $('#reporting-task-scheduling-strategy-combo').combo('getSelectedOption').value; if (schedulingStrategy !== (details['schedulingStrategy'] + '')) { return true; } - + // get the appropriate scheduling period field var schedulingPeriod; if (schedulingStrategy === 'CRON_DRIVEN') { @@ -95,12 +94,12 @@ nf.ReportingTask = (function () { } else { schedulingPeriod = $('#reporting-task-timer-driven-scheduling-period'); } - + // check the scheduling period if (nf.Common.isDefinedAndNotNull(schedulingPeriod) && schedulingPeriod.val() !== (details['schedulingPeriod'] + '')) { return true; } - + // defer to the properties return $('#reporting-task-properties').propertytable('isSaveRequired'); }; @@ -130,19 +129,19 @@ nf.ReportingTask = (function () { reportingTaskDto['schedulingStrategy'] = schedulingStrategy; reportingTaskDto['schedulingPeriod'] = schedulingPeriod.val(); reportingTaskDto['comments'] = $('#reporting-task-comments').val(); - + // mark the processor disabled if appropriate if ($('#reporting-task-enabled').hasClass('checkbox-unchecked')) { reportingTaskDto['state'] = 'DISABLED'; } else if ($('#reporting-task-enabled').hasClass('checkbox-checked')) { reportingTaskDto['state'] = 'STOPPED'; } - + // set the properties if ($.isEmptyObject(properties) === false) { reportingTaskDto['properties'] = properties; } - + // create the reporting task entity var reportingTaskEntity = {}; reportingTaskEntity['component'] = reportingTaskDto; @@ -153,32 +152,31 @@ nf.ReportingTask = (function () { /** * Validates the specified details. - * + * * @argument {object} details The details to validate */ var validateDetails = function (details) { var errors = []; var reportingTask = details['component']; - + if (nf.Common.isBlank(reportingTask['schedulingPeriod'])) { errors.push('Run schedule must be specified'); } - + if (errors.length > 0) { nf.Dialog.showOkDialog({ dialogContent: nf.Common.formatUnorderedList(errors), - overlayBackground: false, - headerText: 'Configuration Error' + headerText: 'Reporting Task' }); return false; } else { return true; } }; - + /** * Renders the specified reporting task. - * + * * @param {object} reportingTask */ var renderReportingTask = function (reportingTaskEntity) { @@ -190,9 +188,9 @@ nf.ReportingTask = (function () { bulletins: currentReportingTask.bulletins }, reportingTaskEntity)); }; - + /** - * + * * @param {object} reportingTaskEntity * @param {boolean} running */ @@ -217,7 +215,7 @@ nf.ReportingTask = (function () { nf.ControllerService.reloadReferencedServices(getControllerServicesTable(), response.component); }).fail(nf.Common.handleAjaxError); }; - + /** * Goes to a service configuration from the property table. */ @@ -230,8 +228,8 @@ nf.ReportingTask = (function () { if (isSaveRequired()) { // see if those changes should be saved nf.Dialog.showYesNoDialog({ + headerText: 'Save', dialogContent: 'Save changes before going to this Controller Service?', - overlayBackground: false, noHandler: function () { deferred.resolve(); }, @@ -249,10 +247,10 @@ nf.ReportingTask = (function () { } }).promise(); }; - + /** * Saves the specified reporting task. - * + * * @param {type} reportingTask */ var saveReportingTask = function (reportingTaskEntity) { @@ -280,10 +278,10 @@ nf.ReportingTask = (function () { }).promise(); } }; - + /** * Gets a property descriptor for the controller service currently being configured. - * + * * @param {type} propertyName */ var getReportingTaskPropertyDescriptor = function (propertyName) { @@ -297,7 +295,7 @@ nf.ReportingTask = (function () { dataType: 'json' }).fail(nf.Common.handleAjaxError); }; - + return { /** * Initializes the reporting task configuration dialog. @@ -308,19 +306,19 @@ nf.ReportingTask = (function () { tabStyle: 'tab', selectedTabStyle: 'selected-tab', tabs: [{ - name: 'Settings', - tabContentId: 'reporting-task-standard-settings-tab-content' - }, { - name: 'Properties', - tabContentId: 'reporting-task-properties-tab-content' - }, { - name: 'Comments', - tabContentId: 'reporting-task-comments-tab-content' - }], + name: 'Settings', + tabContentId: 'reporting-task-standard-settings-tab-content' + }, { + name: 'Properties', + tabContentId: 'reporting-task-properties-tab-content' + }, { + name: 'Comments', + tabContentId: 'reporting-task-comments-tab-content' + }], select: function () { // remove all property detail dialogs nf.UniversalCapture.removeAllPropertyDetailDialogs(); - + // update the property table size in case this is the first time its rendered if ($(this).text() === 'Properties') { $('#reporting-task-properties').propertytable('resetTableSize'); @@ -330,11 +328,10 @@ nf.ReportingTask = (function () { $('#reporting-task-properties').propertytable('saveRow'); } }); - + // initialize the reporting task configuration dialog $('#reporting-task-configuration').data('mode', config.edit).modal({ headerText: 'Configure Reporting Task', - overlayBackground: false, handler: { close: function () { // cancel any active edits @@ -342,10 +339,10 @@ nf.ReportingTask = (function () { // clear the tables $('#reporting-task-properties').propertytable('clear'); - + // clear the comments nf.Common.clearField('read-only-reporting-task-comments'); - + // removed the cached reporting task details $('#reporting-task-configuration').removeData('reportingTaskDetails'); } @@ -360,10 +357,10 @@ nf.ReportingTask = (function () { goToServiceDeferred: goToServiceFromProperty }); }, - + /** * Shows the configuration dialog for the specified reporting task. - * + * * @argument {reportingTask} reportingTaskEntity The reporting task */ showConfiguration: function (reportingTaskEntity) { @@ -372,7 +369,7 @@ nf.ReportingTask = (function () { // update the visibility $('#reporting-task-configuration .reporting-task-read-only').hide(); $('#reporting-task-configuration .reporting-task-editable').show(); - + // initialize the property table $('#reporting-task-properties').propertytable('destroy').propertytable({ readOnly: false, @@ -380,34 +377,34 @@ nf.ReportingTask = (function () { descriptorDeferred: getReportingTaskPropertyDescriptor, goToServiceDeferred: goToServiceFromProperty }); - + // update the mode reportingTaskDialog.data('mode', config.edit); } - + // reload the task in case the property descriptors have changed var reloadTask = $.ajax({ type: 'GET', url: reportingTaskEntity.component.uri, dataType: 'json' }); - + // get the reporting task history var loadHistory = $.ajax({ type: 'GET', url: '../nifi-api/history/reporting-tasks/' + encodeURIComponent(reportingTaskEntity.id), dataType: 'json' }); - + // once everything is loaded, show the dialog $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) { // get the updated reporting task reportingTaskEntity = taskResponse[0]; var reportingTask = reportingTaskEntity.component; - + // get the reporting task history var reportingTaskHistory = historyResponse[0].componentHistory; - + // record the reporting task details $('#reporting-task-configuration').data('reportingTaskDetails', reportingTaskEntity); @@ -416,7 +413,7 @@ nf.ReportingTask = (function () { if (reportingTask['state'] === 'DISABLED') { reportingTaskEnableStyle = 'checkbox-unchecked'; } - + // populate the reporting task settings nf.Common.populateField('reporting-task-id', reportingTask['id']); nf.Common.populateField('reporting-task-type', nf.Common.substringAfterLast(reportingTask['type'], '.')); @@ -428,17 +425,17 @@ nf.ReportingTask = (function () { var defaultSchedulingPeriod = reportingTask['defaultSchedulingPeriod']; var cronSchedulingPeriod = $('#reporting-task-cron-driven-scheduling-period').val(defaultSchedulingPeriod['CRON_DRIVEN']); var timerSchedulingPeriod = $('#reporting-task-timer-driven-scheduling-period').val(defaultSchedulingPeriod['TIMER_DRIVEN']); - + // set the scheduling period as appropriate if (reportingTask['schedulingStrategy'] === 'CRON_DRIVEN') { cronSchedulingPeriod.val(reportingTask['schedulingPeriod']); } else { timerSchedulingPeriod.val(reportingTask['schedulingPeriod']); } - + // initialize the scheduling strategy $('#reporting-task-scheduling-strategy-combo').combo({ - options: [{ + options: [{ text: 'Timer driven', value: 'TIMER_DRIVEN', description: 'Reporting task will be scheduled to run on an interval defined by the run schedule.' @@ -460,26 +457,37 @@ nf.ReportingTask = (function () { } } }); - + var buttons = [{ - buttonText: 'Apply', - handler: { - click: function () { - // close all fields currently being edited - $('#reporting-task-properties').propertytable('saveRow'); + buttonText: 'Apply', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // close all fields currently being edited + $('#reporting-task-properties').propertytable('saveRow'); // save the reporting task saveReportingTask(reportingTaskEntity).done(function (response) { // reload the reporting task nf.ControllerService.reloadReferencedServices(getControllerServicesTable(), response.component); - // close the details panel - $('#reporting-task-configuration').modal('hide'); - }); - } + // close the details panel + $('#reporting-task-configuration').modal('hide'); + }); } - }, { + } + }, + { buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { $('#reporting-task-configuration').modal('hide'); @@ -491,6 +499,11 @@ nf.ReportingTask = (function () { if (nf.Common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.customUiUrl !== '') { buttons.push({ buttonText: 'Advanced', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { var openCustomUi = function () { @@ -506,7 +519,7 @@ nf.ReportingTask = (function () { nf.ReportingTask.reload(reportingTaskEntity.id).done(function (response) { nf.ControllerService.reloadReferencedServices(getControllerServicesTable(), response.reportingTask); }); - + // show the settings nf.Settings.showSettings(); }); @@ -519,8 +532,8 @@ nf.ReportingTask = (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 () { saveReportingTask(reportingTaskEntity).done(function () { @@ -540,59 +553,59 @@ nf.ReportingTask = (function () { // set the button model $('#reporting-task-configuration').modal('setButtonModel', buttons); - + // load the property table $('#reporting-task-properties').propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory); // show the details $('#reporting-task-configuration').modal('show'); }).fail(nf.Common.handleAjaxError); - }, - + }, + /** * Shows the reporting task details in a read only dialog. - * + * * @param {object} reportingTaskEntity */ - showDetails: function(reportingTaskEntity) { + showDetails: function (reportingTaskEntity) { var reportingTaskDialog = $('#reporting-task-configuration'); if (reportingTaskDialog.data('mode') === config.edit) { // update the visibility $('#reporting-task-configuration .reporting-task-read-only').show(); $('#reporting-task-configuration .reporting-task-editable').hide(); - + // initialize the property table $('#reporting-task-properties').propertytable('destroy').propertytable({ readOnly: true }); - + // update the mode reportingTaskDialog.data('mode', config.readOnly); } - + // reload the task in case the property descriptors have changed var reloadTask = $.ajax({ type: 'GET', url: reportingTaskEntity.component.uri, dataType: 'json' }); - + // get the reporting task history var loadHistory = $.ajax({ type: 'GET', url: '../nifi-api/history/reporting-tasks/' + encodeURIComponent(reportingTaskEntity.id), dataType: 'json' }); - + // once everything is loaded, show the dialog $.when(reloadTask, loadHistory).done(function (taskResponse, historyResponse) { // get the updated reporting task reportingTaskEntity = taskResponse[0]; var reportingTask = reportingTaskEntity.component; - + // get the reporting task history var reportingTaskHistory = historyResponse[0].componentHistory; - + // populate the reporting task settings nf.Common.populateField('reporting-task-id', reportingTask['id']); nf.Common.populateField('reporting-task-type', nf.Common.substringAfterLast(reportingTask['type'], '.')); @@ -608,21 +621,31 @@ nf.ReportingTask = (function () { } nf.Common.populateField('read-only-reporting-task-scheduling-strategy', schedulingStrategy); nf.Common.populateField('read-only-reporting-task-scheduling-period', reportingTask['schedulingPeriod']); - + var buttons = [{ - buttonText: 'Ok', - handler: { - click: function () { - // hide the dialog - reportingTaskDialog.modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // hide the dialog + reportingTaskDialog.modal('hide'); } - }]; + } + }]; // determine if we should show the advanced button if (nf.Common.isDefinedAndNotNull(nf.CustomUi) && nf.Common.isDefinedAndNotNull(reportingTask.customUiUrl) && reportingTask.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 @@ -639,46 +662,46 @@ nf.ReportingTask = (function () { } }); } - + // show the dialog reportingTaskDialog.modal('setButtonModel', buttons).modal('show'); - + // load the property table $('#reporting-task-properties').propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory); - + // show the details reportingTaskDialog.modal('show'); }); }, - + /** * Starts the specified reporting task. - * + * * @param {object} reportingTaskEntity */ - start: function(reportingTaskEntity) { + start: function (reportingTaskEntity) { setRunning(reportingTaskEntity, true); }, - + /** * Stops the specified reporting task. - * + * * @param {object} reportingTaskEntity */ - stop: function(reportingTaskEntity) { + stop: function (reportingTaskEntity) { setRunning(reportingTaskEntity, false); }, - + /** * Reloads the specified reporting task. - * + * * @param {string} id */ reload: function (id) { var reportingTaskGrid = $('#reporting-tasks-table').data('gridInstance'); var reportingTaskData = reportingTaskGrid.getData(); var reportingTaskEntity = reportingTaskData.getItemById(id); - + return $.ajax({ type: 'GET', url: reportingTaskEntity.component.uri, @@ -687,15 +710,15 @@ nf.ReportingTask = (function () { renderReportingTask(response); }).fail(nf.Common.handleAjaxError); }, - + /** * Deletes the specified reporting task. - * + * * @param {object} reportingTaskEntity */ - remove: function(reportingTaskEntity) { + remove: function (reportingTaskEntity) { // prompt for removal? - + var revision = nf.Client.getRevision(reportingTaskEntity); $.ajax({ type: 'DELETE',
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-settings.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js index f802b85..a74e780 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js @@ -40,7 +40,8 @@ nf.Settings = (function () { enableCellNavigation: true, enableColumnReorder: false, autoEdit: false, - multiSelect: false + multiSelect: false, + rowHeight: 24 }; /** @@ -79,8 +80,8 @@ nf.Settings = (function () { }).done(function (response) { // close the settings dialog nf.Dialog.showOkDialog({ - dialogContent: 'Settings successfully applied.', - overlayBackground: false + headerText: 'Settings', + dialogContent: 'Settings successfully applied.' }); // register the click listener for the save button @@ -173,7 +174,7 @@ nf.Settings = (function () { if (!dataContext.accessPolicy.canRead) { return '<span class="blank">' + dataContext.id + '</span>'; } - + return dataContext.component.name; }; @@ -191,7 +192,7 @@ nf.Settings = (function () { if (!dataContext.accessPolicy.canRead) { return ''; } - + return nf.Common.substringAfterLast(dataContext.component.type, '.'); }; @@ -341,8 +342,8 @@ nf.Settings = (function () { // ensure something was selected if (selectedTaskType === '') { nf.Dialog.showOkDialog({ - dialogContent: 'The type of reporting task to create must be selected.', - overlayBackground: false + headerText: 'Settings', + dialogContent: 'The type of reporting task to create must be selected.' }); } else { addReportingTask(selectedTaskType); @@ -525,22 +526,32 @@ nf.Settings = (function () { // initialize the reporting task dialog $('#new-reporting-task-dialog').modal({ headerText: 'Add Reporting Task', - overlayBackground: false, buttons: [{ - buttonText: 'Add', - handler: { - click: function () { - addSelectedReportingTask(); + buttonText: 'Add', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + addSelectedReportingTask(); + } } - } - }, { - 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 () { // clear the selected row @@ -576,20 +587,20 @@ nf.Settings = (function () { return ''; } - var markup = '<img src="images/iconDetails.png" title="View Details" class="pointer view-reporting-task" style="margin-top: 5px; float: left;" />'; + var markup = '<div title="View Details" class="pointer view-reporting-task fa fa-info-circle" style="margin-top: 5px; float: left;" ></div>'; // always include a button to view the usage - markup += '<img src="images/iconUsage.png" title="Usage" class="pointer reporting-task-usage" style="margin-left: 6px; margin-top: 3px;"/>'; + markup += '<div title="Usage" class="pointer reporting-task-usage fa fa-book" style="margin-left: 6px; margin-top: 5px;"></div>'; var hasErrors = !nf.Common.isEmpty(dataContext.component.validationErrors); var hasBulletins = !nf.Common.isEmpty(dataContext.bulletins); if (hasErrors) { - markup += '<img src="images/iconAlert.png" class="has-errors" style="margin-top: 4px; margin-left: 3px; float: left;" />'; + markup += '<div class="pointer has-errors fa fa-warning" style="margin-top: 4px; margin-left: 6px; float: left;" ></div>'; } if (hasBulletins) { - markup += '<img src="images/iconBulletin.png" class="has-bulletins" style="margin-top: 5px; margin-left: 5px; float: left;"/>'; + markup += '<div class="has-bulletins fa fa-sticky-note-o" style="margin-top: 5px; margin-left: 5px; float: left;"></div>'; } if (hasErrors || hasBulletins) { @@ -634,20 +645,20 @@ nf.Settings = (function () { if (dataContext.accessPolicy.canRead && dataContext.accessPolicy.canWrite) { if (dataContext.component.state === 'RUNNING') { - markup += '<img src="images/iconStop.png" title="Stop" class="pointer stop-reporting-task" style="margin-top: 2px;" />'; + markup += '<div title="Stop" class="pointer stop-reporting-task fa fa-stop" style="margin-top: 2px;" ></div>'; } else if (dataContext.component.state === 'STOPPED' || dataContext.component.state === 'DISABLED') { - markup += '<img src="images/iconEdit.png" title="Edit" class="pointer edit-reporting-task" style="margin-top: 2px;" />'; - + markup += '<div title="Edit" class="pointer edit-reporting-task fa fa-pencil" style="margin-top: 2px;" ></div>'; + // support starting when stopped and no validation errors if (dataContext.component.state === 'STOPPED' && nf.Common.isEmpty(dataContext.component.validationErrors)) { - markup += '<img src="images/iconRun.png" title="Start" class="pointer start-reporting-task" style="margin-top: 2px; margin-left: 3px;"/>'; + markup += '<div title="Start" class="pointer start-reporting-task fa fa-play" style="margin-top: 2px; margin-left: 3px;"></div>'; } - - markup += '<img src="images/iconDelete.png" title="Remove" class="pointer delete-reporting-task" style="margin-top: 2px; margin-left: 3px;" />'; + + markup += '<div title="Remove" class="pointer delete-reporting-task fa fa-trash" style="margin-top: 2px; margin-left: 3px;" ></div>'; } - + if (dataContext.component.persistsState === true) { - markup += '<img src="images/iconViewState.png" title="View State" class="pointer view-state-reporting-task" style="margin-top: 2px; margin-left: 3px;" />'; + markup += '<div title="View State" class="pointer view-state-reporting-task fa fa-tasks" style="margin-top: 2px; margin-left: 3px;" ></div>'; } } @@ -714,16 +725,16 @@ nf.Settings = (function () { if (target.hasClass('view-reporting-task')) { nf.ReportingTask.showDetails(reportingTaskEntity); } else if (target.hasClass('reporting-task-usage')) { - // close the settings dialog - $('#shell-close-button').click(); - - // open the documentation for this reporting task - nf.Shell.showPage('../nifi-docs/documentation?' + $.param({ - select: nf.Common.substringAfterLast(reportingTaskEntity.component.type, '.') - })).done(function() { - nf.Settings.showSettings(); - }); - } + // close the settings dialog + $('#shell-close-button').click(); + + // open the documentation for this reporting task + nf.Shell.showPage('../nifi-docs/documentation?' + $.param({ + select: nf.Common.substringAfterLast(reportingTaskEntity.component.type, '.') + })).done(function () { + nf.Settings.showSettings(); + }); + } } }); @@ -740,7 +751,7 @@ nf.Settings = (function () { // hold onto an instance of the grid $('#reporting-tasks-table').data('gridInstance', reportingTasksGrid).on('mouseenter', 'div.slick-cell', function (e) { - var errorIcon = $(this).find('img.has-errors'); + var errorIcon = $(this).find('div.has-errors'); if (errorIcon.length && !errorIcon.data('qtip')) { var taskId = $(this).find('span.row-id').text(); @@ -767,7 +778,7 @@ nf.Settings = (function () { } } - var bulletinIcon = $(this).find('img.has-bulletins'); + var bulletinIcon = $(this).find('div.has-bulletins'); if (bulletinIcon.length && !bulletinIcon.data('qtip')) { var taskId = $(this).find('span.row-id').text(); @@ -889,8 +900,8 @@ nf.Settings = (function () { }); var reportingTasksElement = $('#reporting-tasks-table'); - nf.Common.cleanUpTooltips(reportingTasksElement, 'img.has-errors'); - nf.Common.cleanUpTooltips(reportingTasksElement, 'img.has-bulletins'); + nf.Common.cleanUpTooltips(reportingTasksElement, 'div.has-errors'); + nf.Common.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins'); var reportingTasksGrid = reportingTasksElement.data('gridInstance'); var reportingTasksData = reportingTasksGrid.getData(); @@ -930,8 +941,8 @@ nf.Settings = (function () { init: function () { // initialize the settings tabs $('#settings-tabs').tabbs({ - tabStyle: 'settings-tab', - selectedTabStyle: 'settings-selected-tab', + tabStyle: 'tab', + selectedTabStyle: 'selected-tab', tabs: [{ name: 'General', tabContentId: 'general-settings-tab-content' @@ -946,14 +957,17 @@ nf.Settings = (function () { var tab = $(this).text(); if (tab === 'General') { $('#new-service-or-task').hide(); + $('#settings-save').show(); } else { $('#new-service-or-task').show(); // update the tooltip on the button $('#new-service-or-task').attr('title', function () { if (tab === 'Controller Services') { + $('#settings-save').hide(); return 'Create a new controller service'; } else if (tab === 'Reporting Tasks') { + $('#settings-save').hide(); return 'Create a new reporting task'; } }); @@ -965,13 +979,13 @@ nf.Settings = (function () { }); // settings refresh button - nf.Common.addHoverEffect('#settings-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + $('#settings-refresh-button').click(function () { loadSettings(); }); // create a new controller service or reporting task $('#new-service-or-task').on('click', function () { - var selectedTab = $('#settings-tabs li.settings-selected-tab').text(); + var selectedTab = $('#settings-tabs li.selected-tab').text(); if (selectedTab === 'Controller Services') { var controllerServicesUri = config.urls.api + '/controller/controller-services'; nf.ControllerServices.promptNewControllerService(controllerServicesUri, getControllerServicesTable()); @@ -1052,10 +1066,12 @@ nf.Settings = (function () { // if there are some bulletins process them if (!nf.Common.isEmpty(reportingTaskBulletins)) { var reportingTaskBulletinsBySource = d3.nest() - .key(function(d) { return d.sourceId; }) + .key(function (d) { + return d.sourceId; + }) .map(reportingTaskBulletins, d3.map); - reportingTaskBulletinsBySource.forEach(function(sourceId, sourceBulletins) { + reportingTaskBulletinsBySource.forEach(function (sourceId, sourceBulletins) { var reportingTask = reportingTasksData.getItemById(sourceId); if (nf.Common.isDefinedAndNotNull(reportingTask)) { reportingTasksData.updateItem(sourceId, $.extend(reportingTask, { @@ -1066,7 +1082,7 @@ nf.Settings = (function () { } else { // if there are no bulletins clear all var reportingTasks = reportingTasksData.getItems(); - $.each(reportingTasks, function(_, reportingTask) { + $.each(reportingTasks, function (_, reportingTask) { reportingTasksData.updateItem(reportingTask.id, $.extend(reportingTask, { bulletins: [] })); 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/cluster/nf-cluster-table.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js index d4303a8..29a2d4e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js @@ -37,7 +37,7 @@ nf.ClusterTable = (function () { /** * Sorts the specified data using the specified sort details. - * + * * @param {object} sortDetails * @param {object} data */ @@ -51,7 +51,7 @@ nf.ClusterTable = (function () { } else if (sortDetails.columnId === 'queued') { var aSplit = a[sortDetails.columnId].split(/ \/ /); var bSplit = b[sortDetails.columnId].split(/ \/ /); - var mod = count %4; + var mod = count % 4; if (mod < 2) { $('#cluster-table span.queued-title').addClass('sorted'); var aCount = nf.Common.parseCount(aSplit[0]); @@ -62,7 +62,7 @@ nf.ClusterTable = (function () { var aSize = nf.Common.parseSize(aSplit[1]); var bSize = nf.Common.parseSize(bSplit[1]); return aSize - bSize; - } + } } else if (sortDetails.columnId === 'status') { var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : ''; if (a.primary === true) { @@ -104,7 +104,7 @@ nf.ClusterTable = (function () { /** * Formats the address for the specified noe. - * + * * @param {object} node * @returns {string} */ @@ -114,14 +114,14 @@ nf.ClusterTable = (function () { /** * Prompts to verify node connection. - * + * * @argument {object} node The node */ var promptForConnect = function (node) { // prompt to connect nf.Dialog.showYesNoDialog({ + headerText: 'Connect Node', dialogContent: 'Connect \'' + formatNodeAddress(node) + '\' to this cluster?', - overlayBackground: false, yesHandler: function () { connect(node.nodeId); } @@ -130,7 +130,7 @@ nf.ClusterTable = (function () { /** * Connects the node in the specified row. - * + * * @argument {string} nodeId The node id */ var connect = function (nodeId) { @@ -159,14 +159,14 @@ nf.ClusterTable = (function () { /** * Prompts to verify node disconnection. - * + * * @argument {object} node The node */ var promptForDisconnect = function (node) { // prompt for disconnect nf.Dialog.showYesNoDialog({ + headerText: 'Disconnect Node', dialogContent: 'Disconnect \'' + formatNodeAddress(node) + '\' from the cluster?', - overlayBackground: false, yesHandler: function () { disconnect(node.nodeId); } @@ -175,7 +175,7 @@ nf.ClusterTable = (function () { /** * Disconnects the node in the specified row. - * + * * @argument {string} nodeId The node id */ var disconnect = function (nodeId) { @@ -204,14 +204,14 @@ nf.ClusterTable = (function () { /** * Prompts to verify node disconnection. - * + * * @argument {object} node The node */ var promptForRemoval = function (node) { // prompt for disconnect nf.Dialog.showYesNoDialog({ + headerText: 'Remove Node', dialogContent: 'Remove \'' + formatNodeAddress(node) + '\' from the cluster?', - overlayBackground: false, yesHandler: function () { remove(node.nodeId); } @@ -220,7 +220,7 @@ nf.ClusterTable = (function () { /** * Disconnects the node in the specified row. - * + * * @argument {string} nodeId The node id */ var remove = function (nodeId) { @@ -272,7 +272,7 @@ nf.ClusterTable = (function () { /** * Performs the filtering. - * + * * @param {object} item The item subject to filtering * @param {object} args Filter arguments * @returns {Boolean} Whether or not to include the item @@ -293,10 +293,10 @@ nf.ClusterTable = (function () { // perform the filter return item[args.property].search(filterExp) >= 0; }; - + /** * Show the node details. - * + * * @argument {object} item The item */ var showNodeDetails = function (item) { @@ -336,15 +336,19 @@ nf.ClusterTable = (function () { // initialize the user details dialog $('#node-details-dialog').modal({ headerText: 'Node Details', - overlayBackground: false, buttons: [{ - buttonText: 'Ok', - handler: { - click: function () { - $('#node-details-dialog').modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + $('#node-details-dialog').modal('hide'); } - }], + } + }], handler: { close: function () { // clear the details @@ -371,12 +375,12 @@ nf.ClusterTable = (function () { // filter type $('#cluster-filter-type').combo({ options: [{ - text: 'by address', - value: 'address' - }, { - text: 'by status', - value: 'status' - }], + text: 'by address', + value: 'address' + }, { + text: 'by status', + value: 'status' + }], select: function (option) { applyFilter(); } @@ -389,13 +393,7 @@ nf.ClusterTable = (function () { // define a custom formatter for the more details column var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) { - var markup = '<img src="images/iconDetails.png" title="View Details" class="pointer show-node-details" style="margin-top: 2px;"/>'; - - if (dataContext.primary === true) { - markup += ' <img src="images/iconPrimary.png" title="Primary Node" style="margin-top: 2px;"/>'; - } - - return markup; + return '<div title="View Details" class="pointer show-node-details fa fa-info-circle" style="margin-top: 2px;"></div>'; }; // define a custom formatter for the run status column @@ -408,12 +406,21 @@ nf.ClusterTable = (function () { return nf.Common.formatValue(value); }; + // define a custom formatter for the status column + var statusFormatter = function (row, cell, value, columnDef, dataContext) { + if (dataContext.primary === true) { + return value + ', PRIMARY'; + } else { + return value; + } + }; + var columnModel = [ {id: 'moreDetails', name: ' ', sortable: false, resizable: false, formatter: moreDetailsFormatter, width: 50, maxWidth: 50}, {id: 'node', field: 'node', name: 'Node Address', formatter: nodeFormatter, resizable: true, sortable: true}, {id: 'activeThreadCount', field: 'activeThreadCount', name: 'Active Thread Count', resizable: true, sortable: true, defaultSortAsc: false}, {id: 'queued', field: 'queued', name: '<span class="queued-title">Queue</span> / <span class="queued-size-title">Size</span>', resizable: true, sortable: true, defaultSortAsc: false}, - {id: 'status', field: 'status', name: 'Status', resizable: true, sortable: true}, + {id: 'status', field: 'status', name: 'Status', formatter: statusFormatter, resizable: true, sortable: true}, {id: 'uptime', field: 'nodeStartTime', name: 'Uptime', formatter: valueFormatter, resizable: true, sortable: true, defaultSortAsc: false}, {id: 'heartbeat', field: 'heartbeat', name: 'Last Heartbeat', formatter: valueFormatter, resizable: true, sortable: true, defaultSortAsc: false} ]; @@ -424,17 +431,12 @@ nf.ClusterTable = (function () { var actionFormatter = function (row, cell, value, columnDef, dataContext) { var canDisconnect = false; var canConnect = false; - var canBecomePrimary = false; // determine if this node is already the primary var isPrimary = dataContext.primary; // determine the current status if (dataContext.status === 'CONNECTED' || dataContext.status === 'CONNECTING') { - // only non-primary connected nodes can become primary - if (isPrimary === false && dataContext.status === 'CONNECTED') { - canBecomePrimary = true; - } canDisconnect = true; } else if (dataContext.status === 'DISCONNECTED') { canConnect = true; @@ -442,13 +444,9 @@ nf.ClusterTable = (function () { // return the appropriate markup if (canConnect) { - return '<img src="images/iconConnect.png" title="Connect" class="pointer prompt-for-connect" style="margin-top: 2px;"/> <img src="images/iconDelete.png" title="Remove" class="pointer prompt-for-removal"/>'; + return '<div title="Connect" class="pointer prompt-for-connect fa fa-plug" style="margin-top: 2px;"></div> <div title="Delete" class="pointer prompt-for-removal fa fa-trash" style="margin-top: 2px;"></div>'; } else if (canDisconnect) { - var actions = '<img src="images/iconDisconnect.png" title="Disconnect" class="pointer prompt-for-disconnect" style="margin-top: 2px;"/>'; - if (canBecomePrimary) { - - } - return actions; + return '<div title="Disconnect" class="pointer prompt-for-disconnect fa fa-power-off" style="margin-top: 2px;"></div>'; } else { return '<div style="width: 16px; height: 16px;"> </div>'; } @@ -462,7 +460,8 @@ nf.ClusterTable = (function () { enableTextSelectionOnCells: true, enableCellNavigation: false, enableColumnReorder: false, - autoEdit: false + autoEdit: false, + rowHeight: 24 }; // initialize the dataview @@ -492,7 +491,7 @@ nf.ClusterTable = (function () { sortAsc: args.sortAsc }, clusterData); }); - + // configure a click listener clusterGrid.onClick.subscribe(function (e, args) { var target = $(e.target); @@ -535,7 +534,7 @@ nf.ClusterTable = (function () { // initialize the number of displayed items $('#displayed-nodes').text('0'); }, - + /** * Update the size of the grid based on its container's current size. */ @@ -545,7 +544,7 @@ nf.ClusterTable = (function () { clusterGrid.resizeCanvas(); } }, - + /** * Load the processor cluster table. */ 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/cluster/nf-cluster.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js index 8e977d9..383d8ce 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster.js @@ -20,6 +20,12 @@ $(document).ready(function () { // initialize the counters page nf.Cluster.init(); + + //alter styles if we're not in the shell + if (top === window) { + $('#cluster').css('margin', 40); + $('#cluster-refresh-container').css('margin', 40); + } }); nf.Cluster = (function () { @@ -64,7 +70,7 @@ nf.Cluster = (function () { */ var initializeClusterPage = function () { // define mouse over event for the refresh button - nf.Common.addHoverEffect('#refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + $('#refresh-button').click(function () { nf.ClusterTable.loadClusterTable(); }); @@ -153,7 +159,6 @@ nf.Cluster = (function () { }); }); }); - } }; }()); \ 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/counters/nf-counters-table.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js index c30c726..4114636 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js @@ -23,7 +23,6 @@ nf.CountersTable = (function () { * Configuration object used to hold a number of configuration items. */ var config = { - filterText: 'Filter', styles: { filterList: 'counters-filter-list' }, @@ -148,9 +147,9 @@ nf.CountersTable = (function () { } }).blur(function () { if ($(this).val() === '') { - $(this).addClass(config.styles.filterList).val(config.filterText); + $(this).addClass(config.styles.filterList); } - }).addClass(config.styles.filterList).val(config.filterText); + }).addClass(config.styles.filterList); // filter type $('#counters-filter-type').combo({ @@ -182,7 +181,7 @@ nf.CountersTable = (function () { if (nf.Common.isDFM()) { // function for formatting the actions column var actionFormatter = function (row, cell, value, columnDef, dataContext) { - return '<img src="images/iconResetCounter.png" title="Reset" class="pointer reset-counter" style="margin-top: 2px;"/>'; + return '<div title="Connect" class="pointer reset-counter fa fa-undo" style="margin-top: 2px;"></div>'; }; // add the action column @@ -194,7 +193,8 @@ nf.CountersTable = (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/counters/nf-counters.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js index c499681..1d6e5ec 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js @@ -20,6 +20,12 @@ $(document).ready(function () { // initialize the counters page nf.Counters.init(); + + //alter styles if we're not in the shell + if (top === window) { + $('#counters').css('margin', 40); + $('#counters-refresh-container').css('margin', 40); + } }); nf.Counters = (function () { @@ -64,7 +70,7 @@ nf.Counters = (function () { */ var initializeCountersPage = function () { // define mouse over event for the refresh button - nf.Common.addHoverEffect('#refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + $('#refresh-button').click(function () { nf.CountersTable.loadCountersTable(); }); 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/history/nf-history-table.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js index 3ffaae4..c1c8e93 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js @@ -41,15 +41,19 @@ nf.HistoryTable = (function () { var initDetailsDialog = function () { $('#action-details-dialog').modal({ headerText: 'Action Details', - overlayBackground: false, buttons: [{ - buttonText: 'Ok', - handler: { - click: function () { - $('#action-details-dialog').modal('hide'); - } + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + $('#action-details-dialog').modal('hide'); } - }], + } + }], handler: { close: function () { // clear the details @@ -69,14 +73,14 @@ nf.HistoryTable = (function () { // filter type $('#history-filter-type').combo({ options: [{ - text: 'by id', - value: 'by id', - description: 'Filters based on the id of the component that was modified' - }, { - text: 'by user', - value: 'by user', - description: 'Filters based on the user that performed the action' - }] + text: 'by id', + value: 'by id', + description: 'Filters based on the id of the component that was modified' + }, { + text: 'by user', + value: 'by user', + description: 'Filters based on the user that performed the action' + }] }); // configure the start and end date picker @@ -95,59 +99,69 @@ nf.HistoryTable = (function () { // configure the filter dialog $('#history-filter-dialog').modal({ headerText: 'Filter History', - overlayBackground: false, buttons: [{ - buttonText: 'Filter', - handler: { - click: function () { - $('#history-filter-dialog').modal('hide'); - - var filter = {}; - - // extract the filter text - var filterText = $('#history-filter').val(); - if (filterText !== '') { - var filterType = $('#history-filter-type').combo('getSelectedOption').text; - if (filterType === 'by id') { - filter['sourceId'] = filterText; - } else if (filterType === 'by user') { - filter['userName'] = filterText; - } + buttonText: 'Filter', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + $('#history-filter-dialog').modal('hide'); + + var filter = {}; + + // extract the filter text + var filterText = $('#history-filter').val(); + if (filterText !== '') { + var filterType = $('#history-filter-type').combo('getSelectedOption').text; + if (filterType === 'by id') { + filter['sourceId'] = filterText; + } else if (filterType === 'by user') { + filter['userName'] = filterText; } + } - // extract the start date time - var startDate = $.trim($('#history-filter-start-date').val()); - var startTime = $.trim($('#history-filter-start-time').val()); - if (startDate !== '') { - if (startTime === '') { - startTime = config.defaultStartTime; - $('#history-filter-start-time').val(startTime); - } - filter['startDate'] = startDate + ' ' + startTime; + // extract the start date time + var startDate = $.trim($('#history-filter-start-date').val()); + var startTime = $.trim($('#history-filter-start-time').val()); + if (startDate !== '') { + if (startTime === '') { + startTime = config.defaultStartTime; + $('#history-filter-start-time').val(startTime); } + filter['startDate'] = startDate + ' ' + startTime; + } - // extract the end date time - var endDate = $.trim($('#history-filter-end-date').val()); - var endTime = $.trim($('#history-filter-end-time').val()); - if (endDate !== '') { - if (endTime === '') { - endTime = config.defaultEndTime; - $('#history-filter-end-time').val(endTime); - } - filter['endDate'] = endDate + ' ' + endTime; + // extract the end date time + var endDate = $.trim($('#history-filter-end-date').val()); + var endTime = $.trim($('#history-filter-end-time').val()); + if (endDate !== '') { + if (endTime === '') { + endTime = config.defaultEndTime; + $('#history-filter-end-time').val(endTime); } + filter['endDate'] = endDate + ' ' + endTime; + } - // set the filter - var historyGrid = $('#history-table').data('gridInstance'); - var historyModel = historyGrid.getData(); - historyModel.setFilterArgs(filter); + // set the filter + var historyGrid = $('#history-table').data('gridInstance'); + var historyModel = historyGrid.getData(); + historyModel.setFilterArgs(filter); - // reload the table - nf.HistoryTable.loadHistoryTable(); - } + // reload the table + nf.HistoryTable.loadHistoryTable(); } - }, { + } + }, + { buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { $('#history-filter-dialog').modal('hide'); @@ -175,41 +189,51 @@ nf.HistoryTable = (function () { // configure the filter dialog $('#history-purge-dialog').modal({ headerText: 'Purge History', - overlayBackground: false, buttons: [{ - buttonText: 'Purge', - handler: { - click: function () { - // hide the dialog - $('#history-purge-dialog').modal('hide'); - - // get the purge end date - var endDate = $.trim($('#history-purge-end-date').val()); - var endTime = $.trim($('#history-purge-end-time').val()); - if (endDate !== '') { - if (endTime === '') { - endTime = config.defaultStartTime; - $('#history-purge-end-time').val(endTime); - } - var endDateTime = endDate + ' ' + endTime; - var timezone = $('.timezone:first').text(); - nf.Dialog.showYesNoDialog({ - dialogContent: "Are you sure you want to delete all history before '" + nf.Common.escapeHtml(endDateTime) + " " + nf.Common.escapeHtml(timezone) + "'?", - overlayBackground: false, - yesHandler: function () { - purgeHistory(endDateTime); - } - }); - } else { - nf.Dialog.showOkDialog({ - dialogContent: 'The end date must be specified.', - overlayBackground: false - }); + buttonText: 'Purge', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + // hide the dialog + $('#history-purge-dialog').modal('hide'); + + // get the purge end date + var endDate = $.trim($('#history-purge-end-date').val()); + var endTime = $.trim($('#history-purge-end-time').val()); + if (endDate !== '') { + if (endTime === '') { + endTime = config.defaultStartTime; + $('#history-purge-end-time').val(endTime); } + var endDateTime = endDate + ' ' + endTime; + var timezone = $('.timezone:first').text(); + nf.Dialog.showYesNoDialog({ + headerText: 'History', + dialogContent: "Are you sure you want to delete all history before '" + nf.Common.escapeHtml(endDateTime) + " " + nf.Common.escapeHtml(timezone) + "'?", + yesHandler: function () { + purgeHistory(endDateTime); + } + }); + } else { + nf.Dialog.showOkDialog({ + headerText: 'History', + dialogContent: 'The end date must be specified.' + }); } } - }, { + } + }, + { buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, handler: { click: function () { $('#history-purge-dialog').modal('hide'); @@ -232,7 +256,7 @@ nf.HistoryTable = (function () { $('#clear-history-filter').click(function () { // clear the filter dialog $('#history-filter').val(''); - + // hide the overview $('#history-filter-overview').hide(); @@ -246,18 +270,26 @@ nf.HistoryTable = (function () { }); // add hover effect and click handler for opening the dialog - nf.Common.addHoverEffect('#history-filter-button', 'button-normal', 'button-over').click(function () { + $('#history-filter-button').click(function () { $('#history-filter-dialog').modal('show'); }); // define a custom formatter for the more details column var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) { - return '<img src="images/iconDetails.png" title="View Details" class="pointer show-action-details" style="margin-top: 4px;"/>'; + return '<div title="View Details" class="pointer show-action-details fa fa-info-circle" style="margin-top: 4px;"></div>'; }; // initialize the templates table var historyColumns = [ - {id: 'moreDetails', name: ' ', sortable: false, resizable: false, formatter: moreDetailsFormatter, width: 50, maxWidth: 50}, + { + id: 'moreDetails', + name: ' ', + sortable: false, + resizable: false, + formatter: moreDetailsFormatter, + width: 50, + maxWidth: 50 + }, {id: 'timestamp', name: 'Date/Time', field: 'timestamp', sortable: true, resizable: true}, {id: 'sourceName', name: 'Name', field: 'sourceName', sortable: true, resizable: true}, {id: 'sourceType', name: 'Type', field: 'sourceType', sortable: true, resizable: true}, @@ -269,7 +301,8 @@ nf.HistoryTable = (function () { enableTextSelectionOnCells: true, enableCellNavigation: false, enableColumnReorder: false, - autoEdit: false + autoEdit: false, + rowHeight: 24 }; // create the remote model @@ -334,7 +367,7 @@ nf.HistoryTable = (function () { /** * Purges the history up to the specified end date. - * + * * @argument {string} endDateTime The end date time */ var purgeHistory = function (endDateTime) { @@ -348,16 +381,16 @@ nf.HistoryTable = (function () { nf.HistoryTable.loadHistoryTable(); }).fail(nf.Common.handleAjaxError); }; - + /** * Shows the details for the specified action. - * + * * @param {object} action */ var showActionDetails = function (action) { // create the markup for the dialog var detailsMarkup = $('<div></div>').append( - $('<div class="action-detail"><div class="history-details-name">Id</div>' + nf.Common.escapeHtml(action.sourceId) + '</div>')); + $('<div class="action-detail"><div class="history-details-name">Id</div>' + nf.Common.escapeHtml(action.sourceId) + '</div>')); // get any component details var componentDetails = action.componentDetails; @@ -366,10 +399,10 @@ nf.HistoryTable = (function () { if (nf.Common.isDefinedAndNotNull(componentDetails)) { if (action.sourceType === 'Processor' || action.sourceType === 'ControllerService' || action.sourceType === 'ReportingTask') { detailsMarkup.append( - $('<div class="action-detail"><div class="history-details-name">Type</div>' + nf.Common.escapeHtml(componentDetails.type) + '</div>')); + $('<div class="action-detail"><div class="history-details-name">Type</div>' + nf.Common.escapeHtml(componentDetails.type) + '</div>')); } else if (action.sourceType === 'RemoteProcessGroup') { detailsMarkup.append( - $('<div class="action-detail"><div class="history-details-name">Uri</div>' + nf.Common.formatValue(componentDetails.uri) + '</div>')); + $('<div class="action-detail"><div class="history-details-name">Uri</div>' + nf.Common.formatValue(componentDetails.uri) + '</div>')); } } @@ -380,27 +413,27 @@ nf.HistoryTable = (function () { if (nf.Common.isDefinedAndNotNull(actionDetails)) { if (action.operation === 'Configure') { detailsMarkup.append( - $('<div class="action-detail"><div class="history-details-name">Name</div>' + nf.Common.formatValue(actionDetails.name) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Value</div>' + nf.Common.formatValue(actionDetails.value) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Previous Value</div>' + nf.Common.formatValue(actionDetails.previousValue) + '</div>')); + $('<div class="action-detail"><div class="history-details-name">Name</div>' + nf.Common.formatValue(actionDetails.name) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Value</div>' + nf.Common.formatValue(actionDetails.value) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Previous Value</div>' + nf.Common.formatValue(actionDetails.previousValue) + '</div>')); } else if (action.operation === 'Connect' || action.operation === 'Disconnect') { detailsMarkup.append( - $('<div class="action-detail"><div class="history-details-name">Source Id</div>' + nf.Common.escapeHtml(actionDetails.sourceId) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Source Name</div>' + nf.Common.formatValue(actionDetails.sourceName) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Source Type</div>' + nf.Common.escapeHtml(actionDetails.sourceType) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Relationship(s)</div>' + nf.Common.formatValue(actionDetails.relationship) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Destination Id</div>' + nf.Common.escapeHtml(actionDetails.destinationId) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Destination Name</div>' + nf.Common.formatValue(actionDetails.destinationName) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Destination Type</div>' + nf.Common.escapeHtml(actionDetails.destinationType) + '</div>')); + $('<div class="action-detail"><div class="history-details-name">Source Id</div>' + nf.Common.escapeHtml(actionDetails.sourceId) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Source Name</div>' + nf.Common.formatValue(actionDetails.sourceName) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Source Type</div>' + nf.Common.escapeHtml(actionDetails.sourceType) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Relationship(s)</div>' + nf.Common.formatValue(actionDetails.relationship) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Destination Id</div>' + nf.Common.escapeHtml(actionDetails.destinationId) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Destination Name</div>' + nf.Common.formatValue(actionDetails.destinationName) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Destination Type</div>' + nf.Common.escapeHtml(actionDetails.destinationType) + '</div>')); } else if (action.operation === 'Move') { detailsMarkup.append( - $('<div class="action-detail"><div class="history-details-name">Group</div>' + nf.Common.formatValue(actionDetails.group) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Group Id</div>' + nf.Common.escapeHtml(actionDetails.groupId) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Previous Group</div>' + nf.Common.formatValue(actionDetails.previousGroup) + '</div>')).append( - $('<div class="action-detail"><div class="history-details-name">Previous Group Id</div>' + nf.Common.escapeHtml(actionDetails.previousGroupId) + '</div>')); + $('<div class="action-detail"><div class="history-details-name">Group</div>' + nf.Common.formatValue(actionDetails.group) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Group Id</div>' + nf.Common.escapeHtml(actionDetails.groupId) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Previous Group</div>' + nf.Common.formatValue(actionDetails.previousGroup) + '</div>')).append( + $('<div class="action-detail"><div class="history-details-name">Previous Group Id</div>' + nf.Common.escapeHtml(actionDetails.previousGroupId) + '</div>')); } else if (action.operation === 'Purge') { detailsMarkup.append( - $('<div class="action-detail"><div class="history-details-name">End Date</div>' + nf.Common.escapeHtml(actionDetails.endDate) + '</div>')); + $('<div class="action-detail"><div class="history-details-name">End Date</div>' + nf.Common.escapeHtml(actionDetails.endDate) + '</div>')); } } @@ -418,7 +451,7 @@ nf.HistoryTable = (function () { initPurgeDialog(); initHistoryTable(); }, - + /** * Update the size of the grid based on its container's current size. */ @@ -428,7 +461,7 @@ nf.HistoryTable = (function () { historyGrid.resizeCanvas(); } }, - + /** * Load the processor status table. */ 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/history/nf-history.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js index 0546635..16a5e47 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js @@ -20,6 +20,12 @@ $(document).ready(function () { // initialize the status page nf.History.init(); + + //alter styles if we're not in the shell + if (top === window) { + $('#history').css('margin', 40); + $('#history-refresh-container').css('margin', 40); + } }); nf.History = (function () { @@ -65,7 +71,7 @@ nf.History = (function () { */ var initializeHistoryPage = function () { // define mouse over event for the refresh button - nf.Common.addHoverEffect('#refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + $('#refresh-button').click(function () { nf.HistoryTable.loadHistoryTable(); }); 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/login/nf-login.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js index 8c18511..a200d29 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/login/nf-login.js @@ -125,8 +125,8 @@ nf.Login = (function () { }); }).fail(function (xhr, status, error) { nf.Dialog.showOkDialog({ - dialogContent: nf.Common.escapeHtml(xhr.responseText), - overlayBackground: false + headerText: 'Login', + dialogContent: nf.Common.escapeHtml(xhr.responseText) }); // update the form visibility 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-common.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js index 2bef094..144f8f5 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js @@ -51,9 +51,6 @@ $(document).ready(function () { $('div.loading-container').removeClass('ajax-loading'); }); - // initialize the tooltips - $('img.setting-icon').qtip(nf.Common.config.tooltipConfig); - // shows the logout link in the message-pane when appropriate and schedule token refresh if (nf.Storage.getItem('jwt') !== null) { $('#user-logout-container').css('display', 'block'); @@ -83,7 +80,7 @@ nf.Common = (function () { return { ANONYMOUS_USER_TEXT: 'Anonymous user', - + config: { sensitiveText: 'Sensitive value set', tooltipConfig: { @@ -92,14 +89,21 @@ nf.Common = (function () { }, show: { solo: true, - effect: false + effect: function(offset) { + $(this).slideDown(100); + } }, hide: { - effect: false + effect: function(offset) { + $(this).slideUp(100); + } }, position: { - at: 'top right', - my: 'bottom left' + at: 'bottom center', + my: 'top center', + adjust: { + y: 5 + } } } }, @@ -300,8 +304,8 @@ nf.Common = (function () { $('#message-pane').show(); } else { nf.Dialog.showOkDialog({ + headerText: 'Session Expired', dialogContent: 'Your session has expired. Please press Ok to log in again.', - overlayBackground: false, okHandler: function () { window.location = '/nifi'; } @@ -340,8 +344,8 @@ nf.Common = (function () { // status code 400, 403, 404, and 409 are expected response codes for common errors. if (xhr.status === 400 || xhr.status === 403 || 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 { if (xhr.status < 99 || xhr.status === 12007 || xhr.status === 12029) {
