azkaban-uncached

Style changes.

11/20/2013 11:20:53 PM

Changes

src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel2.vm 185(+0 -185)

src/java/azkaban/webapp/servlet/velocity/messagedialog2.vm 34(+0 -34)

Details

diff --git a/src/web/js/azkaban.common.utils.js b/src/web/js/azkaban.common.utils.js
index 411de17..147bb94 100644
--- a/src/web/js/azkaban.common.utils.js
+++ b/src/web/js/azkaban.common.utils.js
@@ -16,9 +16,9 @@
 
 function addClass(el, name) {
 	if (!hasClass(el, name)) { 
-			var classes = el.getAttribute("class");
-			classes += classes ? ' ' + name : '' +name;
-			el.setAttribute("class", classes);
+		var classes = el.getAttribute("class");
+		classes += classes ? ' ' + name : '' +name;
+		el.setAttribute("class", classes);
 	}
 }
 
@@ -34,5 +34,5 @@ function hasClass(el, name) {
 	if (classes == null) {
 		return false;
 	}
-   return new RegExp('(\\s|^)'+name+'(\\s|$)').test(classes);
+	return new RegExp('(\\s|^)'+name+'(\\s|$)').test(classes);
 }
diff --git a/src/web/js/azkaban.flow.execute.view.js b/src/web/js/azkaban.flow.execute.view.js
index c84ef57..fd3920f 100644
--- a/src/web/js/azkaban.flow.execute.view.js
+++ b/src/web/js/azkaban.flow.execute.view.js
@@ -39,267 +39,273 @@ function recurseAllDescendents(nodes, disabledMap, id, disable) {
 }
 
 var flowExecuteDialogView;
