mirror of
https://github.com/alibaba/anyproxy.git
synced 2025-04-24 04:01:27 +00:00
backup react code
This commit is contained in:
parent
73551aa177
commit
cd85d66326
@ -30,7 +30,7 @@ function anyproxy_wsUtil(config){
|
||||
|
||||
var dataSocket = new WebSocket("ws://" + baseUrl + ":" + socketPort);
|
||||
|
||||
self.bodyCbMap = {};
|
||||
// self.bodyCbMap = {};
|
||||
dataSocket.onmessage = function(event){
|
||||
config.onGetData && config.onGetData.call(self,event.data);
|
||||
|
||||
|
@ -26,7 +26,6 @@
|
||||
Detail.render(data,function(tpl){
|
||||
$("#J_detailPanel").html(tpl);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//init render
|
||||
|
137
web/index.html
137
web/index.html
@ -7,7 +7,6 @@
|
||||
<link rel="icon" type="image/png" href="/favico.png" />
|
||||
<script charset="utf-8" id="seajsnode" src="http://static.alipayobjects.com/seajs/??seajs/2.2.0/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script>
|
||||
<script src="./react.js"></script>
|
||||
<script src="./JSXTransformer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="topHead">
|
||||
@ -67,140 +66,6 @@
|
||||
<script src="/he.js"></script>
|
||||
<script src="/list.js"></script>
|
||||
|
||||
<script type="text/jsx">
|
||||
|
||||
seajs.config({
|
||||
base: 'http://static.alipayobjects.com/',
|
||||
alias: {
|
||||
'$' : 'jquery/jquery/1.7.2/jquery',
|
||||
"Popup" : 'arale/popup/1.1.6/popup',
|
||||
"base" : 'arale/base/1.1.1/base',
|
||||
"events" : 'arale/events/1.1.0/events'
|
||||
}
|
||||
});
|
||||
|
||||
seajs.use(['$','events',"Popup"], function($, Events,Popup) {
|
||||
|
||||
var ifPause = false,
|
||||
indicatorEl = $("#J_indicator"),
|
||||
recordSet = [];
|
||||
|
||||
//make a simple event center via arale-base
|
||||
//Event : wsGetUpdate
|
||||
//Event : recordSetUpdated
|
||||
var eventCenter = new Events();
|
||||
|
||||
function updateRecordSet(newRecord){
|
||||
if(newRecord && newRecord.id){
|
||||
recordSet[newRecord.id] = newRecord;
|
||||
eventCenter.trigger("recordSetUpdated");
|
||||
}
|
||||
}
|
||||
eventCenter.on("wsGetUpdate",updateRecordSet);
|
||||
|
||||
//invoke AnyProxy web socket util
|
||||
var t ;
|
||||
(function(){
|
||||
try{
|
||||
var ws = window.ws = new anyproxy_wsUtil({
|
||||
baseUrl : document.getElementById("baseUrl").value,
|
||||
port : document.getElementById("socketPort").value,
|
||||
onOpen : function(){
|
||||
indicatorEl.css("visibility","visible");
|
||||
},
|
||||
onGetUpdate : function(content){
|
||||
|
||||
// if(ifPause) return;
|
||||
|
||||
// var reqDate = new Date(content.startTime);
|
||||
// content.startTimeStr = reqDate.format("hh:mm:ss") + "";
|
||||
eventCenter.trigger("wsGetUpdate",content);
|
||||
},
|
||||
onError : function(e){
|
||||
indicatorEl.css("visibility","hidden");
|
||||
alert("socket err, please refresh");
|
||||
},
|
||||
onClose : function(e){
|
||||
indicatorEl.css("visibility","hidden");
|
||||
alert("socket closed, please refresh");
|
||||
}
|
||||
});
|
||||
window.ws = ws;
|
||||
|
||||
}catch(e){
|
||||
alert("failed to invoking web socket on this browser");
|
||||
}
|
||||
})();
|
||||
|
||||
var RecordPanel = React.createClass({
|
||||
getInitialState : function(){
|
||||
return {
|
||||
list : []
|
||||
};
|
||||
},
|
||||
render : function(){
|
||||
var rowCollection = [];
|
||||
for(var i = this.state.list.length-1 ; i >=0 ; i--){
|
||||
var item = this.state.list[i];
|
||||
if(item){
|
||||
rowCollection.push(<RecordRow key={item.id} data={item}></RecordRow>);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<table className="uk-table uk-table-condensed uk-table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col_id">id</th>
|
||||
<th className="col_method">method</th>
|
||||
<th className="col_code">code</th>
|
||||
<th className="col_host">host</th>
|
||||
<th className="col_path">path</th>
|
||||
<th className="col_mime">mime type</th>
|
||||
<th className="col_time">time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rowCollection}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var RecordRow = React.createClass({
|
||||
getInitialState : function(){
|
||||
return null;
|
||||
},
|
||||
render : function(){
|
||||
return(
|
||||
<tr>
|
||||
<td className="data_id">{this.props.data._id}</td>
|
||||
<td>{this.props.data.method} <span className="protocol protocol_{this.props.data.protocol}" title="https"><i className="iconfont">󰃉</i></span> </td>
|
||||
<td className="http_status http_status_{this.props.data.statusCode}">{this.props.data.statusCode}</td>
|
||||
<td title="{this.props.data.host}">{this.props.data.host}</td>
|
||||
<td title="{this.props.data.path}">{this.props.data.path}</td>
|
||||
<td>{this.props.data.mime}</td>
|
||||
<td>{this.props.data.startTimeStr}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Panel = React.render(
|
||||
<RecordPanel />,
|
||||
document.getElementById("J_content")
|
||||
);
|
||||
|
||||
eventCenter.on('recordSetUpdated',function(){
|
||||
Panel.setState({
|
||||
list : recordSet
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="/build/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
3550
web/react.js
vendored
3550
web/react.js
vendored
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user