AMBARI-374. Modify the cluster info page to show host-to-service mapping for both master services and client services using color-coding (Contributed by Yusaku)

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

CHANGES.txt

@@ -6,6 +6,8 @@ characters wide.
 
 Release 0.1.x - unreleased
 
+  AMBARI-374. Modify the cluster info page to show host-to-service mapping for both master services and client services using color-coding (Yusaku via Vikram)
+
   AMBARI-372. Hive metastore nagios check is broken. (Jitendra via Vikram)
 
   AMBARI-373. Create RPM fails as fonts files are not copied over. (Mahadev via Vikram)

hmc/css/clusters.css

@@ -25,3 +25,13 @@
   margin-right: auto;
   width: 300px;
 }
+
+#clusterHostRoleMappingDivId {
+  margin-top:40px;
+}
+
+#clusterHostRoleMappingDivId h2 {
+  font-size:16px;
+  float:left;
+  margin-bottom:10px;
+}

hmc/css/common.css

@@ -281,6 +281,10 @@ div.formElement {
 	font-size:12px;
 }
 
+.formElement input {
+  vertical-align:top; 
+}
+
 #configureClusterAdvancedCoreDivId label,
 #deployDynamicRenderDivId label,
 #deployCoreDivId label {
@@ -288,7 +292,7 @@ div.formElement {
 	width:300px;
 	text-align:right;
 	margin-right:20px;
-	padding-top:8px;
+	padding-top:4px;
 }
 
 #deployDynamicRenderDivId input[readonly] {
@@ -446,7 +450,7 @@ div.separator {
 	width:auto;
 	float:left;
 }
