NIFI-10538: UI updates for making RegistryClient an extension point (#6437)

* init commit

* remove test string

* display only class name for types combo

* remove commented code

* add UI support for dynamic properties

* add support for controller services

* address review feedback:

* fix syntax error
* remove console logs
* move contents of editRegistry into callback
* add name and description fields back to edit dialog

* add referencing component logic for registry clients

* implement reload logic

* more review findings
* increase size of description textarea in config
* remove location column from registry table
* remove commented out code

* post-rebase tweaks
* change if condition from assignment to evaluation
* add missing semicolons
* refactor new registry initialization into function

* more feedback addressed
* fix rebase error around controller service reference
* render registry references in their own list
* remove duplicate updateValidationError function
* remove TODO comment

* expose reload through nfSettings public variable

* show add registry dialog only after available types returns

* fix css class name

This closes #6437

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp

@@ -129,6 +129,7 @@
         <jsp:include page="/WEB-INF/partials/canvas/revert-local-changes-dialog.jsp"/>
         <jsp:include page="/WEB-INF/partials/canvas/show-local-changes-dialog.jsp"/>
         <jsp:include page="/WEB-INF/partials/canvas/registry-configuration-dialog.jsp"/>
+        <jsp:include page="/WEB-INF/partials/canvas/new-registry-client-dialog.jsp"/>
         <div id="canvas-container" class="unselectable"></div>
         <div id="canvas-tooltips">
             <div id="processor-tooltips"></div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-registry-client-dialog.jsp

@@ -0,0 +1,40 @@
+<%--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+--%>
+<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<div id="new-registry-client-dialog" layout="column" class="hidden medium-dialog">
+    <div class="dialog-content">
+        <div class="setting">
+            <div class="setting-name">Name</div>
+            <div class="setting-field">
+                <span id="new-registry-id" class="hidden"></span>
+                <input type="text" id="new-registry-name" class="setting-input"/>
+            </div>
+        </div>
+        <div class="setting">
+            <div class="setting-name">Type</div>
+            <div class="setting-field">
+                <div id="new-registry-type-combo"></div>
+            </div>
+        </div>
+        <div class="setting">
+            <div class="setting-name">Description</div>
+            <div class="setting-field">
+                <textarea id="new-registry-description" class="setting-input"></textarea>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -15,26 +15,45 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="registry-configuration-dialog" layout="column" class="hidden medium-dialog">
+<div id="registry-configuration-dialog" layout="column" class="hidden large-dialog">
+    <div>
+        <div class="clear"></div>
+    </div>
     <div class="dialog-content">
+        <div id="registry-configuration-tabs" class="registration-config-tabs tab-container"></div>
+        <div id="registries-tabs-content">
+            <div id="registry-configuration-settings-tab-content">
+                <div id="registry-fields">
+                    <div class="setting">
+                        <div class="setting-name">Id</div>
+                        <div class="setting-field">
+                            <span id="registry-id-config"></span>
+                        </div>
+                    </div>
                     <div class="setting">
                         <div class="setting-name">Name</div>
                         <div class="setting-field">
-                <span id="registry-id" class="hidden"></span>
+                            <input type="text" id="registry-name-config" class="setting-input"/>
-                <input type="text" id="registry-name" class="setting-input"/>
                         </div>
                     </div>
                     <div class="setting">
-            <div class="setting-name">URL</div>
+                        <div class="setting-name">Type</div>
                         <div class="setting-field">
-                <input type="text" id="registry-location" class="setting-input" placeholder="https://remotehost:8443"/>
+                            <span id="registry-type-config"></span>
                         </div>
                     </div>
                     <div class="setting">
                         <div class="setting-name">Description</div>
                         <div class="setting-field">
-                <textarea id="registry-description" class="setting-input"></textarea>
+                            <textarea id="registry-description-config" class="setting-input"></textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="registry-configuration-properties-tab-content">
+                <div id="registry-properties"></div>
             </div>
         </div>
     </div>
 </div>
+<div id="new-registry-property-container"></div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp

@@ -63,6 +63,7 @@
                 <div id="reporting-tasks-table" class="settings-table"></div>
             </div>
             <div id="registries-tab-content" class="configuration-tab controller-settings-table">
+                <div class="registry-properties"></div>
                 <div id="registries-table" class="settings-table"></div>
             </div>
             <div id="parameter-providers-tab-content" class="configuration-tab controller-settings-table">

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

@@ -434,7 +434,12 @@ div.slick-cell div.overridden {
     Registry configuration dialog
  */
 
-#registry-description {
+#registry-description,
+#registry-description-config {
+    height: 85px;
+}
+
+#new-registry-description {
     height: 85px;
 }
 

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

