NIFI-8606 Added Disable & Configure button to the Controller Services Details dialog

This closes #7562

Signed-off-by: Mike Moser <mosermw@apache.org>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/controller-service-configuration.jsp

@@ -16,6 +16,7 @@
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
 <div id="controller-service-configuration" class="hidden large-dialog">
+    <div id="controller-configuration-status-bar"></div>
     <div class="controller-service-configuration-tab-container dialog-content">
         <div id="controller-service-configuration-tabs" class="tab-container"></div>
         <div id="controller-service-configuration-tabs-content">

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css

@@ -249,3 +249,8 @@ div.new-inline-controller-service-button-container {
     right: 0;
     padding: 0 8px 10px;
 }
+
+/* Status bar button icon */
+#controller-service-configuration div.dialog-status-bar div.button-icon.fa-hourglass-end {
+    font-size : 11px !important;
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/statusbar/jquery.statusbar.css

@@ -62,6 +62,11 @@
     color : #7dc7a0;
 }
 
+.dialog-status-bar[state="ENABLED"] text.run-status-icon::before {
+    content : "\f04b";
+    color : #7dc7a0;
+}
+
 .dialog-status-bar[state="STOPPED"] text.run-status-icon::before {
     content : "\f04d";
     color : #d18686;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/statusbar/jquery.statusbar.js

@@ -27,7 +27,9 @@
     // static key path variables
     var PROCESSOR_ID_KEY = 'component.id',
         ACTIVE_THREAD_COUNT_KEY = 'status.aggregateSnapshot.activeThreadCount',
-        RUN_STATUS_KEY = 'status.aggregateSnapshot.runStatus'
+        RUN_STATUS_KEY = 'status.aggregateSnapshot.runStatus',
+        CONTROLLER_STATUS_KEY = 'status.runStatus',
+        CONTROLLER_VALIDATION_KEY = 'status.validationStatus';
 
     var isUndefined = function (obj) {
         return typeof obj === 'undefined';
@@ -264,24 +266,39 @@
                 processorId,
                 obj,
                 runStatus,
+                validationStatus,
                 activeThreadCount,
                 bulletins;
 
             if (data.processor) {
                 processorId = data.processor;
                 obj = d3.select('#id-' + processorId).datum();
-                runStatus = getKeyValue(obj,RUN_STATUS_KEY);
+                runStatus = getKeyValue(obj, RUN_STATUS_KEY);
-                activeThreadCount = getKeyValue(obj,ACTIVE_THREAD_COUNT_KEY);
+                activeThreadCount = getKeyValue(obj, ACTIVE_THREAD_COUNT_KEY);
+                bulletins = data.bulletins;
+            } else if (data.controller) {
+                processorId = data.controller.id;
+                obj = data.controller;
+                validationStatus = getKeyValue(obj, CONTROLLER_VALIDATION_KEY);
+                if (validationStatus === 'INVALID') {
+                    runStatus = validationStatus;
+                } else {
+                    runStatus = getKeyValue(obj, CONTROLLER_STATUS_KEY);
+                }
                 bulletins = data.bulletins;
             } else if (data.provider) {
                 bulletins = data.provider;
             }
 
-            // set the values
+            // set the status
-            if (isDefinedAndNotNull(runStatus) && isDefinedAndNotNull(activeThreadCount)) {
+            if (isDefinedAndNotNull(runStatus)) {
                 bar.attr('state',runStatus.toUpperCase());
                 bar.attr('alerts', 'true');
                 bar.find('.dialog-status-bar-state').text(runStatus);
+            }
+
+            // set thread count
+            if (isDefinedAndNotNull(activeThreadCount)) {
                 bar.find('.dialog-status-bar-threads').attr('count',activeThreadCount);
                 bar.find('.dialog-status-bar-threads').attr('title',activeThreadCount+' active threads');
                 bar.find('.dialog-status-bar-threads').text('('+activeThreadCount+')');

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js

@@ -372,7 +372,12 @@
 
                     // initialize the connection config and invert control of the birdseye and graph
                     nfConnectionConfiguration.init(nfBirdseye, nfGraph, configDetails.defaultBackPressureObjectThreshold, configDetails.defaultBackPressureDataSizeThreshold);
-                    nfControllerService.init(nfControllerServices, nfReportingTask, nfFlowAnalysisRule, nfParameterProvider, nfSettings);
+
+                    nfControllerService.init(nfControllerServices, nfReportingTask, nfFlowAnalysisRule, nfParameterProvider, nfSettings, {
+                        supportsStatusBar : true,
+                        nfActions : nfActions
+                    });
+
                     nfReportingTask.init(nfSettings);
                     nfFlowAnalysisRule.init(nfSettings);
                     nfParameterProvider.init({

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js

@@ -87,6 +87,8 @@
         }
     };
 
+    var options;
+
     // the last submitted referenced attributes
     var referencedAttributes = null;
 
@@ -1416,7 +1418,7 @@
      *
      * @param {jQuery} serviceTable
      */
-    var disableHandler = function (serviceTable) {
+    var disableHandler = function (serviceTable, cb) {
         var disableDialog = $('#disable-controller-service-dialog');
         var canceled = false;
 
@@ -1485,7 +1487,7 @@
         }
 
         $('#disable-progress-label').text('Steps to disable ' + nfCommon.getComponentName(controllerServiceEntity));
-        var disableReferencingSchedulable = $('#disable-referencing-schedulable').addClass('ajax-loading');
+        var disableReferencingSchedulable = $('#disable-referencing-schedulable').removeClass('ajax-complete').addClass('ajax-loading');
 
         $.Deferred(function (deferred) {
             // stop all referencing schedulable components
@@ -1494,7 +1496,7 @@
             // once everything has stopped
             stopped.done(function () {
                 disableReferencingSchedulable.removeClass('ajax-loading').addClass('ajax-complete');
-                var disableReferencingServices = $('#disable-referencing-services').addClass('ajax-loading');
+                var disableReferencingServices = $('#disable-referencing-services').removeClass('ajax-complete').addClass('ajax-loading');
 
                 // disable all referencing services
                 var disabled = updateReferencingServices(serviceTable, controllerServiceEntity, false, continuePolling);
@@ -1502,7 +1504,7 @@
                 // everything is disabled
                 disabled.done(function () {
                     disableReferencingServices.removeClass('ajax-loading').addClass('ajax-complete');
-                    var disableControllerService = $('#disable-controller-service').addClass('ajax-loading');
+                    var disableControllerService = $('#disable-controller-service').removeClass('ajax-complete').addClass('ajax-loading');
 
                     // disable this service
                     setEnabled(serviceTable, controllerServiceEntity, false, continuePolling).done(function () {
@@ -1533,6 +1535,12 @@
                     dialogContent: 'The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.'
                 });
             }
+            //Execute the callback function if provided
+            if (nfCommon.isDefinedAndNotNull(cb)) {
+                if (typeof cb == 'function') {
+                    cb();
+                }
+            }
         });
     };
 
@@ -1937,13 +1945,15 @@
         /**
          * Initializes the controller service configuration dialog.
          */
-        init: function (nfControllerServicesRef, nfReportingTaskRef, nfFlowAnalysisRuleRef, nfParameterProviderRef, nfSettingsRef) {
+
+        init: function (nfControllerServicesRef, nfReportingTaskRef, nfFlowAnalysisRuleRef, nfParameterProviderRef, nfSettingsRef, optionsRef) {
             nfControllerServices = nfControllerServicesRef;
             nfReportingTask = nfReportingTaskRef;
             nfFlowAnalysisRule = nfFlowAnalysisRuleRef;
             nfParameterProvider = nfParameterProviderRef;
             nfSettings = nfSettingsRef;
 
+            options = optionsRef;
             // initialize the configuration dialog tabs
             $('#controller-service-configuration-tabs').tabbs({
                 tabStyle: 'tab',
@@ -2018,6 +2028,11 @@
                 }
             });
 
+            //initialize status bar
+            if (options.supportsStatusBar) {
+                $('#controller-configuration-status-bar').statusbar('processor');
+            }
+
             // initialize the disable service dialog
             $('#disable-controller-service-dialog').modal({
                 headerText: 'Disable Controller Service',
@@ -2327,6 +2342,22 @@
                     });
                 }
 
+                if (options.supportsStatusBar) {
+                    var formattedBulletins = nfCommon.getFormattedBulletins(controllerServiceEntity.bulletins);
+                    var unorderedBulletins = nfCommon.formatUnorderedList(formattedBulletins);
+
+                    // Initialize current status
+                    $("#controller-configuration-status-bar").statusbar(
+                        'set',
+                        {
+                            controller: controllerServiceEntity,
+                            bulletins: unorderedBulletins
+                        }
+                    );
+
+                    $("#controller-configuration-status-bar").statusbar('hideButtons');
+                    $('#controller-service-configuration').modal('refreshButtons');
+                }
                 // set the button model
                 controllerServiceDialog.modal('setButtonModel', buttons);
 
@@ -2473,6 +2504,73 @@
                     });
                 }
 
+                //Initialize current status
+                if (options.supportsStatusBar) {
+                    var formattedBulletins = nfCommon.getFormattedBulletins(controllerServiceEntity.bulletins);
+                    var unorderedBulletins = nfCommon.formatUnorderedList(formattedBulletins);
+
+                    $("#controller-configuration-status-bar").statusbar(
+                        'set',
+                        {
+                            controller: controllerServiceEntity,
+                            bulletins: unorderedBulletins
+                        }
+                    );
+                    $("#controller-configuration-status-bar").statusbar('showButtons');
+                    $('#controller-service-configuration').modal('refreshButtons');
+
+                    //Set the stop and configure button
+                    if (nfCommon.isDefinedAndNotNull(options.nfActions) ) {
+                        var cb = function() {
+                            $('#disable-controller-service-dialog').modal('hide');
+                            $('#controller-service-configuration').modal('hide');
+                            $("#controller-configuration-status-bar").statusbar('hideButtons');
+                            nfControllerService.showConfiguration(serviceTable, controllerServiceEntity);
+                        };
+
+                        var selection = nfCanvasUtils.getSelectionById(controllerServiceEntity.id);
+                        $("#controller-configuration-status-bar").statusbar('buttons',[{
+                            buttonHtml: '<i class="fa fa-stop stop-configure-icon" aria-hidden="true"></i><span>Disable & Configure</span>',
+                            clazz: 'button button-icon auto-width',
+                            color: {
+                                hover: '#C7D2D7',
+                                base: 'transparent',
+                                text: '#004849'
+                            },
+                            disabled : function() {
+                                return !nfCanvasUtils.canOperate(selection);
+                            },
+                            handler: {
+                                click: function() {
+                                    //execute the stop and open the configuration modal
+                                    $("#controller-configuration-status-bar").statusbar('hideButtons');
+                                    showDisableControllerServiceDialog(serviceTable, controllerServiceEntity);
+                                    disableHandler(serviceTable, cb);
+                                }
+                            }
+                        },
+                        {
+                            buttonText: 'Configure',
+                            clazz: 'fa fa-cog button-icon',
+                            color: {
+                                hover: '#C7D2D7',
+                                base: 'transparent',
+                                text: '#004849'
+                            },
+                            disabled : function() {
+                                return nfCanvasUtils.canOperate(selection);
+                            },
+                            handler: {
+                                click: function() {
+                                    //execute the stop and open the configuration modal
+                                    $("#controller-configuration-status-bar").statusbar('hideButtons');
+                                    showDisableControllerServiceDialog(serviceTable, controllerServiceEntity);
+                                }
+                            }
+                        }]);
+                    }
+                }
+
                 // show the dialog
                 controllerServiceDialog.modal('setButtonModel', buttons);