-.hostToMasterServices, .hostToClientServices {
+.hostToMasterServices, .hostToServices {
     background-color: #F7F7F5;
     border: 2px solid rgba(0, 0, 0, 0.25);
     border-radius: 4px 4px 4px 4px;
@@ -456,23 +460,23 @@ div.separator {
     padding: 10px 20px;
     width:360px;
 }
-.hostToClientServices {
-	width:90%;
+.hostToServices {
+	width:50%;
 }
-.hostToMasterServices > h3, .hostToClientServices > h3 {
+.hostToMasterServices > h3, .hostToServices > h3 {
 	font-size:14px;
 	margin-bottom:4px!important;
 	line-height:14px;
 }
-.hostToMasterServices ul, .hostToClientServices ul {
+.hostToMasterServices ul, .hostToServices ul {
 	margin-left:0;
 	margin-bottom:0;
 	list-style:none;
 }
-.hostToMasterServices ul:after, .hostToClientServices ul:after {
+.hostToMasterServices ul:after, .hostToServices ul:after {
 	clear:both;
 }
-.hostToMasterServices li, .hostToClientServices li {
+.hostToMasterServices li, .hostToServices li, .masterLegend, .clientLegend {
 	float:left;
 	background-color:#65B642;
 	padding:4px 6px;
@@ -483,6 +487,13 @@ div.separator {
 	-webkit-border-radius:4px;
 	-moz-border-radius:4px;
 }
+.hostToServices li.client, .clientLegend {
+  background-color:#0088CC;
+}
+.serviceLegend {
+  float:left;
+  margin-left:20px;
+}
 .navbar .brand {
     color: #666666;
     display: block;

hmc/html/index.php

@@ -8,6 +8,7 @@
     <link type="text/css" rel="stylesheet" href="../css/common.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/common2.css" media="screen"/>
     <link type="text/css" rel="stylesheet" href="../css/common3.css" media="screen"/>
+    <link type="text/css" rel="stylesheet" href="../css/clusters.css" media="screen"/>
     <link rel="shortcut icon" href="../images/logo-micro.gif">
     <!-- End CSS -->
   </head>
@@ -26,7 +27,14 @@
       <div id="clustersListDivId" style="display:none">
       </div>
 
-      <div id="clusterHostRoleMappingDynamicRenderDivId">
+      <div id="clusterHostRoleMappingDivId" style="display:none">
+        <h2>Service Mapping</h2>
+        <div class="serviceLegend">
+          <span class="masterLegend">Master Service</span><span class="clientLegend">Client Service</span>
+        </div>
+        <div style="clear:both"></div>
+        <div id="clusterHostRoleMappingDynamicRenderDivId">
+        </div>      
       </div>
 
     </div>        

hmc/js/clustersList.js

@@ -1,7 +1,5 @@
-function generateClusterMastersHostRoleMappingMarkup( clusterServices ) {
-
-  var clusterMastersHostRoleMappingMarkup = '';
-
+function populateHostToMasterRoleMapping(clusterServices, hostMap) {
+  
   for (var serviceName in clusterServices) {
     if (clusterServices.hasOwnProperty(serviceName)) {
 
@@ -10,26 +8,22 @@ function generateClusterMastersHostRoleMappingMarkup( clusterServices ) {
           !clusterServices[serviceName].attributes.noDisplay) {
 
         globalYui.Array.each( clusterServices[serviceName].components, function (serviceComponent) {
-          
           if (serviceComponent.isMaster) {
-            clusterMastersHostRoleMappingMarkup += 
-              '<div class=formElement>' + 
-                '<label>' + serviceComponent.displayName + ': ' + '</label>' + 
-                serviceComponent.hostName +
-              '</div>' + 
-              '<br/>';
+            // just add the client to the hostname object
+            if ( !( serviceComponent.hostName in hostMap ) ) {
+              hostMap[serviceComponent.hostName] = new Array();
+              hostMap[serviceComponent.hostName].push({ serviceName: serviceComponent.displayName, isMaster: true });
+            } else {
+              hostMap[serviceComponent.hostName].push({ serviceName: serviceComponent.displayName, isMaster: true});
+            }
           }
         });
       }
     }
   }
-
-  return clusterMastersHostRoleMappingMarkup;
 }
 
-function generateClusterClientsHostRoleMappingMarkup( clusterServices ) {
-
-  var finalHostMap = {};
+function populateHostToClientRoleMapping(clusterServices, hostMap) {
 
   for (var serviceName in clusterServices) {
     if (clusterServices.hasOwnProperty(serviceName)) {
@@ -39,52 +33,41 @@ function generateClusterClientsHostRoleMappingMarkup( clusterServices ) {
 
         globalYui.Array.each( clusterServices[serviceName].components, function (serviceComponent) {          
           if (serviceComponent.isClient) {
-            globalYui.log("Final host array is " + globalYui.Lang.dump(finalHostMap));
             // just add the client to the hostname object
-            if ( !( serviceComponent.hostName in finalHostMap ) ) {
-              finalHostMap[serviceComponent.hostName] = new Array();
-              finalHostMap[serviceComponent.hostName].push(serviceComponent.displayName);
+            if ( !( serviceComponent.hostName in hostMap ) ) {
+              hostMap[serviceComponent.hostName] = new Array();
+              hostMap[serviceComponent.hostName].push({ serviceName: serviceComponent.displayName, isMaster: false });
             } else {
-              finalHostMap[serviceComponent.hostName].push(serviceComponent.displayName);
+              hostMap[serviceComponent.hostName].push({ serviceName: serviceComponent.displayName, isMaster: false });
             }
           }
         });
       }
     }
   }
+}
+
+function generateHostRoleMappingMarkup( clusterServices ) {
 
+  var hostMap = {};
+  var markup = '';
+  
+  populateHostToMasterRoleMapping(clusterServices, hostMap); 
+  populateHostToClientRoleMapping(clusterServices, hostMap);
+  
   markup = '<div>';
-  for (var hostName in finalHostMap) {
-    markup += '<div class="hostToClientServices"><h3>' + hostName + '</h3>' + '<ul>';
-    for (var service in finalHostMap[hostName]) {
-	  markup += '<li>' + finalHostMap[hostName][service] + '</li>';
-  	}
+  for (var hostName in hostMap) {
+    markup += '<div class="hostToServices"><h3>' + hostName + '</h3>' + '<ul>';
+    for (var service in hostMap[hostName]) {
+      markup += '<li class="' + ((hostMap[hostName][service].isMaster) ? 'master' : 'client') + '">' + hostMap[hostName][service].serviceName + '</li>';
+    }
+    markup += '</ul><div style="clear:both"></div></div>';
   }
-  markup += '</ul><div style="clear:both"></div></div>';
+  markup += '</div>';
 
   return markup;
 }
 
-function generateClusterHostRoleMappingMarkup( clusterServices ) {
-
-  var clusterHostRoleMappingMarkup = 
-  '<fieldset id=clusterMastersHostRoleMappingFieldsetId>' +
-    '<legend>' +
-      'Locations Of Service Masters' + 
-    '</legend>' + 
-    generateClusterMastersHostRoleMappingMarkup(clusterServices) + 
-  '</fieldset>' + 
-  '<br/>' +
-  '<fieldset id=clusterClientsHostRoleMappingFieldsetId>' +
-    '<legend>' +
-      'Locations Of Service Clients' + 
-    '</legend>' + 
-    generateClusterClientsHostRoleMappingMarkup(clusterServices) + 
-  '</fieldset>';
-
-  return clusterHostRoleMappingMarkup;
-}
-
 function renderClusterList() {
   globalYui.io("../php/frontend/listClusters.php", {
     method: 'GET',
@@ -158,8 +141,7 @@ function renderClusterList() {
 
         var newClusterLinkHTML = "";
         if (multipleClustersSupported || numClusters == 0) {
-          clustersListMarkup += newClusterLinkHTML;
-          globalYui.one("#welcomeDivId").setStyle('display','block');
+          // document.location.href = "/hmc/html/welcome.php";
           return;
         }
 
@@ -191,8 +173,9 @@ function renderClusterList() {
                 var clusterServices = clusterServicesResponseJson.response.services;
 
                 /* Link the newly-generated markup into the DOM. */
-                globalYui.one("#clusterHostRoleMappingDynamicRenderDivId").setContent
-                  ( generateClusterHostRoleMappingMarkup(clusterServices) );
+                globalYui.one("#clusterHostRoleMappingDynamicRenderDivId").setContent(
+                    generateHostRoleMappingMarkup(clusterServices) );
+                globalYui.one("#clusterHostRoleMappingDivId").show();
               }
               else {
                 alert("Fetching Cluster Services failed");