@@ -1783,7 +1783,10 @@
 
                 // get the history
                 var history = table.data('history');
-                var propertyHistory = history[property];
+                var propertyHistory;
+                if (history) {
+                    propertyHistory = history[property];
+                }
 
                 // format the tooltip
                 var propertyTooltip = nfCommon.formatPropertyTooltip(propertyDescriptor, propertyHistory);

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

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

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

@@ -26,14 +26,13 @@
                 'nf.Dialog',
                 'nf.Storage',
                 'nf.Client',
-                'nf.Settings',
                 'nf.UniversalCapture',
                 'nf.CustomUi',
                 'nf.Verify',
                 'nf.CanvasUtils',
                 'nf.Processor'],
-            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfSettings, nfUniversalCapture, nfCustomUi, nfVerify, nfCanvasUtils, nfProcessor) {
+            function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfUniversalCapture, nfCustomUi, nfVerify, nfCanvasUtils, nfProcessor) {
-                return (nf.ControllerService = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfSettings, nfUniversalCapture, nfVerify, nfCustomUi, nfCanvasUtils, nfProcessor));
+                return (nf.ControllerService = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfUniversalCapture, nfVerify, nfCustomUi, nfCanvasUtils, nfProcessor));
             });
     } else if (typeof exports === 'object' && typeof module === 'object') {
         module.exports = (nf.ControllerService =
@@ -44,7 +43,6 @@
                 require('nf.Dialog'),
                 require('nf.Storage'),
                 require('nf.Client'),
-                require('nf.Settings'),
                 require('nf.UniversalCapture'),
                 require('nf.CustomUi'),
                 require('nf.Verify'),
@@ -58,19 +56,19 @@
             root.nf.Dialog,
             root.nf.Storage,
             root.nf.Client,
-            root.nf.Settings,
             root.nf.UniversalCapture,
             root.nf.CustomUi,
             root.nf.Verify,
             root.nf.CanvasUtils,
             root.nf.Processor);
     }
-}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfSettings, nfUniversalCapture, nfCustomUi, nfVerify, nfCanvasUtils, nfProcessor) {
+}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfUniversalCapture, nfCustomUi, nfVerify, nfCanvasUtils, nfProcessor) {
     'use strict';
 
     var nfControllerServices,
         nfReportingTask,
-        nfParameterProvider;
+        nfParameterProvider,
+        nfSettings;
 
     var config = {
         edit: 'edit',
@@ -262,6 +260,14 @@
                 if (referencingComponentState.length) {
                     updateValidationErrors(referencingComponentState, reference);
                 }
+            } else if (reference.referenceType === 'FlowRegistryClient') {
+                // reload
+                nfSettings.reloadRegistry(reference.id);
+                // update the validation errors of this registry
+                var referencingComponentState = $('div.' + reference.id + '-state');
+                if (referencingComponentState.length) {
+                    updateValidationErrors(referencingComponentState, reference);
+                }
             } else {
                 // reload the referencing services
                 reloadControllerService(serviceTable, reference.id);
@@ -491,6 +497,7 @@
         var processors = $('<ul class="referencing-component-listing clear"></ul>');
         var services = $('<ul class="referencing-component-listing clear"></ul>');
         var tasks = $('<ul class="referencing-component-listing clear"></ul>');
+        var registries = $('<ul class="referencing-component-listing clear"></ul>');
         var providers = $('<ul class="referencing-component-listing clear"></ul>');
         var unauthorized = $('<ul class="referencing-component-listing clear"></ul>');
         $.each(referencingComponents, function (_, referencingComponentEntity) {
@@ -643,7 +650,7 @@
                         // close the dialog and shell
                         referenceContainer.closest('.dialog').modal('hide');
 
-                        $('#settings-tabs').find('li:eq(4)').click();
+                        $('#settings-tabs').find('li:eq(5)').click();
 
                         // adjust the table size
                         parameterProvidersGrid.resizeCanvas();
@@ -670,6 +677,44 @@
                     var providerItem = $('<li></li>').append(providerState).append(providerBulletins).append(parameterProviderLink).append(providerType);
 
                     providers.append(providerItem);
+                } else if (referencingComponent.referenceType === 'FlowRegistryClient') {
+                    var registryLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
+                        var registryGrid = $('#registries-table').data('gridInstance');
+                        var registryData = registryGrid.getData();
+
+                        // select the selected row
+                        var row = registryData.getRowById(referencingComponent.id);
+                        registryGrid.setSelectedRows([row]);
+                        registryGrid.scrollRowIntoView(row);
+
+                        // select the reporting task tab
+                        $('#settings-tabs').find('li:nth-child(4)').click();
+
+                        // close the dialog and shell
+                        referenceContainer.closest('.dialog').modal('hide');
+                    });
+
+                    // registry state - used to show the validation errors
+                    var registryState = $('<div class="referencing-component-state invalid"></div>').addClass(referencingComponent.id + '-state');
+
+                    if (nfCommon.isEmpty(referencingComponent.validationErrors)) {
+                        registryState.hide();
+                    } else {
+                        updateValidationErrors(registryState, referencingComponent);
+                    }
+
+                    // type
+                    var registryType = $('<span class="referencing-component-type"></span>').text(nfCommon.substringAfterLast(referencingComponent.type, '.'));
+
+                    // active thread count
+                    var registryActiveThreadCount = $('<span class="referencing-component-active-thread-count"></span>').addClass(referencingComponent.id + '-active-threads');
+                    if (nfCommon.isDefinedAndNotNull(referencingComponent.activeThreadCount) && referencingComponent.activeThreadCount > 0) {
+                        registryActiveThreadCount.text('(' + referencingComponent.activeThreadCount + ')');
+                    }
+
+                    // registry item
+                    var registryItem = $('<li></li>').append(registryState).append(registryLink).append(registryType).append(registryActiveThreadCount);
+                    registries.append(registryItem);
                 }
             }
         });