-azkaban.FlowExecuteDialogView= Backbone.View.extend({
-  events : {
-  	"click .closeExecPanel": "hideExecutionOptionPanel",
-  	"click #schedule-btn" : "scheduleClick",
-  	"click #execute-btn" : "handleExecuteFlow"
-  },
-  initialize : function(settings) {
-  	  this.model.bind('change:flowinfo', this.changeFlowInfo, this);
-  	  
-  	  $("#overrideSuccessEmails").click(function(evt) {
-		 if($(this).is(':checked')){
-		 	$('#successEmails').attr('disabled',null);
-		 }
-		 else {
-		 	$('#successEmails').attr('disabled',"disabled");
-		 }
-  	  });
-  	  
-  	   $("#overrideFailureEmails").click(function(evt) {
-		 if($(this).is(':checked')){
-		 	$('#failureEmails').attr('disabled',null);
-		 }
-		 else {
-		 	$('#failureEmails').attr('disabled',"disabled");
-		 }
-  	  });
-  },
-  render: function() {
-  },
-  getExecutionOptionData: function() {
-	var failureAction = $('#failureAction').val();
-	var failureEmails = $('#failureEmails').val();
-	var successEmails = $('#successEmails').val();
-	var notifyFailureFirst = $('#notifyFailureFirst').is(':checked');
-	var notifyFailureLast = $('#notifyFailureLast').is(':checked');
-	var failureEmailsOverride = $("#overrideFailureEmails").is(':checked');
-	var successEmailsOverride = $("#overrideSuccessEmails").is(':checked');
-	
-	var flowOverride = {};
-	var editRows = $(".editRow");
-	for (var i = 0; i < editRows.length; ++i) {
-		var row = editRows[i];
-		var td = $(row).find('td');
-		var key = $(td[0]).text();
-		var val = $(td[1]).text();
+azkaban.FlowExecuteDialogView = Backbone.View.extend({
+	events : {
+		"click .closeExecPanel": "hideExecutionOptionPanel",
+		"click #schedule-btn" : "scheduleClick",
+		"click #execute-btn" : "handleExecuteFlow"
+	},
+	initialize : function(settings) {
+		this.model.bind('change:flowinfo', this.changeFlowInfo, this);
+		$("#overrideSuccessEmails").click(function(evt) {
+			if($(this).is(':checked')){
+				$('#successEmails').attr('disabled',null);
+			}
+			else {
+				$('#successEmails').attr('disabled',"disabled");
+			}
+				});
+				
+			$("#overrideFailureEmails").click(function(evt) {
+			if($(this).is(':checked')){
+				$('#failureEmails').attr('disabled',null);
+			}
+			else {
+				$('#failureEmails').attr('disabled',"disabled");
+			}
+		});
+	},
+	render: function() {
+	},
+	getExecutionOptionData: function() {
+		var failureAction = $('#failureAction').val();
+		var failureEmails = $('#failureEmails').val();
+		var successEmails = $('#successEmails').val();
+		var notifyFailureFirst = $('#notifyFailureFirst').is(':checked');
+		var notifyFailureLast = $('#notifyFailureLast').is(':checked');
+		var failureEmailsOverride = $("#overrideFailureEmails").is(':checked');
+		var successEmailsOverride = $("#overrideSuccessEmails").is(':checked');
 		
-		if (key && key.length > 0) {
-			flowOverride[key] = val;
+		var flowOverride = {};
+		var editRows = $(".editRow");
+		for (var i = 0; i < editRows.length; ++i) {
+			var row = editRows[i];
+			var td = $(row).find('td');
+			var key = $(td[0]).text();
+			var val = $(td[1]).text();
+			
+			if (key && key.length > 0) {
+				flowOverride[key] = val;
+			}
 		}
-	}
-	
-	var disabled = "";
-	var disabledMap = this.model.get('disabled');
-	for (var dis in disabledMap) {
-		if (disabledMap[dis]) {
-			disabled += dis + ",";
+		
+		var disabled = "";
+		var disabledMap = this.model.get('disabled');
+		for (var dis in disabledMap) {
+			if (disabledMap[dis]) {
+				disabled += dis + ",";
+			}
 		}
-	}
-	
-	var executingData = {
-		projectId: projectId,
-		project: this.projectName,
-		ajax: "executeFlow",
-		flow: this.flowId,
-		disabled: disabled,
-		failureEmailsOverride:failureEmailsOverride,
-		successEmailsOverride:successEmailsOverride,
-		failureAction: failureAction,
-		failureEmails: failureEmails,
-		successEmails: successEmails,
-		notifyFailureFirst: notifyFailureFirst,
-		notifyFailureLast: notifyFailureLast,
-		flowOverride: flowOverride
-	};
-	
-	// Set concurrency option, default is skip
+		
+		var executingData = {
+			projectId: projectId,
+			project: this.projectName,
+			ajax: "executeFlow",
+			flow: this.flowId,
+			disabled: disabled,
+			failureEmailsOverride:failureEmailsOverride,
+			successEmailsOverride:successEmailsOverride,
+			failureAction: failureAction,
+			failureEmails: failureEmails,
+			successEmails: successEmails,
+			notifyFailureFirst: notifyFailureFirst,
+			notifyFailureLast: notifyFailureLast,
+			flowOverride: flowOverride
+		};
+		
+		// Set concurrency option, default is skip
 
-	var concurrentOption = $('input[name=concurrent]:checked').val();
-	executingData.concurrentOption = concurrentOption;
-	if (concurrentOption == "pipeline") {
-		var pipelineLevel = $("#pipelineLevel").val();
-		executingData.pipelineLevel = pipelineLevel;
-	}
-	else if (concurrentOption == "queue") {
-		executingData.queueLevel = $("#queueLevel").val();
-	}
-	
-	return executingData;
-  },
-  changeFlowInfo: function() {
-  	var successEmails = this.model.get("successEmails");
-  	var failureEmails = this.model.get("failureEmails");
-  	var failureActions = this.model.get("failureAction");
-  	var notifyFailure = this.model.get("notifyFailure");
-  	var flowParams = this.model.get("flowParams");
-  	var isRunning = this.model.get("isRunning");
-  	var concurrentOption = this.model.get("concurrentOption");
-  	var pipelineLevel = this.model.get("pipelineLevel");
-  	var pipelineExecutionId = this.model.get("pipelineExecution");
-  	var queueLevel = this.model.get("queueLevel");
-  	var nodeStatus = this.model.get("nodeStatus");
-  	var overrideSuccessEmails = this.model.get("overrideSuccessEmails");
-  	var overrideFailureEmails = this.model.get("overrideFailureEmails");
-  	
-	if (overrideSuccessEmails) {
-		$('#overrideSuccessEmails').attr('checked', true);
-	}
-	else {
-		$('#successEmails').attr('disabled','disabled');
-	}
-	if (overrideFailureEmails) {
-		$('#overrideFailureEmails').attr('checked', true);
-	}
-	else {
-		$('#failureEmails').attr('disabled','disabled');
-	}
-  	
-  	if (successEmails) {
-  		$('#successEmails').val(successEmails.join());
-  	}
-  	if (failureEmails) {
-  		$('#failureEmails').val(failureEmails.join());
-  	}
-  	if (failureActions) {
+		var concurrentOption = $('input[name=concurrent]:checked').val();
+		executingData.concurrentOption = concurrentOption;
+		if (concurrentOption == "pipeline") {
+			var pipelineLevel = $("#pipelineLevel").val();
+			executingData.pipelineLevel = pipelineLevel;
+		}
+		else if (concurrentOption == "queue") {
+			executingData.queueLevel = $("#queueLevel").val();
+		}
+		
+		return executingData;
+	},
+	changeFlowInfo: function() {
+		var successEmails = this.model.get("successEmails");
+		var failureEmails = this.model.get("failureEmails");
+		var failureActions = this.model.get("failureAction");
+		var notifyFailure = this.model.get("notifyFailure");
+		var flowParams = this.model.get("flowParams");
+		var isRunning = this.model.get("isRunning");
+		var concurrentOption = this.model.get("concurrentOption");
+		var pipelineLevel = this.model.get("pipelineLevel");
+		var pipelineExecutionId = this.model.get("pipelineExecution");
+		var queueLevel = this.model.get("queueLevel");
+		var nodeStatus = this.model.get("nodeStatus");
+		var overrideSuccessEmails = this.model.get("overrideSuccessEmails");
+		var overrideFailureEmails = this.model.get("overrideFailureEmails");
+		
+		if (overrideSuccessEmails) {
+			$('#overrideSuccessEmails').attr('checked', true);
+		}
+		else {
+			$('#successEmails').attr('disabled','disabled');
+		}
+		if (overrideFailureEmails) {
+			$('#overrideFailureEmails').attr('checked', true);
+		}
+		else {
+			$('#failureEmails').attr('disabled','disabled');
+		}
+		
+		if (successEmails) {
+			$('#successEmails').val(successEmails.join());
+		}
+		if (failureEmails) {
+			$('#failureEmails').val(failureEmails.join());
+		}
+		if (failureActions) {
 		$('#failureAction').val(failureActions);
-  	}
-  	
-  	if (notifyFailure.first) {
+		}
+		
+		if (notifyFailure.first) {
 		$('#notifyFailureFirst').attr('checked', true);
-  	}
-  	if (notifyFailure.last) {
-  		$('#notifyFailureLast').attr('checked', true);
-  	}
-  	
-  	if (concurrentOption) {
-  		$('input[value='+concurrentOption+'][name="concurrent"]').attr('checked', true);
-  	}
-  	if (pipelineLevel) {
-  		$('#pipelineLevel').val(pipelineLevel);
-  	}
-  	if (queueLevel) {
-  		$('#queueLevel').val(queueLevel);
-  	}
-  	
-  	if (nodeStatus) {
-  		var nodeMap = this.model.get("nodeMap");
-  
-  		var disabled = {};
-  		for (var key in nodeStatus) {
-  			var status = nodeStatus[key];
-  			
-  			var node = nodeMap[key];
-  			if (node) {
-  				node.status = status;
-  				
-				if (node.status == "DISABLED" || node.status == "SKIPPED") {
-					node.status = "READY";
-					disabled[node.id] = true;
-				}
-				if (node.status == "SUCCEEDED" || node.status=="RUNNING") {
-					disabled[node.id] = true;
+		}
+		if (notifyFailure.last) {
+			$('#notifyFailureLast').attr('checked', true);
+		}
+		
+		if (concurrentOption) {
+			$('input[value='+concurrentOption+'][name="concurrent"]').attr('checked', true);
+		}
+		if (pipelineLevel) {
+			$('#pipelineLevel').val(pipelineLevel);
+		}
+		if (queueLevel) {
+			$('#queueLevel').val(queueLevel);
+		}
+		
+		if (nodeStatus) {
+			var nodeMap = this.model.get("nodeMap");
+			var disabled = {};
+			for (var key in nodeStatus) {
+				var status = nodeStatus[key];
+				
+				var node = nodeMap[key];
+				if (node) {
+					node.status = status;
+					if (node.status == "DISABLED" || node.status == "SKIPPED") {
+						node.status = "READY";
+						disabled[node.id] = true;
+					}
+					if (node.status == "SUCCEEDED" || node.status=="RUNNING") {
+						disabled[node.id] = true;
+					}
 				}
-  			}
-  		}
-  		this.model.set({"disabled":disabled});
-  	}
-  	
-	if (flowParams) {
-		for (var key in flowParams) {
-			editTableView.handleAddRow({paramkey: key, paramvalue: flowParams[key]});
+			}
+			this.model.set({"disabled":disabled});
 		}
-	}
-  },
-  show: function(data) {
-  	var projectName = data.project;
-  	var flowId = data.flow;
-  	var jobId = data.job;
-  	
-  	// ExecId is optional
-  	var execId = data.execid;
-  
-  	var loadedId = executableGraphModel.get("flowId");
-  
-  	this.loadGraph(projectName, flowId);
-  	this.loadFlowInfo(projectName, flowId, execId);
-
-  	this.projectName = projectName;
-  	this.flowId = flowId;
-	if (jobId) {
-		this.showExecuteJob(projectName, flowId, jobId, data.withDep);
-	}
-	else {
-		this.showExecuteFlow(projectName, flowId);
-	}
-  },
-  showExecuteFlow: function(projectName, flowId) {
-	$("#execute-flow-panel-title").text("Execute Flow " + flowId);
-	this.showExecutionOptionPanel();
-
-	// Triggers a render
-	this.model.trigger("change:graph");
-  },
-  showExecuteJob: function(projectName, flowId, jobId, withDep) {
-	sideMenuDialogView.menuSelect($("#flowOption"));
-	$("#execute-flow-panel-title").text("Execute Flow " + flowId);
+		
+		if (flowParams) {
+			for (var key in flowParams) {
+				editTableView.handleAddRow({paramkey: key, paramvalue: flowParams[key]});
+			}
+		}
+	},
+	show: function(data) {
+		var projectName = data.project;
+		var flowId = data.flow;
+		var jobId = data.job;
+		
+		// ExecId is optional
+		var execId = data.execid;
 	
-	var nodes = this.model.get("nodeMap");
-	var disabled = this.model.get("disabled");
+		var loadedId = executableGraphModel.get("flowId");
 	
-	// Disable all, then re-enable those you want.
-	for(var key in nodes) {
-		disabled[key] = true;
-	}
+		this.loadGraph(projectName, flowId);
+		this.loadFlowInfo(projectName, flowId, execId);
+
+		this.projectName = projectName;
+		this.flowId = flowId;
+		if (jobId) {
+			this.showExecuteJob(projectName, flowId, jobId, data.withDep);
+		}
+		else {
+			this.showExecuteFlow(projectName, flowId);
+		}
+	},
 	
-	var jobNode = nodes[jobId];
-	disabled[jobId] = false;
+	showExecuteFlow: function(projectName, flowId) {
+		$("#execute-flow-panel-title").text("Execute Flow " + flowId);
+		this.showExecutionOptionPanel();
+
+		// Triggers a render
+		this.model.trigger("change:graph");
+	},
 	
-	if (withDep) {
-		recurseAllAncestors(nodes, disabled, jobId, false);
-	}
+	showExecuteJob: function(projectName, flowId, jobId, withDep) {
+		sideMenuDialogView.menuSelect($("#flowOption"));
+		$("#execute-flow-panel-title").text("Execute Flow " + flowId);
+		
+		var nodes = this.model.get("nodeMap");
+		var disabled = this.model.get("disabled");
+		
+		// Disable all, then re-enable those you want.
+		for (var key in nodes) {
+			disabled[key] = true;
+		}
+		
+		var jobNode = nodes[jobId];
+		disabled[jobId] = false;
+		
+		if (withDep) {
+			recurseAllAncestors(nodes, disabled, jobId, false);
+		}
 
-	this.showExecutionOptionPanel();
-	this.model.trigger("change:graph");
-  },
-  showExecutionOptionPanel: function() {
-  	sideMenuDialogView.menuSelect($("#flowOption"));
-  	$('#modalBackground').show();
-  	$('#execute-flow-panel').show();
-  },
-  hideExecutionOptionPanel: function() {
-  	$('#modalBackground').hide();
-  	$('#execute-flow-panel').hide();
-  },
-  scheduleClick: function() {
-  	schedulePanelView.showSchedulePanel();
-  },
-  loadFlowInfo: function(projectName, flowId, execId) {
-    console.log("Loading flow " + flowId);
-	fetchFlowInfo(this.model, projectName, flowId, execId);
-  },
-  loadGraph: function(projectName, flowId) {
-  	console.log("Loading flow " + flowId);
-	fetchFlow(this.model, projectName, flowId, true);
-  },
-  handleExecuteFlow: function(evt) {
-  	  	var executeURL = contextURL + "/executor";
+		this.showExecutionOptionPanel();
+		this.model.trigger("change:graph");
+	},
+	
+	showExecutionOptionPanel: function() {
+		sideMenuDialogView.menuSelect($("#flowOption"));
+		$('#modalBackground').show();
+		$('#execute-flow-panel').show();
+	},
+	
+	hideExecutionOptionPanel: function() {
+		$('#modalBackground').hide();
+		$('#execute-flow-panel').hide();
+	},
+	
+	scheduleClick: function() {
+		schedulePanelView.showSchedulePanel();
+	},
+	
+	loadFlowInfo: function(projectName, flowId, execId) {
+		console.log("Loading flow " + flowId);
+		fetchFlowInfo(this.model, projectName, flowId, execId);
+	},
+	
+	loadGraph: function(projectName, flowId) {
+		console.log("Loading flow " + flowId);
+		fetchFlow(this.model, projectName, flowId, true);
+	},
+	
+	handleExecuteFlow: function(evt) {
+		var executeURL = contextURL + "/executor";
 		var executingData = this.getExecutionOptionData();
 		executeFlow(executingData);
-  }
+	}
 });
 
 var editTableView;
 azkaban.EditTableView = Backbone.View.extend({
-	events : {
+	events: {
 		"click table .addRow": "handleAddRow",
 		"click table .editable": "handleEditColumn",
 		"click table .removeIcon": "handleRemoveColumn"
 	},
-	initialize: function(setting) {
 
+	initialize: function(setting) {
 	},
+	
 	handleAddRow: function(data) {
 		var name = "";
 		if (data.paramkey) {
@@ -311,36 +317,37 @@ azkaban.EditTableView = Backbone.View.extend({
 			value = data.paramvalue;
 		}
 	
-	  	var tr = document.createElement("tr");
-	  	var tdName = document.createElement("td");
-	    var tdValue = document.createElement("td");
-	    
-	    var icon = document.createElement("span");
-	    $(icon).addClass("removeIcon");
-	    var nameData = document.createElement("span");
-	    $(nameData).addClass("spanValue");
-	    $(nameData).text(name);
-	    var valueData = document.createElement("span");
-	    $(valueData).addClass("spanValue");
-	    $(valueData).text(value);
-	    	    
+		var tr = document.createElement("tr");
+		var tdName = document.createElement("td");
+		var tdValue = document.createElement("td");
+		
+		var icon = document.createElement("span");
+		$(icon).addClass("removeIcon");
+		var nameData = document.createElement("span");
+		$(nameData).addClass("spanValue");
+		$(nameData).text(name);
+		var valueData = document.createElement("span");
+		$(valueData).addClass("spanValue");
+		$(valueData).text(value);
+						
 		$(tdName).append(icon);
 		$(tdName).append(nameData);
 		$(tdName).addClass("name");
 		$(tdName).addClass("editable");
 		
 		$(tdValue).append(valueData);
-	    $(tdValue).addClass("editable");
+		$(tdValue).addClass("editable");
 		
 		$(tr).addClass("editRow");
-	  	$(tr).append(tdName);
-	  	$(tr).append(tdValue);
-	   
-	  	$(tr).insertBefore(".addRow");
-	  	return tr;
-	  },
-	  handleEditColumn : function(evt) {
-	  	var curTarget = evt.currentTarget;
+		$(tr).append(tdName);
+		$(tr).append(tdValue);
+	 
+		$(tr).insertBefore(".addRow");
+		return tr;
+	},
+	
+	handleEditColumn: function(evt) {
+		var curTarget = evt.currentTarget;
 	
 		var text = $(curTarget).children(".spanValue").text();
 		$(curTarget).empty();
@@ -359,95 +366,97 @@ azkaban.EditTableView = Backbone.View.extend({
 		});
 		
 		$(input).keypress(function(evt) {
-		    if(evt.which == 13) {
-		        obj.closeEditingTarget(evt);
-		    }
+			if (evt.which == 13) {
+					obj.closeEditingTarget(evt);
+			}
 		});
 
-	  },
-	  handleRemoveColumn : function(evt) {
-	  	var curTarget = evt.currentTarget;
-	  	// Should be the table
-	  	var row = curTarget.parentElement.parentElement;
+	},
+	
+	handleRemoveColumn: function(evt) {
+		var curTarget = evt.currentTarget;
+		// Should be the table
+		var row = curTarget.parentElement.parentElement;
 		$(row).remove();
-	  },
-	  closeEditingTarget: function(evt) {
-  		var input = evt.currentTarget;
-  		var text = $(input).val();
-  		var parent = $(input).parent();
-  		$(parent).empty();
-
-	    var valueData = document.createElement("span");
-	    $(valueData).addClass("spanValue");
-	    $(valueData).text(text);
-
-		if($(parent).hasClass("name")) {
+	},
+	
+	closeEditingTarget: function(evt) {
+		var input = evt.currentTarget;
+		var text = $(input).val();
+		var parent = $(input).parent();
+		$(parent).empty();
+
+		var valueData = document.createElement("span");
+		$(valueData).addClass("spanValue");
+		$(valueData).text(text);
+
+		if ($(parent).hasClass("name")) {
 			var icon = document.createElement("span");
 			$(icon).addClass("removeIcon");
 			$(parent).append(icon);
 		}
-	    
-	    $(parent).removeClass("editing");
-	    $(parent).append(valueData);
-	  }
+		
+		$(parent).removeClass("editing");
+		$(parent).append(valueData);
+	}
 });
 
 var sideMenuDialogView;
-azkaban.SideMenuDialogView= Backbone.View.extend({
-	events : {
-		"click .menuHeader" : "menuClick"
-  	},
-  	initialize : function(settings) {
-  		var children = $(this.el).children();
-  		var currentParent;
-  		var parents = [];
-  		var realChildren = [];
-  		for (var i = 0; i < children.length; ++i ) {
-  			var child = children[i];
-  			if ((i % 2) == 0) {
-  				currentParent = child;
-  				$(child).addClass("menuHeader");
-  				parents.push(child);
-  			}
-  			else {
-  				$(child).addClass("menuContent");
-  				$(child).hide();
-  				currentParent.child = child;
-  				realChildren.push(child);
-  			}
-  		}
-  		
-  		this.menuSelect($("#flowOption"));
-  		
-  		this.parents = parents;
-  		this.children = realChildren;
-  	},
-  	menuClick : function(evt) {
-  		this.menuSelect(evt.currentTarget);
-  	},
-  	menuSelect : function(target) {
-  		if ($(target).hasClass("selected")) {
-  			return;
-  		}
-  		
-  		$(".sidePanel").each(function() {
-  			$(this).hide();
-  		});
-  		
-  		$(".menuHeader").each(function() {
-  			$(this.child).slideUp("fast");
-  			$(this).removeClass("selected");
-  		});
-  		
-  		$(".sidePanel").each(function() {
-  			$(this).hide();
-  		});
-  		
-  		$(target).addClass("selected");
-  		$(target.child).slideDown("fast");
-  		var panelName = $(target).attr("viewpanel");
-  		$("#" + panelName).show();
-  	}
+azkaban.SideMenuDialogView = Backbone.View.extend({
+	events: {
+		"click .menuHeader": "menuClick"
+	},
+	initialize: function(settings) {
+		var children = $(this.el).children();
+		var currentParent;
+		var parents = [];
+		var realChildren = [];
+		for (var i = 0; i < children.length; ++i ) {
+			var child = children[i];
+			if ((i % 2) == 0) {
+				currentParent = child;
+				$(child).addClass("menuHeader");
+				parents.push(child);
+			}
+			else {
+				$(child).addClass("menuContent");
+				$(child).hide();
+				currentParent.child = child;
+				realChildren.push(child);
+			}
+		}
+		
+		this.menuSelect($("#flowOption"));
+		
+		this.parents = parents;
+		this.children = realChildren;
+	},
+	menuClick: function(evt) {
+		this.menuSelect(evt.currentTarget);
+	},
+	menuSelect: function(target) {
+		if ($(target).hasClass("selected")) {
+			return;
+		}
+		
+		$(".sidePanel").each(function() {
+			$(this).hide();
+		});
+		
+		$(".menuHeader").each(function() {
+			$(this.child).slideUp("fast");
+			$(this).removeClass("selected");
+		});
+		
+		$(".sidePanel").each(function() {
+			$(this).hide();
+		});
+		
+		$(target).addClass("selected");
+		$(target.child).slideDown("fast");
+		var panelName = $(target).attr("viewpanel");
+		$("#" + panelName).show();
+	}
 });
 
 var handleJobMenuClick = function(action, el, pos) {
@@ -498,7 +507,7 @@ var touchParents = function(jobid, disable) {
 
 	if (inNodes) {
 		for (var key in inNodes) {
-		  disabled[key] = disable;
+			disabled[key] = disable;
 		}
 	}
 	
@@ -513,7 +522,7 @@ var touchChildren = function(jobid, disable) {
 
 	if (outNodes) {
 		for (var key in outNodes) {
-		  disabledMap[key] = disable;
+			disabledMap[key] = disable;
 		}
 	}
 	
@@ -547,24 +556,23 @@ var nodeClickCallback = function(event) {
 	var flowId = executableGraphModel.get("flowId");
 	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobId;
 
-	var menu = [	{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
-			{break: 1},
-			{title: "Enable", callback: function() {touchNode(jobId, false);}, submenu: [
-									{title: "Parents", callback: function(){touchParents(jobId, false);}},
-									{title: "Ancestors", callback: function(){touchAncestors(jobId, false);}},
-									{title: "Children", callback: function(){touchChildren(jobId, false);}},
-									{title: "Descendents", callback: function(){touchDescendents(jobId, false);}},
-									{title: "Enable All", callback: function(){enableAll();}}
-								]
-			},
-			{title: "Disable", callback: function() {touchNode(jobId, true)}, submenu: [
-									{title: "Parents", callback: function(){touchParents(jobId, true);}},
-									{title: "Ancestors", callback: function(){touchAncestors(jobId, true);}},
-									{title: "Children", callback: function(){touchChildren(jobId, true);}},
-									{title: "Descendents", callback: function(){touchDescendents(jobId, true);}},
-									{title: "Disable All", callback: function(){disableAll();}}
-								]
-			}
+	var menu = [
+		{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
+		{break: 1},
+		{title: "Enable", callback: function() {touchNode(jobId, false);}, submenu: [
+			{title: "Parents", callback: function(){touchParents(jobId, false);}},
+			{title: "Ancestors", callback: function(){touchAncestors(jobId, false);}},
+			{title: "Children", callback: function(){touchChildren(jobId, false);}},
+			{title: "Descendents", callback: function(){touchDescendents(jobId, false);}},
+			{title: "Enable All", callback: function(){enableAll();}}
+		]},
+		{title: "Disable", callback: function() {touchNode(jobId, true)}, submenu: [
+			{title: "Parents", callback: function(){touchParents(jobId, true);}},
+			{title: "Ancestors", callback: function(){touchAncestors(jobId, true);}},
+			{title: "Children", callback: function(){touchChildren(jobId, true);}},
+			{title: "Descendents", callback: function(){touchDescendents(jobId, true);}},
+			{title: "Disable All", callback: function(){disableAll();}}
+		]}
 	];
 
 	contextMenuView.show(event, menu);
@@ -579,7 +587,8 @@ var graphClickCallback = function(event) {
 	var flowId = executableGraphModel.get("flowId");
 	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId;
 	
-	var menu = [	{title: "Open Flow in New Window...", callback: function() {window.open(requestURL);}},
+	var menu = [
+		{title: "Open Flow in New Window...", callback: function() {window.open(requestURL);}},
 		{break: 1},
 		{title: "Enable All", callback: function() {enableAll();}},
 		{title: "Disable All", callback: function() {disableAll();}},
@@ -593,8 +602,21 @@ var graphClickCallback = function(event) {
 var contextMenuView;
 $(function() {
 	executableGraphModel = new azkaban.GraphModel();
-	flowExecuteDialogView = new azkaban.FlowExecuteDialogView({el:$('#execute-flow-panel'), model: executableGraphModel});
-	svgGraphView = new azkaban.SvgGraphView({el:$('#svgDivCustom'), model: executableGraphModel, topGId:"topG", graphMargin: 10, rightClick: { "node": nodeClickCallback, "edge": edgeClickCallback, "graph": graphClickCallback }});
+	flowExecuteDialogView = new azkaban.FlowExecuteDialogView({
+		el: $('#execute-flow-panel'), 
+		model: executableGraphModel
+	});
+	svgGraphView = new azkaban.SvgGraphView({
+		el: $('#svgDivCustom'), 
+		model: executableGraphModel, 
+		topGId:"topG", 
+		graphMargin: 10, 
+		rightClick: { 
+			"node": nodeClickCallback, 
+			"edge": edgeClickCallback, 
+			"graph": graphClickCallback 
+		}
+	});
 	
 	sideMenuDialogView = new azkaban.SideMenuDialogView({el:$('#graphOptions')});
 	editTableView = new azkaban.EditTableView({el:$('#editTable')});
diff --git a/src/web/js/azkaban.layout.js b/src/web/js/azkaban.layout.js
index 6938572..6f6c2c5 100644
--- a/src/web/js/azkaban.layout.js
+++ b/src/web/js/azkaban.layout.js
@@ -41,9 +41,16 @@ function layoutGraph(nodes, edges) {
 		//}
 		
 		var width = nodes[i].label.length * 10;
-		var node = { id: nodes[i].id, node: nodes[i], level: nodes[i].level, in:[], out:[], width: width, x:0 };
+		var node = {
+			id: nodes[i].id, 
+			node: nodes[i], 
+			level: nodes[i].level, 
+			in: [], 
+			out: [], 
+			width: width, 
+			x: 0 
+		};
 		nodeMap[nodes[i].id] = node;
-
 		maxLayer = Math.max(node.level, maxLayer);
 		if(!layers[node.level]) {
 			layers[node.level] = [];
@@ -70,7 +77,15 @@ function layoutGraph(nodes, edges) {
 		var guides = [];
 		
 		for (var j = srcNode.level + 1; j < destNode.level; ++j) {
-			var dummyNode = {level: j, in: [], x: lastNode.x, out: [], realSrc: srcNode, realDest: destNode, width: 10};
+			var dummyNode = {
+				level: j, 
+				in: [], 
+				x: lastNode.x, 
+				out: [], 
+				realSrc: srcNode, 
+				realDest: destNode, 
+				width: 10
+			};
 			layers[j].push(dummyNode);
 			dummyNode.in.push(lastNode);
 			lastNode.out.push(dummyNode);
@@ -114,7 +129,6 @@ function layoutGraph(nodes, edges) {
 		sort(layers[i]);
 		spreadLayerSmart(layers[i]);
 	}
-	
 
 	// Space it vertically
 	spaceVertically(layers, maxLayer);
@@ -134,7 +148,6 @@ function layoutGraph(nodes, edges) {
 		var dest = edges[i].target;
 		
 		var edgeId = src + ">>" + dest;
-
 		if (edgeDummies[edgeId] && edgeDummies[edgeId].length > 0) {
 			var prevX = nodeMap[src].x;
 			var destX = nodeMap[dest].x; 
@@ -146,7 +159,6 @@ function layoutGraph(nodes, edges) {
 				guides.push(point);
 				
 				var nextX = j == dummies.length - 1 ? destX: dummies[j + 1].x; 
-
 				if (point.x != prevX && point.x != nextX) {
 					// Add gap
 					if ((point.x > prevX) == (point.x > nextX)) {
@@ -166,7 +178,13 @@ function layoutGraph(nodes, edges) {
 
 function spreadLayerSmart(layer) {
 	var ranges = [];
-	ranges.push({start: 0, end:0, width: layer[0].width, x: layer[0].x, index: 0});
+	ranges.push({
+		start: 0, 
+		end: 0, 
+		width: layer[0].width, 
+		x: layer[0].x, 
+		index: 0
+	});
 	var largestRangeIndex = -1;
 	
 	var totalX = layer[0].x;
@@ -180,11 +198,17 @@ function spreadLayerSmart(layer) {
 		if (delta == 0) {
 			prevRange.end = i;
 			prevRange.width += layer[i].width;
-			totalWidth+=layer[i].width;
+			totalWidth += layer[i].width;
 		}
 		else {
-			totalWidth+=Math.max(layer[i].width, delta);
-			ranges.push({start: i, end: i, width: layer[i].width, x: layer[i].x, index: ranges.length});
+			totalWidth += Math.max(layer[i].width, delta);
+			ranges.push({
+				start: i, 
+				end: i, 
+				width: layer[i].width, 
+				x: layer[i].x, 
+				index: ranges.length
+			});
 		}
 		
 		totalX += layer[i].x;
@@ -220,34 +244,31 @@ function spreadLayerSmart(layer) {
 		endIndex = e + 1;
 	}
 	
-	for (var i=startIndex; i >= 0; --i) {
+	for (var i = startIndex; i >= 0; --i) {
 		var range = ranges[i];
 		var crossPointS = range.x + range.width/2;
 		var crossPointE = ranges[i + 1].x - ranges[i + 1].width/2;
-		
 		if (crossPointE < crossPointS) {
 			range.x -= crossPointS - crossPointE;
 		}
 	}
 	
-	for (var i=endIndex; i < ranges.length; ++i) {
+	for (var i = endIndex; i < ranges.length; ++i) {
 		var range = ranges[i];
 		var crossPointE = range.x - range.width/2;
 		var crossPointS = ranges[i - 1].x + ranges[i - 1].width/2;
-		
 		if (crossPointE < crossPointS) {
 			range.x += crossPointS - crossPointE;
 		}
 	}
 	
-	for (var i=0; i < ranges.length; ++i) {
+	for (var i = 0; i < ranges.length; ++i) {
 		var range = ranges[i];
 		if (range.start == range.end) {
 			layer[range.start].x = range.x;
 		}
 		else {
 			var start = range.x - range.width/2;
-			
 			for (var j=range.start;j <=range.end; ++j) {
 				layer[j].x = start + layer[j].width/2;
 				start += layer[j].width;
@@ -256,23 +277,21 @@ function spreadLayerSmart(layer) {
 	}
 }
 
-
 function spaceVertically(layers, maxLayer) {
 	var startY = 0;
 	var startLayer = layers[0];
-	for (var i=0; i < startLayer.length; ++i) {
+	for (var i = 0; i < startLayer.length; ++i) {
 		startLayer[i].y = startY;
 	}
 	
 	var minHeight = 50;
-	for (var a=1; a <= maxLayer; ++a) {
+	for (var a = 1; a <= maxLayer; ++a) {
 		var maxDelta = 0;
 		var layer = layers[a];
-		for (var i=0; i < layer.length; ++i) {
-			for (var j=0; j < layer[i].in.length; ++j) {
+		for (var i = 0; i < layer.length; ++i) {
+			for (var j = 0; j < layer[i].in.length; ++j) {
 				var upper = layer[i].in[j];
 				var delta = Math.abs(upper.x - layer[i].x);
-				
 				maxDelta = Math.max(maxDelta, delta);
 			}
 		}
@@ -282,11 +301,10 @@ function spaceVertically(layers, maxLayer) {
 		
 		calcHeight = Math.min(calcHeight, maxHeight); 
 		startY += Math.max(calcHeight, minHeight);
-		for (var i=0; i < layer.length; ++i) {
-			layer[i].y=startY;
+		for (var i = 0; i < layer.length; ++i) {
+			layer[i].y = startY;
 		}
 	}
-
 }
 
 function uncrossWithIn(layer) {
@@ -301,7 +319,6 @@ function findAverage(nodes) {
 	for (var i = 0; i < nodes.length; ++i) {
 		sum += nodes[i].x;
 	}
-	
 	return sum/nodes.length;
 }
 
diff --git a/src/web/js/azkaban.nav.js b/src/web/js/azkaban.nav.js
index 8b6de28..feffedc 100644
--- a/src/web/js/azkaban.nav.js
+++ b/src/web/js/azkaban.nav.js
@@ -18,13 +18,15 @@ $.namespace('azkaban');
 
 var navView;
 azkaban.NavView = Backbone.View.extend({
-	events : {
+	events: {
 		"click #user-id":"handleUserMenu"
 	},
-	initialize : function(settings) {
+	
+	initialize: function(settings) {
 		$("#user-menu").hide();
 	},
-	handleUserMenu : function(evt) {
+	
+	handleUserMenu: function(evt) {
 		if ($("#user-menu").is(":visible")) {
 			$("#user-menu").slideUp('fast');
 		}
@@ -32,21 +34,24 @@ azkaban.NavView = Backbone.View.extend({
 			$("#user-menu").slideDown('fast');
 		}
 	},
+	
 	render: function() {
 	}
 });
 
 $(function() {
-	navView = new azkaban.NavView({el:$( '#header' )});
+	navView = new azkaban.NavView({
+		el: $('#header')
+	});
 });
 
 (function($){
-	$.getQuery = function( query ) {
+	$.getQuery = function(query) {
 		query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 		var expr = "[\\?&]"+query+"=([^&#]*)";
-		var regex = new RegExp( expr );
-		var results = regex.exec( window.location.href );
-		if( results !== null ) {
+		var regex = new RegExp(expr);
+		var results = regex.exec(window.location.href);
+		if (results !== null) {
 			return results[1];
 			return decodeURIComponent(results[1].replace(/\+/g, " "));
 		} else {
diff --git a/src/web/js/azkaban.svg.graph.view.js b/src/web/js/azkaban.svg.graph.view.js
index 380dff0..66f914f 100644
--- a/src/web/js/azkaban.svg.graph.view.js
+++ b/src/web/js/azkaban.svg.graph.view.js
@@ -176,7 +176,12 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			var x = node.x - offset;
 			var y = node.y - offset;
 			
-			$(this.svgGraph).svgNavigate("transformToBox", {x: x, y: y, width: widthHeight, height: widthHeight});
+			$(this.svgGraph).svgNavigate("transformToBox", {
+				x: x, 
+				y: y, 
+				width: widthHeight, 
+				height: widthHeight
+			});
 		}
 	},
 	handleStatusUpdate: function(evt) {
@@ -211,7 +216,9 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			if (callbacks.node && currentTarget.jobid) {
 				callbacks.node(self);
 			}
-			else if (callbacks.edge && (currentTarget.nodeName == "polyline" || currentTarget.nodeName == "line")) {
+			else if (callbacks.edge && 
+					(currentTarget.nodeName == "polyline" || 
+					 currentTarget.nodeName == "line")) {
 				callbacks.edge(self);
 			}
 			else if (callbacks.graph) {
@@ -317,15 +324,24 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		nodeG.jobid=node.id;
 	},
 	addBounds: function(toBounds, addBounds) {
-		toBounds.minX = toBounds.minX ? Math.min(toBounds.minX, addBounds.minX) : addBounds.minX;
-		toBounds.minY = toBounds.minY ? Math.min(toBounds.minY, addBounds.minY) : addBounds.minY;
-		toBounds.maxX = toBounds.maxX ? Math.max(toBounds.maxX, addBounds.maxX) : addBounds.maxX;
-		toBounds.maxY = toBounds.maxY ? Math.max(toBounds.maxY, addBounds.maxY) : addBounds.maxY;
+		toBounds.minX = toBounds.minX 
+				? Math.min(toBounds.minX, addBounds.minX) : addBounds.minX;
+		toBounds.minY = toBounds.minY 
+				? Math.min(toBounds.minY, addBounds.minY) : addBounds.minY;
+		toBounds.maxX = toBounds.maxX 
+				? Math.max(toBounds.maxX, addBounds.maxX) : addBounds.maxX;
+		toBounds.maxY = toBounds.maxY 
+				? Math.max(toBounds.maxY, addBounds.maxY) : addBounds.maxY;
 	},
 	resetPanZoom : function(duration) {
 		var bounds = this.graphBounds;
-		var param = {x: bounds.minX, y: bounds.minY, width: (bounds.maxX - bounds.minX), height: (bounds.maxY - bounds.minY), duration: duration };
-
+		var param = {
+			x: bounds.minX, 
+			y: bounds.minY, 
+			width: (bounds.maxX - bounds.minX), 
+			height: (bounds.maxY - bounds.minY), 
+			duration: duration 
+		};
 		$(this.svgGraph).svgNavigate("transformToBox", param);
 	}
 });