mirror of
https://github.com/alibaba/anyproxy.git
synced 2025-04-21 14:04:21 +00:00
430 lines
9.2 KiB
HTML
430 lines
9.2 KiB
HTML
<!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">
|
||
<div id="dragbar"></div>
|
||
<span class="escBtn J_escBtn">Close (ESC)</span>
|
||
<div class="J_recordDetailOverlayContentWrapper">
|
||
<div class="J_recordDetailOverlayContent"></div>
|
||
</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);
|
||
}
|
||
|
||
|
||
var i = 0;
|
||
var dragging = false,
|
||
pageX = 0;
|
||
$('#dragbar').mousedown(function(e){
|
||
pageX = e.pageX;
|
||
e.preventDefault();
|
||
dragging = true;
|
||
var main = $('.J_recordDetailOverlay');
|
||
var ghostbar = $('<div>',{
|
||
id:'ghostbar',
|
||
css: {
|
||
height: main.outerHeight(),
|
||
top: main.offset().top,
|
||
left: main.offset().left
|
||
}
|
||
}).appendTo('body');
|
||
|
||
$(document).mousemove(function(e){
|
||
ghostbar.css("left",e.pageX);
|
||
});
|
||
});
|
||
|
||
$(document).mouseup(function(e){
|
||
if (dragging) {
|
||
var deltaPageX = e.pageX - pageX;
|
||
|
||
$('.J_recordDetailOverlay').css("width",$('.J_recordDetailOverlay').width() - deltaPageX);
|
||
$('.J_recordDetailOverlay').css("left",pageX + deltaPageX);
|
||
if($('.J_recordDetailOverlay').width()<=100){
|
||
$('.J_recordDetailOverlay').animate({
|
||
'right': $('.J_recordDetailOverlay').width()
|
||
},300,function(){
|
||
$('.J_escBtn').trigger('click');
|
||
});
|
||
|
||
}
|
||
pageX = e.pageX;
|
||
$('#ghostbar').remove();
|
||
$(document).unbind('mousemove');
|
||
dragging = false;
|
||
|
||
}
|
||
});
|
||
|
||
|
||
});
|
||
|
||
});
|
||
|
||
</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: 0;
|
||
overflow:hidden;
|
||
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;
|
||
z-index:1;
|
||
}
|
||
|
||
.recordDetailOverlay li{
|
||
white-space: nowrap;
|
||
word-wrap: break-word;
|
||
}
|
||
.J_recordDetailOverlayContentWrapper{
|
||
width:100%;
|
||
height:100%;
|
||
position:relative;
|
||
right:0;
|
||
overflow:scroll;
|
||
margin-left:3px;
|
||
}
|
||
.J_recordDetailOverlayContent{
|
||
padding:20px;
|
||
height:100%;
|
||
box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
-webkit-box-sizing: border-box;
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
#dragbar{
|
||
position:absolute;
|
||
left:0px;
|
||
background-color:black;
|
||
height:100%;
|
||
width: 3px;
|
||
cursor: col-resize;
|
||
}
|
||
#ghostbar{
|
||
width:3px;
|
||
background-color:#000;
|
||
opacity:0.5;
|
||
position:absolute;
|
||
cursor: col-resize;
|
||
z-index:999
|
||
}
|
||
</style>
|
||
</body>
|
||
</html> |