@@ -701,6 +746,7 @@
         // create blocks for each type of component
         createReferenceBlock('Processors', processors);
         createReferenceBlock('Reporting Tasks', tasks);
+        createReferenceBlock('Registry Clients', registries);
         createReferenceBlock('Controller Services', services);
         createReferenceBlock('Parameter Providers', providers);
         createReferenceBlock('Unauthorized', unauthorized);
@@ -1037,7 +1083,7 @@
             var referencingComponents = service.referencingComponents;
             $.each(referencingComponents, function (_, referencingComponentEntity) {
                 var referencingComponent = referencingComponentEntity.component;
-                if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask' || referencingComponent.referenceType === 'ParameterProvider') {
+                if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask' || referencingComponent.referenceType === 'ParameterProvider' || referencingComponent.referenceType === 'FlowRegistryClient') {
                     referencingSchedulableComponents.push(referencingComponent.id);
                 }
             });
@@ -1842,10 +1888,11 @@
         /**
          * Initializes the controller service configuration dialog.
          */
-        init: function (nfControllerServicesRef, nfReportingTaskRef, nfParameterProviderRef) {
+        init: function (nfControllerServicesRef, nfReportingTaskRef, nfParameterProviderRef, nfSettingsRef) {
             nfControllerServices = nfControllerServicesRef;
             nfReportingTask = nfReportingTaskRef;
             nfParameterProvider = nfParameterProviderRef;
+            nfSettings = nfSettingsRef;
 
             // initialize the configuration dialog tabs
             $('#controller-service-configuration-tabs').tabbs({

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

@@ -206,7 +206,8 @@
                     registries.push({
                         text: registry.name,
                         value: registry.id,
-                        description: nfCommon.escapeHtml(registry.description)
+                        description: nfCommon.escapeHtml(registry.description),
+                        disabled: registry.validationStatus !== 'VALID'
                     });
                 });
             } else {

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

@@ -91,7 +91,8 @@
             registries: '../nifi-api/controller/registry-clients',
             createParameterProvider: '../nifi-api/controller/parameter-providers',
             parameterProviderTypes: '../nifi-api/flow/parameter-provider-types',
-            parameterProviders: '../nifi-api/flow/parameter-providers'
+            parameterProviders: '../nifi-api/flow/parameter-providers',
+            registryTypes: '../nifi-api/controller/registry-types'
         }
     };
 
