azkaban-uncached

Restyle JMX page.

12/14/2013 12:21:26 AM

Details

diff --git a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
index ba299db..5b7c321 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
@@ -16,12 +16,11 @@
 
 <!DOCTYPE html> 
 <html>
-	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
+	<head lang="en">
+		
+#parse ("azkaban/webapp/servlet/velocity/style2.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.jmx.view.js"></script>
 		<script type="text/javascript">
@@ -33,148 +32,183 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#set($counter=0)
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-#if($errorMsg)
-<div class="box-error-message"><pre>$errorMsg</pre></div>
-#end
+		
+#set ($current_page="all")
+#set ($counter = 0)
+#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
 
-		<div class="content">
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2><a href="${context}/jmx">Admin JMX Http Page</span></a></h2>
+		<div class="container">
+			
+#if ($errorMsg)
+			<div class="panel panel-danger">
+				<div class="panel-heading">Error</div>
+				<div class="panel-body">
+					$errorMsg
 				</div>
 			</div>
-			<h3 class="subhead">Web Client JMX</h3>
+#end
+
+		</div>
+
+		<div class="az-page-header">
+			<div class="container">
+				<h1>Admin JMX Http Page</h1>
+			</div>
+		</div>
+
+		<div class="container">
 
-			<table id="all-jobs" class="all-jobs job-table">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-#foreach($bean in $mbeans)
-				<tr>
-					<td>${bean.keyPropertyList.get("name")}</td>
-					<td>${bean.domain}</td>
-					<td>${bean.canonicalName}</td>
-					<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.domain}" name="${bean.keyPropertyList.get("name")}">Query</div></td>
-				</tr>
+## Web Client JMX 
 
-				<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-					<td class="expandedFlow" colspan="3">
-						<table class="innerTable">
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Web Client JMX</div>
+						<table id="all-jmx" class="table table-condensed table-bordered table-striped table-hover">
 							<thead>
 								<tr>
-									<th>Attribute Name</th>
-									<th>Value</th>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
 								</tr>
 							</thead>
-							<tbody id="expandBtn-${counter}-tbody">
-							</tbody>
-						</table>
-					</td>
+							<tbody>
+#foreach ($bean in $mbeans)
+							<tr>
+								<td>${bean.keyPropertyList.get("name")}</td>
+								<td>${bean.domain}</td>
+								<td>${bean.canonicalName}</td>
+								<td><button type="button" class="btn btn-default btn-sm query-btn" id="expandBtn-$counter" domain="${bean.domain}" name="${bean.keyPropertyList.get("name")}">Query</button></td>
+							</tr>
+
+							<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+								<td class="expandedFlow" colspan="3">
+									<table class="table table-condensed table-bordered table-striped table-hover">
+										<thead>
+											<tr>
+												<th>Attribute Name</th>
+												<th>Value</th>
+											</tr>
+										</thead>
+										<tbody id="expandBtn-${counter}-tbody">
+										</tbody>
+									</table>
+								</td>
 
-					<td>
-						<div class="btn4 collapse">Collapse</div>
-					</td>
-				</tr>
-#set($counter=$counter + 1)
+								<td>
+									<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+								</td>
+							</tr>
+	#set ($counter = $counter + 1)
 #end
-				</tbody>
-			</table>
+							</tbody>
+						</table>
 
