NIFI-259:

- Addressing some minor layout issues with the view state dialog.
- Ensuring appropriate locking when attempting to clear state.

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

@@ -43,6 +43,17 @@ public class NiFiServiceFacadeLock {
         }
     }
 
+    @Around("within(org.apache.nifi.web.NiFiServiceFacade+) && "
+        + "execution(* clear*(..))")
+    public Object clearLock(ProceedingJoinPoint proceedingJoinPoint) throws Throwable {
+        writeLock.lock();
+        try {
+            return proceedingJoinPoint.proceed();
+        } finally {
+            writeLock.unlock();
+        }
+    }
+
     @Around("within(org.apache.nifi.web.NiFiServiceFacade+) && "
             + "execution(* delete*(..))")
     public Object deleteLock(ProceedingJoinPoint proceedingJoinPoint) throws Throwable {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-state-dialog.jsp

@@ -20,13 +20,13 @@
         <div class="setting">
             <div class="setting-name">Name</div>
             <div class="setting-field">
-                <span id="component-state-name"></span>
+                <div id="component-state-name"></div>
             </div>
         </div>
         <div class="setting">
             <div class="setting-name">Description</div>
             <div class="setting-field">
-                <span id="component-state-description"></span>
+                <div id="component-state-description" class="ellipsis multiline"></div>
             </div>
         </div>
         <div id="component-state-filter-controls">

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

@@ -23,13 +23,13 @@
     position: absolute;
     overflow: hidden;
     width: 600px;
-    height: 500px;
     font-size: 10px;
     z-index: 1301;
     display: none;
 }
 
 #component-state-description {
+    width: 580px;
     height: 50px;
 }
 
@@ -79,10 +79,12 @@
 
 #clear-link-container {
     margin-top: 16px;
+    margin-bottom: 18px;
 }
 
 #clear-link.disabled {
     color: #bbb;
     font-style: italic;
     text-decoration: none !important;
+    cursor: default !important;
 }

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

@@ -224,27 +224,40 @@ nf.ComponentState = (function () {
             // clear state link
             $('#clear-link').on('click', function () {
                 if ($(this).hasClass('disabled') === false) {
-                    // clear the state
+                    var componentStateTable = $('#component-state-table');
-                    var revision = nf.Client.getRevision();
-                    var component = $('#component-state-table').data('component');
-                    $.ajax({
-                        type: 'POST',
-                        url: component.uri + '/state/clear-requests',
-                        data: {
-                            version: revision.version,
-                            clientId: revision.clientId
-                        },
-                        dataType: 'json'
-                    }).done(function (response) {
-                        // update the revision
-                        nf.Client.setRevision(response.revision);
 
-                        // clear the table
+                    // ensure there is state to clear
-                        clearTable();
+                    var componentStateGrid = componentStateTable.data('gridInstance');
+                    var stateEntryCount = componentStateGrid.getDataLength();
 
-                        // reload the table with no state
+                    if (stateEntryCount > 0) {
-                        loadComponentState()
+                        // clear the state
-                    }).fail(nf.Common.handleAjaxError);
+                        var revision = nf.Client.getRevision();
+                        var component = componentStateTable.data('component');
+                        $.ajax({
+                            type: 'POST',
+                            url: component.uri + '/state/clear-requests',
+                            data: {
+                                version: revision.version,
+                                clientId: revision.clientId
+                            },
+                            dataType: 'json'
+                        }).done(function (response) {
+                            // update the revision
+                            nf.Client.setRevision(response.revision);
+
+                            // clear the table
+                            clearTable();
+
+                            // reload the table with no state
+                            loadComponentState()
+                        }).fail(nf.Common.handleAjaxError);
+                    } else {
+                        nf.Dialog.showOkDialog({
+                            dialogContent: 'This component has no state to clear.',
+                            overlayBackground: false
+                        });
+                    }
                 }
             });
 
@@ -336,7 +349,7 @@ nf.ComponentState = (function () {
 
                 // populate the name/description
                 $('#component-state-name').text(component.name);
-                $('#component-state-description').text(componentState.stateDescription);
+                $('#component-state-description').text(componentState.stateDescription).ellipsis();
 
                 // store the component
                 componentStateTable.data('component', component);