@@ -634,9 +635,10 @@
     };
 
     /**
-     * Adds the specified entity.
+     * Adds the specified registry entity.
      */
     var addRegistry = function () {
+        var selectedRegistryType = $('#new-registry-type-combo').combo('getSelectedOption');
         var registryEntity = {
             'revision': nfClient.getRevision({
                 'revision': {
@@ -645,9 +647,9 @@
             }),
             'disconnectedNodeAcknowledged': nfStorage.isDisconnectionAcknowledged(),
             'component': {
-                'name': $('#registry-name').val(),
+                'name': $('#new-registry-name').val(),
-                'uri': $('#registry-location').val(),
+                'description': $('#new-registry-description').val(),
-                'description': $('#registry-description').val()
+                'type': selectedRegistryType.value
             }
         };
 
@@ -677,6 +679,7 @@
 
             // hide the dialog
             $('#registry-configuration-dialog').modal('hide');
+            $('#new-registry-client-dialog').modal('hide');
         }).fail(nfErrorHandler.handleConfigurationUpdateAjaxError);
 
 
@@ -744,6 +747,7 @@
     var updateRegistry = function (registryId) {
         var registriesGrid = $('#registries-table').data('gridInstance');
         var registriesData = registriesGrid.getData();
+        var properties = $('#registry-properties').propertytable('marshalProperties');
 
         var registryEntity = registriesData.getItemById(registryId);
         var requestRegistryEntity = {
@@ -751,13 +755,17 @@
             'disconnectedNodeAcknowledged': nfStorage.isDisconnectionAcknowledged(),
             'component': {
                 'id': registryId,
-                'name': $('#registry-name').val(),
+                'name': $('#registry-name-config').val(),
-                'uri': $('#registry-location').val(),
+                'description': $('#registry-description-config').val()
-                'description': $('#registry-description').val()
             }
         };
 
-        // add the new reporting task
+        // set the properties
+        if ($.isEmptyObject(properties) === false) {
+            requestRegistryEntity['component']['properties'] = properties;
+        }
+
+        // add the new registry
         var updateRegistry = $.ajax({
             type: 'PUT',
             url: registryEntity.uri,
@@ -766,7 +774,7 @@
             contentType: 'application/json'
         }).done(function (registryEntity) {
             // add the item
-            registriesData.updateItem(registryId, $.extend({
+            registriesData.updateItem(registryEntity.id, $.extend({
                 type: 'Registry'
             }, registryEntity));
 
@@ -1170,10 +1178,10 @@
             scrollableContentStyle: 'scrollable',
             handler: {
                 close: function () {
-                    $('#registry-id').text('');
+                    $('#registry-id-config').text('');
-                    $('#registry-name').val('');
+                    $('#registry-name-config').val('');
-                    $('#registry-location').val('');
+                    $('#registry-type-config').val('');
-                    $('#registry-description').val('');
+                    $('#registry-description-config').val('');
                 }
             }
         });
@@ -1382,7 +1390,7 @@
                                 type: nfCommon.formatType(documentedType),
                                 bundle: nfCommon.formatBundle(documentedType.bundle),
                                 explanation: nfCommon.escapeHtml(explicitRestriction.explanation)
-                            })
+                            });
                         });
                     } else {
                         // update required permissions
@@ -1533,7 +1541,8 @@
                             $(this).modal('hide');
                         }
                     }
-                }],
+                }
+            ],
             handler: {
                 close: function () {
                     // clear the selected row
@@ -1881,16 +1890,38 @@
         });
     };
 