-#foreach($executor in $executorRemoteMBeans.entrySet())
-			<h3 class="subhead">Remote Executor JMX $executor.key</h3>
-			<table class="all-jobs job-table remoteJMX">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					#foreach($bean in $executor.value)
-						<tr>
-							<td>${bean.get("keyPropertyList").get("name")}</td>
-							<td>${bean.get("domain")}</td>
-							<td>${bean.get("canonicalName")}</td>
-							<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$executor.key">Query</div></td>
-						</tr>
-					<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-						<td class="expandedFlow" colspan="3">
-							<table class="innerTable">
-								<thead>
-									<tr>
-										<th>Attribute Name</th>
-										<th>Value</th>
-									</tr>
-								</thead>
-								<tbody id="expandBtn-${counter}-tbody">
-								</tbody>
-							</table>
-						</td>
+					</div>
+				</div>
+			</div>
+			
+#foreach ($executor in $executorRemoteMBeans.entrySet())
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Remote Executor JMX $executor.key</div>
+						<table class="remoteJMX table table-striped table-condensed table-bordered table-hover">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($bean in $executor.value)
+								<tr>
+									<td>${bean.get("keyPropertyList").get("name")}</td>
+									<td>${bean.get("domain")}</td>
+									<td>${bean.get("canonicalName")}</td>
+									<td><button type="button" class="btn btn-default btn-sm query-btn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$executor.key">Query</button></td>
+								</tr>
+								<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+									<td class="expandedFlow" colspan="3">
+										<table class="table table-striped table-condensed table-bordered table-hover">
+											<thead>
+												<tr>
+													<th>Attribute Name</th>
+													<th>Value</th>
+												</tr>
+											</thead>
+											<tbody id="expandBtn-${counter}-tbody">
+											</tbody>
+										</table>
+									</td>
 
-						<td>
-							<div class="btn4 collapse">Collapse</div>
-						</td>
-				</tr>
-				#set($counter=$counter + 1)
-					#end 
-				</tbody>
-			</table>
+									<td>
+										<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+									</td>
+							</tr>
+		#set ($counter = $counter + 1)
+	#end 
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
 #end
+			
+#foreach ($triggerserver in $triggerserverRemoteMBeans.entrySet())
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Remote Trigger Server JMX $triggerserver.key</div>
+						<table class="remoteJMX table table-condensed table-striped table-bordered table-hover">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($bean in $triggerserver.value)
+								<tr>
+									<td>${bean.get("keyPropertyList").get("name")}</td>
+									<td>${bean.get("domain")}</td>
+									<td>${bean.get("canonicalName")}</td>
+									<td><button type="button" class="btn btn-default btn-sm querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$triggerserver.key">Query</button></td>
+								</tr>
+								<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+									<td class="expandedFlow" colspan="3">
+										<table class="table table-striped table-condensed table-bordered table-hover">
+											<thead>
+												<tr>
+													<th>Attribute Name</th>
+													<th>Value</th>
+												</tr>
+											</thead>
+											<tbody id="expandBtn-${counter}-tbody">
+											</tbody>
+										</table>
+									</td>
 
-#foreach($triggerserver in $triggerserverRemoteMBeans.entrySet())
-			<h3 class="subhead">Remote Trigger Server JMX $triggerserver.key</h3>
-			<table class="all-jobs job-table remoteJMX">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					#foreach($bean in $triggerserver.value)
-						<tr>
-							<td>${bean.get("keyPropertyList").get("name")}</td>
-							<td>${bean.get("domain")}</td>
-							<td>${bean.get("canonicalName")}</td>
-							<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$triggerserver.key">Query</div></td>
-						</tr>
-					<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-						<td class="expandedFlow" colspan="3">
-							<table class="innerTable">
-								<thead>
-									<tr>
-										<th>Attribute Name</th>
-										<th>Value</th>
-									</tr>
-								</thead>
-								<tbody id="expandBtn-${counter}-tbody">
-								</tbody>
-							</table>
-						</td>
+									<td>
+										<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+									</td>
+							</tr>
+		#set ($counter = $counter + 1)
+	#end 
+							</tbody>
+						</table>
 
-						<td>
-							<div class="btn4 collapse">Collapse</div>
-						</td>
-				</tr>
-				#set($counter=$counter + 1)
-					#end 
-				</tbody>
-			</table>
+					</div>
+				</div>
+			</div>
 #end
 
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
 		</div>
 	</body>
 </html>
diff --git a/src/web/js/azkaban.jmx.view.js b/src/web/js/azkaban.jmx.view.js
index ee189f6..9aa63ea 100644
--- a/src/web/js/azkaban.jmx.view.js
+++ b/src/web/js/azkaban.jmx.view.js
@@ -17,37 +17,38 @@
 $.namespace('azkaban');
 
 var jmxTableView;
