AMBARI-357. Redesign master service assignment page so that it takes up less vertical space (Contributed by Yusaku)

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

CHANGES.txt

@@ -6,6 +6,8 @@ characters wide.
 
 Release 0.1.x - unreleased
 
+  AMBARI-357. Redesign master service assignment page so that it takes up less vertical space (Yusaku via Vikram)
+
   AMBARI-356. Log output to console slows puppet run. (Jitendra via Vikram)
 
   AMBARI-359. invalid parameter java_needed during uninstall (Ramya via Vikram) 

hmc/css/common.css

@@ -215,7 +215,6 @@ td {
   margin-left:10px;
   width:300px;
   display:inline-block;
-  font-style:italic;
   visibility:hidden;
 }
 
@@ -395,10 +394,16 @@ div.separator {
 #masterServices {
 	margin-top:40px;
 }
+
 #masterServices select {
 	width:auto;
+	max-width:330px;
 	background-color:#fff;
 }
+#masterServices a {
+	margin-left:165px;
+}
+
 #masterServices ul {
 	font-size:14px;
 	color:#65B642;
@@ -418,34 +423,41 @@ div.separator {
 	font-size:14px;
 	font-weight:normal;
 }
-#masterServices a {
-	margin-left:20px;
-	margin-top:20px;
-}
-#masterServicesToHosts {
-	margin-left:20px;
-	width:480px;
+
+#masterServicesToHostsContainer {
+	margin:0 10px 40px 0;
+	width:520px;
 	float:left;
 }
+
 .masterServiceSelect {
 	margin-bottom:10px;	
 }
+.masterServiceSelect select {
+	margin-bottom:0;
+}
+
 .masterServiceSelect label {
 	font-size:14px;
+	float:left;
+	width:160px;
+	margin-right:5px;
+	line-height:30px;
+	text-align:right;
 }
 #hostsToMasterServices {
-	width:440px;
+	width:auto;
 	float:left;
 }
 .hostToMasterServices {
     background-color: #F7F7F5;
-    border: 1px solid rgba(0, 0, 0, 0.05);
+    border: 2px solid rgba(0, 0, 0, 0.25);
     border-radius: 4px 4px 4px 4px;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
     margin: 0 0 10px;
     min-height: 20px;
     padding: 10px 20px;
-    width:400px;
+    width:360px;
 }
 .hostToMasterServices > h3 {
 	font-size:14px;
@@ -524,4 +536,4 @@ div.separator {
 .navbar #logo {
 	float:left;
 	padding-top:7px;
-}
+}

hmc/html/initializeCluster.php

@@ -193,11 +193,13 @@
                 <div id="formStatusDivId" class="formStatusBar" style="display:none">					
                 </div>               
                 <div id="masterServices">
-                  <div id="masterServicesToHosts"></div>
+                  <div id="masterServicesToHostsContainer">
+                    <div id="masterServicesToHosts"></div>
+                    <a href="javascript:void 0" class="btn btn-large" id="selectServiceMastersSubmitButtonId"><?php echo $RES['initWizard.assignMasters.submit.label'] ?></a>
+                  </div>                  
                   <div id="hostsToMasterServices"></div>
                 </div>
                 <div style="clear:both"></div>
-                <a href="javascript:void 0" style="margin:20px" class="btn btn-large" id="selectServiceMastersSubmitButtonId"><?php echo $RES['initWizard.assignMasters.submit.label'] ?></a>
               </div>
 
               <div name="configureClusterCoreDiv" id="configureClusterCoreDivId" style="display:none">
@@ -321,7 +323,7 @@
                 '../js/configureServicesUtils.js',
                 '../js/configureServices.js',
                 '../js/reviewAndDeploy.js',
-                '../js/deployProgress.js'
+                '../js/deployProgress.js'                
               ];
             </script>
 

hmc/js/assignMasters.js

@@ -19,11 +19,15 @@ function addCommasToInt(num) {
 	return num.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
 }
 
+function getTotalMemForDisplay(totalMem) {
+	return Math.round(totalMem / 102.4)/10 + "GB";
+}
+
 function renderHostsToMasterServices(allHosts, hostsToMasterServices) {
 	var markup = '';
 	for (var host in hostsToMasterServices) {
 		  var hostInfo = getNodeInfo(allHosts, host);
-		  markup += '<div class="hostToMasterServices"><h3>' + host + '<span class="hostInfo">' + addCommasToInt(hostInfo.totalMem) + 'MB RAM, ' + hostInfo.cpuCount + ' cores</span></h3><ul>';
+		  markup += '<div class="hostToMasterServices"><h3>' + host + '<span class="hostInfo">' + getTotalMemForDisplay(hostInfo.totalMem) + ', ' + hostInfo.cpuCount + ' cores</span></h3><ul>';
 		  for (var j in hostsToMasterServices[host]) {
 			  markup += '<li>' + hostsToMasterServices[host][j] + '</li>';
 		  }
@@ -56,14 +60,14 @@ function removeMasterServiceFromHost(masterName, hostName, hostsToMasterServices
 function getMasterHostSelect(masterName, allHosts, chosenHostName) {
 	var chosenHost = getNodeInfo(allHosts, chosenHostName);
 	var markup = '<select name="' + masterName + '">'; 
-	markup += '<option selected="selected" value="' + chosenHost.hostName + '">' + chosenHost.hostName + ' - ' + addCommasToInt(chosenHost.totalMem) + 'MB RAM, ' + chosenHost.cpuCount + ' cores</option>';
+	markup += '<option selected="selected" value="' + chosenHost.hostName + '">' + chosenHost.hostName + ' - ' + getTotalMemForDisplay(chosenHost.totalMem) + ', ' + chosenHost.cpuCount + ' cores</option>';
 	for (var i in allHosts) {
       var host = allHosts[i];
 	  if (host.hostName != chosenHost.hostName) {
-	    markup += '<option value="' + host.hostName + '">' + host.hostName + ' - ' + addCommasToInt(host.totalMem) + 'MB RAM, ' + host.cpuCount + ' cores</option>';
+	    markup += '<option value="' + host.hostName + '">' + host.hostName + ' - ' + getTotalMemForDisplay(host.totalMem) + ', ' + host.cpuCount + ' cores</option>';
 	  }
 	}
-	markup += '</select><input type="hidden" style="display:none" id="' + masterName + 'ChosenHost" value="' + chosenHost.hostName + '">';
+	markup += '</select><div style="clear:both"></div><input type="hidden" style="display:none" id="' + masterName + 'ChosenHost" value="' + chosenHost.hostName + '">';
 	return markup;
 }
 
@@ -159,7 +163,7 @@ function renderAssignHosts(clusterInfo) {
   for (var i in masterServices) {
 	  markup += '<div class="masterServiceSelect"><label><b>'
 	  	+ masterServices[i].displayName
-	    + '</b> assigned to</label>' + getMasterHostSelect(masterServices[i].name, allHosts, masterServices[i].host)
+	    + '</b></label>' + getMasterHostSelect(masterServices[i].name, allHosts, masterServices[i].host)
 		+ '</div>';
 	  if (hostsToMasterServices[masterServices[i].host] == null) {
 		  hostsToMasterServices[masterServices[i].host] = {};