-    var initRegistriesTable = function () {
+    var initNewRegistryDialog = function () {
-
+        $('#new-registry-client-dialog').modal({
-        var locationFormatter = function (row, cell, value, columnDef, dataContext) {
+            headerText: 'Add Registry Client',
-            if (!dataContext.permissions.canRead) {
+            buttons: [{
-                return '<span class="blank">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+                buttonText: 'Add',
+                color: {
+                    base: '#728E9B',
+                    hover: '#004849',
+                    text: '#ffffff'
+                },
+                handler: {
+                    click: function () {
+                        addRegistry();
                     }
-
+                }
-            return nfCommon.escapeHtml(dataContext.component.uri);
+            }, {
+                buttonText: 'Cancel',
+                color: {
+                    base: '#E3E8EB',
+                    hover: '#C7D2D7',
+                    text: '#004849'
+                },
+                handler: {
+                    click: function () {
+                        $(this).modal('hide');
+                    }
+                }
+            }]
+        });
     };
 
+    var initRegistriesTable = function () {
         var descriptionFormatter = function (row, cell, value, columnDef, dataContext) {
             if (!dataContext.permissions.canRead) {
                 return '<span class="blank">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
@@ -1913,8 +1944,42 @@
             return markup;
         };
 
+        var moreRegistryDetails = function (row, cell, value, columnDef, dataContext) {
+            if (!dataContext.permissions.canRead) {
+                return '';
+            }
+
+            var markup = '';
+
+            var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
+            var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
+
+            if (hasErrors) {
+                markup += '<div class="pointer has-errors fa fa-warning"></div>';
+            }
+
+            if (hasBulletins) {
+                markup += '<div class="has-bulletins fa fa-sticky-note-o"></div>';
+            }
+
+            if (hasErrors || hasBulletins) {
+                markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
+            }
+
+            return markup;
+        };
+
         // define the column model for the reporting tasks table
         var registriesColumnModel = [
+            {
+                id: 'moreDetails',
+                name: '&nbsp;',
+                resizable: false,
+                formatter: moreRegistryDetails,
+                sortable: true,
+                width: 90,
+                maxWidth: 90
+            },
             {
                 id: 'name',
                 name: 'Name',
@@ -1923,14 +1988,6 @@
                 sortable: true,
                 resizable: true
             },
-            {
-                id: 'uri',
-                name: 'Location',
-                field: 'uri',
-                formatter: locationFormatter,
-                sortable: true,
-                resizable: true
-            },
             {
                 id: 'description',
                 name: 'Description',
@@ -1976,6 +2033,38 @@
             }, registriesData);
         });
 
+        // add tooltip for validation errors
+        $('#registries-table').data('gridInstance', registriesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+            var errorIcon = $(this).find('div.has-errors');
+            if (errorIcon.length && !errorIcon.data('qtip')) {
+                var registryId = $(this).find('span.row-id').text();
+
+                // get the registry
+                var registryEntity = registriesData.getItemById(registryId);
+
+                // format the errors
+                var tooltip = nfCommon.formatUnorderedList(registryEntity.component.validationErrors);
+
+                // show the tooltip
+                if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                    errorIcon.qtip($.extend({},
+                        nfCommon.config.tooltipConfig,
+                        {
+                            content: tooltip,
+                            position: {
+                                target: 'mouse',
+                                viewport: $('#shell-container'),
+                                adjust: {
+                                    x: 8,
+                                    y: 8,
+                                    method: 'flipinvert flipinvert'
+                                }
+                            }
+                        }));
+                }
+            }
+        });
+
         // configure a click listener
         registriesGrid.onClick.subscribe(function (e, args) {
             var target = $(e.target);
@@ -1990,24 +2079,7 @@
                 } else if (target.hasClass('remove-registry')) {
                     promptToRemoveRegistry(registryEntity);
                 }
-            } else if (registriesGrid.getColumns()[args.cell].id === 'moreDetails') {
+            } else if (registriesGrid.getColumns()[args.cell].id === 'moreDetails') { }
-                // if (target.hasClass('view-reporting-task')) {
-                //     nfReportingTask.showDetails(reportingTaskEntity);
-                // } else if (target.hasClass('reporting-task-usage')) {
-                //     // close the settings dialog
-                //     $('#shell-close-button').click();
-                //
-                //     // open the documentation for this reporting task
-                //     nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                //         select: reportingTaskEntity.component.type,
-                //         group: reportingTaskEntity.component.bundle.group,
-                //         artifact: reportingTaskEntity.component.bundle.artifact,
-                //         version: reportingTaskEntity.component.bundle.version
-                //     })).done(function () {
-                //         nfSettings.showSettings();
-                //     });
-                // }
-            }
         });
 
         // wire up the dataview to the grid
