XiaoMo/anyproxy
1
0
Fork 0
mirror of https://github.com/alibaba/anyproxy.git synced 2025-06-05 16:58:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

add a filter on web ui

Browse Source
This commit is contained in:
OttoMao 2015-07-01 23:18:35 +08:00
parent ab5bd5d6e6
commit b595e3aa9c
9 changed files with 207 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG
View File

@ -1,3 +1,11 @@
1 July: anyproxy 3.6.0:
* add a filter on web ui
1 July: anyproxy 3.5.2:
* optimize the row height on web ui
18 June: anyproxy 3.5.1:
* print a hint when using SNI features in node <0.12

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "anyproxy",
"version": "3.5.2",
"version": "3.6.0",
"description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.",
"main": "proxy.js",
"bin": {

29
web/build/index.js
View File

@ -101,6 +101,12 @@ var eventCenter = new EventManager();
list : recordSet
});
});
eventCenter.addListener("filterUpdated",function(newKeyword){
Panel.setState({
filter: newKeyword
});
});
})();
@ -138,4 +144,27 @@ var eventCenter = new EventManager();
ifPause = false;
}
});
function switchFilterWidget(ifToShow){
if(ifToShow){
$(".J_filterSection").show();
$("#J_filterKeyword").focus();
}else{
$(".J_filterSection").hide();
$("#J_filterKeyword").val("");
}
}
$(".J_toggleFilterBtn").on("click",function(){
switchFilterWidget( $(".J_filterSection").css("display") == "none" );
});
$(".J_filterCloseBtn").on("click",function(){
switchFilterWidget(false);
});
$("#J_filterKeyword").on("change keyup",function(){
eventCenter.dispatchEvent("filterUpdated",this.value);
});
})();

24
web/build/recordPanel.js
View File

