geode-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jensde...@apache.org
Subject [11/96] [abbrv] [partial] incubator-geode git commit: GEODE-12: rename pulse to gemfire-pulse and make build pass
Date Thu, 21 Jan 2016 22:54:52 GMT
http://git-wip-us.apache.org/repos/asf/incubator-geode/blob/446f451a/gemfire-pulse/src/main/webapp/scripts/pulsescript/clusterDetail.js
----------------------------------------------------------------------
diff --git a/gemfire-pulse/src/main/webapp/scripts/pulsescript/clusterDetail.js b/gemfire-pulse/src/main/webapp/scripts/pulsescript/clusterDetail.js
new file mode 100644
index 0000000..1816ab8
--- /dev/null
+++ b/gemfire-pulse/src/main/webapp/scripts/pulsescript/clusterDetail.js
@@ -0,0 +1,2349 @@
+/*=========================================================================
+ * Copyright (c) 2012-2014 Pivotal Software, Inc. All Rights Reserved.
+ * This product is protected by U.S. and international copyright
+ * and intellectual property laws. Pivotal products are covered by
+ * one or more patents listed at http://www.pivotal.io/patents.
+ *=========================================================================
+ */
+
+var selectedPerspectiveView = "member";
+var selectedMemberViewOption = "default";
+var selectedViewTypeDefault = ""; //"rgraph";
+var selectedViewTypeSG = "treemap";
+var selectedViewTypeRZ = "treemap";
+var selectedViewTypeData = "treemap";
+
+var gblClusterMembers = null;
+
+/**
+ * This JS File is used for Cluster Details screen
+ * 
+ */
+
+// This function is the initialization function for Cluster Details screen. It
+// is
+// making call to functions defined for different widgets used on this screen
+$(document).ready(function() {
+
+  // Load Notification HTML  
+  generateNotificationsPanel();
+
+  // modify UI text as per requirement
+  customizeUI();
+
+  if (CONST_BACKEND_PRODUCT_SQLFIRE == productname.toLowerCase()) {
+    alterHtmlContainer(CONST_BACKEND_PRODUCT_SQLFIRE);
+
+    // "ClusterDetails" service callback handler
+    getClusterDetailsBack = getClusterDetailsSQLfireBack;
+
+    // "ClusterKeyStatistics" service callback handler
+    getClusterKeyStatisticsBack = getClusterKeyStatisticsSQLfireBack;
+
+  } else {
+    alterHtmlContainer(CONST_BACKEND_PRODUCT_GEMFIRE);
+    
+    // "ClusterDetails" service callback handler
+    getClusterDetailsBack = getClusterDetailsGemfireBack;
+
+    // "ClusterKeyStatistics" service callback handler
+    getClusterKeyStatisticsBack = getClusterKeyStatisticsGemfireBack;
+  }
+
+  // Add hostspot attributes
+  hotspotAttributes = new Array();
+  hotspotAttributes.push({"id":"currentHeapUsage", "name":"Heap Usage"});
+  hotspotAttributes.push({"id":"cpuUsage", "name":"CPU Usage"});
+
+  // Initialize set up for hotspot
+  initHotspotDropDown();
+
+  scanPageForWidgets();
+  // Default view - creating blank cluster members tree map 
+  createMembersTreeMapDefault();
+  $('#default_treemap_block').hide();
+  // Default view - creating blank cluster members grid
+  createMemberGridDefault();
+  // Default view - creating blank R Graph for all members associated with defined cluster
+  createClusteRGraph();
+
+  // Server Groups view - creating blank cluster members tree map 
+  createMembersTreeMapSG();
+  $('#servergroups_treemap_block').hide();
+  // Server Groups view - creating blank cluster members grid
+  createMemberGridSG();
+
+  // Redundancy Zones view - creating blank cluster members tree map  
+  createMembersTreeMapRZ();
+  $('#redundancyzones_treemap_block').hide();
+  // Redundancy Zones view - creating blank cluster members grid
+  createMemberGridRZ();
+
+  // Data view - creating blank cluster data/regions tree map 
+  createRegionsTreeMapDefault();
+  $('#data_treemap_block').hide();
+  // Data view - creating blank cluster data/regions grid
+  createRegionsGridDefault();
+
+  $.ajaxSetup({
+    cache : false
+  });
+});
+
+/*
+ * Function to show and hide html elements/components based upon whether product
+ * is sqlfire or gemfire 
+ */
+function alterHtmlContainer(prodname){
+  if(CONST_BACKEND_PRODUCT_SQLFIRE == prodname.toLowerCase()){
+    // Hide HTML for following
+    $('#clusterUniqueCQsContainer').hide();
+    $('#SubscriptionsContainer').hide();
+    $('#queriesPerSecContainer').hide();
+    
+    // Show HTML for following
+    $('#subTabQueryStatistics').show();
+    $('#TxnCommittedContainer').show();
+    $('#TxnRollbackContainer').show(); 
+  }else{
+    // Hide HTML for following
+    $('#subTabQueryStatistics').hide();
+    $('#TxnCommittedContainer').hide();
+    $('#TxnRollbackContainer').hide();
+
+    // Show HTML for following
+    $('#clusterUniqueCQsContainer').show();
+    $('#SubscriptionsContainer').show();
+    $('#queriesPerSecContainer').show();
+  }
+  
+}
+
+// Function called when Hotspot is changed 
+function applyHotspot(){
+  var data = new Object();
+  data.members = gblClusterMembers;
+  if (flagActiveTab == "MEM_TREE_MAP_DEF") {
+    updateClusterMembersTreeMapDefault(data);
+  } else if (flagActiveTab == "MEM_TREE_MAP_SG") {
+    updateClusterMembersTreeMapSG(data);
+  } else if (flagActiveTab == "MEM_TREE_MAP_RZ") {
+    updateClusterMembersTreeMapRZ(data);
+  }
+}
+
+function translateGetClusterMemberBack(data) {
+  getClusterMembersBack(data.ClusterMembers);
+}
+
+function translateGetClusterMemberRGraphBack(data) {
+  getClusterMembersRGraphBack(data.ClusterMembersRGraph);
+}
+
+function translateGetClusterRegionsBack(data) {
+  getClusterRegionsBack(data.ClusterRegions);
+}
+
+// function used for creating blank TreeMap for member's on Cluster Details
+// Screen
+function createMembersTreeMapDefault() {
+  var dataVal = {
+    "$area" : 1,
+    "initial" : true
+  };
+  var json = {
+    "children" : {},
+    "data" : dataVal,
+    "id" : "root",
+    "name" : "Members"
+  };
+
+  clusterMemberTreeMap = new $jit.TM.Squarified(
+      {
+
+        injectInto : 'GraphTreeMap',
+        levelsToShow : 1,
+        titleHeight : 0,
+        background : '#a0c44a',
+        offset : 2,
+        Label : {
+          type : 'HTML',
+          size : 1
+        },
+        Node : {
+          CanvasStyles : {
+            shadowBlur : 0
+          }
+        },
+        Events : {
+          enable : true,
+          onMouseEnter : function(node, eventInfo) {
+            if (node) {
+              node.setCanvasStyle('shadowBlur', 7);
+              node.setData('border', '#ffffff');
+
+              clusterMemberTreeMap.fx.plotNode(node,
+                  clusterMemberTreeMap.canvas);
+              clusterMemberTreeMap.labels.plotLabel(
+                  clusterMemberTreeMap.canvas, node);
+            }
+          },
+          onMouseLeave : function(node) {
+            if (node) {
+              node.removeData('border', '#ffffff');
+              node.removeCanvasStyle('shadowBlur');
+              clusterMemberTreeMap.plot();
+            }
+          },
+          onClick : function(node) {
+            if (!node.data.initial) {
+              location.href = 'MemberDetails.html?member=' + node.id
+                  + '&memberName=' + node.name;
+            }
+          }
+        },
+
+        Tips : {
+          enable : true,
+          offsetX : 5,
+          offsetY : 5,
+          onShow : function(tip, node, isLeaf, domElement) {
+            var html = "";
+            var data = node.data;
+            if (!data.initial) {
+              html = "<div class=\"tip-title\"><div><div class='popupHeading'>"
+                  + node.name
+                  + "</div>"
+                  + "<div class='popupFirstRow'><div class='popupRowBorder borderBottomZero'>"
+                  + "<div class='labeltext left display-block width-70'><span class='left'>CPU Usage</span></div><div class='right width-30'>"
+                  + "<div class='color-d2d5d7 font-size14'>"
+                  + data.cpuUsage
+                  + "<span class='fontSize15'>%</span></span></div>"
+                  + "</div></div>"
+                  + "<div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                  + "<span class='left'>Memory Usage</span></div><div class='right width-30'>"
+                  + "<div class='color-d2d5d7 font-size14'>"
+                  + data.heapUsage
+                  + "<span class='font-size15 paddingL5'>MB</span>"
+                  + "</div></div></div>"
+                  + "<div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                  + "<span class='left'>Load Avg.</span></div><div class='right width-30'>"
+                  + "<div class='color-d2d5d7 font-size14'>"
+                  + applyNotApplicableCheck(data.loadAvg)
+                  + "</div></div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                  + "<span class='left'>Threads</span></div><div class='right width-30'>"
+                  + "<div class='color-d2d5d7 font-size14'>"
+                  + data.threads
+                  + "</div></div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                  + "<span class='left'>Sockets</span></div><div class='right width-30'>"
+                  + "<div class='color-d2d5d7 font-size14'>"
+                  + applyNotApplicableCheck(data.sockets)
+                  + "</div></div></div><div class='popupRowBorder borderBottomZero'>"
+                  + "<div class='labeltext left display-block width-70'><span class='left'>GemFire Version</span>"
+                  + "</div><div class='right width-30'><div class='color-d2d5d7 font-size14'>"
+                  + data.gemfireVersion + "</div></div>" + "</div>" + ""
+                  + "</div></div>" + "</div>";
+            } else {
+              html = "<div class=\"tip-title\"><div><div class='popupHeading'>Loading</div>";
+            }
+            tip.innerHTML = html;
+          }
+        },
+        onCreateLabel : function(domElement, node) {
+          //domElement.style.opacity = 0.01;
+
+          if(node.id == "root"){
+            domElement.innerHTML = "<div class='treemapRootNodeLabeltext'>&nbsp;</div>";
+          }else{
+            domElement.innerHTML = "<div class='treemapNodeLabeltext'>"+node.name+"</div>";
+            var style = domElement.style;
+            style.display = '';
+            style.border = '1px solid transparent';
+
+            domElement.onmouseover = function() {
+              style.border = '1px solid #ffffff';
+            };
+
+            domElement.onmouseout = function() {
+              style.border = '1px solid transparent';
+            };
+          }
+
+        }
+      });
+  clusterMemberTreeMap.loadJSON(json);
+  clusterMemberTreeMap.refresh();
+}
+
+//function used for creating blank TreeMap for member's on Servre Groups View
+function createMembersTreeMapSG(){
+  var dataVal = {
+      "$area" : 1,
+      "initial" : true
+    };
+    var json = {
+      "children" : {},
+      "data" : dataVal,
+      "id" : "root",
+      "name" : "sgMembers"
+    };
+
+    clusterSGMemberTreeMap = new $jit.TM.Squarified(
+        {
+
+          injectInto : 'GraphTreeMapSG',
+          //levelsToShow : 1,
+          titleHeight : 15,
+          background : '#a0c44a',
+          offset : 1,
+          userData : {
+            isNodeEntered : false
+          },
+          Label : {
+            type : 'HTML',
+            size : 9
+          },
+          Node : {
+            CanvasStyles : {
+              shadowBlur : 0
+            }
+          },
+          Events : {
+            enable : true,
+            onMouseEnter : function(node, eventInfo) {
+              if (node && node.id != "root") {
+                node.setCanvasStyle('shadowBlur', 7);
+                node.setData('border', '#ffffff');
+
+                clusterSGMemberTreeMap.fx.plotNode(node,
+                    clusterSGMemberTreeMap.canvas);
+                clusterSGMemberTreeMap.labels.plotLabel(
+                    clusterSGMemberTreeMap.canvas, node);
+              }
+            },
+            onMouseLeave : function(node) {
+              if (node && node.id != "root") {
+                node.removeData('border', '#ffffff');
+                node.removeCanvasStyle('shadowBlur');
+                clusterSGMemberTreeMap.plot();
+              }
+            },
+            onClick : function(node) {
+              if (node) {
+                if(node._depth == 1){
+                  var isSGNodeEntered = clusterSGMemberTreeMap.config.userData.isNodeEntered;
+                  if(!isSGNodeEntered){
+                    clusterSGMemberTreeMap.config.userData.isNodeEntered = true;
+                    clusterSGMemberTreeMap.enter(node);
+                  }else{
+                    clusterSGMemberTreeMap.config.userData.isNodeEntered = false;
+                    clusterSGMemberTreeMap.out();
+                  }
+                } else if(node._depth == 2 && (!node.data.initial)){
+                  location.href = 'MemberDetails.html?member=' + node.data.id
+                  + '&memberName=' + node.data.name;
+                }
+              }
+            },
+            onRightClick: function() {
+              clusterSGMemberTreeMap.out();
+            }
+          },
+
+          Tips : {
+            enable : true,
+            offsetX : 5,
+            offsetY : 5,
+            onShow : function(tip, node, isLeaf, domElement) {
+              var html = "";
+              if(node && node.id != "root"){
+                var data = node.data;
+                if (!data.initial) {
+                  if(node._depth == 1){
+                    html = "<div class=\"tip-title\"><div><div class='popupHeading'>" + node.name + "</div>";
+                  }else if(node._depth == 2){
+                    html = "<div class=\"tip-title\"><div><div class='popupHeading'>"
+                        + node.name
+                        + "</div>"
+                        + "<div class='popupFirstRow'><div class='popupRowBorder borderBottomZero'>"
+                        + "<div class='labeltext left display-block width-70'><span class='left'>CPU Usage</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + data.cpuUsage
+                        + "<span class='fontSize15'>%</span></span></div>"
+                        + "</div></div>"
+                        + "<div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Memory Usage</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + data.heapUsage
+                        + "<span class='font-size15 paddingL5'>MB</span>"
+                        + "</div></div></div>"
+                        + "<div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Load Avg.</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + applyNotApplicableCheck(data.loadAvg)
+                        + "</div></div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Threads</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + data.threads
+                        + "</div></div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Sockets</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + applyNotApplicableCheck(data.sockets)
+                        + "</div></div></div><div class='popupRowBorder borderBottomZero'>"
+                        + "<div class='labeltext left display-block width-70'><span class='left'>GemFire Version</span>"
+                        + "</div><div class='right width-30'><div class='color-d2d5d7 font-size14'>"
+                        + data.gemfireVersion + "</div></div>" + "</div>" + ""
+                        + "</div></div>" + "</div>";
+                  }
+                }else{
+                  html = "<div class=\"tip-title\"><div><div class='popupHeading'>Loading Server Groups and Members</div>";
+                }
+              }else{
+                html = "<div class=\"tip-title\"><div><div class='popupHeading'>Cluster's Server Groups and Members</div>";
+              }
+              tip.innerHTML = html;
+            }
+          },
+          onBeforePlotNode: function(node) {
+            if(node._depth == 0) {
+              // Hide root node title bar
+              node.setData('color', '#132634');  
+            } else if(node._depth == 1) {
+              node.setData('color', '#506D94');
+            }
+          },
+          onCreateLabel : function(domElement, node) {
+            //domElement.style.opacity = 0.01;
+            if(node._depth != 0){
+              domElement.innerHTML = "<div class='treemapNodeLabeltext'>"+node.name+"</div>";
+              var style = domElement.style;
+              style.display = '';
+              style.border = '1px solid transparent';
+
+              domElement.onmouseover = function() {
+                style.border = '1px solid #ffffff';
+                // Highlight this member in all server groups
+                if(this.id.indexOf("(!)") != -1){
+                  var currSGMemberId = this.id.substring(this.id.indexOf("(!)")+3);
+                  var sgMembersDOM = $("div[id$='"+currSGMemberId+"']");
+                  for(var cntr=0; cntr<sgMembersDOM.length; cntr++){
+                    sgMembersDOM[cntr].style.border = '1px solid #ffffff';
+                  }
+                }
+              };
+
+              domElement.onmouseout = function() {
+                style.border = '1px solid transparent';
+                // Remove Highlighting of this member in all server groups
+                if(this.id.indexOf("(!)") != -1){
+                  var currSGMemberId = this.id.substring(this.id.indexOf("(!)")+3);
+                  var sgMembersDOM = $("div[id$='"+currSGMemberId+"']");
+                  for(var cntr=0; cntr<sgMembersDOM.length; cntr++){
+                    sgMembersDOM[cntr].style.border = '1px solid transparent';
+                  }
+                }
+              };
+            }
+          }
+        });
+    clusterSGMemberTreeMap.loadJSON(json);
+    clusterSGMemberTreeMap.refresh();
+}
+
+//function used for creating blank TreeMap for member's on Redundancy Zones View
+function createMembersTreeMapRZ(){
+  var dataVal = {
+      "$area" : 1,
+      "initial" : true
+    };
+    var json = {
+      "children" : {},
+      "data" : dataVal,
+      "id" : "root",
+      "name" : "rzMembers"
+    };
+
+    clusterRZMemberTreeMap = new $jit.TM.Squarified(
+        {
+
+          injectInto : 'GraphTreeMapRZ',
+          //levelsToShow : 1,
+          titleHeight : 15,
+          background : '#a0c44a',
+          offset : 1,
+          userData : {
+            isNodeEntered : false
+          },
+          Label : {
+            type : 'HTML',
+            size : 9
+          },
+          Node : {
+            CanvasStyles : {
+              shadowBlur : 0
+            }
+          },
+          Events : {
+            enable : true,
+            onMouseEnter : function(node, eventInfo) {
+              if (node && node.id != "root") {
+                node.setCanvasStyle('shadowBlur', 7);
+                node.setData('border', '#ffffff');
+
+                clusterRZMemberTreeMap.fx.plotNode(node,
+                    clusterRZMemberTreeMap.canvas);
+                clusterRZMemberTreeMap.labels.plotLabel(
+                    clusterRZMemberTreeMap.canvas, node);
+              }
+            },
+            onMouseLeave : function(node) {
+              if (node && node.id != "root") {
+                node.removeData('border', '#ffffff');
+                node.removeCanvasStyle('shadowBlur');
+                clusterRZMemberTreeMap.plot();
+              }
+            },
+            onClick : function(node) {
+              if (node) {
+                if(node._depth == 1){
+                  var isRZNodeEntered = clusterRZMemberTreeMap.config.userData.isNodeEntered;
+                  if(!isRZNodeEntered){
+                    clusterRZMemberTreeMap.config.userData.isNodeEntered = true;
+                    clusterRZMemberTreeMap.enter(node);
+                  }else{
+                    clusterRZMemberTreeMap.config.userData.isNodeEntered = false;
+                    clusterRZMemberTreeMap.out();
+                  }
+                } else if(node._depth == 2 && (!node.data.initial)){
+                  location.href = 'MemberDetails.html?member=' + node.data.id
+                  + '&memberName=' + node.data.name;
+                }
+              }
+            },
+            onRightClick: function() {
+              clusterRZMemberTreeMap.out();
+            }
+          },
+
+          Tips : {
+            enable : true,
+            offsetX : 5,
+            offsetY : 5,
+            onShow : function(tip, node, isLeaf, domElement) {
+              var html = "";
+              if(node && node.id != "root"){
+                var data = node.data;
+                if (!data.initial) {
+                  if(node._depth == 1){
+                    html = "<div class=\"tip-title\"><div><div class='popupHeading'>" + node.name + "</div>";
+                  }else if(node._depth == 2){
+                    html = "<div class=\"tip-title\"><div><div class='popupHeading'>"
+                        + node.name
+                        + "</div>"
+                        + "<div class='popupFirstRow'><div class='popupRowBorder borderBottomZero'>"
+                        + "<div class='labeltext left display-block width-70'><span class='left'>CPU Usage</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + data.cpuUsage
+                        + "<span class='fontSize15'>%</span></span></div>"
+                        + "</div></div>"
+                        + "<div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Memory Usage</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + data.heapUsage
+                        + "<span class='font-size15 paddingL5'>MB</span>"
+                        + "</div></div></div>"
+                        + "<div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Load Avg.</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + applyNotApplicableCheck(data.loadAvg)
+                        + "</div></div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Threads</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + data.threads
+                        + "</div></div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-70'>"
+                        + "<span class='left'>Sockets</span></div><div class='right width-30'>"
+                        + "<div class='color-d2d5d7 font-size14'>"
+                        + applyNotApplicableCheck(data.sockets)
+                        + "</div></div></div><div class='popupRowBorder borderBottomZero'>"
+                        + "<div class='labeltext left display-block width-70'><span class='left'>GemFire Version</span>"
+                        + "</div><div class='right width-30'><div class='color-d2d5d7 font-size14'>"
+                        + data.gemfireVersion + "</div></div>" + "</div>" + ""
+                        + "</div></div>" + "</div>";
+                  }
+                }else{
+                  html = "<div class=\"tip-title\"><div><div class='popupHeading'>Loading Server Groups and Members</div>";
+                }
+              }else{
+                html = "<div class=\"tip-title\"><div><div class='popupHeading'>Cluster's Server Groups and Members</div>";
+              }
+              tip.innerHTML = html;
+            }
+          },
+          onBeforePlotNode: function(node) {  
+            if(node._depth == 0) {
+              // Hide root node title bar 
+              node.setData('color', '#132634');  
+            } else if(node._depth == 1) {
+              node.setData('color', '#506D94');
+            }
+          },
+          onCreateLabel : function(domElement, node) {
+            //domElement.style.opacity = 0.01;
+            if(node._depth != 0){
+              domElement.innerHTML = "<div class='treemapNodeLabeltext'>"+node.name+"</div>";
+              var style = domElement.style;
+              style.display = '';
+              style.border = '1px solid transparent';
+
+              domElement.onmouseover = function() {
+                style.border = '1px solid #ffffff';
+                // Highlight this member in all redundancy zones
+                if(this.id.indexOf("(!)") != -1){
+                  var currRZMemberId = this.id.substring(this.id.indexOf("(!)")+3);
+                  var rzMembersDOM = $("div[id$='"+currRZMemberId+"']");
+                  for(var cntr=0; cntr<rzMembersDOM.length; cntr++){
+                    rzMembersDOM[cntr].style.border = '1px solid #ffffff';
+                  }
+                }
+              };
+
+              domElement.onmouseout = function() {
+                style.border = '1px solid transparent';
+                // Remove Highlighting of this member in all redundancy zones
+                if(this.id.indexOf("(!)") != -1){
+                  var currRZMemberId = this.id.substring(this.id.indexOf("(!)")+3);
+                  var rzMembersDOM = $("div[id$='"+currRZMemberId+"']");
+                  for(var cntr=0; cntr<rzMembersDOM.length; cntr++){
+                    rzMembersDOM[cntr].style.border = '1px solid transparent';
+                  }
+                }
+              };
+            }
+          }
+        });
+    clusterRZMemberTreeMap.loadJSON(json);
+    clusterRZMemberTreeMap.refresh();
+}
+
+//function used for creating blank TreeMap for cluster's regions on Data View
+function createRegionsTreeMapDefault(){
+  var dataVal = {
+      "$area" : 1
+    };
+    var json = {
+      "children" : {},
+      "data" : dataVal,
+      "id" : "root",
+      "name" : "Regions"
+    };
+
+    clusterRegionsTreeMap = new $jit.TM.Squarified(
+        {
+
+          injectInto : 'GraphTreeMapClusterData',
+          levelsToShow : 1,
+          titleHeight : 0,
+          background : '#8c9aab',
+          offset : 2,
+          Label : {
+            type : 'Native',//HTML
+            size : 9
+          },
+          Node : {
+            CanvasStyles : {
+              shadowBlur : 0
+            }
+          },
+          Events : {
+            enable : true,
+            onMouseEnter : function(node, eventInfo) {
+              if (node && node.id != "root") {
+                node.setCanvasStyle('shadowBlur', 7);
+                node.setData('border', '#ffffff');
+                clusterRegionsTreeMap.fx.plotNode(node, clusterRegionsTreeMap.canvas);
+                clusterRegionsTreeMap.labels.plotLabel(clusterRegionsTreeMap.canvas, node);
+              }
+            },
+            onMouseLeave : function(node) {
+              if (node && node.id != "root") {
+                node.removeData('border', '#ffffff');
+                node.removeCanvasStyle('shadowBlur');
+                clusterRegionsTreeMap.plot();
+              }
+            },
+            onClick : function(node) {
+              if (node.id != "root") {
+                location.href ='regionDetail.html?regionFullPath='+node.data.regionPath;
+              }
+            }
+          },
+
+          Tips : {
+            enable : true,
+            offsetX : 5,
+            offsetY : 5,
+            onShow : function(tip, node, isLeaf, domElement) {
+
+              var data = node.data;
+              var html = "";
+              if (data.type) {
+                html = "<div class=\"tip-title\"><div><div class='popupHeading'>"
+                    + node.id
+                    + "</div>"
+                    + "<div class='popupFirstRow'><div class='popupRowBorder borderBottomZero'>"
+                    + "<div class='labeltext left display-block width-45'><span class='left'>"
+                    + "Type</span></div><div class='right width-55'>"
+                    + "<div class='color-d2d5d7 font-size14 popInnerBlockEllipsis'>"
+                    + data.type
+                    + "</div>"
+                    + "</div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-45'>"
+                    + "<span class='left'>" + jQuery.i18n.prop('pulse-entrycount-custom') + "</span></div><div class='right width-55'>"
+                    + "<div class='color-d2d5d7 font-size14'>"
+                    + data.systemRegionEntryCount
+                    + "</div>"
+                    + "</div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-45'>"
+                    + "<span class='left'>" + jQuery.i18n.prop('pulse-entrysize-custom') + "</span></div><div class='right width-55'>"
+                    + "<div class='color-d2d5d7 font-size14'>" 
+                    + data.entrySize
+                    + "</div>"
+                    /*+ "</div></div><div class='popupRowBorder borderBottomZero'><div class='labeltext left display-block width-45'>"
+                    + "<span class='left'>Compression Codec</span></div><div class='right width-55'>"
+                    + "<div class='color-d2d5d7 font-size14'>"
+                    + data.compressionCodec
+                    + "</div>"*/
+                    + "</div></div></div></div>" + "</div>";
+              } else {
+                html = "<div class=\"tip-title\"><div><div class='popupHeading'>No " + jQuery.i18n.prop('pulse-regiontabletooltip-custom') + " Found</div>";
+              }
+
+              tip.innerHTML = html;
+            }
+          },
+          onCreateLabel : function(domElement, node) {
+            domElement.innerHTML = node.name;
+            var style = domElement.style;
+            style.cursor = 'default';
+            style.border = '1px solid';
+
+            style.background = 'none repeat scroll 0 0 #606060';
+            domElement.onmouseover = function() {
+              style.border = '1px solid #9FD4FF';
+              style.background = 'none repeat scroll 0 0 #9FD4FF';
+            };
+            domElement.onmouseout = function() {
+              style.border = '1px solid';
+              style.background = 'none repeat scroll 0 0 #606060';
+            };
+
+          }
+        });
+    clusterRegionsTreeMap.loadJSON(json);
+    clusterRegionsTreeMap.refresh();
+}
+
+// function used for creating blank grids for member list for Cluster Details
+// Screen
+
+function createMemberGridDefault() {
+  
+  jQuery("#memberList").jqGrid(
+      {
+        datatype : "local",
+        height : 360,
+        width : 740,
+        rowNum : 200,
+        shrinkToFit : false,
+        colNames : [ 'ID', 'Name', 'Host', 'Heap Usage (MB)', 'CPU Usage (%)',
+            'Uptime', 'Clients', 'CurrentHeapSize', 'Load Avg', 'Threads',
+            'Sockets'],
+        colModel : [
+            {
+              name : 'memberId',
+              index : 'memberId',
+              width : 170,
+              sorttype : "string",
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true
+            },
+            {
+              name : 'name',
+              index : 'name',
+              width : 150,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "string"
+            },
+            {
+              name : 'host',
+              index : 'host',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "string"
+            },
+            {
+              name : 'currentHeapUsage',
+              index : 'currentHeapUsage',
+              width : 110,
+              align : 'right',
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "float"
+            },
+            {
+              name : 'cpuUsage',
+              index : 'cpuUsage',
+              align : 'right',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "float"
+            },
+            {
+              name : 'uptime',
+              index : 'uptime',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "int"
+            },
+            {
+              name : 'clients',
+              index : 'clients',
+              width : 100,
+              align : 'right',
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "int"
+            }, {
+              name : 'currentHeapUsage',
+              index : 'currentHeapUsage',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'loadAvg',
+              index : 'loadAvg',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'threads',
+              index : 'threads',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'sockets',
+              index : 'sockets',
+              align : 'center',
+              width : 0,
+              hidden : true
+            } ],
+        userData : {
+          "sortOrder" : "asc",
+          "sortColName" : "name"
+        },
+        onSortCol : function(columnName, columnIndex, sortorder) {
+          // Set sort order and sort column in user variables so that
+          // periodical updates can maintain the same
+          var gridUserData = jQuery("#memberList").getGridParam('userData');
+          gridUserData.sortColName = columnName;
+          gridUserData.sortOrder = sortorder;
+        },
+        onSelectRow : function(rowid, status, event) {
+          if (!event || event.which == 1) { // mouse left button click
+            var member = rowid.split("&");
+            location.href = 'MemberDetails.html?member=' + member[0]
+                + '&memberName=' + member[1];
+          }
+        },
+        resizeStop : function(width, index) {
+
+          var memberRegionsList = $('#gview_memberList');
+          var memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+          var api = memberRegionsListChild.data('jsp');
+          api.reinitialise();
+
+          memberRegionsList = $('#gview_memberList');
+          memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_memberList');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });
+          
+          $('#default_grid_button').click();
+          refreshTheGrid($('#default_grid_button'));
+        },
+        gridComplete : function() {
+          $(".jqgrow").css({
+            cursor : 'default'
+          });
+
+          var memberRegionsList = $('#gview_memberList');
+          var memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_memberList');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });
+        }
+      });
+}
+
+function createMemberGridSG() {
+  
+  jQuery("#memberListSG").jqGrid(
+      {
+        datatype : "local",
+        height : 360,
+        width : 740,
+        rowNum : 200,
+        shrinkToFit : false,
+        colNames : [ 'Server Group','ID', 'Name', 'Host', 'Heap Usage (MB)', 'CPU Usage (%)',
+            'Uptime', 'Clients', 'CurrentHeapSize', 'Load Avg', 'Threads',
+            'Sockets'],
+        colModel : [
+            {
+              name : 'serverGroup',
+              index : 'serverGroup',
+              width : 170,
+              sorttype : "string",
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true
+            },
+            {
+              name : 'memberId',
+              index : 'memberId',
+              width : 170,
+              sorttype : "string",
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true
+            },
+            {
+              name : 'name',
+              index : 'name',
+              width : 150,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "string"
+            },
+            {
+              name : 'host',
+              index : 'host',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "string"
+            },
+            {
+              name : 'currentHeapUsage',
+              index : 'currentHeapUsage',
+              width : 110,
+              align : 'right',
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "float"
+            },
+            {
+              name : 'cpuUsage',
+              index : 'cpuUsage',
+              align : 'right',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "float"
+            },
+            {
+              name : 'uptime',
+              index : 'uptime',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "int"
+            },
+            {
+              name : 'clients',
+              index : 'clients',
+              width : 100,
+              align : 'right',
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "int"
+            }, {
+              name : 'currentHeapUsage',
+              index : 'currentHeapUsage',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'loadAvg',
+              index : 'loadAvg',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'threads',
+              index : 'threads',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'sockets',
+              index : 'sockets',
+              align : 'center',
+              width : 0,
+              hidden : true
+            } ],
+        userData : {
+          "sortOrder" : "asc",
+          "sortColName" : "serverGroup"
+        },
+        onSortCol : function(columnName, columnIndex, sortorder) {
+          // Set sort order and sort column in user variables so that
+          // periodical updates can maintain the same
+          var gridUserData = jQuery("#memberListSG").getGridParam('userData');
+          gridUserData.sortColName = columnName;
+          gridUserData.sortOrder = sortorder;
+        },
+        onSelectRow : function(rowid, status, event) {
+          if (!event || event.which == 1) { // mouse left button click
+            var member = rowid.split("&");
+            location.href = 'MemberDetails.html?member=' + member[0]
+                + '&memberName=' + member[1];
+          }
+        },
+        resizeStop : function(width, index) {
+
+          var memberRegionsList = $('#gview_memberListSG');
+          var memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+          var api = memberRegionsListChild.data('jsp');
+          api.reinitialise();
+
+          memberRegionsList = $('#gview_memberListSG');
+          memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_memberListSG');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });
+          
+          $('#servergroups_grid_button').click();
+          refreshTheGrid($('#servergroups_grid_button'));
+        },
+        gridComplete : function() {
+          $(".jqgrow").css({
+            cursor : 'default'
+          });
+
+          var memberRegionsList = $('#gview_memberListSG');
+          var memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_memberListSG');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });
+        }
+      });
+}
+
+function createMemberGridRZ() {
+  
+  jQuery("#memberListRZ").jqGrid(
+      {
+        datatype : "local",
+        height : 360,
+        width : 740,
+        rowNum : 200,
+        shrinkToFit : false,
+        colNames : [ 'Redundancy Zone','ID', 'Name', 'Host', 'Heap Usage (MB)', 'CPU Usage (%)',
+            'Uptime', 'Clients', 'CurrentHeapSize', 'Load Avg', 'Threads',
+            'Sockets'],
+        colModel : [
+            {
+              name : 'redundancyZone',
+              index : 'redundancyZone',
+              width : 170,
+              sorttype : "string",
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true
+            },
+            {
+              name : 'memberId',
+              index : 'memberId',
+              width : 170,
+              sorttype : "string",
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true
+            },
+            {
+              name : 'name',
+              index : 'name',
+              width : 150,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "string"
+            },
+            {
+              name : 'host',
+              index : 'host',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "string"
+            },
+            {
+              name : 'currentHeapUsage',
+              index : 'currentHeapUsage',
+              width : 110,
+              align : 'right',
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "float"
+            },
+            {
+              name : 'cpuUsage',
+              index : 'cpuUsage',
+              align : 'right',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "float"
+            },
+            {
+              name : 'uptime',
+              index : 'uptime',
+              width : 100,
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "int"
+            },
+            {
+              name : 'clients',
+              index : 'clients',
+              width : 100,
+              align : 'right',
+              cellattr : function(rowId, val, rawObject, cm, rdata) {
+                return formMemberGridToolTip(rawObject);
+              },
+              sortable : true,
+              sorttype : "int"
+            }, {
+              name : 'currentHeapUsage',
+              index : 'currentHeapUsage',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'loadAvg',
+              index : 'loadAvg',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'threads',
+              index : 'threads',
+              align : 'center',
+              width : 0,
+              hidden : true
+            }, {
+              name : 'sockets',
+              index : 'sockets',
+              align : 'center',
+              width : 0,
+              hidden : true
+            } ],
+        userData : {
+          "sortOrder" : "asc",
+          "sortColName" : "redundancyZone"
+        },
+        onSortCol : function(columnName, columnIndex, sortorder) {
+          // Set sort order and sort column in user variables so that
+          // periodical updates can maintain the same
+          var gridUserData = jQuery("#memberListRZ").getGridParam('userData');
+          gridUserData.sortColName = columnName;
+          gridUserData.sortOrder = sortorder;
+        },
+        onSelectRow : function(rowid, status, event) {
+          if (!event || event.which == 1) { // mouse left button click
+            var member = rowid.split("&");
+            location.href = 'MemberDetails.html?member=' + member[0]
+                + '&memberName=' + member[1];
+          }
+        },
+        resizeStop : function(width, index) {
+
+          var memberRegionsList = $('#gview_memberListRZ');
+          var memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+          var api = memberRegionsListChild.data('jsp');
+          api.reinitialise();
+
+          memberRegionsList = $('#gview_memberListRZ');
+          memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_memberListRZ');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });
+          
+          $('#redundancyzones_grid_button').click();
+          refreshTheGrid($('#redundancyzones_grid_button'));
+        },
+        gridComplete : function() {
+          $(".jqgrow").css({
+            cursor : 'default'
+          });
+
+          var memberRegionsList = $('#gview_memberListRZ');
+          var memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_memberListRZ');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });
+        }
+      });
+}
+
+function createRegionsGridDefault() {
+  
+  jQuery("#regionsList").jqGrid(
+      {
+        datatype : "local",
+        height : 360,
+        width : 740,
+        rowNum : 200,
+        shrinkToFit : false,
+        colNames : [ 'Region Name', 'Type', 'Entry Count', 'Entry Size',
+                     'Region Path', 'Member Count', 'Read Rates', 'Write Rates',
+                     'Persistence', 'Entry Count', 'Empty Nodes', 'Data Usage',
+                     'Total Data Usage', 'Memory Usage', 'Total Memory',
+                     'Member Names', 'Writes', 'Reads','Off Heap Enabled',
+                     'Compression Codec','HDFS Write Only' ],
+        colModel : [ {
+          name : 'name',
+          index : 'name',
+          width : 120,
+          sortable : true,
+          sorttype : "string"
+        }, {
+          name : 'type',
+          index : 'type',
+          width : 130,
+          sortable : true,
+          sorttype : "string"
+        }, {
+          name : 'systemRegionEntryCount',
+          index : 'systemRegionEntryCount',
+          width : 100,
+          align : 'right',
+          sortable : true,
+          sorttype : "int"
+        }, {
+          name : 'entrySize',
+          index : 'entrySize',
+          width : 100,
+          align : 'right',
+          sortable : true,
+          sorttype : "int"
+        }, {
+          name : 'regionPath',
+          index : 'regionPath',
+          //hidden : true,
+          width : 130,
+          sortable : true,
+          sorttype : "string"
+        }, {
+          name : 'memberCount',
+          index : 'memberCount',
+          hidden : true
+        }, {
+          name : 'getsRate',
+          index : 'getsRate',
+          hidden : true
+        }, {
+          name : 'putsRate',
+          index : 'putsRate',
+          hidden : true
+        }, {
+          name : 'persistence',
+          index : 'persistence',
+          //hidden : true,
+          width : 100,
+          sortable : true,
+          sorttype : "string"
+        }, {
+          name : 'systemRegionEntryCount',
+          index : 'systemRegionEntryCount',
+          hidden : true
+        }, {
+          name : 'emptyNodes',
+          index : 'emptyNodes',
+          hidden : true
+        }, {
+          name : 'dataUsage',
+          index : 'dataUsage',
+          hidden : true
+        }, {
+          name : 'totalDataUsage',
+          index : 'totalDataUsage',
+          hidden : true
+        }, {
+          name : 'memoryUsage',
+          index : 'memoryUsage',
+          hidden : true
+        }, {
+          name : 'totalMemory',
+          index : 'totalMemory',
+          hidden : true
+        }, {
+          name : 'memberNames',
+          index : 'memberNames',
+          hidden : true
+        }, {
+          name : 'writes',
+          index : 'writes',
+          hidden : true
+        }, {
+          name : 'reads',
+          index : 'reads',
+          hidden : true
+        }, {
+          name : 'isEnableOffHeapMemory',
+          index : 'isEnableOffHeapMemory',
+          hidden : true,
+          width : 120,
+          sortable : true,
+          sorttype : "string"
+        }, {
+          name : 'compressionCodec',
+          index : 'compressionCodec',
+          hidden : true
+        }, {
+          name : 'isHDFSWriteOnly',
+          index : 'isHDFSWriteOnly',
+          hidden : true
+        }],
+        userData : {
+          "sortOrder" : "asc",
+          "sortColName" : "name"
+        },
+        onSortCol : function(columnName, columnIndex, sortorder) {
+          // Set sort order and sort column in user variables so that
+          // periodical updates can maintain the same
+          var gridUserData = jQuery("#regionsList").getGridParam('userData');
+          gridUserData.sortColName = columnName;
+          gridUserData.sortOrder = sortorder;
+        },
+        onSelectRow : function(rowid, status, event) {
+          if (!event || event.which == 1) { // mouse left button click
+            var region = rowid.split("&");
+            location.href = 'regionDetail.html?regionFullPath=' + region[0];
+          }
+        },
+        resizeStop : function(width, index) {
+
+          var clusterRegionsList = $('#gview_regionsList');
+          var clusterRegionsListChild = clusterRegionsList
+              .children('.ui-jqgrid-bdiv');
+          var api = clusterRegionsListChild.data('jsp');
+          api.reinitialise();
+
+          /*memberRegionsList = $('#gview_regionsList');
+          memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_regionsList');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });*/
+          
+          $('#data_grid_button').click();
+          refreshTheGrid($('#data_grid_button'));
+        },
+        gridComplete : function() {
+          $(".jqgrow").css({
+            cursor : 'default'
+          });
+
+          var memberRegionsList = $('#gview_regionsList');
+          var memberRegionsListChild = memberRegionsList
+              .children('.ui-jqgrid-bdiv');
+
+          memberRegionsListChild.unbind('jsp-scroll-x');
+          memberRegionsListChild.bind('jsp-scroll-x', function(event,
+              scrollPositionX, isAtLeft, isAtRight) {
+            var mRList = $('#gview_regionsList');
+            var mRLC = mRList.children('.ui-jqgrid-hdiv').children(
+                '.ui-jqgrid-hbox');
+            mRLC.css("position", "relative");
+            mRLC.css('right', scrollPositionX);
+          });
+          
+          // change col names depend on product
+          if(CONST_BACKEND_PRODUCT_SQLFIRE == productname.toLowerCase()){
+            jQuery("#regionsList").jqGrid('setLabel', 'name', jQuery.i18n.prop('pulse-regiontableName-custom'));
+            jQuery("#regionsList").jqGrid('setLabel', 'regionPath', jQuery.i18n.prop('pulse-regiontablePathColName-custom'));
+            jQuery("#regionsList").jqGrid('setLabel', 'getsRate', jQuery.i18n.prop('pulse-readsRate-custom'));
+            jQuery("#regionsList").jqGrid('setLabel', 'putsRate', jQuery.i18n.prop('pulse-writesRate-custom'));
+            jQuery("#regionsList").jqGrid('setLabel', 'writes', jQuery.i18n.prop('pulse-writes-custom'));
+            jQuery("#regionsList").jqGrid('setLabel', 'reads', jQuery.i18n.prop('pulse-reads-custom'));
+            jQuery("#regionsList").jqGrid('setLabel', 'systemRegionEntryCount', jQuery.i18n.prop('pulse-entrycount-custom'));
+            jQuery("#regionsList").jqGrid('setLabel', 'entrySize', jQuery.i18n.prop('pulse-entrysize-custom'));
+          }
+        }
+      });
+}
+
+
+/* builds and returns json from given members details sent by server */
+function buildDefaultMembersTreeMapData(members) {
+
+  var childerensVal = [];
+  for ( var i = 0; i < members.length; i++) {
+
+    var color = "#a0c44a";
+    // setting node color according to the status of member
+    // like if member has severe notification then the node color will be
+    // '#ebbf0f'
+    for ( var j = 0; j < warningAlerts.length; j++) {
+      if (members[i].name == warningAlerts[j].memberName) {
+        color = '#ebbf0f';
+        break;
+      }
+    }
+    // if member has severe notification then the node color will be
+    // '#de5a25'
+    for ( var j = 0; j < errorAlerts.length; j++) {
+      if (members[i].name == errorAlerts[j].memberName) {
+        color = '#de5a25';
+        break;
+      }
+    }
+    // if member has severe notification then the node color will be
+    // '#b82811'
+    for ( var j = 0; j < severAlerts.length; j++) {
+      if (members[i].name == severAlerts[j].memberName) {
+        color = '#b82811';
+        break;
+      }
+    }
+    var heapSize = members[i][currentHotspotAttribiute];
+    // if (heapSize == 0)
+    // heapSize = 1;
+    var name = "";
+    name = members[i].name;
+    var id = "";
+    id = members[i].memberId;
+    // passing all the required information of member to tooltip
+    var dataVal = {
+      "name" : name,
+      "id" : id,
+      "$color" : color,
+      "$area" : heapSize,
+      "cpuUsage" : members[i].cpuUsage,
+      "heapUsage" : members[i].currentHeapUsage,
+      "loadAvg" : members[i].loadAvg,
+      "threads" : members[i].threads,
+      "sockets" : members[i].sockets,
+      "gemfireVersion" : members[i].gemfireVersion,
+      "initial" : false
+    };
+    var childrenVal = {
+      "children" : [],
+      "data" : dataVal,
+      "id" : id,
+      "name" : name
+    };
+    childerensVal[i] = childrenVal;
+  }
+  var localjson = {
+    "children" : childerensVal,
+    "data" : {},
+    "id" : "root",
+    "name" : "Members"
+  };
+  return localjson;
+}
+
+/* builds treemap json for Server Groups  */
+function buildSGMembersTreeMapData(members) {
+  
+  // Server Groups
+  var serverGroups = new Array();
+  var sgChildren = [];
+
+  for ( var i = 0; i < members.length; i++) {
+    // add Server Group if not present
+    var memServerGroups = members[i].serverGroups;
+
+    for ( var cntr = 0; cntr < memServerGroups.length; cntr++) {
+      if ($.inArray(memServerGroups[cntr], serverGroups) == -1) {
+        serverGroups.push(memServerGroups[cntr]);
+        var sgChild = {
+            "children" : new Array(),
+            "data" : {
+              "$area" : 1,
+              "initial" : false
+             },
+            "id" : memServerGroups[cntr],
+            "name" : memServerGroups[cntr]
+          };
+        sgChildren.push(sgChild);
+      }
+    }
+
+  }
+
+  var localjson = {
+    "children" : sgChildren,
+    "data" : {},
+    "id" : "root",
+    "name" : "sgMembers"
+  };
+
+
+  for ( var i = 0; i < members.length; i++) {
+
+    var color = "#a0c44a";
+    // setting node color according to the status of member
+    // like if member has severe notification then the node color will be
+    // '#ebbf0f'
+    for ( var j = 0; j < warningAlerts.length; j++) {
+      if (members[i].name == warningAlerts[j].memberName) {
+        color = '#ebbf0f';
+        break;
+      }
+    }
+    // if member has severe notification then the node color will be
+    // '#de5a25'
+    for ( var j = 0; j < errorAlerts.length; j++) {
+      if (members[i].name == errorAlerts[j].memberName) {
+        color = '#de5a25';
+        break;
+      }
+    }
+    // if member has severe notification then the node color will be
+    // '#b82811'
+    for ( var j = 0; j < severAlerts.length; j++) {
+      if (members[i].name == severAlerts[j].memberName) {
+        color = '#b82811';
+        break;
+      }
+    }
+    var heapSize = members[i][currentHotspotAttribiute];
+    // if (heapSize == 0)
+    // heapSize = 1;
+    var name = "";
+    name = members[i].name;
+    var id = "";
+    id = members[i].memberId;
+    // passing all the required information of member to tooltip
+    var dataVal = {
+      "name" : name,
+      "id" : id,
+      "$color" : color,
+      "$area" : heapSize,
+      "cpuUsage" : members[i].cpuUsage,
+      "heapUsage" : members[i].currentHeapUsage,
+      "loadAvg" : members[i].loadAvg,
+      "threads" : members[i].threads,
+      "sockets" : members[i].sockets,
+      "gemfireVersion" : members[i].gemfireVersion,
+      "initial" : false
+    };
+    var childrenVal = {
+      "children" : [],
+      "data" : dataVal,
+      "id" : id,
+      "name" : name
+    };
+
+    var memServerGroups = members[i].serverGroups;
+    
+    for(var k=0; k<memServerGroups.length; k++){
+      var localJsonChildren = localjson.children;
+      for(var l=0; l<localJsonChildren.length; l++){
+        if(localJsonChildren[l].name == memServerGroups[k]){
+          // create copy of member treemap child for the current server group
+          var copyOFChildren = jQuery.extend(true, {}, childrenVal);
+          copyOFChildren.id = memServerGroups[k]+"(!)"+childrenVal.id;
+          // Add member child in server group treemap object
+          localJsonChildren[l].children.push(copyOFChildren);
+        }
+      }
+    }
+  }
+  
+  return localjson;
+}
+
+/* builds treemap json for Redundancy Zones  */
+function buildRZMembersTreeMapData(members) {
+  
+  // Redundancy Zones
+  var redundancyZones = new Array();
+  var rzChildren = [];
+
+  for ( var i = 0; i < members.length; i++) {
+    // add redundancy zones if not present
+    var memRedundancyZones = members[i].redundancyZones;
+
+    for ( var cntr = 0; cntr < memRedundancyZones.length; cntr++) {
+      if ($.inArray(memRedundancyZones[cntr], redundancyZones) == -1) {
+        redundancyZones.push(memRedundancyZones[cntr]);
+        var rzChild = {
+            "children" : new Array(),
+            "data" : {
+              "$area" : 1,
+              "initial" : false
+             },
+            "id" : memRedundancyZones[cntr],
+            "name" : memRedundancyZones[cntr]
+          };
+        rzChildren.push(rzChild);
+      }
+    }
+
+  }
+
+  var localjson = {
+    "children" : rzChildren,
+    "data" : {},
+    "id" : "root",
+    "name" : "rzMembers"
+  };
+
+
+  for ( var i = 0; i < members.length; i++) {
+
+    var color = "#a0c44a";
+    // setting node color according to the status of member
+    // like if member has severe notification then the node color will be
+    // '#ebbf0f'
+    for ( var j = 0; j < warningAlerts.length; j++) {
+      if (members[i].name == warningAlerts[j].memberName) {
+        color = '#ebbf0f';
+        break;
+      }
+    }
+    // if member has severe notification then the node color will be
+    // '#de5a25'
+    for ( var j = 0; j < errorAlerts.length; j++) {
+      if (members[i].name == errorAlerts[j].memberName) {
+        color = '#de5a25';
+        break;
+      }
+    }
+    // if member has severe notification then the node color will be
+    // '#b82811'
+    for ( var j = 0; j < severAlerts.length; j++) {
+      if (members[i].name == severAlerts[j].memberName) {
+        color = '#b82811';
+        break;
+      }
+    }
+    var heapSize = members[i][currentHotspotAttribiute];
+    // if (heapSize == 0)
+    // heapSize = 1;
+    var name = "";
+    name = members[i].name;
+    var id = "";
+    id = members[i].memberId;
+    // passing all the required information of member to tooltip
+    var dataVal = {
+      "name" : name,
+      "id" : id,
+      "$color" : color,
+      "$area" : heapSize,
+      "cpuUsage" : members[i].cpuUsage,
+      "heapUsage" : members[i].currentHeapUsage,
+      "loadAvg" : members[i].loadAvg,
+      "threads" : members[i].threads,
+      "sockets" : members[i].sockets,
+      "gemfireVersion" : members[i].gemfireVersion,
+      "initial" : false
+    };
+    var childrenVal = {
+      "children" : [],
+      "data" : dataVal,
+      "id" : id,
+      "name" : name
+    };
+
+    var memRedundancyZones = members[i].redundancyZones;
+    for(var k=0; k<memRedundancyZones.length; k++){
+      var localJsonChildren = localjson.children;
+      for(var l=0; l<localJsonChildren.length; l++){
+        if(localJsonChildren[l].name == memRedundancyZones[k]){
+          // create copy of member treemap child for the current redundancy zone
+          var copyOFChildren = jQuery.extend(true, {}, childrenVal);
+          copyOFChildren.id = memRedundancyZones[k]+"(!)"+childrenVal.id;
+          // Add member child in reduadancy zone treemap object
+          localJsonChildren[l].children.push(copyOFChildren);
+        }
+      }
+    }
+  }
+  
+  return localjson;
+}
+
+/* builds treemap json for Cluster Regions  */
+function buildRegionsTreeMapData(clusterRegions) {
+
+  // variable to store value of total of entry counts of all regions
+  var totalOfEntryCounts = 0;
+  // flag to determine if all regions are having entry count = 0
+  var flagSetEntryCountsToZero = false;
+
+  // Calculate the total of all regions entry counts
+  for ( var i = 0; i < clusterRegions.length; i++) {
+    totalOfEntryCounts += clusterRegions[i].entryCount;
+  }
+
+  // If totalOfEntryCounts is zero and at least one region is present
+  // then set flagSetEntryCountsToZero to avoid displaying circles
+  // in treemap as all valid regions are zero area regions and also display
+  // all regions with evenly placement of blocks
+  if (totalOfEntryCounts == 0 && clusterRegions.length > 0) {
+    flagSetEntryCountsToZero = true;
+  }
+
+  var childerensVal = [];  
+
+  for ( var i = 0; i < clusterRegions.length; i++) {
+
+    var entryCount = clusterRegions[i].systemRegionEntryCount;
+    // If flagSetEntryCountsToZero is true then set entry count to
+    // display all
+    // regions with evenly placement of blocks
+    if (flagSetEntryCountsToZero && entryCount == 0) {
+      entryCount = 1;
+    }
+    var color = colorCodeForRegions;
+    if(clusterRegions[i].systemRegionEntryCount == 0){
+      color = colorCodeForZeroEntryCountRegions;
+    }
+
+    var wanEnabled = clusterRegions[i].wanEnabled;
+    var wanEnabledtxt = "";
+    if (wanEnabled == true)
+      wanEnabledtxt = "WAN Enabled";
+    // if (entryCount == 0)
+    // entryCount = 1;
+    var dataVal = {
+      "name" : clusterRegions[i].name,
+      "id" : clusterRegions[i].regionPath,
+      "$color" : color,
+      "$area" : entryCount,
+      "systemRegionEntryCount" : clusterRegions[i].systemRegionEntryCount,
+      "type" : clusterRegions[i].type,
+      "regionPath" : clusterRegions[i].regionPath,
+      "entrySize" : clusterRegions[i].entrySize,
+      "memberCount" : clusterRegions[i].memberCount,
+      "writes" : clusterRegions[i].putsRate,
+      "reads" : clusterRegions[i].getsRate,
+      "emptyNodes" : clusterRegions[i].emptyNodes,
+      "persistence" : clusterRegions[i].persistence,
+      "isEnableOffHeapMemory" : clusterRegions[i].isEnableOffHeapMemory,
+      "compressionCodec" : clusterRegions[i].compressionCodec,
+      "isHDFSWriteOnly" : clusterRegions[i].isHDFSWriteOnly,
+      "memberNames" : clusterRegions[i].memberNames,
+      "memoryWritesTrend" : clusterRegions[i].memoryWritesTrend,
+      "memoryReadsTrend" : clusterRegions[i].memoryReadsTrend,
+      "diskWritesTrend" : clusterRegions[i].diskWritesTrend,
+      "diskReadsTrend" : clusterRegions[i].diskReadsTrend,
+      "memoryUsage" : clusterRegions[i].memoryUsage,
+      "dataUsage" : clusterRegions[i].dataUsage,
+      "totalDataUsage" : clusterRegions[i].totalDataUsage,
+      "totalMemory" : clusterRegions[i].totalMemory
+    };
+    var childrenVal = {
+      "children" : [],
+      "data" : dataVal,
+      "id" : clusterRegions[i].regionPath,
+      "name" : wanEnabledtxt
+    };
+    
+    childerensVal[i] = childrenVal;
+  }
+
+   
+
+  var json = {
+    "children" : childerensVal,
+    "data" : {},
+    "id" : "root",
+    "name" : "Regions"
+  };
+
+  return json;
+
+}
+
+/* builds grid data for Server Groups  */
+function buildSGMembersGridData(members) {
+  var sgMembersGridData = new Array();
+  // Server Groups
+  var serverGroups = new Array();
+
+  for ( var i = 0; i < members.length; i++) {
+    // add Server Group if not present
+    var memServerGroups = members[i].serverGroups;
+
+    for ( var cntr = 0; cntr < memServerGroups.length; cntr++) {
+      if ($.inArray(memServerGroups[cntr], serverGroups) == -1) {
+        serverGroups.push(memServerGroups[cntr]);
+      }
+    }
+
+  }
+  
+  for(var i=0; i<serverGroups.length; i++){
+    var serverGroup = serverGroups[i];
+    for(var j=0; j<members.length; j++){
+      if ($.inArray(serverGroup, members[j].serverGroups) > -1) {
+        var memberObjectNew = jQuery.extend({}, members[j]);
+        memberObjectNew.serverGroup = serverGroup;
+        sgMembersGridData.push(memberObjectNew);
+      }
+    }
+  }
+  
+  return sgMembersGridData;
+}
+
+/* builds grid data for Redundancy Zones  */
+function buildRZMembersGridData(members) {
+  var rzMembersGridData = new Array();
+  // Server Groups
+  var redundancyZones = new Array();
+
+  for ( var i = 0; i < members.length; i++) {
+    // add Redundancy Zones if not present
+    var memRedundancyZones = members[i].redundancyZones;
+
+    for ( var cntr = 0; cntr < memRedundancyZones.length; cntr++) {
+      if ($.inArray(memRedundancyZones[cntr], redundancyZones) == -1) {
+        redundancyZones.push(memRedundancyZones[cntr]);
+      }
+    }
+
+  }
+  
+  for(var i=0; i<redundancyZones.length; i++){
+    var redundancyZone = redundancyZones[i];
+    for(var j=0; j<members.length; j++){
+      if ($.inArray(redundancyZone, members[j].redundancyZones) > -1) {
+        var memberObjectNew = jQuery.extend({}, members[j]);
+        memberObjectNew.redundancyZone = redundancyZone;
+        rzMembersGridData.push(memberObjectNew);
+      }
+    }
+  }
+  
+  return rzMembersGridData;
+}
+
+// Tool tip for members in grid
+function formMemberGridToolTip(rawObject) {
+  return 'title="Name: ' + rawObject.name + ' , CPU Usage: '
+  + rawObject.cpuUsage + '% , Heap Usage: '
+  + rawObject.currentHeapUsage + 'MB , Load Avg.: '
+  + rawObject.loadAvg + ' , Threads: ' + rawObject.threads
+  + ' , Sockets: ' + rawObject.sockets + '"';
+}
+
+function refreshTheGrid(gridDiv) {
+  setTimeout(function(){gridDiv.click();}, 300);
+}
+
+/*
+ * Show/Hide panels in Widget for Cluster Member's and Data
+ * Function to be called on click of visualization tab icons 
+ */
+// function openTabViewPanel(dataPerspective, viewOption, viewType)
+function openTabViewPanel(thisitem){
+     //alert(thisitem.id+" : "+thisitem.dataset.perspective +" | "+thisitem.dataset.view+" | "+thisitem.dataset.viewoption);
+     var viewPanelBlock = thisitem.dataset.view+"_"+thisitem.dataset.viewoption+"_block";
+     $('#'+viewPanelBlock).siblings().hide();
+     $('#'+viewPanelBlock).show();
+     $(thisitem).siblings().removeClass('active');
+     $(thisitem).addClass('active');
+}
+
+//Start: Widget for Cluster Members and Data
+
+
+
+//Show Members Default/Topology R-Graph View and hide rest
+function showMembersDefaultRgraphPanel() {
+
+  flagActiveTab = "MEM_R_GRAPH_DEF";
+  updateRGraphFlags();
+
+  // populateMemberRGraph using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterMembersRGraph = "";
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterMemberRGraphBack);
+
+}
+
+//Show Members Default/Topology Treemap View and hide rest
+function showMembersDefaultTreemapPanel() {
+
+  flagActiveTab = "MEM_TREE_MAP_DEF";
+
+  // populate Member TreeMap using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterMembers = "";
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterMemberBack);
+
+
+}
+
+//Show Members Default/Topology Grid View and hide rest
+function showMembersDefaultGridPanel() {
+
+  flagActiveTab = "MEM_GRID_DEF";
+
+  // populate Member Grid using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterMembers = ""; // getClusterMembersBack
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterMemberBack);
+
+  $('#default_grid_block').hide();
+  destroyScrollPane('gview_memberList');
+  $('#default_grid_block').show();
+  
+  /* Custom scroll */
+
+  $('.ui-jqgrid-bdiv').each(function(index) {
+    var tempName = $(this).parent().attr('id');
+    if (tempName == 'gview_memberList') {
+      $(this).jScrollPane({maintainPosition : true, stickToRight : true});  
+    }
+  });
+
+}
+
+//Show Members Server Groups Treemap View and hide rest
+function showMembersSGTreemapPanel() {
+
+  flagActiveTab = "MEM_TREE_MAP_SG";
+
+  // populate Member TreeMap using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterMembers = "";
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterMemberBack);
+
+}
+
+//Show Members Server Groups Grid View and hide rest
+function showMembersSGGridPanel() {
+
+  flagActiveTab = "MEM_GRID_SG";
+
+  // populate Member Grid using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterMembers = ""; // getClusterMembersBack
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterMemberBack);
+
+  $('#servergroups_grid_block').hide();
+  destroyScrollPane('gview_memberListSG');
+  $('#servergroups_grid_block').show();
+  
+  /* Custom scroll */
+
+  $('.ui-jqgrid-bdiv').each(function(index) {
+    var tempName = $(this).parent().attr('id');
+    if (tempName == 'gview_memberListSG') {
+      $(this).jScrollPane({maintainPosition : true, stickToRight : true});  
+    }
+  });
+
+}
+
+//Show Members Redundancy Zones Treemap View and hide rest
+function showMembersRZTreemapPanel() {
+  
+  flagActiveTab = "MEM_TREE_MAP_RZ";
+
+  // populate Member TreeMap using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterMembers = "";
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterMemberBack);
+}
+
+//Show Members Redundancy Zones Grid View and hide rest
+function showMembersRZGridPanel() {
+
+  flagActiveTab = "MEM_GRID_RZ";
+
+  // populate Member Grid using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterMembers = "";
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterMemberBack);
+
+  $('#redundancyzones_grid_block').hide();
+  destroyScrollPane('gview_memberListRZ');
+  $('#redundancyzones_grid_block').show();
+  
+  /* Custom scroll */
+
+  $('.ui-jqgrid-bdiv').each(function(index) {
+    var tempName = $(this).parent().attr('id');
+    if (tempName == 'gview_memberListRZ') {
+      $(this).jScrollPane({maintainPosition : true, stickToRight : true});  
+    }
+  });
+
+}
+
+//Show Data Treemap View and hide rest
+function showDataTreemapPanel() {
+  
+  flagActiveTab = "DATA_TREE_MAP_DEF";
+
+  // populate Region TreeMap using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterRegions = "";
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterRegionsBack);
+
+}
+
+//Show Data Grid View and hide rest
+function showDataGridPanel() {
+
+  flagActiveTab = "DATA_GRID_DEF";
+
+  // populate Regions Grid using pulseUpdate
+  var pulseData = new Object();
+  pulseData.ClusterRegions = "";
+  ajaxPost("pulse/pulseUpdate", pulseData, translateGetClusterRegionsBack);
+
+  $('#data_grid_block').hide();
+  destroyScrollPane('gview_regionsList');
+  $('#data_grid_block').show();
+  
+  /* Custom scroll */
+
+  $('.ui-jqgrid-bdiv').each(function(index) {
+    var tempName = $(this).parent().attr('id');
+    if (tempName == 'gview_regionsList') {
+      $(this).jScrollPane({maintainPosition : true, stickToRight : true});  
+    }
+  });
+
+}
+
+// Function to be called on click of visualization tab icons
+function openViewPanel(dataPerspective, dataView, dataViewOption){
+  // Display Loading/Busy symbol
+  $("#loadingSymbol").show();
+
+  selectedPerspectiveView = dataPerspective;
+
+  var viewPanelBlock = dataView+"_"+dataViewOption+"_block";
+  var viewPanelButton = dataView+"_"+dataViewOption+"_button";
+  // Display tab panel
+  $('#'+viewPanelBlock).siblings().hide();
+  $('#'+viewPanelBlock).show();
+  
+  // activate tab button
+  var thisitem = $('#'+viewPanelButton);
+  $(thisitem).siblings().removeClass('active');
+  $(thisitem).addClass('active');
+  
+  if('member' == dataPerspective){
+    selectedMemberViewOption = dataView;
+    if('servergroups' == dataView){ // Server Groups view
+      selectedViewTypeSG = dataViewOption;
+      if('treemap' == dataViewOption){ // Treemap
+        showMembersSGTreemapPanel();
+      }else { // Grid
+        showMembersSGGridPanel();
+      }
+    }else if('redundancyzones' == dataView){ // Redundancy Zones view
+      selectedViewTypeRZ = dataViewOption;
+      if('treemap' == dataViewOption){ // Treemap
+        showMembersRZTreemapPanel();
+      }else { // Grid
+        showMembersRZGridPanel();
+      }
+    }else { // default view
+      selectedViewTypeDefault = dataViewOption;
+      if('treemap' == dataViewOption){ // Treemap
+        showMembersDefaultTreemapPanel();
+      }else if('grid' == dataViewOption){ // Grid
+        showMembersDefaultGridPanel();
+      }else{ // R-Graph
+        showMembersDefaultRgraphPanel();
+      }
+    }
+
+    // Show/hide hotspot dropdown
+    if('treemap' == dataViewOption){
+      $("#hotspotParentContainer").show();
+    }else{
+      $("#hotspotParentContainer").hide();
+    }
+
+  }else{ // 'data' == dataPerspective
+    selectedViewTypeData = dataViewOption;
+    if('treemap' == dataViewOption){ // Treemap
+      showDataTreemapPanel();
+    }else if('grid' == dataViewOption){ // Grid
+      showDataGridPanel();
+    }
+  }
+  // Hide Loading/Busy symbol
+  $("#loadingSymbol").hide();
+}
+
+//Function to be called on click of cluster perspective drop down list
+function onChangeClusterPerspective(n) {
+  for(var i=1;i<=$(".members_data ul li").length;i++){
+    $("#members_data"+i).removeClass("selected");
+  }
+  $("#members_data"+n).addClass("selected");
+
+  if (n == 1) { // Members Perspective
+    $("#member_view_options").show();
+    $("#icons_data_view").hide();
+    $("#icons_member_view_option_default").hide();
+    $("#icons_member_view_option_servergroups").hide();
+    $("#icons_member_view_option_redundancyzones").hide();
+
+    // Check last selected member view option
+    for ( var i = 0; i < $("#member_view_options ul li").length; i++) {
+      var idname = $('#member_view_options ul li').get(i).id;
+      if ($("#" + idname).children("label").hasClass("r_on")) {
+        var iconsbox = "icons_"+idname;
+        $("#" + iconsbox).show();
+      }
+    }
+
+    selectedPerspectiveView = "member";
+
+  } else if (n == 2) { // Data Perspective
+	$("#hotspotParentContainer").hide();
+    $("#member_view_options").hide();
+    $("#icons_data_view").show();
+    $("#icons_member_view_option_default").hide();
+    $("#icons_member_view_option_servergroups").hide();
+    $("#icons_member_view_option_redundancyzones").hide();
+
+    selectedPerspectiveView = "data";
+  }
+
+  // display visualization
+  if("member" == selectedPerspectiveView){
+    // Member perspective
+    if("default" == selectedMemberViewOption){
+      if("rgraph" == selectedViewTypeDefault){
+        openViewPanel('member', 'default','rgraph');
+      }else if("treemap" == selectedViewTypeDefault){
+        openViewPanel('member', 'default','treemap');
+      }else{
+        openViewPanel('member', 'default','grid');
+      }
+    }else if("servergroups" == selectedMemberViewOption){
+      if("treemap" == selectedViewTypeSG){
+        openViewPanel('member', 'servergroups','treemap');
+      }else{
+        openViewPanel('member', 'servergroups','grid');
+      }
+    }else{ // redundancyzones
+      if("treemap" == selectedViewTypeRZ){
+        openViewPanel('member', 'redundancyzones','treemap');
+      }else{
+        openViewPanel('member', 'redundancyzones','grid');
+      }
+    }
+  }else{
+    // Data perspective
+    if("treemap" == selectedViewTypeData){
+      openViewPanel('data', 'data', 'treemap');
+    }else{
+      openViewPanel('data', 'data', 'grid');
+    }
+  }
+
+}
+
+function displayClusterPerspective(perspView){
+  
+}
+
+$(document).ready(function(e) {
+  // Attach click event on outside of the drop down list control.
+  addEventsForMembersOptions();
+
+});
+
+/* 
+ Function to attach click event on outside of the drop down list control.
+*/
+function addEventsForMembersOptions() {
+
+  // Attach click event for radio butons on Memebrs perspective view
+  $(".label_radio input").unbind("click").click(memberOptionSelectionHandler);
+  
+}
+
+// handler to be called on selection of radio options of Member Views
+var memberOptionSelectionHandler = function(){
+
+  $(".label_radio").removeClass("r_on");
+  if ($(this).is(":checked")) {
+    $(this).parent('label').addClass("r_on");
+  } else {
+    $(this).parent('label').removeClass("r_on");
+  }
+  
+  var viewOptionId;
+  if('radio-servergroups' == this.id){
+    viewOptionId = 'member_view_option_servergroups';
+    selectedMemberViewOption = "servergroups";
+    if("treemap" == selectedViewTypeSG){
+      openViewPanel('member', 'servergroups','treemap');
+    }else{
+      openViewPanel('member', 'servergroups','grid');
+    }
+  }else if('radio-redundancyzones' == this.id){
+    viewOptionId = 'member_view_option_redundancyzones';
+    selectedMemberViewOption = "redundancyzones";
+    if("treemap" == selectedViewTypeRZ){
+      openViewPanel('member', 'redundancyzones','treemap');
+    }else{
+      openViewPanel('member', 'redundancyzones','grid');
+    }
+  }else{//radio-default
+    viewOptionId = 'member_view_option_default';
+    selectedMemberViewOption = "default";
+    if("rgraph" == selectedViewTypeDefault){
+      openViewPanel('member', 'default','rgraph');
+    }else if("treemap" == selectedViewTypeDefault){
+      openViewPanel('member', 'default','treemap');
+    }else{
+      openViewPanel('member', 'default','grid');
+    }
+  }
+  
+  // set radio selection
+  $('#'+viewOptionId).siblings().removeClass('selected');
+  $('#'+viewOptionId).addClass("selected");
+  //selectedsubview = id;
+  // Show/Hide Tab buttons 
+  $('#'+'icons_'+viewOptionId).show();
+  $('#'+'icons_'+viewOptionId).siblings().hide();
+
+};
+
+var selectedsubview;
+var viewtypegridtreemap;
+
+/************ on Click Out Side **************************/
+(function(jQuery) {
+   jQuery.fn.clickoutside = function(callback) {
+      var outside = 1, self = $(this);
+      self.cb = callback;
+      this.click(function() {
+         outside = 0;
+      });
+      $(document).click(function() {
+         outside && self.cb();
+         outside = 1;
+      });
+      return $(this);
+   };
+})(jQuery);
+
+// End: Widget for Cluster Members and Data


Mime
View raw message