You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@geode.apache.org by je...@apache.org on 2016/01/21 23:55:07 UTC
[26/96] [abbrv] [partial] incubator-geode git commit: GEODE-12:
rename pulse to gemfire-pulse and make build pass
http://git-wip-us.apache.org/repos/asf/incubator-geode/blob/446f451a/gemfire-pulse/src/main/webapp/regionDetail.html
----------------------------------------------------------------------
diff --git a/gemfire-pulse/src/main/webapp/regionDetail.html b/gemfire-pulse/src/main/webapp/regionDetail.html
new file mode 100644
index 0000000..e5d50c9
--- /dev/null
+++ b/gemfire-pulse/src/main/webapp/regionDetail.html
@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta http-equiv="CACHE-CONTROL" content="NO-CACHE,NO-STORE" />
+<meta http-equiv="PRAGMA" content="NO-CACHE" />
+<meta http-equiv="EXPIRES" content="-1">
+<title>Pulse</title>
+<link href="css/common.css" rel="stylesheet" type="text/css" />
+<link href="css/style.css" rel="stylesheet" type="text/css" />
+<link type="text/css" href="css/base.css" rel="stylesheet" />
+<link type="text/css" href="css/Treemap.css" rel="stylesheet" />
+<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+<link rel="stylesheet" type="text/css" media="screen" href="css/grid/ui.jqgrid.css" />
+<!-- fix IE Ui issues-->
+<!--[if IE 7]>
+ <link href="css/ie/ie7.css" type="text/css" rel="stylesheet"/>
+ <![endif]-->
+<!--[if IE 8]>
+ <link href="css/ie/ie8.css" type="text/css" rel="stylesheet"/>
+ <![endif]-->
+<!--[if IE 9]>
+ <link href="css/ie/ie9.css" type="text/css" rel="stylesheet"/>
+ <![endif]-->
+<!-- IE Fix for HTML5 Tags -->
+<!--[if lt IE 9]>
+<script src='scripts/lib/html5.js'></script>
+<script type="text/javascript" src="scripts/lib/excanvas.js"></script>
+<script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>
+ <![endif]-->
+<script type="text/javascript" src="scripts/lib/jquery-1.7.2.js"></script>
+<script type="text/javascript" src="scripts/lib/jquery.i18n.properties.js"></script>
+<script type="text/javascript" src="scripts/lib/jit.js"></script>
+<script type="text/javascript" src='scripts/lib/common.js'></script>
+<script type="text/javascript" src="scripts/lib/jquery.mousewheel.js"></script>
+<script type="text/javascript" src="scripts/lib/jquery.jscrollpane.js"></script>
+<script type="text/javascript" src="scripts/lib/jquery.placeholder.js"></script>
+<script type="text/javascript" src="scripts/lib/jquery.sparkline.js"></script>
+<script type="text/javascript" src="scripts/lib/grid.locale-en.js"></script>
+<script type="text/javascript" src="scripts/lib/jquery.jqGrid.src.js"></script>
+<script type="text/javascript" src="scripts/lib/jquery.tablednd.js"></script>
+<script type="text/javascript" src="scripts/lib/jquery.timeago.js"></script>
+
+<script type="text/javascript" src='scripts/pulsescript/regionView.js'></script>
+<script type="text/javascript" src="scripts/pulsescript/PulseCallbacks.js"></script>
+<script type="text/javascript" src="scripts/pulsescript/PulseFunctions.js"></script>
+<script type="text/javascript" src='scripts/pulsescript/common.js'></script>
+<script type="text/javascript" src="scripts/lib/tooltip.js"></script>
+
+<STYLE type="text/css">
+ div.jspDrag {left: -3px;}
+</STYLE>
+</head>
+
+<body onload="return checkMedia();">
+
+<!-- popup (Riya) -->
+<div id="popupDiv" style="position:relative; display: none;" data-role="widget" data-widgetid="ClusterSelectedRegionsMember" data-active ="yes" data-timeline="5000">
+
+ <!-- Large Block-->
+ <div class="content" style="background: none repeat scroll 0 0 #132634;">
+ <h3><span id="idMemberName">M1</span></h3>
+
+ <div class="clearfix">
+ <div class="widthfull-100per left " style="padding-top:5px;">
+ <div class=" popupdetailsBlock">
+ <div class="color-fff font-size15" id="regionMemberEntryCount">0</div>
+ <span class="labeltext">Entry Count</span>
+ </div>
+ <div class="popupdetailsBlock">
+ <div class="color-fff font-size15" id="regionMemberEntrySize">0</div>
+ <span class="labeltext">Entry Size(MB)</span>
+ </div>
+ <div class="marginB5 popupdetailsBlock">
+ <div class="color-fff font-size15" id="regionMemberAccessor">-</div>
+ <span class="labeltext">Accessor</span>
+ </div>
+ </div>
+ <div class="left popupCanvasContentBlock" id="SmallBlock_3">
+ <div style="border-top: 1px solid #4e6277; margin: 0px 10px 5px;"></div>
+ <div class="marginB11 graphBlocksContent">
+ <div class="left">
+ <span class="left">Last 15 Minutes</span>
+ </div>
+ <div class="right marginL10">
+ <span data-prod-custom="pulse-reads-custom" class="left">Reads</span>
+ <span class="left marginL5 colorCodeBlockOnPopup diskReadsCode"></span>
+ </div>
+ <div class="right marginL10">
+ <span data-prod-custom="pulse-writes-custom" class="left">Writes</span>
+ <span class="left marginL5 colorCodeBlockOnPopup diskWritesCode"></span>
+ </div>
+ </div>
+ <div class="clearfix">
+ <div class="left" style="width:135px;">
+ <div class="graphBlocksContent">
+ <div class="color-fff font-size15">
+ <span id="memberMemoryReadsThroughput"> </span>
+ </div>
+ <div class="width100Per">
+ <span class="">Reads</span>
+ </div>
+ <div class="left marginTop6 graphborder" style="background: #132634;">
+ <span class="left lineGraph" id="memberMemoryReadsTrend"> </span>
+ </div>
+ </div>
+ </div>
+ <div class="left" style="width:135px;">
+ <div class="graphBlocksContent">
+ <div class="color-fff font-size15">
+ <span id="memberMemoryWritesThroughput"> </span>
+ </div>
+ <div class="width100Per ">
+ <span class="">Writes</span>
+ </div>
+ <div class="left marginTop6 graphborder" style="background: #132634;">
+ <span class="left lineGraph" id="memberMemoryWritesTrend"> </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="clearfix">
+ <div class="left" style="width:135px;">
+ <div class="graphBlocksContent">
+ <div class="color-fff font-size15">
+ <span id="memberDiskReadsThroughput"> </span>
+ </div>
+ <div class="width100Per">
+ <span class="">Disk Reads</span>
+ </div>
+ <div class="left marginTop6 graphborder" style="background: #132634;">
+ <span class="left lineGraph" id="memberDiskReadsTrend"> </span>
+ </div>
+ </div>
+ </div>
+ <div class="left" style="width:135px; border: 0px solid #889eb9;">
+ <div class="graphBlocksContent" >
+ <div class="color-fff font-size15">
+ <span id="memberDiskWritesThroughput"> </span>
+ </div>
+ <div class="width100Per">
+ <span class="">Disk Writes</span>
+ </div>
+ <div class="left marginTop6 graphborder" style="background: #132634;">
+ <span class="left lineGraph" id="memberDiskWritesTrend"> </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- </div>
+ </div> -->
+ </div>
+ </div>
+</div>
+<!-- popup (Riya) -->
+
+<!-- Connection lost-->
+<div class="connectionLostMasterBlock hide" id="connectionStatusDiv" >
+<div class="connectionLostInnerBlock">
+ <label class="left">Connecting ...</label>
+ <div class="clear"></div>
+ <div id="connectionErrorMsgDiv" class="right"></div>
+</div>
+</div>
+<div id="canvasWidth">
+<!--Top Links-->
+ <div class="headerTopLinksMaster">
+ <div class="right">
+ <div class="left position-relative"><a href="#."class="left headerTopLinks aboutClicked-Off">About</a>
+ <!-- About Dropdown-->
+ <div id="detailsAbout" class="aboutBlock display-none">
+ <div class="aboutDetailsBlock">
+ <div class="left widthfull-100per marginBottom30">
+ <div class="left"><img data-prod-custom="pulse-aboutimg-custom" src="images/about.png">
+ <div>
+ <div class="aboutVersionBlock left" id="pulseVersion"></div>
+ <div class="left termsBlock"> <a id="pulseVersionDetailsLink" href="#dialog1" class="display-none" >Version Details</a></div>
+ </div>
+ </div>
+ <div data-prod-custom="pulse-about-custom" class="right aboutText">The Pulse tool monitors Pivotal™ GemFire© system in real time. It provides health information, detailed operational and configuration data, system alerts, throughput performance and statistics for system members and connected clients.</div>
+ </div>
+ <div class="left widthfull-100per">
+ <div class="left copyright">
+ Copyright © 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 <a href="http://www.pivotal.io/patents"
+ target="_blank" class="termsBlockLink text-center">http://www.pivotal.io/patents</a>.
+ </div>
+
+ <div class="left copyright">Pivotal is a registered
+ trademark or trademark of Pivotal Software, Inc. in the United States and
+ other jurisdictions. All other marks and names mentioned herein
+ may be trademarks of their respective companies.</div>
+
+ <div class="left termsBlock">
+ <a href="oslicenses.txt" target="_blank">Open Source
+ Licenses</a>
+ </div>
+ <!-- <div class="right termsBlock">
+ Pulse <a href="#.">Terms of Service</a>
+ </div>-->
+ </div>
+ </div>
+ </div>
+ <!-- Version Details Popup -->
+ </div>
+ <div class="left headerTopSeperator"></div>
+ <div class="left"><a data-prod-custom="pulse-help-custom" target="_blank" href="http://gemfire.docs.pivotal.io/latest/userguide/index.html#tools_modules/pulse/chapter_overview.html" class="left headerTopLinks">Help</a></div>
+ <div class="left headerTopSeperator"></div>
+ <div class="left headerTopLinks welcomeLabelPRZero">Welcome</div>
+ <div class="left headerTopLinks textbold font-size12" id="userName"></div>
+ <div class="left headerTopSeperator"></div>
+ <div class="left"><a href="pulse/clusterLogout" class="left headerTopLinks">Sign Out</a></div>
+ </div>
+ </div>
+ <!-- Header block-->
+ <header>
+ <div class="left">
+ <a href="#." class="left textbold HeaderLink HeaderLinkActive" id="clusterName" onclick="openClusterDetail();"></a>
+ </div>
+ <div class="textbold right logoBlock"><a href="#.">[LOGO]</a></div>
+ </header>
+ <div class="clear"></div>
+ <div class="subHeader">
+ <ul>
+ <li><a href="#." class="active" onclick="openClusterDetail();">Cluster View</a></li>
+ <!-- Hide Data Browser tab for gemfirexd (Pulse-Cheetah Release) -->
+ <li><a href="#." onclick="openDataBrowser();">Data Browser</a></li>
+ <!-- Hide Query Statistics tab for gemfire -->
+ <li id="subTabQueryStatistics"><a href="#." onclick="openQueryStatistics();">Query Statistics</a></li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+ <!-- Middle block-->
+ <div class="left widthfull-100per">
+ <!--Top Right Block 1-->
+ <div class="right widthfull-100per marginTB10">
+ <!-- Tab -->
+ <div id="notificationsPanel" class="right marginL10 TabTopPanel position-relative"
+ data-role="widget" data-widgetid="CluserAlertNotification" data-active ="yes" data-timeline="5000">
+ </div>
+ <div class="left position-relative membersNameTopMargin"><span class="member_txt" style="font-size: 14px;">Region Name : <span id="regionNameText"></span></span> </div>
+ </div>
+ <!--Middle Block 1-->
+ <div class="left leftBlockCanvas">
+ <div data-role="widget" data-widgetid="ClusterSelectedRegion" data-active ="yes" data-timeline="5000">
+ <div class="dataViewTreeViewBlock">
+ <!-- Large Block-->
+ <div class="canvasBlockLargeDataView marginBR10-11 left">
+ <div class="left widthfull-100per canvasBlockInnerBlock">
+ <span data-prod-custom="pulse-rtSummaryBySize-custom" class="left marginL10 canvasHeading">Region Members</span>
+ <a id="btngridIcon" class="gridIcon " onClick="tabClusterGrid();"></a>
+ <a id="btnchartIcon" class="chartIconActive" onClick="tabTreeMap();" ></a>
+ </div>
+ <div class="left widthfull-100per canvasBlockInnerBlock regionHeading">
+ <!-- Search-->
+ <div class="left marginBottom6 marginL10 marginTop6">
+ <div class="searchBlockMaster">
+ <input type="button" class="searchButton">
+ <!-- <input type="text" placeholder="Search"
+ onkeyup="applyFilterOnClusterRegions();" class="searchBox"
+ id="filterClusterRegionsBox"> -->
+ <input type="text" placeholder="Search"
+ onkeyup="applyFilterOnRegionMembers();" class="searchBox"
+ id="filterRegionMembersBox">
+ </div>
+ </div>
+ </div>
+ <div class="left canvasInnerBlock canvasBlockLargeContentDataView" id="LargeBlock_1">
+ <!--Grid Block-->
+ <div class="graphBlocksPanelDataView left display-none" id="gridBlocks_Panel">
+ <div class="left widthfull-100per">
+ <table id="memberList"></table>
+ </div>
+ </div>
+ <!--chart Block-->
+ <div class="chartBlocksPanelDataView left" id="chartBlocks_Panel">
+ <div class="left widthfull-100per">
+ <div class="clear"></div>
+ <div class="treeViewGraphDataView position-relative">
+ <div id="GraphTreeMap" style="width: 100%; height: 690px; overflow: hidden;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Right Block-->
+ <div class="rightBlockDataView">
+ <!-- Block 1-->
+ <div class="canvasBlockDataView marginB10 left">
+ <!-- <div class="selectedRegionLabel" id="regionName"></div> -->
+ <div class="selectedRegionLabel" id="regionPath"></div>
+ <div class="left width563 canvasBlockInnerBlock regionHeading">
+ <span class="left marginL10 canvasHeading">
+ <!-- <span data-prod-custom="pulse-regionstablePath-custom" class="left">Region Path: </span>
+ <label id="regionPath"></label> -->
+ <span data-prod-custom="pulse-regionstableType-custom" class="left">Region Type: </span>
+ <label id="regionType"></label>
+ </span>
+ </div>
+ <div class="left canvasInnerBlock canvasContentBlockDataView" id="SmallBlock_1">
+ <!-- block 1-->
+ <div class="graphBlocksContentDataView left">
+ <div class="detailsBlock-memberDataView">
+ <div class="color-d2d5d7 font-size20" id="regionMembersText"></div>
+ <span class="labeltext">Members</span></div>
+ <div class="detailsBlock-memberDataView">
+ <div class="color-d2d5d7 font-size20" id="regionEmptyNodes"></div>
+ <span class="labeltext">Empty Nodes</span></div>
+ <div class="detailsBlock-memberDataView">
+ <div class="color-d2d5d7 font-size20" id="regionEntryCountText"></div>
+ <span class="labeltext" data-prod-custom="pulse-entrycount-custom">Entry Count</span></div>
+ <div class="detailsBlock-memberDataView">
+ <div class="color-d2d5d7 font-size20" id="regionDiskUsage"></div>
+ <span class="labeltext">Disk Usage</span></div>
+ <div class="detailsBlock-memberDataView">
+ <div class="color-d2d5d7 font-size20" id="regionPersistence"></div>
+ <span class="labeltext">Persistence</span></div>
+ <!-- <div class="detailsBlock-memberDataView">
+ <div class="color-d2d5d7 font-size20" id="regionIsEnableOffHeapMemory"></div>
+ <span class="labeltext">Off-Heap</span></div>
+ <div class="detailsBlock-memberDataView">
+ <div class="color-d2d5d7 font-size20" id="regionIsHdfsWriteOnly"></div>
+ <span class="labeltext">HDFS Write Only</span></div> -->
+ </div>
+ <div class="clear"></div>
+ <div class="horizontalSeparator"></div>
+ <div class="left widthfull-100per">
+ <div class="left dataViewLeftBlock">
+ <!-- B1 -->
+ <div class="left display-block widthfull-100per marginTop10" id="memoryUsageDiv">
+ <div class="pointGridHeading border-topZero">
+ <span data-prod-custom="pulse-regionMemoryUsage-custom" class="pointHeadingPadding textUpper">Memory Usage</span>
+ </div>
+ <div class="pointGridDataView">
+ <div class="left dataViewUsedMasterBlock">
+ <div class="left widthfull-100per">
+ <div class="usageDataView firstPaddingLeftZero left">
+ <div class="color-d2d5d7 font-size20">
+ <span id="memoryUsed">0</span>
+ <span class="font-size13 paddingL5" id="memoryUsedMBSpan">MB</span>
+ </div>
+ <span class="labeltext">Used</span> </div>
+ <div class="usageDataView lastPaddingLeftZero right">
+ <div class="color-d2d5d7 font-size20">
+ <span id="totalMemory">0</span>
+ <span class="font-size13 paddingL5">MB</span>
+ </div>
+ <span class="labeltext">Total</span> </div>
+ </div>
+ <div class="dataUsedProgressbar">
+ <div class="widthfull-100per">
+ <div class="memoryUsageChart" id="memoryUsage"></div>
+ <div class="memoryUsageValue">
+ <span id="memoryUsageVal"></span>
+ <span class="PerRightMargin">%</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="clear"></div>
+ <div class="horizontalSeparator"></div>
+ <!--B2-->
+ <div class=" border-topZero">
+ <span data-prod-custom="pulse-regionMemoryReadsWrites-custom" class="pointHeadingPadding textUpper">In-Memory Read/Write</span>
+ </div>
+ <div class="dataViewGraphMaster marginzero width100Per">
+ <div class="left display-block widthfull-100per">
+ <div class="left widthfull-100per">
+ <div class="left dataViewUsedMasterBlock">
+ <div class="graphBlocksContent marginB11 ">
+ <div class="left">
+ <span class="left">Last 15 Minutes</span>
+ </div>
+ <div class="right marginL10">
+ <span data-prod-custom="pulse-reads-custom" class="left">Reads</span>
+ <span class="left marginL10 colorCodeBlock diskReadsCode"></span>
+ </div>
+ <div class="right marginL10">
+ <span data-prod-custom="pulse-writes-custom" class="left">Writes</span>
+ <span class="left marginL10 colorCodeBlock diskWritesCode"></span>
+ </div>
+ </div>
+ <div class="">
+ <div class="graphBlocksContent">
+ <div class="color-d2d5d7 font-size20" id="currentReadsPerSec"></div>
+ <span class="labeltext">Reads</span>
+ </div>
+ <div class="widthfull-100per">
+ <div class="dataViewGraph"><span class="left lineGraph" id="readsPerSecTrend"></span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="left display-block widthfull-100per">
+ <div class="left widthfull-100per">
+ <div class="left dataViewUsedMasterBlock marginTop4">
+ <div class="">
+ <div class="graphBlocksContent">
+ <div class="color-d2d5d7 font-size20" id="currentWritesPerSec"></div>
+ <span class="labeltext">Writes</span>
+ </div>
+ <div class="widthfull-100per">
+ <div class="dataViewGraph"><span class="left lineGraph" id="writesPerSecTrend"></span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="left dataViewRightBlock marginL10">
+ <!--B3-->
+ <div class="left display-block widthfull-100per margin marginTop10" id="regionMembersWidgetContainer">
+ <!-- <div class="pointGridHeading border-topZero"><span data-prod-custom="pulse-regionstableMembers-custom" class="pointHeadingPadding textUpper">Region Members</span></div> -->
+ <div>
+ <div class="left regionMembersMasterBlock">
+ <!-- <div class="left widthfull-100per">
+ Search
+ <div class="left marginB10 marginL10">
+ <div class="searchBlockMaster">
+ <input type="button" class="searchButton">
+ <input type="text" placeholder="Search" onkeyup="applyFilterOnMembersList();" class="searchBox" id="filterMembersListBox">
+ </div>
+ </div>
+ <div class="clear"></div>
+ <div class="left regionMembersSearchBlock">
+ <div id="memberNames" class="memberNamescls"></div>
+ </div>
+ </div> -->
+ </div>
+ </div>
+ </div>
+ <div class="clear"></div>
+ <div class="horizontalSeparator"></div>
+ <!--B4-->
+ <div class=" border-topZero">
+ <span data-prod-custom="pulse-regionDiskReadsWrites-custom" class="pointHeadingPadding textUpper">Disk Read/Write</span>
+ </div>
+ <div class="dataViewGraphMaster marginzero width100Per">
+ <div class="left display-block widthfull-100per">
+ <div class="left widthfull-100per">
+ <div class="left dataViewUsedMasterBlock ">
+ <div class="graphBlocksContent marginB11 ">
+ <div class="left">
+ <span class="left">Last 15 Minutes</span>
+ </div>
+ <div class="right marginL10">
+ <span data-prod-custom="pulse-reads-custom" class="left">Reads</span>
+ <span class="left marginL10 colorCodeBlock diskReadsCode"></span>
+ </div>
+ <div class="right marginL10">
+ <span data-prod-custom="pulse-writes-custom" class="left">Writes</span>
+ <span class="left marginL10 colorCodeBlock diskWritesCode"></span>
+ </div>
+ </div>
+ <div class="">
+ <div class="graphBlocksContent">
+ <div class="color-d2d5d7 font-size20" id="currentDiskReadsPerSec"></div>
+ <span class="labeltext">Reads</span>
+ </div>
+ <div class="widthfull-100per">
+ <div class="dataViewGraph"><span class="left lineGraph" id="diskReadsPerSecTrend"></span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="left display-block widthfull-100per">
+ <div class="left widthfull-100per">
+ <div class="left dataViewUsedMasterBlock marginTop4">
+ <div class="">
+ <div class="graphBlocksContent">
+ <div class="color-d2d5d7 font-size20" id="currentDiskWritesPerSec"></div>
+ <span class="labeltext">Writes</span>
+ </div>
+ <div class="widthfull-100per">
+ <div class="dataViewGraph"><span class="left lineGraph" id="diskWritesPerSecTrend"></span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="clear"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+<!-- Placeholder-->
+<script>
+$('input[placeholder], textarea[placeholder]').placeholder();
+</script>
+<!--Popups Block-->
+<div id="boxes">
+ <!-- Version Details popup-->
+ <div id="dialog1" class="window width345" data-role="widget" data-widgetid="PulseVersionDetails" data-active ="yes" data-timeline="5000">
+ <div class="popup_heading"><span>Version Details</span><a href="#" class="closePopup"> </a></div>
+ <div class="popup_contentBlock">
+ <div class="popup-innerblock">
+ <ul class="widthfull-100per left">
+ <li class="left widthfull-100per">
+ <label class="width-40 display-inline-block">Pulse Version:</label>
+ <label class="width-58 display-inline-block" id="pulseVer"></label>
+ </li>
+ <li class="left widthfull-100per">
+ <label class="width-40 display-inline-block">Build Id:</label>
+ <label class="width-58 display-inline-block" id="buildId"></label>
+ </li>
+ <li class="left widthfull-100per">
+ <label class="width-40 display-inline-block">Build Date:</label>
+ <label class="width-58 display-inline-block" id="buildDate"></label>
+ </li>
+ <li class="left widthfull-100per">
+ <label class="width-40 display-inline-block">Source Date:</label>
+ <label class="width-58 display-inline-block" id="sourceDate"></label>
+ </li>
+ <li class="left widthfull-100per">
+ <label class="width-40 display-inline-block">Source Revision:</label>
+ <label class="width-58 display-inline-block" id="sourceRevision"></label>
+ </li>
+ <li class="left widthfull-100per">
+ <label class="width-40 display-inline-block">Source Repository:</label>
+ <label class="width-58 display-inline-block" id="sourceRepository"></label>
+ </li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+ </div>
+ </div>
+ <!-- Mask to cover the whole screen -->
+ <div id="mask"></div>
+</div>
+<div id="tooltip" class="tooltip"></div>
+<div id="region_tooltip" class="tooltip"></div>
+</body>
+</html>
http://git-wip-us.apache.org/repos/asf/incubator-geode/blob/446f451a/gemfire-pulse/src/main/webapp/scripts/lib/common.js
----------------------------------------------------------------------
diff --git a/gemfire-pulse/src/main/webapp/scripts/lib/common.js b/gemfire-pulse/src/main/webapp/scripts/lib/common.js
new file mode 100644
index 0000000..b53cb97
--- /dev/null
+++ b/gemfire-pulse/src/main/webapp/scripts/lib/common.js
@@ -0,0 +1,517 @@
+var isThisGoodResolution;
+var oldSelectedTab;
+/* flagActiveTab valid values
+ * MEM_R_GRAPH_DEF,
+ * MEM_TREE_MAP_DEF, MEM_TREE_MAP_SG, MEM_TREE_MAP_RZ, DATA_TREE_MAP_DEF,
+ * MEM_GRID_DEF, MEM_GRID_SG, MEM_GRID_RZ, DATA_GRID_DEF
+ */
+var flagActiveTab = "";
+
+var currentActiveNotificationTab = "ALL"; // valid values 'ALL', 'SEVERE', 'ERROR', 'WARNING'
+var currentActivePerspective = "MEMBER"; // valid values 'MEMBER', 'DATA'
+var hotspotAttributes = new Array(); // For Hotspot
+var currentHotspotAttribiute = null; // For Hotspot
+
+function checkMedia()
+
+{
+ $('.scroll-pane').jScrollPane();/*
+ * custom scroll bar on body load for 1st tab
+ */
+ $('.scroll-pane_1').jScrollPane();
+ $('.pointGridData').jScrollPane();
+ $('.regionMembersSearchBlock').jScrollPane();
+
+ $('.ui-jqgrid-bdiv').jScrollPane();
+
+ if (document.getElementById('canvasWidth') != null) {
+ var winW, winH;
+ if (document.body && document.body.offsetWidth) {
+ winW = document.body.offsetWidth;
+ winH = document.body.offsetHeight;
+
+ }
+ if (document.compatMode == 'CSS1Compat' && document.documentElement
+ && document.documentElement.offsetWidth) {
+ winW = document.documentElement.offsetWidth;
+ winH = document.documentElement.offsetHeight;
+ }
+ if (window.innerWidth && window.innerHeight) {
+ winW = window.innerWidth;
+ winH = window.innerHeight;
+ }
+
+ document.getElementById('canvasWidth').style.width = "1258px";
+ // alert('Weight: ' + winW );
+ // alert('Height: ' + winH );
+ if (winW <= 1024) {
+
+ document.getElementById('canvasWidth').style.width = "1002px";
+ // document.getElementById("overLapLinkBlock").style.display =
+ // 'none';
+ /* onload hide first top tab block */
+ $('#TopTab_All').hide();
+ $('#btnTopTab_All').removeClass('TopTabLinkActive');
+ isThisGoodResolution = false;
+ } else {
+
+ document.getElementById('canvasWidth').style.width = "1258px";
+ isThisGoodResolution = true;
+ // document.getElementById("overLapLinkBlock").style.display =
+ // 'block';
+ }
+ }
+
+}
+
+/* Version Details Popup handler */
+$(document).ready(function() {
+
+ // popHandler handles the display of pop up window on click event on link
+ function popupHandler(e) {
+ // Cancel the link behavior
+ e.preventDefault();
+
+ // Get the A tag
+ var id = $(this).attr('href');
+
+ // Get the screen height and width
+ var maskHeight = $(document).height();
+ var maskWidth = $(window).width();
+
+ // Set height and width to mask to fill up the whole screen
+ $('#mask').css({
+ 'width' : maskWidth,
+ 'height' : maskHeight
+ });
+
+ // transition effect
+ $('#mask').fadeIn(1000);
+ $('#mask').fadeTo("fast", 0.8);
+
+ // Get the window height and width
+ var winH = $(window).height();
+ var winW = $(window).width();
+
+ // Set the popup window to center
+ $(id).css('top', winH / 2 - $(id).height() / 2);
+ $(id).css('left', winW / 2 - $(id).width() / 2);
+
+ // transition effect
+ $(id).fadeIn(1500);
+
+ }; // end of popupHandler
+
+ // Add popupHandler on click of version details link
+ $('[id=pulseVersionDetailsLink]').click(popupHandler);
+
+ // if close button is clicked
+ $('.window .closePopup').click(function(e) {
+ // Cancel the link behavior
+ e.preventDefault();
+
+ $('#mask').hide();
+ $('.window').hide();
+ });
+ // if input close button is clicked
+ $('.window .closePopupInputButton').click(function(e) {
+ // Cancel the link behavior
+ e.preventDefault();
+
+ $('#mask').hide();
+ $('.window').hide();
+ });
+
+ // if mask is clicked
+ $('#mask').click(function() {
+ $(this).hide();
+ $('.window').hide();
+ });
+
+});
+
+/* About Dropdown */
+$(document).ready(function() {
+ $(".aboutClicked-Off").click(function(e) {
+ e.preventDefault();
+ $("div#detailsAbout").toggle();
+ $(".aboutClicked-Off").toggleClass("aboutClicked-On");
+ });
+
+ $("div#detailsAbout").mouseup(function() {
+ return false;
+ });
+ $(document).mouseup(function(e) {
+ if ($(e.target).parent("a.aboutClicked-Off").length == 0) {
+ $(".aboutClicked-Off").removeClass("aboutClicked-On");
+ $("div#detailsAbout").hide();
+ }
+ });
+
+});
+/* Members name Dropdown */
+$(document).ready(function() {
+ $(".memberClicked-Off").click(function(e) {
+ e.preventDefault();
+ $("div#setting").toggle();
+ $(".memberClicked-Off").toggleClass("memberClicked-On");
+ $('.jsonSuggestScrollFilter').jScrollPane();
+ });
+
+ $("div#setting").mouseup(function() {
+ return false;
+ });
+ $(document).mouseup(function(e) {
+ if ($(e.target).parent("a.memberClicked-Off").length == 0) {
+ $(".memberClicked-Off").removeClass("memberClicked-On");
+ $("div#setting").hide();
+ }
+ });
+
+ /* on off switch */
+ $('#membersButton').addClass('switchActive');
+ $('#switchLinks').show();
+
+ $("#membersButton").click(function(e) {
+ $('#membersButton').addClass('switchActive');
+ $('#dataButton').removeClass('switchActive');
+ $('#switchLinks').show();
+ });
+
+ $("#dataButton").click(function(e) {
+ $('#membersButton').removeClass('switchActive');
+ $('#dataButton').addClass('switchActive');
+ $('#switchLinks').hide();
+ });
+
+});
+/* show block function */
+function showDiv(divSelected) {
+ $('#' + divSelected).show();
+}
+
+/* hide block function */
+function hideDiv(divSelected) {
+ $('#' + divSelected).hide();
+}
+/* Toggle Top Tab */
+function toggleTab(divSelected) {
+ /*
+ * $(document).mouseup(function(e) { $('#'+divSelected).hide(); });
+ */
+
+ if (!isThisGoodResolution) {
+ $('#' + divSelected).toggle();
+ $('.scroll-pane').jScrollPane();
+ if (oldSelectedTab == divSelected) {
+ $('#' + 'btn' + oldSelectedTab).removeClass('TopTabLinkActive');
+ oldSelectedTab = "";
+
+ } else {
+ oldSelectedTab = divSelected;
+ }
+
+ }
+
+}
+
+/* toggle block function */
+function toggleDiv(divSelected) {
+ $('#' + divSelected).toggle();
+ if ($('#' + 'btn' + divSelected).hasClass('minusIcon')) {
+ $('#' + 'btn' + divSelected).addClass('plusIcon');
+ $('#' + 'btn' + divSelected).removeClass('minusIcon');
+ } else {
+ $('#' + 'btn' + divSelected).addClass('minusIcon');
+ $('#' + 'btn' + divSelected).removeClass('plusIcon');
+ }
+
+}
+
+/*---Accordion-----*/
+function accordion() {
+
+ $('.accordion .heading').prepend('<span class="spriteArrow"></span>');
+ $('.accordion .heading').click(
+ function() {
+ var accordionId = $(this).parent().parent().attr('id');
+ accordionId = ('#' + accordionId);
+
+ if ($(this).is('.inactive')) {
+ $(accordionId + ' .active').toggleClass('active').toggleClass(
+ 'inactive').next().slideToggle();
+ $(this).toggleClass('active').toggleClass('inactive');
+ $(this).next().slideToggle();
+ $(this).next().find('.n-heading').removeClass('n-active');
+ $(this).next().find('.n-heading').addClass('n-inactive');
+ $(this).next().find('.n-accordion-content').hide();
+ }
+
+ else {
+ $(this).toggleClass('active').toggleClass('inactive');
+ $(this).next().slideToggle();
+
+ }
+ /* custom scroll bar */
+ $('.ScrollPaneBlock').jScrollPane();
+ });
+ // onload keep open
+ $('.accordion .heading').not('.active').addClass('inactive');
+ $('.accordion .heading.active').next().show();
+}
+
+/*---Accordion Nested-----*/
+function accordionNested() {
+
+ $('.accordionNested .n-heading').prepend(
+ '<span class="n-spriteArrow"></span>');
+ $('.accordionNested .n-heading').click(
+ function() {
+ /* Custom scroll */
+ var accordionIdNested = $(this).parent().parent().attr('id');
+ accordionIdNested = ('#' + accordionIdNested);
+
+ if ($(this).is('.n-inactive')) {
+ $(accordionIdNested + ' .n-active').toggleClass('n-active')
+ .toggleClass('n-inactive').next().slideToggle();
+ $(this).toggleClass('n-active').toggleClass('n-inactive');
+ $(this).next().slideToggle();
+ /* Custom scroll */
+ $('.ui-jqgrid-bdiv').jScrollPane();
+ }
+
+ else {
+ $(this).toggleClass('n-active').toggleClass('n-inactive');
+ $(this).next().slideToggle();
+
+ }
+
+ });
+ // onload keep open
+ $('.accordionNested .n-heading').not('.n-active').addClass('n-inactive');
+ $('.accordionNested .n-heading.n-active').next().show();
+ /* Custom scroll */
+ $('.ui-jqgrid-bdiv').jScrollPane();
+}
+
+/* show panel */
+function tabGridNew(parentId) {
+ $('#gridBlocks_Panel').hide();
+ destroyScrollPane(parentId);
+ $('#gridBlocks_Panel').show();
+ $('#chartBlocks_Panel').hide();
+ $('#graphBlocks_Panel').hide();
+ /* Custom scroll */
+
+ $('.ui-jqgrid-bdiv').each(function(index) {
+ var tempName = $(this).parent().attr('id');
+ if (tempName == parentId) {
+ $(this).jScrollPane({maintainPosition : true, stickToRight : true});
+ }
+ });
+
+ $('#btngridIcon').addClass('gridIconActive');
+ $('#btngridIcon').removeClass('gridIcon');
+
+ $('#btnchartIcon').addClass('chartIcon');
+ $('#btnchartIcon').removeClass('chartIconActive');
+
+ $('#btngraphIcon').addClass('graphIcon');
+ $('#btngraphIcon').removeClass('graphIconActive');
+}
+
+function tabChart() {
+
+ $('#gridBlocks_Panel').hide();
+ $('#chartBlocks_Panel').show();
+ $('#graphBlocks_Panel').hide();
+
+ $('#btngridIcon').addClass('gridIcon');
+ $('#btngridIcon').removeClass('gridIconActive');
+
+ $('#btnchartIcon').addClass('chartIconActive');
+ $('#btnchartIcon').removeClass('chartIcon');
+
+ $('#btngraphIcon').addClass('graphIcon');
+ $('#btngraphIcon').removeClass('graphIconActive');
+}
+
+/* Top tab Panel */
+function tabAll() {
+ // update currentActiveNotificationTab value
+ currentActiveNotificationTab = "ALL";
+ if (isThisGoodResolution) {
+ $('#TopTab_All').show();
+ }
+ $('#TopTab_Error').hide();
+ $('#TopTab_Warning').hide();
+ $('#TopTab_Severe').hide();
+
+ $('#btnTopTab_All').addClass('TopTabLinkActive');
+ $('#btnTopTab_Error').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Warning').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Severe').removeClass('TopTabLinkActive');
+ $('.scroll-pane').jScrollPane();
+}
+
+function tabError() {
+ // update currentActiveNotificationTab value
+ currentActiveNotificationTab = "ERROR";
+ $('#TopTab_All').hide();
+ if (isThisGoodResolution) {
+ $('#TopTab_Error').show();
+ }
+ $('#TopTab_Warning').hide();
+ $('#TopTab_Severe').hide();
+
+ $('#btnTopTab_All').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Error').addClass('TopTabLinkActive');
+ $('#btnTopTab_Warning').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Severe').removeClass('TopTabLinkActive');
+ $('.scroll-pane').jScrollPane();
+}
+
+function tabWarning() {
+ // update currentActiveNotificationTab value
+ currentActiveNotificationTab = "WARNING";
+ $('#TopTab_All').hide();
+ $('#TopTab_Error').hide();
+ if (isThisGoodResolution) {
+ $('#TopTab_Warning').show();
+ }
+ $('#TopTab_Severe').hide();
+
+ $('#btnTopTab_All').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Error').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Warning').addClass('TopTabLinkActive');
+ $('#btnTopTab_Severe').removeClass('TopTabLinkActive');
+ $('.scroll-pane').jScrollPane();
+}
+
+function tabSevere() {
+ // update currentActiveNotificationTab value
+ currentActiveNotificationTab = "SEVERE";
+ $('#TopTab_All').hide();
+ $('#TopTab_Error').hide();
+ $('#TopTab_Warning').hide();
+ if (isThisGoodResolution) {
+ $('#TopTab_Severe').show();
+ }
+
+ $('#btnTopTab_All').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Error').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Warning').removeClass('TopTabLinkActive');
+ $('#btnTopTab_Severe').addClass('TopTabLinkActive');
+ $('.scroll-pane').jScrollPane();
+}
+/* Auto Complete box */
+/**
+ * function used for opening Cluster View
+ */
+function openClusterDetail() {
+ location.href = 'clusterDetail.html';
+}
+/**
+ * function used for opening Data View
+ */
+function openDataView() {
+ location.href = 'dataView.html';
+}
+/**
+ * function used for opening Data Browser
+ */
+function openDataBrowser() {
+ location.href = 'DataBrowser.html';
+}
+
+/**
+ * function used for opening Query statistics
+ */
+function openQueryStatistics() {
+ location.href = 'QueryStatistics.html';
+}
+
+function destroyScrollPane(scrollPaneParentId) {
+ $('.ui-jqgrid-bdiv').each(function(index) {
+ var tempName = $(this).parent().attr('id');
+ if (tempName == scrollPaneParentId) {
+ var api = $(this).data('jsp');
+ api.destroy();
+ }
+ });
+}
+
+//Initial set up for hotspot drop down
+function initHotspotDropDown() {
+
+ var htmlHotSpotList = generateHotSpotListHTML(hotspotAttributes);
+
+ // Set list height
+ if(hotspotAttributes.length <= 5){
+ $("#hotspotListContainer").height(hotspotAttributes.length * 26);
+ }else{
+ $("#hotspotListContainer").height(5 * 26);
+ }
+
+ $('#hotspotList').html(htmlHotSpotList);
+ $('.jsonSuggestScrollFilter').jScrollPane();
+
+ currentHotspotAttribiute = hotspotAttributes[0].id;
+ $('#currentHotSpot').html(hotspotAttributes[0].name);
+
+ // Hot Spot List event handlers
+ $(".hotspotClicked-Off").click(function(e) {
+ e.preventDefault();
+ $("div#hotspotSetting").toggle();
+ $(".hotspotClicked-Off").toggleClass("hotspotClicked-On");
+ $('.jsonSuggestScrollFilter').jScrollPane();
+ });
+
+ $("div#hotspotSetting").mouseup(function() {
+ return false;
+ });
+ $(document).mouseup(function(e) {
+ if ($(e.target).parent("a.hotspotClicked-Off").length == 0) {
+ $(".hotspotClicked-Off").removeClass("hotspotClicked-On");
+ $("div#hotspotSetting").hide();
+ }
+ });
+}
+
+//Function to be called on when Hot Spot selection changes
+function onHotspotChange(element) {
+ if (element != currentHotspotAttribiute) {
+ for ( var cnt = 0; cnt < hotspotAttributes.length; cnt++) {
+ if (element == hotspotAttributes[cnt].id) {
+ currentHotspotAttribiute = hotspotAttributes[cnt].id;
+ $('#currentHotSpot').html(hotspotAttributes[cnt].name);
+ applyHotspot();
+ }
+ }
+ }
+ // Hide drop down
+ $(".hotspotClicked-Off").removeClass("hotspotClicked-On");
+ $("div#hotspotSetting").hide();
+}
+
+//Function to generate HTML for Hot Spot list drop down
+function generateHotSpotListHTML(hotspotAttributes) {
+ var htmlHotSpotList = '';
+ for ( var i = 0; i < hotspotAttributes.length; i++) {
+ htmlHotSpotList += '<div class="resultItemFilter">'
+ + '<a href="#" onclick="onHotspotChange(\'' + hotspotAttributes[i].id
+ + '\');" >' + hotspotAttributes[i].name + '</a></div>';
+ }
+ return htmlHotSpotList;
+}
+
+//Merged 3102 from 702X_maint
+function destroyScrollPane(scrollPaneParentId) {
+ $('.ui-jqgrid-bdiv').each(function(index) {
+ var tempName = $(this).parent().attr('id');
+ if (tempName == scrollPaneParentId) {
+ var api = $(this).data('jsp');
+ api.destroy();
+ }
+ });
+}