<!DOCTYPE html>
<html>
<head>
<title>Anyproxy</title>
<link rel="stylesheet" href="/css/uikit.gradient.min.css" />
</head>
<body>
<div class="topHead">
<h1>Anyproxy</h1>
</div>
<div class="mainTableWrapper J_mainTable">
<table class="uk-table uk-table-condensed uk-table-hover">
<thead>
<tr>
<th class="col_id">id</th>
<th class="col_method">method</th>
<th class="col_code">code</th>
<th class="col_host">host</th>
<th class="col_path">path</th>
<th class="col_mime">mime type</th>
</tr>
</thead>
<tbody class="J_tableBody"></tbody>
</table>
</div>
<div class="recordDetailOverlay J_recordDetailOverlay" style="display:none">
<span class="escBtn J_escBtn">Close (ESC)</span>
<div class="J_recordDetailOverlayContent"></div>
</div>
<script type="text/template" id="main_table_row">
<td class="data_id"><%= _id %></td>
<td><%= method %></td>
<td class="http_status http_status_<%= statusCode %>"><%= statusCode %></td>
<td title="<%= host %>"><%= host %></td>
<td title="<%= path %>"><%= path %></td>
<td><%= mime %></td>
</script>
<script type="text/template" id="detail_tpl">
<section class="req">
<h4 class="subTitle">request</h4>
<div class="detail">
<ul class="uk-list">
<li><%= method %> <%= host %></li>
<li><span title="<%= path %>"><%= path %></span></li>
<% _.each(reqHeader, function(v,k) { %> <li><strong><%= k %></strong> : <%= v %></li><% }); %>
</ul>
</div>
</section>
<% if(statusCode) { %>
<section class="resHeader">
<h4 class="subTitle">response header</h4>
<div class="detail">
<ul class="uk-list">
<li>HTTP/1.1 <span class="http_status http_status_<%= statusCode %>"><%= statusCode %></span></li>
<% _.each(resHeader, function(v,k) { %> <li><strong><%= k %></strong> : <%= v %></li><% }); %>
</ul>
</div>
</section>
<section class="resBody">
<h4 class="subTitle">response body</h4>
<div class="detail">
<form class="uk-form">
<textarea class="J_responseBody">loading...</textarea>
</form>
</div>
</section>
<% } %>
</script>
<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>
seajs.config({
base: 'http://static.alipayobjects.com/',
alias: {
'$' : 'jquery/jquery/1.7.2/jquery',
'Backbone' : 'gallery/backbone/1.1.2/backbone.js',
'Underscore': 'gallery/underscore/1.6.0/underscore.js'
}
});
seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
Backbone.$ = $;
$(function(){
//record detail
//backbone太麻烦了，这里手写拉倒..
var DetailView = function(){
var self = this,
$detailEl = $(".J_recordDetailOverlay");
$(document).on("keyup",function(e){
if(e.keyCode == 27){ //ESC
self.hideDetail();
}
});
$detailEl.on("click",function(e){
e.stopPropagation();
});
$(".J_escBtn",$detailEl).on("click",function(e){
self.hideDetail();
});
self.showDetail = function(data){
var tpl = _.template($("#detail_tpl").html() , data);
$(".J_recordDetailOverlayContent",$detailEl).html(tpl);
$detailEl.show();
if(data.statusCode){ //if finished
$.ajax({
url:"/body?id=" + data._id,
headers:{
anyproxy_web_req : true
},
type : "GET",
success:function(data){
$(".J_responseBody", $detailEl).html(data);
}
});
}
}
self.hideDetail = function(){
$detailEl.hide();
}
};
var detailPanel = new DetailView();
//record list
var RecordModel = Backbone.Model.extend({});
var RecordList = Backbone.Collection.extend({
initialize:function(){
var self = this;
self.on("add",function(data){
new RecordRowView({
model:data,
detailPanel : detailPanel
});
});
}
});
var RecordRowView = Backbone.View.extend({
tagName : "tr",
className:function(){
return this.model.toJSON().id % 2 ? "row_odd" : "row_even";
},
tpl : $("#main_table_row").html(),
initialize:function(data){
var self = this;
self.model.on("change",self.render,self);
self.addNewRecord();
self.detailPanel = data.detailPanel;
},
events: {
click: function(){
var self = this;
var detailData = self.model.toJSON();
self.detailPanel.showDetail(detailData);
}
},
render: function(){
var data = this.model.toJSON();
if(!data.statusCode){
data.statusCode = "-";
}
if(!data.mime){
data.mime = "-";
}
var html = _.template(this.tpl, data);
this.$el.attr("recordId",data.id).empty().html(html);
return this;
},
addNewRecord:function(){
$(".J_tableBody").prepend(this.render().$el);
}
});
var recList = new RecordList();
var dataSocket = new WebSocket("ws://127.0.0.1:8003");
dataSocket.onmessage = function(event){
var data = JSON.parse(event.data);
var previous;
if(previous = recList.get(data.id)){
previous.set(data);
}else{
recList.add(new RecordModel(data),{merge: true});
}
}
dataSocket.onerror = function(e){
alert("socket err, please refresh");
console.log(e);
}
});
});
</script>
<style type="text/css">
.topHead{
background: #000;
color: rgb(204,204,204);
height: 42px;
position: relative;
}
.mainTableWrapper{
margin-top: 0;
}
.mainTableWrapper table{
table-layout: fixed;
}
.mainTableWrapper td,
.mainTableWrapper th{
padding: 4px 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mainTableWrapper .col_id{
width: 25px;
padding-right: 20px;
}
.mainTableWrapper .col_code{
width: 40px;
}
.mainTableWrapper .col_method{
width: 60px;
}
.mainTableWrapper .col_host{
width: 180px;
}
.mainTableWrapper tr.row_odd{
background: #f5f5f5;
}
.mainTableWrapper tr.row_even{
background: #FFFFFF;
}
.uk-table-hover tbody tr:hover{
cursor: pointer;
background: #CCC;
}
.resHeader{
width: 400px;
}
.resBody textarea{
width: 400px;
height: 280px;
}
.subTitle{
padding-left: 6px;
border-left: 3px solid #1FA2D6;
font-size: 16px;
line-height: 16px;
}
.detail{
padding-left: 12px;
}
.recordDetailOverlay{
width: 61.8%;
height: 100%;
position: fixed;
right: 0;
background: #FFF;
border-left: 1px solid #CCC;
top: 0;
padding: 10px 10px 20px 10px;
overflow-y:scroll;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.recordDetailOverlay .escBtn{
position: absolute;
right: 10px;
top: 8px;
color: #777;
cursor: pointer;
text-decoration: underline;
}
.recordDetailOverlay li{
white-space: nowrap;
word-wrap: break-word;
}
.data_id{
color: #777;
}
.http_status{
font-weight: 700;
}
.http_status_200{
color: #408E2F;
}
.http_status_404,
.http_status_500,
.http_status_501,
.http_status_502,
.http_status_503,
.http_status_504
{
color: #910A0A;
}
</style>
</body>
</html>