reconstruct map local

web/build/detailPanel.js

@@ -1,88 +1,25 @@
 function init(React){
 
-	function dragableBar(initX,cb){
-		var self     = this,
-			dragging = true;
-
-		var ghostbar = $('<div class="ghostbar"></div>').css("left",initX).prependTo('body');
-
-		$(document).mousemove(function(e){
-			e.preventDefault();
-			ghostbar.css("left",e.pageX + "px");
-		});
-
-		$(document).mouseup(function(e){
-			if(!dragging) return;
-
-			dragging = false;
-
-			var deltaPageX = e.pageX - initX;
-			cb && cb.call(null,{
-				delta  : deltaPageX,
-				finalX : e.pageX
-			});
-			
-			ghostbar.remove();
-			$(document).unbind('mousemove');
-		});	
-	}
-	
 	var DetailPanel = React.createClass({displayName: "DetailPanel",
 		getInitialState : function(){
 			return {
-				show : false,
-				data : {},
 				body : {id : -1, content : null},
 				left : "35%"
 			};
 		},
-		componentDidMount:function(){
-			var self = this;
-			$(document).on("keyup",function(e){
-				if(e.keyCode == 27){ //ESC
-					self.setState({
-						show : false
-					});
-				}
-			});
-		},
-		setHide:function(){
-			this.setState({
-				show : false
-			});
-		},
-		setShow:function(ifShow){
-			this.setState({
-				show : true
-			});
-		},
 		loadBody:function(){
 			var self = this,
-			    id   = self.state.data.id;
+			    id   = self.props.data.id;
 			if(!id) return;
 
 			ws.reqBody(id,function(content){
-				if(content.id == self.state.data.id){
+				if(content.id == self.props.data.id){
 					self.setState({
 						body : content
 					});
 				}
 			});
 		},
-		dealDrag:function(){
-			var self    = this,
-				leftVal = $(React.findDOMNode(this.refs.mainOverlay)).css("left");
-			dragableBar(leftVal, function(data){
-				if(data && data.finalX){
-					if(window.innerWidth - data.finalX < 200){
-						data.finalX = window.innerWidth - 200;
-					}
-					self.setState({
-						left : data.finalX + "px"
-					});
-				}
-			});
-		},
 		render : function(){
 			var reqHeaderSection = [],
 				resHeaderSection = [],
@@ -90,9 +27,9 @@ function init(React){
 				detailSection,
 				bodyContent;
 
-			if(this.state.data.reqHeader){
-				for(var key in this.state.data.reqHeader){
-					reqHeaderSection.push(React.createElement("li", {key: "reqHeader_" + key}, React.createElement("strong", null, key), " : ", this.state.data.reqHeader[key]))
+			if(this.props.data.reqHeader){
+				for(var key in this.props.data.reqHeader){
+					reqHeaderSection.push(React.createElement("li", {key: "reqHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.reqHeader[key]))
 				}
 			}
 
@@ -102,7 +39,7 @@ function init(React){
 						React.createElement("h4", {className: "subTitle"}, "request"), 
 						React.createElement("div", {className: "detail"}, 
 							React.createElement("ul", {className: "uk-list"}, 
-							    React.createElement("li", null, this.state.data.method, " ", React.createElement("span", {title: "{this.state.data.path}"}, this.state.data.path), " HTTP/1.1"), 
+							    React.createElement("li", null, this.props.data.method, " ", React.createElement("span", {title: "{this.props.data.path}"}, this.props.data.path), " HTTP/1.1"), 
 							    reqHeaderSection
 							)
 						)
@@ -111,24 +48,24 @@ function init(React){
 					React.createElement("section", {className: "reqBody"}, 
 						React.createElement("h4", {className: "subTitle"}, "request body"), 
 						React.createElement("div", {className: "detail"}, 
-							React.createElement("p", null, this.state.data.reqBody)
+							React.createElement("p", null, this.props.data.reqBody)
 						)
 					)
 				)
 			);
 
-			if(this.state.data.statusCode){
+			if(this.props.data.statusCode){
 
-				if(this.state.body.id == this.state.data.id){
+				if(this.state.body.id == this.props.data.id){
 					bodyContent = (React.createElement("pre", {className: "resBodyContent"}, this.state.body.body));
 				}else{
 					bodyContent = null;
 					this.loadBody();
 				}
 
-				if(this.state.data.resHeader){
-					for(var key in this.state.data.resHeader){
-						resHeaderSection.push(React.createElement("li", {key: "resHeader_" + key}, React.createElement("strong", null, key), " : ", this.state.data.resHeader[key]))
+				if(this.props.data.resHeader){
+					for(var key in this.props.data.resHeader){
+						resHeaderSection.push(React.createElement("li", {key: "resHeader_" + key}, React.createElement("strong", null, key), " : ", this.props.data.resHeader[key]))
 					}
 				}
 
@@ -138,7 +75,7 @@ function init(React){
 							React.createElement("h4", {className: "subTitle"}, "response header"), 
 							React.createElement("div", {className: "detail"}, 
 								React.createElement("ul", {className: "uk-list"}, 
-								    React.createElement("li", null, "HTTP/1.1 ", React.createElement("span", {className: "http_status http_status_" + this.state.data.statusCode}, this.state.data.statusCode)), 
+								    React.createElement("li", null, "HTTP/1.1 ", React.createElement("span", {className: "http_status http_status_" + this.props.data.statusCode}, this.props.data.statusCode)), 
 								    resHeaderSection
 								)
 							)
@@ -153,16 +90,9 @@ function init(React){
 			}
 
 			return (
-				React.createElement("div", {style: {display:this.state.show ? "block" :"none"}}, 
-					React.createElement("div", {className: "overlay_mask", onClick: this.setHide}), 
-					React.createElement("div", {className: "recordDetailOverlay", ref: "mainOverlay", style: {left: this.state.left}}, 
-						React.createElement("div", {className: "dragbar", onMouseDown: this.dealDrag}), 
-						React.createElement("span", {className: "escBtn", onClick: this.setHide}, "Close (ESC)"), 
-						React.createElement("div", null, 
-							summarySection, 
-							detailSection
-						)
-					)
+				React.createElement("div", null, 
+					summarySection, 
+					detailSection
 				)
 			);
 		}

web/build/filter.js

@@ -0,0 +1,39 @@
+function init(React){
+
+	var Filter = React.createClass({displayName: "Filter",
+
+		dealChange:function(){
+			var self = this,
+				userInput = React.findDOMNode(self.refs.keywordInput).value;
+
+			self.props.onChangeKeyword && self.props.onChangeKeyword.call(null,userInput);
+		},
+		setFocus:function(){
+			var self = this;
+			React.findDOMNode(self.refs.keywordInput).focus();
+		},
+		componentDidUpdate:function(){
+			this.setFocus();
+		},
+		render:function(){
+			var self = this;
+
+			return (
+				React.createElement("div", {className: "filterSection"}, 
+					React.createElement("h4", {className: "subTitle"}, "Log Filter"), 
+
+					React.createElement("form", {className: "uk-form"}, 
+						React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "type keywords or /^regExp$/", width: "300"})
+					)
+				)
+			);
+		},
+		componentDidMount:function(){
+			this.setFocus();
+		}
+	});
+
+	return Filter;
+}
+
+module.exports.init = init;

web/build/index.js

@@ -1,10 +1,15 @@
-require("../lib/zepto");
+window.$ = window.jQuery = require("../lib/jquery");
+
 var EventManager    = require('../lib/event'),
 	Anyproxy_wsUtil = require("../lib/anyproxy_wsUtil"),
 	React           = require("../lib/react");
 
 var WsIndicator = require("./wsIndicator").init(React),
-	RecordPanel = require("./recordPanel").init(React);
+	RecordPanel = require("./recordPanel").init(React),
+	MapPanel    = require("./mapPanel").init(React),
+	Detail      = require("./detailPanel").init(React),
+	Popup       = require("./popup").init(React),
+	Filter      = require("./filter").init(React);
 
 var ifPause     = false,
     recordSet   = [];
@@ -15,6 +20,7 @@ var ifPause     = false,
 //Event : wsEnd
 var eventCenter = new EventManager();
 
+
 //invoke AnyProxy web socket util
 (function(){
 	try{
@@ -63,7 +69,19 @@ var eventCenter = new EventManager();
 })();
 
 
-//record panel
+//init popup
+var pop;
+(function(){
+	$("body").append('<div id="J_popOuter"></div>');
+	pop = React.render(
+		React.createElement(Popup, null),
+		document.getElementById("J_popOuter")
+	);
+})();
+
+
+//init record panel
+var recorder;
 (function(){
 	//merge : right --> left
 	function util_merge(left,right){
@@ -89,29 +107,40 @@ var eventCenter = new EventManager();
 			// React.addons.Perf.stop();
 		}
 	}
+
+	function showDetail(data){
+		pop.setState({
+			show: true,
+			content : React.createElement(Detail, {data: data}),
+			left:"35%"
+		});
+	}
+
 	eventCenter.addListener("wsGetUpdate",updateRecordSet);
 
-	var Panel = React.render(
-		React.createElement(RecordPanel, null),
-		document.getElementById("J_content")
-	);
-
 	eventCenter.addListener('recordSetUpdated',function(){
-		Panel.setState({
+		recorder.setState({
 			list : recordSet
 		});
 	});
 
 	eventCenter.addListener("filterUpdated",function(newKeyword){
-		Panel.setState({
+		recorder.setState({
 			filter: newKeyword
 		});
 	});
+
+	//init recorder panel
+	recorder = React.render(
+		React.createElement(RecordPanel, {onSelect: showDetail}),
+		document.getElementById("J_content")
+	);
 })();
 
 
 //action bar
 (function(){
+	//clear log
 	function clearLogs(){
 		recordSet = [];
 		eventCenter.dispatchEvent("recordSetUpdated");
@@ -130,6 +159,7 @@ var eventCenter = new EventManager();
 		clearLogs();
 	});
 
+	//start , pause
 	var statusBtn = $(".J_statusBtn");
 	statusBtn.on("click",function(e){
 		e.stopPropagation();
@@ -145,26 +175,41 @@ var eventCenter = new EventManager();
 		}
 	});
 
-	function switchFilterWidget(ifToShow){
-		if(ifToShow){
-			$(".J_filterSection").show();
-			$("#J_filterKeyword").focus();
-		}else{
-			$(".J_filterSection").hide();
-			$("#J_filterKeyword").val("");
+	//filter
+	(function (){
+		function updateKeyword(key){
+			eventCenter.dispatchEvent("filterUpdated",key);
 		}
-	}
 
-	$(".J_toggleFilterBtn").on("click",function(){
-		switchFilterWidget( $(".J_filterSection").css("display") == "none" );
-	});
+		var filter = (React.createElement(Filter, {onChangeKeyword: updateKeyword}));
+		function showFilter(){
+			pop.setState({
+				show    : true,
+				content : filter,
+				left:"70%"
+			});
+		}
 
-	$(".J_filterCloseBtn").on("click",function(){
-		switchFilterWidget(false);
-	});
+		$(".J_showFilter").on("click",function(){
+			showFilter();
+		});
+	})();
 
+	//map local
+	(function(){
+		var mapPanel = (React.createElement(MapPanel, null));
+		function showMap(){
+			pop.setState({
+				show : true,
+				content : mapPanel,
+				left:"70%"
+
+			})
+		}
+
+		$(".J_showMapPanel").on("click",function(){
+			showMap();
+		});
+	})();
 
-	$("#J_filterKeyword").on("change keyup",function(){
-		eventCenter.dispatchEvent("filterUpdated",this.value);
-	});
 })();

web/build/mapForm.js

@@ -0,0 +1,114 @@
+require("../lib/jstree");
+
+function init(React){
+	function fetchTree(root,cb){
+		if(!root || root == "#"){
+			root = "";
+		}
+
+		$.getJSON("/filetree?root=" + root,function(resObj){
+			var ret = [];
+			try{
+				$.each(resObj.directory, function(k,item){
+					if(item.name.indexOf(".") == 0) return;
+					ret.push({
+						text : item.name,
+						id   : item.fullPath,
+						icon : "uk-icon-folder",
+						children : true
+					});
+				});
+
+				$.each(resObj.file, function(k,item){
+					if(item.name.indexOf(".") == 0) return;
+					ret.push({
+						text     : item.name,
+						id       : item.fullPath,
+						icon     : 'uk-icon-file-o',
+						children : false
+					});
+				});
+			}catch(e){}
+			cb && cb.call(null,ret);
+		});
+	}
+
+	var MapForm = React.createClass({displayName: "MapForm",
+
+		submitData:function(){
+			var self   = this,
+				result = {};
+
+			var	filePath = React.findDOMNode(self.refs.localFilePath).value,
+				keyword  = React.findDOMNode(self.refs.keywordInput).value;
+
+			if(filePath && keyword){
+				self.props.onSubmit.call(null,{
+					keyword : keyword,
+					local   : filePath
+				});
+			}
+		},
+		
+		render:function(){
+			var self = this;
+			return (
+				React.createElement("div", null, 
+					React.createElement("form", {className: "uk-form uk-form-stacked"}, 
+					    React.createElement("fieldset", null, 
+					        React.createElement("legend", null, "add rule"), 
+
+					        React.createElement("div", {className: "uk-form-row"}, 
+				                React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"), 
+				                React.createElement("div", {className: "uk-form-controls"}, 
+				                    React.createElement("input", {type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
+				                )
+				            ), 
+
+					        React.createElement("div", {className: "uk-form-row"}, 
+				                React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"), 
+				                React.createElement("div", {className: "uk-form-controls"}, 
+				                    React.createElement("input", {type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "keyword"})
+				                )
+				            )
+
+					    )
+					), 
+
+					React.createElement("div", {ref: "treeWrapper"}), 
+					React.createElement("button", {className: "uk-button", onClick: self.submitData}, "Add")
+				)
+			);
+		},
+
+		componentDidMount :function(){
+			var self = this;
+			var wrapperEl     = $(React.findDOMNode(self.refs.treeWrapper)),
+				filePathInput = React.findDOMNode(self.refs.localFilePath);
+
+			wrapperEl.jstree({
+			  	'core' : {
+				    'data' : function (node, cb) {
+				    	fetchTree(node.id,cb);
+					}
+				}
+			});
+
+			wrapperEl.on("changed.jstree", function (e, data) {
+				if(data && data.selected && data.selected.length){
+					//is folder
+					if(/folder/.test(data.node.icon)) return;
+
+					var item = data.selected[0];
+					filePathInput.value = item;
+				}
+			});
+
+		},
+		componentDidUpdate:function(){}
+	});
+
+	return MapForm;
+}
+
+module.exports.init = init;

web/build/mapList.js

@@ -0,0 +1,80 @@
+function init(React){
+	var MapList = React.createClass({displayName: "MapList",
+		getInitialState:function(){
+			return {
+				ruleList : []
+			}
+		},
+		appendRecord:function(data){
+			var self = this,
+			    newState = self.state.ruleList;
+
+		    if(data && data.keyword && data.local){
+				newState.push({
+					keyword : data.keyword,
+					local   : data.local
+				});
+
+				self.setState({
+					ruleList: newState
+				});
+		    }
+
+		},
+
+		removeRecord:function(index){
+			var self    = this,
+				newList = self.state.ruleList;
+
+			newList.splice(index,1);
+			self.setState({
+				ruleList : newList
+			});
+		},
+		render:function(){
+			var self       = this,
+			    collection = [];
+
+		    collection = self.state.ruleList.map(function(item,index){
+		    	return (
+					React.createElement("li", null, 
+						React.createElement("strong", null, item.keyword), React.createElement("a", {className: "removeBtn", href: "#", onClick: self.removeRecord.bind(self,index)}, "remove"), React.createElement("br", null), 
+						React.createElement("span", null, item.local)
+					)
+	    		);
+		    });
+
+			return (
+				React.createElement("ul", {className: "mapRuleList"}, 
+					collection
+				)
+			);
+		},
+		componentDidMount :function(){
+			var self = this;
+			$.getJSON("/getMapConfig",function(data){
+				self.setState({
+					ruleList : data
+				});
+			});
+		},
+		componentDidUpdate:function(){
+			var self = this;
+			//sync config
+
+			var currentList = self.state.ruleList;
+			$.ajax({
+				method      : "POST",
+				url         : "/setMapConfig",
+				contentType :"application/json",
+				data        : JSON.stringify(currentList),
+				dataType    : "json",
+				success     :function(res){}
+			});
+		}
+	});
+
+	return MapList;
+}
+
+module.exports.init = init;

web/build/mapPanel.js

@@ -0,0 +1,32 @@
+require("../lib/jstree");
+
+function init(React){
+	var MapForm = require("./mapForm").init(React),
+		MapList = require("./mapList").init(React);
+
+	var MapPanel = React.createClass({displayName: "MapPanel",
+		appendRecord : function(data){
+			var self          = this,
+				listComponent = self.refs.list;
+			
+			listComponent.appendRecord(data);
+		},
+		
+		render:function(){
+			var self = this;
+			return (
+				React.createElement("div", {className: "mapWrapper"}, 
+					React.createElement("h4", {className: "subTitle"}, "Current Config"), 
+					React.createElement(MapList, {ref: "list"}), 
+					
+					React.createElement("h4", {className: "subTitle"}, "Map Local"), 
+					React.createElement(MapForm, {onSubmit: self.appendRecord})
+				)
+			);
+		}
+	});
+
+	return MapPanel;
+}
+
+module.exports.init = init;

web/build/popup.js

@@ -0,0 +1,94 @@
+function init(React){
+
+	function dragableBar(initX,cb){
+		var self     = this,
+			dragging = true;
+
+		var ghostbar = $('<div class="ghostbar"></div>').css("left",initX).prependTo('body');
+
+		$(document).mousemove(function(e){
+			e.preventDefault();
+			ghostbar.css("left",e.pageX + "px");
+		});
+
+		$(document).mouseup(function(e){
+			if(!dragging) return;
+
+			dragging = false;
+
+			var deltaPageX = e.pageX - initX;
+			cb && cb.call(null,{
+				delta  : deltaPageX,
+				finalX : e.pageX
+			});
+			
+			ghostbar.remove();
+			$(document).unbind('mousemove');
+		});	
+	}
+
+	var Popup = React.createClass({displayName: "Popup",
+		getInitialState : function(){
+			return {
+				show    : false,
+				left    : "35%",
+				content : null
+			};
+		},
+		componentDidMount:function(){
+			var self = this;
+			$(document).on("keyup",function(e){
+				if(e.keyCode == 27){ //ESC
+					self.setState({
+						show : false
+					});
+				}
+			});
+		},
+		setHide:function(){
+			this.setState({
+				show : false
+			});
+		},
+		setShow:function(ifShow){
+			this.setState({
+				show : true
+			});
+		},
+		dealDrag:function(){
+			var self    = this,
+				leftVal = $(React.findDOMNode(this.refs.mainOverlay)).css("left");
+			dragableBar(leftVal, function(data){
+				if(data && data.finalX){
+					if(window.innerWidth - data.finalX < 200){
+						data.finalX = window.innerWidth - 200;
+					}
+					self.setState({
+						left : data.finalX + "px"
+					});
+				}
+			});
+		},
+		componentDidUpdate:function(){
+
+		},
+		render : function(){
+			return (
+				React.createElement("div", {style: {display:this.state.show ? "block" :"none"}}, 
+					React.createElement("div", {className: "overlay_mask", onClick: this.setHide}), 
+					React.createElement("div", {className: "recordDetailOverlay", ref: "mainOverlay", style: {left: this.state.left}}, 
+						React.createElement("div", {className: "dragbar", onMouseDown: this.dealDrag}), 
+						React.createElement("span", {className: "escBtn", onClick: this.setHide}, "Close (ESC)"), 
+						React.createElement("div", null, 
+							this.state.content
+						)
+					)
+				)
+			);
+		}
+	});
+
+	return Popup;	
+}
+
+module.exports.init = init;

web/build/recordPanel.js

@@ -9,8 +9,9 @@ function init(React){
 			};
 		},
 		render : function(){
-			var rowCollection = [],
-				filterStr     = this.state.filter,
+			var self          = this,
+				rowCollection = [],
+				filterStr     = self.state.filter,
 				filter        = filterStr;
 
 			//regexp
@@ -20,8 +21,8 @@ function init(React){
 				}catch(e){}
 			}
 
-			for(var i = this.state.list.length-1 ; i >=0 ; i--){
-				var item = this.state.list[i];
+			for(var i = self.state.list.length-1 ; i >=0 ; i--){
+				var item = self.state.list[i];
 				if(item){
 					if(filter && item){
 						try{
@@ -40,7 +41,7 @@ function init(React){
 						item._needRender  = false;
 					}
 
-					rowCollection.push(React.createElement(RecordRow, {key: item.id, data: item}));
+					rowCollection.push(React.createElement(RecordRow, {key: item.id, data: item, onSelect: self.props.onSelect.bind(self,item)}));
 				}
 			}
 

web/build/recordRow.js

@@ -1,12 +1,4 @@
 function init(React){
-	var DetailPanel = require("./detailPanel").init(React);
-
-	$("body").append('<div id="J_detailPanel"></div>');
-	var detail = React.render(
-		React.createElement(DetailPanel, null),
-		document.getElementById("J_detailPanel")
-	);
-
 	function dateFormat(date,fmt) {
 	    var o = {
 	        "M+": date.getMonth() + 1, //月份 
@@ -26,12 +18,6 @@ function init(React){
 		getInitialState : function(){
 			return null;
 		},
-		handleClick:function(e){
-			detail.setState({
-				data : this.props.data,
-				show : true
-			});
-		},
 		render : function(){
 			var trClassesArr = [],
 				trClasses;
@@ -45,7 +31,7 @@ function init(React){
 			var dateStr = dateFormat(new Date(this.props.data.startTime),"hh:mm:ss");
 
 			return(
-				React.createElement("tr", {className: trClasses, onClick: this.handleClick}, 
+				React.createElement("tr", {className: trClasses, onClick: this.props.onSelect}, 
 					React.createElement("td", {className: "data_id"}, this.props.data._id), 
 					React.createElement("td", null, this.props.data.method, " ", React.createElement("span", {className: "protocol protocol_" + this.props.data.protocol, title: "https"}, React.createElement("i", {className: "uk-icon-lock"})), " "), 
 					React.createElement("td", {className: "http_status http_status_" + this.props.data.statusCode}, this.props.data.statusCode), 
@@ -64,7 +50,6 @@ function init(React){
 	});
 
 	return RecordRow;
-
 }
 
 module.exports.init = init;