@@ -2288,11 +2360,15 @@
      * @param registryEntity
      */
     var editRegistry = function (registryEntity) {
+        reloadRegistryInfo(registryEntity.id).done(function (reloadResponse) {
+            var properties = reloadResponse.component.properties;
+            var descriptors = reloadResponse.component.descriptors;
+
             // populate the dialog
-        $('#registry-id').text(registryEntity.id);
+            $('#registry-id-config').text(reloadResponse.id);
-        $('#registry-name').val(registryEntity.component.name);
+            $('#registry-name-config').val(reloadResponse.component.name);
-        $('#registry-location').val(registryEntity.component.uri);
+            $('#registry-type-config').text(reloadResponse.component.type);
-        $('#registry-description').val(registryEntity.component.description);
+            $('#registry-description-config').val(reloadResponse.component.description);
 
             // show the dialog
             $('#registry-configuration-dialog').modal('setHeaderText', 'Edit Registry Client').modal('setButtonModel', [{
@@ -2304,7 +2380,7 @@
                 },
                 handler: {
                     click: function () {
-                    updateRegistry(registryEntity.id);
+                        updateRegistry(reloadResponse.id);
                     }
                 }
             }, {
@@ -2320,6 +2396,11 @@
                     }
                 }
             }]).modal('show');
