flow-extended.js

azkaban.FlowExtendedViewPanel = Backbone.View.extend({
	events: {
		"click .closeInfoPanel" : "handleClosePanel" 
	},
	initialize: function(settings) {
		//this.model.bind('change:flowinfo', this.changeFlowInfo, this);
		$(this.el).show();
		$(this.el).draggable({cancel: ".dataContent", containment: "document"});

		this.render();
		$(this.el).hide();
	},
	showExtendedView: function(evt) {
		var event = evt;
		
		$(this.el).css({top: evt.pageY, left: evt.pageX});
		$(this.el).show();
	},
	render: function(self) {
		console.log("Changing title");
		$(this.el).find(".nodeId").text(this.model.get("id"));
		$(this.el).find(".nodeType").text(this.model.get("type"));
		
		var props = this.model.get("props");
		var tableBody = $(this.el).find(".dataPropertiesBody");
		
		for (var key in props) {
			var tr = document.createElement("tr");
			var tdKey = document.createElement("td");
			var tdValue = document.createElement("td");
			
			$(tdKey).text(key);
			$(tdValue).text(props[key]);
			
			$(tr).append(tdKey);
			$(tr).append(tdValue);
			
			$(tableBody).append(tr);
			
			var propsTable = $(this.el).find(".dataJobProperties");
			$(propsTable).resizable({handler: "s"});
		}
		
		if (this.model.get("type") == "flow") {
			var svgns = "http://www.w3.org/2000/svg";
			var svgDataFlow = $(this.el).find(".dataFlow");
			
			var svgGraph = document.createElementNS(svgns, "svg");
			$(svgGraph).attr("class", "svgTiny");
			$(svgDataFlow).append(svgGraph);
			$(svgDataFlow).resizable();
			
			this.graphView = new azkaban.SvgGraphView({el: svgDataFlow, model: this.model, render: true, rightClick:  { "node": nodeClickCallback, "graph": graphClickCallback }})
		}
		else {
			$(this.el).find(".dataFlow").hide();
		}
	},
	handleClosePanel: function(self) {
		$(this.el).hide();
	}
});