AMBARI-491. Service Reconfiguration screens should respect the 'reconfigurable' attributes set in ConfigProperties table (Contributed by Yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/branches/ambari-186@1347326 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -6,6 +6,8 @@ characters wide.
 
 Release 0.1.x - unreleased
 
+  AMBARI-491. Service Reconfiguration screens should respect the "reconfigurable" attributes set in ConfigProperties table (Yusaku via Vikram)
+
   AMBARI-490. Highlight the required parameters in Step 6 "Custom Config" of the Cluster Init Wizard (Yusaku via Vikram)
 
   AMBARI-489. Call out HMC master node in the topology and node assignments (Yusaku via Vikram)

hmc/js/configureServices.js

@@ -2,17 +2,17 @@ var globalOptionsInfo = null;
            
 globalYui.one('#configureClusterAdvancedSubmitButtonId').on('click',function (e) {
 
-  var retval = checkPasswordCorrectness();
+  var retval = configureServicesUtil.checkPasswordCorrectness();
   if (retval.passwdMatched !== true) {
     setFormStatus(retval.errorString, true, true);
     document.getElementById(retval.focusOn).scrollIntoView();
     return;
   }
-  cleanupClassesForPasswordErrors();
+  configureServicesUtil.cleanupClassesForPasswordErrors();
  
   clearFormStatus();
-  clearErrorReasons(opts); 
-  var opts = generateUserOpts();
+  configureServicesUtil.clearErrorReasons(opts); 
+  var opts = configureServicesUtil.generateUserOpts();
 
   e.target.set('disabled', true);
   var url = "../php/frontend/configureServices.php?clusterName="+globalOptionsInfo.clusterName;
@@ -21,25 +21,21 @@ globalYui.one('#configureClusterAdvancedSubmitButtonId').on('click',function (e)
   var thisScreenId = "#configureClusterAdvancedCoreDivId";
   var nextScreenId = "#deployCoreDivId";
   var nextScreenRenderFunction = renderDeploy;
-  submitDataAndProgressToNextScreen(url, requestData, submitButton, thisScreenId, nextScreenId, nextScreenRenderFunction, handleConfigureServiceErrors);
+  submitDataAndProgressToNextScreen(url, requestData, submitButton, thisScreenId, nextScreenId, nextScreenRenderFunction, configureServicesUtil.handleConfigureServiceErrors);
 });
 
 // register an event handler for the password fields
 globalYui.one("#configureClusterAdvancedDynamicRenderDivId").delegate(
   {
     'keyup' : function (passwordEvent) {
-      checkPasswordCorrectness();
+      configureServicesUtil.checkPasswordCorrectness();
     }
   },
   "input[type=password]"
 );
 
 function renderConfigureServicesInternal (optionsInfo) {
-  globalPasswordsArray = [];
-
-  var optionsSummary = constructDOM(optionsInfo);
- 
-  globalYui.one("#configureClusterAdvancedDynamicRenderDivId").setContent( optionsSummary );
+  globalYui.one("#configureClusterAdvancedDynamicRenderDivId").setContent(configureServicesUtil.getOptionsSummaryMarkup(optionsInfo, false));
   hideLoadingImg();
   globalYui.one("#configureClusterAdvancedCoreDivId").setStyle("display", "block");
 }

hmc/js/configureServicesUtils.js

@@ -1,232 +1,239 @@
+function ConfigureServicesUtil() {
 
-/////////////////// Render related functions /////////////////////////////
-
-var globalPasswordsArray = [];
-
-function generateDivForService (option, type, service, property, unit, displayAttributes) {
-	
-  var unitClass = (unit != null) ? 'unit' : '';
-  var unitLabel = (unit != null && unit != 'int') ? unit : '';
-  
-  var readOnlyFlag= false;
-  if (displayAttributes != null && displayAttributes.editable != null
-      && !displayAttributes.editable) {
-    readOnlyFlag = true;
-  }
-
-  var retString = '<div class="formElement">' +
-    '<label for="' + service + '">' + option['displayName'] + '</label>' +
-    //((unitString != '') ? '<div class="input-append">' : '') +
-    '<input class="' + unitClass + '" type="' + type + '" id="' + property + '" name="' + service + '" value="' + option['value'] + '"';
-  if (readOnlyFlag) {
-    retString += ' readonly="readonly" ';
-  }
-
-  retString += '><label class="unit">' + unitLabel + '</label>' + 
-    '<div class="contextualHelp">' + option['description'] + '</div>' +
-    //((unitString != '') ? '</div>' : '') +
-    '<div class="formInputErrorReason" id="' + property + 'ErrorReason' + '"></div>' +
-    '</div>';
-  if (type == "password") {
-    retString += '<div class="formElement">' +
-      '<label for="' + service + '"> Retype ' + option['displayName'] + '</label>' +
-      '<input type="' + type + '" id="' + property + 'SecretService" name="' + service + '" value="' + option['value'] + '">' +
-      '<div class="contextualHelp">' + option['description'] + '</div>' +
-      '<div class="formInputErrorReason" id="' + property + 'SecretServiceErrorReason' + '" ></div>' +
+  var passwordsArray = [];
+  
+  function generateDivForService (option, type, service, property, unit, displayAttributes, isReconfigure) {
+  	
+    var unitClass = (unit != null) ? 'unit' : '';
+    var unitLabel = (unit != null && unit != 'int') ? unit : '';
+    
+    // default: if this is reconfiguration, default to NOT editable
+    // if this is not reconfiguration (original config), default to editable
+    var readOnlyFlag = isReconfigure;
+    
+    if (displayAttributes != null) {
+      if (isReconfigure && displayAttributes.reconfigurable != null && displayAttributes.reconfigurable) {
+        readOnlyFlag = false;
+      } else if (!isReconfigure && displayAttributes.editable != null && !displayAttributes.editable) {
+        readOnlyFlag = true;
+      }
+    }
+  
+    var retString = '<div class="formElement">' +
+      '<label for="' + service + '">' + option.displayName + '</label>' +
+      '<input class="' + unitClass + '" type="' + type + '" id="' + property + '" name="' + service + '" value="' + option.value + '"';
+    if (readOnlyFlag) {
+      retString += ' readonly="readonly" ';
+    }
+  
+    retString += '><label class="unit">' + unitLabel + '</label>' + 
+      '<div class="contextualHelp">' + option.description + '</div>' +
+      '<div class="formInputErrorReason" id="' + property + 'ErrorReason' + '"></div>' +
       '</div>';
-
-    /// Put it in the global passwd array
-    globalPasswordsArray[globalPasswordsArray.length] = {
-      "passwordDivId"     : property,
-      "verificationDivId" : property + 'SecretService'
-    };
-    globalYui.log("Global Passwords Array: " + globalYui.Lang.dump(globalPasswordsArray));
-
+    if (type == "password") {
+      retString += '<div class="formElement">' +
+        '<label for="' + service + '"> Retype ' + option.displayName + '</label>' +
+        '<input type="' + type + '" id="' + property + 'SecretService" name="' + service + '" value="' + option.value + '">' +
+        '<div class="contextualHelp">' + option.description + '</div>' +
+        '<div class="formInputErrorReason" id="' + property + 'SecretServiceErrorReason' + '" ></div>' +
+        '</div>';
+  
+      /// Put it in the global passwd array
+      passwordsArray[passwordsArray.length] = {
+        "passwordDivId"     : property,
+        "verificationDivId" : property + 'SecretService'
+      };
+      // globalYui.log("Global Passwords Array: " + globalYui.Lang.dump(passwordsArray));
+  
+    }
+    return retString;
   }
-  return retString;
-}
-
-function constructDOM(optionsInfo) {
-  /* Reset globalPasswordsArray at the beginning of each render cycle to
-   * avoid using stale data from the last run - this isn't a problem on the
-   * Configure Services page, but it bites us on the Manage Services page
-   * there is re-use of this module of code within the same JS memory.
+  
+  /**
+   * isReconfigure: true if this is for reconfiguring parameters on services; false if this is on "Advanced Config" page
    */
-  globalPasswordsArray = [];
-  var optionsSummary = "";
-  for (servicesKey in optionsInfo['services']) {
-    if (optionsInfo['services'][servicesKey]["isEnabled"] == true) {
-      var serviceNeedsRender = false;
-      var propertiesRendering = "";
-      for (property in optionsInfo['services'][servicesKey]["properties"]) {
-        // service has configs, so needs render
-        var type = convertDisplayType(optionsInfo['services'][servicesKey]['properties'][property]['type']);
-//      globalYui.log("TYPE: " + type + "Property: " + property);
-        if (type == "NODISPLAY") {
-            continue;
+  this.getOptionsSummaryMarkup = function(optionsInfo, isReconfigure) {
+    /* Reset passwordsArray at the beginning of each render cycle to
+     * avoid using stale data from the last run - this isn't a problem on the
+     * Configure Services page, but it bites us on the Manage Services page
+     * there is re-use of this module of code within the same JS memory.
+     */
+    passwordsArray = [];
+    var optionsSummary = "";
+    for (servicesKey in optionsInfo['services']) {
+      if (optionsInfo['services'][servicesKey]["isEnabled"] == true) {
+        var serviceNeedsRender = false;
+        var propertiesRendering = "";
+        for (property in optionsInfo['services'][servicesKey]["properties"]) {
+          // service has configs, so needs render
+          var type = convertDisplayType(optionsInfo['services'][servicesKey]['properties'][property]['type']);
+          // globalYui.log("TYPE: " + type + "Property: " + property);
+          if (type == "NODISPLAY") {
+              continue;
+          }
+          serviceNeedsRender = true;
+          var unit = optionsInfo['services'][servicesKey]['properties'][property]['unit'];
+          var displayAttributes = null;
+          if (optionsInfo['services'][servicesKey]['properties'][property]['displayAttributes']) {
+             displayAttributes = optionsInfo['services'][servicesKey]['properties'][property]['displayAttributes'];
+          }
+  
+          propertiesRendering += generateDivForService(optionsInfo['services'][servicesKey]["properties"][property], type, servicesKey, property, unit, displayAttributes, isReconfigure);
         }
-        serviceNeedsRender = true;
-        var unit = optionsInfo['services'][servicesKey]['properties'][property]['unit'];
-        var displayAttributes = null;
-        if (optionsInfo['services'][servicesKey]['properties'][property]['displayAttributes']) {
-           displayAttributes = optionsInfo['services'][servicesKey]['properties'][property]['displayAttributes'];
+        if (serviceNeedsRender) {
+          optionsSummary += "<fieldset> <legend>" + servicesKey + "</legend>";
+          optionsSummary += '<div name=\"configureClusterAdvancedPerServiceDiv\" id=\"' + servicesKey + '\">';
+          optionsSummary += propertiesRendering;
+          optionsSummary += '</fieldset></div>';
         }
-
-        propertiesRendering += generateDivForService(optionsInfo['services'][servicesKey]["properties"][property], type, servicesKey, property, unit, displayAttributes);
-      }
-      if (serviceNeedsRender) {
-        optionsSummary += "<fieldset> <legend>" + servicesKey + "</legend>";
-        optionsSummary += '<div name=\"configureClusterAdvancedPerServiceDiv\" id=\"' + servicesKey + '\">';
-        optionsSummary += propertiesRendering;
-        optionsSummary += '</fieldset></div>';
       }
     }
+    return optionsSummary;
+  };
+  
+  
+  /////////////////// End of rendering related functions /////////////////////////////
+  
+  /////////////////// Submit related functions /////////////////////////////
+  
+  // use this function for cleaning up the formInputError class added
+  // to the fields that failed to satisfy correctness
+  function cleanupClassesForErrors (divId) {
+    globalYui.one(divId).removeClass('formInputError');
+    globalYui.one(divId + "ErrorReason").setContent('');
   }
-  return optionsSummary;
-}
-
-
-/////////////////// End of rendering related functions /////////////////////////////
-
-/////////////////// Submit related functions /////////////////////////////
-
-// use this function for cleaning up the formInputError class added
-// to the fields that failed to satisfy correctness
-function cleanupClassesForErrors (divId) {
-  globalYui.one(divId).removeClass('formInputError');
-  globalYui.one(divId + "ErrorReason").setContent('');
-}
-
-function cleanupClassesForPasswordErrors () {
-  for (count = 0; count < globalPasswordsArray.length; count++) {
-    divId = "#" + globalPasswordsArray[count]['verificationDivId'];
-    cleanupClassesForErrors(divId);
-  }
-}
-
-function clearErrorReasons(opts) {
-  for(serviceName in opts) {
-    globalYui.log('Clear errors for svc : ' +  serviceName);
-    globalYui.log(globalYui.Lang.dump(opts[serviceName]['properties']));
-    for (propKey in opts[serviceName]['properties']) {
-      globalYui.log('Clear errors for prop : ' +  propKey);
-      globalYui.one('#' + propKey).removeClass('formInputError');
-      var elem = globalYui.one('#' + propKey + 'ErrorReason');
-      elem.setContent('');
-      //} else {
-      //  globalYui.log('Found invalid div for error reason for prop key : ' + propKey);
-      //}
+  
+  this.cleanupClassesForPasswordErrors = function () {
+    for (var count = 0; count < passwordsArray.length; count++) {
+      divId = "#" + passwordsArray[count]['verificationDivId'];
+      cleanupClassesForErrors(divId);
     }
-  }
-}
-
-function addErrorStringToHiddenDiv (divId, errorReason) {
-  errorDivId = divId + 'ErrorReason';
-  globalYui.one(errorDivId).setContent(errorReason);
-}
-
-function checkPasswordCorrectness () {
-  var count = 0;
-  var focusId = "";
-  var passwdMatch = true;
-  var errCount = 0;
-  var errString = "<ul>";
-
-  for (count = 0; count < globalPasswordsArray.length; count++) {
-    var divId = "#" + globalPasswordsArray[count]['passwordDivId'];
-    var passwd = globalYui.one(divId).get('value');
-    divId = "#" + globalPasswordsArray[count]['verificationDivId'];
-    var verifyPasswd = globalYui.one(divId).get('value');
-
-    if (passwd != verifyPasswd) {
-      errCount++;
-      errString += "<li>Password does not match for " + globalYui.one(divId).get('name') + "</li>";
-      globalYui.one(divId).addClass('formInputError');
-      addErrorStringToHiddenDiv(divId, errString);
-      if (focusId == '') {
-        focusId = "formStatusDivId";
+  };
+  
+  this.clearErrorReasons = function (opts) {
+    for(serviceName in opts) {
+      //globalYui.log('Clear errors for svc : ' +  serviceName);
+      //globalYui.log(globalYui.Lang.dump(opts[serviceName]['properties']));
+      for (propKey in opts[serviceName]['properties']) {
+        //globalYui.log('Clear errors for prop : ' +  propKey);
+        globalYui.one('#' + propKey).removeClass('formInputError');
+        var elem = globalYui.one('#' + propKey + 'ErrorReason');
+        elem.setContent('');
+        //} else {
+        //  globalYui.log('Found invalid div for error reason for prop key : ' + propKey);
+        //}
       }
-      passwdMatch = false;
-    } else {
-      globalYui.one(divId).removeClass('formInputError');
-      addErrorStringToHiddenDiv(divId, '');
     }
-  }
-
-  errString += "</ul>";
-
-  retArray = {
-    "passwdMatched" : passwdMatch,
-    "focusOn"       : focusId,
-    "errorCount"    : errCount,
-    "errorString"   : errString
   };
-
-  return retArray;
-}
-
-function generateUserOpts () {
-
-  var retval = checkPasswordCorrectness();
-  if (retval.passwdMatched != true) {
-    setFormStatus(retval.errorString, true, true);
-    document.getElementById(retval.focusOn).scrollIntoView();
-    return {};
+  
+  function addErrorStringToHiddenDiv (divId, errorReason) {
+    errorDivId = divId + 'ErrorReason';
+    globalYui.one(errorDivId).setContent(errorReason);
   }
-  cleanupClassesForPasswordErrors();
-
-  var desiredOptions = {};
-
-  var temp = globalYui.all("#configureClusterAdvancedDynamicRenderDivId div[name=configureClusterAdvancedPerServiceDiv]");
-  temp.each(function (selection) {
-
-    var selectionStr = "#configureClusterAdvancedDynamicRenderDivId input[name=" + selection.get('id') + "]";
-    var prop = globalYui.all(selectionStr);
-    var properties = {};
-    prop.each(function (proper) {
-      for (i = 0; i < globalPasswordsArray.length; i++) {
-        if (proper.get('id') == globalPasswordsArray[i]['verificationDivId']) {
-          return;
+  
+  this.checkPasswordCorrectness = function () {
+    var count = 0;
+    var focusId = "";
+    var passwdMatch = true;
+    var errCount = 0;
+    var errString = "<ul>";
+  
+    for (count = 0; count < passwordsArray.length; count++) {
+      var divId = "#" + passwordsArray[count]['passwordDivId'];
+      var passwd = globalYui.one(divId).get('value');
+      divId = "#" + passwordsArray[count]['verificationDivId'];
+      var verifyPasswd = globalYui.one(divId).get('value');
+  
+      if (passwd != verifyPasswd) {
+        errCount++;
+        errString += "<li>Password does not match for " + globalYui.one(divId).get('name') + "</li>";
+        globalYui.one(divId).addClass('formInputError');
+        addErrorStringToHiddenDiv(divId, errString);
+        if (focusId == '') {
+          focusId = "formStatusDivId";
         }
+        passwdMatch = false;
+      } else {
+        globalYui.one(divId).removeClass('formInputError');
+        addErrorStringToHiddenDiv(divId, '');
       }
-
-      var value = globalYui.Lang.trim(proper.get('value'));
-      if ((proper.get('type') == "checkbox")) {
-        value = proper.get('checked').toString();
-      }
-
-      var keyName = globalYui.Lang.trim(proper.get('id'));
-      properties[keyName] = {
-      "value" : value,
-      };
-
-   });
-
-    desiredOptions[selection.get('id')] = {
-    "properties" : properties,
+    }
+  
+    errString += "</ul>";
+  
+    retArray = {
+      "passwdMatched" : passwdMatch,
+      "focusOn"       : focusId,
+      "errorCount"    : errCount,
+      "errorString"   : errString
     };
+  
+    return retArray;
+  };
+  
+  this.generateUserOpts = function () {
+  
+    var retval = this.checkPasswordCorrectness();
+    if (retval.passwdMatched != true) {
+      setFormStatus(retval.errorString, true, true);
+      document.getElementById(retval.focusOn).scrollIntoView();
+      return {};
+    }
+    this.cleanupClassesForPasswordErrors();
+  
+    var desiredOptions = {};
+  
+    var temp = globalYui.all("#configureClusterAdvancedDynamicRenderDivId div[name=configureClusterAdvancedPerServiceDiv]");
+    temp.each(function (selection) {
+  
+      var selectionStr = "#configureClusterAdvancedDynamicRenderDivId input[name=" + selection.get('id') + "]";
+      var prop = globalYui.all(selectionStr);
+      var properties = {};
+      prop.each(function (proper) {
+        for (var i = 0; i < passwordsArray.length; i++) {
+          if (proper.get('id') == passwordsArray[i]['verificationDivId']) {
+            return;
+          }
+        }
+  
+        var value = globalYui.Lang.trim(proper.get('value'));
+        if ((proper.get('type') == "checkbox")) {
+          value = proper.get('checked').toString();
+        }
+  
+        var keyName = globalYui.Lang.trim(proper.get('id'));
+        properties[keyName] = {
+        "value" : value,
+        };
+  
+     });
+  
+      desiredOptions[selection.get('id')] = {
+      "properties" : properties,
+      };
+  
+    });
+  
+  //  globalYui.log("Final Options: " + globalYui.Lang.dump(desiredOptions));
+  
+    clearFormStatus();
+    this.clearErrorReasons(desiredOptions);
+  
+    return desiredOptions;
+  };
+  
+  this.handleConfigureServiceErrors = function (errorResponse) {
+    var message = errorResponse.error;
+    setFormStatus(message, true, true);
+    for (propKey in errorResponse['properties'])  {
+      errorReason = errorResponse['properties'][propKey]['error'];
+      globalYui.one('#' + propKey).addClass('formInputError');
+      var elemReason = propKey + 'ErrorReason';
+      //globalYui.log('Setting content ' + errorReason + ' for div ' + elemReason);
+      globalYui.one('#' + elemReason).setContent(errorReason);
+    }
+    document.getElementById('formStatusDivId').scrollIntoView();
+  };
+};
 
-  });
-
-//  globalYui.log("Final Options: " + globalYui.Lang.dump(desiredOptions));
-
-  clearFormStatus();
-  clearErrorReasons(desiredOptions);
-
-  return desiredOptions;
-}
-
-function handleConfigureServiceErrors(errorResponse) {
-  var message = errorResponse.error;
-  setFormStatus(message, true, true);
-  for (propKey in errorResponse['properties'])  {
-    errorReason = errorResponse['properties'][propKey]['error'];
-    globalYui.one('#' + propKey).addClass('formInputError');
-    var elemReason = propKey + 'ErrorReason';
-    globalYui.log('Setting content ' + errorReason + ' for div ' + elemReason);
-    globalYui.one('#' + elemReason).setContent(errorReason);
-  }
-  document.getElementById('formStatusDivId').scrollIntoView()
-}
-
-/////////////////// End of submitting related functions /////////////////////////////
+var configureServicesUtil = new ConfigureServicesUtil();

hmc/js/manageServices.js

@@ -147,13 +147,10 @@ function setupStartStopServiceScreen(action, serviceName) {
   confirmationDataPanelBodyContent += getAffectedDependenciesMarkup(affectedServices, serviceName, action);
   confirmationDataPanelBodyContent = '<div id="confirmationDataPanelBodyContent">' + confirmationDataPanelBodyContent + '</div>';
 
-  var confirmationDataPanelWidth = 800;
-  var confirmationDataPanelHeight = 400;
-
   confirmationDataPanel.set( 'headerContent', confirmationDataPanelTitle);
   confirmationDataPanel.set( 'bodyContent', confirmationDataPanelBodyContent);
-  confirmationDataPanel.set( 'height', confirmationDataPanelHeight );
-  confirmationDataPanel.set( 'width', confirmationDataPanelWidth );
+  confirmationDataPanel.set( 'height', 400);
+  confirmationDataPanel.set( 'width', 800);
 
   confirmationDataPanel.addButton( panelNoButton);
   confirmationDataPanel.addButton( panelYesButton );
@@ -181,13 +178,10 @@ function setupStartStopAllServicesScreen(action) {
     confirmationDataPanelBodyContent = "We are now going to stop all the services in the cluster";
   }
 
-  var confirmationDataPanelWidth = 800;
-  var confirmationDataPanelHeight = 400;
-
   confirmationDataPanel.set( 'headerContent', confirmationDataPanelTitle);
   confirmationDataPanel.set( 'bodyContent', confirmationDataPanelBodyContent);
-  confirmationDataPanel.set( 'height', confirmationDataPanelHeight );
-  confirmationDataPanel.set( 'width', confirmationDataPanelWidth );
+  confirmationDataPanel.set( 'height', 400);
+  confirmationDataPanel.set( 'width', 800);
 
   confirmationDataPanel.addButton( panelNoButton);
   confirmationDataPanel.addButton( panelYesButton );
@@ -204,7 +198,7 @@ function setupReconfigureScreens(serviceName) {
     action: function (e) {
       e.preventDefault();
 
-      localReconfigureServiceData = generateUserOpts();
+      localReconfigureServiceData = configureServicesUtil.generateUserOpts();
       var remoteProps = remoteReconfigureServiceData.services[serviceName].properties;
       var localProps = localReconfigureServiceData[serviceName].properties;
       var allEqual = true;
@@ -247,11 +241,9 @@ function setupReconfigureScreens(serviceName) {
   // Render first with a loading image and then get config items
   confirmationDataPanelBodyContent = 
     "<img id=errorInfoPanelLoadingImgId class=loadingImg src=../images/loading.gif />";
-  var confirmationDataPanelWidth = 1000;
-  var confirmationDataPanelHeight = 500;
   var confirmationDataPanelTitle = getTitleForReconfiguration(serviceName);
-  confirmationDataPanel.set( 'height', confirmationDataPanelHeight );
-  confirmationDataPanel.set( 'width', confirmationDataPanelWidth );
+  confirmationDataPanel.set( 'height', 500);
+  confirmationDataPanel.set( 'width', 1000);
   confirmationDataPanel.set( 'headerContent', confirmationDataPanelTitle);
   confirmationDataPanel.set( 'bodyContent', confirmationDataPanelBodyContent );
   showPanel();
@@ -262,7 +254,7 @@ function setupReconfigureScreens(serviceName) {
     // Store the remote data
     remoteReconfigureServiceData = serviceConfigurationData;
 
-    var serviceConfigurationMarkup = constructDOM( serviceConfigurationData );
+    var serviceConfigurationMarkup = configureServicesUtil.getOptionsSummaryMarkup(serviceConfigurationData, true);
 
     if( globalYui.Lang.trim( serviceConfigurationMarkup).length == 0 ) {
       serviceConfigurationMarkup = '<p>There is nothing to reconfigure for this service.</p>';
@@ -360,7 +352,7 @@ function performServiceManagement( action, serviceName, confirmationDataPanel )
             hidePanel(function() {
               setupReconfigureFirstScreen(serviceName);
               showPanel( function() {
-                handleConfigureServiceErrors( manageServicesResponseJson );
+                configureServicesUtil.handleConfigureServiceErrors( manageServicesResponseJson );
             });
           });
           } else {