-azkaban.JMXTableView= Backbone.View.extend({
-  events : {
-    "click .querybtn": "queryJMX",
-    "click .collapse": "collapseRow"
-  },
-  initialize : function(settings) {
+azkaban.JMXTableView = Backbone.View.extend({
+	events: {
+		"click .query-btn": "queryJMX",
+		"click .collapse-btn": "collapseRow"
+	},
 
-  },
-  queryJMX : function(evt) {
-	var target = evt.currentTarget;
-	var id = target.id;
+	initialize: function(settings) {
+	},
 	
-	var childID = id + "-child";
-	var tbody = id + "-tbody";
-	
-	var requestURL = contextURL + "/jmx";
-	var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
+	queryJMX: function(evt) {
+		var target = evt.currentTarget;
+		var id = target.id;
+		
+		var childID = id + "-child";
+		var tbody = id + "-tbody";
+		
+		var requestURL = contextURL + "/jmx";
+		var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
 
-	var data = {"ajax":"getAllMBeanAttributes", "mBean":canonicalName};
-	if ($(target).attr("hostPort")) {
-		data.ajax = "getAllExecutorAttributes";
-		data.hostPort = $(target).attr("hostPort");
-	}
-	$.get(
-		requestURL,
-		data,
-		function(data) {
+		var data = {
+			"ajax": "getAllMBeanAttributes", 
+			"mBean": canonicalName
+		};
+		if ($(target).attr("hostPort")) {
+			data.ajax = "getAllExecutorAttributes";
+			data.hostPort = $(target).attr("hostPort");
+		}
+		var successHandler = function(data) {
 			var table = $('#' + tbody);
 			$(table).empty();
 			
-			for(var key in data.attributes) {
+			for (var key in data.attributes) {
 				var value = data.attributes[key];
 				
 				var tr = document.createElement("tr");
@@ -64,28 +65,31 @@ azkaban.JMXTableView= Backbone.View.extend({
 			}
 			
 			var child = $("#" + childID);
-	    	$(child).fadeIn();
-		}
-	);
-  },
-  queryRemote : function(evt) {
-	var target = evt.currentTarget;
-	var id = target.id;
-	
-	var childID = id + "-child";
-	var tbody = id + "-tbody";
+			$(child).fadeIn();
+		};
+		$.get(requestURL, data, successHandler);
+	},
 	
-	var requestURL = contextURL + "/jmx";
-	var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
-	var hostPort = $(target).attr("hostport");
-	$.get(
-		requestURL,
-		{"ajax":"getAllExecutorAttributes", "mBean":canonicalName, "hostPort": hostPort},
-		function(data) {
+	queryRemote: function(evt) {
+		var target = evt.currentTarget;
+		var id = target.id;
+		
+		var childID = id + "-child";
+		var tbody = id + "-tbody";
+		
+		var requestURL = contextURL + "/jmx";
+		var canonicalName = $(target).attr("domain") + ":name=" + $(target).attr("name");
+		var hostPort = $(target).attr("hostport");
+		var requestData = {
+			"ajax": "getAllExecutorAttributes", 
+			"mBean": canonicalName, 
+			"hostPort": hostPort
+		};
+		var successHandler = function(data) {
 			var table = $('#' + tbody);
 			$(table).empty();
 			
-			for(var key in data.attributes) {
+			for (var key in data.attributes) {
 				var value = data.attributes[key];
 				
 				var tr = document.createElement("tr");
@@ -102,20 +106,22 @@ azkaban.JMXTableView= Backbone.View.extend({
 			}
 			
 			var child = $("#" + childID);
-	    	$(child).fadeIn();
-		}
-	);
-  },
-  collapseRow: function(evt) {
-  	$(evt.currentTarget).parent().parent().fadeOut();
-  },
-  render: function() {
-  }
+				$(child).fadeIn();
+		};
+		$.get(requestURL, requestData, successHandler);
+	},
+	
+	collapseRow: function(evt) {
+		$(evt.currentTarget).parent().parent().fadeOut();
+	},
+
+	render: function() {
+	}
 });
 
 var remoteTables = new Array();
 $(function() {
-	jmxTableView = new azkaban.JMXTableView({el:$('#all-jobs')});
+	jmxTableView = new azkaban.JMXTableView({el:$('#all-jmx')});
 	
 	$(".remoteJMX").each(function(item) {
 		var newTableView = new azkaban.JMXTableView({el:$(this)});