+
+            $('#registry-properties').propertytable('clear');
+            $('#registry-properties').propertytable('loadProperties', properties, descriptors);
+            $('#registry-configuration-dialog').data('registryDetails', reloadResponse);
+        });
     };
 
     /**
@@ -2436,7 +2517,7 @@
         var parameterProviders = loadParameterProviders();
 
         // return a deferred for all parts of the settings
-        return $.when(settings, controllerServicesXhr, reportingTasks, parameterProviders).done(function (settingsResult, controllerServicesResult) {
+        return $.when(settings, controllerServicesXhr, reportingTasks, registries, parameterProviders).done(function (settingsResult, controllerServicesResult) {
             var controllerServicesResponse = controllerServicesResult[0];
 
             // update the current time
@@ -2532,6 +2613,99 @@
         });
     };
 
+    /**
+     * Loads available registry types.
+     */
+    var loadRegistryTypes = function () {
+        return $.ajax({
+            type: 'GET',
+            url: config.urls.registryTypes,
+            dataType: 'json'
+        }).done(function (response) {
+            var regTypeOptions = [];
+            response.flowRegistryClientTypes.forEach(function (type) {
+                regTypeOptions.push({
+                    text: nfCommon.substringAfterLast(type.type, '.'),
+                    value: type.type,
+                    description: type.description || ''
+                });
+            });
+
+            $('#new-registry-type-combo').combo({
+                options: regTypeOptions
+            });
+        });
+    };
+
+    /**
+     * Determines whether the user has made any changes to the registry configuration
+     * that needs to be saved.
+     */
+     var isSaveRequired = function () {
+        var entity = $('#registry-configuration-dialog').data('registryDetails');
+        // determine if any registry settings have changed
+
+        if ($('#registry-name-config').val() !== entity.component['name']) {
+            return true;
+        }
+        if ($('#registry-description-config').val() !== entity.component['description']) {
+            return true;
+        }
+
+        return $('#registry-properties').propertytable('isSaveRequired');
+    };
+
+    /**
+     * Goes to a service configuration from the property table.
+     */
+     var goToServiceFromProperty = function () {
+        return $.Deferred(function (deferred) {
+            // close all fields currently being edited
+            $('#registry-properties').propertytable('saveRow');
+
+            // determine if changes have been made
+            if (isSaveRequired()) {
+                // see if those changes should be saved
+                nfDialog.showYesNoDialog({
+                    headerText: 'Save',
+                    dialogContent: 'Save changes before going to this Controller Service?',
+                    noHandler: function () {
+                        deferred.resolve();
+                    },
+                    yesHandler: function () {
+                        var registry = $('#registry-configuration-dialog').data('registryDetails');
+                        updateRegistry(registry.id).done(function () {
+                            deferred.resolve();
+                        }).fail(function () {
+                            deferred.reject();
+                        });
+                    }
+                });
+            } else {
+                deferred.resolve();
+            }
+        }).promise();
+    };
+
+    /**
+     * Gets a property descriptor for the registry currently being configured.
+     *
+     * @param {type} propertyName
+     * @param {type} sensitive Requested sensitive status
+     */
+     var getRegistryPropertyDescriptor = function (propertyName, sensitive) {
+        var details = $('#registry-configuration-dialog').data('registryDetails');
+        return $.ajax({
+            type: 'GET',
+            url: details.uri + '/descriptors',
+            data: {
+                propertyName: propertyName,
+                sensitive: sensitive
+            },
+            dataType: 'json'
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
     /**
      * Shows the process group configuration.
      */
@@ -2556,6 +2730,39 @@
         $('#settings-save').mouseout();
     };
 
+    /**
+     * Renders the specified registry.
+     *
+     * @param {object} reportingTask
+     */
+     var renderRegistry = function (registryEntity) {
+        // get the table and update the row accordingly
+        var registryGrid = $('#registries-table').data('gridInstance');
+        var registryData = registryGrid.getData();
+        registryData.updateItem(registryEntity.id, $.extend({
+            type: 'Registry'
+        }, registryEntity));
+    };
+
+    /**
+         * Reloads the specified registry.
+         *
+         * @param {string} id
+         */
+     var reloadRegistryInfo = function (id) {
+        var registryGrid = $('#registries-table').data('gridInstance');
+        var registryData = registryGrid.getData();
+        var registryEntity = registryData.getItemById(id);
+
+        return $.ajax({
+            type: 'GET',
+            url: registryEntity.uri,
+            dataType: 'json'
+        }).done(function (response) {
+            renderRegistry(response);
+        }).fail(nfErrorHandler.handleAjaxError);
+    };
+
     var nfSettings = {
         /**
          * Initializes the settings page.
@@ -2662,34 +2869,16 @@
                     // set the initial focus
                     $('#reporting-task-type-filter').focus();
                 } else if (selectedTab === 'Registry Clients') {
-                    $('#registry-configuration-dialog').modal('setHeaderText', 'Add Registry Client').modal('setButtonModel', [{
+                    // clear previous values
-                        buttonText: 'Add',
+                    $('#new-registry-name').val('');
-                        color: {
+                    $('#new-registry-description').val('');
-                            base: '#728E9B',
+
-                            hover: '#004849',
+                    loadRegistryTypes().done(function () {
-                            text: '#ffffff'
+                        $('#new-registry-client-dialog').modal('show');
-                        },
-                        handler: {
-                            click: function () {
-                                addRegistry();
-                            }
-                        }
-                    }, {
-                        buttonText: 'Cancel',
-                        color: {
-                            base: '#E3E8EB',
-                            hover: '#C7D2D7',
-                            text: '#004849'
-                        },
-                        handler: {
-                            click: function () {
-                                $(this).modal('hide');
-                            }
-                        }
-                    }]).modal('show');
 
                         // set the initial focus
-                    $('#registry-name').focus();
+                        $('#new-registry-name').focus();
+                    });
                 } else if (selectedTab === 'Parameter Providers') {
                     $('#new-parameter-provider-dialog').modal('show');
 
@@ -2711,14 +2900,55 @@
                 }
             });
 
+            // initialize registry property table
+            $('#registry-properties').propertytable({
+                readOnly: false,
+                supportsGoTo: true,
+                dialogContainer: '#new-registry-property-container',
+                descriptorDeferred: getRegistryPropertyDescriptor,
+                controllerServiceCreatedDeferred: function (response) {
+                    var controllerServicesUri = config.urls.api + '/flow/controller/controller-services';
+                    return nfControllerServices.loadControllerServices(controllerServicesUri, $('#controller-services-table'));
+                },
+                goToServiceDeferred: goToServiceFromProperty
+            });
+
+            // initialize the settings tabs
+            $('#registry-configuration-tabs').tabbs({
+                tabStyle: 'tab',
+                selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
+                tabs: [{
+                    name: 'Settings',
+                    tabContentId: 'registry-configuration-settings-tab-content'
+                }, {
+                    name: 'Properties',
+                    tabContentId: 'registry-configuration-properties-tab-content'
+                }],
+                select: function () {
+                    var tab = $(this).text();
+                    if (tab === 'Properties') {
+                        $('#registry-properties').propertytable('resetTableSize');
+                    }
+                }
+            });
+
             // initialize each tab
             initGeneral();
             nfControllerServices.init(getControllerServicesTable(), nfSettings.showSettings);
             initReportingTasks();
             initRegistriesTable();
+            initNewRegistryDialog();
             initParameterProvidersTable();
         },
 
+        /**
+         * Update the size of the grid based on its container's current size.
+         */
+        reloadRegistry: function (id) {
+            return reloadRegistryInfo(id);
+        },
+
         /**
          * Update the size of the grid based on its container's current size.
          */