NIFI-10814: Display description for selected flow (#6693)

* display description for selected flow

* NIFI-10814: add border when content overflows and increase height

* NIFI-10814: add padding to description

* NIFI-10814: remove duplicate CSS property from declaration block

* NIFI-10814: a few more CSS tweaks

This closes #6693

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/import-flow-version-dialog.jsp

@@ -45,6 +45,12 @@
                 <div id="import-flow-version-label"></div>
             </div>
         </div>
+        <div class="setting">
+            <div class="setting-name">Flow Description</div>
+            <div class="setting-field" id="import-flow-description-container">
+                <div id="import-flow-version-details"></div>
+            </div>
+        </div>
         <div id="import-flow-version-table"></div>
     </div>
 </div>

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

@@ -44,10 +44,9 @@ div.connection-terminal-label {
 }
 
 #relationship-names {
-    padding: 2px;
     height: 150px;
     overflow-y: auto;
-    overflow-x: hidden; 
+    overflow-x: hidden;
     border: 0 solid #cccccc;
     padding: 2px;
     padding-bottom: 0;

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

@@ -247,11 +247,24 @@ div.progress-label {
 #import-flow-version-table {
     overflow: hidden;
     position: absolute;
-    top: 190px;
+    top: 270px;
     left: 0px;
     right: 0px;
     bottom: 0px;
-    height: 225px;
+    height: 155px;
+}
+
+#import-flow-description-container {
+    border-color: rgba(0,0,0,0.12);
+    border-style: solid;
+    border-width: 0;
+    height: 48px;
+    overflow-y: auto;
+    width: calc(100% - 2px);
+}
+
+#import-flow-version-details {
+    padding: 2px;
 }
 
 #change-version-percent-complete {

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

@@ -820,6 +820,37 @@
         });
     };
 
+    /**
+     * Loads details for a specified flow.
+     *
+     * @param registryIdentifier
+     * @param bucketIdentifier
+     * @param flowIdentifier
+     */
+
+     var loadFlowDetails = function (registryIdentifier, bucketIdentifier, flowIdentifier) {
+        return $.ajax({
+            type: 'GET',
+            url: '../nifi-api/flow/registries/' + encodeURIComponent(registryIdentifier) + '/buckets/' + encodeURIComponent(bucketIdentifier) + '/flows/' + encodeURIComponent(flowIdentifier) + '/details',
+            dataType: 'json'
+        }).done(function (response) {
+            var flowVersionDetailsEl = $('#import-flow-version-details');
+            var flowDescriptionContainerEl = $('#import-flow-description-container');
+            if (response.versionedFlow.description) {
+                flowVersionDetailsEl.text(response.versionedFlow.description);
+                // show borders if appropriate
+                if (flowVersionDetailsEl.get(0).scrollHeight > Math.round(flowDescriptionContainerEl.innerHeight())) {
+                    flowDescriptionContainerEl.css('border-width', '1px');
+                } else {
+                    flowDescriptionContainerEl.css('border-width', '0');
+                }
+            } else {
+                flowVersionDetailsEl.text('No description provided.');
+                flowDescriptionContainerEl.css('border-width', '0');
+            }
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
     /**
      * Loads the flow versions for the specified registry, bucket, and flow.
      *
@@ -910,7 +941,8 @@
                 options: versionedFlows,
                 select: function (selectedFlow) {
                     if (nfCommon.isDefinedAndNotNull(selectedFlow.value)) {
-                        selectFlow(registryIdentifier, bucketIdentifier, selectedFlow.value)
+                        selectFlow(registryIdentifier, bucketIdentifier, selectedFlow.value);
+                        loadFlowDetails(registryIdentifier, bucketIdentifier, selectedFlow.value);
                     } else {
                         var importFlowVersionGrid = $('#import-flow-version-table').data('gridInstance');
                         var importFlowVersionData = importFlowVersionGrid.getData();