From b4d07e262f05ce16b4731d9a4b57de1d8d35848e Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Mon, 2 Feb 2015 12:45:53 -0500 Subject: [PATCH] NIFI-307: - Updating how action buttons are invoked in tables throughout the application. NIFI-311: - Addressing visibility and behavior issue with the refresh button in the component cluster summary dialog. --- .../webapp/js/nf/summary/nf-summary-table.js | 523 +++++++----------- .../main/webapp/js/nf/summary/nf-summary.js | 6 - 2 files changed, 190 insertions(+), 339 deletions(-) diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js index 969d7bf745..a4583bc6ea 100644 --- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js +++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js @@ -263,7 +263,7 @@ nf.SummaryTable = (function () { // define a custom formatter for showing more processor details var moreProcessorDetails = function (row, cell, value, columnDef, dataContext) { - var markup = ''; + var markup = ''; // if there are bulletins, render them on the graph if (!nf.Common.isEmpty(dataContext.bulletins)) { @@ -333,26 +333,26 @@ nf.SummaryTable = (function () { var markup = ''; if (isInShell) { - markup += ' '; + markup += ' '; } if (nf.Common.SUPPORTS_SVG) { if (isClustered) { - markup += ' '; + markup += ' '; } else { - markup += ' '; + markup += ' '; } } if (isClustered) { - markup += ' '; + markup += ' '; } return markup; }; // define the action column for clusters and within the shell - processorsColumnModel.push({id: 'action', name: ' ', formatter: processorActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); + processorsColumnModel.push({id: 'actions', name: ' ', formatter: processorActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); } // initialize the templates table @@ -394,6 +394,38 @@ nf.SummaryTable = (function () { }, processorsData); }); + // configure a click listener + processorsGrid.onClick.subscribe(function (e, args) { + var target = $(e.target); + + // get the node at this row + var item = processorsData.getItem(args.row); + + // determine the desired action + if (processorsGrid.getColumns()[args.cell].id === 'actions') { + if (target.hasClass('go-to')) { + goTo(item.groupId, item.id); + } else if (target.hasClass('show-cluster-processor-status-history')) { + nf.StatusHistory.showClusterProcessorChart(item.groupId, item.id); + } else if (target.hasClass('show-processor-status-history')) { + nf.StatusHistory.showStandaloneProcessorChart(item.groupId, item.id); + } else if (target.hasClass('show-cluster-processor-summary')) { + // load the cluster processor summary + loadClusterProcessorSummary(item.id); + + // hide the summary loading indicator + $('#summary-loading-container').hide(); + + // show the dialog + $('#cluster-processor-summary-dialog').modal('show'); + } + } else if (processorsGrid.getColumns()[args.cell].id === 'moreDetails') { + if (target.hasClass('show-processor-details')) { + nf.ProcessorDetails.showDetails(item.groupId, item.id); + } + } + }); + // wire up the dataview to the grid processorsData.onRowCountChanged.subscribe(function (e, args) { processorsGrid.updateRowCount(); @@ -464,6 +496,11 @@ nf.SummaryTable = (function () { } } }); + + // cluster processor refresh + nf.Common.addHoverEffect('#cluster-processor-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + loadClusterProcessorSummary($('#cluster-processor-id').text()); + }); // initialize the cluster processor column model var clusterProcessorsColumnModel = [ @@ -524,7 +561,7 @@ nf.SummaryTable = (function () { // define a custom formatter for showing more processor details var moreConnectionDetails = function (row, cell, value, columnDef, dataContext) { - return ''; + return ''; }; // define the input, read, written, and output columns (reused between both tables) @@ -548,26 +585,26 @@ nf.SummaryTable = (function () { var markup = ''; if (isInShell) { - markup += ' '; + markup += ' '; } if (nf.Common.SUPPORTS_SVG) { if (isClustered) { - markup += ' '; + markup += ' '; } else { - markup += ' '; + markup += ' '; } } if (isClustered) { - markup += ' '; + markup += ' '; } return markup; }; // define the action column for clusters and within the shell - connectionsColumnModel.push({id: 'action', name: ' ', formatter: connectionActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); + connectionsColumnModel.push({id: 'actions', name: ' ', formatter: connectionActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); } // initialize the templates table @@ -609,6 +646,38 @@ nf.SummaryTable = (function () { }, connectionsData); }); + // configure a click listener + connectionsGrid.onClick.subscribe(function (e, args) { + var target = $(e.target); + + // get the node at this row + var item = connectionsData.getItem(args.row); + + // determine the desired action + if (connectionsGrid.getColumns()[args.cell].id === 'actions') { + if (target.hasClass('go-to')) { + goTo(item.groupId, item.id); + } else if (target.hasClass('show-cluster-connection-status-history')) { + nf.StatusHistory.showClusterConnectionChart(item.groupId, item.id); + } else if (target.hasClass('show-connection-status-history')) { + nf.StatusHistory.showStandaloneConnectionChart(item.groupId, item.id); + } else if (target.hasClass('show-cluster-connection-summary')) { + // load the cluster processor summary + loadClusterConnectionSummary(item.id); + + // hide the summary loading indicator + $('#summary-loading-container').hide(); + + // show the dialog + $('#cluster-connection-summary-dialog').modal('show'); + } + } else if (connectionsGrid.getColumns()[args.cell].id === 'moreDetails') { + if (target.hasClass('show-connection-details')) { + nf.ConnectionDetails.showDetails(item.groupId, item.id); + } + } + }); + // wire up the dataview to the grid connectionsData.onRowCountChanged.subscribe(function (e, args) { connectionsGrid.updateRowCount(); @@ -651,6 +720,11 @@ nf.SummaryTable = (function () { } } }); + + // cluster connection refresh + nf.Common.addHoverEffect('#cluster-connection-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + loadClusterConnectionSummary($('#cluster-connection-id').text()); + }); // initialize the cluster processor column model var clusterConnectionsColumnModel = [ @@ -734,18 +808,18 @@ nf.SummaryTable = (function () { var markup = ''; if (isInShell) { - markup += ' '; + markup += ' '; } if (isClustered) { - markup += ' '; + markup += ' '; } return markup; }; // define the action column for clusters and within the shell - inputPortsColumnModel.push({id: 'action', name: ' ', formatter: inputPortActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); + inputPortsColumnModel.push({id: 'actions', name: ' ', formatter: inputPortActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); } // initialize the input ports table @@ -787,6 +861,30 @@ nf.SummaryTable = (function () { }, inputPortsData); }); + // configure a click listener + inputPortsGrid.onClick.subscribe(function (e, args) { + var target = $(e.target); + + // get the node at this row + var item = inputPortsData.getItem(args.row); + + // determine the desired action + if (inputPortsGrid.getColumns()[args.cell].id === 'actions') { + if (target.hasClass('go-to')) { + goTo(item.groupId, item.id); + } else if (target.hasClass('show-cluster-input-port-summary')) { + // load the cluster processor summary + loadClusterInputPortSummary(item.id); + + // hide the summary loading indicator + $('#summary-loading-container').hide(); + + // show the dialog + $('#cluster-input-port-summary-dialog').modal('show'); + } + } + }); + // wire up the dataview to the grid inputPortsData.onRowCountChanged.subscribe(function (e, args) { inputPortsGrid.updateRowCount(); @@ -857,6 +955,11 @@ nf.SummaryTable = (function () { } } }); + + // cluster input port refresh + nf.Common.addHoverEffect('#cluster-input-port-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + loadClusterInputPortSummary($('#cluster-input-port-id').text()); + }); // initialize the cluster input port column model var clusterInputPortsColumnModel = [ @@ -927,18 +1030,18 @@ nf.SummaryTable = (function () { var markup = ''; if (isInShell) { - markup += ' '; + markup += ' '; } if (isClustered) { - markup += ' '; + markup += ' '; } return markup; }; // define the action column for clusters and within the shell - outputPortsColumnModel.push({id: 'action', name: ' ', formatter: outputPortActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); + outputPortsColumnModel.push({id: 'actions', name: ' ', formatter: outputPortActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); } // initialize the input ports table @@ -980,6 +1083,30 @@ nf.SummaryTable = (function () { }, outputPortsData); }); + // configure a click listener + outputPortsGrid.onClick.subscribe(function (e, args) { + var target = $(e.target); + + // get the node at this row + var item = outputPortsData.getItem(args.row); + + // determine the desired action + if (outputPortsGrid.getColumns()[args.cell].id === 'actions') { + if (target.hasClass('go-to')) { + goTo(item.groupId, item.id); + } else if (target.hasClass('show-cluster-output-port-summary')) { + // load the cluster processor summary + loadClusterOutputPortSummary(item.id); + + // hide the summary loading indicator + $('#summary-loading-container').hide(); + + // show the dialog + $('#cluster-output-port-summary-dialog').modal('show'); + } + } + }); + // wire up the dataview to the grid outputPortsData.onRowCountChanged.subscribe(function (e, args) { outputPortsGrid.updateRowCount(); @@ -1050,6 +1177,11 @@ nf.SummaryTable = (function () { } } }); + + // cluster output port refresh + nf.Common.addHoverEffect('#cluster-output-port-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + loadClusterOutputPortSummary($('#cluster-output-port-id').text()); + }); // initialize the cluster output port column model var clusterOutputPortsColumnModel = [ @@ -1152,26 +1284,26 @@ nf.SummaryTable = (function () { var markup = ''; if (isInShell) { - markup += ' '; + markup += ' '; } if (nf.Common.SUPPORTS_SVG) { if (isClustered) { - markup += ' '; + markup += ' '; } else { - markup += ' '; + markup += ' '; } } if (isClustered) { - markup += ' '; + markup += ' '; } return markup; }; // define the action column for clusters and within the shell - remoteProcessGroupsColumnModel.push({id: 'action', name: ' ', formatter: remoteProcessGroupActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); + remoteProcessGroupsColumnModel.push({id: 'actions', name: ' ', formatter: remoteProcessGroupActionFormatter, resizable: false, sortable: false, width: 75, maxWidth: 75}); } // initialize the remote process groups table @@ -1213,6 +1345,34 @@ nf.SummaryTable = (function () { }, remoteProcessGroupsData); }); + // configure a click listener + remoteProcessGroupsGrid.onClick.subscribe(function (e, args) { + var target = $(e.target); + + // get the node at this row + var item = remoteProcessGroupsData.getItem(args.row); + + // determine the desired action + if (remoteProcessGroupsGrid.getColumns()[args.cell].id === 'actions') { + if (target.hasClass('go-to')) { + goTo(item.groupId, item.id); + } else if (target.hasClass('show-cluster-remote-process-group-status-history')) { + nf.StatusHistory.showClusterRemoteProcessGroupChart(item.groupId, item.id); + } else if (target.hasClass('show-remote-process-group-status-history')) { + nf.StatusHistory.showStandaloneRemoteProcessGroupChart(item.groupId, item.id); + } else if (target.hasClass('show-cluster-remote-process-group-summary')) { + // load the cluster processor summary + loadClusterRemoteProcessGroupSummary(item.id); + + // hide the summary loading indicator + $('#summary-loading-container').hide(); + + // show the dialog + $('#cluster-remote-process-group-summary-dialog').modal('show'); + } + } + }); + // wire up the dataview to the grid remoteProcessGroupsData.onRowCountChanged.subscribe(function (e, args) { remoteProcessGroupsGrid.updateRowCount(); @@ -1283,6 +1443,11 @@ nf.SummaryTable = (function () { } } }); + + // cluster remote process group refresh + nf.Common.addHoverEffect('#cluster-remote-process-group-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { + loadClusterRemoteProcessGroupSummary($('#cluster-remote-process-group-id').text()); + }); // initialize the cluster remote process group column model var clusterRemoteProcessGroupsColumnModel = [ @@ -1749,7 +1914,6 @@ nf.SummaryTable = (function () { // populate the processor details $('#cluster-processor-name').text(clusterProcessorStatus.processorName).ellipsis(); - ; $('#cluster-processor-id').text(clusterProcessorStatus.processorId); // update the stats last refreshed timestamp @@ -1801,7 +1965,6 @@ nf.SummaryTable = (function () { // populate the processor details $('#cluster-connection-name').text(clusterConnectionStatus.connectionName).ellipsis(); - ; $('#cluster-connection-id').text(clusterConnectionStatus.connectionId); // update the stats last refreshed timestamp @@ -1959,18 +2122,16 @@ nf.SummaryTable = (function () { } }).fail(nf.Common.handleAjaxError); }; - + return { /** * URL for loading system diagnostics. */ systemDiagnosticsUrl: null, - /** * URL for loading the summary. */ url: null, - /** * Initializes the status table. * @@ -1994,7 +2155,6 @@ nf.SummaryTable = (function () { }); }).promise(); }, - /** * Update the size of the grid based on its container's current size. */ @@ -2024,7 +2184,6 @@ nf.SummaryTable = (function () { remoteProcessGroupGrid.resizeCanvas(); } }, - /** * Load the processor status table. */ @@ -2043,7 +2202,7 @@ nf.SummaryTable = (function () { // remove any tooltips from the processor table var processorsGridElement = $('#processor-summary-table'); nf.Common.cleanUpTooltips(processorsGridElement, 'img.has-bulletins'); - + // get the processor grid/data var processorsGrid = processorsGridElement.data('gridInstance'); var processorsData = processorsGrid.getData(); @@ -2129,308 +2288,6 @@ nf.SummaryTable = (function () { $('#total-items').text('0'); } }).fail(nf.Common.handleAjaxError); - }, - - // processor actions - - /** - * Shows the details for the processor at the specified row. - * - * @param {type} row row index - */ - showProcessorDetails: function (row) { - var grid = $('#processor-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.ProcessorDetails.showDetails(item.groupId, item.id); - } - }, - - /** - * Goes to the specified processor. - * - * @param {type} row - */ - goToProcessor: function (row) { - var grid = $('#processor-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - goTo(item.groupId, item.id); - } - }, - - /** - * Shows the processor status history for a cluster. - * - * @param {type} row - */ - showClusterProcessorStatusHistory: function (row) { - var grid = $('#processor-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.StatusHistory.showClusterProcessorChart(item.groupId, item.id); - } - }, - - /** - * Shows the processor status history. - * - * @param {type} row - */ - showProcessorStatusHistory: function (row) { - var grid = $('#processor-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.StatusHistory.showStandaloneProcessorChart(item.groupId, item.id); - } - }, - - /** - * Shows the cluster processor details dialog for the specified processor. - * - * @argument {string} row The row - */ - showClusterProcessorSummary: function (row) { - var grid = $('#processor-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - - // load the cluster processor summary - loadClusterProcessorSummary(item.id); - - // hide the summary loading indicator - $('#summary-loading-container').hide(); - - // show the dialog - $('#cluster-processor-summary-dialog').modal('show'); - } - }, - - // connection actions - - /** - * Shows the details for the connection at the specified row. - * - * @param {type} row row index - */ - showConnectionDetails: function (row) { - var grid = $('#connection-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.ConnectionDetails.showDetails(item.groupId, item.id); - } - }, - - /** - * Goes to the specified connection. - * - * @param {type} row - */ - goToConnection: function (row) { - var grid = $('#connection-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - goTo(item.groupId, item.id); - } - }, - - /** - * Shows the connection status history for a cluster. - * - * @param {type} row - */ - showClusterConnectionStatusHistory: function (row) { - var grid = $('#connection-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.StatusHistory.showClusterConnectionChart(item.groupId, item.id); - } - }, - - /** - * Shows the connection status history. - * - * @param {type} row - */ - showConnectionStatusHistory: function (row) { - var grid = $('#connection-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.StatusHistory.showStandaloneConnectionChart(item.groupId, item.id); - } - }, - - /** - * Shows the cluster connection details dialog for the specified connection. - * - * @argument {string} row The row - */ - showClusterConnectionSummary: function (row) { - var grid = $('#connection-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - - // load the cluster processor summary - loadClusterConnectionSummary(item.id); - - // hide the summary loading indicator - $('#summary-loading-container').hide(); - - // show the dialog - $('#cluster-connection-summary-dialog').modal('show'); - } - }, - - // input actions - - /** - * Goes to the specified input port. - * - * @param {type} row - */ - goToInputPort: function (row) { - var grid = $('#input-port-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - goTo(item.groupId, item.id); - } - }, - - /** - * Shows the cluster input port details dialog for the specified connection. - * - * @argument {string} row The row - */ - showClusterInputPortSummary: function (row) { - var grid = $('#input-port-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - - // load the cluster processor summary - loadClusterInputPortSummary(item.id); - - // hide the summary loading indicator - $('#summary-loading-container').hide(); - - // show the dialog - $('#cluster-input-port-summary-dialog').modal('show'); - } - }, - - // output actions - - /** - * Goes to the specified output port. - * - * @param {type} row - */ - goToOutputPort: function (row) { - var grid = $('#output-port-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - goTo(item.groupId, item.id); - } - }, - - /** - * Shows the cluster output port details dialog for the specified connection. - * - * @argument {string} row The row - */ - showClusterOutputPortSummary: function (row) { - var grid = $('#output-port-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - - // load the cluster processor summary - loadClusterOutputPortSummary(item.id); - - // hide the summary loading indicator - $('#summary-loading-container').hide(); - - // show the dialog - $('#cluster-output-port-summary-dialog').modal('show'); - } - }, - - // remote process group actions - - /** - * Goes to the specified remote process group. - * - * @param {type} row - */ - goToRemoteProcessGroup: function (row) { - var grid = $('#remote-process-group-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - goTo(item.groupId, item.id); - } - }, - - /** - * Shows the remote process group status history for a cluster. - * - * @param {type} row - */ - showClusterRemoteProcessGroupStatusHistory: function (row) { - var grid = $('#remote-process-group-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.StatusHistory.showClusterRemoteProcessGroupChart(item.groupId, item.id); - } - }, - - /** - * Shows the remote process group status history. - * - * @param {type} row - */ - showRemoteProcessGroupStatusHistory: function (row) { - var grid = $('#remote-process-group-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - nf.StatusHistory.showStandaloneRemoteProcessGroupChart(item.groupId, item.id); - } - }, - - /** - * Shows the cluster remote process group details dialog for the specified connection. - * - * @argument {string} row The row - */ - showClusterRemoteProcessGroupSummary: function (row) { - var grid = $('#remote-process-group-summary-table').data('gridInstance'); - if (nf.Common.isDefinedAndNotNull(grid)) { - var data = grid.getData(); - var item = data.getItem(row); - - // load the cluster processor summary - loadClusterRemoteProcessGroupSummary(item.id); - - // hide the summary loading indicator - $('#summary-loading-container').hide(); - - // show the dialog - $('#cluster-remote-process-group-summary-dialog').modal('show'); - } } }; }()); \ No newline at end of file diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js index 7b90a0f5e9..4f80241ee3 100644 --- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js +++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js @@ -69,12 +69,6 @@ nf.Summary = (function () { nf.Common.addHoverEffect('#refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { nf.SummaryTable.loadProcessorSummaryTable(); }); - nf.Common.addHoverEffect('#cluster-processor-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { - nf.SummaryTable.loadClusterProcessorSummary($('#cluster-processor-id').text()); - }); - nf.Common.addHoverEffect('#cluster-connection-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { - nf.SummaryTable.loadClusterConnectionSummary($('#cluster-connection-id').text()); - }); // return a deferred for page initialization return $.Deferred(function (deferred) {