@ -4,14 +4,34 @@ function init(React){
var RecordPanel = React.createClass({displayName: "RecordPanel",
getInitialState : function(){
return {
list : []
list : [],
filter: ""
};
},
render : function(){
var rowCollection = [];
var rowCollection = [],
filterStr = this.state.filter,
filter = filterStr;
//regexp
if(filterStr[0]=="/" && filterStr[filterStr.length-1]=="/"){
try{
filter = new RegExp(filterStr.substr(1,filterStr.length-2));
}catch(e){}
}
for(var i = this.state.list.length-1 ; i >=0 ; i--){
var item = this.state.list[i];
if(item){
if(filter && item){
try{
if(typeof filter == "object" && !filter.test(item.url)){
continue;
}else if(typeof filter == "string" && item.url.indexOf(filter) < 0){
continue;
}
}catch(e){}
}
if(item._justUpdated){
item._justUpdated = false;

27
web/css/page.css
View File

@ -285,4 +285,31 @@ body, html {
opacity:0.5;
cursor: col-resize;
z-index:999
}
.filterSection{
background: #FFF;
padding: 15px 10px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #333;
border-radius: 3px;
}
.filterSection .filterIcon{
font-size: 16px;
}
.filterSection form{
display: inline-block;
margin-right: 5px;
}
.filterSection input{
width: 250px;
}
.filterSection i{
cursor: pointer;
}

26
web/index.html
View File

@ -14,21 +14,31 @@
</div>
<div class="ctrlWrapper">
<a href="#"><span class="J_statusBtn topBtn"><i class="uk-icon-stop"></i>Stop</span></a>
<a href="#"><span class="J_statusBtn btn_disable topBtn"><i class="uk-icon-play"></i>Resume</span></a>
<a href="#" class="J_clearBtn"><span class="topBtn"><i class="uk-icon-eraser"></i>Clear(Ctrl+X)</span></a>
<span class="sep">|</span>
<a href="/fetchCrtFile" target="_blank"><span class="topBtn"><i class="uk-icon-certificate"></i>Download rootCA.crt</span></a>
<a href="/qr_root" class="J_fetchRootQR" target="_blank"><span class="topBtn"><i class="uk-icon-certificate"></i>QRCode of rootCA.crt</span></a>
<a href="#"><span class="topBtn J_statusBtn"><i class="uk-icon-stop"></i>Stop</span></a>
<a href="#"><span class="topBtn J_statusBtn btn_disable"><i class="uk-icon-play"></i>Resume</span></a>
<a href="#"><span class="topBtn J_toggleFilterBtn"><i class="uk-icon-filter"></i>Filter</span></a>
<a href="#"><span class="topBtn J_clearBtn"><i class="uk-icon-eraser"></i>Clear(Ctrl+X)</span></a>
<span class="sep">|</span>
<a href="https://github.com/alibaba/anyproxy" target="_blank"><span class="topBtn"><i class="uk-icon-external-link-square"></i>Anyproxy(Github)</span></a>
<a href="/fetchCrtFile" target="_blank"><span class="topBtn"><i class="uk-icon-certificate"></i>Download rootCA.crt</span></a>
<a href="/qr_root" class="J_fetchRootQR" target="_blank"><span class="topBtn"><i class="uk-icon-qrcode"></i>QRCode of rootCA.crt</span></a>
<span class="sep">|</span>
<a href="https://github.com/alibaba/anyproxy" target="_blank"><span class="topBtn"><i class="uk-icon-external-link-square"></i>Github</span></a>
</div>
<div class="ruleDesc">
<span><i class="uk-icon-chain"></i>{{rule}}</span>
<span><i class="uk-icon-chain"></i>Rule : {{rule}}</span>
</div>
<div class="filterSection J_filterSection" style="display:none">
<form class="uk-form">
<input class="uk-form-large" type="text" id="J_filterKeyword" placeholder="type keywords or /^regExp$/" width="200"/>
</form>
<i class="uk-icon-times J_filterCloseBtn"></i>
</div>
<div style="clear:both"></div>
</div>

53
web/page.js
View File

@ -147,6 +147,12 @@
list : recordSet
});
});
eventCenter.addListener("filterUpdated",function(newKeyword){
Panel.setState({
filter: newKeyword
});
});
})();
@ -184,6 +190,29 @@
ifPause = false;
}
});
function switchFilterWidget(ifToShow){
if(ifToShow){
$(".J_filterSection").show();
$("#J_filterKeyword").focus();
}else{
$(".J_filterSection").hide();
$("#J_filterKeyword").val("");
}
}
$(".J_toggleFilterBtn").on("click",function(){
switchFilterWidget( $(".J_filterSection").css("display") == "none" );
});
$(".J_filterCloseBtn").on("click",function(){
switchFilterWidget(false);
});
$("#J_filterKeyword").on("change keyup",function(){
eventCenter.dispatchEvent("filterUpdated",this.value);
});
})();
/***/ },
@ -395,14 +424,34 @@
var RecordPanel = React.createClass({displayName: "RecordPanel",
getInitialState : function(){
return {
list : []
list : [],
filter: ""
};
},
render : function(){
var rowCollection = [];
var rowCollection = [],
filterStr = this.state.filter,
filter = filterStr;
//regexp
if(filterStr[0]=="/" && filterStr[filterStr.length-1]=="/"){
try{
filter = new RegExp(filterStr.substr(1,filterStr.length-2));
}catch(e){}
}
for(var i = this.state.list.length-1 ; i >=0 ; i--){
var item = this.state.list[i];
if(item){
if(filter && item){
try{
if(typeof filter == "object" && !filter.test(item.url)){
continue;
}else if(typeof filter == "string" && item.url.indexOf(filter) < 0){
continue;
}
}catch(e){}
}
if(item._justUpdated){
item._justUpdated = false;

29
web/src/index.js
View File

@ -101,6 +101,12 @@ var eventCenter = new EventManager();
list : recordSet
});
});
eventCenter.addListener("filterUpdated",function(newKeyword){
Panel.setState({
filter: newKeyword
});
});
})();
@ -138,4 +144,27 @@ var eventCenter = new EventManager();
ifPause = false;
}
});
function switchFilterWidget(ifToShow){
if(ifToShow){
$(".J_filterSection").show();
$("#J_filterKeyword").focus();
}else{
$(".J_filterSection").hide();
$("#J_filterKeyword").val("");
}
}
$(".J_toggleFilterBtn").on("click",function(){
switchFilterWidget( $(".J_filterSection").css("display") == "none" );
});
$(".J_filterCloseBtn").on("click",function(){
switchFilterWidget(false);
});
$("#J_filterKeyword").on("change keyup",function(){
eventCenter.dispatchEvent("filterUpdated",this.value);
});
})();

24
web/src/recordPanel.js
View File

@ -4,14 +4,34 @@ function init(React){
var RecordPanel = React.createClass({
getInitialState : function(){
return {
list : []
list : [],
filter: ""
};
},
render : function(){
var rowCollection = [];
var rowCollection = [],
filterStr = this.state.filter,
filter = filterStr;
//regexp
if(filterStr[0]=="/" && filterStr[filterStr.length-1]=="/"){
try{
filter = new RegExp(filterStr.substr(1,filterStr.length-2));
}catch(e){}
}
for(var i = this.state.list.length-1 ; i >=0 ; i--){
var item = this.state.list[i];
if(item){
if(filter && item){
try{
if(typeof filter == "object" && !filter.test(item.url)){
continue;
}else if(typeof filter == "string" && item.url.indexOf(filter) < 0){
continue;
}
}catch(e){}
}
if(item._justUpdated){
item._justUpdated = false;