NIFI-730:

- Updating the styling of the drop request status dialog.
- Rendering any errors that may have occurred.

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-client-dto/src/main/java/org/apache/nifi/web/api/dto/DropRequestDTO.java

@@ -36,6 +36,7 @@ public class DropRequestDTO {
 
     private Integer percentCompleted;
     private Boolean finished;
+    private String failureReason;
 
     private Integer currentCount;
     private Long currentSize;
@@ -124,6 +125,17 @@ public class DropRequestDTO {
         this.finished = finished;
     }
 
+    /**
+     * @return the reason, if any, that this drop request failed
+     */
+    public String getFailureReason() {
+        return failureReason;
+    }
+
+    public void setFailureReason(String failureReason) {
+        this.failureReason = failureReason;
+    }
+
     /**
      * @return the time this request was last updated
      */

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/src/main/java/org/apache/nifi/web/api/dto/DtoFactory.java

@@ -308,7 +308,10 @@ public final class DtoFactory {
         dto.setSubmissionTime(new Date(dropRequest.getRequestSubmissionTime()));
         dto.setLastUpdated(new Date(dropRequest.getLastUpdated()));
         dto.setState(dropRequest.getState().toString());
-        dto.setFinished(DropFlowFileState.COMPLETE.equals(dropRequest.getState()));
+        dto.setFailureReason(dropRequest.getFailureReason());
+        dto.setFinished(DropFlowFileState.COMPLETE.equals(dropRequest.getState())
+                || DropFlowFileState.CANCELED.equals(dropRequest.getState())
+                || DropFlowFileState.FAILURE.equals(dropRequest.getState()));
 
         final QueueSize dropped = dropRequest.getDroppedSize();
         dto.setDroppedCount(dropped.getObjectCount());

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

@@ -272,11 +272,16 @@ div.go-to-link {
 #drop-request-status-dialog {
     display: none;
     width: 400px;
-    height: 135px;
+    height: 125px;
     z-index: 1301;
 }
 
+#drop-request-status-message {
+    
+}
+
 #drop-request-percent-complete {
+    margin-top: 10px;
     width: 378px;
     border-radius: 0;
 }

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

@@ -34,7 +34,6 @@ nf.Actions = (function () {
 
         // configure the drop request status dialog
         $('#drop-request-status-dialog').modal({
-            headerText: 'Emptying queue',
             overlayBackground: false,
             handler: {
                 close: function () {
@@ -44,8 +43,14 @@ nf.Actions = (function () {
                     // update the progress bar
                     var label = $('<div class="progress-label"></div>').text('0%');
                     dropRequestProgressBar.progressbar('value', 0).append(label);
+                    
+                    // clear the current button model
+                    $('#drop-request-status-dialog').modal('setButtonModel', []);
                 }
             }
+        }).draggable({
+            containment: 'parent',
+            handle: '.dialog-header'
         });
     };
     
@@ -889,8 +894,11 @@ nf.Actions = (function () {
             
             // prompt the user before emptying the queue
             nf.Dialog.showYesNoDialog({
-                dialogContent: 'Are you sure you want to empty the queue? All data enqueued at the time of the request will be removed from the dataflow.',
+                headerText: 'Empty Queue',
+                dialogContent: 'Are you sure you want to empty this queue? All flowfiles waiting at the time of the request will be removed.',
                 overlayBackground: false,
+                noText: 'Cancel',
+                yesText: 'Empty',
                 yesHandler: function () {
                     // get the connection data
                     var connection = selection.datum();
@@ -916,7 +924,7 @@ nf.Actions = (function () {
 
                     // update the button model of the drop request status dialog
                     $('#drop-request-status-dialog').modal('setButtonModel', [{
-                            buttonText: 'Cancel',
+                            buttonText: 'Stop',
                             handler: {
                                 click: function () {
                                     cancelled = true;
@@ -944,9 +952,26 @@ nf.Actions = (function () {
                                 // report the results of this drop request
                                 dropRequest = response.dropRequest;
                                 
-                                // parse the dropped stats to render results
+                                // build the results
-                                var tokens = dropRequest.dropped.split(/ \/ /);
+                                var droppedTokens = dropRequest.dropped.split(/ \/ /);
-                                var results = $('<div></div>').text('Successfully removed ' + tokens[0] + ' (' + tokens[1] + ') FlowFiles');
+                                var results = $('<div></div>');
+                                $('<span class="label"></span>').text(droppedTokens[0]).appendTo(results);
+                                $('<span></span>').text(' FlowFiles (' + droppedTokens[1] + ')').appendTo(results);
+                                
+                                // if the request did not complete, include the original
+                                if (dropRequest.percentCompleted < 100) {
+                                    var originalTokens = dropRequest.original.split(/ \/ /);
+                                    $('<span class="label"></span>').text(' out of ' + originalTokens[0]).appendTo(results);
+                                    $('<span></span>').text(' (' + originalTokens[1] + ')').appendTo(results);
+                                }
+                                $('<span></span>').text(' were removed from the queue.').appendTo(results);
+                                
+                                // if this request failed so the error
+                                if (nf.Common.isDefinedAndNotNull(dropRequest.failureReason)) {
+                                    $('<br/><br/><span></span>').text(dropRequest.failureReason).appendTo(results);
+                                }
+                                
+                                // display the results
                                 nf.Dialog.showOkDialog({
                                     dialogContent: results,
                                     overlayBackground: false

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

@@ -47,8 +47,9 @@ $(document).ready(function () {
     $('#nf-yes-no-dialog').modal({
         handler: {
             close: function () {
-                // clear the content
+                // clear the content and reset the button model
                 $('#nf-yes-no-dialog-content').empty();
+                $('#nf-yes-no-dialog').modal('setButtonModel', []);
             }
         }
     }).draggable({
@@ -91,7 +92,9 @@ nf.Dialog = (function () {
             options = $.extend({
                 headerText: '',
                 dialogContent: '',
-                overlayBackgrond: true
+                overlayBackgrond: true,
+                yesText: 'Yes',
+                noText: 'No'
             }, options);
 
             // add the content to the prompt
@@ -100,7 +103,7 @@ nf.Dialog = (function () {
 
             // update the button model
             $('#nf-yes-no-dialog').modal('setButtonModel', [{
-                    buttonText: 'Yes',
+                    buttonText: options.yesText,
                     handler: {
                         click: function () {
                             // close the dialog
@@ -111,7 +114,7 @@ nf.Dialog = (function () {
                         }
                     }
                 }, {
-                    buttonText: 'No',
+                    buttonText: options.noText,
                     handler: {
                         click: function () {
                             // close the dialog